/* Mobile screens and below */
@media (max-width: 768px) {
  .features-grid {
    grid-template-columns: 1fr;
  }

  .why-left h2 {
    font-size: 38px;
  }

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

/*==============================
768px
==============================*/

@media (max-width:768px){

.menu-toggle{

display:block;

z-index:1001;

}

.site-nav{

position:fixed;

top:80px;

left:-100%;

width:100vw;

height:calc(100vh - 80px);

background:#fff;

padding:40px 30px;

display:flex;

flex-direction:column;

gap:20px;

transition:left .3s ease;

overflow-y:auto;

z-index:1000;

box-sizing:border-box;

}

.site-nav.active{

left:0;

right:0;

width:100vw;

}

.site-nav .nav-list{

display:flex;

flex-direction:column;

gap:20px;

}

.site-nav a{

font-size:18px;

padding:12px 0;

}

.header-buttons{

display:none;

}

}

/*====================================================
  PROCESS - RESPONSIVE -------
=====================================================*/


@media (max-width: 1100px) {
    .process-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }

    .process-line {
        display: none;
    }
}

@media (max-width: 768px) {
    .process {
        padding: 80px 0;
    }

    .process-wrapper {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .process-card {
        padding: 30px;
    }

    .step-icon {
        width: 70px;
        height: 70px;
        font-size: 34px;
    }
}




/* Tablet screens and below */
@media (max-width: 992px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile screens and below */
@media (max-width: 768px) {
  .services {
    padding: 80px 0;
  }

  .section-header h2 {
    font-size: 38px;
  }

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

  .service-card {
    padding: 30px;
  }
}

/* Tablet screens and below */
@media (max-width: 992px) {
  .why-grid {
    grid-template-columns: 1fr;
  }

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




/*====================================================
  COVERAGE - RESPONSIVE
=====================================================*/

@media (max-width: 992px) {
    .coverage-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .coverage {
        padding: 80px 0;
    }

    .coverage-content h2 {
        font-size: 38px;
    }

    .coverage-list {
        grid-template-columns: 1fr;
    }

    .map-card {
        padding: 25px;
    }

    .city {
        font-size: 11px;
        padding: 6px 10px;
    }
}

/*====================================================
  TESTIMONIALS - RESPONSIVE
=====================================================*/

@media (max-width: 992px) {
    .company-strip {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .testimonial-card {
        min-width: 100%;
    }

    .company-strip {
        gap: 35px;
    }

    .company-strip img {
        height: 34px;
    }
}

/*====================================================
  FAQ & CTA - RESPONSIVE
=====================================================*/

@media (max-width: 992px) {
    .cta-box {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 768px) {
    /* FAQ */
    .faq {
        padding: 80px 0;
    }

    .faq-question {
        font-size: 17px;
        padding: 22px;
    }

    /* CTA */
    .cta {
        padding-bottom: 80px;
    }

    .cta-box {
        padding: 40px 30px;
    }

    .cta h2 {
        font-size: 36px;
    }

    .cta p {
        font-size: 17px;
    }

    .cta-buttons {
        flex-direction: column;
        width: 100%;
    }

    .btn-white,
    .btn-outline-white {
        width: 100%;
    }
}

/*====================================================
  CONTACT & FOOTER - RESPONSIVE
=====================================================*/

@media (max-width: 992px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 768px) {
    /* Contact */
    .contact {
        padding: 80px 0;
    }


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

    /* Floating Buttons */
    .back-top,
    .whatsapp,
    .call-btn {
        width: 48px;
        height: 48px;
        right: 15px;
    }
}

@media (max-width: 768px) {
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .hero h1 {
        font-size: clamp(2.4rem, 8vw, 3rem);
        max-width: 100%;
    }

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

    .tracking-box {
        padding: 24px;
        margin-top: 0;
    }

    .tracking-box > div,
    .tracking-box form {
        width: 100%;
    }

    .tracking-box form {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .tracking-box input,
    .tracking-box button {
        width: 100%;
    }

    .trust-grid,
    .why-stats,
    .features-grid {
        grid-template-columns: 1fr;
    }

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

    .testimonial-slider {
        padding-bottom: 10px;
    }

    .testimonial-track {
        gap: 20px;
    }

    .testimonial-card {
        padding: 30px;
    }
}