/* ====================================
   GOOGLE FONT & RESET
==================================== */

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

html{
    scroll-behavior:smooth;
}



a{
    text-decoration:none;
}

ul{
    list-style:none;
}

img{
    max-width:100%;
    display:block;
}

.container{
    width:90%;
    max-width:1300px;
    margin:auto;
}


/*==================================================
                RESET & GLOBAL
==================================================*/

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

html{
    scroll-behavior:smooth;
}

body{


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

    background:#ffffff;

    color:#111827;

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;
}

a{

    text-decoration:none;

    color:inherit;

}

ul{

    list-style:none;

}

img{

    display:block;

    max-width:100%;
}

button{

    border:none;

    outline:none;

    background:none;

    cursor:pointer;

    font-family:inherit;
}

/*==================================================
                COLORS
==================================================*/

:root{

    --white:#ffffff;

    --black:#0d1117;

    --text:#1f2937;

    --glass:rgba(255,255,255,.08);

    --glass-border:rgba(255,255,255,.14);

    --blue:#2563eb;

    --blue-hover:#1d4ed8;

    --shadow:0 18px 45px rgba(0,0,0,.12);

    --transition:.35s cubic-bezier(.22,.61,.36,1);

}

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

#navbar{

    position: fixed;

    top: 28px;

    left:50%;

    transform:translateX(-50%);

    width:100%;

    z-index:9999;
}

#navbar.hide{

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

    opacity:0;

}

.nav-wrapper{

    max-width: 950px;
    
    width: 100%;

    height: 55px;

    margin: auto;

    display: grid;

    grid-template-columns: 280px 1fr 220px;

    align-items: center;

    padding: 0 12px;

    background: #f4f4f4;

    border-radius: 22px;

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

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

    box-sizing: border-box;

}


.nav-logo{
    height:48px;      /* keep fixed */
    width:175px;      /* increase width */
    object-fit:contain;
}
/*==================================================
            NAVIGATION CONTAINER
==================================================*/

.navigation{

    flex:1;

    display:flex;

    justify-content:center;

}


.nav-links{

    display:flex;

    align-items:center;

    justify-content:center;

    list-style:none;

    gap:55px;

    height:100%;

    margin:0;

    padding:0;

}



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

.nav-links li{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

}


.nav-link{

    display:flex;

    align-items:center;

    justify-content:center;

    height:100%;

    font-size:17px;

    font-weight:300;

    color:#060505;

    text-decoration:none;

}


.nav-link:hover{

    color:#000000;

}

.nav-link:focus{

    outline:none;

}

/*==================================================
        LETTER ANIMATION PREPARATION
==================================================*/

.nav-link .word{

    position:relative;

    display:flex;

    overflow:hidden;

}

.nav-link .letter{

    display:inline-block;

    position:relative;

    transform:translateY(0);

    transition:

        transform .45s cubic-bezier(.22,.61,.36,1),

        opacity .45s cubic-bezier(.22,.61,.36,1);

    will-change:transform;

}

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

.nav-right{

    display:flex;

    justify-content:flex-end;

    align-items:center;

    gap:14px;

    padding-right:12px;   /* <-- This moves the button away from the right edge */
}



/*=========================================
LANGUAGE SWITCHER
=========================================*/

.language-switcher{

    display:flex;

    align-items:center;

    gap:10px;

    margin-right:20px;

    font-size:15px;

    font-weight:600;

}

.language-switcher a{

    color:#ffffff;

    text-decoration:none;

    transition:.3s;

}

.language-switcher a.active{

    color:#f47a20;

}

.language-switcher a:hover{

    color:#f47a20;

}

.language-switcher span{

    color:rgba(255,255,255,.35);

}








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

.quote-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    width:155px;

    height:40px;

    background:#f47a20;

    color:#0d0d0d;

    text-decoration:none;

    border-radius:9px;

    font-size:16px;

    font-weight:600;

    transition:.35s;
}

.quote-btn:hover{

    background:#ff8b2a;

    color:#000000;

    transform:translateY(-2px);
}

.quote-btn:active{

    transform:translateY(0);

}

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

.menu-btn{

    width:48px;

    height:48px;

    display:none;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    color:#000000;

    font-size:24px;

    transition:.35s;

}

.menu-btn:hover{

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

}

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

#navbar.scrolled .nav-wrapper{

    background:#f1f1f1;

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

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

}

#navbar.scrolled .logo{

    color:#ffffff;

}

#navbar.scrolled .nav-link{

    color:#020202;

}

#navbar.scrolled .menu-btn{

    color:#030303;

}

#navbar.scrolled .quote-btn{

    background:#ff7a00;

    color:#070707;

}

/*=========================================
        LETTER ANIMATION
=========================================*/

.nav-link{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    height:24px;

}

.word{

    display:flex;

    overflow:hidden;

}

.letter{

    position:relative;

    display:inline-block;

    transform:translateY(0);

    transition:
        transform .55s cubic-bezier(.76,0,.24,1);

    will-change:transform;
}

