/* ==========================
   RESET
========================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
a{
    text-decoration:none;
}
body {
    opacity: 0;
    transition: opacity 0.4s ease;
}

body.loaded {
    opacity: 1;
}

main {
    opacity: 0;
    transform: translateY(10px);
    transition: 0.5s ease;
}

body.loaded main {
    opacity: 1;
    transform: translateY(0);
}
body{
    font-family:'Segoe UI',sans-serif;
    background:#0b0f14;
    color:#e5e7eb;
    line-height:1.6;
    overflow-x:hidden;
}

@keyframes moveGlow{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(120px);
    }

} 
/* ==========================
   NAVBAR
========================== */

.navbar{
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:18px 8%;

    background:rgba(11,15,20,.92);

    backdrop-filter:blur(16px);

    position:sticky;
    top:0;
    z-index:1000;

    border-bottom:1px solid rgba(20,184,166,.15);

    box-shadow:0 5px 25px rgba(0,0,0,.25);
}
/* LOGO */
.logo{
    font-size:1.7rem;
    font-weight:700;
    color:#f8fafc;
}

.logo:hover{
    color:#14b8a6;
}


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

.nav-links a {
    text-decoration: none;
    color: #94a3b8;
    font-size: 1rem;
    font-weight: 500;

    padding: 8px 14px;
    border-radius: 8px;

    transition: 0.3s;
}

.nav-links a:hover,
.nav-links a.active {
    color: #14b8a6;
   background:rgba(20,184,166,.08);
}

/* RESUME BUTTON */

.resume-btn{
    display:inline-block;

    background:linear-gradient(
    135deg,
    #14b8a6,
    #38bdf8
    );

    color:white;

    padding:11px 22px;

    border-radius:12px;

    font-weight:600;

    transition:.4s;
    text-decoration: none;
}

.resume-btn:hover{
    transform:translateY(-3px);

    box-shadow:
    0 10px 30px rgba(20,184,166,.25);
}
.resume-btn.a{
    text-decoration: none;
}


/* ==========================
   HOME PAGE
========================== */



/* Animated Background */

body::before{
    content:"";
    position:fixed;
    width:600px;
    height:600px;
    background:radial-gradient(circle,
    rgba(34, 197, 175, 0.12),
    transparent 70%);
    top:-250px;
    left:-200px;
    z-index:-1;
    animation:moveGlow 10s ease-in-out infinite alternate;
}

body::after{
    content:"";
    position:fixed;
    width:500px;
    height:500px;
    background:radial-gradient(circle,
    rgba(56,189,248,.08),
    transparent 70%);
    right:-150px;
    bottom:-150px;
    z-index:-1;
} 

@keyframes moveGlow{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(150px);
    }
}

/* ==========================
   HERO
========================== */

.hero{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:80px;
    padding:100px 10%;
    min-height:85vh;
}

.hero-content{
    flex:1;
}

.hero-tag{
    color:#14b8a6;;
    font-weight:600;
    margin-bottom:15px;
    letter-spacing:1px;
}

.hero h1{
    font-size:4rem;
    line-height:1.1;
    margin-bottom:15px;
    /* color:#14b8a6; */
}

.hero h1 span{
    background:linear-gradient(
    135deg,
    #14b8a6,
    #38bdf8
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.hero h2{
    color:#94adb8;
    font-weight:400;
    margin-bottom:10px;
}

#typing{.dot{
    width:8px;
    height:8px;
    border-radius:50%;

    background:#14b8a6;
    box-shadow:0 0 10px #14b8a6;

    animation:pulse 1.5s infinite;
}

@keyframes pulse{
    0%{ transform:scale(1); opacity:1; }
    50%{ transform:scale(1.4); opacity:0.6; }
    100%{ transform:scale(1); opacity:1; }
}
    color:#38bdf8;
    font-weight:600;
}
.hero-description{
    max-width:650px;
    margin-top:20px;
    color:#cbd5e1;
    font-size:1.05rem;
}

