@media (max-width: 53.75em) {

    .navMenuIcon {
        display: block;
    }

    .navBox {
        display: none;
    }


}

@media (max-width: 87.5em) {

    .quadContainer {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

}

@media (max-width: 72em) {

.projectsItemOne {
    grid-template-columns: 1fr;
}

.projectsImg {
    max-width: 80rem;
    align-self: center;
    justify-self: center;
}

.imgToFirstFR {
    grid-row: 1/2;
}

}

@media (max-width: 68.75em) {

    .instructLower::before,
    .instructLower::after {
        display: none;
    }

}

@media (max-width: 66em) {

    .aboutLowerBox,
    .aboutUpper {
        grid-template-columns: 1fr;
    }

    .aboutLeft,
    .aboutRight,
    .aboutImage {
        width: 100%;
        max-width: 80rem;
        justify-self: center;
    }

    .instructUpper {
        flex-direction: column;
        gap: 1.2rem;
    }

}

@media (max-width: 65.5em) {

    html {
        font-size: 60%;
    }

    .navLogo {
        width: 15rem;
    }

    .navbar {
        gap: 1.2rem;
    }

    .navBox {
        padding: 0.6rem;
    }

    .navLinksList {
        gap: 1rem;
    }
    
    .heroBox {
        flex-direction: column;
    }

    .heroImgContainer {
        display: none;
    }

    .heroImgContainer::before {
        display: none;
    }

    .heroTextContainer {
        width: 100%;
    }


    /* .hero::after {
        height: 50%;
    } */

    .hero {
        min-height: 50vh;
    }

    .about {
        padding-top: 6rem;
    }

    .cardsContainer {
        flex-direction: column;
    }

    .spacer {
        height: 12rem;
    }


}

@media (max-width: 56.25em) {

    .introContainer {
        grid-template-columns: 1fr;
    }

    .introTextBox {
        border-bottom: 3px solid #fff;
        padding-bottom: 2.4rem;
    }

    .introHeader {
        font-size: 3rem;
    }

}

@media (max-width: 53em) {

    .chooseUsItems {
        grid-template-columns: 1fr;
    }

    .chooseUsImgBox {
        display: none;
    }

    .chooseUsTextBox {
        gap: 3rem;
    }

    .footer-container {
        grid-template-columns: 1fr;
        row-gap: 2.4rem;
    }

    .footer-item {
        gap: 0.6rem;
    }



}

@media (max-width: 43.75em) {

    .locationsFolder {
        grid-template-columns: 1fr 1fr;
    }

}

@media (max-width: 40.6em) {

    .instructLower {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .instructItem {
        margin-right: -4rem;
    }

    .instructText {
        font-size: 1.8rem;
    }

    .spacer {
        height: 8rem;
    }

    .quadContainer {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 29.5em) {

    .industryArticlesFolder {
        grid-template-columns: 1fr;
    }


}

@media (max-width: 29.5em) {

    html {
        font-size: 50%;
    }

    .heroTextBoxes {
        width: 100%;
    }

}