/* =========================================================
   RAIHAN KAMIL PORTFOLIO
   STYLE.CSS
========================================================= */

:root{
    --bg:#050608;
    --bg-soft:#090c10;
    --bg-card:#0c1015;
    --green:#baff35;
    --white:#ffffff;
    --text:#929ba6;
    --muted:#5e6874;
    --border:rgba(255,255,255,.10);
    --border-strong:rgba(255,255,255,.18);
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:var(--bg);
    color:var(--white);
    font-family:Arial,Helvetica,sans-serif;
    overflow-x:hidden;
}

body.menu-open{
    overflow:hidden;
}

a{
    color:inherit;
    text-decoration:none;
}

button{
    font:inherit;
}

img{
    max-width:100%;
}

::selection{
    background:var(--green);
    color:#050608;
}

.container{
    width:min(1180px,90%);
    margin:0 auto;
}

.section{
    position:relative;
    padding:125px 0;
}

.section-label{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:25px;
    color:var(--green);
    font-size:10px;
    font-weight:700;
    letter-spacing:3px;
    text-transform:uppercase;
}

.section-label::before{
    content:"";
    width:28px;
    height:1px;
    background:currentColor;
}

.section-title{
    max-width:1000px;
    font-size:clamp(48px,6vw,84px);
    line-height:.93;
    letter-spacing:-4px;
    font-weight:900;
}


/* =========================================================
   SCROLL PROGRESS
========================================================= */

#progress-bar{
    position:fixed;
    top:0;
    left:0;
    width:0;
    height:3px;
    z-index:99999;
    background:var(--green);
    box-shadow:0 0 18px rgba(186,255,53,.75);
}


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

.cursor-glow{
    position:fixed;
    left:0;
    top:0;
    width:430px;
    height:430px;
    border-radius:50%;
    pointer-events:none;
    z-index:2;
    opacity:.7;
    transform:translate(-50%,-50%);
    background:
        radial-gradient(
            circle,
            rgba(186,255,53,.13) 0%,
            rgba(186,255,53,.05) 35%,
            transparent 70%
        );
    filter:blur(25px);
}


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

.loader{
    position:fixed;
    inset:0;
    z-index:9999;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#020304;
}

.loader-inner{
    width:min(750px,85%);
}

.loader-logo{
    display:block;
    width:105px;
    height:105px;
    margin-bottom:38px;
    object-fit:contain;
}

.loader-title{
    overflow:hidden;
    font-size:clamp(60px,9vw,120px);
    line-height:.82;
    letter-spacing:-7px;
    font-weight:900;
}

.loader-title .outline{
    color:transparent;
    -webkit-text-stroke:1px #525b65;
}

.loader-line{
    width:100%;
    height:1px;
    margin-top:42px;
    overflow:hidden;
    background:#262c32;
}

.loader-line-progress{
    width:0;
    height:100%;
    background:var(--green);
}

.loader-info{
    display:flex;
    justify-content:space-between;
    margin-top:13px;
    color:#626b76;
    font-size:9px;
    letter-spacing:2px;
}

#loaderPercent{
    color:var(--green);
}


/* =========================================================
   NAVIGATION
========================================================= */

.navbar{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:900;
    transition:
        background .3s ease,
        border .3s ease;
    border-bottom:1px solid transparent;
}

