/* PENTING: @import harus di paling atas */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");
/* @import "tailwindcss"; */

:root {
  --color-yellow-primary: #ffc344;
  --color-secondary: #b98b2f;
  --color-pink-primary: #e98261;
  --color-black-primary: #344123;
  --color-black-secondary: #69735e;
  --color-green-custom: #d8e5a9;
  
}
* {
  font-family: "Inter", sans-serif !important;
}
body {
  margin: 0;
  font-feature-settings: "kern", "liga", "clig", "calt";
  font-kerning: normal;
  color: var(--color-black-primary) !important;
}
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: none;
}

/* hero start */
#hero-section {
  margin: 0 auto;
  height: 100% !important;
  width: 100%;
  padding: 0;
}
.hero {
  background-image: url("/images/hero-bg.png");
  background-size: cover;
  background-position: center;
  height: 100vh !important;
}
#hero-section-menu {
  margin: 0 auto;
  width: 100%;
  height: 100% !important;
  padding: 0;
}
.hero-menu {
  background-image: url("/images/section-menu.png");
  background-size: cover;
  background-position: center;
  height: 100vh !important;
}
#contact-section-menu {
  margin: 0 auto;
  height: 100%;
  width: 100%;
  padding: 0;
}
.contact-menu {
  background-image: url("/images/section-menu.png");
  background-size: cover;
  background-position: center;
  height: 1600px !important;
}
@media (max-width: 680px) {
  #hero-section {
    margin: 0 auto;
    height: 100% !important;
    width: 100%;
    padding: 0;
  }
  #hero-section-menu {
    margin: 0 auto;
    height: 100% !important;
    width: 100%;
    padding: 0;
  }
  .hero {
    background-image: url("/images/hero-bg-mb.png") !important;
  }

  #categories-section {
    margin: 0 auto;
    height: 100% !important;
    padding: 0;
  }
  .categories {
    background-image: url("/images/bg-menu-section.png");
    background-size: cover;
    background-position: center;
  }

  .contact-menu {
    height: 1150px !important;
  }
}

/* hero end */

/* categories start */
#categories-section {
  margin: 0 auto;
  width: 100%;
  /* padding: 0; */
}
.categories {
  background-image: url("/images/bg-menu-section.png");
  background-size: cover;
  background-position: center;
  /* height: 1080px !important; */
}

#customer-say-section,
#contact-information-section {
  margin: 0 auto;
  width: 100%;
  padding: 0;
}
.customer-say,
.contact-information {
  background-image: url("/images/customer-say-bg.png");
  background-size: cover;
  background-position: center;
}

#dessert-section,
#boissons-section {
  margin: 0 auto;
  width: 100%;
  padding: 0;
}
.dessert,
.boissons {
  background-image: url("/images/bg-menu-section.png");
  background-size: cover;
  background-position: center;
}

/* categories end */

/* cta start */
#cta-section {
  margin: 0 auto;
  width: 100%;
  padding: 0;
}
.cta {
  background-image: url("/images/cta-bg.png");
  background-size: cover;
  background-position: center;
  height: 555px !important;
}
#menu-offer-section {
  margin: 0 auto;
  width: 100%;
  padding: 0;
}
.menu-offer {
  background-image: url("/images/bg-cta-menu.png");
  background-size: cover;
  background-position: center;
}
#menu-combo-section {
  margin: 0 auto;
  width: 100%;
  padding: 0;
}
.menu-combo {
  background-image: url("/images/section-menu-bg.png");
  background-size: cover;
  background-position: center;
}
/* cta end */

.menu-button {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  padding: 5px;
  transition: background-color 0.3s ease;
}

.menu-button:focus {
  outline: none;
}
.menu-button.active {
  background-color: none;
}

.menu-button.active .menu-icon {
  transform: rotate(180deg);
}

.menu-button.active span {
  background: black;
}

.menu-button.active span:nth-child(1) {
  top: 4px;
  width: 0%;
  left: 50%;
}

.menu-button.active span:nth-child(2) {
  transform: rotate(45deg);
}

.menu-button.active span:nth-child(3) {
  transform: rotate(-45deg);
}

.menu-button.active span:nth-child(4) {
  top: 4px;
  width: 0%;
  left: 50%;
}
#mobileMenu a:hover {
  color: #0f4402;
  font-weight: bold;
}
#mobileMenu a.active {
  color: #0f4402;
  font-weight: bold;
}
.menu-list a:hover {
  color: #0f4402;
  font-weight: bold;
}
@media (max-width: 1020px) {
  #mobileMenu {
    transition: transform 0.3s ease;
  }

  .mobile-menu-hidden {
    transform: translateX(100%);
  }

  .mobile-menu-visible {
    transform: translateX(0);
  }

  /* Hamburger button styles */
  .menu-icon {
    width: 30.5px;
    height: 2.5px;
    position: relative;
    transform: rotate(0deg);
    transition: 0.5s ease-in-out;
    cursor: pointer;
  }

  .menu-icon span {
    display: block;
    position: absolute;
    height: 2.5px;
    width: 100%;
    background: #333;
    border-radius: 2px;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: 0.25s ease-in-out;
  }

  .menu-icon span:nth-child(1) {
    top: -10px;
  }

  .menu-icon span:nth-child(2),
  .menu-icon span:nth-child(3) {
    top: 0px;
  }

  .menu-icon span:nth-child(4) {
    top: 10px;
  }

  /* Hamburger animation for open state */
  .menu-icon.open span:nth-child(1) {
    top: 8px;
    width: 0%;
    left: 50%;
  }

  .menu-icon.open span:nth-child(2) {
    transform: rotate(45deg);
  }

  .menu-icon.open span:nth-child(3) {
    transform: rotate(-45deg);
  }

  .menu-icon.open span:nth-child(4) {
    top: 8px;
    width: 0%;
    left: 50%;
  }
}