body{
font-family:Poppins, sans-serif;
background:#0f172a;
color:white;
scroll-behavior:smooth;
overflow-x:hidden;
}

/* NAVBAR */
.navbar{
backdrop-filter: blur(12px);
background: rgba(15,23,42,0.75);
transition:0.3s;
}

.nav-link.active{
color:#60a5fa !important;
}

/* HERO */
.hero{
min-height:100vh;
display:flex;
align-items:center;
background: linear-gradient(135deg,#2563eb,#9333ea);
text-align:center;
position:relative;
overflow:hidden;
}

.hero::before{
content:"";
position:absolute;
width:600px;
height:600px;
background: radial-gradient(circle,rgba(255,255,255,0.15),transparent);
top:-200px;
right:-200px;
animation: float 6s infinite ease-in-out;
}

@keyframes float{
0%,100%{transform:translateY(0)}
50%{transform:translateY(20px)}
}

.hero img{
width:160px;
height:160px;
border-radius:50%;
border:5px solid white;
box-shadow:0 10px 30px rgba(0,0,0,0.4);
margin-bottom:20px;
transition:0.4s;
}

.hero img:hover{
transform:scale(1.08);
}

/* GRADIENT TEXT */
.gradient-text{
background:linear-gradient(45deg,#fff,#93c5fd);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

/* GLASS CARD */
.glass{
background: rgba(255,255,255,0.08);
backdrop-filter: blur(12px);
border-radius:20px;
padding:25px;
transition:0.4s;
border:1px solid rgba(255,255,255,0.08);
}

.glass:hover{
transform: translateY(-10px);
box-shadow:0 20px 40px rgba(0,0,0,0.5);
border-color: rgba(255,255,255,0.2);
}

/* PROJECT CARD GLOW */
.project-card:hover{
box-shadow:0 0 25px rgba(147,51,234,0.6);
}

/* SECTION */
.section{
padding:90px 0;
}

.section-title{
font-weight:700;
margin-bottom:40px;
text-align:center;
}

/* SKILLS */
.skill-badge{
background: linear-gradient(45deg,#3b82f6,#9333ea);
padding:8px 16px;
border-radius:30px;
margin:5px;
display:inline-block;
transition:0.3s;
}

.skill-badge:hover{
transform:scale(1.1);
}

/* FOOTER */
.footer{
background:#020617;
padding:30px;
text-align:center;
}

/* BACK TO TOP */
#topBtn{
position:fixed;
bottom:30px;
right:30px;
display:none;
z-index:999;
}

/* SCROLL ANIMATION */
.reveal{
opacity:0;
transform:translateY(60px);
transition:1s;
}

.reveal.active{
opacity:1;
transform:translateY(0);
}
#about img{
transition:0.4s;
}

#about img:hover{
transform:scale(1.05);
}

.certificate-card{
cursor:pointer;
transition:0.4s;
}

.certificate-card:hover{
transform:scale(1.05);
box-shadow:0 0 25px rgba(59,130,246,0.5);
}