.navbar.scrolled{
    background:rgba(5,6,8,.82);
    border-bottom-color:var(--border);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.nav-inner{
    min-height:84px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.logo{
    position:relative;
    z-index:902;
    display:flex;
    align-items:center;
}

.logo img{
    display:block;
    width:62px;
    height:62px;
    object-fit:contain;
}

.nav-menu{
    display:flex;
    align-items:center;
    gap:30px;
}

.nav-menu > a{
    color:#969faa;
    font-size:10px;
    letter-spacing:1.5px;
    transition:.3s ease;
}

.nav-menu > a:hover{
    color:var(--green);
}

.nav-contact{
    padding:12px 18px;
    color:var(--green)!important;
    border:1px solid rgba(186,255,53,.45);
}

.nav-contact:hover{
    background:var(--green);
    color:#050608!important;
}

.mobile-menu-button{
    position:relative;
    z-index:902;
    display:none;
    width:44px;
    height:44px;
    padding:0;
    border:1px solid var(--border);
    background:transparent;
    cursor:pointer;
}

.mobile-menu-button span{
    position:absolute;
    left:11px;
    width:20px;
    height:1px;
    background:#fff;
    transition:.3s;
}

.mobile-menu-button span:first-child{
    top:17px;
}

.mobile-menu-button span:last-child{
    top:25px;
}

.mobile-menu-button.active span:first-child{
    top:21px;
    transform:rotate(45deg);
}

.mobile-menu-button.active span:last-child{
    top:21px;
    transform:rotate(-45deg);
}


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

.mobile-menu{
    position:fixed;
    inset:0;
    z-index:850;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:100px 8%;
    background:rgba(3,4,6,.98);
    opacity:0;
    visibility:hidden;
    transform:translateY(-20px);
    transition:.35s ease;
}

.mobile-menu.active{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.mobile-menu a{
    padding:15px 0;
    border-bottom:1px solid var(--border);
    font-size:clamp(34px,10vw,65px);
    line-height:1;
    letter-spacing:-2px;
    font-weight:900;
}

.mobile-menu a:hover{
    color:var(--green);
}


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

.hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:
        radial-gradient(
            circle at 77% 42%,
            rgba(186,255,53,.09),
            transparent 28%
        ),
        #050608;
}

.hero-grid{
    position:absolute;
    inset:0;
    opacity:.35;
    pointer-events:none;
    background-image:
        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );
    background-size:65px 65px;
    -webkit-mask-image:
        linear-gradient(to bottom,#000 45%,transparent 100%);
    mask-image:
        linear-gradient(to bottom,#000 45%,transparent 100%);
}

.hero-orbit{
    position:absolute;
    top:50%;
    right:-200px;
    width:650px;
    height:650px;
    border:1px solid rgba(186,255,53,.08);
    border-radius:50%;
    transform:translateY(-50%);
    animation:orbit 20s linear infinite;
}

.hero-orbit::before,
.hero-orbit::after{
    content:"";
    position:absolute;
    border-radius:50%;
}

.hero-orbit::before{
    inset:80px;
    border:1px solid rgba(186,255,53,.06);
}

.hero-orbit::after{
    inset:170px;
    border:1px solid rgba(255,255,255,.05);
}

@keyframes orbit{
    from{
        transform:translateY(-50%) rotate(0deg);
    }

    to{
        transform:translateY(-50%) rotate(360deg);
    }
}

.hero-container{
    position:relative;
    z-index:5;
    padding-top:110px;
}

.hero-status{
    position:relative;
    z-index:30;
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:9px 13px;
    margin-bottom:30px;
    border:1px solid var(--border);
    border-radius:100px;
    background:rgba(255,255,255,.025);
    color:#89929e;
    font-size:9px;
    letter-spacing:1.5px;
}

.status-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--green);
    box-shadow:0 0 15px var(--green);
    animation:pulse 1.6s infinite;
}

@keyframes pulse{
    50%{
        opacity:.25;
        transform:scale(.8);
    }
}


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

.hero-title{
    position:relative;
    z-index:20;
    width:75%;
    margin:0;
    font-size:clamp(80px,10vw,145px);
    line-height:.78;
    letter-spacing:-9px;
    font-weight:900;
}

.hero-line{
    display:block;
    overflow:hidden;
    padding-bottom:13px;
}

.hero-line > span{
    display:block;
}

.outline{
    color:transparent;
    -webkit-text-stroke:1px #5a626d;
}


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

.hero-person{
    position:absolute;
    z-index:10;
    right:-3%;
    bottom:-125px;
    width:57%;
    max-width:660px;
    height:770px;
    pointer-events:none;
}

.person-image{
    position:absolute;
    z-index:8;
    right:0;
    bottom:0;
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center bottom;
    filter:
        contrast(1.05)
        saturate(.95);
    transform-origin:center bottom;
}

.person-glow{
    position:absolute;
    z-index:1;
    left:50%;
    top:44%;
    width:570px;
    height:570px;
    border-radius:50%;
    transform:translate(-50%,-50%);
    background:
        radial-gradient(
            circle,
            rgba(186,255,53,.17),
            rgba(186,255,53,.045) 45%,
            transparent 70%
        );
    filter:blur(15px);
}

.person-ring{
    position:absolute;
    z-index:2;
    border-radius:50%;
}

.ring-one{
    top:100px;
    right:20px;
    width:455px;
    height:455px;
    border:1px solid rgba(186,255,53,.18);
}

.ring-two{
    top:155px;
    right:75px;
    width:345px;
    height:345px;
    border:1px solid rgba(255,255,255,.07);
}

.floating-card{
    position:absolute;
    z-index:20;
    padding:12px 15px;
    border:1px solid rgba(255,255,255,.13);
    background:rgba(5,7,10,.76);
    backdrop-filter:blur(15px);
    -webkit-backdrop-filter:blur(15px);
    color:#fff;
    font-size:9px;
    line-height:1.5;
    letter-spacing:1px;
}

.floating-card small{
    display:block;
    margin-bottom:4px;
    color:var(--green);
    font-size:7px;
    letter-spacing:2px;
}

.card-one{
    left:10px;
    top:290px;
}

.card-two{
    right:0;
    top:180px;
}


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

.hero-content{
    position:relative;
    z-index:30;
    width:57%;
    margin-top:48px;
}

.hero-content p{
    max-width:650px;
    color:#a1aab5;
    font-size:clamp(17px,1.8vw,23px);
    line-height:1.55;
}

.hero-content strong{
    color:#fff;
    font-weight:500;
}

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

.button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:52px;
    padding:0 24px;
    border:1px solid var(--border-strong);
    font-size:10px;
    font-weight:700;
    letter-spacing:1.3px;
    transition:
        background .3s ease,
        border .3s ease,
        color .3s ease;
}

