@media (max-width:1200px){
    html{
        font-size: 56.25%;
    }

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

    .header-nav{
        padding: 0 2.2rem;
    }

    .main-nav-list{
        gap: 3.2rem;
    }

    .hero{
        gap:4.8rem;
    }
}

@media (max-width:948px){
    html{
        font-size: 50%;
    }

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

    .hero-img{
        width:60%;
        margin: 0 auto;
    }

    .hero-text-box,.hero-img-box{
        text-align: center;
    }

    .hero-text-box{
        padding: 0 8rem;
    }

    .delivered-meals{
        justify-content: center;
        margin-top: 4rem;
        margin-bottom: 5rem;
    }

    .logos img{
        height: 2.4rem;
    }

    .step-number{
        font-size: 6.4rem;
    }

    .meal-content {
        padding: 2.4rem 2.8rem 4.8rem 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 {
        padding: 1.8rem;
        margin-top: 2rem;
    }

    .btn-mobile-nav{
        display: block; 
    }

    .main-nav{
        background-color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.5s ease-in;
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
        transform: translateX(100%);
    }

    .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{
        flex-direction: column;
        gap: 4.8rem;
    }

    .main-nav-link:link,
    .main-nav-link:visited{
        font-size: 3rem;
}
}


@media (max-width:781px){
    html{
        font-size: 45.5%;
    }

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

    .section-meals .container{
        grid-template-columns: repeat(2,1fr);
        padding: 0 6.6rem;
    }

    .diets{
        grid-column: 1 / -1;
        justify-self: center;
    }

    .pricing-plan{
        width: 100%;
    }

    .pricing-plan-complete::after {
        top: 7%;
        right: -16%;
    }

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

    .logo-col{
        /* grid-row: 2; */
        grid-column: span 3;
    }

    .address-col{
        /* grid-row: 2; */
        grid-column: span 3;
    }

    .nav-col{
        grid-row: 1;
        grid-column: span 2;
        margin-bottom: 4rem;
    }

    .footer-link{
        display: block;
    }
    
}

@media (max-width:529px){
    html{
        font-size: 40%;
    }

    .section-hero{
        padding: 3rem 0;
    }

    .section-meals .container {
        grid-template-columns: repeat(2,1fr);
        padding: 0px 5.6rem;
    }

     .grid--2--cols,
     .grid--3--cols{
        grid-template-columns: 1fr;
     }

     .btn{
        margin-bottom: 1.5rem;
     }

     .meal-card{
        grid-template-columns: 1fr !important;
     }

     .hero-text-box{
        padding: 0 1rem;
     }

     .step-img{
        width: 25%;
     }

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

     .gallery{
        grid-template-columns: repeat(4, 1fr);
        gap: 0.7rem;
     }

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

     .logos img{
        height: 2rem;
     }

     .hero-img{
        width: 60%;
     }

     .hero{
        gap:1.5rem;
     }

     .step-img-box:nth-child(2){
        grid-row: 1;
     }

     .step-img-box:nth-child(6){
        grid-row: 5;
     }

     .step-img-box::before {
        width: 48%;
        height: 85%;
        background-color: #fdf9e9;
        z-index: -1;
    }

    .step-img-box::after {
        width: 37%;
        height: 65%;
        background-color: #fae5d3;
        z-index: -1;
    }

    .step-img-box{
        transform: translateY(4rem);
    }

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

    .cta-img-box{
        height: 46rem;
        grid-row: 1;
    }

    .cta-text-box {
        padding: 3.8rem 3.4rem 6.4rem 3.4rem;
        color: #45260a;
    }

    .btn-mobile-nav{
        display: block;
        z-index: 9999;
    }
}