.letter::after{

    content:attr(data-letter);

    position:absolute;

    left:0;

    top:100%;

    color:inherit;
}

.nav-link:hover .letter{

    transform:translateY(-100%);
}

.nav-link:hover .letter:nth-child(1){transition-delay:0s;}
.nav-link:hover .letter:nth-child(2){transition-delay:.02s;}
.nav-link:hover .letter:nth-child(3){transition-delay:.04s;}
.nav-link:hover .letter:nth-child(4){transition-delay:.06s;}
.nav-link:hover .letter:nth-child(5){transition-delay:.08s;}
.nav-link:hover .letter:nth-child(6){transition-delay:.10s;}
.nav-link:hover .letter:nth-child(7){transition-delay:.12s;}
.nav-link:hover .letter:nth-child(8){transition-delay:.14s;}
.nav-link:hover .letter:nth-child(9){transition-delay:.16s;}
.nav-link:hover .letter:nth-child(10){transition-delay:.18s;}

.nav-link:not(:hover) .letter{

    transform:translateY(0);
}







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

@media (max-width:992px){

    .navigation{

        display:none;

    }

    .quote-btn{

        display:none;

    }

    .language-switcher{

        display:none;

    }

    .menu-btn{

        display:flex;

    }

    .nav-wrapper{

        padding:0 20px;

    }

}



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

.about-home{

    padding:110px 0;

}

.about-home h2{

    text-align:center;

    font-size:42px;

    margin-bottom:25px;

}

.about-home p{

    max-width:850px;

    margin:auto;

    text-align:center;

    line-height:2;

    color:#666;

}

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



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

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

.sz-page-space{
    height:20vh;
}

.sz-footer{
    background:#050505;
    position:relative;
    overflow:hidden;
    font-family:'Poppins',sans-serif;
}

.sz-hero-footer{
    width:100%;
    position:relative;
    padding-top:4rem;
}

.sz-pixi-wrapper{
    position:relative;
    width:100%;
    height:42vw;
    min-height:320px;
    max-height:650px;
}

#pixi-canvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

.sz-footer-content{
    max-width:1600px;
    margin:auto;
    padding:4rem 7vw 1rem;
    display:grid;
    grid-template-columns:1.6fr 0.8fr 0.8fr;
    gap:120px;
}

.sz-eyebrow{
    display:block;
    color:#7d7d7d;
    letter-spacing:6px;
    font-size:13px;
    margin-bottom:28px;
}

.sz-footer-left h2{
    font-size:clamp(22px,2vw,42px);
    font-weight:300;
    line-height:1.12;
    color:#cfcfcf;
    max-width:760px;
}

.sz-contact-btn{
    margin-top:35px;
    width:170px;
    height:52px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 18px;
    text-decoration:none;
    color:white;
    font-size:15px;
    font-weight:500;
    transition:.35s;
    font-family:'Poppins',sans-serif;
}

.sz-contact-btn:hover{
    transform:translateY(-3px);
}

.sz-contact-btn svg{
    width:22px;
    height:22px;
}

.sz-footer-links h3{
    color:#9d9d9d;
    font-size:20px;
    margin-bottom:28px;
    margin-left:24px;
    font-weight:600;
}

.sz-footer-contact h3{
    color:#9d9d9d;
    font-size:20px;
    margin-bottom:28px;
    /* margin-left:18px; */
    font-weight:600;
}

.sz-footer-links ul{
    list-style:none;
}

.sz-footer-links li{
    margin-bottom:22px;
}

.sz-footer-links a{
    text-decoration:none;
    color:#9d9d9d;
    font-size:18px;
    font-family:'Poppins',sans-serif;
}

.sz-contact-list p{
    color:#9d9d9d;
    margin-bottom:28px;
    font-size:18px;
    font-family:'Poppins',sans-serif;
}

.sz-socials{
    display:flex;
    gap:18px;
    margin-top:24px;
}

.sz-socials a{
    width:58px;
    height:58px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.12);
    display:flex;
    justify-content:center;
    align-items:center;
    color:white;
    text-decoration:none;
}

.sz-socials svg{
    width:24px;
    height:24px;
}

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

.sz-footer-bottom{

    margin-top:40px;

    padding-top:25px;

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

}

.sz-copyright{

    color:#9d9d9d;

    font-size:14px;

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

    line-height:1.6;

}

.sz-designed{

    margin-top:12px;

    font-size:14px;

    text-align:right;

    color:#9d9d9d;

    font-size:16px;

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

}

.sz-designed a{

    color:#9d9d9d;

    text-decoration:none;

    font-size:14px;

    font-weight:500;

    transition:.3s;

}

.sz-designed a:hover{

    color:#ff7a00;

}

@media(max-width:1100px){

    .sz-footer-content{
        grid-template-columns:1fr;
        gap:60px;
    }

    .sz-footer-left h2{
        max-width:100%;
    }
}