.button-primary{
    background:var(--green);
    border-color:var(--green);
    color:#050608;
}

.button-primary:hover{
    background:#fff;
    border-color:#fff;
}

.button-secondary:hover{
    color:var(--green);
    border-color:var(--green);
}


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

.scroll-indicator{
    position:absolute;
    z-index:40;
    right:2%;
    bottom:45px;
    display:flex;
    align-items:center;
    gap:13px;
    color:#5f6874;
    font-size:8px;
    letter-spacing:2px;
    transform:rotate(90deg);
}

.scroll-line{
    position:relative;
    width:60px;
    height:1px;
    overflow:hidden;
    background:#313740;
}

.scroll-line::after{
    content:"";
    position:absolute;
    left:-50%;
    width:50%;
    height:100%;
    background:var(--green);
    animation:scrollLine 1.8s infinite;
}

@keyframes scrollLine{
    to{
        left:100%;
    }
}


/* =========================================================
   MARQUEE
========================================================= */

.marquee{
    position:relative;
    z-index:20;
    overflow:hidden;
    padding:20px 0;
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
    background:#090c10;
    white-space:nowrap;
}

.marquee-track{
    display:flex;
    width:max-content;
    align-items:center;
    animation:marquee 28s linear infinite;
}

.marquee-track span{
    margin:0 25px;
    color:#737c87;
    font-size:10px;
    letter-spacing:2px;
}

.marquee-track b{
    color:var(--green);
    font-size:10px;
}

@keyframes marquee{
    to{
        transform:translateX(-50%);
    }
}


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

.section-grid{
    display:grid;
    grid-template-columns:.5fr 1.5fr;
    gap:70px;
}

.about-title{
    font-size:clamp(38px,4.5vw,65px);
    line-height:1.05;
    letter-spacing:-3px;
}

.about-title span{
    color:#505966;
}

.about-copy{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    margin-top:45px;
}

.about-copy p{
    color:var(--text);
    font-size:14px;
    line-height:1.85;
}


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

.stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    margin-top:90px;
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
}

.stat{
    padding:40px 25px;
    border-right:1px solid var(--border);
}

.stat:last-child{
    border-right:0;
}

.stat-number{
    font-size:clamp(45px,5vw,75px);
    line-height:1;
    letter-spacing:-4px;
    font-weight:900;
}

.stat-number b{
    color:var(--green);
}

.stat p{
    margin-top:13px;
    color:#67717d;
    font-size:8px;
    letter-spacing:1.7px;
}


/* =========================================================
   EXPERTISE
========================================================= */

.expertise{
    background:#0a0d12;
}

.section-heading{
    display:grid;
    grid-template-columns:1.3fr .7fr;
    gap:60px;
    align-items:end;
    margin-bottom:70px;
}

.section-description{
    color:var(--text);
    font-size:14px;
    line-height:1.85;
}

.services{
    border-top:1px solid var(--border);
}

.service{
    position:relative;
    display:grid;
    grid-template-columns:90px 1fr 1fr 50px;
    align-items:center;
    min-height:180px;
    padding:30px 0;
    overflow:hidden;
    border-bottom:1px solid var(--border);
}

.service::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            90deg,
            rgba(186,255,53,.055),
            transparent
        );
    transform:translateX(-101%);
    transition:.5s ease;
}

.service:hover::before{
    transform:translateX(0);
}

.service-number,
.service h3,
.service-info,
.service-arrow{
    position:relative;
    z-index:2;
}

.service-number{
    color:var(--green);
    font-size:10px;
}

.service h3{
    font-size:clamp(25px,3vw,38px);
    letter-spacing:-1.5px;
}

.service-info p{
    color:var(--text);
    font-size:13px;
    line-height:1.7;
}

.tags{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:15px;
}

.tags span{
    padding:5px 8px;
    border:1px solid var(--border);
    color:#747d89;
    font-size:8px;
    letter-spacing:1px;
    text-transform:uppercase;
}

.service-arrow{
    color:#4f5864;
    font-size:22px;
    transition:.3s ease;
}

.service:hover .service-arrow{
    color:var(--green);
    transform:rotate(45deg);
}


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

.projects{
    display:flex;
    flex-direction:column;
    gap:22px;
    margin-top:70px;
}

