@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700;800;900&display=swap');

@import url("./sections/counter.css");
@import url("./sections/about.css");
@import url("./sections/services-choose-us-client.css");
@import url("./sections/gallery.css");
@import url("./sections/contact-us.css");
@import url("./sections/footer.css");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    font-family: 'Montserrat', sans-serif;
}

body::-webkit-scrollbar {
    display: block;
    width: 8px;
    background-color: #f5f5f5;
}

body::-webkit-scrollbar-thumb {
    background-color: #035391;
    border-radius: 50px;
}


body,
html {
    font-size: 62.5%;
    /* 10rem */
    scroll-behavior: smooth;
    overflow-x: hidden;
}

a {
    text-decoration: none;
}

li {
    list-style: none;
}

/* Reusable code start*/
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between
}

/* common heading for service, gallery, and review sections */
.common-heading {
    text-align: center;
    font-size: 4rem;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    color: #2d2e32;
    margin: 4rem 0;
}

.common-heading span {
    color: #035391;
}

/* Reusable code end */

/* margin-top for every page when the header become fixed */
.page.fixed-top {
    margin-top: 8rem;
}

/* START: counter media queries */
@media screen and (max-width:900px) {
    .work-overview {
        flex-direction: column;
        gap: 5rem;
    }
}

@media screen and (max-width:400px) {
    .counter .container {
        padding: 4rem 1.7rem;
    }

    .box {
        flex-direction: column;
        gap: .8rem;
    }
}

/* END: counter media queries */

/* START: about media queries */
@media screen and (max-width:1020px) {

    .about {
        height: auto;
    }

    .about .container {
        padding: 8rem 4rem;
        text-align: center;
    }

    .about-content {
        flex-direction: column;
    }

}

@media screen and (max-width:600px) {

    .about .container {
        padding: 8rem 1.7rem;
    }

    .about .container h2 {
        font-size: 3rem;
    }

    .about-content-image-side img {
        width: 100%;
    }
}

/* END: about media queries */

/* START: About page media queries */
@media screen and (max-width:600px) {
    .profile-section .container {
        padding: 4rem 1.7rem;
    }
}

@media screen and (max-width:358px) {
    .owner-image {
        width: 100%;
    }

    .owner-image img {
        width: 100%;
    }
}

/* END: About page media queries */

/* START: services, gallery, and choose-us media  and client container queries */
@media screen and (max-width:600px) {

    .services .container,
    .gallery .container,
    .choose-us .container,
    .client .container {
        padding: 4rem 1.7rem 4rem;
    }

    .common-heading {
        font-size: 3rem;
    }

    .choose-us .facilities,
    .services .service-detail,
    .testimonial-box {
        min-width: 100% !important;
    }

}

@media screen and (max-width:330px) {
    .gallery-container>div {
        min-width: 100%;
    }
}

/* END: services, gallery, and choose-us and client container media queries */

/* START: Client media queries */
@media screen and (max-width:768px) {

    .client {
        height: auto;
    }

    .testimonial {
        padding: 0;
    }

    .slide p {
        padding: 0 2rem;
    }

    .nav-btn {
        display: none;
    }
}

/* END: Client media queries */

/* START: Footer media queries */
@media screen and (max-width:906px) {
    .footer-content {
        gap: 5rem;
    }
}

@media screen and (max-width:475px) {
    .footer .container {
        padding: 4rem 1.7rem;
    }

    .f-about {
        flex: 1;
        max-width: 100% !important;
    }

    .f-links,
    .f-services {
        min-width: 12rem !important;
    }

    .f-contact-info {
        min-width: 15rem;
    }
}

/* END: Footer media queries */

/* START: Contact Us media queries */
@media screen and (max-width:600px) {
    .contact .container {
        padding: 5rem 1.7rem;
    }

    .section-contact-main {
        padding: 4rem 1.7rem;
    }
}

@media screen and (max-width:330px) {

    .contact .grid {
        gap: 1.8rem;
    }

    .contact .grid-two-col {
        grid-template-columns: 1fr;
    }
}

/* END: Contact Us media queries */