@media (max-width: 68.75em) {

    .about-container {
        grid-template-columns: 1fr;
        row-gap: 4.8rem;
    }

    .services-text {
        font-size: 2.4rem;
    }

    .z-item {
        grid-template-columns: 1fr;
    }

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

    .z-text-box {
        max-width: 70rem;
    }

    .z-img {
        align-self: center;
        justify-self: center;
    }

    .quad-container {
        grid-template-columns: 1fr 1fr;
    }

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

    .parallax2 {
        background-position: center;
    }

    .open-nav {
        display: block;
    }

    .header-nav {
        display: none;
    }

}

@media (max-width: 50em) {

    .services-container {
        display: grid;
        grid-template-columns: 1fr;
        align-items: center;
        justify-items: center;
        row-gap: 3.6rem;
    }

    .services-item {
        height: auto;
        gap: 2.4rem;
    }

    .header {
        padding: 1.2rem 0.6rem;
    }

    .cta-container {
        grid-template-columns: 1fr;
    }

    .quad-container {
        grid-template-columns: 1fr;
    }

    .pt-container {
        grid-template-columns: 1fr;
    }

    .parallax1 {
        background-position: center;
    }

}

@media (max-width: 40em) {

    .about-img,
    .z-img {
        width: 100%;
    }

    .logo {
        display: none;
    }

    .logo-mob {
        display: block;
    }

    .hero {
        background-position-x: center;
    }

}

@media (max-width: 31.25em) {

    .email-text,
    .footer-details {
        font-size: 1.6rem
    }

    .logo {
        font-size: 2.4rem;
    }

    .header-link {
        font-size: 2.4rem;
    }



    .hero-header {
        font-size: 4.4rem;
        background-color: rgba(51, 51, 51, 0.41);
    }

    .hero-caption {
        font-size: 2.4rem;
        background-color: rgba(51, 51, 51, 0.41);
    }

    .about {
        text-align: center;
    }

}