@media only screen and (max-width:1330px) {

    .grid {
        grid-template-columns: repeat(4, auto);
    }

    .tabsGrid img {
        width: 100%;
    }

    .testimonialSliderText {
        font-size: unset;
    }

    .whatWeDoGrid {
        grid-template-columns: repeat(3, 33%);
    }

    .whatWeDoContainer img {
        width: 100%;
    }

    .servicesGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 20px;
    }
}


@media only screen and (max-width:1170px) {

    #serviceLinks {
        grid-template-columns: repeat(3, 280px);
        grid-gap: 20px;
    }

    #statsGrid {
        display: inline-grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: auto;
    }

    #servicesList {
        grid-template-columns: repeat(2,50%);
    }

    #serviceDetail {
        grid-template-columns: 100%;
        max-width: 800px;
        margin: 40px auto 70px;
    }

    #instagramSection {
        text-align: center;
    }

    #instagramGrid {
        justify-content: center;
    }

    .contentCenter {
        padding: 0 40px;
    }

    header {
        display: none;
    }

    #navContainer {
        justify-content: space-between;
    }

    #navList {
        display: none;
    }

    #mobileNav {
        display: block;
        clear: both;
        width: 100%;
    }

    .logo {
        width: 140px;
        position: absolute;
        z-index: 99999;
        top: 30px;
        left: 60px;
    }
}

@media only screen and (max-width: 1040px) {
    .servicesText {
        max-width: 100%;
    }

    .servicesHeader {
        max-width: 100%;
    }
}

@media only screen and (max-width:960px) {

    .teamGrid {
        grid-template-columns: repeat(2, auto);
    }

    .teamContainer {
        min-height: 500px;
    }

    .teamText {
        margin-top: 400px;
    }

    .roundedButton {
        padding: 10px 15px;
    }

    #blackSectionText {
        width: 70%;
    }

    .gallery-grid {
        grid-template-columns: repeat(3, auto);
    }

    #gallery {
        width: 100%;
    }

    

    #homepageHero {
        padding-bottom: 175px;
    }

        #homepageHero h1 {
            font-size: 3em;
        }

        #homepageHero img {
            margin-top: 100px;
        }

    #homepageFormContainer {
        flex-direction: column;
    }

    #contactSection {
        margin-top: 0px;
    }

    #contactForm {
        width: unset;
    }

    #serviceLinks {
        width: 100%;
        margin: 50px auto;
        grid-gap: 20px;
    }

        #serviceLinks > div {
        }

    #statsGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

        #statsGrid > div {
            border-bottom: 1px solid #d8bf56;
        }

            #statsGrid > div:last-child {
                grid-column: span 2;
                border-bottom: none;
            }

    #testimonialGrid {
        grid-template-columns: 100%;
        grid-column-gap: 0;
        max-width: 650px;
        margin: 0 auto;
    }

    .footerContainer {
        padding: 30px;
    }

    #servicesGridLower {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

}

@media only screen and (max-width:900px) {
    #whyChooseUsRow {
        flex-direction: column;
    }

        #whyChooseUsRow > img {
            width: 100%;
            margin-bottom: 20px;
        }

    .servicesGrid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
        row-gap: 20px;
    }

    #footerRow {
        justify-content: center;
    }

    .galleryHolder {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .clientsGrid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media only screen and (max-width:800px) {
    .brochureRow {
        grid-template-columns: repeat(1, 100%);
    }

        .brochureRow .textRight h2 {
            font-size: 25px;
        }

        .brochureRow .textLeft h2 {
            font-size: 25px;
        }

    .interiorRow {
        flex-direction: column;
    }

    .aboutText {
        width: 100%;
    }

    .interiorImg {
        width: 100%;
        min-width: unset;
    }
}

@media only screen and (max-width:760px) {
    .grid {
        grid-template-columns: repeat(2, 50%);
    }

    .gallery-grid {
        grid-template-columns: repeat(2, auto);
    }


    .howWeWorkGrid, .whatWeDoGrid {
        grid-template-columns: repeat(1, auto);
    }

    #aboutTop {
        flex-direction: column;
    }

    #controls {
        margin-top: 20px;
    }

    .testimonials {
        width: 100%;
    }

    .testimonialSlider {
        max-width: 1000px;
        margin: 0 auto;
        position: relative;
    }

    .videoThumb {
        width: 100%;
    }



    #contactSection {
        grid-row: unset;
        grid-column: unset;
    }

    #footerLogo {
        max-width: 300px;
        margin: 0 auto;
        display: block;
    }

    #subscribeForm {
        display: inline-block;
        overflow: auto;
        float: none;
    }

        #subscribeForm input {
            width: 400px;
        }

    .testimonialSliderElement {
        grid-template-columns: 100px auto;
    }

    .testimonialSliderText {
        padding: 0;
    }

    #mapSection iframe {
        height: 460px;
    }

    #footerFacebook {
        justify-content: center;
        margin: 20px 0;
    }

    #footerEnd span {
        padding: 10px;
    }

    #footerEnd a {
        padding: 10px;
    }
}

@media only screen and (max-width:690px) {

    .accreditationsContainer {
        flex-wrap: wrap;
        justify-content: center;
    }

    #blackRow {
        flex-direction: column;
        text-align: center;
    }

    .roundedButton {
        margin: auto;
        margin-top: 10px;
    }

    #blackSectionText {
        width: 100%;
    }
}

@media only screen and (max-width:620px) {
    #statsGrid {
        grid-template-columns: repeat(2, 50%);
        width: 100%;
    }

    #servicesList {
        grid-template-columns: 100%;
    }

    #subscribeForm {
        width: 100%;
    }

        #subscribeForm input {
            width: 100%;
        }

        #subscribeForm button {
            width: 100%;
        }

    #imageGrid {
        display: none;
    }

    .testimonialSliderElement {
        grid-template-columns: auto;
        padding: 0 45px;
    }

    .testimonialSliderText {
    }

        .testimonialSliderText h3::before {
            width: 14px;
            margin: 13px 8px 0 0;
        }

    #blog {
        margin: 60px 40px;
        width: auto;
    }

    .testimonials h1, .testimonials h2 {
        margin-left: 40px;
    }

    .formGoldBar img {
        margin-right: 10px;
    }

    .textRight {
        margin-left: 0px;
    }

    .galleryHolder {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

@media only screen and (max-width:550px) {
    #homepageHero h1 {
        font-size: 2em;
    }

        h1 span {
            font-size: 55px;
        }

    #homepageHero h2 {
        font-size: 18px;
    }

    .projectsGrid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
        width: 100%;
    }
}

@media only screen and (max-width:480px) {

    .contentCenter {
        padding: 0 15px;
    }

    .aboutLink {
        width: 145px;
    }

    .teamGrid {
        grid-template-columns: repeat(1, auto);
    }

    .grid {
        grid-template-columns: repeat(1, 100%);
    }

    #homepageHero h1 {
        font-size: 2em;
    }

    #testimonialGrid > div {
        grid-template-columns: 60px auto;
    }

        #testimonialGrid > div > img {
            width: 100%;
        }

    h1 {
        font-size: 1.7em;
    }

    #footerEnd {
        padding: 20px;
        flex-direction: column;
        text-align: center;
        justify-content: center;
    }

        #footerEnd span::after {
            content: none;
        }

    .logo {
        width: 140px;
        position: absolute;
        z-index: 99999;
        top: 30px;
        left: 30px;
    }
}
