@media (min-width: 1340px) and (max-width: 2560px) {
    .side-menu-container {
        display: none;
    }
}

@media (min-width: 1400px) and (max-width: 2560px) {
    .side-menu-container {
        display: none;
    }

    #Res-about-sec .left-side-sec .div-img {
        height: 67vh;
    }

    #location-cover {
        display: block;
    }

    #service-content-i .table-of-content-container h3 {
        padding: 16px 20px;
        font-size: 18px;
    }
}


/* ===================1200 T0 1340========== */


@media (min-width: 1200px) and (max-width: 1340px) {
    .main-header {
        padding: 10px 45px;
    }

    .main-header-mid {
        width: auto;
    }

    .main-header-menu ul {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 30px;
    }

    /* Index page Hero section */
    .hero-content h1 {
        font-size: 40px;
    }

    .hero-content-btns {
        gap: 10px;
    }

    .hero-content-btns a {
        padding: 15px 20px;
    }


    /* FAQ */

    #faqs {
        height: 750px;
    }

    .faqs-image {
        width: 100%;
        height: 700px;
    }


}


@media (min-width: 1100px) and (max-width: 1199px) {
    .top-header {
        padding: 10px 45px;
    }

    .main-header {
        padding: 10px 45px;
    }

    .main-header-mid {
        width: auto;
    }

    .main-header-menu ul {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 30px;
    }

    .side-menu-container {
        display: none;
    }




}

@media (min-width: 1024px) and (max-width: 1099px) {
    .top-header {
        padding: 10px 45px;
    }

    .main-header {
        padding: 10px 45px;
    }

    .top-details-box-time {
        display: none;
    }

    .main-header {
        padding: 10px 45px;
    }

    .main-header-mid {
        width: auto;
        margin-right: 10px;
    }

    .main-header-menu ul {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 30px;
    }

    .main-header-menu ul li a {
        font-size: 0.9rem;
    }

    .main-header-right {
        width: auto;
    }

    .side-menu-container {
        display: none;
    }

    /* Index Page Hero-section */
    .hero-content-btns {
        gap: 10px;
    }

    .hero-content-btns a {
        padding: 15px 14px;
        font-size: 16px;
        letter-spacing: 0px;
    }

    .hero-content h1 {
        font-size: 36px;
    }


    /* Service Section */

    #service-content-i {
        padding: 40px;
        gap: 20px;
    }

    #service-content-i .table-of-content-container h3 {
        font-size: 15px;
        padding: 10px;
    }

    #service-content-i .table-of-content-container .table_cta {
        display: none;
    }

    .content-of-container h2 {
        font-size: 30px;
    }

    .content-of-container p {
        font-size: 17px;
        text-align: justify;
    }

    .content-of-container h3 {
        font-size: 26px;
    }

    /* ServicePricing */

    .price-container {
        padding: 0px 40px;
    }

    .price-container .pricing-div-container {
        width: 100%;
        gap: 30px;
    }



    /* Service CTA section */

    .service-cta {
        padding: 20px 40px;
    }

    .service-cta .service-cta-div {
        gap: 20px;
    }

    .service-cta .service-cta-div .left-side h2 {
        font-size: 30px;
    }

    .service-cta .service-cta-div .right-side .btn-div {
        gap: 10px;
    }

    .service-cta .service-cta-div .right-side .btn-div button:nth-child(1) {
        padding: 16px 20px;
    }

    .service-cta .service-cta-div .right-side .btn-div button:nth-child(2),
    .service-cta .service-cta-div .right-side .btn-div button:nth-child(3) {
        width: 50px;
        height: 50px;
    }

    .service-cta .service-cta-div .right-side p {
        font-size: 16px;
    }


    /* Priceing */
    .pricing-section {
        width: 100%;
        height: auto;
        padding: 20px 40px;
    }

    .parent-res-and-com {
        height: 180vh;
    }



    .residential-wall-mount-sec .right-side {
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
        /* display: flex;
        flex-wrap: wrap; */
        gap: 20px;
    }

    .residential-wall-mount-sec .right-side .card {
        width: 100%;
    }


    .content-div h2 {
        font-size: 30px;

    }

    .content-div h2 {
        font-size: 25px;
    }

    .content-div p {
        font-size: 17px;
        text-align: justify;
    }

    .content-div h3 {
        font-size: 21px;

    }

    .button-container {
        padding: 40px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }

    .service-button {
        padding: 10px;
        font-size: 16px;
    }

    /* Resdencial service */

    .residentcial-section {
        padding: 0px 40px;
    }

    .residentcial-section .hero-content h1 {
        font-size: 40px;
    }

    .residentcial-section .hero-content p {
        font-size: 20px;
    }

    .residentcial-section .hero-content .res-btn-sec {
        gap: 20px;
    }

    .residentcial-section .hero-content .res-btn-sec button {
        padding: 14px;
        font-size: 18px;
    }

    .residentcial-section .form-container {
        width: 87%;
    }

    #Res-about-sec {
        padding: 20px 40px;
    }

    #Res-about-sec .left-side-sec .div-img {
        width: 100%;
        height: 120vh;
        position: relative;

    }

    #Res-about-sec .right-side-sec h2 {
        font-size: 25px;
    }

    #Res-about-sec .right-side-sec h3 {
        font-size: 22px;
    }

    #Res-about-sec .right-side-sec p {
        font-size: 18px;
        line-height: 1.5;
        margin-bottom: 10px;
    }

    .res-service-sec {
        padding: 20px 40px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-self: flex-start;
    }

    .res-service-sec .left-side {
        width: 100%;
        position: static;
        text-align: center;
        padding: 0px;
    }

    .res-service-sec .left-side h2 {
        font-size: 37px;
    }

    .res-service-sec .left-side ul {
        display: flex;
        justify-content: center;
        margin-bottom: 10px;
    }

    .res-service-sec .right-side {
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        padding: 0px 0px;
    }

    .why-Choose-us .right-side-sec .imges-div img:nth-child(3) {
        display: none;
    }


    /* Footer */

    .locations-name {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;

    }



}

