/* Make prev/next controls full height */
.carousel-control-prev,
.carousel-control-next {
  top: 0;
  bottom: 0;
  width: 10%; /* adjust width as needed */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1; /* always visible */

}

/* Gradient background for prev (left side) */
.carousel-control-prev {
  background: linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0));
}

/* Gradient background for next (right side) */
.carousel-control-next {
  background: linear-gradient(to left, rgba(0,0,0,0.7), rgba(0,0,0,0));
}

/* Optional: make icons larger and white */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-size: 2rem 2rem;
  filter: invert(1) !important; /* ensures white icons */
}