/* smaller desktops */
@media (max-width:1350px){
    .header{
        max-width:120rem;
    }
    .heading-primary{
        font-size:4.4rem
    }
    .gallery{
        grid-template-columns:repeat(2,1fr);
    }
}
/* below 1200px (landscape tablets) */
@media (max-width:1200px){
    html{
        font-size:56.25% /* 9px=1rem */
    }
    .grid{
        column-gap:4.8rem;
        row-gap:6.4rem;  
    }
    .heading-secondary{
        font-size:3.6rem;
    }
    .heading-tertiary{
        font-size:2.4rem;
    }
    .header-class{
        padding:0 3.2rem;
    }
    .header{
        gap:4.8rem;
    }
    .main-nav-list{
        gap:3.2rem;
    }
    .testimonials-container{
        padding:9.6rem 3.2rem;
    }
}
/* below 900px (tablets) */
@media(max-width:900px){
    html{
        font-size:50%;
    }
    .section-header{
        margin-top:80px;
    }
    .header{
        grid-template-columns:1fr;
        padding:0 8rem;
        gap:6.4rem;
    }
    .header-img{
        width:60%;
    }
    .header-text-box{
        text-align:center;
    }
    .header-img-box{
        text-align:center;
    }
    .delivered-meals{
        justify-content:center;
        margin-top:3.2rem;
    }
    .feature-logos-container 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;
    }
    /*MOBILE NAVIGATION*/
    .btn-mobile-nav{
        display:block;
        z-index:100;
    }
    .main-nav{
        background-color:rgba(255,255,255,.8);
        position:absolute;
        top:0;
        left:0;
        height:100vh;
        width:100%;
        display:flex;
        align-items:center;
        justify-content:center;
        transition:all 0.5s;
        opacity:0;
        pointer-events:none;
        visibility:hidden; 
        transform:translateX(100%);
        backdrop-filter:blur(5px);
        -webkit-backdrop-filter:blur(5px)
    }
    .main-nav-list{
        flex-direction: column;
        gap:4.8rem;
    }
    .nav-open .main-nav{
        opacity:1;
        pointer-events:auto;
        visibility:visible;
        transform:translateX(0);
    }
    .nav-open .icon-mobile-nav[name="close-outline"]{
        display:block;
    }
    .nav-open .icon-mobile-nav[name="menu-outline"]{
        display:none;
    }
    
    
    .main-nav-list:link,
    .main-nav-list:visited{
        font-size:3rem;
    }
}
/* smallest tablets */
@media(max-width:700px){
    .grid-3-cols,
    .grid-4-cols{
        grid-template-columns:repeat(2,1fr);
    }
    .diets-div{
        grid-column:1/-1;
        justify-self:center;
    }
    .heading-secondary{
        margin-bottom:4.8rem;
    }
    .pricing-plan{
        width:100%;
    }
    .grid-footer{
        grid-template-columns:repeat(6,1fr);
    }
    .logo-col,
    .address-col{
        grid-column:span 3;
    }
    .nav-col{
        grid-row:1;
        grid-column:span 2;
        margin-bottom:3.2rem;
    }
}
/* below 540px phones */
@media(max-width:540px){
    .grid{
        row-gap:4.8rem;
    }
    .grid-2-cols,
    .grid-3-cols,
    .grid-4-cols{
        grid-template-columns:1fr;
    }
    .header{
        padding:0 3.2rem;
    }
    .section-header{
        padding:2.4rem 0 6.4rem 0;
    }
    .btn,
    .btn:link,
    .btn:visited{
        padding:2.4rem 1.6rem;
    }
    .header-img{
        width:80%;
    }
    .feature-logos-container img{
        height:1.2rem;
    }
    .step-img-box:nth-child(2){
        grid-row:1;
    }
    .step-img-box:nth-child(6){
        grid-row:5;
    }
    .step-img-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-text-box{
        padding:3.2rem;
    }
    .cta-img-box{
        height:32rem;
        grid-row:1;
    }
}