/* REM AND EM do not depend on HTML Font-size in media queries! Instead, 1rem = 1em = 16px  */

/*  BELOW 1344px (Smaller Desktops) */

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

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

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

/*  BELOW 1200px (Landscape Tablets) */ 

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

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

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

    .testimonial-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-text-box,
    .hero-image-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-contents{
        padding: 2.4rem 3.2rem 3.2rem 3.2rem;
    }

    .section-testimonial{
        grid-template-columns: 1fr;
    }

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

    .cta{
        grid-template-columns: 3fr 2fr;
    }

    .cta-form{
        grid-template-columns: 1fr;   /* This is not working have to see this. */
    }

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

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

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

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

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

    .secondary-heading{
        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{
        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;  /* top right bottom left*/
    }

    .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;  /* This is not working have to see this. */
    }

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

    .cta-img-box{
        height: 36rem;            /* This is not working have to see this. */
        grid-row: 1;
    }

}


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