@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
.roboto-thin {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.roboto-thin-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.roboto-light {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.roboto-light-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.roboto-regular-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.roboto-medium {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.roboto-medium-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.roboto-bold {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.roboto-bold-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.roboto-black {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.roboto-black-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: italic;
}

/* END FONT */

#top-navigation {
  background-color: #f51359;
}

.list-items img,
.skeleton-height {
  border-radius: 5px 5px 0px 0px;
}

.btn-group .btn.active {
  background: #67c57d !important;
  font-size: 10px !important;
}
.btn-group label {
  background: #e0f5e3;
}

.btn-addto-cart {
  font-size: 11px;
  padding: 8px;
  text-transform: uppercase;
}

.res-header-bg {
  background-color: #e9f3ee;
}

.badge-danger {
  background-color: #1dc51c;
}
.badge-dark {
  background-color: #28a745;
}

.btn-green {
  text-transform: uppercase;
  font-family: "Roboto", sans-serif;
}

#sidebar {
  background-color: #e8ebee;
}

/* ME */
.home-title {
  color: white;
  font-weight: bold;
}

/* RESTO HEADER */
.merchant-header-bg {
  background-color: #f9f3f4;
}

.merchant-title {
  font-family: "Roboto", sans-serif;
  font-weight: bold;
}
/* Button transitions and hover effects */
.btn-circle {
  transition: all 0.3s ease;
}

.btn-circle:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

/* Icon transitions */
.zmdi {
  transition: transform 0.3s ease;
}

.btn-circle:hover .zmdi {
  transform: scale(1.1);
}

/* Active state styles */
.zmdi-favorite {
  color: #ff4081; /* or any color you prefer */
}

/* Optional: Animation for when favorite is clicked */
@keyframes favoritePopup {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
.zmdi-favorite.active {
  animation: favoritePopup 0.3s ease;
}

.right-infox {
  position: relative;
  overflow: hidden;
}
/* Header Cover */
.header-image-container {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.header-image-container::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      to right,
      #f9f3f4,
      rgba(249, 243, 244, 0.8) 5%,
      rgba(249, 243, 244, 0) 15%,
      rgba(249, 243, 244, 0) 85%,
      rgba(249, 243, 244, 0.8) 95%,
      #f9f3f4
    ),
    linear-gradient(
      to bottom,
      #f9f3f4,
      rgba(249, 243, 244, 0.8) 5%,
      rgba(249, 243, 244, 0) 15%,
      rgba(249, 243, 244, 0) 85%,
      rgba(249, 243, 244, 0.8) 95%,
      #f9f3f4
    );
  z-index: 1;
  pointer-events: none;
}

.styled-header-image {
  display: block;
  width: 100%;
  height: auto;
}
/* Header Cover */

/* END RESTO HEADER */
/* v 2.0.2 */

/* CUISINE HOME PAGE */

/* New styles for cuisine list */
.swiperCuisine .swiper-slide {
  /* Add padding to create space for background */
  padding: 8px;
  transition: all 0.3s ease;
}

.swiperCuisine .el-links {
  /* Container styles */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  border-radius: 12px;
  /* Light background that won't overwhelm the design */
  background-color: #f8f9fa;
  transition: all 0.3s ease;
}

/* Hover effect */
.swiperCuisine .el-links:hover {
  background-color: #f0f2f5;
  transform: translateY(-2px);
}

/* Keep the image circular */
.swiperCuisine .el-links img.rounded-circle {
  width: 70px;
  height: 70px;
  object-fit: cover;
  margin-bottom: 8px;
}

/* Style for cuisine name */
.swiperCuisine .el-links .truncate {
  margin-top: 8px;
  color: #333;
  font-size: 14px;
}

/* Adjust navigation buttons to account for new padding */
.swiperCuisine .swiper-button-next,
.swiperCuisine .swiper-button-prev {
  margin-top: -20px;
}
/*END CUISINE HOMEPAGE  */

/* RESTAURANT SECTION HOME */
/* Base card styles */
.swiperSlide {
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  transition: transform 0.3s;
}

.swiperSlide:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.swiperSlide img {
  height: 180px;
  width: 100%;
  object-fit: cover;
}

/* Closed restaurant overlay */
.layer-grey {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(3px);
}

.layer-grey ~ img {
  filter: grayscale(100%) brightness(0.9);
  transform: scale(1.02);
  transition: all 0.4s ease;
}

.make-grey img,
.make-grey el-image {
  filter: grayscale(100%);
  opacity: 0.7;
}

.rounded-box {
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  transition: transform 0.3s, box-shadow 0.3s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.rounded-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.rounded-box img,
.rounded-box el-image {
  height: 180px;
  width: 100%;
  object-fit: cover;
}

.rounded-box .position-relative {
  background: #f8f9fa;
}

.rounded-box .p-2 {
  padding: 16px !important;
}

.swiperSlide:hover .layer-grey {
  background: rgba(255, 255, 255, 0.8);
}

.swiperSlide:hover .layer-grey ~ img {
  filter: grayscale(100%) brightness(1);
  transform: scale(1);
}

/* Closed status text */
/* Next opening time - button style */
.make-grey h6 {
  background: #fff;
  color: #e91e63; /* Netfoodish pink */
  font-size: 0.85rem;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid #ffeaf1;
  display: inline-block;
}

/* Closed overlay */
.layer-grey {
  background: rgba(255, 255, 255, 0.95);
}

.layer-grey ~ img {
  filter: grayscale(100%) brightness(0.95);
}

/* Offer and voucher */
.promo-tag {
  background: linear-gradient(
    45deg,
    rgba(39, 174, 96, 0.85),
    rgba(46, 204, 113, 0.85)
  );
  padding: 6px 12px;
  color: white;
  font-weight: 500;
  font-size: 14px;
  border-radius: 20px;
  margin-bottom: 5px;
  display: inline-block;
}

.voucher-tag {
  background: linear-gradient(
    45deg,
    rgba(255, 107, 107, 0.85),
    rgba(255, 142, 83, 0.85)
  );
  padding: 6px 12px;
  color: white;
  font-weight: 500;
  font-size: 14px;
  border-radius: 20px;
  margin-bottom: 5px;
  display: inline-block;
}
/* Restaurant Name (Already Defined) */
.restaurant-name {
  font-weight: 700;
  font-size: 1.2rem;
  color: #2d3748;
  font-family: "Inter", sans-serif;
  margin-bottom: 0.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* END RESTAURANT SECTION HOME */

/* Store closed notification */
#vue-schedule-order .container-fluid {
  max-width: 1320px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 15px;
  padding-left: 15px;
}

.closed-container {
  background: linear-gradient(45deg, #1a1a2e, #16213e);
  border-radius: 8px;
  padding: 25px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Stars */
.stars {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.stars::before {
  content: "⋆";
  position: absolute;
  top: 20%;
  left: 10%;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
  text-shadow: 100px 40px 0 rgba(255, 255, 255, 0.6),
    200px 80px 0 rgba(255, 255, 255, 0.6), 50px 120px 0 rgba(255, 255, 255, 0.6),
    150px 160px 0 rgba(255, 255, 255, 0.6),
    250px 200px 0 rgba(255, 255, 255, 0.6),
    300px 100px 0 rgba(255, 255, 255, 0.6),
    350px 150px 0 rgba(255, 255, 255, 0.6),
    400px 50px 0 rgba(255, 255, 255, 0.6),
    450px 180px 0 rgba(255, 255, 255, 0.6),
    500px 120px 0 rgba(255, 255, 255, 0.6),
    550px 160px 0 rgba(255, 255, 255, 0.6),
    600px 90px 0 rgba(255, 255, 255, 0.6);
  animation: twinkle 2s infinite alternate;
}

/* ZZZ Animation */
.zzz {
  position: absolute;
}

/* Right side ZZZ */
.zzz:nth-child(1) {
  right: 50px;
  top: 15px;
}

/* Left side ZZZ */
.zzz:nth-child(2) {
  left: 50px;
  top: 25px;
}

/* Bottom right ZZZ */
.zzz:nth-child(3) {
  right: 150px;
  bottom: 25px;
}

.zzz span {
  position: absolute;
  color: rgba(255, 255, 255, 0.7);
  font-size: 24px;
  font-weight: bold;
  opacity: 0;
}

.zzz span:nth-child(1) {
  animation: sleep 3s infinite 0s;
  right: 0;
}

.zzz span:nth-child(2) {
  animation: sleep 3s infinite 1s;
  right: 25px;
}

.zzz span:nth-child(3) {
  animation: sleep 3s infinite 2s;
  right: 50px;
}

#vue-schedule-order h4 {
  color: #ff6b6b;
  font-size: 18px;
  margin-bottom: 10px;
  position: relative;
  text-shadow: 0 2px 4px rgba(255, 107, 107, 0.2);
}

#vue-schedule-order p {
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 15px;
  font-size: 14px;
}

#vue-schedule-order .font-weight-bold {
  display: inline-block;
  color: #fff;
  background: #4caf50;
  padding: 8px 20px;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.3s;
  border: none;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
  position: relative;
  z-index: 2; /* Make sure button is above animations */
}

#vue-schedule-order .font-weight-bold:hover {
  background: #43a047;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
}

/* Animations */
@keyframes twinkle {
  0% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

@keyframes sleep {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(-20px) translateX(20px);
    opacity: 0;
  }
}

/* Responsive adjustments */
@media (max-width: 1400px) {
  #vue-schedule-order .container-fluid {
    max-width: 1140px;
  }
}

@media (max-width: 1200px) {
  #vue-schedule-order .container-fluid {
    max-width: 960px;
  }
}

