/* ==========================================
   GOOGLE FONT
========================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');


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

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

html{
    scroll-behavior:smooth;
}

body{

    background:#080808;

    color:#ffffff;

    overflow-x:hidden;

    position:relative;

}


/* ==========================================
   CUSTOM SCROLLBAR
========================================== */

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:#080808;

}

::-webkit-scrollbar-thumb{

    background:#00C896;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#00e6aa;

}


/* ==========================================
   SELECTION
========================================== */

::selection{

    background:#00C896;

    color:#000;

}


/* ==========================================
   LINKS
========================================== */

a{

    text-decoration:none;

    color:inherit;

}


/* ==========================================
   LIST
========================================== */

ul{

    list-style:none;

}


/* ==========================================
   IMAGES
========================================== */

img{

    max-width:100%;

    display:block;

}


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

.background-grid{

    position:fixed;

    inset:0;

    background-image:

    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),

    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);

    background-size:70px 70px;

    z-index:-5;

}


/* ==========================================
   PARTICLES
========================================== */

.particles{

    position:fixed;

    inset:0;

    background-image:

    radial-gradient(circle,#00C89655 1px,transparent 1px);

    background-size:35px 35px;

    opacity:.18;

    z-index:-4;

}


/* ==========================================
   GLOW EFFECTS
========================================== */

.glow{

    position:fixed;

    border-radius:50%;

    filter:blur(120px);

    z-index:-3;

}

.glow1{

    width:600px;

    height:600px;

    background:#00C89633;

    top:-220px;

    left:-220px;

}

.glow2{

    width:700px;

    height:700px;

    background:#00C89622;

    right:-250px;

    bottom:-250px;

}


/* ==========================================
   CONTAINER
========================================== */

.container{

    width:90%;

    max-width:1250px;

    margin:auto;

}


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

.section{

    width:90%;

    max-width:1200px;

    margin:auto;

    padding:140px 0;

}


/* ==========================================
   SECTION TITLE
========================================== */

.section-title{

    font-size:42px;

    font-weight:700;

    color:#ffffff;

    margin-bottom:60px;

    position:relative;

}

.section-title::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-12px;

    width:70px;

    height:4px;

    border-radius:20px;

    background:#00C896;

}


/* ==========================================
   PLACEHOLDER TEXT
========================================== */

.coming{

    color:#bcbcbc;

    font-size:18px;

    line-height:1.8;

}


/* ==========================================
   FOOTER
========================================== */

footer{

    padding:30px;

    text-align:center;

    color:#888;

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

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

header{

    position:fixed;

    top:20px;

    left:50%;

    transform:translateX(-50%);

    width:90%;

    max-width:1200px;

    z-index:1000;

}

.navbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 35px;

    border-radius:22px;

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

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

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

    box-shadow:

        0 8px 30px rgba(0,0,0,.35),

        inset 0 1px 0 rgba(255,255,255,.05);

}


/* ===========================
LOGO
=========================== */

.logo{



    font-size:30px;

    font-weight:800;

    letter-spacing:2px;



    color:#fff;



    cursor:pointer;



    transition:all .35s ease;

animation:logoFloat 4s ease-in-out infinite;





}

.logo:hover{



    color:#00C896;



    transform:scale(1.08);



    text-shadow:

        0 0 8px rgba(0,200,150,.5),

        0 0 20px rgba(0,200,150,.3);



} 

/* ===========================
NAV LINKS
=========================== */

.nav-links{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
}

.nav-links li{

    position:relative;

}

.nav-links a{

    color:#ffffff;

    font-size:16px;

    font-weight:500;

    transition:.35s;

    position:relative;

}


/* Hover */

.nav-links a:hover{

    color:#00C896;

}


/* Active Link */

.nav-links a.active{

    color:#00C896;

}


/* Animated Underline */

.nav-links a::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-8px;

    width:0;

    height:2px;

    background:#00C896;

    border-radius:20px;

    transition:.35s;

    transform:translateX(-50%);

}

.nav-links a:hover::after,

.nav-links a.active::after{

    width:100%;

}


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

#theme-toggle{

    width:48px;

    height:48px;

    border-radius:50%;

    border:none;

    outline:none;

    background:#111;

    color:#ffffff;

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:20px;

    transition:.35s;

}

#theme-toggle:hover{

    background:#00C896;

    color:#000;

    transform:rotate(180deg);

    box-shadow:0 0 18px rgba(0,200,150,.5);

}


/* ===========================
Sticky Animation
=========================== */

header{

    animation:navbarDown .8s ease;

}

@keyframes navbarDown{

    from{

        opacity:0;

        transform:translate(-50%,-40px);

    }

    to{

        opacity:1;

        transform:translate(-50%,0);

    }

}
/* ==========================================
                HERO SECTION
========================================== */

