* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Lato-Black', Arial, sans-serif;
    background-color: #f4f4f4; /* Fondo suave para el cuerpo de la página */
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem;
    background-color: #fff; /* Fondo blanco para el header */
    box-shadow: 0 4px 6px rgba(255,156,12, 0.7);
    z-index: 1000;
}

.logo img {
    height: 50px;
}

nav ul {
    list-style: none;
}

.nav > li {
    position: relative;
    float: left;
    padding-right: 3rem;
}

.nav li a {
    background-color: #fff; /* Fondo blanco para los enlaces */
    color: #ff9c0c; /* Texto en color oscuro para contraste */
    text-decoration: none;
    padding: 10px 12px;
    display: block;
    transition: background-color 0.3s, color 0.3s; /* Transiciones suaves al cambiar de estado */
    font-size: 18px;
}

.nav li a:hover, .nav li a:focus {
    background-color: #e8e8e8; /* Cambio sutil de color al pasar el ratón o enfocar */
    color: #000; /* Texto en negro más intenso para mejor legibilidad */
}

.nav li ul {
    display: none;
    position: absolute;
    min-width: 140px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra para los submenús */
    z-index: 1001;
}

.nav li:hover > ul {
    display: block; /* Mostrar submenús al pasar el ratón */
}

.nav li ul li {
    position: relative;
}

.nav li ul li ul {
    right: -140px;
    top: 0px;
}
/* Estilos para el contenedor de contacto */
.contact-container {
    display: flex;
    justify-content: space-between;
    padding: 3rem 20px;
    background-color: #f9f9f9;
}

.contact-info, .contact-form {
    flex: 1;
    margin: 0 5rem; /* Reducido para disminuir espacio en blanco */
    font-family: 'Helvetica', sans-serif; /* Modern font */
    position: relative; /* Para la línea vertical */
}

/* Añadiendo la línea vertical */
.contact-info:after {
    content: '';
    position: absolute;
    right: -2.5rem; /* Ajuste según el margen */
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #DAA520; /* Color mostaza para la línea */
}

.contact-info h4 {
    margin-bottom: 15px;
    line-height: 1.5; /* Improved line spacing */
}

.social-icons img {
    width: 30px;
    margin-right: 10px;
    transition: transform 0.3s; /* Smooth scaling effect */
}

.social-icons img:hover {
    transform: scale(1.1); /* Enlarge icons on hover */
}

.contact-form input, .contact-form textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Subtle shadow */
}

.contact-form button {
    width: 100%;
    padding: 12px;
    background-color: #DAA520; /* Cambiado a color mostaza */
    color: white;
    border: none;
    border-radius: 8px; /* Rounded corners */
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Button shadow */
}

.contact-form button:hover {
    background-color: #B8860B; /* Mostaza más oscuro para el hover */
}
.full-width-container {
    display: flex;
    align-items: start; /* Alinea el contenido desde la parte superior */
    justify-content: space-between;
    padding: 20px 6rem; /* Agrega un poco de espacio */
}

.left-side, .right-side {
    flex: 1; /* Distribuye el espacio disponible equitativamente */
    padding: 20px;
}

.left-side {
    max-width: 60%; /* Limita el ancho para una lectura más cómoda */
}
.left-side h2 {
    color: #DAA520; /* Limita el ancho para una lectura más cómoda */
}
.right-side {
    max-width: 40%; /* Limita el ancho de la imagen */
}

.right-side img {
    width: 100%; /* Hace que la imagen ocupe todo el ancho disponible */
    height: auto; /* Mantiene la proporción de la imagen */
    padding-top: 3rem;
}

.iso-benefits {
    list-style: none; /* Elimina los estilos predeterminados de lista */
    padding: 0;
    margin-top: 20px;
}

.iso-benefits li {
    margin-bottom: 10px; /* Espacio entre puntos */
    padding-left: 20px; /* Espacio para la decoración o viñetas */
    position: relative;
    line-height: 1.6; /* Mejora la legibilidad del texto */
}

.iso-benefits li::before {
    content: '•'; /* Viñeta personalizada */
    color: #ff9c0c; /* Color temático */
    position: absolute;
    left: 0;
    font-size: 24px; /* Tamaño de la viñeta */
}

.divider {
    height: 3px;
    background-color: #f89604;
}
.text-container {
    background-color: #fff;
    padding: 20px 6rem;
    margin-top: 20px;
    border-radius: 8px;
}

.text-container h3 {
    color: #333;
    margin-bottom: 15px;
}

.service-card {
    background-color: #f9f9f9;
    border-left: 5px solid #ff9c0c; /* Barra lateral para destacar */
    padding: 15px;
    margin-bottom: 20px; /* Espacio entre tarjetas */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    border-radius: 5px; /* Bordes redondeados para las tarjetas */
}

.service-card h4 {
    color: #333;
    margin-bottom: 10px;
}

.service-card p {
    color: #666; /* Un color de texto más suave para facilitar la lectura */

}