/* ==========================
   BUTTONS
========================== */

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

.primary-btn{
    background:linear-gradient(135deg,#14b8a6,#38bdf8);
    color:#fff;
    text-decoration:none;
    padding:14px 22px;
    border-radius:12px;
    font-weight:600;
    transition:.4s;
}

.primary-btn:hover{
    transform:translateY(-5px);
    box-shadow:0 5px 10px rgba(34, 197, 162, 0.3);
}

.secondary-btn{
    border:1px solid #38bdf8;
    color:#38bdf8;
    text-decoration:none;
    padding:14px 22px;
    border-radius:12px;
    transition:.4s;
}

.secondary-btn:hover{
    background:#38bdf8;
    color:#0b0f14;
}

/* ==========================
   TIME & DATE
========================== */

.live-info{
    display:flex;
    gap:25px;
    align-items:center;
    flex-wrap:wrap;
}

/* each item inline (NOT BOX) */
.live-item{
    display:flex;
    align-items:center;
    gap:10px;

    font-size:15px;
    font-weight:600;

    color:#cbd5e1;
    letter-spacing:0.5px;
}

/* glowing live dot */
/* .dot{
    width:8px;
    height:8px;
    border-radius:50%;

    background:#14b8a6;
    box-shadow:0 0 10px #14b8a6;

    animation:pulse 1.5s infinite;
}

@keyframes pulse{
    0%{ transform:scale(1); opacity:1; }
    50%{ transform:scale(1.4); opacity:0.6; }
    100%{ transform:scale(1); opacity:1; }
} */

/* time highlight */
#time{
    color:#38bdf8;
    font-weight:700;
    font-family:monospace;
    letter-spacing:1px;
}

/* date subtle */
#date{
    color:#94a3b8;
}
#date:hover{
    color:#14b8a6;
    font-weight:600;
}

/* ==========================
   STATS
========================== */

.hero-stats{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
    margin-top:35px;
    margin-bottom:20px;
}

.stat-card{
    flex:1;
    min-width:140px;

    background:rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.06);

    backdrop-filter:blur(10px);

    border-radius:15px;

    padding:18px;

    text-align:center;

    transition:.4s;
}

.stat-card:hover{

    transform:translateY(-8px);

    border-color:#14b8a6;

    box-shadow:
    0 15px 40px rgba(20,184,166,.18);
}
.stat-card h3{
    color:#14b8a6;
    font-size:30px;
}

.stat-card p{
    color:#94a3b8;
}

/* ==========================
   PROFILE IMAGE
========================== */

.hero-image{
    display:flex;
    justify-content:center;
    align-items:center;
}

.hero-image img{
    width:320px;
    height:320px;
    object-fit:cover;
    border-radius:50%;
    border:4px solid rgba(20,184,166,.6);

    box-shadow:
0 0 0 10px rgba(56,189,248,.10),
0 20px 60px rgba(0,0,0,.5);

    /* animation:floatImage 5s ease-in-out infinite;
    transition:.4s; */
}

.hero-image img:hover{
    transform:scale(1.05);
}

@keyframes floatImage{
    0%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-15px);
    }
    100%{
        transform:translateY(0);
    }
}

/* ==========================
   PROJECTS
========================== */

.featured-project{
    padding:100px 10%;
     background:#081018; 
    /* background:red */
}

.section-header{
    text-align:center;
    margin-bottom:60px;
}

.section-header h2{
    font-size:2.5rem;
    margin-bottom:15px;
}

.section-header p{
    color:#94a3b8;
    max-width:700px;
    margin:auto;
}

.projects-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:30px;
}

