:root {
  --slider-bg: #ffffff;
  --dot: rgba(0, 0, 0, 0.35);
  --dot-active: #111;
}

html, body {
  background: var(--slider-bg);
}

/* Slider wrapper */
.auto-slider {
  width: 100%;
  overflow: hidden;
  background: var(--slider-bg);
  position: relative;
}

/* Banner height (Daraz/Amazon style) */
.auto-slider .carousel-inner,
.auto-slider .carousel-item {
  height: 180px; /* Mobile */
}

/* Tablet */
@media (min-width: 576px) {
  .auto-slider .carousel-inner,
  .auto-slider .carousel-item {
    height: 220px;
  }
}

/* Desktop */
@media (min-width: 992px) {
  .auto-slider .carousel-inner,
  .auto-slider .carousel-item {
    height: 300px;
  }
}

/* Image */
.auto-slider .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

/* Optional overlay (premium look) */
.auto-slider .carousel-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.25), transparent);
}

/* Indicators (dots) */
.auto-slider .carousel-indicators {
  margin-bottom: 0.5rem;
}

.auto-slider .carousel-indicators [data-bs-target] {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background-color: var(--dot);
  border: none;
  opacity: 1;
  transition: all 0.3s ease;
}

.auto-slider .carousel-indicators .active {
  width: 24px;
  background-color: var(--dot-active);
}