@media(max-width: 84em){
    .hero{
        max-width: 120rem;

    }
    .heading-primary{
       font-size: 4.4rem; 
    }
    .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;
    }

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


@media(max-width: 75em){
html{
    font-size:56.25%;
}
.grid{
    column-gap: 4.8rem;
    row-gap: 6.4rem;
}
.heading-secondry{
    font-size: 3.6rem;
}
.heading-tertiary{
font-size: 2.4rem;
}
.header{
    padding: 0 3.2rem;
}
.hero{
    gap: 4.8rem;
}
.main-nav-list{
gap: 3.2rem;
}
.testimonials-container{
 padding: 9.6rem 3.2rem;

}

}

@media(max-width: 59em){
html{
    font-size: 50%;
}
.hero{
    grid-template-columns: 1fr;
    padding: 0 8rem;
    gap: 6.4;
}


  .btn-mobile-nav{
        display: block;
    }
    .main-nav{
        background-color: rgb(255, 255, 255, 0.97);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh ;
        transform: translateX(100%);
        display: flex;
        align-items: center;
        justify-content: center;
        /* display: none; */
        opacity: 0;
        transition: all 0.5s ease-out;
        pointer-events: none;
        visibility: hidden;
    }

    .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;   
}

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

.hero-img{
    width: 60%;
   
}
.delivered-meals{
    justify-content: center;
    margin-top: 3.2rem;
}
.logos img{
    height: 2.4rem;
}
.step-num{
    font-size:7.4rem ;
}
.meal-content {
  padding: 2.4rem 3.2rem 3.2rem 3.2rem;
}
.section-testimonials{
grid-template-columns: 1fr;
}

}
/*704px*/
@media(max-width: 44em){
.grid--3-cols,
.grid--4-cols{
grid-template-columns: repeat(2,1fr);
}
.diets{
    grid-column: 1/-1;
    justify-self: center ;
}
.heading-secondry{
   margin-bottom: 4.8rem;

}
.pricing-plan{
    width:100%;
}
.grid--fotter{
    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 ;
}

}
@media(max-width:34em){
.grid{
    row-gap: 4.8rem;
}


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

.btn:link,
.btn,
.btn:visited{
    padding: 2.4rem 1.6rem;
}

.section-hero {
  padding: 2.4rem 0 6.4rem 0;
}


.hero{
    padding: 0 3.2rem;
}
.hero-img{
    width: 80%;
}
.logos 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 {
gap:1.2rem ;
grid-template-columns: repeat(4,1fr);
}
.cta{
    grid-template-columns: 1fr;
}

.cta-text-box{
padding: 3.2rem;
}

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