@media (max-width:900px) {
    .header-phone, .quote-btn {
        padding: 8px 2rem;
        min-width: inherit
    }

    .header-inner {
        justify-content: space-between;
        width: 100%
    }

    .nav-dropdown:hover .nav-dropdown-menu {
        transform: inherit
    }

    .hero-section .search-area {
        position: static;
        transform: translate(00px, 0)
    }

    .hero-section .search-area .search-box {
        flex-wrap: wrap
    }
}

@media (max-width:600px) {
    body {
        font-size: 16px
    }

    .faq-intro {
        position: static
    }

    .mission-box {
        position: relative
    }

    .inner-page-breadcrumb {
        font-size: 13px
    }

    .quote-btn, .service-content::after, .topBar {
        display: none
    }

    .charges-table td {
        font-size: 14px
    }

    .faq-title {
        font-size: 17px
    }

    .coverage-section.active .coverage-map, .gallery-hero .container {
        flex-direction: column
    }

    .about-city, .gallery-hero .container {
        padding: 4rem 0
    }

    .hero-swiper {
        height: 300px
    }

    .hero-slide::after {
        background-color: rgba(255,255,255,0.5);
        content: "";
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
    }

    .hero-content h1 {
       font-size: 3.5rem;
        font-weight: 500;
    }

    .service-content h1, .service-content p, .service-list li {
        color: #fff
    }

    .hero .search-box {
        flex-wrap: wrap
    }

    .about-city p {
        line-height: 26px
    }

    .iba-section .container {
        padding: 3rem
    }

    .about-certificates-grid, .service-solution-grid {
        grid-template-columns: 1fr
    }

    .service-solution-grid ul {
        padding-left: 0
    }
}

@media (max-width:500px) {
    html {
        font-size: 50%
    }

    h2 {
        font-size: clamp(22px, 2.5rem, 2.6rem)
    }

    .header-logo {
        width: auto
    }

    .site-header {
        padding: 5px 20px 0
    }

    .header-phone {
        padding: 4px 8px
    }

    .faq-intro h2, .locations-header h2, .why-choose-content h2 {
        font-size: 3.2rem;
        line-height: normal
    }

    .header-phone span, .inner-page-breadcrumb {
        display: none
    }

    .location-card h3 {
        font-size: 20px
    }

    .area-intro-content h2, .locations-header h2 {
        line-height: 1.3
    }
}