@media(max-width:768px){

    .sz-pixi-wrapper{
        height:230px;
    }

    .sz-video-text h1{
        font-size:18vw;
    }

    .sz-footer-content{
        padding:3rem 24px 1rem;
    }

    .sz-footer-bottom{
        padding:2rem 24px 4rem;
    }

    .sz-contact-btn{
        width:100%;
        max-width:280px;
    }

    .sz-footer-left h2{
        font-size:42px;
    }


    .sz-copyright{

        text-align:left;

        font-size:14px;

    }

    .sz-designed{

        text-align:right;

        font-size:14px;

        margin-top:8px;

    }


}

.sz-hero-footer{
    height:500px;
}

.sz-pixi-wrapper{
    width:100%;
    height:100%;
}

#pixi-canvas{
    width:100%;
    height:100%;
    display:block;
}
/* Footer End */

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

@media(max-width:992px){

.nav-links{

    position:fixed;

    top:95px;

    right:-100%;

    width:300px;

    height:calc(100vh - 95px);

    background:#fff;

    flex-direction:column;

    padding:40px;

    transition:.4s;

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

}

.nav-links.active{

    right:0;

}

.nav-links a{

    color:#222;

}

.menu-toggle{

    display:block;

}

.nav-btn{

    display:none;

}

.footer-grid{

    grid-template-columns:1fr;

}

.hero h1{

    font-size:48px;

}

}

@media(max-width:768px){

.hero{

    padding:0 20px;

}

.hero h1{

    font-size:38px;

}

.hero p{

    font-size:17px;

}

.about-home h2{

    font-size:34px;

}

.nav-container{

    padding:15px 20px;

}

.logo{

    font-size:20px;

}

}

@media(max-width:480px){

.hero h1{

    font-size:30px;

}

.hero-btn{

    padding:15px 30px;

}

}


/* ===========================
   ACTIVE NAV LINK
=========================== */

.nav-links a.active{
    color:#ff7b00;
}

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

/* ===========================
   SCROLL ANIMATION
=========================== */

.fade-up{
    opacity:0;
    transform:translateY(50px);
    transition:all .8s ease;
}

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




/* ===========================
   AI VIDEO CARD
=========================== */



.about-home{

    padding:120px 0;
}

.about-wrapper{

    display:grid;

    grid-template-columns:1.5fr 1fr;

    gap:70px;

    align-items:start;
}

.section-tag{

    display:inline-block;

    color:#ff7a00;

    font-size:14px;

    font-weight:600;

    letter-spacing:2px;

    margin-bottom:18px;
}

.about-content h2{

    font-size:28px;

    margin-bottom:30px;
}

.about-content p{

    margin-bottom:22px;

    line-height:2;

    color:#666;

    text-align:left;
}

.about-video-card{

    position:sticky;

    top:120px;

    background:#111;

    border-radius:12px;

    overflow:hidden;

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

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

    transition:.35s;
}

.about-video-card:hover{

    transform:translateY(-6px);
}

.about-video-card video{

    width:100%;

    display:block;

    aspect-ratio:16/9;

    object-fit:cover;
}

.video-content{

       padding:16px 22px 20px;
}

.video-content h3{

    margin-bottom:8px;

    color:#fff;

    font-size:24px;

}

.video-content p{

    color:#bbb;

    line-height:1.7;

    margin-bottom:0;

    font-size:15px;

}

.video-content ul{

    display:flex;

    flex-direction:column;

    gap:12px;
}

.video-content li{

    color:#fff;
}

@media(max-width:992px){

    .about-wrapper{

        grid-template-columns:1fr;
    }

    .about-video-card{

        position:static;
    }

}






/*=========================================================
 AK COMMITMENT SECTION
 Sticky Layout
=========================================================*/

.ak-commitment-section{

    position:relative;
    z-index: 1;
    padding:60px 24px;
    background:#fff;
    overflow:visible;

}

.ak-commitment-wrapper{

    display:grid;

    grid-template-columns:560px minmax(0,1fr);

    gap:60px;

    align-items:start;

}

.ak-commitment-right{

    min-height:auto;

}

/*==============================
LEFT COLUMN
==============================*/

.ak-commitment-left{

    position:relative;

}

.ak-video-sticky{

    position:relative;


}

.ak-commitment-video-box{

    position:relative;

    border-radius:34px;

    overflow:hidden;

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

}

.ak-commitment-video-box video{

    width:100%;

    display:block;

    aspect-ratio:1.2;

    object-fit:cover;

}

.ak-video-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        to top,
        rgba(0,0,0,.18),
        rgba(0,0,0,0)
    );

}

/*==============================
Floating Card
==============================*/

.ak-floating-card{

    position:absolute;

    left:50%;

    bottom:25px;

    transform:translateX(-40%);

    width:420px;

    padding:14px 18px;

    border-radius:22px;

    background:#fff;

    display:flex;

    gap:18px;

    align-items:center;

    box-shadow:
        0 18px 50px rgba(0,0,0,.14);

}

