body{
margin:0;
font-family:Arial, Helvetica, sans-serif;
background:#020617;
color:white;
scroll-behavior:smooth;
}


/* NAVBAR */

.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:40px;
list-style:none;
}

.nav-links a{
color:white;
text-decoration:none;
transition:0.3s;
}

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


/* HERO */

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

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

.gradient{
background:linear-gradient(90deg,#00bfff,#3a8dff);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.role{
color:#00bfff;
margin-top:10px;
}

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

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

.hero-buttons a{
border:1px solid #00bfff;
padding:10px 20px;
color:#00bfff;
text-decoration:none;
border-radius:6px;
transition:0.3s;
}

.hero-buttons a:hover{
background:#00bfff;
color:black;
transform:translateY(-2px);
}


/* SKILLS */

.skills{
padding:120px 80px;
text-align:center;
}

.skills-row{
display:flex;
justify-content:center;
gap:25px;
flex-wrap:wrap;
margin-top:40px;
align-items:flex-start;
}

.skill-card{
width:200px;
background:#0f172a;
padding:18px;
border-radius:10px;
border:1px solid #1e293b;
cursor:pointer;
transition:0.35s;
min-height:110px;
}

.skill-card:hover{
transform:translateY(-5px);
border-color:#00bfff;
}

.skill-card.active{
border-color:#00bfff;
box-shadow:0 10px 30px rgba(0,191,255,0.3);
transform:scale(1.05);
}

.skill-content{
max-height:0;
overflow:hidden;
transition:0.4s ease;
list-style:none;
padding:0;
}

.skill-card.active .skill-content{
max-height:300px;
margin-top:12px;
}

.skill-content li{
display:inline-block;
margin:5px;
padding:5px 11px;
border-radius:14px;
background:rgba(0,191,255,0.08);
border:1px solid rgba(0,191,255,0.25);
color:#38bdf8;
font-size:13px;
font-weight:500;
transition:0.25s;
}

.skill-content li:hover{
background:#00bfff;
color:#021024;
transform:translateY(-1px);
box-shadow:0 4px 10px rgba(0,191,255,0.3);
}

.arrow{
display:block;
margin-top:15px;
color:#00bfff;
}

.skill-card.active .arrow{
transform:rotate(180deg);
}


/* PROJECTS */

.projects{
padding:120px 80px;
text-align:center;
}

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

.project-card{
background:#0f172a;
padding:30px;
border-radius:12px;
border:1px solid #1e293b;
transition:0.3s;
text-align:left;
}

.project-card:hover{
transform:translateY(-10px);
border-color:#00bfff;
box-shadow:0 10px 30px rgba(0,191,255,0.3);
}

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

.project-card p{
color:#aaa;
line-height:1.5;
}


/* TECH STACK BADGES */

.tech span{
display:inline-block;
margin:4px 6px 6px 0;
padding:4px 10px;
border-radius:15px;
background:rgba(0,191,255,0.1);
border:1px solid rgba(0,191,255,0.3);
color:#38bdf8;
font-size:12px;
font-weight:500;
transition:0.25s;
}

.tech span:hover{
background:#00bfff;
color:#021024;
transform:translateY(-1px);
}


/* PROJECT BUTTON */

.project-btn{
display:inline-block;
margin-top:12px;
padding:6px 14px;
border:1px solid #00bfff;
border-radius:20px;
text-decoration:none;
color:#00bfff;
font-size:13px;
font-weight:500;
letter-spacing:0.3px;
transition:0.3s;
}

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


/* ACHIEVEMENTS */

.achievements{
padding:120px 80px;
text-align:center;
}

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

.achievement-card{
background:#0f172a;
border-radius:12px;
padding:20px;
text-align:center;
cursor:pointer;
position:relative;
border:1px solid rgba(0,191,255,0.25);
transition:0.35s;
}

 .achievement-card img{
width:100%;
max-height:170px;
object-fit:contain;
border-radius:8px;
margin-bottom:15px;
transition:0.4s;
background:#0f172a;
}
.achievement-card h3{
color:#38bdf8;
font-size:20px;
margin-bottom:8px;
font-weight:600;
letter-spacing:0.3px;
}

.achievement-card p{
color:#cbd5f5;
font-size:15px;
line-height:1.6;
font-weight:500;
margin-top:6px;
}

/* GLOW BORDER */

.achievement-card::before{
content:"";
position:absolute;
inset:0;
border-radius:12px;
padding:1px;
background:linear-gradient(
120deg,
transparent,
#00bfff,
transparent
);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite:xor;
mask-composite:exclude;
opacity:0.6;
}


/* HOVER EFFECT */

.achievement-card:hover{
transform:translateY(-10px) scale(1.02);
box-shadow:0 15px 35px rgba(0,191,255,0.25);
}

.achievement-card:hover img{
transform:scale(1.05);
}


/* Highlight Epochon */

.achievement-card:first-child{
border:1px solid #00bfff;
box-shadow:0 0 15px rgba(0,191,255,0.25);
}


/* CONTACT */

.contact{
padding:120px 80px;
text-align:center;
}

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

.contact-links a{
border:1px solid #00bfff;
padding:10px 20px;
border-radius:6px;
color:#00bfff;
text-decoration:none;
transition:0.3s;
}

.contact-links a:hover{
background:#00bfff;
color:black;
}


/* BACK TO TOP */

#topBtn{
position:fixed;
bottom:30px;
right:30px;
background:#00bfff;
border:none;
padding:12px 15px;
font-size:18px;
border-radius:6px;
cursor:pointer;
box-shadow:0 5px 15px rgba(0,191,255,0.3);
}
.contact-btn{
border:1px solid #00bfff;
padding:10px 20px;
border-radius:6px;
color:#00bfff;
background:none;
cursor:pointer;
font-size:14px;
transition:0.3s;
}

.contact-btn:hover{
background:#00bfff;
color:black;
}