.carousel-control-next,
.carousel-control-prev {
  margin: 0 0.5rem;
  width: 5%;
}
.carousel-control-prev-icon {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23FFF" class="bi bi-chevron-left" viewBox="0 0 16 16"><path d="M8,0c4.4,0,8,3.6,8,8s-3.6,8-8,8s-8-3.6-8-8S3.6,0,8,0z M5.1,8.3l5.1,5.5c0.2,0.2,0.4,0.2,0.6,0 c0.2-0.2,0.2-0.5,0-0.6L6,8l4.8-5.2c0.2-0.2,0.2-0.5,0-0.6c-0.2-0.2-0.4-0.2-0.6,0c0,0,0,0,0,0L5.1,7.7C5,7.8,5,8.2,5.1,8.3z"/></svg>');
}
.carousel-control-next-icon {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23FFF" class="bi bi-chevron-right" viewBox="0 0 16 16"><path class="st0" d="M8,0C3.6,0,0,3.6,0,8s3.6,8,8,8s8-3.6,8-8S12.4,0,8,0z M10.9,8.3l-5.1,5.5c-0.2,0.2-0.4,0.2-0.6,0 c-0.2-0.2-0.2-0.5,0-0.6L10,8L5.1,2.8C5,2.6,5,2.3,5.1,2.1C5.3,2,5.6,2,5.7,2.1c0,0,0,0,0,0l5.1,5.5C11,7.8,11,8.2,10.9,8.3z"/></svg>');
}

/* Carousel indicators - small pagination dots */
.carousel-indicators {
  gap: 4px;
  margin-bottom: 1rem;
}

.carousel-indicators button,
.carousel-indicators [data-bs-target] {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background-color: rgba(255, 255, 255, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  opacity: 1 !important;
  margin: 0 3px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  transition: all 0.2s ease;
}

.carousel-indicators button.active,
.carousel-indicators [data-bs-target].active,
.carousel-indicators .active {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  transform: scale(1.2);
}

.carousel-indicators button:hover,
.carousel-indicators [data-bs-target]:hover {
  background-color: rgba(255, 255, 255, 0.7) !important;
}

/* Large Desktop */
@media screen and (min-width: 1200px) {
  .carousel-control-next,
  .carousel-control-prev {
    margin: 0;
  }
}