.hero{

    width:90%;

    max-width:1250px;

min-height:calc(100vh - 180px);
    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:90px;
padding-top:120px;
padding-bottom:40px;

}


/* ===========================
LEFT SIDE
=========================== */

.hero-left{

    flex:1;

    animation:fadeLeft 1s ease;

}

.hello{

    font-size:22px;

    color:#00C896;

    margin-bottom:18px;

    font-weight:500;

    letter-spacing:.5px;

}

.hero-left h1{

    font-size:82px;

    font-weight:800;

    line-height:1.05;

    margin-bottom:18px;

    color:#ffffff;

    letter-spacing:-2px;

}

.hero-left h2{

    font-size:34px;

    color:#d3d3d3;

    font-weight:500;

    margin-bottom:30px;

}

.description{

    max-width:620px;

    color:#b8b8b8;

    font-size:18px;

    line-height:1.9;

}


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

.hero-buttons{

    display:flex;

    gap:22px;

    margin-top:45px;

    flex-wrap:wrap;

}

.btn{

    padding:18px 34px;

    border-radius:16px;

    display:inline-flex;

    align-items:center;

    gap:10px;

    font-size:16px;

    font-weight:600;

    transition:.35s;

}

.btn-primary{

    background:#00C896;

    color:#000;

    box-shadow:0 0 35px rgba(0,200,150,.25);

}

.btn-primary:hover{

    transform:translateY(-7px);

    box-shadow:

    0 0 40px rgba(0,200,150,.45);

}

.btn-secondary{

    border:2px solid #00C896;

    color:#00C896;

}

.btn-secondary:hover{

    background:#00C896;

    color:#000;

    transform:translateY(-7px);

}


/* ===========================
RIGHT SIDE
=========================== */

.hero-right{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

    animation:fadeRight 1.2s ease;

}


/* ==================================
BIG GLOWING ORB
================================== */
/* ==========================================
           PREMIUM HERO ORB
========================================== */

.hero-right{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

}
.hero-circle{

    position:relative;

    width:420px;
    height:420px;

    border-radius:50%;

    overflow:hidden;

}

.particle{

    position:absolute;

    width:6px;
    height:6px;

    border-radius:50%;

    background:#00C896;

    box-shadow:
        0 0 10px #00C896,
        0 0 20px rgba(0,200,150,.7);

    animation:floatParticle 6s ease-in-out infinite;

}
.p1{top:30px;left:70px;animation-delay:0s;}
.p2{top:70px;right:90px;animation-delay:.4s;}
.p3{top:120px;left:180px;animation-delay:.8s;}
.p4{top:170px;right:60px;animation-delay:1.2s;}
.p5{top:220px;left:60px;animation-delay:1.6s;}
.p6{top:260px;right:130px;animation-delay:2s;}
.p7{top:310px;left:140px;animation-delay:2.4s;}
.p8{bottom:40px;right:80px;animation-delay:2.8s;}
.p9{bottom:90px;left:80px;animation-delay:3.2s;}
.p10{bottom:150px;right:180px;animation-delay:3.6s;}
.p11{top:80px;left:300px;animation-delay:4s;}
.p12{bottom:120px;left:240px;animation-delay:4.4s;}
@keyframes floatParticle{

    0%{
        transform:translateY(0) scale(1);
        opacity:.4;
    }

    25%{
        opacity:1;
    }

    50%{
        transform:translateY(-18px) scale(1.4);
        opacity:1;
    }

    75%{
        opacity:.7;
    }

    100%{
        transform:translateY(0) scale(1);
        opacity:.4;
    }

}
/* Top highlight */

.hero-circle::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:50%;

    background:

    radial-gradient(circle at 30% 25%,

    rgba(255,255,255,.05),

    transparent 38%);

}


/* Glowing rim */

.hero-circle::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:50%;

    border:4px solid rgba(0,255,170,.70);

    box-shadow:

    0 0 18px rgba(0,255,170,.55),

    0 0 60px rgba(0,255,170,.20);

}


/* Background glow */

.hero-right::before{

    content:"";

    position:absolute;

    width:760px;

    height:760px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(0,255,170,.12),

    transparent 70%);

    filter:blur(90px);

    z-index:-1;

}
/* ==================================
ANIMATIONS
================================== */

@keyframes float{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-25px);

}

100%{

transform:translateY(0px);

}

}

@keyframes pulse{

0%{

transform:scale(1);

opacity:.7;

}

50%{

transform:scale(1.08);

opacity:1;

}

100%{

transform:scale(1);

opacity:.7;

}

}

@keyframes fadeLeft{

from{

opacity:0;

transform:translateX(-80px);

}

to{

opacity:1;

transform:translateX(0);

}

}