.ak-floating-icon{

    width:32px;

    height:32px;

    border-radius:50%;

    background:#fff6ed;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#ff7a00;

}

.ak-floating-icon svg{

    width:32px;

    height:32px;

}

.ak-floating-content h4{

    margin:0 0 8px;

    font-size:26px;

    font-weight:700;

    color:#111827;

}

.ak-floating-content p{

    margin:0;

    font-size:15px;

    line-height:1.8;

    color:#666;

}

/*==============================
RIGHT COLUMN
==============================*/

.ak-commitment-right{

    position:relative;

}

.ak-commitment-inner{

    width:100%;

}

/*==============================
Badge
==============================*/

.ak-section-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 20px;

    border-radius:999px;

    background:#fff6ef;

    color:#ff7a00;

    font-size:14px;

    font-weight:600;

    letter-spacing:1px;

    margin-bottom:24px;

}

.ak-section-badge span{

    width:7px;

    height:7px;

    border-radius:50%;

    background:#ff7a00;

}

/*==============================
Heading
Matches your About section
==============================*/

.ak-commitment-title{

    margin:0 0 30px;

    font-size:52px;

    line-height:1.12;

    font-weight:700;

    color:#111827;

}

/*==============================
Paragraph
Matches your About section
==============================*/

.ak-commitment-description{

    font-size:16px;

    line-height:2;

    color:#666;

    margin-bottom:28px;

    max-width:700px;

}

.ak-title-line{

    width:70px;

    height:4px;

    border-radius:30px;

    background:#ff7a00;

    margin-bottom:42px;

}


/*=========================================================
 AK COMMITMENT SECTION
 PART 2B
=========================================================*/

/*=========================
Stats Grid
=========================*/

.ak-stats-grid{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
    margin-top:20px;

}

.ak-stat-card{

    position:relative;

    background:#fff;

    border:1px solid #efefef;

    border-radius:24px;

    padding:34px;

    overflow:hidden;

    transition:.35s ease;

    box-shadow:
        0 8px 24px rgba(0,0,0,.05);

}

.ak-stat-card:hover{

    transform:translateY(-8px);

    box-shadow:
        0 22px 45px rgba(0,0,0,.12);

}

.ak-stat-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:26px;

}

.ak-stat-icon{

    width:66px;

    height:66px;

    border-radius:50%;

    background:#fff6ed;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#ff7a00;

    font-size:28px;

}

.ak-stat-arrow{

    font-size:26px;

    color:#ff7a00;

    transition:.35s;

}

.ak-stat-card:hover .ak-stat-arrow{

    transform:translateY(-5px);

}

.ak-stat-card h3{

    margin:0;

    font-size:54px;

    font-weight:700;

    color:#111827;

    line-height:1;

}

.ak-stat-card p{

    margin:16px 0;

    color:#666;

    font-size:18px;

    line-height:1.6;

}

.ak-card-line{

    width:78px;

    height:4px;

    border-radius:50px;

    background:#ff7a00;

    transition:.35s;

}

.ak-stat-card:hover .ak-card-line{

    width:120px;

}

/*=========================
Bottom CTA
=========================*/

.ak-commitment-cta{

    margin-top:34px;

    padding:28px 34px;

    background:#fff;

    border:1px solid #ececec;

    border-radius:24px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

    box-shadow:
        0 10px 28px rgba(0,0,0,.06);

}

.ak-cta-left{

    display:flex;

    align-items:center;

    gap:22px;

}

.ak-cta-icon{

    width:68px;

    height:68px;

    border-radius:50%;

    background:#ff7a00;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:30px;

    flex-shrink:0;

}

.ak-cta-left h4{

    margin:0 0 8px;

    font-size:26px;

    font-weight:700;

    color:#111827;

}

.ak-cta-left p{

    margin:0;

    font-size:16px;

    line-height:1.8;

    color:#666;

}

.ak-cta-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    text-decoration:none;

    color:#ff7a00;

    font-size:18px;

    font-weight:600;

    transition:.3s;

}

.ak-cta-btn:hover{

    gap:18px;

}

.ak-cta-btn span{

    transition:.3s;

}

/*=========================
Decorations
=========================*/

.ak-commitment-bg-circle{

    position:absolute;

    width:620px;

    height:620px;

    left:-340px;

    bottom:-240px;

    border-radius:50%;

    background:

    radial-gradient(circle,
    rgba(255,166,58,.18) 0%,
    rgba(255,166,58,.08) 45%,
    transparent 72%);

    pointer-events:none;

}

