@media (max-width: 117.25em) {
    

    .hero-container {
        justify-items: center;
    }

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

    .orb-item-1,
    .orb-item-2,
    .orb-item-3,
    .orb-item-4 {
        align-self: center;
        justify-content: center;
        margin: 0 auto;
    }

    .orb-item-3 {
        background-color: #869154;
    }

    .orb-item-4 {
        background-color: #d7b877;
    }
}


@media (max-width: 75em) {

    .hero-balls {
        width: 40rem;
    }

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

    .z-container {
        row-gap: 4.8rem;
    }

    .z-item {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2.4rem;
        align-items: center;
        justify-items: center;
    }

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

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

    .benefits-item-box-2 {
        height: 100%;
    }

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


    @media (max-width: 56.25em) {

        .header-nav {
            display: none;
        }

        .open-nav {
            display: block;
        }



        .parallax1 {
            background-position: 25%;
        }

        .z-img {
            width: 80%;
        }

        .benefits-item {
            width: 50rem;
        }

        .parallax3 {
            background-position: 40%;
        }

        .testimonial-quote {
            width: 5rem;
        }

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

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

@media (max-width: 47em) {


    .page-salt-img {
        max-width: 50rem;
    }

}

@media (max-width: 37.5em) {

    .page-salt-img {
        max-width: 27rem;
    }

    .hero-container {
        padding-left: 2.4rem;
    }

    .hero-balls {
        width: 30rem;
        bottom: -5%;
    }

    .hero-header {
        font-size: 4.8rem;
        color: #fff;
    }
    
    .hero-caption {
        font-size: 3.6rem;
        color: #fff;
    }

    .about-img {
        width: 100%;
    }

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


    .qual-img {
        width: 90%;
    }

    .orbs-container {
        row-gap: 0;
    }

    .orb-item {
        height: 100%;
        border-radius: 0%;
        width: 100%;
    }

    .benefits-item {
        width: 100%;
    }

    .cta-text-box {
        padding: 0;
    }

    .chakra-orbs {
        padding: 9.6rem 1.2rem 4.8rem;
        background-color: #fff;
    }

    .chakra-orbs-item {
        width: 100%;
        height: 100%;
        border-radius: 0%;
        padding: 2.4rem 0.6rem;
        justify-self: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2.4rem;
    }

    .animal-img-box {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 2.4rem;
        align-items: center;
        justify-items: center;
    }

    .page-img {
        width: 90%;
    }

}