/* =====================================
LARGE TABLETS / SMALL LAPTOPS
===================================== */

@media (max-width:1200px){

    .container{
        width:min(95%,1180px);
    }

    .hero-grid{
        gap:35px;
    }

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

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

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

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

}


/* =====================================
TABLETS
===================================== */

@media (max-width:960px){

    /* hide desktop banner */

    .dynamic-header{
        display:none;
    }

    /* compact header */

    header{
        position:sticky;
    }

    .brand img{
        width:75px;
    }

    .header-tagline{
        display:none;
    }

    /* mobile menu */

    .mobile-toggle{
        display:block;
    }

    .menu{

        display:none;

        position:absolute;

        top:82px;
        left:0;

        width:100%;

        padding:20px;

        background:white;

        flex-direction:column;

        align-items:flex-start;

        border-top:1px solid var(--border);

        box-shadow:var(--shadow);

        z-index:999;

    }

    .menu.active{
        display:flex;
    }

    /* dropdown */

    .services-menu{
        width:100%;
        display:block;
        height:auto;
    }

    .services-dropdown{

        position:static;

        display:none;

        opacity:1;

        visibility:visible;

        pointer-events:auto;

        transform:none;

        box-shadow:none;

        border:none;

        padding-left:10px;

        min-width:unset;

    }

    .services-menu:hover .services-dropdown{
        display:flex;
    }

    /* typography */

    h1{
        font-size:2.8rem;
    }

    h2{
        font-size:1.8rem;
    }

    /* grids */

    .hero-grid,
    .grid-2,
    .grid-3,
    .grid-4,
    .cards,
    .process,
    .benefits-grid,
    .contact-grid{

        grid-template-columns:1fr;

    }

    /* sections */

    section{
        padding:45px 0;
    }

    .hero{
        padding:60px 0 40px;
    }

    /* cards */

    .panel,
    .card,
    .info-box,
    .process{
        padding:28px;
    }

    .feature,
    .benefit-card,
    .step,
    .job-card{
        padding:22px;
    }

    /* dynamic media */

    .dynamic-header-media{
        height:240px;
    }

    .dynamic-content h1,
    .dynamic-content h2{
        font-size:2rem;
    }

    .cta{
        padding:40px;
    }

    .footer{
        flex-direction:column;
    }

    .sidebar-card{
        position:relative;
        top:auto;
    }

}


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

@media (max-width:640px){

    .container{
        width:92%;
    }

    h1{
        font-size:2.2rem;
    }

    h2{
        font-size:1.55rem;
    }

    .sub{
        font-size:1rem;
    }

    .actions{
        flex-direction:column;
    }

    .actions .btn{
        width:100%;
    }

    .btn{
        width:auto;
        padding:13px 18px;
    }

    .brand{
        gap:12px;
    }

    .brand img{
        width:65px;
    }

    /* tags */

    .techs,
    .tech-group{
        justify-content:flex-start;
    }

    .tech,
    .tag{
        font-size:.85rem;
    }

    /* forms */

    input,
    textarea,
    select{
        padding:12px;
    }

    /* compact spacing */

    section{
        padding:35px 0;
    }

    .hero{
        padding:45px 0 25px;
    }

    .dynamic-header-media{
        height:200px;
    }

    .metric{
        padding:14px 0;
    }

    .job-meta{
        gap:6px;
    }

}


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

@media (max-width:420px){

    h1{
        font-size:1.9rem;
    }

    h2{
        font-size:1.35rem;
    }

    .badge,
    .dynamic-badge{
        font-size:.82rem;
        padding:6px 10px;
    }

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

    .card,
    .panel,
    .info-box{
        padding:20px;
    }

}

@media(max-width:960px){

    .company-name{
        font-size:0.7rem;
    }

    .logo-image{
        width:50px;
        height:50px;
    }

}

@media(max-width:960px){

    .language-switcher{

        margin-top:12px;

        margin-left:auto;
        margin-right:auto;

        padding:2px;

        max-width:110px;

        width:auto;

        gap:2px;

        box-shadow:none;

    }

    .language-switcher a{

        min-width:40px;

        height:28px;

        padding:0 8px;

        font-size:.78rem;

        font-weight:700;

    }

}

@media(max-width:960px){

    .logo-image{

        width:70px;
        height:70px;

    }

}

@media (max-width: 960px){

    @media(max-width:960px){

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

    }

    .footer-bottom-content{
        flex-direction:column;
        text-align:center;
    }
}

@media (max-width: 640px){

    @media(max-width:960px){

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

    }

    .footer-legal{
        flex-wrap:wrap;
        justify-content:center;
    }
}

@media(max-width:960px){

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

    .sidebar-card{
        position:relative;
        top:auto;
    }

    .job-card{
        min-height:auto;
    }

    .section-header{
        margin-bottom:30px;
    }

}

/* ========================
COOKIE BANNER
======================== */

@media(max-width:768px){

    .cookie-content{
        flex-direction:column;

        align-items:flex-start;
    }

    .cookie-actions{
        width:100%;
    }

    .cookie-actions .btn{
        flex:1;
    }

}

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

@media(max-width:992px){

    .process-timeline{

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

    }

    .process-timeline::before{

        display:none;

    }

}

@media(max-width:768px){

    .process-timeline{

        grid-template-columns:1fr;

        gap:30px;

    }

}

/*==============================
WHAT WE DELIVER
 ============================*/
@media(max-width:992px){

    .service-grid{

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

    }

}

@media(max-width:768px){

    .service-grid{

        grid-template-columns:1fr;

    }

}

/*=======================
OUR DEVELOPMENT PROCESS
======================= */
@media(max-width:768px){

    .service-process-step{

        gap:20px;

    }

    .service-process-marker{

        width:56px;

        height:56px;

        font-size:20px;

    }

    .service-process-step:not(:last-child)::before{

        left:27px;

        top:56px;

    }

}

/*==========================
TYPICAL USE CASES
========================== */
@media(max-width:768px){

    .use-cases-grid{

        grid-template-columns:1fr;

    }

}