/*  rem and em do NOT depend on html font-size in media queries!
Instead, 1rem (root font size) = 1em(current font size) = 16px */

/* ******************************** */
/* BELOW 1344px (84*16) (for Smaller desktops)  */
/* ******************************** */
@media (max-width: 84em) {
.hero {
    max-width: 120rem;
 }

.heading-primary {
    font-size: 4.4rem;
 }

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

/* ******************************** */
/* BELOW 1200px (1200/16) (for Landscape Tablets)  */
/* ******************************** */
@media (max-width: 75em) {
 html {
    /* 9px/ 16px = 56.25% */
    font-size: 56.25%;
 }

 .grid{
    column-gap: 4.8;
    row-gap : 6.4rem;
 }

 .heading-secoundary {
    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;
 }
}

/* ******************************** */
/* BELOW 944px (944/16)  (Tablets)  */
/* ******************************** */

@media (max-width: 59em) {
html {
   /* 8px/16px = 0.5 */
   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;
}

.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 {
   /* 3/5= 60% + 2/5 = 40% */
   grid-template-columns: 3fr 2fr;
}

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

.btn--form {
margin-top: 1.2rem;
}

.My_cart {
padding: 0 3.2rem;
}

/* MOBILE NEVIGATION */
.btn-mobile-nav {
   display: block;
   z-index: 9999;
}

.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;
   transition: all 0.5s ease-in;

   

   /* Hide Navigation */
   /* Allows NO transition at all */
   /* display: none; */

   /* 1) Hide it visually */
   opacity: 0;

/*2) Make it unaccessible to mouse and keyboard */

pointer-events: none;

/* 3) Hide it from screen readers */
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 704px (944/16)  (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-secoundary {
      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;
}

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


}


/* ******************************** */
/* BELOW 544px (544/16= 34em)  (Phones)  */
/* ******************************** */
@media (max-width: 34em) {

   .grid {
      row-gap: 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-image-box{
   padding: 3.2rem;
}

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

.img-cart {
   width: 85%;
}

}

/* 
- Font sizes (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
- Spacing system (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
*/

/**************************/
/* 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;
   }
 }