@media (max-width: 992px) {
  #vue-schedule-order .container-fluid {
    max-width: 720px;
  }
}

@media (max-width: 768px) {
  #vue-schedule-order .container-fluid {
    max-width: 540px;
  }
}

@media (max-width: 576px) {
  #vue-schedule-order .container-fluid {
    max-width: 100%;
  }
}

.sticky-sidebar {
  position: sticky;
  top: 20px;
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/* Menu Header with Icon */
.menu-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid #f0f0f0;
}

.menu-header svg {
  width: 24px;
  height: 24px;
  margin-right: 12px;
  color: green; /* Blue color for icon */
}

.menu-header h5 {
  font-size: 20px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0;
}

/* Category List */
.menu-category {
  padding-right: 5px;
}

.menu-category li {
  margin-bottom: 4px;
}

.menu-category .nav-link {
  display: block;
  padding: 14px 16px;
  color: #4a5568;
  border-radius: 8px;
  transition: all 0.2s ease;
  background-color: #f8f9fa;
  font-weight: 500;
}

.menu-category .nav-link:hover {
  background-color: #f0f7ff;
  color: #333;
  transform: translateX(3px);
}

.menu-category .nav-link.active {
  background-color: #e7f1ff;
  color: green;
  font-weight: 600;
}

/* Skeleton loading styles */
.el-skeleton-item {
  margin-bottom: 8px;
  background-color: rgba(0, 0, 0, 0.05);
}

