.top_category-scroll {
  display: flex;
  overflow-x: auto;
  gap: 1rem;
  padding: 1rem;
  background-color: #fff;
  white-space: nowrap;
  scroll-behavior: smooth;

  /* Scrollbar styling for Firefox */
  scrollbar-width: thin;
  scrollbar-color: #ecbecc  #f1f1f1;
}

/* Scrollbar styling for WebKit browsers (Chrome, Safari, Edge) */
.top_category-scroll::-webkit-scrollbar {
  height: 8px;
}

.top_category-scroll::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.top_category-scroll::-webkit-scrollbar-thumb {
  background: #ecbecc;
  border-radius: 10px;
  transition: background 0.3s;
}

.top_category-scroll::-webkit-scrollbar-thumb:hover {
  background:#ecbecc;
}

.top_category-card {
  flex: 0 0 auto;
  position: relative;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease;

  /* Fixed size for consistency */
  width: 120px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.top_category-card:hover {
  transform: scale(1.03);
}

.top_category-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.top_category-title {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  padding: 0.5rem;
  background: #ff135d8f;
  color:black;
  font-size: 0.85rem;
  font-weight: 600;
}

/* Show 10 items on desktop */
@media (min-width: 768px) {
  .top_category-card {
    min-width: calc(100% / 10 - 1rem);
  }
}

/* Show 4 items on mobile */
@media (max-width: 767.98px) {
  .top_category-card {
    min-width: calc(100% / 4 - 1rem);
  }
}