@keyframes fadeRight{

from{

opacity:0;

transform:translateX(80px);

}

to{

opacity:1;

transform:translateX(0);

}

}


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

@media(max-width:1000px){

.hero{

flex-direction:column-reverse;

text-align:center;

padding-top:170px;

}

.hero-left h1{

font-size:56px;

}

.hero-left h2{

font-size:28px;

}

.description{

margin:auto;

}

.hero-buttons{

justify-content:center;

}

.hero-circle{

width:300px;

height:300px;

}

.circle-glow{

width:300px;

height:300px;

}

.circle-inner{

width:220px;

height:220px;

}

}
/* ==========================================
            HERO IMPROVEMENTS
========================================== */

/* Small Badge */

.hero-badge{

display:inline-flex;

align-items:center;

gap:10px;

padding:10px 18px;

border-radius:50px;

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

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

backdrop-filter:blur(12px);

margin-bottom:25px;

color:#00C896;

font-size:15px;

font-weight:500;

box-shadow:0 0 20px rgba(0,200,150,.08);

}

.hero-badge i{

font-size:18px;

}


/* Better Heading */
.hero-left h1{
    background: linear-gradient(180deg,#ffffff,#d7d7d7);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}


/* Better Description */

.description{

margin-top:15px;

font-weight:300;

}


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

.btn{

overflow:hidden;

position:relative;

}

.btn::before{

content:"";

position:absolute;

top:0;

left:-100%;

width:100%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.25),

transparent

);

transition:.8s;

}

.btn:hover::before{

left:100%;

}


/* ==========================================
SCROLL INDICATOR
========================================== */

.scroll-down{

position:absolute;

left:50%;

bottom:40px;

transform:translateX(-50%);

display:flex;

flex-direction:column;

align-items:center;

gap:10px;

animation:scrollMove 2s infinite;

}

.scroll-down span{

font-size:14px;

color:#bdbdbd;

}

.mouse{

width:28px;

height:48px;

border:2px solid #00C896;

border-radius:30px;

position:relative;

}

.mouse::before{

content:"";

position:absolute;

top:8px;

left:50%;

transform:translateX(-50%);

width:6px;

height:6px;

background:#00C896;

border-radius:50%;

animation:wheel 2s infinite;

}

@keyframes wheel{

0%{

opacity:1;

top:8px;

}

100%{

opacity:0;

top:28px;

}

}

@keyframes scrollMove{

50%{

transform:translate(-50%,8px);

}

}


/* ==========================================
CURSOR GLOW
========================================== */

.cursor-glow{

position:fixed;

width:350px;

height:350px;

border-radius:50%;

background:radial-gradient(

circle,

rgba(0,200,150,.12),

transparent 70%

);

pointer-events:none;

transform:translate(-50%,-50%);

z-index:-1;

transition:

left .08s linear,

top .08s linear;

}


/* ==========================================
SECTION ANIMATION
========================================== */

.section{

opacity:0;

transform:translateY(80px);

transition:1s;

}

.section.show{

opacity:1;

transform:translateY(0);

}


/* ==========================================
FLOATING ICONS
========================================== */

.floating-icon{

position:absolute;

font-size:26px;

color:#00C89633;

animation:floatIcon 7s ease-in-out infinite;

}

.icon1{

top:20%;

left:58%;

}

.icon2{

top:70%;

right:10%;

animation-delay:2s;

}

.icon3{

top:40%;

right:22%;

animation-delay:4s;

}

@keyframes floatIcon{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-25px);

}

100%{

transform:translateY(0px);

}

}
/* ==========================================
            PREMIUM ABOUT SECTION
========================================== */

#about{

    position:relative;

}

.about-container{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

    margin-top:70px;

}

.about-card{

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

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

    backdrop-filter:blur(18px);

    border-radius:30px;

    padding:45px;

    transition:.4s;

    overflow:hidden;

    position:relative;

}

.about-card::before{

    content:"";

    position:absolute;

    top:-120px;

    right:-120px;

    width:240px;

    height:240px;

    border-radius:50%;

    background:rgba(0,200,150,.08);

    filter:blur(35px);

}

.about-card:hover{

    transform:translateY(-12px);

    border-color:#00C896;

    box-shadow:

    0 20px 50px rgba(0,0,0,.4),

    0 0 40px rgba(0,200,150,.18);

}

.about-card h3{

    font-size:34px;

    margin-bottom:25px;

    color:#fff;

}

.about-card p{

    color:#bdbdbd;

    font-size:17px;

    line-height:1.9;

}


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

.about-stats{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:25px;

}

.stat-box{

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

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

    backdrop-filter:blur(18px);

    border-radius:22px;

    padding:30px;

    transition:.35s;

    text-align:center;

}