/* ============================= 786px ================ */

@media (min-width: 768px) and (max-width: 1023px) {
    .top-header {
        padding: 10px 45px;
    }

    .main-header {
        padding: 10px 45px;
    }

    .top-details-box-email,
    .top-details-box-time {
        display: none;
    }

    .main-header-mid {
        display: none;
    }

    .main-header-right {
        width: auto;
    }

    .side-menu-container .main-header-right {
        display: none;
    }

    .menu-icon-div {
        display: block;
    }

    /* Index page Hero section */
    .hero-overlay {
        padding: 0px 40px 0 40px;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        background: rgba(0, 73, 118, 0.85);
    }

    .hero-content {
        width: 100%;
        padding-right: 0;
        margin-bottom: 40px;
        text-align: left;
    }

    .hero-content h1 {
        font-size: 3.1rem;
        margin-top: 0px;
    }

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

    .form-container {
        width: 100%;
    }

    #hero-banner {
        height: 1000px;
    }

    .services-below .row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        row-gap: 20px;
    }

    .services-below .col-lg-4:nth-child(3) {
        margin: ;
    }



    /* Why  */
    #why-choose .row {
        display: flex;
        flex-direction: column-reverse;
    }

    .why-choose-image {
        width: 50%;
        height: 400px;
        margin: 0px auto;
    }

    .right-work-upper {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        text-align: center;
        float: left;
    }

    .locations-below .container-class {
        width: 100%;
    }

    /* pricing service */
    .price-container {
        padding: 40px;
    }

    .price-container .pricing-div-container {
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        margin-top: 40px;
        gap: 40px;
    }

    .Troubleshooting-container p {
        font-size: 14px;
        padding: 0px 10px;
        font-weight: 500;
    }

    .Basic-cleaning h4 {
        font-size: 17px;
        margin-top: 8px;
        color: var(--primary-color);
    }

    .Basic-cleaning p {
        font-size: 14px;
        padding: 0px 10px;
        font-weight: 500;
    }

    .chemical-cleanig h4 {
        font-size: 17px;
        margin-top: 8px;
        color: var(--primary-color);
    }

    .chemical-cleanig p {
        font-size: 14px;
    }

    .chemical-cleanig aside div span {
        font-size: 14px;
    }

    /* Service Section */



    #service-content-i {
        padding: 20px;
        gap: 20px;
    }

    #service-content-i .table-of-content-container h3 {
        font-size: 15px;
        padding: 15px;
    }

    .content-of-container h1 {
        font-size: 25px;
    }

    .content-of-container p {
        font-size: 16px;
        text-align: justify;
    }

    .content-of-container h2 {
        font-size: 22px;
        font-weight: 800;
        line-height: 1.5;
    }

    .content-of-container h3 {
        font-size: 18px;
        font-weight: 700;
        line-height: 1.2;
    }

    .content-of-container ul {
        font-size: 16px;
        text-align: justify;
        line-height: 1.35;
        padding-left: 20px;
        padding-right: 0px;
    }

    /* Service CTA section */

    .service-cta {
        padding: 20px 15px;
    }

    .service-cta .service-cta-div {
        gap: 10px;
    }

    .service-cta .service-cta-div .left-side h2 {
        font-size: 24px;
    }

    .service-cta .service-cta-div .right-side {
        width: 55%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: end;
        gap: 10px;
        /* border: 1px solid; */
    }

    .service-cta .service-cta-div .right-side .btn-div {
        gap: 5px;
    }

    .service-cta .service-cta-div .right-side .btn-div button:nth-child(1) {
        padding: 16px 20px;
    }

    .service-cta .service-cta-div .right-side .btn-div button:nth-child(2),
    .service-cta .service-cta-div .right-side .btn-div button:nth-child(3) {
        width: 50px;
        height: 50px;
        display: none;
    }

    .service-cta .service-cta-div img {
        position: absolute;
        width: 120px;
        left: 35%;
        bottom: -10px;
    }

    .service-cta .service-cta-div .right-side p {
        font-size: 15px;
        width: 100%;
        max-width: 85%;
    }

    /* price */
    .pricing-section {
        width: 100%;
        height: auto;
        padding: 20px 20px;
    }

    .parent-res-and-com {
        height: 198vh;
    }



    .residential-wall-mount-sec .right-side {
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
        /* display: flex;
        flex-wrap: wrap; */
        gap: 20px;
    }

    .residential-wall-mount-sec .right-side .card {
        width: 100%;
    }

    .content-div {
        padding: 20px;
    }

    .content-div h1 {
        font-size: 30px;

    }

    .content-div h2 {
        font-size: 25px;
    }

    .content-div p {
        font-size: 17px;
        text-align: justify;
    }

    .content-div h3 {
        font-size: 21px;

    }



    .content-div h3 {
        font-size: 21px;
        margin-top: 10px;
    }

    .content-div ul {
        font-size: 16px;
        text-align: justify;
        line-height: 1.35;
        padding-left: 20px;
        padding-right: 0px;
    }

    /* why */

    .why-Choose-us {
        padding: 20px;
    }

    .left-side-ins-sec h1 {
        font-size: 25px;
    }

    .why-Choose-us .left-side-sec ul {
        margin-top: 16px;
        gap: 17px;

    }

    .why-Choose-us .left-side-sec ul li h4 {
        font-size: 19px;
    }

    .why-Choose-us .left-side-sec ul li p {
        font-size: 16px;
        text-align: justify;
        line-height: 1.35;
    }

    .why-Choose-us .left-side-sec ul li img {
        width: 30px;
        height: 30px;
    }


    .button-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        padding: 40px;
    }

    .service-button {
        padding: 10px;
        font-size: 14px;
    }

    /* Resdential */

    #hero-banner {
        min-height: 900px;
    }

    .residentcial-section .form-container {
        width: 100%;
    }

    .form-container {
        width: 100%;
    }

    /* Resdencial service */

    #Res-about-sec {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: start;
        padding: 0px 40px;
    }

    #Res-about-sec .left-side-sec {
        width: 100%;
        margin-bottom: 20px;
    }

    #Res-about-sec .right-side-sec {
        width: 100%;
        height: 100%;
    }

    .residentcial-section .hero-content h1 {
        font-size: 45px;
    }

    .residentcial-section .hero-content p {
        font-size: 22px;
    }

    .residentcial-section .hero-content .res-btn-sec {
        gap: 20px;
    }

    .residentcial-section .hero-content .res-btn-sec button {
        padding: 14px;
        font-size: 18px;
    }

    .residentcial-section .form-container {
        width: 100%;
    }

    #Res-about-sec {
        padding: 20px 40px;
    }

    #Res-about-sec .left-side-sec .div-img {
        width: 100%;
        height: 60vh;
        position: relative;

    }

    #Res-about-sec .right-side-sec h2 {
        font-size: 25px;
    }

    #Res-about-sec .right-side-sec h3 {
        font-size: 22px;
    }

    #Res-about-sec .right-side-sec p {
        font-size: 18px;
        line-height: 1.5;
        margin-bottom: 10px;
    }

    .res-service-sec {
        padding: 20px 40px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-self: flex-start;
    }

    .res-service-sec .left-side {
        width: 100%;
        position: static;
        text-align: center;
        padding: 0px;
    }

    .res-service-sec .left-side h2 {
        font-size: 37px;
    }

    .res-service-sec .left-side ul {
        display: flex;
        justify-content: center;
        margin-bottom: 10px;
    }

    .res-service-sec .right-side {
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        padding: 0px 0px;
    }

    .why-Choose-us .right-side-sec .imges-div img:nth-child(3) {
        display: none;
    }

    .why-choose-end h1 {
        padding: 40px;
    }

    /* Location page  */

    main {
        padding: 0px 40px;
    }

    .second-main .service-card-list-container {
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        margin-bottom: 30px;
    }

    .why-choose-end h3 {
        font-size: 23px;
        padding: 0px 10px;
    }

    /* Footer Section */
    .container-cta {
        padding: 20px;
    }

    .locations-name {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;

    }


}

