/* ****************************
Below 1344px (Smaller Tablets)
**************************** */

@media (max-width: 84em) {
  .hero-h1 {
    font-size: 4.4rem;
  }
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ****************************
Below 1200px (Landscape Tablets)
**************************** */

@media (max-width: 78em) {
  html {
    font-size: 56.5%;
  }
  .heading-secondary {
    font-size: 3.6rem;
  }
  .menu-pics {
    column-gap: 0rem;
  }
  .menu-special,
  .menu-chicken {
    width: 30rem;
    height: 35rem;
  }
  .burguer-menu,
  .sides-menu {
    width: 30rem;
    height: 17.5rem;
  }
  .header {
    padding: 0 3.2rem;
  }
  .main-nav-list {
    gap: 3.2rem;
  }
  .location-box {
    width: 45rem;
    height: 18rem;
  }
  .testimonials-container {
    padding: 9.6rem 3.2rem;
  }
}

/* ****************************
Below 1120px
**************************** */

@media (max-width: 70em) {
  .cta {
    width: 95%;
    margin: 0 auto;
  }
}

/* ****************************
Below 944px Tablets
**************************** */

@media (max-width: 59em) {
  html {
    font-size: 50%;
  }
  .header-container {
    margin-bottom: 2rem;
    text-align: center;
  }
  .header-container-inner {
    width: 100%;
    padding: 0 8rem;
  }
  .section-hero {
    background-position-y: -10rem;
  }
  .menu-pics {
    grid-template-columns: 1fr 1fr;
    justify-content: center;
  }
  .burguer-side-2img {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    width: 100%;
    grid-column: 1/3;
    align-items: center;
  }
  .menu-special,
  .menu-chicken {
    width: 35rem;
    height: 35rem;
  }
  .burguer-menu,
  .sides-menu {
    width: 35rem;
    height: 20rem;
  }
  .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;
  }
  .cta-topic {
    grid-column: 1/2;
    grid-row: 1/2;
  }
  .cta-name {
    grid-column: 1/2;
    grid-row: 2/3;
  }
  .cta-email {
    grid-column: 1/2;
    grid-row: 3/4;
  }
  .cta-number {
    grid-column: 1/2;
    grid-row: 4/5;
  }
  .cta-message {
    grid-column: 1/2;
    grid-row: 5/6;
    justify-self: stretch;
  }
  #cta-button {
    grid-column: 1/2;
    grid-row: 6/7;
  }

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

  .main-nav {
    background-color: rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(10px);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    transform: translateX(100%);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    transition: all 0.5s ease-in;

    /*Hide Visually*/
    opacity: 0;

    /*Make it unaccessible to mouse*/
    pointer-events: none;

    /*Hide it from the screen reader*/
    visibility: hidden;
  }

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

  .nav-open .main-nav {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateX(0);
  }

  .main-nav-list {
    flex-direction: column;
    align-items: center;
    gap: 4.8rem;
  }

  .nav-open .icon-mobile-nav[name="close-outline"] {
    display: block;
  }

  .nav-open .icon-mobile-nav[name="menu-outline"] {
    display: none;
  }
}

/* ****************************
Below 700px smaller tablets
**************************** */

@media (max-width: 44em) {
  .location-grid {
    grid-template-columns: auto;
    row-gap: 3rem;
  }

  .location-box {
    width: 50rem;
    height: 20rem;
  }

  .menu-info {
    margin: 0 auto;
    text-align: center;
    width: 50rem;
    font-size: 2rem;
  }

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

  .truck-graphic {
    height: 75%;
    width: 75%;
  }

  .section-footer {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 3rem;
    justify-items: center;
  }

  .logo-column {
    grid-row: 2/3;
  }

  .address-column {
    grid-column: 2/3;
  }

  .location-column {
    grid-column: 1/2;
    grid-row: 1/2;
  }

  .menu-special,
  .menu-chicken {
    width: 28rem;
    height: 28rem;
  }
  .burguer-menu,
  .sides-menu {
    width: 28rem;
    height: 14rem;
  }

  .truck-graphic {
    margin-right: none;
  }
}
/* ****************************
Below 544px (phones)
**************************** */

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

  .menu-pics {
    grid-template-columns: 1fr;
  }

  .menu-special {
    grid-column: 1/2;
    grid-row: 1/2;
  }
  .menu-chicken {
    grid-column: 1/2;
    grid-row: 2/3;
  }

  .burguer-side-2img {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .menu-special,
  .menu-chicken {
    width: 70%;
    height: 100%;
  }
  .burguer-menu,
  .sides-menu {
    width: 70%;
    height: 100%;
  }

  .section-footer {
    grid-template-columns: 1fr;
    gap: 5rem;
    justify-items: center;
  }

  .logo-column {
    grid-row: 4/5;
  }

  .address-column {
    display: flex;
    align-items: center;
    text-align: center;
    flex-direction: column;
    grid-column: 1/2;
    grid-row: 3/4;
  }

  .location-column {
    display: flex;
    align-items: center;
    text-align: center;
    flex-direction: column;
    grid-column: 1/2;
    grid-row: 1/2;
  }

  .socials-column {
    display: flex;
    align-items: center;
    text-align: center;
    flex-direction: column;
    grid-column: 1/2;
    grid-row: 2/3;
  }

  .logo-column {
    align-items: center;
    text-align: center;
    flex-direction: column;
  }

  .footer-heading {
    font-weight: 700;
    font-size: 2.2rem;
  }

  .footer-nav {
    gap: 3rem;
  }

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

  .location-box {
    width: 45rem;
    height: 20rem;
  }

  .menu-info {
    margin: 0 auto;
    text-align: center;
    width: 45rem;
    font-size: 2rem;
  }

  .section-hero {
    background-size: 150%;
  }

  .truck-graphic {
    margin-left: 1rem;
    padding-right: none;
  }
}