.text-container p:last-child {
    text-align: center;
    margin-top: 20px; /* Espacio antes del último párrafo */
    text-align: left;
}
.text-container .cta {
    text-align: center; /* Centra el contenido del CTA */
    margin-top: 30px; /* Espacio adicional desde el contenido anterior */
    padding: 20px; /* Espaciado interno */
    background-color: #ff9c0c; /* Color temático que llama la atención */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Sombra sutil para resaltar */
}

.text-container .cta p {
    color: #fff; /* Color de texto que contrasta con el fondo */
    margin-bottom: 20px; /* Espacio antes del botón */
    font-size: 18px; /* Tamaño más grande para enfatizar */
}

.text-container .cta-button {
    padding: 10px 25px; /* Padding generoso para hacer el botón fácil de clickear */
    background-color: #e67e22; /* Un tono más oscuro para el botón */
    color: #fff; /* Texto blanco para contraste */
    text-decoration: none; /* Remover subrayado de enlaces */
    border-radius: 5px; /* Bordes redondeados para el botón */
    transition: background-color 0.3s; /* Transición suave para efecto hover */
}

.text-container .cta-button:hover {
    background-color: #ca5a1e; /* Cambio de color en hover */
}
.welcome-section {
    background-color: #f4f4f9;  /* Fondo claro para destacar el área */
    padding: 40px 20px;  /* Espaciado adecuado */
    border-left: 5px solid #ff9c0c;;  /* Una línea lateral para dar un toque moderno */
    color: #333;  /* Color oscuro para el texto, mejora la legibilidad */
    font-family: 'Arial', sans-serif;  /* Fuente moderna y legible */
    margin-top: 13px;
}

.welcome-section h2 {
    color: #ff9c0c;;  /* Color distintivo para los títulos */
    margin-bottom: 20px;  /* Espacio después del título */
}

.welcome-section p {
    text-align: justify;  /* Alineación justificada para un aspecto pulido */
    line-height: 1.6;  /* Espaciado de línea para mejor legibilidad */
    margin-bottom: 20px;  /* Espacio entre párrafos */
}

.welcome-section strong {
    color: #000;  /* Texto en negrita para mayor énfasis */
}
.mission-section {
    background-color: #ffffff;  /* Fondo blanco para diferenciar de la sección anterior */
    padding: 40px 20px;
    border-left: 5px solid #47a447;  /* Color verde para diferenciar y dar un toque fresco */
    color: #333;
    font-family: 'Arial', sans-serif;
}

.mission-section h2 {
    color: #47a447;  /* Acorde con la línea del borde */
    margin-bottom: 20px;
}

.mission-section p {
    text-align: justify;
    line-height: 1.6;
    margin-bottom: 20px;
}

.mission-section strong {
    color: #000;
}
.vision-section {
    background-color: #e9ecef;  /* Fondo gris claro para diferenciar de las otras secciones */
    padding: 40px 20px;
    border-left: 5px solid #d9534f;  /* Un borde rojo para dar un toque vibrante */
    color: #333;
    font-family: 'Arial', sans-serif;
}

.vision-section h2 {
    color: #d9534f;  /* Acorde con la línea del borde, para coherencia */
    margin-bottom: 20px;
}

.vision-section p {
    text-align: justify;
    line-height: 1.6;
    margin-bottom: 20px;
}

.vision-section strong {
    color: #000;
}
.welcome-section, .mission-section, .vision-section {
    padding: 40px 20px; /* Añadimos padding como ya estaba definido */
    margin: 20px auto; /* Añadimos margen superior e inferior, y auto para centrar */
    max-width: 1200px; /* Define un ancho máximo para grandes pantallas */
    width: 90%; /* Controla el ancho para mantener el contenido no demasiado estrecho */
}

/* Mantenemos los estilos individuales de borde y color ya definidos para cada sección */
.welcome-section {
    border-left: 5px solid #0056b3;
    background-color: #f4f4f9;
}

.mission-section {
    border-left: 5px solid #47a447;
    background-color: #ffffff;
}

.vision-section {
    border-left: 5px solid #d9534f;
    background-color: #e9ecef;
}
.section-contact-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.section-contact-info {
    flex: 1;
    padding-right: 50px;
}

.section-contact-form {
    flex: 1;
}

/* Estilos específicos de la sección de contacto */
#contact-section h2 {
    color: #e67e22;
    margin-bottom: 10px;
}

#contact-section p {
    margin-bottom: 20px;
}

.section-contact-social-links a {
    margin-right: 10px;
}

.section-contact-social-links img {
    width: 40px;
    height: 40px;
}

.section-contact-form-group label {
    display: block;
    margin-bottom: 5px;
}

.section-contact-form-group input, .section-contact-form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.section-contact-submit-btn {
    background-color: #e67e22;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
    display: block;
    width: 100%;
}