.ak-commitment-dot-pattern{

    position:absolute;

    top:40px;

    left:50%;

    transform:translateX(-50%);

    width:170px;

    height:80px;

    background-image:
        radial-gradient(#d6d6d6 2px,transparent 2px);

    background-size:24px 24px;

    opacity:.6;

}

/*=========================
Hover Effects
=========================*/

.ak-floating-card{

    transition:.35s;

}

.ak-floating-card:hover{

    transform:
        translateX(-40%)
        translateY(-8px);

}



@keyframes akPulse{

    0%{

        box-shadow:
        0 0 0 0 rgba(255,122,0,.35);

    }

    70%{

        box-shadow:
        0 0 0 18px rgba(255,122,0,0);

    }

    100%{

        box-shadow:
        0 0 0 0 rgba(255,122,0,0);

    }

}

/*=========================
Responsive
=========================*/

@media(max-width:1200px){

    .ak-commitment-wrapper{

        grid-template-columns:480px 1fr;

        gap:60px;

    }

}

@media(max-width:991px){

    .ak-commitment-wrapper{

        grid-template-columns:1fr;

        gap:30px;

    }

    .ak-commitment-right{

        min-height:auto;

    }

    .ak-video-sticky{

        position:relative;

        top:auto;

    }

    .ak-floating-card{

        position:relative;

        left:auto;

        bottom:auto;

        transform:none;

        width:100%;

        margin-top:16px;

        margin-bottom:0;

    }

    .ak-floating-card:hover{

        transform:translateY(-6px);

    }

    .ak-stats-grid{

        grid-template-columns:1fr;

    }

    .ak-commitment-cta{

        flex-direction:column;

        align-items:flex-start;

    }

}

@media(max-width:768px){

    .ak-commitment-section{

        padding:90px 24px;

    }

    .ak-commitment-title{

        font-size:38px;

    }

    .ak-stat-card h3{

        font-size:42px;

    }

    .ak-cta-left{

        flex-direction:column;

        align-items:flex-start;

    }

}

@media(max-width:576px){

    .ak-commitment-title{

        font-size:32px;

    }

    .ak-commitment-description{

        font-size:15px;

    }

    .ak-stat-card{

        padding:28px;

    }

}







/*=========================================================
AS HERO SECTION (CANVAS VERSION)
=========================================================*/

.as-hero-section{

    position:relative;

    width:100%;

    height:100vh;

    overflow:hidden;

    background:#000;

    isolation:isolate;

    will-change: transform;

}




/*=========================================================
CANVAS
=========================================================*/

.as-hero-canvas-wrapper{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    overflow:hidden;

    z-index:1;

}

.as-hero-canvas{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    transform:scale(1);

    transform-origin:center center;

    will-change:transform;

}


/*=========================================================
OVERLAYS
=========================================================*/

 .as-hero-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.38);

    z-index:2;

    pointer-events:none;

}

.as-hero-gradient{
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;

    background: linear-gradient(
        to right,
        rgba(0,0,0,0.88) 0%,
        rgba(0,0,0,0.88) 7%,
        rgba(0,0,0,0.65) 20%,
        rgba(0,0,0,0.35) 25%,
        rgba(0,0,0,0.12) 50%,
        rgba(0,0,0,0) 60%
    );


} 


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

.as-hero-section .container{

    position:relative;

    height:100%;

    z-index:10;

}


.as-hero-container{
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1440px;
    height: 100%;
    margin: 0 auto;
    padding: 0 8vw;
    display: flex;
    align-items: center;
}

@media (max-width: 768px){

    .as-hero-container{
        padding: 0 24px;
    }

}

@media (max-width: 576px){

    .as-hero-container{
        padding: 0 20px;
    }

}


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

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

.as-hero-content{

    position:relative;

    z-index:15;

    height:100vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:flex-start;

    width:100%;

    max-width:700px;

    padding-left:-50px;

}


/*=========================================================
TAG
=========================================================*/

.as-hero-tag{

    display:inline-flex;

    align-items:center;

    gap:14px;

    margin-bottom:12px;

    color:#ffffff;

    font-size:14px;

    font-weight:500;

    letter-spacing:2px;

    text-transform:uppercase;

}

.as-hero-tag span{

    width:46px;

    height:2px;

    background:#f47a20;



}


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

.as-hero-title{

    margin:0;

    color:#f5f5f5;

    font-size:40px;

    font-weight:700;

    line-height:.95;

    letter-spacing:-3px;

    max-width:760px;


}


/*=========================================================
DESCRIPTION
=========================================================*/

.as-hero-description{

    margin-top:16px;

    max-width:620px;

    color:rgba(255,255,255,.82);

    font-size:12px;

    line-height:1.9;



}


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

.as-hero-buttons{

    display:flex;

    gap:18px;

    margin-top:28px;



}

.as-btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:1px 12px;

    border-radius:999px;

    background:#f47a20;

    color:#fff;

    text-decoration:none;

    font-size:10px;

    font-weight:600;

    transition:.35s;

    

}

.as-btn-primary:hover{

    background:#fff;

    color:#111;

}

.as-btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 12px;

    border-radius:999px;

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

    color:#fff;


    text-decoration:none;

    backdrop-filter:blur(16px);

    transition:.35s;

}

.as-btn-secondary:hover{

    background:#fff;

    color:#111;

}



