@media (max-width: 550px) {


    #menuToggle {
      display: block;
    }
    #menuOverlay {
      background-color: #000000e0;
      height: 100%;
      width: 100%;
      position: fixed;
      z-index: 4;
      left: 0;
      top: 0;
      display: none;
    }





    .menu .container {
      width: 95%;
    }
    .category-button h3 {
      font-size: 13px;
    }
    .menu-items {
      align-items: flex-end;
    }
    .menu h2 {
      margin: 12px 0;
      margin-top: 150px;
    }
    .itemsUl {
      flex-direction: column;
      margin: unset;
      align-items: center;
    }
    .appItem,
    .mainItem,
    .dessItem,
    .bevItem {
      row-gap: unset;
      margin-top: 10px;
      padding: 10px;
      width: 65%;
      justify-content: center;
      box-shadow: 35px 22px 14px -26px rgb(0 0 0 / 52%);
    }
    .menu-category h3 {
      margin: unset;
      padding: 10px;
    }
    .menu-category img {
      width: 115px;
      height: 115px;
    }
  }


  @media (max-width: 768px) {


    .navbar .menu-links a:hover {
      color: white;
      background: black;
    }


    .navbar .menu-links:hover {
      color: white;
      background: black;
    }

    
    .navbar .menu-links {
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background: #000;
      display: none; 
      z-index: 150;
    }

    .navbar .menu-links.show {
      display: flex; 
    }

    .navbar .menu-links a {
      padding: 20px 0; 
      width: 100%;
      text-align: center;
      font-size: 1.5rem; 
      transition: 0.2s ease;
      display: flex;
    }

    .navbar .menu-links a:hover {
      background: #d8a715;
      padding-left: 0;
      padding-right: 0; 
    }

    #hamburger-btn {
      display: block;
      z-index: 200;
    }

    #close-menu-btn {
      display: block;
    }

    .hero-section {
      display: flex;
      flex-direction: column-reverse; 
      align-items: center;
      padding-top: calc(20px + 40px); 
    }

    .landing-picture {
      margin-bottom: 20px;
      width: 100%; 
      height: auto;
      margin-top: 150px;
    }

    .hero-section .content {
      text-align: center; 
      max-width: 90%; 
    }

    .hero-section .content h2 {
      font-size: 2.3rem;
      line-height: 1.2;
    }

    .hero-section .content p {
      max-width: 100%;
      margin-top: 10px;
    }

    .hero-section .content button {
      padding: 9px 18px;
      margin-top: 15px;
      margin-bottom: 70px;
    }

    .landing-picture {
      margin-top: 400px;
    }

    .bevItem {
      gap: 10px
    };
  }

  span {
    color: #d8a715;
  }


  /* Menu items repsponsiveness */

  @media (max-width: 1024px) {
    .menu-category .mainItem {
      width: 45%; 
      padding: 10px;
    }
  }

  @media (max-width: 768px) {
    .menu-category .mainItem {
      width: 100%; 
    }
  }

  @media (max-width: 768px) {
    .menu-category .mainItem,
    .appItem,
    .mainItem,
    .dessItem,
    .bevItem {
      width: 100%; 
    }

    .menu-items {
      gap: 20px; 
    }

    .hero-section {
      min-width: 100%;
    }


  }