/* Estilo para el carrusel */
.image-carousel {
    display: flex;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.carousel-wrapper {
    display: flex;
    transition: transform 0.5s ease;
}

.carousel-item {
    flex: 0 0 20%; /* Muestra 5 imágenes, cada una ocupa el 20% del ancho */
    box-sizing: border-box;
    padding: 5px;
    text-align: center;
    position: relative;
}

.carousel-item img {
    width: 100%;
    height: 200px !important; /* Asegura que la imagen llene el contenedor */
    object-fit: contain; /* Hace que la imagen cubra el contenedor, recortando si es necesario */
}

.carousel-navigation {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 10px;
    border-radius: 0%;
    cursor: pointer;
    z-index: 10;
}

.carousel-navigation.left {
    left: 10px;
}

.carousel-navigation.right {
    right: 10px;
}

/* Flechas */
.carousel-navigation:hover {
    background: rgba(0, 0, 0, 0.8);
}

.image-carousel a {
    display: block;
}