/* Estilos para el carrusel */
#demo .carousel-inner {
    max-height: 700px; /* Altura máxima del carrusel */
    overflow: hidden; /* Evita que las imágenes se desborden */
}

#demo .carousel-item img {
    width: 100%; /* Ajusta el ancho al 100% del contenedor */
    height: 700px; /* Altura fija para todas las imágenes */
    object-fit: cover; /* Ajusta la imagen para cubrir el espacio sin distorsionar */
    object-position: center; /* Centra la imagen */
}

/* Estilos para los indicadores */
.carousel-indicators li {
    background-color: #ccc; /* Color de los indicadores inactivos */
    border-radius: 50%; /* Forma circular */
    width: 10px;
    height: 10px;
}

.carousel-indicators .active {
    background-color: #007bff; /* Color del indicador activo */
}

/* Estilos para los controles de navegación */
.carousel-control-prev,
.carousel-control-next {
    width: 5%; /* Ancho de los controles */
    background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(1); /* Invertir el color de los íconos (blanco) */
}