.swiper {
    width: 100%;
    height: 300px; /* Altura del carrusel */
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; /* Asegura que los slides ocupen toda la altura del contenedor */
}

.swiper-slide img {
    width: 100%; /* Ajustar las imágenes al contenedor */
    height: auto; /* Mantener la proporción */
    object-fit: cover; /* Ajustar la imagen al contenedor manteniendo el aspecto */
    cursor: pointer; /* Cambiar el cursor para indicar que es clickeable */
}

/* Estilos personalizados para los botones de navegación */
.swiper-button-prev, .swiper-button-next {
    color: red; /* Cambiar color de los botones a rojo */
    font-size: 30px; /* Cambiar tamaño de la fuente */
    width: 50px; /* Cambiar ancho */
    height: 50px; /* Cambiar alto */
    background-color: transparent; /* Cambiar el fondo */
    border-radius: 50%; /* Bordes redondeados */
    display: flex; /* Para centrar el icono */
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
    transition: background-color 0.3s; /* Efecto de transición */
}

/* Efecto hover para los botones */
.swiper-button-prev:hover, .swiper-button-next:hover {
    background-color: transparent; /* Fondo rojo claro al pasar el mouse */
}

/* Opcional: Cambiar el color del icono de la flecha */
.swiper-button-prev::after, .swiper-button-next::after {
    color: gray; /* Cambiar color de la flecha a azul */
}



.swiper-pagination-bullet {
background: gray;
}

.swiper-pagination-bullet-active {
background: #090909 ; /* Color del bullet activo */
}