/*=========================================================
RIGHT PROGRESS
=========================================================*/

.as-scroll-progress{

    position:absolute;

    right:60px;

    top:50%;

    transform:translateY(-50%);

    z-index:30;

    display:flex;

    align-items:center;

    justify-content:center;

}

.as-progress-track{

    position:relative;

    width:2px;

    height:230px;

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

    overflow:hidden;

}

.as-progress-fill{

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:0;

    background:#f47a20;

}


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

.as-scroll-indicator{

    position:absolute;

    left:50%;

    bottom:42px;

    transform:translateX(-50%);

    z-index:30;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:14px;

    pointer-events:none;

}

.as-scroll-indicator span{

    color:#fff;

    font-size:12px;

    font-weight:500;

    letter-spacing:3px;

    text-transform:uppercase;

}

.as-scroll-line{

    position:relative;

    width:1px;

    height:72px;

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

    overflow:hidden;

}

.as-scroll-line::before{

    content:"";

    position:absolute;

    left:0;

    width:100%;

    height:24px;

    background:#fff;

    animation:asHeroScrollLine 1.8s linear infinite;

}

@keyframes asHeroScrollLine{

    from{

        transform:translateY(-30px);

    }

    to{

        transform:translateY(90px);

    }

}


/*=========================================================
CANVAS LOADING
=========================================================*/

.as-hero-canvas.loading{

    opacity:0;

}

.as-hero-canvas.loaded{

    opacity:1;

    transition:opacity .8s ease;

}


/*=========================================================
PERFORMANCE
=========================================================*/

.as-hero-section *{

    backface-visibility:hidden;

    -webkit-font-smoothing:antialiased;

}

.as-hero-canvas{

    image-rendering:auto;

}


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


@media (max-width:1400px){

    .as-hero-title{
        font-size:72px;
    }

}

@media (max-width:1200px){

    .as-hero-title{
        font-size:64px;
    }

    .as-scroll-progress{
        right:35px;
    }

}

@media (max-width:992px){

    .as-hero-section .container{

        width:100%;
        max-width:100%;
        padding-left:32px;
        padding-right:32px;

    }

    .as-hero-content{

        justify-content:center;
        align-items:flex-start;
        width:100%;
        max-width:100%;
        padding:0;

    }

    .as-hero-title{

        font-size:32px;
        line-height:1.05;
        letter-spacing:-2px;
        max-width:650px;

    }

    .as-hero-description{

        font-size:12px;
        line-height:1.7;
        max-width:520px;

    }

    .as-scroll-progress{

        display:none;

    }

}

@media (max-width:768px){

    .as-hero-section{

        min-height:100vh;

    }

    .as-hero-section .container{

        width:100%;
        max-width:100%;
        padding-left:24px;
        padding-right:24px;

    }

    .as-hero-content{

        width:100%;
        max-width:100%;
        justify-content:center;
        align-items:flex-start;
        padding:0;

    }

    .as-hero-tag{

        margin-bottom:18px;
        font-size:12px;
        letter-spacing:1.5px;

    }

    .as-hero-title{

        font-size:26px;
        line-height:1.12;
        letter-spacing:-1px;
        max-width:100%;

    }

    .as-hero-description{

        margin-top:12px;
        font-size:15px;
        line-height:1.65;
        max-width:100%;

    }

    .as-hero-buttons{

        margin-top:28px;
        flex-direction:column;
        width:100%;
        height: 35px;
        gap:14px;

    }

    .as-btn-primary,
    .as-btn-secondary{

        width:100%;
        justify-content:center;
        padding:16px 24px;

    }

    .as-scroll-indicator{

        bottom:18px;

    }

}

@media (max-width:576px){

    .as-hero-section .container{

        padding-left:20px;
        padding-right:20px;

    }

    .as-hero-content{

        width:100%;

    }

    .as-hero-title{

        font-size:22px;
        line-height:1.15;

    }

    .as-hero-description{

        font-size:10px;
        line-height:1.6;

    }

    .as-hero-tag{

        font-size:11px;
        letter-spacing:1px;

    }

    .as-scroll-line{

        height:55px;

    }

}



/*=========================================================
IPHONE SE / VERY SMALL PHONES
=========================================================*/

@media (max-width:380px){

    .as-hero-section .container{

        padding-left:16px;
        padding-right:16px;

    }

    .as-hero-title{

        font-size:20px;
        line-height:1.15;
        letter-spacing:-0.5px;

    }

    .as-hero-description{

        font-size:10px;
        line-height:1.6;
        margin-top:14px;

    }

    .as-hero-buttons{

        margin-top:22px;
        gap:12px;
        height: 20px;

    }

    .as-btn-primary,
    .as-btn-secondary{

        padding:14px 18px;
        font-size:14px;

    }

    .as-scroll-indicator{

        bottom:14px;

    }

}
/*=========================================================
AS HERO SECTION END(CANVAS VERSION)
=========================================================*/










/*=========================================================
BANNER SLIDE START
=========================================================*/