.project{
    position:relative;
    min-height:500px;
    padding:48px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    overflow:hidden;
    border:1px solid var(--border);
    background:#0a0d12;
    transform-style:preserve-3d;
    will-change:transform;
}

.project::before{
    content:"";
    position:absolute;
    top:-220px;
    right:-180px;
    width:600px;
    height:600px;
    border-radius:50%;
    background:
        radial-gradient(
            circle,
            rgba(186,255,53,.11),
            transparent 65%
        );
}

.project-grid{
    position:absolute;
    inset:0;
    opacity:.25;
    background-image:
        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );
    background-size:50px 50px;
}

.project-top,
.project > h3,
.project-bottom{
    position:relative;
    z-index:3;
}

.project-top{
    display:flex;
    justify-content:space-between;
}

.project-top span{
    color:var(--green);
    font-size:9px;
    letter-spacing:2px;
}

.project-top small{
    color:#4c5560;
    font-size:10px;
}

.project > h3{
    max-width:900px;
    font-size:clamp(43px,6vw,80px);
    line-height:.9;
    letter-spacing:-5px;
}

.project-bottom{
    display:grid;
    grid-template-columns:1fr auto;
    gap:50px;
    align-items:end;
}

.project-bottom > p{
    max-width:650px;
    color:var(--text);
    font-size:13px;
    line-height:1.8;
}

.project-result{
    text-align:right;
}

.project-result strong{
    display:block;
    color:var(--green);
    font-size:34px;
    letter-spacing:-2px;
}

.project-result span{
    color:#626b77;
    font-size:8px;
    letter-spacing:1.2px;
}


/* =========================================================
   PROCESS
========================================================= */

.process{
    background:var(--green);
    color:#050608;
}

.dark-label{
    color:#050608;
}

.process-title{
    font-size:clamp(52px,7vw,95px);
    line-height:.87;
    letter-spacing:-6px;
    font-weight:900;
}

.process-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    margin-top:80px;
    border-top:1px solid rgba(0,0,0,.25);
}

.process-card{
    min-height:300px;
    padding:28px 22px;
    border-right:1px solid rgba(0,0,0,.22);
}

.process-card:last-child{
    border-right:0;
}

.process-card > span{
    font-size:9px;
    opacity:.55;
}

.process-card h3{
    margin-top:100px;
    font-size:24px;
}

.process-card p{
    margin-top:14px;
    font-size:11px;
    line-height:1.7;
    opacity:.65;
}


/* =========================================================
   EXPERIENCE
========================================================= */

.timeline{
    margin-top:70px;
}

.experience-item{
    display:grid;
    grid-template-columns:170px 1fr 1fr 30px;
    gap:30px;
    padding:34px 0;
    border-top:1px solid var(--border);
}

.experience-item:last-child{
    border-bottom:1px solid var(--border);
}

.experience-year{
    color:var(--green);
    font-size:9px;
    letter-spacing:1.4px;
}

.experience-item h3{
    font-size:20px;
}

.experience-item p{
    color:var(--text);
    font-size:12px;
    line-height:1.7;
}

.experience-item > span{
    color:#4d5662;
}


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

.toolkit{
    background:#0a0d12;
}

.tool-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
    margin-top:65px;
}

.tool-card{
    min-height:280px;
    padding:28px;
    border:1px solid var(--border);
    transition:.35s ease;
}

.tool-card:hover{
    transform:translateY(-8px);
    border-color:rgba(186,255,53,.4);
}

.tool-card > span{
    color:#4d5662;
    font-size:9px;
}

.tool-card h3{
    margin-top:65px;
    margin-bottom:20px;
    color:var(--green);
    font-size:11px;
    letter-spacing:2px;
}

.tool-card p{
    color:#8b949f;
    font-size:12px;
    line-height:2;
}


/* =========================================================
   TRAINER
========================================================= */

.trainer-box{
    position:relative;
    padding:75px;
    overflow:hidden;
    border:1px solid var(--border);
    background:
        radial-gradient(
            circle at 80% 50%,
            rgba(186,255,53,.07),
            transparent 30%
        ),
        #090c10;
}

.trainer-box::after{
    content:"RK";
    position:absolute;
    right:-40px;
    bottom:-90px;
    color:rgba(255,255,255,.02);
    font-size:350px;
    line-height:1;
    font-weight:900;
}

.trainer-box h2{
    position:relative;
    z-index:2;
    max-width:900px;
    font-size:clamp(43px,6vw,78px);
    line-height:.95;
    letter-spacing:-4px;
}

.trainer-box h2 span{
    color:#525b67;
}

.trainer-tags{
    position:relative;
    z-index:2;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:45px;
}

.trainer-tags span{
    padding:11px 15px;
    border:1px solid var(--border);
    color:#858e99;
    font-size:9px;
    letter-spacing:1px;
}


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

