/* Ajuste para el contenedor del carrusel de banners */
.banner-section {
    position: relative;
    width: 100%;
    max-width: 100%; /* Asegura que el carrusel no se desborde */
    overflow: hidden;
    z-index: 1; /* Asegura que el carrusel esté debajo del header */
}

/* Ajustes para las imágenes dentro del carrusel */
.banner-carousel img {
    width: 100%;
    height: auto; /* Hace que la altura de la imagen se ajuste automáticamente */
    object-fit: cover; /* Ajusta el tamaño de la imagen para cubrir todo el contenedor */
}

/* Ajustes para los botones de navegación del carrusel */
.slick-prev,
.slick-next {
    width: 50px;
    height: 50px;
    z-index: 2; /* Asegura que los botones estén sobre el carrusel */
    background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
    color: white; /* Color de íconos */
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%; /* Posición centrada verticalmente */
    transform: translateY(-50%); /* Ajusta verticalmente */
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.slick-prev:hover,
.slick-next:hover {
    background-color: rgba(0, 0, 0, 0.7); /* Cambio de color al pasar el mouse */
}

.slick-prev {
    left: 0; /* Botón de navegación izquierdo */
}

.slick-next {
    right: 0; /* Botón de navegación derecho */
}