:root {
  --primary: #f28241;
  --blood: #a60303;
  --dark: #0d0d0d;
  --light: #f2f2f2;
}

.text-primary {
  color: var(--primary);
}

.bg-primary {
  background-color: var(--primary);
}

.text-blood {
  color: var(--blood);
}

.bg-blood {
  background-color: var(--blood);
}

.text-dark {
  color: var(--dark);
}

.bg-dark {
  background-color: var(--dark);
}

.text-light {
  color: var(--light);
}

.bg-light {
  background-color: var(--light);
}
/* Style */

#mobile-menu {
  left: 15%;
  z-index: 4;
  /* backdrop-filter: blur(10px); */
  box-shadow: inset 0 0 10px rgba(255, 0, 0, 0.357), 0 0 10px #00000036;
}

#dropdown {
  /* backdrop-filter: blur(10px); */
  background-color: white;
  box-shadow: inset 0 0 10px rgba(255, 0, 0, 0.357), 0 0 10px #00000036;
  z-index: 3;
}

.card-wrapper {
  perspective: 1000px;
  width: 100%;
  max-width: 400px;
  margin: auto;
}

.card {
  transition: transform 0.1s ease;
  transform-style: preserve-3d;
  will-change: transform;
  box-shadow: 0 5px 10px #00000024;
}

.card:hover {
  cursor: pointer;
}

.category-slider {
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none; /* Firefox */
}
.category-slider::-webkit-scrollbar {
  display: none; /* Chrome */
}

.category-track {
  display: inline-flex;
  /* gap: 10px; */
}

.category-item {
  flex: 0 0 auto;
  width: 20rem;
  border: 1px solid #ddd;
  /* margin: 0 !important; */
  padding: 12px 20px;
  font-weight: 600;
  transition: transform 0.3s, box-shadow 0.3s;
}

.swiper-slide {
  width: 22rem !important;
}
.swiper {
  width: 100%;
  /* height: 320px; */
}