.contact{
    min-height:90vh;
    display:flex;
    align-items:center;
}

.contact-title{
    font-size:clamp(75px,11vw,155px);
    line-height:.77;
    letter-spacing:-9px;
    font-weight:900;
}

.contact-title span{
    color:var(--green);
}

.contact-bottom{
    display:grid;
    grid-template-columns:1fr auto;
    gap:50px;
    align-items:end;
    margin-top:70px;
}

.contact-bottom > div:first-child > p{
    max-width:570px;
    color:#929ba6;
    font-size:18px;
    line-height:1.65;
}

.social-links{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    margin-top:25px;
}

.social-links a{
    color:#69727e;
    font-size:9px;
    letter-spacing:1.4px;
    transition:.3s;
}

.social-links a:hover{
    color:var(--green);
}

.contact-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

footer{
    display:flex;
    justify-content:space-between;
    gap:30px;
    margin-top:90px;
    padding-top:25px;
    border-top:1px solid var(--border);
    color:#4e5762;
    font-size:8px;
    letter-spacing:1.3px;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1000px){

    .cursor-glow{
        display:none;
    }

    .nav-menu{
        display:none;
    }

    .mobile-menu-button{
        display:block;
    }

    .section{
        padding:95px 0;
    }

    .hero{
        min-height:1000px;
        align-items:flex-start;
    }

    .hero-container{
        padding-top:145px;
    }

    .hero-title{
        width:100%;
        font-size:clamp(70px,16vw,115px);
        letter-spacing:-6px;
    }

    .hero-content{
        width:65%;
    }

    .hero-person{
        width:600px;
        max-width:75%;
        height:610px;
        right:-70px;
        bottom:-115px;
    }

    .ring-one{
        width:360px;
        height:360px;
        right:55px;
        top:110px;
    }

    .ring-two{
        width:270px;
        height:270px;
        right:100px;
        top:155px;
    }

    .floating-card{
        display:none;
    }

    .section-grid,
    .section-heading{
        grid-template-columns:1fr;
        gap:35px;
    }

    .about-copy{
        grid-template-columns:1fr;
        gap:20px;
    }

    .stats{
        grid-template-columns:1fr 1fr;
    }

    .stat:nth-child(2){
        border-right:0;
    }

    .stat:nth-child(-n+2){
        border-bottom:1px solid var(--border);
    }

    .service{
        grid-template-columns:45px 1fr 35px;
    }

    .service-info{
        grid-column:2 / 4;
        margin-top:20px;
    }

    .project{
        min-height:570px;
        padding:35px;
    }

    .project-bottom{
        grid-template-columns:1fr;
    }

    .project-result{
        text-align:left;
    }

    .process-grid{
        grid-template-columns:1fr;
    }

    .process-card{
        min-height:auto;
        padding:30px 0;
        border-right:0;
        border-bottom:1px solid rgba(0,0,0,.2);
    }

    .process-card h3{
        margin-top:25px;
    }

    .experience-item{
        grid-template-columns:1fr;
        gap:10px;
    }

    .experience-item > span{
        display:none;
    }

    .tool-grid{
        grid-template-columns:1fr 1fr;
    }

    .contact-bottom{
        grid-template-columns:1fr;
    }
}


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