@media (min-width: 425px) and (max-width: 767px) {
    .top-header {
        padding: 10px 45px;
       
    }

    .top-header-right {
        display: none;
    }

    .main-header {
        padding: 10px 45px;
    }

    .top-details-box-email,
    .top-details-box-time {
        display: none;
    }

    .main-header-mid {
        display: none;
    }

    .main-header-right {
        width: auto;
    }

    .main-header-right {
        display: none;
    }

    .menu-icon-div {
        display: block;
    }

    .side-menu-container aside {
        width: 100%;
    }

    .side-menu-container aside .main-header-right {
        display: block;
    }

    /* Index Page  */
    .hero-overlay {
        padding: 0px 40px 0 40px;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        background: rgba(0, 73, 118, 0.85);
    }

    .hero-content {
        width: 100%;
        padding-right: 0;
        margin-bottom: 40px;
        text-align: left;
    }

    .hero-content h1 {
        font-size: 1.7rem;
        margin-top: 0px;
        margin-bottom: 10px;
    }

    .subtitle {
        font-size: 1rem;
        margin-bottom: 15px;
    }

    .benefits-list {
        margin-bottom: 20px;
    }

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

    .form-container {
        width: 100%;
    }

    #hero-banner {
        min-height: 1000px;
    }

    .hero-content-btns {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .hero-content-btns a {
        padding: 15px 20px;
        font-size: 16px;
    }

    .inner-banner-location-page-sec,
    #inner-banner {
        height: 200px;
    }

    .inner-banner-content h1 {
        font-size: 1.8rem;
    }



    .about-lower-content {
        padding: 20px 10px;
    }

    .about-upper-box h2 {
        font-size: 1.6rem;
    }

    .section-upper {
        margin: 0 40px;
    }

    .section-upper-box h2 {
        font-size: 1.4rem;
    }

    .services-below .row {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }

    #Res-about-sec .right-side-sec button {
        width: 100%;
    }

    #why-choose .row {
        display: flex;
        flex-direction: column-reverse;
    }

    .why-choose-content h2 {
        font-size: 1.7rem;
        margin-bottom: 10px;
    }

    .why-choose-content p {
        font-size: .9rem;
        margin-bottom: 10px;
    }

    .why-choose-lists li {
        font-size: .9rem;
    }

    .why-choose-btn {
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .why-choose-btn a {
        text-align: center;
    }

    .why-choose-end h3 {
        font-size: 20px;
        padding: 0px 15px;
    }

    .why-choose-image {
        width: 50%;
        height: 400px;
        margin: 0px auto;
    }

    .right-work-upper {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        text-align: center;
        float: left;
    }

    .why-choose-box .why-choose-image {
        display: none;
    }

    .locations-below .container-class {
        width: 100%;
    }

    .work-upper-content h2 {
        font-size: 1.8rem;
    }

    .right-work-upper .review {
        font-size: 1.7rem;
    }

    .faq-box-content h2 {
        font-size: 1.7rem;
    }

    .right-cta-box {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .locations-box h2 {
        font-size: 1.7rem;
    }

    .locations-box p {
        margin-bottom: 10px;
    }

    .right-locations-box {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .locations-name {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 10px;
    }

    .locations-name a {
        width: 100%;
    }


    /* Footer */
    footer {
        padding: 10px 20px;
    }

    .footer-text {
        max-width: 80%;
    }

    .footer-title {
        text-align: left;
    }

    .footer-links {
        display: flex;
        justify-content: start;
        align-items: center;
    }

    .footer-contact {
        margin-left: 0px;
    }

    .contact-title {
        text-align: left;
        margin-left: 0px;
    }

    /* pricing service */
    .price-container {
        padding: 0px 20px;
    }

    .pricing-card {
        width: 100%;
    }

    .price-container .pricing-div-container {
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        /* margin-top: 40px; */
        row-gap: 40px;
    }

    .Troubleshooting-container {
        padding: 10px;
    }

    .Troubleshooting-container p {
        font-size: 14px;

        font-weight: 500;
    }

    .Basic-cleaning aside {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .Basic-cleaning h4 {
        font-size: 17px;
        margin-top: 8px;
        color: var(--primary-color);
    }

    .Basic-cleaning p {
        font-size: 14px;
        padding: 0px 10px;
        font-weight: 500;
    }

    .chemical-cleanig aside {
        width: 100%;
        height: auto;
        padding: 8px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

    .wall-mounted-commer {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

    .chemical-cleanig h4 {
        font-size: 17px;
        margin-top: 8px;
        color: var(--primary-color);
    }

    .chemical-cleanig p {
        font-size: 14px;
    }

    .chemical-cleanig aside div span {
        font-size: 14px;
    }

    /* Service Section */

    #service-content-i {
        display: flex;
        flex-direction: column;
        padding: 20px;
        gap: 30px;
    }

    #service-content-i .table-of-content-container {
        width: 100%;
        position: static;
    }

    #service-content-i .table-of-content-container h3 {
        font-size: 16px;
        padding: 15px;
    }

    .content-of-container {
        width: 100%;
        height: auto;
        font-family: 'Roboto', sans-serif;
    }

    .content-of-container h1 {
        font-size: 23px;
    }

    .content-of-container p {
        font-size: 16px;
        text-align: justify;
    }

    .content-of-container h2 {
        font-weight: 800;
        font-size: 20px;
        line-height: 1.5;
    }

    .content-of-container h3 {
        font-size: 18px;
        font-weight: 700;
        line-height: 1.2;
    }

    .content-of-container ul {
        font-size: 16px;
        text-align: justify;
        line-height: 1.35;
        padding-left: 20px;
        padding-right: 0px;
    }


    /* Service CTA section */

    .service-cta {
        padding: 20px;
    }

    .service-cta .service-cta-div {
        gap: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }

    .service-cta .service-cta-div .left-side {
        width: 100%;
        height: auto;
        /* border: 1px solid; */
    }

    .service-cta .service-cta-div .left-side h2 {
        font-size: 24px;
    }

    .service-cta .service-cta-div .right-side {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column-reverse;
        justify-content: start;
        align-items: start;
        gap: 10px;
        /* border: 1px solid; */
    }

    .service-cta .service-cta-div .right-side .btn-div {
        gap: 5px;
    }

    .service-cta .service-cta-div .right-side .btn-div button:nth-child(1) {
        padding: 16px 20px;
    }

    .service-cta .service-cta-div .right-side .btn-div button:nth-child(2),
    .service-cta .service-cta-div .right-side .btn-div button:nth-child(3) {
        width: 50px;
        height: 50px;
        display: none;
    }

    .service-cta .service-cta-div img {
        position: absolute;
        width: 120px;
        top: 50px;

        right: 0px;
        display: none;
    }

    .service-cta .service-cta-div .right-side p {
        font-size: 15px;
        width: 100%;
        max-width: 100%;
    }

    /* Pricing */

    .pricing-section {
        width: 100%;
        height: auto;
        padding: 20px 10px;
    }

    .parent-res-and-com {
        height: 400vh;
    }

    .pricing-section .btn-div {
        gap: 10px;
        margin-bottom: 20px;
    }

    .pricing-section .btn-div button {
        padding: 15px 25px;
        font-size: 17px;
    }

    .residential-wall-mount-sec .right-side {
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;

    }

    .residential-wall-mount-sec .right-side .card {
        width: 100%;

    }

    .why-Choose-us {
        padding: 20px 10px;
    }

    .left-side-ins-sec h1 {
        font-size: 25px;
    }

    .why-Choose-us .left-side-sec ul {
        margin-top: 16px;
        gap: 17px;

    }

    .why-Choose-us .left-side-sec ul li h4 {
        font-size: 19px;
    }

    .why-Choose-us .left-side-sec ul li p {
        font-size: 16px;
        text-align: justify;
        line-height: 1.35;
    }

    .why-Choose-us .left-side-sec ul li img {
        width: 30px;
        height: 30px;
    }


    .content-div {
        padding: 20px;
    }

    .content-div h4 {
        font-size: 18px;
        margin-top: 10px;
    }

    .content-div h1 {
        font-size: 25px;

    }

    .content-div h2 {
        font-size: 20px;
    }

    .content-div p {
        font-size: 17px;
        text-align: justify;
    }

    .content-div h3 {
        font-size: 21px;

    }

    .content-div h3 {
        font-size: 21px;

    }

    .content-div h3 {
        font-size: 18px;
        margin-top: 10px;
    }

    .content-div ul {
        font-size: 16px;
        text-align: justify;
        line-height: 1.35;
        padding-left: 20px;
        padding-right: 0px;
    }

    .button-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding: 20px;
    }

    .service-button {
        padding: 10px;
        font-size: 14px;
    }


    /* Resdential */

    #hero-banner {
        min-height: 990px;
    }

    .residentcial-section .form-container {
        width: 100%;
    }

    .form-container {
        width: 100%;
    }

    /* Resdencial service */

    #Res-about-sec {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: start;
        padding: 0px 20px;
    }

    #Res-about-sec .left-side-sec {
        width: 100%;
        margin-bottom: 20px;
    }

    #Res-about-sec .right-side-sec {
        width: 100%;
        height: 100%;
    }


    .residentcial-section .hero-content h1 {
        font-size: 35px;
    }

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

    .residentcial-section .hero-content .res-btn-sec {
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: start;
        gap: 10px;
    }

    .residentcial-section .hero-content .res-btn-sec button {
        padding: 14px;
        font-size: 18px;
    }

    .residentcial-section .form-container {
        width: 100%;
    }

    #Res-about-sec {
        padding: 20px;
    }

    #Res-about-sec .left-side-sec .div-img {
        width: 100%;
        height: 60vh;
        position: relative;

    }

    #Res-about-sec .right-side-sec h2 {
        font-size: 25px;
    }

    #Res-about-sec .right-side-sec h3 {
        font-size: 22px;
    }

    #Res-about-sec .right-side-sec p {
        font-size: 18px;
        line-height: 1.5;
        margin-bottom: 10px;
    }

    .res-service-sec {
        padding: 20px 40px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-self: flex-start;
    }

    .res-service-sec .left-side {
        width: 100%;
        position: static;
        text-align: center;
        padding: 0px;
    }

    .res-service-sec .left-side h2 {
        font-size: 25px;
        line-height: 28px;
    }

    .res-service-sec .left-side ul {
        display: flex;
        justify-content: center;
        margin-bottom: 10px;
    }

    .res-service-sec .left-side ul li {
        display: flex;
        justify-content: start;
        align-items: center;
        font-size: 18px;
        letter-spacing: 0.04rem;
    }

    .res-service-sec .left-side p {
        font-size: 16px;
    }

    .res-service-sec .right-side {
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 30px;
        padding: 0px 0px;
    }

    .why-Choose-us {
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: start;
    }

    .why-Choose-us .left-side-sec h1 {
        font-size: 25px;
    }

    .why-Choose-us .left-side-sec {
        width: 100%;
    }

    .why-Choose-us .right-side-sec .imges-div {
        display: none;
    }

    .why-choose-end h1 {
        padding: 20px;
        font-size: 18px;
    }

    /* location page */

    main {
        padding: 0px 10px;
    }

    .second-main .service-card-list-container {
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 30px;
        margin-bottom: 30px;
    }

    .locations-name {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;

    }


}
@media (max-width:768px){
        .top-header {
        
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

@media (max-width: 423px) {
    .top-header {
        padding: 10px 10px;
    }

    .top-header-right {
        display: none;
    }

    .main-header {
        padding: 10px 20px;
    }

    .top-details-box-email,
    .top-details-box-time {
        display: none;
    }

    .main-header-mid {
        display: none;
    }

    .main-header-right {
        width: auto;
    }

    .main-header-right {
        display: none;
    }

    .menu-icon-div {
        display: block;
    }

    .side-menu-container aside {
        width: 100%;
    }

    /* Index Page  */
    .hero-overlay {
        padding: 0px 20px 0 20px;
        flex-direction: column;
        justify-content: center;
        text-align: center;

    }

    .hero-content {
        width: 100%;
        padding-right: 0;
        margin-bottom: 40px;
        text-align: left;
    }

    .hero-content h1 {
        font-size: 1.7rem;
        margin-top: 0px;
        margin-bottom: 10px;
    }

    .subtitle {
        font-size: 1rem;
        margin-bottom: 15px;
    }

    .benefits-list {
        margin-bottom: 20px;
    }

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

    .form-container {
        width: 100%;
    }

    #hero-banner {
        min-height: 1000px;
    }

    .hero-content-btns {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .hero-content-btns a {
        padding: 15px 20px;
        font-size: 16px;
    }

    .inner-banner-location-page-sec,
    #inner-banner {
        height: 200px;
    }

    .inner-banner-content h1 {
        font-size: 1.8rem;
    }

    .about-we-content p {
        text-align: justify;
    }

    .about-lower-content {
        padding: 10px 0px;
    }

    .about-upper-box h2 {
        font-size: 1.6rem;
    }

    .right-upper .exp {
        font-size: 3.4rem;
    }

    .right-upper p:nth-child(2) {
        font-size: 1rem;
        color: #0e0e0e;
        line-height: 1.8rem;
    }

    .section-upper {
        margin: 0 20px;
    }

    .section-upper-box h2 {
        font-size: 1.4rem;
    }

    .services-below .row {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }

    #why-choose .row {
        display: flex;
        flex-direction: column-reverse;
    }

    .why-choose-content h2 {
        font-size: 1.7rem;
        margin-bottom: 10px;
    }

    .why-choose-content p {
        font-size: .9rem;
        margin-bottom: 10px;
    }

    .why-choose-lists li {
        font-size: .9rem;
    }

    .why-choose-btn {
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .why-choose-btn a {
        text-align: center;
    }

    .why-choose-image {
        width: 50%;
        height: 400px;
        margin: 0px auto;
    }

    .right-work-upper {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        text-align: center;
        float: left;
    }

    .why-choose-box .why-choose-image {
        display: none;
    }

    .locations-below .container-class {
        width: 100%;
    }

    .work-upper-content h2 {
        font-size: 1.6rem;
    }

    .right-work-upper .review {
        font-size: .8rem;
    }

    .right-work-upper .review i {
        font-size: 1.2rem;
    }

    .faq-box-content h2 {
        font-size: 1.7rem;
    }

    .works-below-text h2 {
        font-size: 2.8rem;
    }

    .right-work-upper .clients p:last-child {
        font-size: .8rem;
        color: #0e0e0e;
    }

    .work-below-left .works-below-image {
        width: 80%;
        height: 400px;
    }

    .work-step {
        display: flex;
        flex-direction: column;
        align-items: start;
    }

    .web-content h3 {
        font-size: 1.3rem;
    }

    .web-content p {
        font-size: .9rem;
        line-height: 1.2rem;
    }

    .right-cta-box {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .locations-box h2 {
        font-size: 1.7rem;
    }

    .locations-box p {
        margin-bottom: 10px;
    }

    .right-locations-box {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .locations-name {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 10px;
    }

    .locations-name a {
        width: 100%;
    }

    .locations-name {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;

    }

    /* pricing service */
    .price-container {
        padding: 0px 10px;
    }

    .pricing-card {
        width: 100%;
    }

    .price-container .pricing-div-container {
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        /* margin-top: 40px; */
        row-gap: 40px;
    }

    .Troubleshooting-container {
        padding: 10px;
    }

    .Troubleshooting-container div h3 {
        font-size: 17px;
    }

    .Troubleshooting-container p {
        font-size: 14px;

        font-weight: 500;
    }



    .Basic-cleaning h4 {
        font-size: 15px;
        margin-top: 8px;
        color: var(--primary-color);
    }

    .Basic-cleaning p {
        font-size: 14px;
        padding: 0px 10px;
        font-weight: 500;
    }

    .chemical-cleanig ul,
    .Basic-cleaning ul {
        font-size: 15px;
    }

    .chemical-cleanig aside {
        width: 100%;
        height: auto;
        padding: 8px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

    .Basic-cleaning aside {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 10px;
    }

    .Basic-cleaning aside div {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 10px 20px;
    }

    .wall-mounted-commer {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

    .chemical-cleanig h2 {
        font-size: 17px;
    }

    .chemical-cleanig h3 {
        font-size: 15px;
    }

    .chemical-cleanig aside {

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

    .chemical-cleanig aside div {

        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 10px 20px;

    }

    .chemical-cleanig h4 {
        font-size: 17px;
        margin-top: 8px;
        color: var(--primary-color);
    }

    .chemical-cleanig p {
        font-size: 14px;
    }

    .chemical-cleanig aside div span {
        font-size: 14px;
    }

    /* Service Section */

    #service-content-i {
        display: flex;
        flex-direction: column;
        padding: 10px;
        gap: 30px;
    }

    #service-content-i .table-of-content-container {
        width: 100%;
        position: static;
    }

    #service-content-i .table-of-content-container h3 {
        font-size: 16px;
        padding: 15px;
    }

    .content-of-container {
        width: 100%;
        height: auto;
        font-family: 'Roboto', sans-serif;
    }

    .content-of-container h1 {
        font-size: 20px;
    }

    .content-of-container p {
        font-size: 16px;
        text-align: justify;
        line-height: 1.35;
    }

    .content-of-container h2 {
        font-weight: 800;
        font-size: 20px;
        line-height: 1.5;
    }

    .content-of-container h3 {
        font-size: 18px;
        font-weight: 700;
        line-height: 1.2;
    }

    .content-of-container ul {
        font-size: 16px;
        text-align: justify;
        line-height: 1.35;
        padding-left: 20px;
        padding-right: 0px;
    }

    .container-cta {
        padding: 10px;
    }

    /* Service CTA section */

    .service-cta {
        padding: 20px;
    }

    .service-cta .service-cta-div {
        gap: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
    }

    .service-cta .service-cta-div .left-side {
        width: 100%;
        height: auto;
        /* border: 1px solid; */
    }

    .service-cta .service-cta-div .left-side h2 {
        font-size: 24px;
    }

    .service-cta .service-cta-div .right-side {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column-reverse;
        justify-content: start;
        align-items: start;
        gap: 10px;
        /* border: 1px solid; */
    }

    .service-cta .service-cta-div .right-side .btn-div {
        gap: 5px;
    }

    .service-cta .service-cta-div .right-side .btn-div button:nth-child(1) {
        padding: 16px 10px;
        font-size: 17px;
    }

    .service-cta .service-cta-div .right-side .btn-div button:nth-child(2),
    .service-cta .service-cta-div .right-side .btn-div button:nth-child(3) {
        width: 50px;
        height: 50px;
        display: none;
    }

    .service-cta .service-cta-div img {
        position: absolute;
        width: 120px;
        top: 50px;

        right: 0px;
        display: none;
    }

    .service-cta .service-cta-div .right-side p {
        font-size: 15px;
        width: 100%;
        max-width: 100%;
    }


    /* Pricing */

    .pricing-section {
        width: 100%;
        height: auto;
        padding: 20px 10px;
    }

    .parent-res-and-com {
        height: 234vh;
    }

    .pricing-section .btn-div {
        gap: 10px;
        margin-bottom: 20px;
    }

    .pricing-section .btn-div button {
        padding: 14px 10px;
        font-size: 14px;
        font-weight: 600;
    }

    .residential-wall-mount-sec .right-side {
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        justify-content: center;
        align-items: center;
        gap: 20px;

    }

    .content-div {
        padding: 10px;
    }

    .content-div h4 {
        font-size: 15px;
        margin-top: 0px;
    }

    .content-div h2 {
        font-size: 22px;

    }

    .content-div .h2 {
        font-size: 19px;

    }

    .content-div p {
        font-size: 16px;
        text-align: justify;
        line-height: 1.35;
    }

    .content-div h3 {
        font-size: 20px;
    }

    .content-div h3 {
        font-size: 18px;
        margin-top: 10px;
    }

    .content-div ul {
        font-size: 16px;
        text-align: left;
        line-height: 1.35;
        padding-left: 20px;
        padding-right: 0px;
    }

    /* Why-choose */

    .why-Choose-us {
        padding: 20px 10px;
    }

    .left-side-ins-sec h1 {
        font-size: 25px;
    }

    .why-Choose-us .left-side-sec ul {
        margin-top: 16px;
        gap: 17px;

    }

    .why-Choose-us .left-side-sec ul li h4 {
        font-size: 19px;
    }

    .why-Choose-us .left-side-sec ul li p {
        font-size: 16px;
        text-align: justify;
        line-height: 1.35;
    }

    .why-Choose-us .left-side-sec ul li img {
        width: 30px;
        height: 30px;
    }

    .button-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding: 10px;
    }

    .service-button {
        padding: 10px;
        font-size: 14px;
    }

    /*  */


    .faq-image-box-2 {
        height: 400px;
        padding: 0px;
        filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.678));
    }

    .faqs-box-2 {
        padding-bottom: 0px;
    }

    /* Resdential */

    #hero-banner {
        min-height: 800px;
    }

    .residentcial-section .form-container {
        width: 100%;
    }

    .form-container {
        width: 100%;
    }

    /* Resdencial service */

    #Res-about-sec {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: start;
        padding: 0px 10px;
    }

    #Res-about-sec .left-side-sec {
        width: 100%;
        margin-bottom: 20px;
    }

    #Res-about-sec .right-side-sec {
        width: 100%;
        height: 100%;
    }

    #Res-about-sec .right-side-sec button {
        width: 100%;
        font-size: 16px;
        font-weight: 800;
    }

    .residentcial-section .hero-content h1 {
        font-size: 35px;
    }

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

    .res-btn-sec {
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: start;
        gap: 10px;
    }

    .residentcial-section .hero-content .res-btn-sec button {
        padding: 14px;
        font-size: 18px;
    }


    .residentcial-section .form-container {
        width: 100%;
    }

    #Res-about-sec {
        padding: 10px;
    }

    #Res-about-sec .left-side-sec .div-img {
        width: 100%;
        height: 60vh;
        position: relative;

    }

    #Res-about-sec .right-side-sec h2 {
        font-size: 25px;
    }

    #Res-about-sec .right-side-sec h3 {
        font-size: 22px;
    }

    #Res-about-sec .right-side-sec p {
        font-size: 18px;
        line-height: 1.5;
        margin-bottom: 10px;
    }

    .res-service-sec {
        padding: 20px 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-self: flex-start;
    }

    .res-service-sec .left-side {
        width: 100%;
        position: static;
        text-align: center;
        padding: 0px;
    }

    .res-service-sec .left-side h2 {
        font-size: 25px;
        line-height: 28px;
    }

    .res-service-sec .left-side ul {
        display: flex;
        justify-content: center;
        margin-bottom: 10px;
    }

    .res-service-sec .left-side ul li {
        display: flex;
        justify-content: start;
        align-items: center;
        font-size: 18px;
        letter-spacing: 0.04rem;
    }

    .res-service-sec .left-side p {
        font-size: 16px;
    }

    .res-service-sec .right-side {
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
        padding: 0px 0px;
    }

    .why-Choose-us {
        padding: 10px;
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: start;
    }

    .why-Choose-us .left-side-sec h1 {
        font-size: 25px;
    }

    .why-Choose-us .left-side-sec {
        width: 100%;
    }

    .why-Choose-us .right-side-sec .imges-div {
        display: none;
    }

    .why-choose-end h1 {
        padding: 10px;
        font-size: 20px;
    }

    .button-container {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        /* 5 buttons per row */
        gap: 10px;
    }

    .service-button {
        font-size: 16px;
    }

    /* location page */

    main {
        padding: 0px 10px;
    }

    main h2 {
        margin-top: 25px;
    }

    .second-main .service-card-list-container {
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 30px;
        margin-bottom: 30px;
    }





    /* footer */

    footer {
        padding: 10px 20px;
    }

    .footer-text {
        max-width: 80%;
    }

    .footer-title {
        text-align: left;
    }

    .footer-links {
        display: flex;
        justify-content: start;
        align-items: center;
    }

    .footer-contact {
        margin-left: 0px;
    }

    .contact-title {
        text-align: left;
        margin-left: 0px;
    }


    .why-choose-end h3 {
        font-size: 18px;
        padding: 0px 10px;
    }


}

@media (max-width: 375px) {
    .pricing-card {
        width: 100%;
        margin: 0px;
    }

    .container-cta {
        padding: 10px;
    }
}


@media (max-width:540px){
    #subtitle{
        display: none !important;
    }
    
    #res-btn-sec{
        display: none !important;
    }
}