body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}
h3 {
  font-weight: 800;
  color: black;
}
h4 {
  font-weight: 600;
  color: black;
}
.modal-fullscreen {
  z-index: 1050;
}
.navbar-wrapper {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 120px;
  background: white;
  padding: 10px 0;
  z-index: 1040; /* Ensure it's on top of other elements */
}
.navbar {
  display: flex;
/*  justify-content: flex-start; /* Align navbar items to the left */
  background: white;
  flex-wrap: wrap; /* Allow wrapping on small screens */
  max-width: 1560px;
  margin: auto;
}
.navbar a {
  font-weight: 600;
  text-decoration: none;
  padding: 8px 12px;
  opacity: 0.5;
  display: inline-block; /* Use inline-block to align the items in a row */
  margin-right: 10px;
  margin-bottom: 5px;
  white-space: nowrap; /* Mencegah teks turun ke bawah */
}
.navbar a:hover,
.navbar a.active {
  opacity: 1;
  border-bottom: 5px solid whitesmoke;
}
.navbar-wrapper .container-fluid {
  overflow-y: hidden; /* Prevent horizontal overflow */
}
.navbar-header {
  height: 40px;
}

.img-logo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo {
  height: 40px;
}

.logo-halal-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* ⬅️ atur ke kiri, kanan, atau tengah */
  padding-right: 50px; /* ⬅️ tambahkan jarak dari kanan */
}

.logo-halal {
  height: 30px; /* Bisa kamu sesuaikan: 32px, 36px, dst */
}
.menu-list {
  margin-top: 130px;
}
.menu-list .fa-solid {
  color: red;
}
.section {
  padding: 20px;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.2);
}
.modal-img {
  width: 100%;
}
.img-thumbnail {
  border: none;
  border-radius: 0;
}
.img-fluid {
  width: 100%;
}
.kotakmenu {
  background: white;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  height: 100%; /* Ensures all boxes stretch to the same height */
  display: flex; /* Enables flexbox */
  flex-direction: column; /* Stack content */
}
.item-image {
  display: block;
  overflow: hidden;
}
.item-image img {
  transition: transform 0.7s ease;
  -webkit-transition: transform 0.7s ease;
}
.item-image:hover img {
/*  transform: scale(1.1);*/
  transform-origin: center center; /* Keep the zoom centered */
}
.item-description {
  color: black;
  font-weight: 400;
}
.item-name {
  font-size: 14px;
  font-weight: 600;
  text-transform: capitalize;
}
.item-keterangan {
  font-size: 12px;
  font-style: italic;
  font-weight: 400;
}
.img-zoom {
  display: block;
  overflow: hidden;
}
.img-zoom img {
  transition: transform 0.7s ease;
  -webkit-transition: transform 0.7s ease;
}
.img-zoom:hover img {
  transform: scale(1.5);
  transform-origin: center center; /* Keep the zoom centered */
}
.modal-title {
  font-weight: bolder;
}
span {
  color: black;
  font-size: 14px; /* UBAH UKURAN FONT MENU */
  font-weight: 500; /* UBAH KETEBALAN FONT MENU */
}
@media (max-width: 768px) {
  .navbar {
    flex-direction: column; /* Stack navbar items vertically on mobile */
    align-items: center; /* Center navbar items horizontally */
    width: 100%; /* Ensure navbar uses full width */
    padding: 10px 0;
  }

  .navbar a {
    margin: 5px 0; /* Add margin for spacing */
  }
}

/*coding text keterangan harga dan gambar ilustrasi */
.category-note {
  color: dimgray; /* Warna teks */
  font-size: 10px; /* Ukuran font */
  font-weight: 500; /* Ketebalan */
  line-height: 1.5; /* Jarak antar baris */
  margin-top: 5px; /* Spasi atas */
}

/* ✅ Splash Screen Fullscreen */
#splash-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white; /* Bisa diubah ke warna lain */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999; /* Pastikan splash screen di atas semua elemen */
}

.splash-img {
  width: 100vw; /* Lebar penuh */
  height: 100vh; /* Tinggi penuh */
  object-fit: cover; /* Pastikan gambar tidak terdistorsi */
}

/* ✅ Gambar lebih optimal di mode portrait (HP berdiri) */
@media (orientation: portrait) {
  .splash-img {
    width: auto; /* Biarkan lebar mengikuti proporsi */
    height: 100vh; /* Pastikan tinggi tetap penuh */
  }
}

/* ✅ Gambar lebih optimal di mode landscape (HP miring) */
@media (orientation: landscape) {
  .splash-img {
    width: 100vw; /* Pastikan lebar tetap penuh */
    height: auto; /* Biarkan tinggi mengikuti proporsi */
  }
}

/* Fade-out animation */
@keyframes fadeOut {
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

/* ✅ Buat menu tertentu full satu baris */
@media (min-width: 768px) {
  /* Hanya untuk tampilan desktop */
  .wide-menu {
    flex: 0 0 100%; /* Gunakan 100% lebar baris */
    max-width: 100%;
  }
}