.menu-item-description {
  background-color: rgba(0, 0, 0, 0.05);
  padding: 1px 2px 1px 2px;
  border-radius: 4px;
  overflow: hidden;
  text-overflow: ellipsis;

  white-space: normal;
}

/* External CSS */
.quantity-container {
  display: flex;
  justify-content: space-between;
  margin: auto;
  border-radius: 50px;
  border: 1px solid #28a745;
  padding: 0.25rem;
  width: 85px;
}

.qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50px;
  background: #f8f9fa;
}

.qty-btn:hover {
  background: #e9ecef;
}

.qty-btn i {
  font-size: 18px;
  color: #28a745;
}

.qty {
  display: flex;
  align-items: center;
  color: #28a745;
}

.add-cart-btn {
  display: inline-block;
  padding: 0.25rem 1rem;
  font-size: 14px;
  color: #fff;
  background: #28a745;
  border-radius: 50px;
  text-decoration: none;
}

.add-cart-btn:hover {
  background: #218838;
  color: #fff;
  text-decoration: none;
}

.address-modal {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, sans-serif;
}

.address-wrapper {
  max-width: 500px;
  margin: 1rem auto;
  padding: 1.5rem;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.icon-wrapper {
  width: 48px;
  height: 48px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: #ebf5ff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-wrapper i {
  font-size: 24px;
  color: #3b82f6;
}

.icon-wrapper.warning {
  background: #fef3c7;
}

.icon-wrapper.warning i {
  color: #d97706;
}

.modal-title {
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 0.5rem;
}

.modal-desc {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 1rem;
  line-height: 1.4;
}

.btn {
  padding: 0.5rem 1.5rem;
  font-weight: 500;
  transition: all 0.2s;
  display: inline-block;
  text-decoration: none;
}

/* Rest of the styles remain same */

/* Mobile app Section */
/* Food-themed Anime Style Mobile App Section */
.food-anime-promo,
.food-anime-promo-mobile {
  position: relative;
  padding: 60px 0;
  margin: 0;
  overflow: hidden;
  background: linear-gradient(145deg, #2a2d4a 0%, #1e263b 100%);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* Food Background Elements */
.food-bg-elements,
.food-bg-elements-mobile {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.food-circle-1,
.food-circle-1-mobile {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    rgba(255, 86, 86, 0.3) 0%,
    rgba(255, 165, 0, 0) 70%
  ); /* Food red */
  top: -250px;
  left: -100px;
  filter: blur(30px);
}

.food-circle-2,
.food-circle-2-mobile {
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    rgba(255, 165, 0, 0.3) 0%,
    rgba(255, 86, 86, 0) 70%
  ); /* Food orange */
  bottom: -200px;
  right: -100px;
  filter: blur(25px);
}

.food-grid,
.food-grid-mobile {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.1;
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.7) 1px,
    transparent 1px
  );
  background-size: 25px 25px;
}

