.carousel-item {
  position: relative;
}
.carousel-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4); /* Change this for other overlay colors */
  z-index: 1;
}
.carousel-caption {
  position: absolute;
  z-index: 2; /* Ensure it appears above the overlay */
}
#carouselExampleCaptions .carousel-indicators button {
  width: 12px; /* Equal width */
  height: 12px; /* Equal height */
  border-radius: 50%; /* Makes it a circle */
  background-color: #ffffff; /* Default color */
  border: none;
  opacity: 0.5;
  margin: 0 6px;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}
#carouselExampleCaptions .carousel-indicators .active {
  background-color: #000000; /* Active color */
  opacity: 1;
  transform: scale(1.2); /* Slight zoom on active */
}
@media (max-width: 768px) {
  #carouselExampleCaptions .carousel-inner .carousel-item img {
    /* Example mobile-specific styles: */
    height: 350px;
    object-fit: cover;
    width: 100%;
  }
}