.carousel {
    position: relative;
    margin-bottom: 40px; /* Espacio adicional para los indicadores */
}

.carousel-indicators {
    position: absolute;
    bottom: 75px; 
    left: 50%;
    transform: translateX(-50%); /* Centra los indicadores */
    width: auto;
    margin-left: auto;
    margin-right: auto;
}

.carousel-indicators [data-bs-target] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--primary-color);
    display: inline-block;
    margin: 0 5px;
}

.carousel-indicators .active {
    background-color: #fff;
}
#carouselBootstrap {
    width: 75%; /* Ajusta este valor para cambiar el ancho */
    margin-left: auto;
    margin-right: auto; /* Estos márgenes auto centran el carrusel si su ancho es menor que el del contenedor */
}
@media only screen and (min-width: 600px) {
    #carouselBootstrap {
        width: 50%;
    }
}
.carousel-control-prev, .carousel-control-next {
    border-radius: 50%; /* Hace los botones redondos */
    width: 40px; /* Ajusta el tamaño del botón */
    height: 40px; /* Ajusta el tamaño del botón */
    background-color: var(--primary-color); /* Color de fondo */
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute; /* Posicionamiento absoluto */
    top: 50%; /* Centra verticalmente */
    transform: translateY(-50%); /* Ajuste fino de la posición */
}
@media only screen and (min-width: 600px) {
    .carousel-control-prev, .carousel-control-next {
        width: 80px;
        height: 80px;        
    }
}

.carousel-control-prev {
    left: 10px; /* Espacio desde el lado izquierdo */
}

.carousel-control-next {
    right: 10px; /* Espacio desde el lado derecho */
}

.carousel-control-prev-icon, .carousel-control-next-icon {
    display: none; /* Oculta los íconos predeterminados */
}

.carousel-control-prev i, .carousel-control-next i {
    color: #fff; /* Color del ícono */
    font-size: 40px; /* Tamaño del ícono */
}