/* Floating Food Elements */
.floating-food,
.floating-food-mobile {
  position: absolute;
  width: 45px;
  height: 45px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.7;
  z-index: 2;
  animation: float-food 6s ease-in-out infinite;
  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.3));
}

.pizza {
  top: 20%;
  left: 5%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23FFC107' d='M165.537 26.615C82.522 52.542 0 129.02 0 199.348c0 15.727 5.102 30.375 14.367 43.498 19.432 28.47 59.129 48.13 106.129 57.065l146.213 186.474c8.99 11.463 28.592 11.463 37.582 0l146.213-186.474c47-8.935 86.696-28.594 106.129-57.065 9.264-13.123 14.367-27.771 14.367-43.498 0-70.328-82.523-146.806-165.537-172.733C383.498 18.872 339.534 0 256 0s-127.498 18.872-90.463 26.615z'/%3E%3Cpath fill='%23E64A19' d='M406.496 195.113c0-74.358-116.45-165.075-150.496-178.02-34.016 12.929-150.496 103.662-150.496 178.02 0 22.883 11.288 31.125 20.492 19.63 15.63-19.497 130.004-121.58 130.004-121.58s114.374 102.082 130.004 121.58c9.204 11.496 20.492 3.253 20.492-19.63z'/%3E%3Ccircle fill='%23FFF' cx='206.919' cy='82.92' r='14.629'/%3E%3Ccircle fill='%23FFF' cx='151.749' cy='136.762' r='14.629'/%3E%3Ccircle fill='%23FFF' cx='268.474' cy='135.061' r='14.629'/%3E%3C/svg%3E");
  animation-delay: 0s;
}

.burger {
  top: 15%;
  right: 8%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23FFA000' d='M489.2 335.553H22.8c-7.953 0-14.4-6.447-14.4-14.4v-5.39c0-7.952 6.447-14.4 14.4-14.4h466.4c7.953 0 14.4 6.448 14.4 14.4v5.39c0 7.953-6.447 14.4-14.4 14.4z'/%3E%3Cpath fill='%23D32F2F' d='M496.263 228.698c8.656-18.739 6.06-40.93-7.699-56.983-13.95-16.272-35.12-23.214-55.005-18.12-4.335 1.113-20.254 6.118-45.075 14.36-24.242 8.05-56.916 18.905-91.814 30.453-15.372 5.084-31.266 10.322-47.223 15.558-18.217 5.985-36.49 11.97-54.131 17.63-19.773 6.351-38.915 12.47-56.742 18.043-17.826 5.574-34.338 10.608-48.565 14.834-14.228 4.227-26.171 7.629-34.4 9.835-8.228 2.205-12.715 3.214-12.736 3.207-5.96.827-11.827 3.13-16.89 6.778-10.578 7.62-16.684 20.205-16.11 33.214.577 13.008 7.935 24.85 19.431 31.374 5.497 3.096 11.776 4.731 18.146 4.731h432c6.37 0 12.649-1.635 18.146-4.731 11.496-6.524 18.854-18.366 19.431-31.374.574-13.01-5.532-25.593-16.111-33.214-5.064-3.649-10.93-5.951-16.89-6.778-.021.006-4.508-1.003-12.736-3.207-8.229-2.206-20.172-5.608-34.4-9.835-14.227-4.227-30.739-9.261-48.565-14.834-1.923-.601-3.872-1.209-5.832-1.824l-62.86-93.58c-7.08-10.545-17.28-18.4-29.222-22.452-11.927-4.046-24.836-3.923-36.682.348-12.183 4.4-21.936 12.773-28.056 24.134l-8.07 14.998-8.07-14.998c-6.12-11.362-15.873-19.735-28.056-24.134-11.846-4.27-24.755-4.394-36.682-.348-11.942 4.051-22.142 11.907-29.222 22.452l-62.86 93.58c-1.96.615-3.908 1.223-5.832 1.824-17.826 5.574-34.338 10.608-48.565 14.834-14.228 4.227-26.171 7.629-34.4 9.835-8.228 2.205-12.715 3.214-12.736 3.207-4.564.634-9.02 2.074-13.053 4.223l59.484-88.23c4.44-6.6 7.904-13.828 10.3-21.449z'/%3E%3Cpath fill='%23FFEB3B' d='M481.6 242.363h-128v-3.2c0-5.302-4.298-9.6-9.6-9.6s-9.6 4.298-9.6 9.6v3.2h-9.6v-6.4c0-5.302-4.298-9.6-9.6-9.6s-9.6 4.298-9.6 9.6v6.4h-9.6v-3.2c0-5.302-4.298-9.6-9.6-9.6s-9.6 4.298-9.6 9.6v3.2h-9.6v-6.4c0-5.302-4.298-9.6-9.6-9.6s-9.6 4.298-9.6 9.6v6.4h-9.6v-3.2c0-5.302-4.298-9.6-9.6-9.6s-9.6 4.298-9.6 9.6v3.2h-9.6v-6.4c0-5.302-4.298-9.6-9.6-9.6s-9.6 4.298-9.6 9.6v6.4h-9.6v-3.2c0-5.302-4.298-9.6-9.6-9.6s-9.6 4.298-9.6 9.6v3.2h-9.6v-6.4c0-5.302-4.298-9.6-9.6-9.6s-9.6 4.298-9.6 9.6v6.4h-9.6v-3.2c0-5.302-4.298-9.6-9.6-9.6s-9.6 4.298-9.6 9.6v3.2h-9.6v-6.4c0-5.302-4.298-9.6-9.6-9.6s-9.6 4.298-9.6 9.6v6.4H30.4c-5.302 0-9.6 4.298-9.6 9.6v22.4c0 6.627 5.373 12 12 12h446.4c6.627 0 12-5.373 12-12v-22.4c0-5.302-4.298-9.6-9.6-9.6z'/%3E%3Cpath fill='%23388E3C' d='M499.2 393.753H12.8c-7.069 0-12.8-5.731-12.8-12.8v-16c0-7.069 5.731-12.8 12.8-12.8h486.4c7.069 0 12.8 5.731 12.8 12.8v16c0 7.069-5.731 12.8-12.8 12.8z'/%3E%3C/svg%3E");
  animation-delay: 1s;
}

