/* BELOW 1333 PX)*/

@media(max-width:84em){


    .hero{

        max-width:  120rem;
    }

    .heading-primary{

        font-size: 4.4rem;
    }

    .gallery{

        grid-template-columns: repeat(2,1fr);
    }
}

/* BELOW 1200PX -> LANDSCAPE TABLETS */

@media(max-width:75em){

    html{

        font-size: 50.25%;
    }

    .heading-secondary{

        font-size: 3.6rem;
    }

    .heading-tertiary{

        font-size: 2.4rem;
    }

    .grid{

        column-gap: 4.8rem;
        row-gap: 6.4rem;
    }

    .header{

        padding: 0 3.2rem;
    }

    .hero{

        gap:4.8rem;
    }

    .main-nav-list{

        gap:3.2rem;
    }

    .testimonials-container{

        padding: 9.6rem 3.2rem;
    }

}

/* BELOW 944 PX  (TABLETS */

@media(max-width:59em){

    html{

        font-size: 56.25%;
    }

    .hero{

        grid-template-columns: 1fr;
        padding: 0 8rem;
        gap: 6.4rem;
    }
    .hero-text-box{

        text-align: center;
    }

    .hero-img-box{

        text-align: center;
    }

    .hero-img{

        width:50%;
    }

    .delivered-meals{

        justify-content: center;
        margin-top: 3.2rem;
    }

    .logos img{

        height: 2.4rem;
    }

    .step-number{

        font-size: 7.4rem;
    }

    .meal-content{
        padding: 2.4rem 3.2rem 3.2rem 3.2rem;
    }

    .section-testimonials{

        grid-template-columns: 1fr;
    }

    .gallery{

        grid-template-columns: repeat(6,1fr);
    }

    .cta{

        grid-template-columns: 3fr,2fr;
    }

    .cta-form{

        grid-template-columns: 1fr;
    }

    .btn-form{

        margin-top:1.2rem;
    }

    .btn-mobile-nav{

        display:block;

    }

    .main-nav{

        position:absolute;
        top:0;
        left:0;
        background-color: rgba(255, 255, 255, 0.827);
        backdrop-filter: blur(10px);
        width:100%;
        height:100vh;
        display:flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: all 0.5s;
        pointer-events:none;
        visibility: hidden;
        transform: translateX(100%);

    }

    .main-nav-list{

        flex-direction: column;
        gap:4.8rem;
    }

    .main-nav-link:link,
    .main-nav-link:visited{

        font-size: 3rem;


    }

    .nav-open .main-nav{

        opacity: 1;
        pointer-events: auto;
        visibility: visible;
        transform: translateX(0);
    

    }
    .nav-open .icon-mobile-nav[name="close-outline"]{

        display:block;
        z-index: 9999;
    }

    .nav-open .icon-mobile-nav[name="menu-outline"]{

        display: none;
    }

}

/*BELOW 704 PX */

@media(max-width:46em){


    .grid--3-cols,
    .grid--4-cols{

        grid-template-columns: repeat(2,1fr)
    }

    html{

        font-size: 45%;
        
    }

    .diets{

        grid-column: 1/-1;
        justify-self: center;
    }

    .pricing-plan{

        width: 100%;
    
    }


    .grid--footer-cols{

        grid-template-columns: repeat(6,1fr);
    }

    .nav-col{

        grid-column: span 2;
        grid-row: 1;
    }

    .logo-col,address-col{

        grid-column: span 3;
       
    }
}

@media(max-width:34em){

    .grid--3-cols,
    .grid--4-cols,
    .grid--2-cols{

        row-gap: 4.8rem;
        grid-template-columns: 1fr;
    }


    .hero{

        padding: 0 3.2rem;
    }

    .section-hero{

        padding: 2.4rem 0 4.8rem 0;
    }

    .btn,
    .btn:link,
    .btn:visited{

        padding: 2.4rem 1.2rem;
    }

    .hero-img{

        width:80%;
    }

    .logos img{

        height: 1.2rem;
    }

    .step-image-box:nth-child(2){

        grid-row: 1;
    }

    .step-image-box:nth-child(6){

        grid-row: 5;
    }

    .step-image-box{

        transform:translateY(2.4rem);
    }

    .testimonials{

        grid-template-columns: 1fr;
    }

    .gallery{

        grid-template-columns: repeat(4,1fr);
        gap:1.2rem;
    }

    .cta{

        grid-template-columns: 1fr;
    }

    .cta-img-box{

        height: 60rem;
        grid-row: 1;
    }

    .cta-text-box{

        font-size: 3.2rem;
    }

    html{

        font-size: 25%;
    }

    

}