html {
  font-size: 10px;
}

/* 81 rem ===>> 1300px */
@media (max-width: 81em) {
  .nav-container {
    max-width: 120rem;
    margin: auto;
  }

  .hero-container {
    max-width: 120rem;
  }
}

@media (max-width: 75em) {
  section {
    padding: 0 2.4rem;
  }

  .hero-content {
    justify-self: center;
  }

  .hero-container {
    gap: 6.4rem;
    padding: 0;
  }

  .nav {
    padding: 1.2rem 2.4rem;
  }

  html {
    font-size: 56.25%;
  }
  .gallery-container {
    column-gap: 0;
    row-gap: 0;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  .testimonials-container {
    grid-template-columns: 1fr 1fr;
  }

  .testimonial-image-container {
    gap: 0;
  }
  .testimonial {
    padding: 2.4rem;
  }
  .gallery-photo {
    width: 100%;
  }
}

/*  63em --> 1000px */
@media (max-width: 63em) {
  /* .featured-in-companies {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.4rem;
  } */

  .nav-container {
    padding: 0 2.4rem;
  }

  .meal-description-list {
    gap: 1.8rem;
  }

  .remaining-meal-list {
    gap: 1.2rem;
    font-size: 1.4rem;
  }

  .meals-container {
    gap: 4.8rem;
  }

  .testimonial-image {
    width: 15%;
  }

  .testimonial-text {
    font-size: 1.2rem;
  }

  .nav-main-logo {
    height: 2rem;
  }
}
/* 52em -- > 832px */
@media (max-width: 52em) {
  .heading-primary {
    font-size: 4.4rem;
  }

  .heading-secondary {
    font-size: 3rem;
  }

  .hero-container {
    grid-template-columns: 1fr;
    margin-bottom: 0;
    gap: 0;
  }

  .hero-content {
    text-align: center;
    padding: 6.8rem;
  }

  .hero-content-heading {
    font-size: 4.8rem;
  }

  .hero-image {
    width: 60%;
  }

  .step-container {
    gap: 2.4rem;
  }

  .meals-container {
    grid-template-columns: 1fr 1fr;
    gap: 12.8rem;
    row-gap: 6.4rem;
  }

  .meal-categories {
    grid-column: 1 /-1;
    justify-self: center;
    width: 25rem;
  }
  .testimonial-image-container {
    grid-template-columns: 1fr;
  }

  .call-to-action-text-container {
    padding: 1.6rem;
  }

  .input-container {
    margin-bottom: 0.3rem;
  }

  label {
    margin-bottom: 0.6rem;
  }

  .footer-container {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }

  .footer-icon-list {
    gap: 1.6rem;
  }

  .custom-gap-pricing {
    gap: 3.2rem;
  }

  .section-pricing-heading {
    margin-bottom: 3.2rem;
  }

  .menu-icon {
    display: block;
  }

  .close-icon {
    display: none;
  }

  .nav-list {
    position: absolute;
    background-color: rgb(255, 255, 255, 0.97);
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4.8rem;

    transition: all 0.5s;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  .nav-open .nav-list {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }

  .nav-open .menu-icon {
    display: none;
  }

  .nav-open .close-icon {
    display: block;
  }

  .nav-list li a {
    font-size: 2.4rem;
  }
}

/* 44em --> 700px */
@media (max-width: 44em) {
  html {
    font-size: 50%;
  }

  .featured-in-companies {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 2.4rem;
    padding: 1.2rem;
    justify-items: center;
  }
  .how-it-works-heading {
    margin-bottom: 3.2rem;
  }
  .step-container {
    padding: 0;
    margin-bottom: 1.2rem;
  }

  .step-heading {
    font-size: 1.8rem;
  }

  .step {
    padding: 1.2rem;
  }

  .custom-gap-pricing {
    gap: 0;
    padding: 0;
  }

  .footer-container {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin-bottom: 2.4rem;
    padding: 1.2rem;
  }

  .main-logo-container {
    grid-column: 1/-1;
    justify-self: center;
  }

  .footer-logo-container {
    margin-bottom: 2.4rem;
  }

  .menu-icon {
    display: block;
  }

  .mobile-btn {
    display: block;
  }
}

/* 38em --> 600px */
@media (max-width: 38em) {
  html {
    font-size: 40%;
  }
  .hero-content {
    padding: 1.2rem;
  }

  .meals-container {
    column-gap: 3rem;
    padding: 1.2rem;
  }

  .pricing-container {
    padding: 1rem;
  }

  .custom-gap-pricing {
    gap: 1.8rem;
  }

  .step-image-container::before {
    width: 20rem;
    height: 17rem;
  }

  .step-image-container::after {
    width: 15rem;
    height: 12rem;
  }

  input {
    width: 40%;
    padding: 0.6rem;
    border-radius: 1rem;
  }
  input::placeholder {
    font-size: 1.5rem;
  }

  .pricing-btn {
    /* padding: 0.6rem 1.2rem; */
    font-size: 1.4rem;
  }

  .button {
    font-size: 1.4rem;
  }
}

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

  .heading-secondary {
    font-size: 2.4rem;
  }

  .subheading {
    font-size: 1.2rem;
  }

  .step-container {
    grid-template-columns: 1fr;
    gap: 0.6rem;
    margin-bottom: 6.4rem;
  }

  .step-image-container {
    grid-row: 1;
    width: 70%;
    margin-bottom: 1.8rem;
  }
  .step {
    padding: 0 5.2rem;
  }

  .meal {
    width: 30rem;
    justify-self: center;
  }

  .meals-container {
    grid-template-columns: 1fr;
  }

  .testimonials-container {
    grid-template-columns: 1fr;
  }

  .footer-logo-container {
    padding: 0 1.2rem;
  }

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

  .call-to-action-image-container {
    height: 30rem;
    grid-row: 1;
  }
}