.section-contact-submit-btn:hover {
    background-color: #cf711f;
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .section-contact-container {
        flex-direction: column;
        padding: 10px;
    }

    .section-contact-info, .section-contact-form {
        padding-right: 0;
        padding-bottom: 20px;
    }
}
@media (max-width: 970px) {
    header {
        flex-direction: column;
        padding: 1rem;
    }

    .logo img {
        height: 40px; /* Reducir el tamaño del logo */
    }

    nav ul {
        padding: 0;
        text-align: center;
    }

    .nav > li {
        padding-right: 1rem; /* Menor espaciado */
        float: none; /* No flotar para que se apilen verticalmente */
    }

    .nav li a {
        font-size: 16px; /* Fuente más pequeña para enlaces */
    }
    .main-content {
        height: auto; /* Altura auto para ajustar al contenido */
        padding: 20px; /* Añadir algo de padding */
    }

    .content-text {
        font-size: 1.5rem;
        padding: 10px; /* Menor padding */
        max-width: 100%; /* Utilizar todo el ancho disponible */
    }
    .section-divider .top-border {
        height: 2px;
        background-color: #ff9c0c;
        margin-bottom: 3rem;
    }
    .section-divider h2 {
        font-size: 1.5rem;

    }
    .section-divider p {
        font-size: 15px;
        padding-bottom: 2rem;
    }
    .image-gallery {
        display: flex; /* Asegura que la galería use flexbox para la disposición */
        justify-content: center; /* Centra las imágenes horizontalmente */
        align-items: center; /* Alinea las imágenes verticalmente */
        padding: 10px; /* Ajusta el padding para más espacio */
        flex-wrap: wrap; /* Permite que los ítems se envuelvan si no caben en una sola línea */
    }
    .image-gallery img {
        width: 10%; /* Reduce el ancho de cada imagen para que más imágenes entren en la línea */
        height: auto; /* Mantiene la proporción de las imágenes */
        margin: 5px; /* Añade margen para evitar que las imágenes se toquen entre sí */
    }
    .container-grid, .contact-container {
        flex-direction: column; /* Los elementos se apilan verticalmente */
        padding: 20px; /* Aumentado para más espacio alrededor */
    }

    .item, .contact-info, .contact-form {
        margin: 12px 0; /* Ajuste para mantener el diseño limpio */
    }

    .contact-info {
        position: relative; /* Para la línea vertical en diseño horizontal */
        padding-bottom: 20px; /* Espacio adicional al final */
    }

    .contact-info:after {
        display: none; /* Ocultamos la línea vertical en diseño de columna */
    }

    .contact-form input, .contact-form textarea {
        padding: 12px; /* Mantener el padding grande para facilitar la entrada táctil */
        margin-bottom: 12px; /* Ajuste para mejorar la separación */
    }

    .contact-form button {
        width: auto; /* Permitir que el botón ajuste su ancho */
        padding: 15px; /* Botón más grande para facilitar el clic */
        margin-bottom: 20px; /* Espacio adicional después del botón */
    }

    /* Ajustes adicionales para los iconos */
    .social-icons img {
        width: 35px; /* Hacer los íconos un poco más grandes para facilitar la interacción */
        margin-right: 15px; /* Más espacio entre íconos */
    }
    .full-width-container {
        flex-direction: column; /* Cambia el layout a vertical */
        padding: 20px; /* Reduce el padding */
    }

    .left-side, .right-side {
        max-width: 100%; /* Permite que cada lado ocupe el ancho completo */
        padding: 10px; /* Reduce el padding para espacios más pequeños */
    }

    .right-side img {
        padding-top: 1rem; /* Ajusta el padding superior */
    }

    .text-container, .service-card, .cta {
        padding: 20px; /* Ajusta el padding para contenedores */
    }

    .service-card {
        margin-bottom: 15px; /* Reduce el margen entre tarjetas */
    }

    .text-container .cta-button {
        padding: 8px 20px; /* Ajusta el tamaño del botón para pantallas más pequeñas */
        font-size: 0.8rem;
    }

    .text-container p, .service-card p {
        font-size: 14px; /* Reduce el tamaño de fuente para mejorar la legibilidad en pantallas pequeñas */
    }

    .text-container .cta p {
        font-size: 16px; /* Asegura que el texto del CTA siga siendo legible y destacado */
    }
}
@media (max-width: 480px) {
    .full-width-container {
        padding: 10px; /* Más reducción para pantallas muy pequeñas */
    }

    .left-side h2, .text-container h3, .service-card h4 {
        font-size: 18px; /* Reduce el tamaño de los encabezados para que no sobrecarguen visualmente */
    }

    .iso-benefits li::before {
        font-size: 20px; /* Ajusta el tamaño de las viñetas personalizadas */
    }

    .text-container, .service-card, .cta {
        padding: 15px; /* Ajusta el padding para un manejo más eficiente del espacio */
    }

    .text-container .cta {
        padding: 15px; /* Ajustes específicos para el CTA */
    }
}