/* Fondo y fuente */
body {
    background-color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    color: #333;
    padding-top: 100px;
}

/* Sección principal de la página */
main {
    max-width: 1200px;
    margin: 0 auto;
    /* Centrar contenido */
    padding: 20px;
}

/* Estilo para las secciones */
section {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px; /* Espacio entre elementos */
    padding: 40px 20px;
    background-color: #e9e7e7; /* Fondo suave */
    border-radius: 12px;
    margin-bottom: 40px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Sombra ligera */
}

/* Estilo específico para la sección del video */
.video-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    background-color: #e9e7e7;
    border-radius: 12px;
    padding: 40px 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.video-section h1 {
    font-size: 2em;
    color: #004494;
    margin-top: 20px;
    margin-bottom: 10px;
    align-items: flex-start;
}

.video-section p {
    font-size: 1.2em;
    color: #333;
    max-width: 600px;
    margin: 0 auto;
}

/* Estilo para el video */
.video {
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}


/* Estilo para la sección de servicios */
.section-text {
    flex: 2;
    color: #004494;
}

.section-text h3 {
    font-size: 1.8em;
    color: #004494;
    margin-bottom: 10px;
    border-left: 5px solid #004494;
    padding-left: 10px;
}

.section-text ul {
    list-style-type: none;
    padding-left: 0;
}

.section-text li {
    font-weight: bold;
    color: #004494;
    padding: 0 50px;
    margin-bottom: 15px;
}

.section-text li span {
    display: block;
    font-size: 1.2em;
    color: #004494;
    margin-bottom: 5px;
}

.section-text li p {
    margin-top: 0; /* Elimina margen superior para acercar la descripción al título */
    margin-left: 20px;
    font-weight: normal;
    color: #333;
}

.section-text p, .section-text ul, .section-text li , .section-text h2{
    color: #004494;
    margin-bottom: 10px;
}

.services-section {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    padding: 40px 20px;
    background-color: #e9e7e7;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Estilo para el contenedor de imagen */
.section-image {
    flex: 1;
    max-width: 400px;
    position: relative;
    overflow:auto;
    padding: 100px 20px;
}

.section-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.service-image {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: opacity 0.3s ease;
}

.carousel {
    position: relative;
    max-width: 100%;
    overflow: hidden;
}

.carousel-slide img {
    width: 100%;
    height: auto;
    display: block;
}

.carousel-button {
    padding: 10px 20px;
    background-color: #1a237e;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    display: inline-block;
    margin-top: 15px;
}

.carousel-button:hover {
    background-color: #1a237e;
}

/* Ajustar la altura del carrusel */
#carouselContenedor {
    max-width: 100%;
    /* Ajusta el ancho al contenedor */
    max-height: 1000px;
    /* Altura máxima */
    overflow: hidden;
    /* Oculta el contenido que exceda esta altura */
}

.carousel-contenedor {
    max-width: 1200px;
    /* Puedes ajustar el ancho aquí también */
    margin: 0 auto;
    /* Centra el contenedor en la página */
    border-radius: 12px;
}

/* Ajustar el tamaño de las imágenes */
.carousel-item img {
    width: 50%;
    /* Asegura que la imagen ocupe todo el ancho */
    height: 50%;
    /* Mantiene la proporción */
    max-height: 300px;
    /* Establece la altura máxima */
    object-fit: cover;
    /* Ajusta la imagen para que cubra el área sin deformarse */
}

.carousel-content-wrapper {
    display: flex;
    /* Activa Flexbox */
    align-items: center;
    /* Centra verticalmente los elementos */
    gap: 20px;
    /* Espacio entre imagen y contenido */
    padding: 20px;
    border-radius: 12px;
    background-color: #1a237e;

}

.carousel-image {
    flex: 1;
    /* La imagen ocupará el 50% del espacio */
    max-width: 50%;
    /* Limita el ancho máximo de la imagen */
}

.carousel-image img {
    width: 100%;
    height: 400px;
    border-radius: 12px;
    /* Bordes redondeados */
    object-fit: cover;
    /* Ajusta la imagen sin distorsión */
}

.carousel-text {
    flex: 1;
    /* El contenido ocupará el otro 50% */
    color: #ffffff;
    padding: 10px;
}

.carousel-text h5, p, h2 {
    flex: 1;
    /* El contenido ocupará el otro 50% */
    color: #ffffff;
    padding: 10px;
}

/* Footer */
footer {
    background-color: #1a237e;
    color: white;
    padding: 40px 20px;
    text-align: center;
    margin-top: 40px;
}

footer p, h2 {
    font-size: 1em;
}

footer a {
    color: #ffffff; /* Azul de Facebook */
    text-decoration: none;
    margin-left: 10px;
}

footer a i {
    font-size: 100px; /* Tamaño del icono */
}

footer a:hover {
    color: #1e3a78; /* Color al pasar el ratón */
}