*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:'Segoe UI', sans-serif;
background:#020617;
color:white;
scroll-behavior:smooth;
}

a{
text-decoration:none;
color:inherit;
}

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 80px;
background:black;
position:sticky;
top:0;
z-index:1000;
}

.logo{
color:#00bfff;
font-size:22px;
font-weight:bold;
}

.nav-links{
display:flex;
gap:30px;
list-style:none;
}

.nav-links a:hover{
color:#00bfff;
}

.hero{
height:90vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
padding:20px;
}

.hero-title{
font-size:48px;
}

.gradient{
color:#00bfff;
}

.role{
margin-top:10px;
color:#38bdf8;
}

.hero-desc{
max-width:600px;
margin-top:10px;
color:#aaa;
}

.hero-buttons{
margin-top:25px;
display:flex;
gap:20px;
}

.btn{
border:2px solid #00bfff;
padding:10px 25px;
border-radius:30px;
color:#00bfff;
transition:0.3s;
font-weight:500;
}

.btn:hover{
background:#00bfff;
color:#021024;
transform:translateY(-3px);
box-shadow:0 6px 20px rgba(0,191,255,0.4);
}

section{
padding:80px;
text-align:center;
}

.skills{
background:#020617;
}

.skills-row{
display:flex;
gap:20px;
justify-content:center;
flex-wrap:wrap;
margin-top:40px;
}

.skill-card{
background:#0f172a;
padding:25px 20px;
width:230px;
border-radius:14px;
border:1px solid #1e293b;
transition:0.3s;
}

.skill-card:hover{
background:#0b2440;
border-color:#00bfff;
box-shadow:0 10px 30px rgba(0,191,255,0.2);
transform:translateY(-5px);
}

.skill-card h3{
color:#38bdf8;
margin-bottom:15px;
}

.skill-content{
list-style:none;
display:flex;
flex-direction:column;
align-items:center;
gap:10px;
}

.skill-pill{
padding:7px 16px;
border-radius:25px;
border:1px solid #00bfff55;
color:#38bdf8;
background:#00bfff15;
font-size:13px;
transition:0.25s;
min-width:140px;
text-align:center;
}

.skill-pill:hover{
background:#00bfff;
color:#021024;
box-shadow:0 6px 18px rgba(0,191,255,0.4);
transform:scale(1.05);
}

.project-container{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:30px;
margin-top:40px;
}

.project-card{
background:#0f172a;
padding:24px;
border-radius:14px;
border:1px solid #1e293b;
text-align:left;
transition:0.3s;
display:flex;
flex-direction:column;
justify-content:space-between;
min-height:240px;
}

.project-card:hover{
background:#0b2440;
border-color:#00bfff;
box-shadow:0 10px 25px rgba(0,191,255,0.2);
transform:translateY(-6px);
}

.project-card h3{
color:#38bdf8;
font-size:18px;
margin-bottom:8px;
}

.project-card p{
color:#9ca3af;
font-size:14px;
line-height:1.6;
margin-bottom:12px;
}

.tech{
margin:10px 0 15px 0;
}

.tech span{
display:inline-block;
margin:4px;
padding:5px 12px;
border-radius:20px;
background:#00bfff22;
color:#00bfff;
font-size:12px;
}

.project-card .btn{
border:1.5px solid #00bfff;
padding:6px 16px;
border-radius:20px;
color:#00bfff;
font-size:13px;
transition:0.25s;
width:fit-content;
}

.project-card .btn:hover{
background:#00bfff;
color:#021024;
transform:translateY(-2px);
box-shadow:0 4px 12px rgba(0,191,255,0.3);
}

.achievement-container{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:30px;
margin-top:40px;
}

.achievement-card{
background:#0f172a;
padding:24px;
border-radius:14px;
border:1px solid #1e293b;
transition:0.3s;
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
min-height:260px;
}

.achievement-card:hover{
background:#0b2440;
border-color:#00bfff;
box-shadow:0 10px 25px rgba(0,191,255,0.2);
transform:translateY(-6px);
}

.achievement-card img{
width:100%;
height:160px;
object-fit:contain;
background:#020617;
border-radius:10px;
margin-bottom:12px;
padding:6px;
}

.achievement-card h3{
color:#38bdf8;
margin-bottom:6px;
font-size:16px;
}

.achievement-card p{
color:#9ca3af;
font-size:14px;
line-height:1.5;
}

.contact-links{
display:flex;
justify-content:center;
gap:20px;
margin-top:20px;
flex-wrap:wrap;
}

#topBtn{
position:fixed;
bottom:20px;
right:20px;
background:#00bfff;
padding:10px 14px;
border-radius:50%;
color:black;
transition:0.3s;
}

#topBtn:hover{
box-shadow:0 6px 18px rgba(0,191,255,0.4);
}

@media (min-width:769px) and (max-width:1024px){

.navbar{
padding:20px 40px;
}

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

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

@media (max-width:768px){

.navbar{
padding:15px 20px;
}

.nav-links{
display:none;
}

.hero{
height:auto;
padding:60px 20px;
}

.hero-title{
font-size:32px;
}

.hero-buttons{
flex-direction:column;
align-items:center;
}

section{
padding:60px 20px;
}

.skills-row{
flex-direction:column;
align-items:center;
}

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

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

.btn{
padding:8px 16px;
font-size:12px;
}
}