.contact-item { display: flex; align-items: center; gap: 8px; justify-content: start; }
.contact-icon { aspect-ratio: 1; object-fit: contain; object-position: center; width: 18px; align-self: stretch; margin: auto 0; }
.social-icons { display: flex; align-items: start; gap: 4px; justify-content: start; }
.social-icon { aspect-ratio: 1; object-fit: contain; object-position: center; width: 27px; }
.header-content { align-self: center; display: flex; margin-top: 29px; width: 100%; max-width: 1296px; align-items: center; gap: 40px 100px; justify-content: space-between; flex-wrap: wrap; font: 16px DM Sans, sans-serif; }
@media (max-width: 991px) { .header-content { max-width: 100%; } }
.header-actions { align-self: stretch; display: flex; min-width: 240px; align-items: center; gap: 11px; color: #182226; font-weight: 700; white-space: nowrap; justify-content: start; margin: auto 0; }
@media (max-width: 991px) { .header-actions { white-space: initial; } }
.action-button { border-radius: 89px; display: flex; align-items: center; gap: 6px; text-align: right; justify-content: start; margin: auto 0; padding: 11px 16px 11px 14px; border: 1px solid #000; }
@media (max-width: 991px) { .action-button { white-space: initial; padding: 0 20px; } }
.action-icon { aspect-ratio: 0.96; object-fit: contain; object-position: center; width: 23px; align-self: stretch; margin: auto 0; }
.cart-button { border-radius: 47px; display: flex; align-items: center; gap: 3px; overflow: hidden; text-align: right; justify-content: start; margin: auto 0; padding: 12px 25px 12px 19px; border: 1px solid #2c2f24; }
@media (max-width: 991px) { .cart-button { padding-right: 20px; white-space: initial; } }
.language-selector { border-radius: 47px; display: flex; align-items: center; gap: 6px; overflow: hidden; justify-content: start; margin: auto 0; padding: 12px 16px 12px 21px; border: 1px solid #2c2f24; }
@media (max-width: 991px) { .language-selector { padding-left: 20px; white-space: initial; } }
.flag-icon { background-color: #6b6b6b; align-self: stretch; display: flex; width: 18px; height: 18px; margin: auto 0; }
.language-text { align-self: stretch; flex: 1; padding-left: 4px; gap: 10px; width: 80px; margin: auto 0; }
@media (max-width: 991px) { .language-text { white-space: initial; } }
.nav-menu { align-self: stretch; display: flex; min-width: 240px; align-items: center; color: #2c2f24; font-weight: 500; justify-content: start; margin: auto 0; }
@media (max-width: 991px) { .nav-menu { max-width: 100%; } }
.nav-item { align-self: stretch; border-radius: 34px; gap: 10px; white-space: nowrap; margin: auto 0; padding: 4px 16px; }
@media (max-width: 991px) { .nav-item { white-space: initial; } }
.nav-item-active { align-self: stretch; border-radius: 34px; background-color: #dbdfd0; gap: 10px; margin: auto 0; padding: 4px 16px; }
.logo { aspect-ratio: 5.41; object-fit: contain; object-position: center; width: 200px; fill: #997db8; align-self: stretch; margin: auto 0; }
.hero-section { display: flex; flex-direction: column; position: relative; min-height: 252px; margin-top: 79px; width: 100%; color: #2c2f24; text-align: center; padding: 44px 70px; font: 400 95px/82px Florence, sans-serif; }
@media (max-width: 991px) { .hero-section { max-width: 100%; font-size: 40px; line-height: 38px; margin-top: 40px; padding: 0 20px; } }
.hero-background { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; object-position: center; }
.hero-content { position: relative; }
.menu-section { align-self: center; display: flex; margin-top: 12px; width: 100%; max-width: 1295px; flex-direction: column; }
@media (max-width: 991px) { .menu-section { max-width: 100%; margin-top: 40px; } }
.menu-filters { display: flex; align-items: center; gap: 22px; color: #402463; white-space: nowrap; text-align: center; justify-content: start; flex-wrap: wrap; font: 400 27px/1 Aventa-SemiBold, -apple-system, Roboto, Helvetica, sans-serif;margin-bottom: 14px; }
@media (max-width: 991px) { .menu-filters { white-space: initial; } }
.filter-button { font-size: 27px; border-radius: 8px; background: #997db8; box-shadow: 0 0 47.4px 0 rgba(0, 0, 0, 0.08); align-self: stretch; min-width: 240px; min-height: 68px; color: #fff; flex: 1; margin: auto 0; padding: 25px 24px; }
@media (max-width: 991px) { .filter-button { font-size: 27px;white-space: initial; padding: 0 20px; } }
.filter-button-active { font-size: 27px; border-radius: 8px; background: #997db8; box-shadow: 0 0 47.4px 0 rgba(0, 0, 0, 0.08); align-self: stretch; min-width: 240px; min-height: 68px; color: #fff; flex: 1; margin: auto 0; padding: 25px 24px; }
@media (max-width: 991px) { .filter-button-active { font-size: 27px;white-space: initial; padding: 0 20px; } }

.filter-button-inactive { font-size: 27px;border-radius: 8px; background: #fff; box-shadow: 0 0 47.4px 0 rgba(0, 0, 0, 0.08); align-self: stretch; min-width: 240px; min-height: 68px; flex: 1; margin: auto 0; padding: 25px 24px; }
@media (max-width: 991px) { .filter-button-inactive { font-size: 27px;white-space: initial; padding: 0 20px; } }
.menu-options { display: flex; margin-top: 14px; align-items: flex-start; gap: 20px; font-weight: 400; white-space: nowrap; flex-wrap: wrap; justify-content: space-between; }
@media (max-width: 991px) { .menu-options { max-width: 100%; white-space: initial; } }
.option-dropdown { border-radius: 6px; background-color: #fff; box-shadow: 0 0 85px rgba(0, 0, 0, 0.11); align-self: start; display: flex; padding-bottom: 1px; flex-direction: column; overflow: hidden; color: #6b6b6b; justify-content: start; font: 12px Inter, sans-serif; }
@media (max-width: 991px) { .option-dropdown { white-space: initial; } }
.option-item { align-self: stretch; flex: 1; background-color: #e1e1e1; min-height: 35px; width: 100%; gap: 10px; padding: 10px 10px 10px 22px; }
@media (max-width: 991px) { .option-item { padding-left: 20px; white-space: initial; } }
.option-item-inactive { align-self: stretch; flex: 1; border-radius: 10px; background-color: #fff; min-height: 35px; width: 100%; gap: 10px; padding: 10px 10px 10px 22px; }
@media (max-width: 991px) { .option-item-inactive { padding-left: 20px; white-space: initial; } }
.menu-category { color: #2c2f24; text-align: left; align-self: start; margin-top: 90px; font-size: 56px; }
@media (max-width: 991px) { .menu-category { margin-top: 40px; font-size: 40px; } }
.menu-items { margin-top: 70px; }
@media (max-width: 991px) { .menu-items { max-width: 100%; margin-top: 40px; } }
.menu-row { gap: 20px; display: flex; }
@media (max-width: 991px) { .menu-row { flex-direction: column; align-items: stretch; gap: 0; } }
.menu-column { display: flex; flex-direction: column; line-height: normal; width: 50%; margin-left: 0; }
@media (max-width: 991px) { .menu-column { width: 100%; } }
.menu-item { display: flex; margin-top: 4px; flex-grow: 1; flex-direction: column; }
@media (max-width: 991px) { .menu-item { max-width: 100%; margin-top: 40px; } }
.menu-item-card { border-radius: 19px; background: #fff; box-shadow: 0 0 57.1px 0 rgba(0, 0, 0, 0.15); display: flex; min-height: 644px; flex-direction: column; overflow: hidden; justify-content: start; }
@media (max-width: 991px) { .menu-item-card { max-width: 100%; } }
.menu-item-image { display: flex; width: 100%; flex-direction: column; overflow: hidden; flex: 1; }
@media (max-width: 991px) { .menu-item-image { max-width: 100%; } }
.menu-item-img { aspect-ratio: 1.61; object-fit: contain; object-position: center; width: 100%; border-radius: 12px 12px 0 0; }
@media (max-width: 991px) { .menu-item-img { max-width: 100%; } }
.menu-item-details { display: flex; margin-top: 29px; width: 100%; flex-direction: column; font-weight: 400; text-align: left; justify-content: start; padding: 0 41px 39px; }
@media (max-width: 991px) { .menu-item-details { max-width: 100%; padding: 0 20px; } }
.menu-item-title { color: #2c2f24; font: 30px/1 Aventa-SemiBold, sans-serif; margin: 0; }
@media (max-width: 991px) { .menu-item-title { max-width: 100%; } }
.menu-item-description { color: #aeaeae; margin-top: 26px; font: 21px/26px DM Sans, sans-serif; }
@media (max-width: 991px) { .menu-item-description { max-width: 100%; } }
.menu-item-price { color: #997db8; font-size: 67px; font-family: 'Playfair Display', var(--default-font-family); }
@media (max-width: 991px) { .menu-item-price { max-width: 100%; font-size: 40px; } }
.filter-button {
    border: 0px;
}
.filter-button-active {
  border: 0px;
}
.filter-button-inactive {
    border: 0px;
}
.filter-button-inactive:hover {
    background-color: #997db8;
    color: #fff;
}
.filter-button:hover {
  background-color: #fff;
  color: black;
}
.filter-button-active:hover {
  background-color: #997db851;
  color: black;
}

.filter-button-active {
  position: relative; /* Add this to position the icon */
}

.filter-button-active::after {
  content: '×';  /* Unicode multiplication symbol as close icon */
  position: absolute;
  top: 8px;
  right: 8px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: #fff;
  cursor: pointer;
}

/* Optional: Add hover effect for the close icon */
.filter-button-active:hover::after {
  background-color: rgba(255, 255, 255, 0.5);
}


.menu-items-cursor {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}

.menu-row-cursor {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    align-items: flex-start;
}

.menu-card-cursor {
    flex: 0 0 48%; /* Two cards per row */
    box-sizing: border-box;
    margin-bottom: 50px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    /* padding: 20px; */
    text-align: center;
}

.menu-card-image-cursor {
    width: 100%;
    height: auto;
    border-radius: 10px 10px 0 0;
}

.menu-card-title-cursor {
    color: var(--Neutral-07, #2C2F24);
    font-family: Aventa-SemiBold;
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 66.667% */
    margin: 0;
}

.menu-card-description-cursor {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 10px;
}

.menu-card-price-cursor {
color: #997DB8;
font-family: 'Playfair Display', var(--default-font-family);
font-size: 57px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 29.851% */
margin:5px 0;
}

@media (max-width: 991px) {
    .menu-card-cursor {
        flex: 0 0 100%; /* One card per row on smaller screens */
    }
}


/* .group-aa6 {
    position: relative;
    width: 612.788px;
    height: 975.016px;
    top: 139.415px;
    left: 19%;
    background: url(./assets/images/66b37e66-1299-4867-b255-f541f2457c71.png) no-repeat center;
    background-size: cover;
    transform: translate(131.67%, 0);
    z-index: 1;
}
.group-aa7 {
    position: relative;
    width: 835.37px;
    height: 526.506px;
    bottom: 0;
    top: 1100px;
    left: 60%;
    background: url(./assets/images/f5e0950b-e98c-4dab-abce-6d389b9aff63.png) no-repeat center;
    background-size: cover;
    transform: translate(-151.89%, 0);
    z-index: 3;
} */





  
  .dropdown, .datetime-picker, .catering-utensils {
    position: relative;
    background-color: white;
    border: 0px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-top: 10px;
    width: 350px;
  }
  
  .dropdown ul {
    list-style: none;
    padding: 0;
  }
  
  .dropdown li {
    padding: 5px 10px;
    cursor: pointer;
  }
  
  .dropdown li:hover {
    background-color: #f0f0f0;
  }

  
  .catering-utensils {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
  
  .catering-utensils .modal-title {
    margin-right: auto; /* Pushes the buttons to the right */
  }
  
  .catering-utensils .option-button {
    margin-left: 10px; /* Space between buttons */
  }

  .datetime-selection {
    width: 100%;
  }
  
  .datetime-picker {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
  
  .datetime-picker .modal-title {
    margin-right: auto; /* Pushes the inputs to the right */
  }
  
  .datetime-inputs {
    display: flex;
    gap: 10px; /* Space between date and time inputs */
  }
  
  .datetime-inputs input {
    padding: 5px;
  }
  
  /* Optional: Style the inputs to match your design */
  .date-input,
  .time-input {
    border: 1px solid #ddd;
    border-radius: 4px;
    /* Add any other input styles you need */
  }

.dropdown {
  position: absolute;
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  z-index: 1000;
  margin-top: 5px;
}

.dropdown ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dropdown li {
  padding: 8px 15px;
  cursor: pointer;
}

.dropdown li:hover {
  background-color: #f5f5f5;
}

/* Position the dropdowns relative to their buttons */
#selectButton, #guestButton {
  position: relative;
}