/* GLOBAL */

body{
font-family:Poppins, Arial;
margin:0;
background:#f2f7f6;
color:#1f4f4a;
padding-top:66px;
}

.hero{
text-align:center;
}

.hero-left h1{
font-size:48px;
margin:40px auto;
text-align:center;
width:100%;
}
/* NAVBAR */

.nav{
position:fixed;
top:0;
left:0;
width:100%;
display:flex;
justify-content:center;
align-items:center;
padding:20px 0;
background:#245854;
z-index:1000;
}

.nav nav{
display:flex;
gap:40px;
}

.nav a{
text-decoration:none;
color:white;
font-weight:500;
}


/* HERO SECTION */

.hero-ovidiu{
background:#2b635c;
color:rgb(98, 233, 210);
position:relative;
padding:140px 80px 220px 80px;
overflow:hidden;
}

.hero-content{
display:flex;
align-items:center;
justify-content:space-between;
max-width:1200px;
margin:auto;
position:relative;
z-index:2;
}


/* HERO TEXT */

.hero-text h1{
font-size:90px;
margin:0;
}

.subtitle{
font-size:38px;
margin-top:10px;
opacity:0.9;
}

.subtitle span{
color:#ffffff;
}


/* PROFILE IMAGE */

.hero-image img{
width:300px;
position:relative;
z-index:2;
}


/* FLOATING ICONS */

.game-icon{
width:65px;
position:absolute;
top:40px;
animation:float 4s ease-in-out infinite;
}

@keyframes float{
0%{transform:translateY(0);}
50%{transform:translateY(-10px);}
100%{transform:translateY(0);}
}

.icon1{left:73%; top:150px;}
.icon2{left:89%; top:180px;}
.icon3{left:70%; top:250px;}
.icon4{left:88%; top:270px;}


/* WAVE DIVIDER */

.wave{
position:absolute;
bottom:-40px;
left:0;
width:100%;
height:260px;
background:#7da8a2;
z-index:1;
overflow:hidden;
}

#wave canvas{
width:100%;
height:100%;
}

#dinoGame{
position:absolute;
bottom:0;
left:0;
width:100%;
height:100%;
}

.wave::before{
content:"";
position:absolute;
top:-4px;
left:0;
width:100%;
height:20px;
background:white;
border-bottom-left-radius:50% 30px;
border-bottom-right-radius:50% 30px;
}
.youtube-btn{
display:inline-flex;
align-items:center;
gap:10px;
margin-top:2px;
padding:5px 18px;
background:#7da8a2;
color:white;
font-weight:500;
text-decoration:none;
border-radius:8px;
transition:all 0.25s ease;
box-shadow:0 6px 14px rgba(0,0,0,0.2);
}

.youtube-btn:hover{
transform:translateY(-3px);
background:#e52d27;
box-shadow:0 10px 20px rgba(0,0,0,0.25);
}

.play-icon{
font-size:14px;
background:white;
color:#ff3b30;
width:22px;
height:22px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
}


/* STATS SECTION */

.about-section{
padding:60px 80px 120px 80px;
background:#f6fbfa;
text-align:left;
}

.about-container{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}

.about-text h2{
font-size:42px;
margin-bottom:20px;
}

.about-text p{
font-size:18px;
line-height:1.6;
color:#1f4f4a;
}


/* CARDS GRID */

.stats-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:30px;
}

.card{
background:#3e7c74;
padding:35px;
border-radius:8px;
text-align:center;
color:white;
height:80px;
display:flex;
flex-direction:column;
justify-content:center;
border:3px solid #1f4f4a;

/* slight shadow to lift the card */
box-shadow:0 6px 14px rgba(0,0,0,0.25);
transition:0.25s ease;
}
.card:hover{
border-color:#8fe3d6;
transform:translateY(-3px);
}
.card h3{
font-size:36px;
margin-bottom:5px;
}

.card p{
font-size:16px;
opacity:0.9;
}

@media(max-width:900px){

.about-container{
grid-template-columns:1fr;
}

.stats-grid{
grid-template-columns:1fr;
}

}

/* PROJECTS */

/* GAME TOOL SECTION */

.tool-section{
padding:100px 80px;
background:white;
}

.tool-container{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
max-width:1200px;
margin:auto;
}

.tool-text h2{
font-size:34px;
margin-bottom:20px;
}

.tool-text p{
font-size:18px;
line-height:1.6;
margin-bottom:15px;
}

.tool-text ul{
margin-top:10px;
padding-left:20px;
}

.tool-text li{
margin-bottom:10px;
font-size:17px;
}

.tool-image img{
width:100%;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.2);
}

/* CLIENT REVIEWS */

.reviews{
padding:100px 80px;
background:#f2f7f6;
text-align:center;
}

.reviews h2{
font-size:40px;
margin-bottom:50px;
}

.reviews-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:30px;
max-width:1100px;
margin:auto;
justify-items:center;
}

.reviews-grid img{
width:100%;
max-width:520px;
height:auto;
display:block;
border-radius:10px;
box-shadow:0 10px 25px rgba(0,0,0,0.15);
transition:0.3s;
}

.reviews-grid img:hover{
transform:scale(1.03);
}

.upwork-btn{
display:inline-block;
margin-top:40px;
padding:14px 28px;
background:#14a800;
color:white;
font-weight:600;
text-decoration:none;
border-radius:8px;
transition:0.25s;
box-shadow:0 6px 14px rgba(0,0,0,0.2);
}

.upwork-btn:hover{
background:#108a00;
transform:translateY(-2px);
box-shadow:0 10px 20px rgba(0,0,0,0.25);
}

/* SKILLS */

.skills{
padding:80px;
background:white;
text-align:center;
clear:both;
}

.skills h2{
font-size:40px;
}

.skill-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
margin-top:40px;
}
.skill-card{
background:#2b635c;
color:white;
padding:22px;
border-radius:12px;
font-weight:600;
font-size:15px;
text-align:center;
transition:all 0.25s ease;
box-shadow:0 8px 20px rgba(0,0,0,0.15);
display:flex;
align-items:center;
justify-content:center;
gap:10px;
}

.skill-card:hover{
background:#dfe9e7;
color:#1f3f3a;
transform:translateY(-6px);
box-shadow:0 14px 30px rgba(0,0,0,0.25);
}



/* CONTACT */

.contact{
padding:80px;
text-align:center;
background:#f2f7f6;
}

.contact h2{
font-size:24px;
}

.linkedin-btn{
display:inline-block;
margin-top:20px;
padding:12px 26px;
background:#0077b5;
color:white;
font-weight:600;
text-decoration:none;
border-radius:8px;
transition:0.25s;
box-shadow:0 6px 14px rgba(0,0,0,0.2);
}

.linkedin-btn:hover{
background:#005f8d;
transform:translateY(-2px);
box-shadow:0 10px 20px rgba(0,0,0,0.25);
}

/* FOOTER */

footer{
text-align:center;
padding:40px;
background:#1f4f4a;
color:white;
}



/* BUTTONS */

.btn{
padding:14px 26px;
border-radius:8px;
text-decoration:none;
margin-right:10px;
}

.primary{
background:white;
color:#1f4f4a;
}

.secondary{
border:2px solid white;
color:white;
}

html{
scroll-behavior:smooth;
}

/* RESPONSIVE */

@media(max-width:900px){

.skill-grid{
grid-template-columns:repeat(2,1fr);
}

.reviews-grid{
grid-template-columns:1fr;
}

.tool-container{
grid-template-columns:1fr;
}

}