.sushi {
  bottom: 25%;
  right: 6%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23CFD8DC' d='M490.372 373.262v19.733h-6.578v-19.733c0-5.499-4.343-10.089-9.841-10.301-5.69-.219-10.385 4.301-10.385 9.931v20.104h-6.578v-19.733c0-5.499-4.343-10.089-9.841-10.301-5.69-.219-10.385 4.301-10.385 9.931v20.104h-6.578v-19.733c0-5.499-4.343-10.089-9.841-10.301-5.69-.219-10.386 4.301-10.386 9.931v20.104h-6.578v-19.733c0-5.499-4.343-10.089-9.841-10.301-5.69-.219-10.385 4.301-10.385 9.931v20.104h-6.578v-19.733c0-5.499-4.343-10.089-9.841-10.301-5.69-.219-10.386 4.301-10.386 9.931v20.104h-6.578v-19.733c0-5.499-4.343-10.089-9.841-10.301-5.69-.219-10.385 4.301-10.385 9.931v20.104h-6.578v-19.733c0-5.499-4.343-10.089-9.841-10.301-5.69-.219-10.386 4.301-10.386 9.931v20.104h-6.578v-19.733c0-5.499-4.343-10.089-9.841-10.301-5.69-.219-10.385 4.301-10.385 9.931v20.104h-6.578v-19.733c0-5.499-4.343-10.089-9.841-10.301-5.69-.219-10.386 4.301-10.386 9.931v20.104h-6.578v-19.733c0-5.499-4.343-10.089-9.841-10.301-5.69-.219-10.385 4.301-10.385 9.931v20.104h-6.578v-19.733c0-5.499-4.343-10.089-9.841-10.301-5.69-.219-10.386 4.301-10.386 9.931v20.104h-6.578v-19.733c0-5.499-4.343-10.089-9.841-10.301-5.69-.219-10.385 4.301-10.385 9.931v20.104h-6.578v-19.733c0-5.499-4.343-10.089-9.841-10.301-5.69-.219-10.386 4.301-10.386 9.931v20.104h-6.578v-19.733c0-5.499-4.343-10.089-9.841-10.301-5.69-.219-10.385 4.301-10.385 9.931v20.104h-6.578v-19.733c0-5.499-4.343-10.089-9.841-10.301-5.69-.219-10.386 4.301-10.386 9.931v20.104h-6.578v-19.733c0-5.499-4.343-10.089-9.841-10.301-5.69-.219-10.385 4.301-10.385 9.931v20.104h-6.578v-19.733c0-5.499-4.343-10.089-9.841-10.301-5.69-.219-10.386 4.301-10.386 9.931v20.104h-6.578v-19.733c0-5.499-4.343-10.089-9.841-10.301-5.69-.219-10.385 4.301-10.385 9.931v20.104h-6.577v-19.733c0-5.499-4.343-10.089-9.841-10.301-5.69-.219-10.386 4.301-10.386 9.931v20.104H21.628v-19.733c0-5.499-4.343-10.089-9.841-10.301-5.69-.219-10.385 4.301-10.385 9.931v20.104H0v26.311h512v-26.311h-1.401v-20.104c0-5.631-4.695-10.149-10.385-9.931-5.499.212-9.842 4.801-9.842 10.301z'/%3E%3Cellipse fill='%23F8C9AD' cx='256' cy='156.361' rx='241.115' ry='97.41'/%3E%3Cpath fill='%23EDFFFB' d='M479.367 136.629c-15.771 38.26-107.35 71.143-223.367 71.143S48.404 174.888 32.633 136.629C63.363 75.09 152.103 58.952 256 58.952s192.637 16.139 223.367 77.677z'/%3E%3Cpath fill='%23607D8B' d='M256 227.771c-133.107 0-241.115-50.131-241.115-111.819S122.893 4.132 256 4.132s241.115 50.131 241.115 111.819S389.107 227.771 256 227.771zm0-194.82c-125.654 0-227.894 45.66-227.894 83S130.346 199.952 256 199.952s227.894-45.66 227.894-83-102.24-83.001-227.894-83.001z'/%3E%3Cpath fill='%23B81739' d='M86.82 106.229c-.386 0-.779-.035-1.174-.109-5.636-1.052-9.354-6.457-8.301-12.093 1.052-5.636 6.456-9.352 12.094-8.301 5.636 1.052 9.354 6.457 8.301 12.093-.929 4.982-5.293 8.41-10.92 8.41zm328.36 0c-.386 0-.779-.035-1.174-.109-5.636-1.052-9.354-6.457-8.301-12.093 1.052-5.636 6.456-9.352 12.094-8.301 5.636 1.052 9.354 6.457 8.301 12.093-.929 4.982-5.293 8.41-10.92 8.41zM256 128c-.386 0-.779-.035-1.174-.109-5.636-1.052-9.354-6.457-8.301-12.093 1.052-5.636 6.457-9.352 12.094-8.301 5.636 1.052 9.354 6.457 8.301 12.093-.93 4.982-5.294 8.41-10.92 8.41z'/%3E%3C/svg%3E");
  animation-delay: 3s;
}

