@media (max-width: 1200px) {

    .contactInner1,
    .contactInner2,
    .contact hr {
        width: 80%;
    }
}

@media (max-width: 900px) {
    .masonry {
        column-count: 2;
    }

    .contactUs {
        height: auto;
        flex-direction: column;
    }

    .contactContent {
        width: 100%;
    }

    .contactBanner {
        display: none;
    }

    .galleryMasonry {
        column-count: 3;
    }

    .contactInner1,
    .contactInner2,
    .contact hr {
        width: 100%;
    }

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

    .founderImg {
        width: 260px;
        height: 300px;
    }
}

@media (max-width: 850px) {
    .heroContent {
        width: 55%;
    }
}

@media (max-width: 768px) {
    .nav-list {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: start;
        padding-top: 50px;
        width: 100%;
        height: calc(100vh - 65px);
        gap: 15px;
        position: absolute;
        top: 65px;
        left: -100%;
        background-color: #ffffff;
        z-index: 1000;
        transition: left 0.3s ease;
    }

    .nav-list.active {
        left: 0;
    }

    .nav-link {
        font-size: 20px;
        padding: 10px;
        text-align: left;
        color: #231F20;
        width: 300px;
        display: block;
        border-bottom: 1px solid #231F20;
        background-color: #f0eeee;
    }

    .nav-link:hover,
    .currentPage {
        background-color: #231F20;
        color: #ffffff;
    }

    .icon-menu {
        display: flex;
    }

    .footer-nav-list {
        display: none;
    }

    .footer-contact-list {
        font-size: .7rem;
    }

    .footer-section-2 p {
        font-size: .8rem;
    }

    .hero {
        max-height: calc(100dvh - 65px);
    }

    .heroContent {
        height: 60%;
        width: 100%;
    }

    .heroContentInner {
        gap: 5px;
    }

    .heroImg {
        height: 40%;
        width: 100%;
    }

    .heroContentInner h1 {
        font-size: 2rem;
    }

    .heroContentInner p {
        font-size: 1rem;
    }

    .hero {
        flex-direction: column;
    }

    .universalHead {
        font-size: 2rem;
    }

    .universalP {
        font-size: .9rem;
    }

    .homeServiceCard,
    .testimonialsCard {
        box-shadow: 5px 5px 0px 0px #555;
    }

    .serviceCard,
    .serviceCard:nth-child(even) {
        flex-direction: column-reverse;
        width: 100%;
        height: 600px;
    }

    .serviceCardInner1 {
        width: 100%;
        height: 45%;
    }

    .serviceCardInner1 i {
        font-size: 3rem;
    }

    .serviceCardInner1 h2 {
        font-size: 1.5rem;
    }

    .serviceCardInner1 p {
        font-size: 1rem;
    }

    .serviceCardInner2 {
        width: 100%;
        height: 55%;
        background-color: #ffffff;
    }

    .services {
        padding: 0 20px;
    }

    .contactInfoOuter {
        flex-direction: column;
        gap: 15px;
    }
}

@media (max-width: 600px) {
    .masonry {
        column-count: 2;
    }

    .universalHead {
        font-size: 1.8rem;
    }

    .universalP {
        font-size: .9rem;
    }

    .galleryMasonry {
        column-count: 2;
    }

    .gallery {
        padding: 40px 20px;
    }
}

@media (max-width: 495px) {
    .footer-contact-list {
        font-size: .6rem;
    }

    .contactContent {
        padding: 70px 20px;
    }

    .contact {
        padding: 70px 20px;
    }
}

@media (max-width: 385px) {
    .footer-logo {
        height: 50px;
    }

    .testimonialsCard {
        width: 300px;
        height: 300px;
    }

    .rating {
        font-size: 1.5rem;
    }

    .testimonialDetails {
        gap: 5px;
    }

    .review {
        font-size: .9rem;
    }

    .testimonialDetails img {
        width: 40px;
        height: 40px;
    }

    .reviewName {
        font-size: .9rem;
    }

    .reviewPosition {
        font-size: 0.7rem;
    }
}