@media(max-width:1180px){

    .main-menu{
        gap:34px;
    }

    .main-menu a{
        font-size:15px;
    }

    .hero h1{
        font-size:56px;
    }

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

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

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

@media(max-width:991px){

    .site-header{
        height:72px;
    }

    .header-top{
        height:72px;
    }

    .header-bottom{
        height:0;
        padding:0;
        border:0;
    }

    .header-brand{
        padding-left:14px;
    }

    .brand{
        border-right:0;
        padding-right:0;
    }

    .brand img{
        max-height:42px;
        max-width:230px;
    }

    .brand-country,
    .header-icons a{
        display:none;
    }

    .menu-toggle{
        display:flex;
        width:72px;
        height:72px;
        font-size:28px;
        border-left:1px solid rgba(255,255,255,.12);
    }

    .main-menu{
        position:fixed;
        top:72px;
        right:-100%;
        width:340px;
        max-width:88%;
        height:calc(100vh - 72px);
        background:var(--brown);
        display:flex;
        flex-direction:column;
        align-items:stretch;
        justify-content:flex-start;
        gap:0;
        overflow-y:auto;
        transition:.35s ease;
        z-index:10001;
        box-shadow:-18px 0 45px rgba(0,0,0,.36);
    }

    .main-menu.active{
        right:0;
    }

    .main-menu a{
        width:100%;
        height:auto;
        min-height:58px;
        padding:18px 24px;
        justify-content:flex-start;
        color:#fff;
        border-bottom:1px solid rgba(255,255,255,.10);
        font-size:15px;
    }

    .main-menu a:hover{
        background:var(--copper);
        color:#fff;
    }

    .main-menu a::after{
        display:none;
    }

    .menu-overlay{
        position:fixed;
        inset:72px 0 0 0;
        background:rgba(0,0,0,.55);
        opacity:0;
        visibility:hidden;
        transition:.3s;
        display:block;
        z-index:10000;
    }

    .menu-overlay.active{
        opacity:1;
        visibility:visible;
    }

    .hero{
        min-height:760px;
        padding:115px 0 70px;
    }

    .hero-text{
        text-align:center;
        margin:0 auto;
    }

    .hero h1{
        font-size:42px;
        letter-spacing:-1.4px;
    }

    .hero p{
        font-size:17px;
        margin:0 auto;
    }

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

    .quick-services{
        margin-top:0;
        padding-top:40px;
    }

    .quick-grid,
    .about-grid,
    .why-grid,
    .contact-grid{
        grid-template-columns:1fr;
    }

    .about-image img{
        height:420px;
    }

    .why-text{
        text-align:center;
    }

    .portfolio-item.large,
    .portfolio-item.wide{
        grid-column:span 1;
        grid-row:span 1;
    }
}

@media(max-width:720px){

    .container{
        width:90%;
    }

    .section-padding{
        padding:65px 0;
    }

    .brand img{
        max-height:38px;
        max-width:210px;
    }

    .hero{
        min-height:720px;
        padding-top:105px;
    }

    .hero-overlay{
        background:
            linear-gradient(
                180deg,
                rgba(7,7,7,.88),
                rgba(33,18,13,.82),
                rgba(7,7,7,.94)
            );
    }

    .section-badge{
        font-size:11px;
        padding:9px 14px;
    }

    .hero h1{
        font-size:34px;
        letter-spacing:-1px;
    }

    .hero p{
        font-size:16px;
    }

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

    .quick-card{
        padding:26px;
    }

    .services-grid,
    .process-grid,
    .why-cards,
    .about-list,
    .form-row,
    .footer-grid{
        grid-template-columns:1fr;
    }

    .about-text h2,
    .section-title h2,
    .why-text h2,
    .contact-info h2,
    .cta h2{
        font-size:30px;
    }

    .about-image img{
        height:310px;
    }

    .experience-box{
        position:relative;
        right:auto;
        bottom:auto;
        width:100%;
        margin-top:16px;
    }

    .portfolio-grid{
        grid-template-columns:1fr;
        grid-auto-rows:250px;
    }

    .contact-form{
        padding:24px;
    }

    .whatsapp-float{
        width:58px;
        height:58px;
        font-size:30px;
        right:16px;
        bottom:16px;
    }
}

@media(max-width:420px){

    .brand img{
        max-width:185px;
    }

    .hero h1{
        font-size:31px;
    }

    .main-menu{
        width:300px;
        max-width:90%;
    }
}