@media(max-width:600px){

    .container{
        width:88%;
    }

    .navbar .container{
        width:90%;
    }

    .nav-inner{
        min-height:72px;
    }

    .logo img{
        width:48px;
        height:48px;
    }

    .section{
        padding:80px 0;
    }

    .section-title{
        font-size:12vw;
        letter-spacing:-2.5px;
    }

    .hero{
        min-height:930px;
    }

    .hero-container{
        padding-top:125px;
    }

    .hero-status{
        max-width:100%;
        font-size:7px;
        letter-spacing:1px;
    }

    .hero-title{
        width:100%;
        font-size:18vw;
        line-height:.82;
        letter-spacing:-4px;
    }

    .hero-person{
        width:440px;
        max-width:none;
        height:465px;
        right:-100px;
        bottom:-65px;
        opacity:.8;
    }

    .person-glow{
        width:360px;
        height:360px;
    }

    .ring-one{
        width:280px;
        height:280px;
        right:70px;
        top:90px;
    }

    .ring-two{
        width:210px;
        height:210px;
        right:105px;
        top:125px;
    }

    .hero-content{
        width:100%;
        margin-top:30px;
    }

    .hero-content p{
        max-width:90%;
        font-size:16px;
    }

    .hero-buttons{
        width:70%;
        flex-direction:column;
    }

    .button{
        width:100%;
    }

    .scroll-indicator{
        display:none;
    }

    .section-grid{
        gap:25px;
    }

    .about-title{
        font-size:11vw;
        letter-spacing:-2px;
    }

    .stats{
        margin-top:55px;
    }

    .stat{
        padding:25px 12px;
    }

    .stat-number{
        font-size:10vw;
        letter-spacing:-2px;
    }

    .service{
        grid-template-columns:35px 1fr;
        min-height:auto;
        padding:28px 0;
    }

    .service-info{
        grid-column:2;
    }

    .service-arrow{
        display:none;
    }

    .service h3{
        font-size:25px;
    }

    .project{
        min-height:520px;
        padding:25px;
    }

    .project > h3{
        font-size:11vw;
        letter-spacing:-2.5px;
    }

    .project-result strong{
        font-size:27px;
    }

    .process-title{
        font-size:13vw;
        letter-spacing:-3px;
    }

    .tool-grid{
        grid-template-columns:1fr;
    }

    .tool-card{
        min-height:230px;
    }

    .trainer-box{
        padding:45px 25px;
    }

    .trainer-box h2{
        font-size:11vw;
        letter-spacing:-2.5px;
    }

    .trainer-box::after{
        font-size:220px;
    }

    .contact{
        min-height:auto;
    }

    .contact-title{
        font-size:19vw;
        letter-spacing:-5px;
    }

    .contact-bottom{
        margin-top:45px;
    }

    .contact-bottom > div:first-child > p{
        font-size:16px;
    }

    .contact-buttons{
        flex-direction:column;
    }

    footer{
        flex-direction:column;
        gap:10px;
        margin-top:65px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media(max-width:380px){

    .hero-title{
        font-size:17vw;
    }

    .hero-person{
        right:-125px;
    }

    .hero-buttons{
        width:80%;
    }

    .stats{
        grid-template-columns:1fr;
    }

    .stat{
        border-right:0;
        border-bottom:1px solid var(--border);
    }

    .stat:last-child{
        border-bottom:0;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important;
    }
}
/* =========================================================
   RAIHAN KAMIL PORTFOLIO
   V2 INTERACTIVE ENHANCEMENT
   ========================================================= */


/* =========================================================
   01. PREMIUM CURSOR
   ========================================================= */

.custom-cursor{
    position:fixed;
    top:0;
    left:0;
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--green);
    pointer-events:none;
    z-index:100000;
    transform:translate(-50%,-50%);
    box-shadow:
        0 0 10px rgba(186,255,53,.8),
        0 0 25px rgba(186,255,53,.35);
    transition:
        width .25s ease,
        height .25s ease,
        background .25s ease;
}

.cursor-ring{
    position:fixed;
    top:0;
    left:0;
    width:38px;
    height:38px;
    border:1px solid rgba(186,255,53,.55);
    border-radius:50%;
    pointer-events:none;
    z-index:99999;
    transform:translate(-50%,-50%);
    transition:
        width .3s ease,
        height .3s ease,
        border-color .3s ease,
        background .3s ease;
}

body.cursor-hover .custom-cursor{
    width:7px;
    height:7px;
    background:#050608;
}

body.cursor-hover .cursor-ring{
    width:62px;
    height:62px;
    background:rgba(186,255,53,.92);
    border-color:var(--green);
    mix-blend-mode:difference;
}


/* =========================================================
   02. NAV ACTIVE STATE
   ========================================================= */

.nav-menu > a{
    position:relative;
}

.nav-menu > a:not(.nav-contact)::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-9px;
    width:0;
    height:1px;
    background:var(--green);
    transition:width .35s cubic-bezier(.2,.8,.2,1);
}

.nav-menu > a:not(.nav-contact):hover::after,
.nav-menu > a.active:not(.nav-contact)::after{
    width:100%;
}

.nav-menu > a.active:not(.nav-contact){
    color:var(--green);
}


/* =========================================================
   03. HERO CINEMATIC DEPTH
   ========================================================= */

.hero-grid{
    will-change:transform;
}

.hero-title{
    will-change:transform;
}

.hero-title .outline{
    transition:
        color .6s ease,
        -webkit-text-stroke .6s ease,
        text-shadow .6s ease;
}

.hero:hover .hero-title .outline{
    color:rgba(186,255,53,.025);
    -webkit-text-stroke:1px rgba(186,255,53,.65);
    text-shadow:0 0 50px rgba(186,255,53,.06);
}

.hero-person{
    perspective:1200px;
}

.person-image{
    will-change:transform;
}

.person-ring{
    box-shadow:
        inset 0 0 40px rgba(186,255,53,.015),
        0 0 50px rgba(186,255,53,.025);
}

.floating-card{
    transition:
        border-color .4s ease,
        background .4s ease,
        box-shadow .4s ease;
}

.hero:hover .floating-card{
    border-color:rgba(186,255,53,.26);
    background:rgba(5,7,10,.84);
    box-shadow:0 15px 50px rgba(0,0,0,.28);
}