.stat-box:hover{

    transform:translateY(-10px);

    border-color:#00C896;

    box-shadow:0 0 25px rgba(0,200,150,.18);

}

.stat-box h2{

    color:#00C896;

    font-size:40px;

    margin-bottom:10px;

}

.stat-box span{

    color:#d0d0d0;

    font-size:16px;

}


/* ==========================================
PREMIUM SKILL CARDS
========================================== */

.skills-grid{

    margin-top:70px;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

.skill-card{

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

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

    border-radius:28px;

    padding:35px;

    backdrop-filter:blur(18px);

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.skill-card::before{

    content:"";

    position:absolute;

    width:200px;

    height:200px;

    border-radius:50%;

    background:#00C89610;

    top:-100px;

    right:-100px;

    transition:.5s;

}

.skill-card:hover::before{

    transform:scale(1.4);

}

.skill-card:hover{

    transform:translateY(-12px);

    border-color:#00C896;

    box-shadow:0 0 40px rgba(0,200,150,.18);

}

.skill-card i{

    font-size:42px;

    color:#00C896;

    margin-bottom:20px;

}

.skill-card h3{

    font-size:24px;

    margin-bottom:18px;

}

.skill-card p{

    color:#bdbdbd;

    line-height:1.8;

}


/* ==========================================
SECTION BACKGROUND LIGHT
========================================== */

.section::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    background:#00C89608;

    border-radius:50%;

    filter:blur(80px);

    left:-220px;

    top:50px;

    z-index:-1;

}


/* ==========================================
HOVER GLOW
========================================== */

.skill-card:hover i{

    transform:scale(1.12);

    transition:.35s;

}


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

@media(max-width:1000px){

.about-container{

grid-template-columns:1fr;

}

.skills-grid{

grid-template-columns:1fr;

}

.about-stats{

grid-template-columns:1fr;

}

}
/* ==========================================
            PROJECTS SECTION
========================================== */

.projects-grid{

    display:grid;

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

    gap:35px;

    margin-top:70px;

}

.project-card{

    position:relative;

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

    backdrop-filter:blur(18px);

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

    border-radius:28px;

    overflow:hidden;

    transition:.4s;

}

.project-card:hover{

    transform:translateY(-14px);

    border-color:#00C896;

    box-shadow:

    0 20px 45px rgba(0,0,0,.45),

    0 0 45px rgba(0,200,150,.18);

}

.project-image{

    width:100%;

    height:230px;

    overflow:hidden;

}

.project-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s;

}

.project-card:hover img{

    transform:scale(1.08);

}

.project-content{

    padding:30px;

}

.project-content h3{

    font-size:28px;

    margin-bottom:18px;

}

.project-content p{

    color:#bdbdbd;

    line-height:1.8;

    margin-bottom:22px;

}

.project-tech{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:25px;

}

.project-tech span{

    background:rgba(0,200,150,.12);

    color:#00C896;

    padding:8px 16px;

    border-radius:40px;

    font-size:14px;

}

.project-links{

    display:flex;

    gap:18px;

}

.project-links a{

    padding:13px 22px;

    border-radius:14px;

    background:#00C896;

    color:#000;

    font-weight:600;

    transition:.35s;

}

.project-links a:last-child{

    background:transparent;

    border:2px solid #00C896;

    color:#00C896;

}

.project-links a:hover{

    transform:translateY(-5px);

}

/* ==========================================
TIMELINE
========================================== */

.timeline{

    position:relative;

    margin-top:80px;

    padding-left:45px;

}

.timeline::before{

    content:"";

    position:absolute;

    left:10px;

    top:0;

    width:4px;

    height:100%;

    background:#00C896;

}

.timeline-item{

    position:relative;

    margin-bottom:50px;

}

.timeline-dot{

    position:absolute;

    left:-43px;

    width:24px;

    height:24px;

    background:#00C896;

    border-radius:50%;

    box-shadow:0 0 20px rgba(0,200,150,.45);

}

.timeline-content{

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

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

    backdrop-filter:blur(18px);

    padding:30px;

    border-radius:22px;

    transition:.35s;

}

.timeline-content:hover{

    transform:translateX(10px);

    border-color:#00C896;

}

.timeline-content h3{

    margin-bottom:10px;

    font-size:24px;

}

.timeline-content span{

    color:#00C896;

    font-size:15px;

}

.timeline-content p{

    margin-top:15px;

    color:#bdbdbd;

    line-height:1.8;

}

/* ==========================================
CERTIFICATES
========================================== */

.certificates-grid{

    display:grid;

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

    gap:30px;

    margin-top:70px;

}

.certificate-card{

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

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

    border-radius:24px;

    padding:35px;

    backdrop-filter:blur(18px);

    transition:.35s;

    text-align:center;

}

