.content-carrusel{
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box; /* Asegura que el padding no cause desbordamientos */
    
}

html, body {
    overflow-x: hidden; /* Evitar desbordamiento horizontal */
}

.swiper {
    margin-top: 40px;
    overflow: visible; /* Permitir que las imágenes laterales se vean */
    padding: 0 5%; /* Reducir el padding */
    max-width: 100%; /* Limitar el ancho del carrusel para evitar desbordamientos */
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.5s ease; /* Animación suave para el carrusel */
    width: calc(100%); /* Ajustar el tamaño de las imágenes */
}

.swiper-slide img {
    width: 100%; /* Asegurar que la imagen ocupe el 100% del ancho del contenedor */
    border-radius: 15px;
    height: auto;
    padding: 20px;
}

.swiper-slide-active {
    transform: scale(1.3); /* Aumentar el tamaño de la imagen activa */
}

.swiper-slide-next,
.swiper-slide-prev {
    opacity: 1; /* Mantener sin transparencia */
    transform: scale(0.9); /* Hacer imágenes laterales más grandes pero más pequeñas que la central */
    width: calc(30%); /* Reducir el tamaño de las imágenes laterales */
}

/* Botones de navegación */
.swiper-button-prev,
.swiper-button-next {
    color: orange; /* Botones de color naranja */
    transition: color 0.3s;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
    color: darkorange; /* Cambiar a naranja oscuro al pasar el ratón */
}

/* Eliminar los títulos */
.swiper-txt {
    display: none; /* Oculta los títulos o cualquier texto en las diapositivas */
}

@media(max-width: 991px) {
    .swiper {
        padding: 0 10px; /* Ajuste de padding para pantallas más pequeñas */
    }

    .swiper-slide {
        width: 100%;
    }

    .swiper-slide-next,
    .swiper-slide-prev {
        display: none; /* Ocultar imágenes laterales en pantallas pequeñas */
    }

    .swiper-slide img {
        width: 100%;
    }
}