/* =========================================================
   04. SECTION AMBIENT LIGHT
   ========================================================= */

.section:not(.process)::before{
    content:"";
    position:absolute;
    width:600px;
    height:600px;
    border-radius:50%;
    pointer-events:none;
    opacity:0;
    background:
        radial-gradient(
            circle,
            rgba(186,255,53,.055),
            transparent 68%
        );
    filter:blur(20px);
    transition:opacity .8s ease;
}

.section:not(.process):hover::before{
    opacity:1;
}

.about::before{
    left:-350px;
    top:15%;
}

.expertise::before{
    right:-350px;
    top:20%;
}

.work::before{
    left:-350px;
    top:35%;
}

.experience::before{
    right:-350px;
    top:20%;
}

.toolkit::before{
    left:-350px;
    top:20%;
}

.contact::before{
    right:-250px;
    top:10%;
}


/* =========================================================
   05. SECTION LABEL ANIMATION
   ========================================================= */

.section-label::before{
    transform-origin:left center;
    transition:
        width .45s ease,
        box-shadow .45s ease;
}

.section:hover .section-label::before{
    width:45px;
    box-shadow:0 0 15px rgba(186,255,53,.65);
}


/* =========================================================
   06. EXPERTISE INTERACTION
   ========================================================= */

.service{
    cursor:default;
    transition:
        padding-left .45s cubic-bezier(.2,.8,.2,1),
        border-color .35s ease;
}

.service:hover{
    padding-left:18px;
    border-color:rgba(186,255,53,.25);
}

.service h3{
    transition:
        color .35s ease,
        transform .4s cubic-bezier(.2,.8,.2,1);
}

.service:hover h3{
    color:var(--green);
    transform:translateX(6px);
}

.service-number{
    transition:
        transform .4s ease,
        text-shadow .4s ease;
}

.service:hover .service-number{
    transform:translateX(4px);
    text-shadow:0 0 15px rgba(186,255,53,.65);
}

.tags span{
    transition:
        color .3s ease,
        border-color .3s ease,
        background .3s ease,
        transform .3s ease;
}

.service:hover .tags span{
    border-color:rgba(186,255,53,.18);
}

.tags span:hover{
    color:var(--green);
    border-color:rgba(186,255,53,.5)!important;
    background:rgba(186,255,53,.04);
    transform:translateY(-2px);
}


/* =========================================================
   07. PROJECT SPOTLIGHT
   ========================================================= */

.project{
    --mouse-x:50%;
    --mouse-y:50%;

    transition:
        border-color .45s ease,
        box-shadow .45s ease;
}

.project::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;

    background:
        radial-gradient(
            420px circle at var(--mouse-x) var(--mouse-y),
            rgba(186,255,53,.13),
            transparent 42%
        );

    opacity:0;
    transition:opacity .35s ease;
}

.project:hover::after{
    opacity:1;
}

.project:hover{
    border-color:rgba(186,255,53,.32);

    box-shadow:
        0 35px 100px rgba(0,0,0,.35),
        inset 0 0 70px rgba(186,255,53,.018);
}

.project > h3{
    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        color .4s ease;
}

.project:hover > h3{
    transform:translateX(12px);
}

.project-result strong{
    transition:
        transform .4s ease,
        text-shadow .4s ease;
}

.project:hover .project-result strong{
    transform:scale(1.05);
    text-shadow:0 0 25px rgba(186,255,53,.25);
}


/* =========================================================
   08. PROCESS INTERACTION
   ========================================================= */

.process-card{
    position:relative;
    overflow:hidden;

    transition:
        background .35s ease,
        padding-left .4s ease;
}

.process-card::before{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:0;
    background:rgba(5,6,8,.07);
    transition:height .4s cubic-bezier(.2,.8,.2,1);
}

.process-card:hover::before{
    height:100%;
}

.process-card > *{
    position:relative;
    z-index:2;
}

.process-card h3{
    transition:
        transform .4s ease,
        letter-spacing .4s ease;
}

.process-card:hover h3{
    transform:translateY(-6px);
    letter-spacing:1px;
}


/* =========================================================
   09. EXPERIENCE TIMELINE
   ========================================================= */

.timeline{
    position:relative;
}

.experience-item{
    position:relative;
    transition:
        padding-left .4s cubic-bezier(.2,.8,.2,1),
        background .4s ease;
}

.experience-item::before{
    content:"";
    position:absolute;
    left:0;
    top:-1px;
    width:0;
    height:1px;
    background:var(--green);
    box-shadow:0 0 15px rgba(186,255,53,.55);
    transition:width .55s cubic-bezier(.2,.8,.2,1);
}

.experience-item:hover::before{
    width:100%;
}

