/* ==========================================================
   BEENUG
   responsive.css
   Responsive Layout
========================================================== */


/* ==========================================================
   LARGE DESKTOP
========================================================== */

@media (max-width:1400px){

    :root{
        --container:1100px;
    }

    .hero-grid{
        gap:60px;
    }

}


/* ==========================================================
   DESKTOP
========================================================== */

@media (max-width:1200px){

    :root{
        --container:1000px;
    }

    .hero-grid{
        grid-template-columns:1fr;
        text-align:center;
        gap:70px;
    }

    .hero-left{
        display:flex;
        flex-direction:column;
        align-items:center;
    }

    .hero p{
        max-width:700px;
    }

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

    .hero-logo{
        width:300px;
    }

    .grid-4{
        grid-template-columns:repeat(2,1fr);
    }

    .coming-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .footer-grid{
        grid-template-columns:repeat(2,1fr);
        gap:44px;
    }

}


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

@media (max-width:992px){

    header .container{
        height:76px;
    }

    .actions{
        display:none;
    }

    #mobile-toggle{
        display:block;
        color:white;
    }

    .hero{
        min-height:auto;
        padding:120px 0;
    }

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

    .hero-logo{
        width:260px;
    }

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

    .hero-actions{
        flex-direction:column;
    }

    .grid-3,
    .grid-2{
        grid-template-columns:1fr;
    }

    .page-hero{
        padding:120px 0 60px;
    }

    section{
        padding:80px 0;
    }

    .trusted-logos{
        grid-template-columns:repeat(2,1fr);
    }

    .social-proof{
        grid-template-columns:1fr;
    }

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

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

    .why-metrics{
        grid-template-columns:1fr;
    }

    .kpi-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .service-card{
        flex-direction:column;
    }

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

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

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

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

    .mission-grid{
        grid-template-columns:1fr;
        gap:40px;
    }

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

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

    .footer-grid{
        grid-template-columns:1fr 1fr;
        gap:40px;
    }

}


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

.mobile-nav{
    position:fixed;
    top:76px;
    left:0;
    width:100%;
    background:#111;
    display:none;
    flex-direction:column;
    padding:30px;
    border-top:1px solid rgba(255,255,255,.05);
    z-index:999;
}

.mobile-nav.open{
    display:flex;
}

.mobile-nav a{
    padding:18px 0;
    border-bottom:1px solid rgba(255,255,255,.05);
}

.mobile-nav .btn{
    margin-top:20px;
}


/* ==========================================================
   MOBILE MENU INSIDE HEADER NAV
========================================================== */

@media (max-width:992px){

    nav ul{
        position:fixed;
        top:76px;
        left:-100%;
        width:100%;
        height:calc(100vh - 76px);
        background:#090909;
        display:flex;
        flex-direction:column;
        justify-content:flex-start;
        align-items:center;
        padding-top:60px;
        gap:35px;
        transition:.35s;
        z-index:998;
    }

    nav ul.mobile-open{
        left:0;
    }

    nav ul li{
        width:100%;
        text-align:center;
    }

}


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

@media (max-width:768px){

    .container{
        width:92%;
    }

    .hero{
        padding:90px 0;
    }

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

    .hero p{
        font-size:1rem;
    }

    .hero-buttons,
    .hero-actions{
        flex-direction:column;
        width:100%;
    }

    .hero-buttons .btn,
    .hero-actions .btn{
        width:100%;
    }

    .hero-logo{
        width:220px;
    }

    .page-hero h1{
        font-size:2.4rem;
    }

    .page-hero p{
        font-size:1rem;
    }

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

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

    .cta-box{
        padding:50px 25px;
    }

    .cta-box h2{
        font-size:2rem;
    }

    .timeline-item{
        flex-direction:column;
        gap:16px;
    }

    .final-cta-section{
        padding:70px 0 90px;
    }

    .final-cta-box{
        padding:46px 24px;
        border-radius:24px;
    }

    .footer-grid{
        grid-template-columns:1fr;
        gap:36px;
    }

    .footer-logo{
        width:130px;
    }

    .copyright{
        text-align:left;
        margin-top:40px;
    }

    .card{
        padding:30px;
    }

    section{
        padding:70px 0;
    }

}


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

@media (max-width:576px){

    header .container{
        height:70px;
    }

    nav ul{
        top:70px;
        height:calc(100vh - 70px);
    }

    .mobile-nav{
        top:70px;
    }

    .logo img{
        height:36px;
    }

    .hero{
        padding:70px 0;
    }

    .hero h1{
        font-size:2rem;
        line-height:1.2;
    }

    .hero-logo{
        width:180px;
    }

    .eyebrow{
        font-size:.75rem;
    }

    .btn{
        padding:14px 20px;
        font-size:.95rem;
    }

    .page-hero{
        padding:90px 0 40px;
    }

    .page-hero h1{
        font-size:2rem;
    }

    .placeholder{
        padding:60px 0 80px;
    }

    .coming-card{
        padding:35px 20px;
    }

    .card{
        padding:24px;
    }

    footer p{
        max-width:100%;
    }

}


/* ==========================================================
   EXTRA SMALL
========================================================== */

@media (max-width:380px){

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

    .hero-logo{
        width:150px;
    }

    .btn{
        font-size:.9rem;
    }

    .container{
        width:94%;
    }

}


/* ==========================================================
   LANDSCAPE PHONE
========================================================== */

@media (max-height:500px) and (orientation:landscape){

    .hero{
        min-height:auto;
        padding:80px 0;
    }

    .hero-grid{
        gap:40px;
    }

}
/* ==========================================================
   HOME HERO UPDATE RESPONSIVE
========================================================== */

@media(max-width:1200px){

    .hero-grid-image{
        grid-template-columns:1fr;
        text-align:center;
    }

    .hero-left{
        align-items:center;
    }

    .hero-description{
        margin-left:auto;
        margin-right:auto;
    }

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

    .hero-image-frame{
        max-width:820px;
        margin:0 auto;
    }

}

@media(max-width:768px){

    .hero-title{
        font-size:clamp(2.7rem,13vw,4.6rem);
    }

    .strike-word::after{
        height:5px;
    }

    .hero-grid-image{
        gap:46px;
    }

}

@media(max-width:576px){

    .hero-title{
        font-size:2.6rem;
        letter-spacing:-.035em;
    }

    .hero-image-frame{
        border-radius:0;
    }

}
/* ==========================================================
   HOME HERO REFINEMENT RESPONSIVE
========================================================== */

@media(max-width:1200px){

    .logo img{
        height:50px;
    }

    header .container{
        height:88px;
    }

    .hero-grid-image{
        grid-template-columns:1fr;
        gap:60px;
        text-align:center;
    }

    .hero-image-frame{
        width:min(100%,900px);
        margin:0 auto;
    }

    .hero-image-frame img{
        transform:scale(1.04);
    }

}

@media(max-width:768px){

    .logo img{
        height:46px;
    }

    header .container{
        height:82px;
    }

    .hero-title{
        font-size:clamp(2.8rem,13vw,4.7rem);
        letter-spacing:-.045em;
    }

    .strike-word::after{
        height:10px;
        top:55%;
    }

    .hero-image-frame{
        border-radius:22px;
        width:100%;
    }

    .hero-image-frame img{
        transform:scale(1.03);
    }

}

@media(max-width:576px){

    .logo img{
        height:42px;
    }

    header .container{
        height:76px;
    }

    .hero-title{
        font-size:2.65rem;
        letter-spacing:-.035em;
    }

    .strike-word::after{
        height:8px;
    }

    .hero-grid-image{
        gap:44px;
    }

}