*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

/* BACKGROUND */
body{
background: linear-gradient(-45deg, #0f172a, #020617, #0f172a, #020617);
background-size: 400% 400%;
animation: gradientBG 15s ease infinite;
color:white;
}

@keyframes gradientBG{
0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}
}

/* CONTAINER */
.container{
max-width:1200px;
margin:auto;
padding:0 15px;
}

/* NAVBAR */
.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 5%;
background:#020617;
position:fixed;
width:100%;
z-index:1000;
}

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

.nav-links a{
color:white;
text-decoration:none;
position:relative;
}

.nav-links a::after{
content:"";
position:absolute;
width:0;
height:2px;
bottom:-5px;
left:0;
background:#38bdf8;
transition:0.3s;
}

.nav-links a:hover::after{
width:100%;
}

/* HERO */
.hero{
position:relative;
min-height:85vh;
display:flex;
align-items:center;
padding:100px 5% 60px;
}

#particles-js{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
z-index:0;
}

.hero-content{
display:flex;
justify-content:space-between;
align-items:center;
gap:50px;
z-index:1;
flex-wrap:wrap;
}

.hero-left{
flex:1;
max-width:500px;
}

/* SOCIAL TOP */
.top-icons{
display:flex;
gap:12px;
margin-bottom:15px;
}

/* BIGGER ICONS */
.social-icons a{
width:50px;        /* increased */
height:50px;       /* increased */
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#1e293b;
color:white;
font-size:22px;    /* 🔥 bigger icon */
transition:0.3s;
.social-icons a{
box-shadow:0 0 10px rgba(56,189,248,0.3);
}
}

/* 🔥 HOVER EFFECT */
.social-icons a:hover{
background:#38bdf8;
transform:translateY(-5px) scale(1.15);
box-shadow:0 0 20px #38bdf8;
}
.social-icons a:hover{
background:#38bdf8;
transform:translateY(-4px) scale(1.1);
box-shadow:0 0 12px #38bdf8;
}

/* TEXT */
.hero-left h1{
font-size:42px;
line-height:1.2;
}

.hero-left span{
color:#38bdf8;
}

/* typing fix */
.typing{
min-height:30px;
margin:10px 0;
color:#38bdf8;
}

.typing::after{
content:"|";
animation:blink 1s infinite;
}

@keyframes blink{
50%{opacity:0;}
}

/* PARAGRAPH */
.hero-left p{
margin:10px 0 20px;
line-height:1.6;
}

/* BUTTON */
.hero-buttons{
display:flex;
gap:15px;
flex-wrap:wrap;
}

.btn{
padding:12px 20px;
border-radius:6px;
text-decoration:none;
position:relative;
overflow:hidden;
transition:0.3s;
}

.primary{
background:#38bdf8;
color:white;
}

.secondary{
border:1px solid #38bdf8;
color:#38bdf8;
}

.primary:hover{
transform:scale(1.05);
box-shadow:0 0 20px #38bdf8;
}

.secondary:hover{
background:#38bdf8;
color:white;
}

/* IMAGE */
.hero-right img{
width:220px;
border-radius:50%;
border:4px solid #38bdf8;
animation: float 4s infinite, glow 2s infinite alternate;
}

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

@keyframes glow{
from{box-shadow:0 0 10px #38bdf8;}
to{box-shadow:0 0 25px #38bdf8;}
}

/* SECTIONS */
section{
padding:60px 5%;
}

/* CARDS */
.skill-card, .project-card{
background:#1e293b;
padding:15px;
border-radius:12px;
transition:0.4s;
position:relative;
overflow:hidden;
}

.skill-card:hover,
.project-card:hover{
transform:translateY(-12px);
box-shadow:0 15px 40px rgba(56,189,248,0.4);
}

/* GRID */
.skills-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:20px;
}

.project-container{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
}

/* CERT */
.certifications button{
margin:5px;
padding:8px 12px;
background:#1e293b;
border:none;
color:white;
border-radius:6px;
cursor:pointer;
}

.certifications button:hover{
background:#38bdf8;
}

/* MODAL */
.modal{
display:none;
position:fixed;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.7);
z-index:9999;
}

.modal-content{
background:#020617;
margin:5% auto;
width:90%;
max-width:800px;
max-height:80vh;
border-radius:10px;
overflow:hidden;
}

.modal-body{
padding:15px;
overflow-y:auto;
max-height:70vh;
}

.modal-body img{
width:100%;
margin-bottom:10px;
}

/* SCROLL */
.hidden{
opacity:0;
transform:translateY(40px);
transition:0.8s;
}

.show{
opacity:1;
transform:translateY(0);
}

/* MOBILE */
@media(max-width:768px){
.hero-content{
flex-direction:column;
text-align:center;
}

.top-icons{
justify-content:center;
}

.hero-right img{
width:150px;
}

.nav-links{
display:none;
}
}

/* ABOUT SECTION */
#about{
text-align:center;
}

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

/* 🔥 3D CARD */
.about-card{
background:rgba(30,41,59,0.6);
backdrop-filter:blur(10px);
padding:25px;
border-radius:15px;
transition:0.4s;
transform-style:preserve-3d;
box-shadow:0 10px 30px rgba(0,0,0,0.3);
position:relative;
}

/* TITLE */
.about-card h3{
margin-bottom:10px;
color:#38bdf8;
}

/* TEXT */
.about-card p{
font-size:14px;
line-height:1.6;
color:#cbd5f5;
}

/* 🔥 HOVER 3D EFFECT */
.about-card:hover{
transform:rotateY(8deg) rotateX(8deg) scale(1.05);
box-shadow:0 20px 50px rgba(56,189,248,0.4);
}

/* GLOW BORDER */
.about-card::before{
content:"";
position:absolute;
inset:0;
border-radius:15px;
padding:2px;
background:linear-gradient(120deg,#38bdf8,transparent,#38bdf8);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite:xor;
mask-composite:exclude;
}
/* 🔥 COMMON 3D CARD STYLE */
.skill-card, .project-card, .cert-card{
background:rgba(30,41,59,0.6);
backdrop-filter:blur(10px);
padding:20px;
border-radius:15px;
transition:0.4s;
transform-style:preserve-3d;
box-shadow:0 10px 30px rgba(0,0,0,0.3);
position:relative;
cursor:pointer;
}

/* TEXT */
.skill-card, .cert-card{
text-align:center;
font-weight:500;
}

/* PROJECT TEXT */
.project-card h3{
color:#38bdf8;
margin-bottom:10px;
}

/* 🔥 3D HOVER EFFECT */
.skill-card:hover,
.project-card:hover,
.cert-card:hover{
transform:rotateY(10deg) rotateX(10deg) scale(1.05);
box-shadow:0 25px 60px rgba(56,189,248,0.4);
}

/* 🔥 GLOW BORDER */
.skill-card::before,
.project-card::before,
.cert-card::before{
content:"";
position:absolute;
inset:0;
border-radius:15px;
padding:2px;
background:linear-gradient(120deg,#38bdf8,transparent,#38bdf8);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite:xor;
mask-composite:exclude;
}

/* GRID FIX */
.certifications{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;
margin-top:20px;
}