.project-card{
    background: linear-gradient(145deg, #0b1220, #0f172a);
    border-radius: 20px;

    overflow: hidden;

    border: 1px solid rgba(56,189,248,.12);

    transition: .4s ease;

    box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

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

    border-color: rgba(20,184,166,.4);

    box-shadow:
        0 25px 70px rgba(20,184,166,.18),
        0 0 0 1px rgba(20,184,166,.08);
}

.project-card img{
    width: 100%;
    height: 220px;
    object-fit: cover;

    transition: .6s ease;

    filter: saturate(1.1) contrast(1.05);
}

.project-card:hover img{
    transform:scale(1.08);
}

.project-content{
    padding:22px;
}

.project-content h3{
    color:#283542e1;
    margin-bottom:10px;
}

.project-tech{
    margin-top:15px;
}

.project-tech span{
    display: inline-block;
    padding: 7px 12px;
    margin: 4px;

    border-radius: 999px;

    background: #283542e1;
    color: #e2e8f0;

    border: 1px solid rgba(20,184,166,.25);

    font-size: .82rem;
    font-weight: 500;

    transition: .3s ease;

    backdrop-filter: blur(6px);
}
.project-tech span:hover{
    background: #5a6672e1;
    /* border-color: rgba(20,184,166,.6); */
    transform: translateY(-2px);

    box-shadow: 0 5px 15px rgba(20,184,166,.2);
    color: #ffffff;
}

/* Project Button */

.project-cta{
    text-align:center;
    margin-top:40px;
}

.project-btn{
    display:inline-block;

    padding:14px 24px;

    border-radius:12px;

    text-decoration:none;

    background:linear-gradient(
    135deg,
    #14b8a6,
    #38bdf8
    );

    color:white;

    font-weight:600;

    transition:.4s;
}

.project-btn:hover{
    transform:translateY(-4px);

    box-shadow:
    0 10px 25px rgba(20,184,166,.2);
}
/* ==========================
   CTA
========================== */

.cta-section{
    padding:100px 10%;
    text-align:center;
}

.cta-content h2{
    font-size:2.3rem;
}

.cta-content p{
    color:#94a3b8;
    max-width:650px;
    margin:20px auto;
}

.cta-btn{
    display:inline-block;

    padding:14px 24px;

    border-radius:12px;

    text-decoration:none;

    background:linear-gradient(
    135deg,
    #14b8a6,
    #38bdf8
    );

    color:white;

    font-weight:600;

    transition:.4s;
}

.cta-btn:hover{
    transform:translateY(-4px);
}
.contact-card{

    background:#111827;

    border:1px solid rgba(20,184,166,.10);

    border-radius:18px;

    transition:.4s;
}

.contact-card:hover{

    transform:translateY(-8px);

    border-color:#14b8a6;

    box-shadow:
    0 15px 40px rgba(20,184,166,.15);
}

/* ==========================
   RESPONSIVE
========================== */

@media(max-width:900px){

    .hero{
        flex-direction:column-reverse;
        text-align:center;
        padding:80px 8%;
    }

    .hero h1{
        font-size:3rem;
    }

    .hero-stats{
        justify-content:center;
    }

    .hero-buttons{
        justify-content:center;
    }

    .live-info{
        justify-content:center;
    }

    .hero-image img{
        width:260px;
        height:260px;
    }
}
/* ==========================
   FOOTER
========================== */

/* FOOTER */

.footer{
    background:#081018;
    border-top:1px solid rgba(20,184,166,.15);
    padding:70px 8% 0;
}

.footer-container{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:40px;
}

.footer-logo{
    color:#14b8a6;
    margin-bottom:15px;
}

.footer-section h3{
    color:#f8fafc;
    margin-bottom:15px;
}

.footer-section p{
    color:#94a3b8;
    line-height:1.8;
}

.footer-section ul{
    list-style:none;
    padding:0;
}

.footer-section ul li{
    margin-bottom:10px;
}

.footer-section a{
    color:#94a3b8;
    text-decoration:none;
    transition:.3s;
}

.footer-section a:hover{
    color:#14b8a6;
    padding-left:4px;
}

.footer-social-links i{
    width:20px;
    margin-right:8px;
}

.footer-bottom{
    width:100%;

    display:flex;
    justify-content:center;
    align-items:center;

    text-align:center !important;

    border-top:1px solid rgba(255,255,255,.08);

    padding:25px 0;

    margin-top:40px;
}

.footer-bottom p{
    width:100%;

    text-align:center !important;

    margin:0 auto;

    display:block;
}
/* ABOUT HERO */

.about-hero{
display:flex;
justify-content:space-between;
align-items:center;
gap:80px;
padding:100px 10%;
}

.about-content{
flex:1;
}

.about-tag{
color:#14b8a6;
font-weight:600;
letter-spacing:2px;
}

.about-content h1{
font-size:3.5rem;
margin:20px 0;
line-height:1.2;
}

.about-content h1 span{
background:linear-gradient(135deg,#14b8a6,#38bdf8);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.about-content p{
color:#cbd5e1;
margin-bottom:18px;
line-height:1.8;
}

.about-illustration{
width:320px;
height:320px;
border-radius:50%;
background:#111827;
display:flex;
justify-content:center;
align-items:center;
border:2px solid rgba(20,184,166,.2);


animation:float 5s ease-in-out infinite;


}

.about-illustration i{
font-size:120px;
color:#14b8a6;
}

@keyframes float{
0%{transform:translateY(0);}
50%{transform:translateY(-15px);}
100%{transform:translateY(0);}
}

.journey-section{
padding:100px 10%;
}

.timeline{
position:relative;
max-width:900px;
margin:auto;
}

.timeline::before{
content:"";
position:absolute;
left:50%;
width:2px;
height:100%;
background:#14b8a6;
transform:translateX(-50%);
}

.timeline-card{
width:45%;
background:#111827;
padding:25px;
border-radius:18px;
margin-bottom:40px;
border:1px solid rgba(20,184,166,.12);
transition:.4s;
}

.timeline-card:nth-child(odd){
margin-right:auto;
}

.timeline-card:nth-child(even){
margin-left:auto;
}

.timeline-card:hover{
transform:translateY(-8px);
border-color:#14b8a6;
box-shadow:0 20px 40px rgba(20,184,166,.15);
}

.timeline-card span{
color:#14b8a6;
font-weight:700;
}

.focus-section{
padding:100px 10%;
}

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

.focus-card{
background:#111827;
padding:30px;
border-radius:18px;
text-align:center;
border:1px solid rgba(20,184,166,.1);
transition:.4s;
}

.focus-card i{
font-size:40px;
color:#14b8a6;
margin-bottom:15px;
}

.focus-card:hover{
transform:translateY(-10px);
border-color:#14b8a6;
box-shadow:0 20px 40px rgba(20,184,166,.15);
}

.tech-focus{
padding:100px 10%;
}

.skills-tags{
display:flex;
gap:15px;
flex-wrap:wrap;
justify-content:center;
}

.skills-tags span{
background:#111827;
border:1px solid rgba(20,184,166,.15);
color:#14b8a6;
padding:12px 20px;
border-radius:50px;
transition:.3s;
}

.skills-tags span:hover{
transform:translateY(-4px);
background:#14b8a6;
color:#0b0f14;
}

@media(max-width:900px){

    .about-hero{
        flex-direction:column;
        text-align:center;
    }

    .about-content h1{
        font-size:2.6rem;
    }

    .timeline::before{
        display:none;
    }

    .timeline-card{
        width:100%;
    }

    .about-illustration{
        width:220px;
        height:220px;
    }

    .about-illustration i{
        font-size:80px;
    }
}
/* =========================
   MIXED THEME SYSTEM
========================= */

/* =========================
   THEMES
========================= */

/* .light-section{
    background:linear-gradient(180deg,#f8fafc,#e2e8f0);
    color:#0f172a;
}

.dark-section{
    background:#0f172a;
    color:#f8fafc;
} */



.light-section{
    background:linear-gradient(180deg,#f8fafc,#e2e8f0);
    color:#0f172a;
}

.dark-section{
    background:#0f172a;
    color:#f8fafc;
}

/* =========================
   HERO
========================= */

.skills-hero{
    text-align:center;
    padding:110px 10%;
    position:relative;
    overflow:hidden;
}

.section-tag{
    color:#14b8a6;
    font-weight:600;
    letter-spacing:2px;
}

.skills-hero h1{
    font-size:3.5rem;
    margin:20px 0;
}

.skills-hero p{
    max-width:700px;
    margin:auto;
    color:#64748b;
}

/* =========================
   FLASH
========================= */

.flash-overlay{
    position:fixed;
    inset:0;
    background:white;
    z-index:999;
    animation:flash 1.2s ease forwards;
}

@keyframes flash{
    0%{opacity:1;}
    100%{opacity:0; visibility:hidden;}
}

/* =========================
   BURST
========================= */

.burst-container{
    position:fixed;
    inset:0;
    z-index:1000;
    pointer-events:none;
}

.burst-icon{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) scale(0.3);
    background:rgba(255,255,255,0.95);
    padding:8px 12px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
    color:#0f172a;

    animation:explode 2.2s ease-out forwards;
    animation-delay:0.2s;
}

/* REAL BURST MOVEMENT */
@keyframes explode{
    0%{
        opacity:0;
        transform:translate(-50%,-50%) scale(0.2);
    }
    20%{opacity:1;}

    100%{
        opacity:0;
        transform:translate(
            calc((var(--x) - 50) * 6px),
            calc((var(--y) - 50) * 6px)
        ) scale(1.1);
    }
}

/* =========================
   TOOLKIT
========================= */

.toolkit{
    padding:80px 10%;
}

.skills-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:25px;

    opacity:0;
    transform:translateY(40px);
    animation:show 1s ease forwards;
    animation-delay:1.8s;
}

@keyframes show{
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* =========================
   SKILL BOX
========================= */

.skill-box{
    background:#111827;
    border:1px solid rgba(20,184,166,.2);
    border-radius:16px;
    padding:20px;
}

.skill-box h3{
    margin-bottom:15px;
}

/* =========================
   SKILL BAR
========================= */

.skill-name{
    display:flex;
    justify-content:space-between;
    font-size:13px;
    color:#cbd5e1;
}

.bar{
    height:8px;
    background:#0b1220;
    border-radius:20px;
    overflow:hidden;
    margin:6px 0 15px;
}

.fill{
    height:100%;
    width:0;
    background:linear-gradient(90deg,#14b8a6,#38bdf8);
    border-radius:20px;

    animation:fill 1.2s ease forwards;
    width:var(--w);
}

@keyframes fill{
    from{width:0;}
}

/* =========================
   CONTACT HERO
========================= */

.contact-hero{
    text-align:center;
    padding:100px 10% 40px;
    /* background:linear-gradient(180deg,#0b1220,#0f172a); */
    background:#081018;
}

.contact-hero h1{
    font-size:3rem;
    margin:20px 0;
    color:#f8fafc;
}

.contact-hero p{
    max-width:650px;
    margin:auto;
    color:#94a3b8;
}

/* =========================
   CONTACT SECTION
========================= */

.contact-section{
    padding:60px 10% 100px;
    /* background:#0f172a; */
    background:#081018;

}

.contact-container{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
}

/* =========================
   CONTACT INFO
========================= */

.contact-info{
    background:linear-gradient(145deg,#111827,#0b1220);
    border:1px solid rgba(20,184,166,.15);
    border-radius:18px;
    padding:30px;

    box-shadow:0 10px 30px rgba(0,0,0,.35);
}

.contact-info h2{
    color:#f8fafc;
    margin-bottom:20px;
}

.info-box{
    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:20px;
    padding:15px;

    border-radius:12px;
    background:rgba(255,255,255,0.03);
    transition:.3s;
}

.info-box:hover{
    transform:translateX(5px);
    border-left:3px solid #14b8a6;
}

.info-box i{
    font-size:22px;
    color:#14b8a6;
}

.info-box h4{
    margin:0;
    color:#f8fafc;
}

.info-box p{
    margin:0;
    color:#94a3b8;
    font-size:14px;
}

.note{
    margin-top:20px;
    color:#94a3b8;
    font-size:14px;
}
/* loader */
/* =========================
   LOADER FIX
========================= */

#loader {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    background: rgba(5, 10, 20, 0.75);
    backdrop-filter: blur(12px);   /* 🔥 THIS FIXES YOUR BLUR ISSUE */

    z-index: 99999;

    transition: opacity 0.6s ease;
}
.loader-content {
    display: flex;
    justify-content: center;
    align-items: center;
}
/* =========================
   CONTACT FORM
========================= */

.contact-form{
    background:linear-gradient(145deg,#111827,#0b1220);
    border:1px solid rgba(20,184,166,.15);
    border-radius:18px;
    padding:30px;

    box-shadow:0 10px 30px rgba(0,0,0,.35);
}

.contact-form form{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.input-row{
    display:flex;
    gap:15px;
}

input, textarea{
    width:100%;
    padding:12px 14px;

    background:#0b1220;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:10px;

    color:#f8fafc;
    outline:none;

    transition:.3s;
}

input:focus, textarea:focus{
    border-color:#14b8a6;
    box-shadow:0 0 0 2px rgba(20,184,166,.15);
}

button{
    padding:12px;
    border:none;
    border-radius:10px;
    background:linear-gradient(90deg,#14b8a6,#38bdf8);
    color:#0b1220;
    font-weight:600;
    cursor:pointer;

    transition:.3s;
}

button:hover{
    transform:translateY(-2px);
    filter:brightness(1.1);
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:768px){
    .contact-container{
        grid-template-columns:1fr;
    }

    .input-row{
        flex-direction:column;
    }

    .contact-hero h1{
        font-size:2.3rem;
    }
}
/* =========================
   EXPERIENCE SECTION (FIXED + MATCHED THEME)
========================= */

.exp-section {
    padding: 90px 10%;
    min-height: 100vh;

    /* matches your dark portfolio theme */
    /* background: linear-gradient(135deg, #0f172a, #0b1220); */
    background:radial-gradient(circle,
    rgba(34, 197, 175, 0.12),
    transparent 70%);
    color: #fff;
}

/* HEADER */
.exp-header {
    text-align: center;
    margin-bottom: 70px;
}

.exp-header h1 {
    font-size: 44px;
    color: #cde7f3;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.exp-header p {
    color: #94a3b8;
    font-size: 16px;
}

/* TIMELINE WRAPPER */
.exp-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding-left: 40px;
}

/* vertical line */
.exp-timeline::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 0;
    width: 2px;
    height: 100%;
    background: #1f2937;
}

/* CARD */
.exp-card {
    position: relative;
    background: rgba(17, 35, 39, 0.932);
    /* border: 1px solid rgba(56, 189, 248, 0.15); */
    padding: 22px 22px 22px 55px;
    border-radius: 14px;

    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
}

/* hover effect */
.exp-card:hover {
    transform: translateY(-6px);
    /* border-color: #38bdf8; */
    box-shadow: 0 5px 10px rgba(56, 235, 248, 0.15); 
}

/* DOT */
.exp-dot {
    position: absolute;
    left: -6px;
    top: 28px;

    width: 14px;
    height: 14px;
    background: #38bdf8;
    border-radius: 50%;

    box-shadow: 0 0 12px #38bdf8;
}

/* TEXT */
.exp-content h2 {
    margin: 0;
    font-size: 20px;
    color: #ffffff;
}

.exp-content span {
    display: block;
    margin: 6px 0 10px;
    font-size: 13px;
    color: #38bdf8;
}

.exp-content p {
    font-size: 14px;
    color: #cbd5e1;
    line-height: 1.6;
}

/* RESPONSIVE */
@media (max-width: 768px) {

    .exp-section {
        padding: 60px 6%;
    }

    .exp-header h1 {
        font-size: 32px;
    }

    .exp-timeline {
        padding-left: 30px;
    }

    .exp-card {
        padding: 18px 18px 18px 50px;
    }
}
/* =========================
   PROJECTS SECTION (LIGHT MODERN THEME)
========================= */

.projects-section {
    padding: 90px 10%;
    min-height: 100vh;

    /* light clean gradient like modern portfolios */
    background: linear-gradient(135deg, #2f2f30, #89e5ca,#2f2f30);
    color: #0f172a;
}

/* HEADER */
.projects-header {
    text-align: center;
    margin-bottom: 60px;
}

.projects-header h1 {
    font-size: 46px;
    color:white;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.projects-header p {
    color: #161a1f;
    font-size: 16px;
}

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

/* CARD */
.project-card {
    background: #ffffff;
    border-radius: 16px;

    overflow: hidden;
    position: relative;

    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.08);

    transition: all 0.35s ease;
}

.project-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 40px rgba(37, 99, 235, 0.15);
}

/* PROJECT IMAGE (NEW) */
.project-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
    border-bottom: 1px solid #e2e8f0;
}

/* CONTENT */
.project-top {
    padding: 18px 18px 0 18px;
}

.project-top h2 {
    font-size: 20px;
    color: #0f172a;
    margin-bottom: 5px;
}

.project-top span {
    font-size: 12px;
    color: #2563eb;
    font-weight: 500;
}

/* DESCRIPTION */
.project-card p {
    padding: 10px 18px 0 18px;
    font-size: 14px;
    color: #475569;
    line-height: 1.6;
}

/* BUTTON AREA */
.project-links {
    display: flex;
    gap: 10px;
    padding: 16px 18px 18px 18px;
}

/* BUTTONS */
.btn {
    text-decoration: none;
    padding: 9px 12px;
    font-size: 13px;
    border-radius: 10px;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    transition: 0.3s ease;
    font-weight: 500;
}

/* GITHUB BUTTON */
.github {
    background: #0f172a;
    color: #fff;
}

.github:hover {
    background: #1e293b;
}

/* LIVE BUTTON */
.live {
    background: #2563eb;
    color: #fff;
}

.live:hover {
    background: #1d4ed8;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .projects-section {
        padding: 60px 6%;
    }

    .projects-header h1 {
        font-size: 34px;
    }

    .project-img {
        height: 160px;
    }
}
/* ==========================
   CERTIFICATES SECTION
========================== */

.certificates-section{

    min-height:100vh;
    padding:90px 10%;

    background:
    radial-gradient(
        circle at top left,
        rgba(255,255,255,.03),
        transparent 30%
    ),

    radial-gradient(
        circle at bottom right,
        rgba(255,255,255,.02),
        transparent 30%
    ),

    linear-gradient(
        135deg,
        #0b0f19,
        #121826,
        #1a1f2e
    );
}

/* ==========================
   HEADER
========================== */

.cert-header{

    text-align:center;
    margin-bottom:70px;
}

.cert-header h1{

    font-size:48px;
    color:#14b8a6;
    margin-bottom:12px;
    letter-spacing:1px;
}

.cert-header p{

    color:#cbd5e1;
    font-size:16px;
}

/* ==========================
   GRID
========================== */

.cert-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(350px,1fr));

    gap:32px;
}