/* ==========================
   CH LOGO SLIDER
========================== */

.ch-brand-slider{
    width:100%;
    overflow:hidden;
    background:#fff;
    padding:40px 0;
    position:relative;
}

/* Fade Edges */

.ch-brand-slider::before,
.ch-brand-slider::after{
    content:"";
    position:absolute;
    top:0;
    width:120px;
    height:100%;
    z-index:2;
}

.ch-brand-slider::before{
    left:0;
    background:linear-gradient(
        to right,
        #ffffff,
        transparent
    );
}

.ch-brand-slider::after{
    right:0;
    background:linear-gradient(
        to left,
        #ffffff,
        transparent
    );
}

/* Slider Track */

.ch-slider-track{

    display:flex;

    align-items:center;

    gap:80px;

    width:max-content;

    animation:chScroll 30s linear infinite;

    will-change:transform;

    transform:translate3d(0,0,0);

}
/* Logo */

/* Logo Container */

.ch-logo-item{

    width:180px;

    height:120px;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

    overflow:visible;

}


/* Logo */

.ch-logo-item img{

    max-width:150px;

    max-height:1200px;

    width:auto;

    height:auto;

    object-fit:contain;


    filter:grayscale(100%);

    opacity:.7;

    transform:translateZ(0);

    backface-visibility:hidden;

    will-change:transform;

    transition:
        transform .35s ease,
        filter .35s ease,
        opacity .35s ease;

    user-select:none;

    -webkit-user-drag:none;

    -webkit-tap-highlight-color:transparent;

}

.logo-medium{

    width:260px;

    height:260px;

}

.logo-heigh{

    width:350px;

    height:350px;

}


/* Hover */

.ch-logo-item:hover img{

    filter:none;

    opacity:1;

    transform:translateZ(0) scale(1.25);

}

/* Pause on Hover */

.ch-brand-slider:hover .ch-slider-track{
    animation-play-state:paused;
}

/* Infinite Scroll */

@keyframes chScroll{

    from{
        transform:translateX(0);
    }

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

}

/*=========================================================
BANNER SLIDE END
=========================================================*/






/* ===================================
   MN FEATURE SHOWCASE START
=================================== */

.mn-parts-showcase{
    padding:120px 5%;
    background:#ffffff;
    overflow:hidden;
}

.mn-parts-grid{
    max-width:1700px;
    margin:auto;

    display:grid;
    grid-template-columns:320px 1fr 320px;
    align-items:center;
    gap:40px;
}

/* ===================================
   FEATURE COLUMNS
=================================== */

.mn-parts-column{
    display:flex;
    flex-direction:column;
    gap:40px;
}

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

.mn-glass-card{
    position:relative;

    padding:35px 30px;

    border-radius:30px;

    background:rgba(255,255,255,0.18);

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

    border:1px solid rgba(255,255,255,0.45);

    box-shadow:
        0 10px 35px rgba(0,0,0,.08),
        inset 0 1px 2px rgba(255,255,255,.8),
        inset 0 -1px 2px rgba(255,255,255,.3);

    text-align:center;
    overflow:hidden;

    animation:mnCardFloat 5s ease-in-out infinite;
}

/* Glass reflection */

.mn-glass-card::before{
    content:"";

    position:absolute;
    top:0;
    left:15%;

    width:120px;
    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );

    transform:skewX(-25deg);
}

/* Floating delays */

.mn-parts-column:nth-child(1) .mn-glass-card:nth-child(1){
    animation-delay:0s;
}

.mn-parts-column:nth-child(1) .mn-glass-card:nth-child(2){
    animation-delay:1s;
}

.mn-parts-column:nth-child(3) .mn-glass-card:nth-child(1){
    animation-delay:2s;
}

.mn-parts-column:nth-child(3) .mn-glass-card:nth-child(2){
    animation-delay:3s;
}

/* ===================================
   ICON
=================================== */

.mn-feature-icon{
    margin-bottom:18px;
     color:#ff7a00;
}

.mn-feature-icon i{
    font-size:42px;
    color:#ff7a00;
}

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

.mn-glass-card h3{
    font-size:34px;
    line-height:1.15;
    font-weight:700;
    color:#111827;
    margin-bottom:15px;
}

/* ===================================
   DESCRIPTION
=================================== */

.mn-glass-card p{
    font-size:17px;
    line-height:1.7;
    color:#4b5563;
}

/* ===================================
   CENTER BUS
=================================== */

.mn-center-model{
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
}

/* Glow behind bus */

.mn-center-model::before{
    content:"";

    position:absolute;

    width:700px;
    height:700px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(71,85,255,.08) 0%,
        rgba(71,85,255,.03) 40%,
        transparent 70%
    );
}

.mn-bus-image{
    position:relative;
    z-index:2;

    width:100%;
    max-width:900px;

    filter:drop-shadow(
        0 20px 30px rgba(0,0,0,.12)
    );

    animation:mnBusFloat 5s ease-in-out infinite;
}

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

