body{
margin:0;
font-family:Arial, Helvetica, sans-serif;
background:linear-gradient(135deg,#0f172a,#020617);
color:white;
scroll-behavior:smooth;
}

/* NAVBAR */

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px;
background:#0b1328;
flex-wrap:wrap;
}

.logo{
font-size:28px;
}

.nav-links{
display:flex;
list-style:none;
gap:20px;
flex-wrap:wrap;
margin:0;
padding:0;
}

.nav-links a{
text-decoration:none;
color:#cbd5f5;
font-size:16px;
}

.nav-links a:hover{
color:#22c55e;
}

/* HERO */

.hero{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
padding:80px 20px;
}

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

.role{
font-size:32px;
color:#22c55e;
min-height:40px;
margin-top:10px;
}

.hero p{
max-width:600px;
margin-top:15px;
font-size:18px;
color:#cbd5f5;
}

/* BUTTONS */

.buttons{
margin-top:30px;
display:flex;
gap:15px;
justify-content:center;
flex-wrap:wrap;
}

.buttons a{
text-decoration:none;
}

.btn{
padding:12px 25px;
font-size:16px;
border-radius:8px;
display:inline-block;
}

.primary{
background:#22c55e;
color:white;
}

.outline{
border:2px solid #22c55e;
color:#22c55e;
}

.outline:hover{
background:#22c55e;
color:white;
}

/* IMAGE */

.hero-image{
margin-top:50px;
}

.hero-image img{
width:320px;
max-width:90%;
border-radius:20px;
border:4px solid #22c55e;
display:block;
margin:auto;
}

/* SECTIONS */

.section{
padding:90px 20px;
text-align:center;
}

/* PROJECT CARDS */

.project-container{
display:flex;
justify-content:center;
gap:30px;
flex-wrap:wrap;
margin-top:40px;
}

.project-card{
background:#0b1328;
padding:30px;
border-radius:10px;
width:250px;
transition:0.3s;
}

.project-card:hover{
transform:translateY(-5px);
}

/* INFO CARDS */

.info-card{
background:#0b1328;
padding:35px;
border-radius:10px;
max-width:650px;
margin:auto;
margin-top:40px;
}

/* SKILLS */

.skills{
list-style:none;
padding:0;
text-align:left;
}

.skills li{
margin:12px 0;
font-size:18px;
color:#cbd5f5;
}

/* MOBILE */

@media(max-width:768px){

.navbar{
flex-direction:column;
align-items:flex-start;
}

.nav-links{
justify-content:flex-start;
width:100%;
margin-top:10px;
}

.hero h1{
font-size:36px;
}

.role{
font-size:22px;
}

.hero p{
font-size:16px;
}

.hero-image img{
width:220px;
}

.project-card{
width:90%;
}

.info-card{
width:90%;
padding:25px;
}

}