.certificate-card:hover{

    transform:translateY(-10px);

    border-color:#00C896;

    box-shadow:0 0 35px rgba(0,200,150,.18);

}

.certificate-card i{

    font-size:55px;

    color:#00C896;

    margin-bottom:22px;

}

.certificate-card h3{

    margin-bottom:14px;

    font-size:22px;

}

.certificate-card p{

    color:#bdbdbd;

    line-height:1.7;

}

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

.contact-box{

    margin-top:70px;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:40px;

}

.contact-card{

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

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

    backdrop-filter:blur(18px);

    padding:40px;

    border-radius:24px;

}

.contact-card h3{

    margin-bottom:20px;

    font-size:28px;

}

.contact-card p{

    color:#bdbdbd;

    line-height:1.8;

}

.contact-info{

    margin-top:30px;

}

.contact-info div{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:22px;

}

.contact-info i{

    width:50px;

    height:50px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#00C896;

    color:#000;

    font-size:22px;

}

/* ==========================================
SOCIAL ICONS
========================================== */

.social-icons{

    display:flex;

    gap:18px;

    margin-top:35px;

}

.social-icons a{

    width:52px;

    height:52px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

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

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

    color:#00C896;

    transition:.35s;

}

.social-icons a:hover{

    transform:translateY(-6px);

    background:#00C896;

    color:#000;

}

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

@media(max-width:1000px){

.contact-box{

grid-template-columns:1fr;

}

.timeline{

padding-left:25px;

}

.timeline-dot{

left:-33px;

}

}
/* ==========================================
            FINAL PREMIUM EFFECTS
========================================== */

/* Scroll Progress Bar */

.progress-bar{

    position:fixed;

    top:0;

    left:0;

    width:0%;

    height:4px;

    background:linear-gradient(90deg,#00C896,#33ffd1);

    z-index:9999;

    box-shadow:0 0 15px rgba(0,200,150,.6);

}


/* ==========================================
BACK TO TOP BUTTON
========================================== */

.back-to-top{

    position:fixed;

    right:35px;

    bottom:35px;

    width:58px;

    height:58px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#00C896;

    color:#000;

    font-size:24px;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    box-shadow:0 10px 25px rgba(0,200,150,.35);

    z-index:999;

}

.back-to-top.show{

    opacity:1;

    visibility:visible;

}

.back-to-top:hover{

    transform:translateY(-8px) rotate(8deg);

}


/* ==========================================
CARD HOVER GLOW
========================================== */

.project-card,
.skill-card,
.about-card,
.certificate-card,
.contact-card,
.stat-box,
.timeline-content{

    transition:

        transform .35s ease,

        box-shadow .35s ease,

        border-color .35s ease;

}

.project-card:hover,
.skill-card:hover,
.about-card:hover,
.certificate-card:hover,
.contact-card:hover,
.stat-box:hover,
.timeline-content:hover{

    box-shadow:

    0 15px 45px rgba(0,0,0,.4),

    0 0 35px rgba(0,200,150,.18);

}


/* ==========================================
FADE IN
========================================== */

.fade-up{

    opacity:0;

    transform:translateY(50px);

    transition:all .8s ease;

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

}


/* ==========================================
SMOOTH IMAGE HOVER
========================================== */

img{

    transition:.45s;

}

.project-image img:hover{

    transform:scale(1.05);

}


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

.btn{

    position:relative;

    overflow:hidden;

}

.btn::after{

    content:"";

    position:absolute;

    width:0;

    height:0;

    left:50%;

    top:50%;

    border-radius:50%;

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

    transform:translate(-50%,-50%);

    transition:.6s;

}

.btn:hover::after{

    width:320px;

    height:320px;

}


/* ==========================================
NAVBAR SCROLLED
========================================== */

header.scrolled .navbar{

    background:rgba(8,8,8,.82);

    backdrop-filter:blur(28px);

    border-color:rgba(0,200,150,.15);

}


/* ==========================================
TEXT GLOW
========================================== */

.hero-left h1{

    text-shadow:

    0 0 15px rgba(255,255,255,.06),

    0 0 40px rgba(0,200,150,.08);

}

.hero-left h2{

    color:#d8d8d8;

}


/* ==========================================
FOOTER
========================================== */

footer{

    margin-top:20px;

    padding:35px;

    color:#9e9e9e;

    text-align:center;

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

}

footer a{

    color:#00C896;

}


/* ==========================================
LIGHT MODE
========================================== */

body.light{

    background:#f7f7f7;

    color:#111;

}

body.light .navbar{

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

}

body.light .project-card,
body.light .skill-card,
body.light .certificate-card,
body.light .about-card,
body.light .contact-card,
body.light .timeline-content,
body.light .stat-box{

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

    color:#111;

    border-color:#e5e5e5;

}

body.light p{

    color:#555;

}

body.light h1,
body.light h2,
body.light h3{

    color:#111;

}

body.light footer{

    color:#555;

}


/* ==========================================
LOADER
========================================== */

.loader{

    position:fixed;

    inset:0;

    background:#080808;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

}

.loader span{

    width:18px;

    height:18px;

    margin:8px;

    border-radius:50%;

    background:#00C896;

    animation:loader .8s infinite alternate;

}

.loader span:nth-child(2){

    animation-delay:.2s;

}

.loader span:nth-child(3){

    animation-delay:.4s;

}

@keyframes loader{

    to{

        transform:translateY(-18px);

        opacity:.4;

    }

}


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

@media(max-width:992px){

.hero{

    flex-direction:column-reverse;

    text-align:center;

}

.hero-buttons{

    justify-content:center;

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

}

.hero-left h1{

    font-size:58px;

}

.hero-left h2{

    font-size:28px;

}

}

@media(max-width:768px){

.section{

    padding:90px 0;

}

.hero-left h1{

    font-size:46px;

}

.section-title{

    font-size:34px;

}

.hero-circle{

    width:280px;

    height:280px;

}

.circle-inner{

    width:200px;

    height:200px;

}

}

@media(max-width:480px){

.hero-left h1{

    font-size:38px;

}

.hero-left h2{

    font-size:22px;

}

.btn{

    width:100%;

    justify-content:center;

}

.back-to-top{

    right:20px;

    bottom:20px;

}

}

/* ==========================================
            PREMIUM ABOUT SECTION
========================================== */

#about{
    position:relative;
    overflow:hidden;
}


