.swiper-button-next,
.swiper-button-prev {
  background: white;       /* White background */
  color: black;            /* Black arrow */
  width: 35px;             /* Smaller size */
  height: 35px;
  border-radius: 50%;      /* Circle */
  box-shadow: 0 2px 6px rgba(0,0,0,0.2); /* Subtle shadow */
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 16px;  /* Smaller arrow icon */
}
@media (max-width: 640px) { /* mobile screens */
  .swiper-button-next,
  .swiper-button-prev {
    display: none !important;
  }
}
.category-box img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.category-box img:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

/* Adjust for iPads/tablets */
@media (max-width: 992px) {
  .category-box img {
    height: 160px;
  }
}

/* Adjust for mobile */
@media (max-width: 576px) {
  .category-box img {
    height: 140px;
  }
}
@keyframes fadeOut {
      to {
        opacity: 0;
        transform: translateY(-10px);
        visibility: hidden;
      }
    }

    .fade-out {
      animation: fadeOut 0.3s ease forwards;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .animate-fadeIn {
      animation: fadeIn 0.4s ease-out;
    }