/* Custom Bootstrap Overrides */

/* Make carousel control icons black */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(1);
  /* ensure visibility on all screens */
  opacity: 1;
}

/* Optional: adjust hover opacity */
.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
  opacity: 0.8;
}

/* Ensure no change on mobile — same color applies */
@media (max-width: 767.98px) {
  .carousel-control-prev-icon,
  .carousel-control-next-icon {
    filter: invert(1);
    opacity: 1;
  }
}

/* ============================= */
/* Carousel arrow positioning */
/* ============================= */

.carousel-control-prev,
.carousel-control-next {
  width: 5%; /* reduce click area so arrows don’t cover events */
  top: 50%;
  transform: translateY(-50%);
  bottom: auto;
  opacity: 0.8;
}

.carousel-control-prev {
  left: -20px; /* move arrow inward slightly */
}

.carousel-control-next {
  right: 10px; /* move arrow inward slightly */
}

/* On mobile, bring them closer to content edges */
@media (max-width: 768px) {
  .carousel-control-prev {
    left: -10px;
  }
  .carousel-control-next {
    right: 5px;
  }
}

/* Optional: make arrows slightly larger */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  width: 2rem;
  height: 2rem;
}