:root {
    --carousel-control-opacity: 0.9;
    --carousel-control-hover-opacity: 0.9;
    --carousel-control-color: var(--danger); /* Asegúrate de definir la variable --danger en algún lugar de tu CSS */
    
    --carousel-indicator-active-bg: var(--danger); /* Asegúrate de definir la variable --danger en algún lugar de tu CSS */
    --carousel-indicator-width: 12px;
    --carousel-indicator-height: 12px;
    --carousel-indicator-hit-area-height: 0;
  
    --carousel-control-prev-icon-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='#{var(--carousel-control-color)}' class='bi bi-arrow-left-circle' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-4.5-.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z'/%3E%3C/svg%3E");
    --carousel-control-next-icon-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='#{var(--carousel-control-color)}' class='bi bi-arrow-right-circle' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z'/%3E%3C/svg%3E");
  }

  .carousel-indicators .active {
    opacity: 1;
    width: 40px;
    border-radius: 10px;
}

.carousel-indicators .active {
    opacity: 1;
}
.carousel-indicators [data-bs-target] {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    width: 12px;
    height: 12px;
    padding: 0;
    margin-right: 3px;
    margin-left: 3px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #008A9A;
    background-clip: padding-box;
    border: 0;
    border-top: 0 solid transparent;
    border-bottom: 0 solid transparent;
    opacity: .5;
    -webkit-transition: opacity 0.6s ease;
    -o-transition: opacity 0.6s ease;
    transition: opacity 0.6s ease;
}


.carousel-control-prev,
.carousel-control-next {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--carousel-control-width); /* Necesitarás definir esta variable */
  color: var(--carousel-control-color); /* Necesitarás definir esta variable */
  text-align: center;
  opacity: var(--carousel-control-opacity); /* Necesitarás definir esta variable */
  transition: var(--carousel-control-transition); /* Necesitarás definir esta variable */
}

.carousel-control-prev:hover,
.carousel-control-prev:focus,
.carousel-control-next:hover,
.carousel-control-next:focus {
  color: var(--carousel-control-color); /* Necesitarás definir esta variable */
  text-decoration: none;
  outline: 0;
  opacity: var(--carousel-control-hover-opacity); /* Necesitarás definir esta variable */
}

.carousel-control-prev {
  left: 0;
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.001)); /* Si no estás usando gradientes, elimina esta línea */
}

.carousel-control-next {
  right: 0;
  background-image: linear-gradient(270deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.001)); /* Si no estás usando gradientes, elimina esta línea */
}

.carousel-indicators {
  position: static;
  justify-content: start;
  margin: 0;
}

.carousel-indicators li {
  border-radius: 50%;
}

.carousel-indicators .active {
  opacity: var(--carousel-indicator-active-opacity); /* Necesitarás definir esta variable */
  width: 40px;
  border-radius: 10px;
}

.carousel-control-prev {
  left: auto;
  right: 45px;
}