@keyframes mnBusFloat{
    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-12px);
    }
}

@keyframes mnCardFloat{
    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-12px);
    }
}

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

@media(max-width:1200px){

    .mn-parts-grid{
        grid-template-columns:1fr;
        gap:50px;
    }

    .mn-center-model{
        order:-1;
    }

    .mn-parts-column{
        gap:25px;
    }

    .mn-glass-card{
        max-width:500px;
        margin:auto;
    }

    .mn-glass-card h3{
        font-size:28px;
    }

    .mn-glass-card p{
        font-size:16px;
    }

    .mn-bus-image{
        max-width:600px;
    }
}



/* ===================================
   MN FEATURE SHOWCASE END
=================================== */






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

.mobile-menu{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100vh;

    background:#000;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:32px;

    opacity:0;

    visibility:hidden;

    transform:translateY(-30px);

    transition:.45s ease;

    z-index:999;
}

.mobile-menu.active{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.mobile-menu a{

    color:#fff;

    text-decoration:none;

    font-size:32px;

    font-weight:600;

    letter-spacing:1px;

    transition:.3s;

}

.mobile-menu a:hover{

    color:#f47a20;

}

.mobile-enquiry{

    margin-top:20px;

    padding:16px 30px;

    background:#f47a20;

    border-radius:999px;

    font-size:18px !important;

}

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

@media(max-width:992px){

    .navigation{

        display:none;

    }

    .quote-btn{

        display:none;

    }

    .menu-btn{

        display:flex;

        position:relative;

        z-index:1001;

    }

}

@media(min-width:993px){

    .mobile-menu{

        display:none;

    }

}



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

.as-floating-buttons{

    position:fixed;

    right:28px;

    bottom:28px;

    display:flex;

    flex-direction:column;

    gap:16px;

    z-index:9999;

}

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

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

.as-whatsapp-btn{

    width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    transition:.35s;

}

.as-whatsapp-btn img{

    width:58px;

    height:58px;

    display:block;

    transition:.35s;

}

.as-whatsapp-btn:hover{

    transform:translateY(-6px);

}

.as-whatsapp-btn:hover img{

    transform:scale(1.08);

}

/*=========================================
SCROLL TOP BUTTON
=========================================*/

.as-scroll-top{

    width:58px;

    height:58px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#ffffff;

    border:2px solid #f47a20;

    color:#f47a20;

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

    transition:.35s;

}

.as-scroll-top i{

    font-size:22px;

    color:#f47a20;

}

.as-scroll-top:hover{

    background:#f47a20;

    transform:translateY(-6px);

}

.as-scroll-top:hover i{

    color:#ffffff;

}

.as-scroll-top{

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

}

.as-scroll-top.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

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

@media(max-width:768px){

    .as-floating-buttons{

        right:18px;

        bottom:18px;

        gap:12px;

    }

    .as-whatsapp-btn,
    .as-scroll-top{

        width:54px;

        height:54px;

    }

    .as-whatsapp-btn i{

        font-size:27px;

    }

    .as-scroll-top i{

        font-size:20px;

    }

}

@media(max-width:480px){

    .as-floating-buttons{

        right:14px;

        bottom:14px;

    }

    .as-whatsapp-btn,
    .as-scroll-top{

        width:50px;

        height:50px;

    }

}












.toast-container-custom{

    position:fixed;

    right:30px;

    bottom:30px;

    z-index:99999;

}

.toast-custom{

    width:360px;

    background:#fff;

    border-radius:14px;

    padding:18px 20px;

    display:flex;

    align-items:flex-start;

    gap:14px;

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

    animation:toastIn .4s ease;

    margin-top:12px;

}

.toast-icon{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    flex-shrink:0;

}

.toast-content{

    flex:1;

}

.toast-content h4{

    margin:0;

    font-size:16px;

    font-weight:700;

}

.toast-content p{

    margin:5px 0 0;

    color:#666;

    font-size:14px;

}

.toast-close{

    border:none;

    background:none;

    cursor:pointer;

    color:#888;

}

/* SUCCESS */

.toast-custom.success{

    border-left:5px solid #22c55e;

}

.toast-custom.success .toast-icon{

    background:#22c55e;

}

/* ERROR */

.toast-custom.error{

    border-left:5px solid #ef4444;

}

.toast-custom.error .toast-icon{

    background:#ef4444;

}

/* WARNING */

.toast-custom.warning{

    border-left:5px solid #f59e0b;

}

.toast-custom.warning .toast-icon{

    background:#f59e0b;

}

/* INFO */

.toast-custom.info{

    border-left:5px solid #3b82f6;

}

.toast-custom.info .toast-icon{

    background:#3b82f6;

}

.toast-hide{

    animation:toastOut .4s forwards;

}

@keyframes toastIn{

    from{

        opacity:0;

        transform:translateX(120%);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes toastOut{

    to{

        opacity:0;

        transform:translateX(120%);

    }

}