.btn-primary {
  background-color: hsl(45, 91%, 58%);
  color: hsl(249, 37%, 19%);
}

.btn-secondary {
  background-color: hsl(220, 13%, 95%);
  color: hsl(249, 37%, 19%);
}

.filter-btn.active {
  background-color: hsl(45, 91%, 58%) !important;
  color: hsl(249, 37%, 19%) !important;
}

.tag.vegetarian {
  background-color: hsl(88, 50%, 60%);
}
.tag.spicy {
  background-color: hsl(0, 100%, 66%);
}
.tag.seafood {
  background-color: #87ceeb;
}
.tag.gluten-free {
  background-color: #e6d4b3;
}
.tag.popular {
  background-color: hsl(45, 91%, 58%);
}
.tag.healthy {
  background-color: #98fb98;
}

.card-badge.green {
  background-color: hsl(88, 50%, 60%);
  color: hsl(249, 37%, 19%);
}
.card-badge.red {
  background-color: hsl(0, 100%, 66%);
  color: hsl(249, 37%, 19%);
}
.card-badge.chef-special {
  background-color: gold;
  color: hsl(249, 37%, 19%);
}
.card-badge.new {
  background-color: #9370db;
  color: white;
}

@keyframes scaleUp {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-5px) scale(1.05);
  }
}

@keyframes moveUp {
  0%,
  100% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(-3px);
  }
  50% {
    transform: translateY(-8px);
  }
}

.animate-scale-up {
  animation: scaleUp 3s ease-in-out infinite;
}

.animate-move-up {
  animation: moveUp 3s ease-in-out infinite;
}

.animation-delay-1000 {
  animation-delay: 1s;
}

.animation-delay-2000 {
  animation-delay: 2s;
}

.cart-box {
  transform: translateX(100%);
  transition: transform 0.5s ease-in-out;
  visibility: hidden;
}

.cart-box.active {
  transform: translateX(0);
  visibility: visible;
}

.navbar-nav {
  transform: translateY(12px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.3s ease-in-out;
}

.navbar-nav.active {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.menu-toggle-btn.active .one {
  transform: translateY(7px) rotate(-45deg);
}

.menu-toggle-btn.active .two {
  transform: rotate(45deg);
}

.menu-toggle-btn.active .three {
  transform: translateY(-7px) rotate(-45deg);
}


.cart-box-ul::-webkit-scrollbar {
  display: none;
}

.cart-box-ul {
  -ms-overflow-style: none; 
  scrollbar-width: none; 
}

.home-right {
  position: relative;
  aspect-ratio: 10 / 11;
  padding-top: 20%;
}

.food-img {
  position: absolute;
  width: 60%;
}
.food-1 { top: 25%; left: -4%; animation: scaleUp 3s ease-in-out infinite; }
.food-2 { top: 0; right: -4%; animation: scaleUp 2s ease-in-out infinite; }
.food-3 { bottom: -4%; right: -4%; animation: scaleUp 4s ease-in-out infinite; }


.dialog {
  position: absolute;
  filter: drop-shadow(0px 2px 46px hsla(0, 0%, 0%, 0.4));
}
.dialog-1 { top: 10%; right: 15%; }
.dialog-2 { bottom: 20%; right: 5%; }

.shape {
  position: absolute;
  filter: drop-shadow(0px 3px 6px hsla(0, 0%, 0%, 0.1));
}
.shape-1 { top: 0; left: 5%; animation: scaleUp 2s 3s ease-in-out infinite; }
.shape-2 { right: 0; top: 55%; animation: scaleUp 3s 4s ease-in-out infinite; }
.shape-3 { bottom: 5%; left: 5%; animation: scaleUp 3s 1s ease-in-out infinite; }
.shape-4 { top: 35%; right: 0; animation: moveUp 3s 1s ease-in-out infinite; }
.shape-5 { top: 60%; left: 0; animation: moveUp 3s ease-in-out infinite; }

@keyframes scaleUp {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-5px) scale(1.05); }
}

@keyframes moveUp {
  0%, 100% { transform: translateY(0); }
  20% { transform: translateY(-3px); }
  50% { transform: translateY(-8px); }
}

@media (min-width: 1024px) {
  .dialog-1,
  .dialog-2 {
    width: 260px;
  }
}