.fries {
  bottom: 20%;
  left: 8%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23E53935' d='M422.957 156.045v-32.818h-68.696c-.574-9.37-8.348-16.81-17.87-16.81-9.911 0-17.945 8.033-17.945 17.945v31.683H156.992v-49.628c0-9.911-8.033-17.945-17.945-17.945S121.102 96.506 121.102 106.417v49.628H89.043v32.818h38.485l18.732 225.272h207.48l18.732-225.272h50.485z'/%3E%3Cpath fill='%23FFC107' d='M189.217 415.135l-13.036-156.964-11.31 156.964h-17.911L128.228 189.863h331.544l-18.732 225.272h-17.911l-11.31-156.964-13.036 156.964z'/%3E%3Cpath fill='%23FFA000' d='M262.899 259.154h-13.798l-25.101 155.982h63.999l-25.101-155.982z'/%3E%3Cpath fill='%23E53935' d='M413.63 139.235c0 9.911-8.033 17.945-17.945 17.945-2.483 0-4.847-.505-6.998-1.417-1.15-.488-2.246-1.092-3.273-1.795-4.592-3.161-7.673-8.49-7.673-14.733 0-1.2.12-2.37.346-3.505.999-4.98 4.051-9.169 8.239-11.567 2.246-1.292 4.83-2.104 7.621-2.266.244-.016.49-.03.738-.03 9.911 0 17.945 8.033 17.945 17.945v-.577zm-104.348 0c0 9.911-8.033 17.945-17.945 17.945-9.911 0-17.945-8.033-17.945-17.945 0-9.911 8.033-17.945 17.945-17.945 9.912.001 17.945 8.034 17.945 17.945zm-142.235 0c0 9.911-8.033 17.945-17.945 17.945-9.911 0-17.945-8.033-17.945-17.945 0-9.911 8.033-17.945 17.945-17.945 9.912.001 17.945 8.034 17.945 17.945z'/%3E%3Cpath fill='%23FFA000' d='M331.68 155.902c-3.059 2.109-6.784 3.359-10.825 3.359-7.569 0-14.02-4.717-16.623-11.359H207.768c-2.604 6.642-9.055 11.359-16.623 11.359-4.042 0-7.767-1.25-10.825-3.359h-31.183c1.467 8.618 8.967 15.208 18.04 15.208 4.042 0 7.767-1.25 10.825-3.359h134.994c3.059 2.109 6.784 3.359 10.825 3.359 9.074 0 16.573-6.59 18.04-15.208H331.68zm-175.598 0c-3.059 2.109-6.784 3.359-10.825 3.359-9.074 0-16.573-6.59-18.04-15.208h29.7c-1.467 8.618.996 9.739.996 9.739l-1.831 2.11zm207.553-15.208c1.467 8.618 8.967 15.208 18.04 15.208 4.042 0 7.767-1.25 10.825-3.359h2.302V139.234h-31.167v1.46z'/%3E%3C/svg%3E");
  animation-delay: 2s;
}

