/* Importar Swiper desde CDN (Software libre) */
@import url('https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css');

.myVideoSlider {
    width: 100%;
    padding: 20px 0;
}

.swiper-slide {
    display: flex;
    justify-content: center;
}

.video-thumbnail {
    width: 100%;
    height: auto;
    border-radius: 8px; /* Opcional: estética amigable */
    cursor: pointer;
}

/* Contenedor de las flechas (personalización de Swiper) */
.myVideoSlider .swiper-button-next,
.myVideoSlider .swiper-button-prev {
    background-color: rgba(255, 255, 255, 0.7); /* Fondo blanco semitransparente */
    width: 45px;                 /* Tamaño del círculo */
    height: 45px;                /* Tamaño del círculo */
    border-radius: 50%;          /* Hace que el fondo sea redondo */
    color: #7c00a2 !important;   /* Tu color para la flecha */
    transition: all 0.3s ease;   /* Animación suave al pasar el ratón */
}

/* Cambiar el tamaño de la flecha interior */
.myVideoSlider .swiper-button-next:after,
.myVideoSlider .swiper-button-prev:after {
    font-size: 20px;             /* Tamaño de la flecha */
    font-weight: bold;
}

/* Efecto Hover (opcional pero recomendado) */
.myVideoSlider .swiper-button-next:hover,
.myVideoSlider .swiper-button-prev:hover {
    background-color: rgba(255, 255, 255, 0.9); /* Más opaco al pasar el ratón */
    transform: scale(1.1);                      /* Se agranda ligeramente */
}