/* rem and em do NOT depend on thml font-size in media queries 
instead, 1rem=1em=16px */
/*********/
/*Below 1344px (smaller desktops*/
/*********/
@media(max-width:84em){
 .her0{
    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{
    /* px/16px=56.25% */
    font-size: 56.25%;
  }
  .grid{
    column-gap: 4.8rem;
    row-gap: 6.4rem;
  }
  .heading-secondary{
    font-size: 3.6rem;
  }
  .heading-tertiary{
    font-size: 2.4rem;
  }
  .header{
    padding: 0 3.2rem;
  }
  .main-nav-list{
    gap: 3.2rem;
  }
  .hero{
    gap:4.8rem;
  }
  .testimonials-container{
    padding: 9.6rem 3.2rem;
  }
}
/*********/
/*Below 944px (tablets)*/
/*********/
@media(max-width:59em){
    html{
        /* 8px/16px=0.5=50% */
        font-size: 50%;
    }
    .hero{
        grid-template-columns: 1fr;
        padding: 0 8rem;
        gap:6.4rem ;
    }
    .hero-img{
        width:60%;
    }
    .hero-text-box,
    .hero-img-box{
        text-align: center;
    }
    .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;
    }
    /*
     mobile navigation
      */
    .btn-mobile-nav{
      display: block;
      z-index: 9999;
    }
    .main-nav{
      background-color: rgba(255,255,255,0.9);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      transform: translateX(100%);

      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.5s ease-in;

      /* hide the navigation */
      /* allows no transition at all */
      /* display: none; */

      /* hide it visually */
      opacity: 0;
      /*  make it unaccessible to mouse and keyboard */
      pointer-events: none;

      /* hide it from screen raeders */
      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;
    }
}
/*********/
/*Below 700px ( smaller tablets)*/
/*********/
@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-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 544px (Phones)*/
/*********/

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

.grid--2-cols,
.grid--3-cols,
.grid--4-cols{
  grid-template-columns: 1fr;
}
.btn,
.btn:link,
.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{
  grid-template-columns: repeat(4,1fr);
  gap: 1.2rem;
}
.cta{
  grid-template-columns: 1fr;
}
.cta-text-box{
  padding: 3.2rem;
}
.cta-img-box{
  height: 38rem;
  grid-row: 1;
}

}

/*********/
/*fixing safari flexbox gap*/
/*********/

.no-flexbox-gap .main-nav-list li:not(:last-child) {
  margin-right: 4.8rem;
}

.no-flexbox-gap .list-item:not(:last-child) {
  margin-bottom: 1.6rem;
}

.no-flexbox-gap .list-icon:not(:last-child) {
  margin-right: 1.6rem;
}

.no-flexbox-gap .delivered-faces {
  margin-right: 1.6rem;
}

.no-flexbox-gap .meal-attribute:not(:last-child) {
  margin-bottom: 2rem;
}

.no-flexbox-gap .meal-icon {
  margin-right: 1.6rem;
}

.no-flexbox-gap .footer-row div:not(:last-child) {
  margin-right: 6.4rem;
}

.no-flexbox-gap .social-links li:not(:last-child) {
  margin-right: 2.4rem;
}

.no-flexbox-gap .footer-nav li:not(:last-child) {
  margin-bottom: 2.4rem;
}

@media (max-width: 75em) {
  .no-flexbox-gap .main-nav-list li:not(:last-child) {
    margin-right: 3.2rem;
  }
}

@media (max-width: 59em) {
  .no-flexbox-gap .main-nav-list li:not(:last-child) {
    margin-right: 0;
    margin-bottom: 4.8rem;
  }
}