@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) {

.heroBox {
    justify-content: center;
    padding: 0 1rem;
}

.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 {
        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;
    }
    

    .about {
        padding-top: 4.8rem;
    }

    .cardsContainer {
        flex-direction: column;
    }

    .spacer {
        height: 12rem;
    }


}

@media (max-width: 53em) {

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

    .chooseUsImgBox {
        max-width: 60rem;
        height: 100%;
        align-self: center;
        justify-self: center;
    }

    .chooseUsTextBox {
        gap: 3rem;
    }

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

    .footer-item {
        gap: 0.6rem;
    }



}

@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: 31.5em) {

    .heroHeader {
        text-align: center;
    }

}

@media (max-width: 29.5em) {

    html {
        font-size: 50%;
    }

}