/* ==========================
   CARD
========================== */

.cert-card{

    background:rgba(255,255,255,.04);

    backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,.08);

    border-radius:20px;

    overflow:hidden;

    transition:.35s ease;

    box-shadow:
    0 15px 35px rgba(0,0,0,.25);
}

.cert-card:hover{

    transform:translateY(-10px);

    border-color:rgba(255,255,255,.15);

    box-shadow:
    0 20px 45px rgba(0,0,0,.35);
}

/* ==========================
   CERTIFICATE IMAGE
========================== */

.cert-image{

    width:100%;
    height:220px;

    object-fit:cover;

    border-bottom:
    1px solid rgba(255,255,255,.08);

    transition:.4s ease;
}

.cert-card:hover .cert-image{

    transform:scale(1.03);
}

/* ==========================
   CONTENT
========================== */

.cert-content{

    padding:22px;
}

.issuer{

    display:inline-block;

    font-size:13px;
    font-weight:600;

    color:#e2e8f0;

    margin-bottom:10px;

    text-transform:uppercase;

    letter-spacing:.8px;
}

.cert-content h2{

    color:#ffffff;

    font-size:22px;

    line-height:1.4;

    margin-bottom:14px;
}

.issued{

    color:#cbd5e1;

    font-size:14px;

    margin-bottom:10px;
}

