/* Rem and em do not dependon html font size ne media querie instead 1rem=1em=16px */
/* below 1344px smaller desktops 85*16 */
@media (max-width:84em){
     .hero{
      max-width: 120rem;
     }
     .heading-primary{
      font-size: 4.4rem;
     }
     .gallery{
      
      grid-template-columns:repeat(2,1fr);
    }
}
/* Below 1200px(lanscape table) */
@media (max-width:75em){
  html{
    /* 9/16px */
    font: size 56.23%;;
  }
  .haeding-secondary{
    font-size:3.6rem;
  }
  .heading-tertiary{
    font-size: 2.4rem;
  }
  .grid{
    row-gap:6.4rem;
    column-gap: 4.8rem;
  
  }
  .header{
    padding: 0 3.2rem;
  }
  .hero{
    gap: 4.8rem;
  }
  .main-nav-list{
    gap: 3.2rem;
  }
  .testimonials-container{
    padding: 9.6rem 3.2rem;
  }
}
/* below 944 (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-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-number{
      font-size: 7.4rem;
    }
    /* paddin card meal */
    .meal-content{
      padding: 2.4rem 3.2rem 3.2rem 3.2rem;
    }
    /*  */
    .section-testimonials{
      grid-template-columns: 1fr;
    }
    /*  image reverse 6 column*/
    .gallery{
      grid-template-columns: repeat(6,1fr);

    }
    .cta{
      /* 3/5=60% 2/5=40% */
      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, 0.9);
      -webkit-backdrop-filter: blur(5px);
      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;
      /* hide navigation */
      /* allows no transition at all */
      /* display: none; */
      transition: all 0.5s ease-in;
  /* hide steps */
  /* 1 step hideit visually */
      opacity: 0;
/*  2 Maake it un accessible to mouse and keywoard */
      pointer-events:none;
      visibility: hidden;
    }
    .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;
}
.nav-open .icon-mobile-nav[name="menu-outline"]{
  display: none;
 }
}
/* below 704px (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;
  }
  .haeding-secondary{
    /* font-size: 4.8rem; */
    margin-bottom: 4.8rem;
  }
  .pricing-plan{
    width: 100%;
  }
  .grid--footer{
    grid-template-columns:  repeat(6,1fr);
  }
  .adress-col,.logos-col{
    grid-column: span 3;
  }
  .nav-col{
    grid-row:1;
    grid-column: span 2;
    margin-bottom: 3.2rem;
  }
  
}
/* below 544px */
@media (max-width:34em) {
   .grid{
    row-gap: 4.8rem;
   }
  .grid--3-cols,
.grid--2-cols,.grid--4-cols{
  grid-template-columns:1fr;
  }
  .btn,.btn:link,.btn:visited{
    padding: 2.4rem 1.2rem;
    
  }

  .section-hero{
    padding: 2.4rem 0 6.4rem 0;
  }
  .hero{
    padding:0 3.2rem
  }
  .hero-img{
    width: 80%;
  }
  .logos img{
    height:1.2rem ;
  }
  /* selector is the child but nth-child is for container appeler toi */
  .step-img-box:nth-child(2){
     grid-row: 1;
  }
  .step-img-box:nth-child(6){
    grid-row: 5;

 }
 .step-img-box{
  /* use transform translate to move a element withoust  affect element around  */
  transform: translateY(2.4rem);
 }
 .testimonials{
  grid-template-columns: 1fr;
 }
 .gallery{
  grid-template-columns: repeat(4,1fr);
   gap: 1.6rem;
}
.cta{
  grid-template-columns: 1fr;
}
.cta-text-box{
  padding: 3.2rem;
}
.cta-img-box{
  height: 32rem;
  grid-row: 1;
}
}
/* ---------------- */
/* fixing safari flexbox   */
/* ---------------- */
.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;
  }
}