.coffee {
  top: 30%;
  right: 25%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23795548' d='M402.722 307.395v-205.01C402.722 85.72 388.366 73 370.783 73H141.222c-17.583 0-31.94 12.72-31.94 29.385v205.01c0 16.665 14.356 29.384 31.94 29.384h229.561c17.583 0 31.939-12.719 31.939-29.384z'/%3E%3Cpath fill='%23FFF9C4' d='M129.415 73c-12.074 0-21.872 12.72-21.872 28.404v73.925S151.326 217.94 256 217.94s148.457-42.61 148.457-42.61v-73.925c0-15.684-9.798-28.404-21.872-28.404H129.415z'/%3E%3Cpath fill='%23A1887F' d='M359.2 307.395v-52.174c-32.161 15.74-68.354 22.268-103.21 22.268s-71.049-7.267-103.21-22.268v52.174c0 16.665 14.356 29.384 31.94 29.384h143.47c17.583 0 31.01-12.719 31.01-29.384z'/%3E%3Cpath fill='%23D7CCC8' d='M256 148.555c104.677 0 148.457-42.61 148.457-42.61s-43.78-42.61-148.457-42.61S107.543 105.946 107.543 105.946s43.781 42.61 148.458 42.61z'/%3E%3Cpath fill='%23BCAAA4' d='M363.31 424.333h-214.62c-9.171 0-16.564 8.58-15.534 19.021 1.009 10.204 9.219 18.312 19.464 18.312h206.76c10.245 0 18.455-8.107 19.464-18.312 1.03-10.441-6.362-19.021-15.534-19.021z'/%3E%3Cpath fill='%23EEEEEE' d='M349.617 424.333h-187.23c-8.022 0-14.493 8.58-13.591 19.021.883 10.204 8.067 18.312 17.031 18.312h180.349c8.964 0 16.148-8.107 17.031-18.312.901-10.441-5.57-19.021-13.59-19.021z'/%3E%3Cpath fill='%23D7CCC8' d='M311.652 338.089H200.348c-8.556 0-15.489 6.933-15.489 15.489v77.443c0 8.556 6.933 15.489 15.489 15.489h111.304c8.556 0 15.489-6.933 15.489-15.489v-77.443c0-8.555-6.934-15.489-15.489-15.489z'/%3E%3C/svg%3E");
  animation-delay: 2.5s;
}

@keyframes float-food {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.7;
  }
  50% {
    transform: translateY(-15px) rotate(10deg);
    opacity: 0.9;
  }
}

/* Typography */
.food-heading {
  font-size: 40px;
  font-weight: 700;
  color: white;
  margin-bottom: 20px;
  position: relative;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 2;
}

.food-description {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 30px;
  z-index: 2;
  position: relative;
}

/* Badge */
.food-badge {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 15px;
  background: #ff0066; /* Netfoodish pink */
  box-shadow: 0 5px 15px rgba(255, 0, 102, 0.3);
  z-index: 2;
  position: relative;
}

.download-badge {
  background: #1976d2; /* Blue for the download badge */
  box-shadow: 0 5px 15px rgba(25, 118, 210, 0.3);
}

.food-badge span {
  color: white;
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Feature List */
.food-feature-list,
.food-feature-list-mobile {
  list-style: none;
  padding: 0;
  margin: 0 0 30px 0;
  position: relative;
  z-index: 2;
}

.food-feature-list li,
.food-feature-list-mobile li {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  transition: transform 0.3s ease, background 0.3s ease;
}

.food-feature-list li:hover,
.food-feature-list-mobile li:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.15);
}

.food-feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #ff5722; /* Food orange */
  border-radius: 50%;
  margin-right: 12px;
  box-shadow: 0 3px 6px rgba(255, 87, 34, 0.3);
}