.credential{

    color:#94a3b8;

    font-size:13px;

    line-height:1.6;

    word-break:break-word;

    margin-bottom:20px;
}

/* ==========================
   BUTTON
========================== */

.cert-btn{

    display:inline-flex;

    align-items:center;

    gap:8px;

    text-decoration:none;

    background:#ffffff;

    color:#111827;

    font-weight:600;

    padding:10px 18px;

    border-radius:10px;

    transition:.3s ease;
}

.cert-btn:hover{

    background:#e5e7eb;

    transform:translateY(-2px);
}

/* ==========================
   MOBILE
========================== */

@media(max-width:768px){

    .certificates-section{

        padding:70px 6%;
    }

    .cert-header{

        margin-bottom:50px;
    }

    .cert-header h1{

        font-size:34px;
    }

    .cert-header p{

        font-size:14px;
    }

    .cert-grid{

        grid-template-columns:1fr;
    }

    .cert-image{

        height:190px;
    }

    .cert-content h2{

        font-size:20px;
    }
}
.resume-section{

    min-height:100vh;
    padding:90px 10%;

    background:
    linear-gradient(
        135deg,
        #0b0f19,
        #121826,
        #1a1f2e
    );
}

.resume-header{

    text-align:center;
    margin-bottom:50px;
}