.experience-item:hover{
    padding-left:16px;
    background:
        linear-gradient(
            90deg,
            rgba(186,255,53,.035),
            transparent 45%
        );
}

.experience-item h3{
    transition:
        color .35s ease,
        transform .35s ease;
}

.experience-item:hover h3{
    color:var(--green);
    transform:translateX(4px);
}


/* =========================================================
   10. TOOLKIT SPOTLIGHT
   ========================================================= */

.tool-card{
    position:relative;
    overflow:hidden;
    --tool-x:50%;
    --tool-y:50%;
}

.tool-card::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;

    background:
        radial-gradient(
            240px circle at var(--tool-x) var(--tool-y),
            rgba(186,255,53,.12),
            transparent 50%
        );

    opacity:0;
    transition:opacity .35s ease;
}

.tool-card:hover::before{
    opacity:1;
}

.tool-card > *{
    position:relative;
    z-index:2;
}

.tool-card:hover{
    transform:translateY(-10px);
    border-color:rgba(186,255,53,.45);

    box-shadow:
        0 25px 70px rgba(0,0,0,.28);
}

.tool-card h3{
    transition:
        transform .35s ease,
        text-shadow .35s ease;
}

.tool-card:hover h3{
    transform:translateX(5px);
    text-shadow:0 0 15px rgba(186,255,53,.25);
}


/* =========================================================
   11. TRAINER BOX
   ========================================================= */

.trainer-box{
    transition:
        border-color .5s ease,
        transform .5s cubic-bezier(.2,.8,.2,1),
        box-shadow .5s ease;
}

.trainer-box:hover{
    transform:translateY(-6px);
    border-color:rgba(186,255,53,.28);

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

.trainer-box::after{
    transition:
        transform 1s cubic-bezier(.2,.8,.2,1),
        color .6s ease;
}

.trainer-box:hover::after{
    transform:
        translateX(-25px)
        translateY(-10px)
        rotate(-3deg);

    color:rgba(186,255,53,.035);
}

.trainer-tags span{
    transition:
        color .3s ease,
        border-color .3s ease,
        transform .3s ease;
}

.trainer-tags span:hover{
    color:var(--green);
    border-color:rgba(186,255,53,.45);
    transform:translateY(-3px);
}


/* =========================================================
   12. BUTTON SWEEP
   ========================================================= */

.button,
.nav-contact{
    position:relative;
    overflow:hidden;
    isolation:isolate;
}

.button::before,
.nav-contact::before{
    content:"";
    position:absolute;
    z-index:-1;
    top:0;
    left:-130%;
    width:120%;
    height:100%;

    background:
        linear-gradient(
            110deg,
            transparent 20%,
            rgba(255,255,255,.35) 50%,
            transparent 80%
        );

    transform:skewX(-20deg);
    transition:left .65s ease;
}

.button:hover::before,
.nav-contact:hover::before{
    left:130%;
}


/* =========================================================
   13. CONTACT FINALE
   ========================================================= */

.contact{
    overflow:hidden;
}

.contact-title{
    position:relative;
    transition:
        letter-spacing .7s cubic-bezier(.2,.8,.2,1);
}

.contact:hover .contact-title{
    letter-spacing:-7px;
}

.contact-title span{
    display:inline-block;

    animation:
        contactQuestion 2.5s ease-in-out infinite;
}

@keyframes contactQuestion{

    0%,
    100%{
        transform:translateY(0);
        text-shadow:
            0 0 0 rgba(186,255,53,0);
    }

    50%{
        transform:translateY(-8px);
        text-shadow:
            0 0 35px rgba(186,255,53,.35);
    }
}


/* =========================================================
   14. SOCIAL LINK ARROW
   ========================================================= */

.social-links a{
    position:relative;
}

.social-links a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-6px;
    width:0;
    height:1px;
    background:var(--green);
    transition:width .3s ease;
}

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


/* =========================================================
   15. V2 RESPONSIVE
   ========================================================= */

@media(max-width:1000px){

    .custom-cursor,
    .cursor-ring{
        display:none;
    }

    .section:not(.process)::before{
        display:none;
    }

    .service:hover,
    .experience-item:hover{
        padding-left:0;
    }

    .project:hover > h3{
        transform:none;
    }

    .contact:hover .contact-title{
        letter-spacing:-5px;
    }
}


@media(max-width:600px){

    .project::after,
    .tool-card::before{
        display:none;
    }

    .project:hover{
        box-shadow:none;
    }

    .trainer-box:hover,
    .tool-card:hover{
        transform:none;
    }

    .contact:hover .contact-title{
        letter-spacing:-5px;
    }
}


/* =========================================================
   16. ACCESSIBILITY / REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){

    .custom-cursor,
    .cursor-ring{
        display:none!important;
    }

    .contact-title span{
        animation:none!important;
    }
}