/* ABOUT LAYOUT */

.about-container{

    display:grid;

    grid-template-columns:1.2fr .8fr;

    gap:60px;

    align-items:center;

    margin-top:40px;

}



/* ABOUT GLASS CARD */

.about-card{

    position:relative;

    padding:45px;

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

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

    border-radius:30px;

    backdrop-filter:blur(20px);

    overflow:hidden;

    transition:.4s;

}



.about-card::before{

    content:"";

    position:absolute;

    width:250px;

    height:250px;

    right:-120px;

    top:-120px;

    background:#00C89622;

    border-radius:50%;

    filter:blur(50px);

}



.about-card:hover{

    transform:translateY(-10px);

    border-color:#00C896;

    box-shadow:

    0 20px 50px rgba(0,0,0,.4),

    0 0 40px rgba(0,200,150,.15);

}



.about-card h3{

    font-size:36px;

    margin-bottom:25px;

    color:#ffffff;

}



.about-card p{

    color:#bdbdbd;

    font-size:17px;

    line-height:1.9;

    font-weight:300;

}



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


.about-stats{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:25px;

}



.stat-box{

    padding:35px 25px;

    text-align:center;

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

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

    border-radius:25px;

    backdrop-filter:blur(20px);

    transition:.4s;

}



.stat-box:hover{

    transform:translateY(-12px);

    border-color:#00C896;

    box-shadow:

    0 0 35px rgba(0,200,150,.18);

}



.stat-box h2{

    font-size:42px;

    color:#00C896;

    font-weight:700;

    margin-bottom:10px;

}



.stat-box span{

    color:#d0d0d0;

    font-size:16px;

}



/* ==========================================
            ABOUT ICON GLOW
========================================== */


.about-card::after{

    content:"";

    position:absolute;

    width:120px;

    height:120px;

    left:-50px;

    bottom:-50px;

    background:#00C896;

    opacity:.08;

    border-radius:50%;

    filter:blur(40px);

}



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


@media(max-width:1000px){

    .about-container{

        grid-template-columns:1fr;

        gap:40px;

    }


    .about-card{

        padding:30px;

    }


    .about-card h3{

        font-size:30px;

    }


}


@media(max-width:600px){

    .about-stats{

        grid-template-columns:1fr;

    }


    .about-card p{

        font-size:15px;

    }

}
#about{
    opacity:1;
    transform:translateY(0);
}
/* ==========================================
        ABOUT PAGE FADE ANIMATION
========================================== */

.about-page{

    animation: aboutFadeIn 1s ease forwards;

}


@keyframes aboutFadeIn{

    from{

        opacity:0;

        transform:translateY(50px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/* Fade Out Before Leaving Page */

.about-page.fade-out{

    animation: aboutFadeOut .5s ease forwards;

}


@keyframes aboutFadeOut{

    from{

        opacity:1;

        transform:translateY(0);

    }

    to{

        opacity:0;

        transform:translateY(-40px);

    }

}
body{
    opacity:1;
    transition:opacity .25s ease;
}

body.fade-out{
    opacity:0;
}
#skills{

    padding-top:120px;

    padding-bottom:20px;

    min-height:auto;

    height:auto;

}
footer{

    margin-top:0;

    padding:30px 0;

}
#about{
    padding:120px 0 30px;
}
#about{
    padding:120px 0 20px !important;
    margin:0 auto !important;
}

