/* =========================================
   DESKTOP → TABLET
   SAME LAYOUT
========================================= */

@media (max-width:1200px){

    .container{
        width:94%;
    }

    /* Hero */

    .hero{
        padding:80px;
    }

    .hero-left{
        max-width:55%;
    }

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

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

    .hero-badge{
        font-size:13px;
    }

    .feature span{
        font-size:16px;
    }

    .btn{
        min-width:180px;
        font-size:16px;
    }

    /* Sections */

    .services-section,
    .why-us-section,
    .portfolio-section,
    .gallery-section,
    .cta-section,
    .map-section{
        padding:100px 0;
    }

    .section-title h2{
        font-size:48px;
    }

    .section-title p{
        font-size:18px;
    }

    /* Service */

    .service-card{
        padding:30px;
    }

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

    .service-card p{
        font-size:18px;
    }

    /* Why us */

    .feature-content h3{
        font-size:22px;
    }

    .feature-content p{
        font-size:16px;
    }

    /* Portfolio */

    .portfolio-content h3{
        font-size:30px;
    }

    /* Gallery */

    .gallery-item{
        height:360px;
    }

    .gallery-content h3{
        font-size:38px;
    }

    .gallery-content span{
        font-size:18px;
    }

    /* CTA */

    .cta-section h2{
        font-size:56px;
    }

    .cta-section p{
        font-size:22px;
    }

    /* Footer */

    .footer-logo h3{
        font-size:30px;
    }

    .footer-title{
        font-size:28px;
    }

    .footer-desc,
    .footer-contact li,
    .footer-links li a{
        font-size:18px;
    }

}

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

@media (max-width:768px){

 .header{

        padding:15px 0;

    }

    .header-call{

        display:none;

    }

    .menu-toggle{

        display:flex;

        width:48px;
        height:48px;

        border-radius:12px;

        background:#7c3aed;

        color:#fff;

        justify-content:center;
        align-items:center;

        font-size:22px;

        cursor:pointer;

        z-index:99999;

        transition:.35s;

    }

    .menu-toggle:hover{

        transform:scale(1.08);

    }

    /* Drawer */

    .navbar{

        position:fixed;

        top:0;
        right:-100%;

        width:320px;
        max-width:90%;

        height:100vh;

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

        backdrop-filter:blur(20px);

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

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

        padding:120px 35px;

        z-index:9999;

    }

    .navbar.active{

        right:0;

    }

    .nav-links{

        display:flex;

        flex-direction:column;

        gap:30px;

    }

    .nav-links li{

        opacity:0;

        transform:translateX(40px);

        transition:.45s;

    }

    .navbar.active .nav-links li{

        opacity:1;

        transform:translateX(0);

    }

    .navbar.active .nav-links li:nth-child(1){transition-delay:.10s;}
    .navbar.active .nav-links li:nth-child(2){transition-delay:.18s;}
    .navbar.active .nav-links li:nth-child(3){transition-delay:.26s;}
    .navbar.active .nav-links li:nth-child(4){transition-delay:.34s;}
    .navbar.active .nav-links li:nth-child(5){transition-delay:.42s;}

    .nav-links a{

        color:#231942;

        font-size:22px;

        font-weight:700;

    }

    /* Overlay */

    .menu-overlay{

        position:fixed;

        inset:0;

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

        opacity:0;

        visibility:hidden;

        transition:.35s;

        z-index:9998;

    }

    .menu-overlay.active{

        opacity:1;

        visibility:visible;

    }

    /* Hero */

    .hero{
        padding:130px 20px 80px;
        min-height:auto;
        background-position:70% center;
    }

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

    .hero-left{
        max-width:100%;
        text-align:center;
    }

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

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

    .hero-features{
        grid-template-columns:repeat(2,1fr);
        gap:20px;
    }

    .feature:not(:last-child)::after{
        display:none;
    }

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

    .btn{
        width:100%;
    }

    /* Grids */

    .services-grid,
    .features-grid,
    .portfolio-grid,
    .map-info,
    .footer-grid{
        grid-template-columns:1fr;
    }

    /* Gallery */

    .gallery-item{
        height:280px;
    }

    .gallery-content h3{
        font-size:28px;
    }

    .gallery-content span{
        font-size:16px;
    }

    .gallery-overlay{
        padding:25px;
    }

    .gallery-btn{
        width:50px;
        height:50px;
        font-size:18px;
    }

    /* CTA */

    .cta-section h2{
        font-size:34px;
    }

    .cta-section p{
        font-size:18px;
    }

    .cta-phone a,
    .cta-main-btn,
    .cta-btn{
        width:100%;
        min-width:100%;
    }

    /* Footer */

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

}



@media(max-width:768px){

    .faq-section{

        padding:80px 0;

    }

    .faq-question{

        padding:20px;

        font-size:17px;

    }

    .faq-answer p{

        padding:0 20px 20px;

        font-size:15px;

    }

}

@media(max-width:768px){


.progress-value{

display:none;

}

}

@media(max-width:768px){

.brand-item{

    width:140px;

    height:90px;

    margin:0 10px;

}

.brand-item img{

    width:90px;

}

.brands-slider::before,
.brands-slider::after{

    width:60px;

}

}