/* Style the indicators as grey dots */
.bsc .carousel-indicators [data-bs-target] {
    width: 6px;
    height: 6px;
    background-color: #e1e1e4;
    border-radius: 50%;
    transition: background-color 0.3s ease;
    opacity: .9 !important;
}

/* Style the active indicator as a white dot */
.bsc .carousel-indicators .active {
    background-color: white;
}

/* Speed up the transition time between slides */
.bsc .carousel-item {
  transition: transform 0.3s ease-in-out; /* 0.5s is the duration of the transition */
}

/* Style the back and forward arrows */
.bsc .carousel-control-prev-icon,
.bsc .carousel-control-next-icon {
  background-color: white;
  color: black;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Customize the arrow content */
.bsc .carousel-control-prev-icon::before {
  content: '\276E'; /* Unicode for left arrow (Bootstrap Icons) */
}

.bsc .carousel-control-next-icon::before {
  content: '\276F'; /* Unicode for right arrow (Bootstrap Icons) */
}

/* Remove the default SVG background */
.bsc .carousel-control-prev-icon,
.bsc .carousel-control-next-icon {
  background-image: none;
}


/* Hide the arrows by default */
.bsc .carousel-control-prev,
.bsc .carousel-control-next {
  visibility: hidden;
}

/* Show the arrows on hover */
.bsc :hover .carousel-control-prev,
.bsc :hover .carousel-control-next {
  visibility: visible;
}

/* Hide arrows on small screens */
@media (max-width: 767.98px) {
    .bsc .carousel-control-prev,
    .bsc .carousel-control-next {
    display: none;
    }
    .oldslideshowlink {display: none !important;}
}

/* Initially hide the previous arrow */
.bsc .carousel-control-prev {
  display: none;
}

.bsc .carousel-indicators {margin-bottom:5px;}
.bsc .carousel-caption {padding-bottom:7px;}