.food-feature-icon svg {
  width: 18px;
  height: 18px;
  color: white;
}

.food-feature-list li span,
.food-feature-list-mobile li span {
  font-size: 16px;
  font-weight: 500;
  color: white;
}

/* Phone Container */
.food-phone-container,
.food-phone-container-mobile {
  position: relative;
  padding: 20px;
  z-index: 2;
  display: flex;
  justify-content: center;
}

.food-phone-frame,
.food-phone-frame-mobile {
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.2));
  transform-style: preserve-3d;
  animation: float 6s ease-in-out infinite;
  border-radius: 25px;
  overflow: hidden;
  border: 5px solid white;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

.food-phone-img,
.food-phone-img-mobile {
  max-width: 100%;
  height: auto;
  border-radius: 22px;
  transform: scale(1.01);
}

.food-phone-shadow,
.food-phone-shadow-mobile {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 20px;
  background: rgba(0, 0, 0, 0.25);
  filter: blur(15px);
  border-radius: 50%;
  z-index: 1;
  animation: shadow-pulse 6s ease-in-out infinite;
}

.food-plate {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
  height: 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  z-index: 1;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

/* Steam Animation */
.steam-container,
.steam-container-mobile {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 30px;
  z-index: 3;
}

.steam {
  position: absolute;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0;
  filter: blur(8px);
  animation: steam 5s ease-in-out infinite;
}

.steam-one {
  left: 10px;
  animation-delay: 0.5s;
}

.steam-two {
  left: 25px;
  animation-delay: 1s;
}

.steam-three {
  right: 10px;
  animation-delay: 1.5s;
}

.steam-four {
  right: 25px;
  animation-delay: 2s;
}

@keyframes steam {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0;
  }
  15% {
    opacity: 0.8;
  }
  50% {
    transform: translateY(-20px) scale(2);
    opacity: 0;
  }
  100% {
    transform: translateY(-40px) scale(1);
    opacity: 0;
  }
}

/* Food Sparkles */
.food-sparkle {
  position: absolute;
  width: 15px;
  height: 15px;
  background-color: #ffc107; /* Food yellow */
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
  z-index: 3;
  animation: sparkle 3s ease-in-out infinite;
}

.sparkle-1 {
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.sparkle-2 {
  top: 10%;
  right: 15%;
  animation-delay: 1s;
}

.sparkle-3 {
  bottom: 20%;
  left: 15%;
  animation-delay: 2s;
}

.sparkle-mobile-1 {
  top: 10%;
  left: 20%;
  animation-delay: 0.5s;
}

.sparkle-mobile-2 {
  top: 5%;
  right: 20%;
  animation-delay: 1.5s;
}

/* Download Buttons */
.food-download-buttons,
.food-download-buttons-mobile {
  display: flex;
  flex-direction: column;
  gap: 15px;
  position: relative;
  z-index: 2;
}

.food-store-btn {
  position: relative;
  display: inline-block;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.food-store-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.food-store-btn img {
  height: 46px;
  width: auto;
  display: block;
}

/* Content Containers */
.food-text-content,
.food-download-content {
  position: relative;
  z-index: 2;
  color: white;
  padding: 20px;
}

/* Animations */
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

@keyframes shadow-pulse {
  0%,
  100% {
    opacity: 0.5;
    transform: translateX(-50%) scale(1);
  }
  50% {
    opacity: 0.3;
    transform: translateX(-50%) scale(0.8);
  }
}

@keyframes sparkle {
  0%,
  100% {
    opacity: 0;
    transform: scale(0) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1) rotate(180deg);
  }
}

/* Mobile Version Adjustments */
.food-anime-promo-mobile {
  padding: 40px 0;
}

.food-feature-list-mobile {
  display: inline-block;
  text-align: left;
  margin: 0 auto 30px auto;
  max-width: 85%;
}

.food-download-buttons-mobile {
  align-items: center;
  margin-bottom: 30px;
}

.floating-food-mobile {
  width: 35px;
  height: 35px;
  animation-duration: 5s;
}

.pizza-mobile {
  top: 15%;
  left: 10%;
}

.burger-mobile {
  top: 10%;
  right: 10%;
}

.sushi-mobile {
  top: 25%;
  left: 25%;
}

@media (max-width: 767px) {
  .food-heading {
    font-size: 30px;
  }

  .food-description {
    font-size: 16px;
  }

  .food-badge span {
    font-size: 14px;
  }

  .food-feature-list-mobile li span {
    font-size: 15px;
  }

  .food-store-btn img {
    height: 40px;
  }
}
/* End app section */

/* v 2.0.3 */