.category{
margin-bottom: 50px;
}

.header-bg-slide{
background-color: #00000070;
height: 820px;
display: flex;
align-items: center;
background-position: center top;
background-repeat: no-repeat;
}

.home-header-slide-caption{
margin: auto;
font-family: 'font-medium';
color: #ffffff;
text-align: center;
width: 80%;
}
.class-card{
cursor: pointer;
}

.class-icon{
position: absolute;
bottom: 18px;
left: 8px;
background-color: #4f4f4f;
padding: 4px 5px;
display: inline-flex;
border-radius: 4px;
}

.modal{
background-color: #000000cc;
}


.modal-content {
background-color: #000000;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.modal-header {
border-bottom: none;
border-radius: 10px 10px 0 0;
}

/* Animación para el modal */
.modal.fade .modal-dialog {
transform: translate(0, -50px);
transition: transform 0.3s ease-out;
}

.modal.show .modal-dialog {
transform: translate(0, 0); 
}

/* Animación de cierre */
.modal.fade .modal-dialog {
transform: translate(0, -50px); 
}

.class-card:hover .class-caption{
color: #ffffff;
}
.splide__pagination__page {
height: 15px;
margin: 3px 5px;
width: 15px;
}
.header-video-text{
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
right: 0;
z-index: 3;
text-align: center;
}
.overlay{
background: linear-gradient(rgb(0 0 0 / 65%), rgba(0, 0, 0, 0.7));
width: 100%;
height: 100%;
position: absolute;
}

.category-text{
font-size: 16px;
}

@media only screen and (max-width: 600px) {
.header-video-main h1{
font-size: 22px;
}
.subscribe-button{
font-size: 1rem!important;
padding: 5px 30px!important;
}
.category-text{
font-size: 12px;
}
}