.section{
    margin-bottom:0 !important;
}

body{
    margin:0;
    overflow-x:hidden;
}
#about.section{
    padding:120px 0 0 !important;
}
#about{
    position:relative;
    overflow:hidden;
    width:90%;
    max-width:1200px;
    margin:120px auto 0;
    padding:0;
    opacity:1;
    transform:none;
}
#about.section{
    padding-top:120px;
    padding-bottom:20px;
    min-height:auto;
    height:auto;
}
/* ==========================================
            EDUCATION PAGE
========================================== */

#education{

    width:90%;

    max-width:1200px;

    margin:auto;

    padding:120px 0 40px;

}

.education-container{

    display:flex;

    flex-direction:column;

    gap:35px;

    margin-top:45px;

}

.education-card{

    position:relative;

    padding:40px;

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

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

    border-radius:30px;

    backdrop-filter:blur(20px);

    transition:.4s;

}

.education-card:hover{

    transform:translateY(-10px);

    border-color:#00C896;

    box-shadow:
        0 15px 45px rgba(0,0,0,.35),
        0 0 35px rgba(0,200,150,.18);

}

.edu-year{

    display:inline-block;

    padding:8px 22px;

    background:#00C896;

    color:#fff;

    border-radius:50px;

    font-weight:600;

    margin-bottom:22px;

}

.education-card h3{

    font-size:30px;

    color:#fff;

    margin-bottom:10px;

}

.education-card h4{

    color:#00C896;

    margin-bottom:20px;

    font-size:19px;

}

.education-card p{

    color:#cfcfcf;

    line-height:1.9;

    margin-bottom:28px;

}

.education-highlight{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px 28px;

    background:rgba(0,200,150,.08);

    border:1px solid rgba(0,200,150,.25);

    border-radius:18px;

}

.education-highlight span{

    color:#ffffff;

    font-size:18px;

    font-weight:500;

}

.education-highlight h2{

    color:#00C896;

    font-size:34px;

    font-weight:700;

}

@media(max-width:768px){

    .education-highlight{

        flex-direction:column;

        gap:10px;

        text-align:center;

    }

}
.contact-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px;

    margin-top:60px;

}



.contact-card{

    display:flex;

    align-items:center;

    gap:30px;

    padding:35px;

    border-radius:25px;

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

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

    text-decoration:none;

    transition:.35s;

}



.contact-card:hover{

    transform:translateY(-8px);

    border-color:#00C896;

}



.contact-card i{

    width:70px;

    height:70px;

    border-radius:50%;

    background:#00C896;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:30px;

    color:#000;

}



.contact-card h3{

    font-size:32px;

    color:#fff;

    margin-bottom:6px;

}



.contact-card span{

    color:#bdbdbd;

    font-size:18px;

}



.contact-form-box{

    margin-top:80px;

    padding:50px;

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

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

    border-radius:30px;

}



.contact-form-box input,

.contact-form-box textarea{

    width:100%;

    margin-bottom:25px;

}



@media(max-width:900px){

.contact-grid{

grid-template-columns:1fr;

}

}
/* ==========================================
            CONTACT FORM
========================================== */

.contact-form-box{

    width:100%;

    max-width:1000px;

    margin:80px auto 50px;

    padding:45px;

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

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

    border-radius:30px;

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    transition:.4s;

}

.contact-form-box:hover{

    border-color:#00C896;

    box-shadow:
    0 0 40px rgba(0,200,150,.12);

}

