
/*Banner*/

.video-overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--dynamic-color, rgba(0, 0, 0, 0.5)); /* El segundo valor es un color de respaldo */
    z-index: 2;
}



.video-overlay.scroll-color::before {
    background: rgb(11, 11, 11); /* Color de fondo al desplazarse */
    
}

.video-texto {
    position: absolute;
    color: white; /* Ajusta el color del texto */
    text-align: center; /* Centra el texto horizontalmente */
    z-index: 2; /* Coloca el texto encima del video y la capa de opacidad */
    top: 65%; /* Coloca el texto en la mitad superior del contenedor */
    left: 50%; /* Centra el texto horizontalmente */
    transform: translate(-50%, -50%); /* Centra el texto vertical y horizontalmente */
    width: 80%; /* Ajusta el ancho del contenedor de texto */

}

.video-texto img{
    position: relative;
    max-width: 50%; /* Ajusta el tamaño del logo según tus necesidades */
    margin: -1.8rem auto; /* Ajusta el espacio vertical y centra horizontalmente */
    display: block; /* Asegura que el margen automático funcione correctamente */
}

h2{
    color: #e7c47b; /* Cambia el color del subtítulo según tus preferencias */
}

.video-texto .titulo {
    font-size: 6.25rem; /* Tamaño de fuente más grande para el título */
    font-weight: bold;
    margin-bottom: 0.56rem;
    color: #e7c47b;
}

.video-texto h2{
    color: white; /* Cambia el color del subtítulo según tus preferencias */

}

video{
    margin-top: 0%;
}


.video-texto .subtitulo {
    font-size: 2rem; /* Ajusta el tamaño del subtítulo según tus necesidades */
    font-weight: bold;
    color: #e7c47b; /* Cambia el color del subtítulo según tus preferencias */
    margin-bottom: 0%;
    margin-top: -7%;
}

.video-texto h2 {
    font-size: 2rem; /* Tamaño de fuente para el texto */
    font-weight: normal;
    margin-top: -1%; /* Ajusta el espacio inferior del texto */
    
}

.video-texto .descripcion{
    text-align: justify;
    font-size: 1.2rem;
    margin-top: 40px;
}

.card{
    box-shadow: 10px 10px 10px rgb(1, 1, 1); /* Sombra ligera */
    background-color: rgba(0, 0, 0, 0.244);
    margin-top: -3%;
}

.banner-container{
    background-color: #000000cb;
    width: 103%; /* Ajustar el ancho al 100% del contenedor padre */
}

/*servicios*/



.servicios-banner {
    padding: 20px;
    background-color: #f8f9fa; /* Fondo ligero */
}

.servicio-columna {
    background: #fff;
    background-color: black;
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Sombra ligera */
    border-radius: 8px; /* Bordes redondeados */
}

.servicio-columna .card-title {
    font-size: 24px; /* Tamaño del subtítulo */
    margin-bottom: 20px; /* Espacio inferior del subtítulo */
    color: #333; /* Color del subtítulo */
}

.servicio-columna .card-text,
.servicio-columna ul {
    font-size: 16px; /* Tamaño del texto */
    text-align: justify; /* Justificación del texto */
    color: #fff; /* Color del texto */
    margin-bottom: 10px; /* Espacio inferior entre párrafos y listas */
}

.servicio-columna ul {
    list-style-type: disc; /* Tipo de marcador */
    padding-left: 20px; /* Sangría de la lista */
}

.servicio-columna li {
    margin-bottom: 5px; /* Espacio inferior entre elementos de la lista */
}

.servicio-columna .card-title{
    color: #e7c47b;
} 

.resaltado {
    color: #e7c47b; /* Color resaltado */
    font-weight: bold; /* Peso de la fuente */
}

.btn-whatsapp {
    background-color: #25D366;
    display: flex;

    color: white;
    border: none;
    border-radius: 30px; /* Borde redondeado */
    font-size: 16px;
    transition: background-color 0.3s ease;
    text-align: center;
    text-decoration: none;
    align-items: center;
    justify-content: center;
}

.botones-tarjeta {
    display: flex;
    flex-direction: column;
    margin-top: 43%;
}
.botones-tarjeta2 {
    display: flex;
    flex-direction: column;
    margin-top: 21%;
}
.btn-whatsapp:hover {
    background-color: #1DA851;
    color: white;
}
.btn-whatsapp i {
    margin-right: 8px; /* Espacio entre el icono y el texto */
}

.btn-info {
    display: flex;
    background-color: #6c757d; /* Color gris */
    border: none;
    border-radius: 30px;
    font-size: 16px;
    transition: background-color 0.3s ease;
    text-align: center;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;

}

.btn-info:hover {
    background-color: #5a6268; /* Color gris oscuro al pasar el cursor */
    text-decoration: none;
    color: white;
}

a {
    text-decoration: none; /* Elimina el subrayado por defecto */
}

a:hover {
    text-decoration: none; /* Evita el subrayado al pasar el mouse */
}


@media only screen and (max-width: 1000px) {
    
/*Banner*/
.video-texto .descripcion{
   
    margin-top: 0px;
}


video {
    transform: scale(10, 10); /* Ajusta los valores de escala según tu necesidad */

}
.video-texto .titulo {
    margin-top: 300px;
    font-size: 2.75rem; /* Tamaño de fuente más grande para el título */
    margin-bottom: 2px;
}

.video-texto h2 {
    font-size: 1rem; /* Tamaño de fuente para el texto */
    font-weight: normal;
    margin-bottom: 20px; /* Ajusta el espacio inferior del texto */
}

.video-texto img{
    margin-bottom: 5%;}

    /* Ajustes para el video en dispositivos móviles */
    .zoom-video-container {
        margin-top: -337%;
        height: 2500PX; /* Permite que el contenedor de video se expanda según el contenido */
        
    }

    .banner-container{
        background-color: #000000cb;
        width: 111%; /* Ajustar el ancho al 100% del contenedor padre */
    }

    .video-texto .subtitulo {
        margin-bottom: 0%;
        margin-top: 0%;
    }

    .botones-tarjeta {
        margin-top: 0%;

    }
    
}
@media only screen and (max-width: 1000px)and (min-width: 365px) {

    .zoom-video-container {
        margin-top: -50%;
        height: 1700px; /* Permite que el contenedor de video se expanda según el contenido */

}


}
    






