:root {
  --modaic-background: #ffffff;
  --primary-color: #000000;
  --secondary-color: #ffffff;
  --text-color: #000000;
  --text-hover-red: #d23e3e;
  --icon-stock: #000000;
  --background-color: #efefef;
  --text-active-color: #d23e3e;
}

.overlay-five {
  position: fixed;
  top: 0;
  left: 0;
  width: 50%; /* Adjusted width here */
  height: 100%;
  background: rgba(255, 255, 255, 1);
  z-index: 999;
}

.overlay-five.slide-in {
  animation: slideIn 0.3s ease-in-out forwards;
}

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.overlay-five.slide-out {
  animation: slideOut 0.3s ease-in-out forwards;
}

@keyframes slideOut {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.variant-hover:hover {
  background-color: var(--primary-color) !important;
  color: var(--secondary-color) !important;
}
.active-cls:hover {
  border: 2px solid var(--text-hover-red) !important;
}

.menu-item {
  transition: color 200ms ease-in-out;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}

.slide-down {
  animation: slideDown 0.5s ease-out forwards;
}

.slide-up {
  animation: slideUp 0.5s ease-out forwards;
}

/* swiper5 css */
.swiper-pagination-bullet-active-five {
  opacity: 100;
  background: black;
}

.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  border-radius: 20%;
  margin: 5px;
}

.categorySwiper .swiper-horizontal > .swiper-pagination-bullets,
.categorySwiper .swiper-pagination-bullets.swiper-pagination-horizontal {
  position: static;
}

@media screen and (max-width: 768px) {
  .swiper-pagination,
  .swiper-button-prev,
  .swiper-button-next {
    display: none;
  }
}

/* // product five css  */
/* For Chrome, Safari, Edge, Opera */

.no-spinner {
  &::-webkit-outer-spin-button,
  &::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* For Firefox */
  &[type='number'] {
    -moz-appearance: textfield;
  }
}

.active {
  color: var(--text-active-color);
  font-weight: bold;
  /* Add any additional styles for the active menu item */
}

.custom-scrollbar {
  overflow-x: auto;
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #e4e4e6 #fefefe; /* Firefox */
  scroll-behavior: smooth;
}