.resume-header h1{

    color:white;
    font-size:46px;
}

.resume-header p{

    color:#cbd5e1;
}

.resume-preview{

    background:white;
    border-radius:20px;
    overflow:hidden;

    box-shadow:
    0 15px 35px rgba(0,0,0,.3);
}

.resume-actions{

    display:flex;
    justify-content:center;
    gap:20px;

    margin-top:30px;
}

.resume-btn{

    text-decoration:none;

    padding:12px 22px;

    border-radius:12px;

    font-weight:600;

    transition:.3s;
}

.download{

    background:#ffffff;
    color:#111827;
}

.email{

    background:#38bdf8;
    color:#111827;
}

.resume-btn:hover{

    transform:translateY(-3px);
}
/* ==========================
   MOBILE NAVBAR
========================== */

.menu-toggle{
    display:none;
}

/* Mobile */

@media screen and (max-width:768px){

    .navbar{
        position:relative;
        padding:18px 6%;
    }

    .menu-toggle{
        display:block;
        color:#fff;
        font-size:28px;
        cursor:pointer;
    }

    /* Hide Resume Button */

    .resume-btn{
        display:none;
    }

    /* Hide menu by default */

    .nav-links{

        display:none !important;

        position:absolute;

        top:100%;
        left:0;

        width:100%;

        background:#0f172a;

        flex-direction:column;

        align-items:center;

        padding:25px 0;

        gap:20px;

        box-shadow:
        0 10px 25px rgba(0,0,0,.4);

        z-index:999;
    }

    /* Show after click */

    .nav-links.active{
        display:flex !important;
    }
}