.contact-form-box form{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.contact-form-box input,

.contact-form-box textarea{

    width:100%;

    padding:18px 22px;

    border:none;

    outline:none;

    border-radius:16px;

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

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

    color:#ffffff;

    font-size:17px;

    font-family:'Poppins',sans-serif;

    transition:.3s;

}

.contact-form-box input::placeholder,

.contact-form-box textarea::placeholder{

    color:#9c9c9c;

}

.contact-form-box input:focus,

.contact-form-box textarea:focus{

    border-color:#00C896;

    box-shadow:0 0 18px rgba(0,200,150,.25);

}

.contact-form-box textarea{

    min-height:220px;

    resize:vertical;

}

.contact-form-box button{

    width:100%;

    padding:18px;

    border:none;

    border-radius:16px;

    background:#00C896;

    color:#000;

    font-size:20px;

    font-weight:700;

    font-family:'Poppins',sans-serif;

    cursor:pointer;

    transition:.35s;

}

.contact-form-box button:hover{

    transform:translateY(-4px);

    background:#00ddb3;

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

}
/* ==========================
        SUCCESS TOAST
========================== */

.toast{
    position:fixed;
    top:30px;
    right:30px;

    background:#12c89a;
    color:#fff;

    padding:16px 28px;

    border-radius:12px;

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

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

    opacity:0;
    visibility:hidden;

    transform:translateY(-25px);

    transition:.4s ease;

    z-index:9999;
}

.toast.show{

    opacity:1;
    visibility:visible;

    transform:translateY(0);

}
/* ==============================
   PROJECT PAGE
============================== */
.projects{

    width:90%;
    max-width:1200px;
    margin:auto;
    padding:120px 0 40px;

    animation: projectFade 0.3s ease-in-out;

}



/* PAGE LOAD ANIMATION */


@keyframes projectFade{

    from{
        opacity:0;
        transform:translateY(15px);
    }

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

}


/* SECTION TITLE */


.section-title{

    text-align:left;

    margin-bottom:60px;

}



.section-title h2{

    font-size:40px;

    color:white;

}



.section-title p{

    color:#aaa;

    font-size:18px;

}



/* PROJECT GRID */


.project-container{

    display:grid;

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

    gap:35px;

}



/* PROJECT CARD */


.project-card{

    position:relative;

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

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

    border-radius:30px;

    overflow:hidden;

    backdrop-filter:blur(20px);

    transition:.3s;

    animation:cardFade .4s ease forwards;

}

@keyframes cardFade{

    from{
        opacity:0;
        transform:translateY(15px);
    }

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

}


/* CARD HOVER */


.project-card:hover{

    transform:translateY(-10px);

    border-color:#00C896;

    box-shadow:

    0 15px 45px rgba(0,0,0,.35),

    0 0 35px rgba(0,200,150,.18);

}



/* IMAGE */


.project-image{

    height:280px;

    background:transparent;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}



.project-image img{

    height:100%;

    width:auto;

    transition:.4s;

}



.project-card:hover img{

    transform:scale(1.1);

}



/* CONTENT */


.project-content{

    padding:30px;

    color:white;

}



.project-content h2{

    font-size:30px;

    color:#fff;

    margin-bottom:10px;

}



.project-content h4{

    color:#00C896;

    margin-bottom:20px;

    font-size:19px;

}



.project-content p{

    color:#cfcfcf;

    line-height:1.9;

    margin-bottom:25px;

}



/* TECH TAGS */


.tech{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin:20px 0;

}



.tech span{

    padding:8px 16px;

    border-radius:50px;

    background:rgba(0,200,150,.08);

    border:1px solid rgba(0,200,150,.25);

    color:#00C896;

    font-size:13px;

}



/* BUTTONS */


.buttons{

    display:flex;

    gap:15px;

}



.btn{

    padding:10px 22px;

    border-radius:25px;

    background:#00C896;

    color:#000;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}



.btn:hover{

    transform:scale(1.05);

}



@media(max-width:768px){

    .projects{

        width:90%;

    }


    .project-container{

        grid-template-columns:1fr;

    }

}
/* ==============================
   CERTIFICATIONS
============================== */


.certification-title{

    margin-top:100px;

}



.cert-container{

    display:grid;

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

    gap:35px;

}




.cert-card{
    display:flex;
    flex-direction:column;

    padding:30px;

    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:30px;

    backdrop-filter:blur(20px);

    transition:.4s;

    height:100%;
}
.cert-card:hover{

    transform:translateY(-10px);

    border-color:#00C896;

    box-shadow:

    0 15px 45px rgba(0,0,0,.35),

    0 0 35px rgba(0,200,150,.18);

}



.cert-card h3{

    color:white;

    font-size:25px;

    margin-bottom:12px;

}



.cert-card h4{

    color:#00C896;

    font-size:18px;

    margin-bottom:18px;

}


.cert-card p{
    color:#cfcfcf;
    line-height:1.8;
    margin-bottom:20px;
    flex-grow:1;   /* Makes all cards equal height */
}


.cert-card span{
    display:block;
    margin-bottom:20px;
    color:#00C896;
    font-weight:600;
}
.buttons{
    margin-top:auto;   /* Pushes the button to the bottom */
}
#profile-btn{

    width:48px;
    height:48px;

    border:none;
    border-radius:50%;

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

    color:#fff;

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

    cursor:pointer;

    transition:.35s;

    backdrop-filter:blur(12px);

}


#profile-btn:hover{

    background:#00C896;

    color:#000;

    transform:translateY(-3px);

    box-shadow:0 0 25px rgba(0,200,150,.35);

}


#profile-btn svg{

    width:22px;
    height:22px;

}