body {
    font-family: Arial, sans-serif;
    background-image: url('../assets/fondo3.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

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

header {
    background-color: #f0f0f0; /* Color de fondo del header cambiado a gris claro */
    padding: 15px 30px; /* Espaciado interno */
    display: flex; /* Flexbox para alinear elementos */
    justify-content: space-between; /* Espacio entre logo y navegación */
    align-items: center; /* Centrar verticalmente */
    flex-wrap: wrap;
}

.logo img {
    height: 80px;
}

nav ul {
    list-style: none; /* Sin viñetas */
    padding: 0; /* Sin padding */
    display: flex; /* Flexbox para alinear elementos */
}

nav ul li {
    margin-left: 50px; /* Espaciado entre elementos de la lista */
}

nav ul li a {
    text-decoration: none; /* Sin subrayado */
    color: #494949; /* Color del texto en el menú */
    font-size: 18px;
}

nav ul li a:hover {
    color: #a00; /* Color al pasar el mouse */
    transition: 0.7s;
}

/* Estilos para el menú hamburguesa */
.menu-toggle {
    display: none; /* Ocultar por defecto */
    background: none;
    border: none;
    cursor: pointer;
}

/* Estilos para la sección de contacto */
.contacto {
    background-image: url(../assets/Diseño\ sin\ título.png);
    padding: 25px;
}

.contacto-title {
    background-color: #468d63; /* Color de fondo verde */
    color: white; /* Color del texto */
    text-align: center; /* Centrar el texto */
    width: 30rem;
    height: 4rem;
    border-radius: 50px;
    margin-bottom: 1rem;
}

.contacto h1 {
    font-family: "Montserrat", Sans-serif;
    font-size: 50px;
    font-weight: 500;
    line-height: 1.25em;
    color: #fff;
    text-align: center;
}

.contacto h2 {
    font-family: "Montserrat", Sans-serif;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.25em;
    color: #fff;
    text-align: center;
}

.contacto p {
    text-align: center;
    color: #fff;
    font-family: "Montserrat", Sans-serif;
    font-size: 20px;
    font-weight: 600;
    margin: 20px;
}

.elementor-form-fields-wrapper {
    display: flex;
    flex-wrap: wrap;
}

/* Estilos generales del formulario */
.contacto-form {
    max-width: 800px; /* Ancho máximo del formulario */
    margin: 0 auto; /* Centrar el formulario */
    padding: 40px; /* Espaciado interno */
    background-color: #0e345b;
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Sombra más pronunciada */
}

/* Estilos para los campos de entrada */
.elementor-form-fields-wrapper input,
.elementor-form-fields-wrapper textarea {
    width: 100%; /* Ancho completo */
    padding: 12px; /* Espaciado interno */
    margin-bottom: 20px; /* Espaciado inferior */
    border: 4px solid #4CAF50; /* Borde gris claro */
    border-radius: 50px; /* Bordes redondeados */
    font-size: 16px; /* Tamaño de fuente */
    transition: border-color 0.3s; /* Transición suave para el borde */
    background-color: #e4e4e4;
}

/* Efecto al enfocar los campos de entrada */
.elementor-form-fields-wrapper input:focus,
.elementor-form-fields-wrapper textarea:focus {
    border-color: #d4af37; /* Color dorado al enfocar */
    outline: none; /* Sin contorno */
}

/* Estilo para el contenedor de los campos en la misma línea */
.elementor-field-group-row {
    display: flex; /* Usar flexbox */
    justify-content: space-between; /* Espacio entre los campos */
    margin-bottom: 10px; /* Espaciado inferior */
}

/* Estilo para cada campo en la fila */
.elementor-field-group-name,
.elementor-field-group-email,
.elementor-field-group-phone {
    flex: 1; /* Cada campo ocupa el mismo espacio */
    margin-right: 10px; /* Espaciado entre campos */
}

/* Eliminar margen derecho del último campo */
.elementor-field-group-phone {
    margin-right: 0; /* Sin margen derecho */
}

/* Estilo para el campo de mensaje */
.elementor-field-group-message {
    width: 100%; /* Asegurarse de que ocupe todo el ancho */
    margin-bottom: 20px; /* Espaciado inferior */
}

/* Estilo para el contenedor del botón de envío */
.elementor-field-group-submit {
    width: 100%; /* Asegurarse de que ocupe todo el ancho */
}

/* Estilo para el botón de envío */
.elementor-field-group-submit button {
    width: 100%; /* Hacer que el botón ocupe todo el ancho */
    background-color: #468d63; /* Color dorado */
    color: #fff; /* Texto blanco */
    padding: 12px; /* Espaciado interno */
    border: none; /* Sin borde */
    border-radius: 20px; /* Bordes redondeados */
    cursor: pointer; /* Cambia el cursor al pasar el mouse */
    font-size: 16px; /* Tamaño de fuente */
}

/* Efecto al pasar el mouse sobre el botón */
.elementor-field-group-submit button:hover {
    background-color: #4CAF50; /* Color dorado más oscuro */
    transition: 0.8s;
}

/* Estilo para el contenedor principal */
html, body {
    height: 100%; /* Asegura que el body ocupe toda la altura */
}

/*footer*/
/*footer*/
footer {
    width: 100%; /* Asegura que el footer ocupe todo el ancho de la página */
    background-color: #f1f1f1;
    color: var(--custom-color);
    padding: 40px; /* Espaciado interno */
    margin-top: auto; /* Asegura que el footer esté al final */
    position: relative; /* Asegura que el footer esté en la parte inferior */
    z-index: 1000; /* Asegura que el footer esté por encima de otros elementos */
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 3rem;
}

.footer-logo {
    text-align: center;
    align-items: center;
    gap: 1rem;
}

.footer-logo img {
    align-items: center;
    height: 150px;
}

.footer-section h4 {
    color: #333;
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
    text-align: center;
}

.footer-contact {
    list-style: none;
}

.footer-contact li {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.footer-contact i {
    color: #333;
}

.footer-social {
    display: flex;
    gap: 1rem;
    padding-left: 95px;
    
}

.footer-social a {
    color: #ffffff;
    font-size: 1.5rem;
    transition: color 0.3s;
    padding-left: 20px;
}

.footer-social a:hover {
    color: var(--accent-color);
}

.footer-bottom {
    text-align: center;
    padding: 15px;
}

.icono-red {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
}

.fa-facebook-f {
    color: #3b5998; /* Color de Facebook */
}

.fa-linkedin-in {
    color: #0077b5; /* Color de LinkedIn */
}

.fa-instagram {
    color: #e4405f;
}

.fa-whatsapp {
    color: #25d366;
}

/* Estilos para pantallas pequeñas */
@media (max-width: 768px) {
    .nav-list {
        display: none; /* Ocultar el menú por defecto */
        flex-direction: column; /* Cambiar a columna */
        position: fixed; /* Cambiar a posición fija para superponerse */
        background-color: white; /* Fondo del menú */
        width: 100%; /* Ancho completo */
        top: 0; /* Ajustar a la parte superior */
        left: 0;
        height: auto; /* Altura completa para cubrir toda la pantalla */
        z-index: 1000; /* Asegurar que esté por encima de otros elementos */
        margin-top: 110px; /* Espaciado para que no se superponga con el header */
        text-align: center;
    }

    .nav-list.active {
        display: flex; /* Mostrar el menú cuando está activo */
    }

    .menu-toggle {
        display: block; /* Mostrar el botón de menú hamburguesa */
    }

    .contacto {
        padding: 15px; /* Reducir el padding en pantallas pequeñas */
    }

    .contacto h1 {
        font-size: 30px; /* Ajustar tamaño de fuente */
    }

    .contacto h2 {
        font-size: 20px; /* Ajustar tamaño de fuente */
    }

    .contacto-form {
        padding: 20px; /* Reducir el padding del formulario */
    }

    .elementor-field-group-row {
        flex-direction: column; /* Cambiar a columna */
        width: 100%;
    }

    .elementor-field-group-name,
    .elementor-field-group-email,
    .elementor-field-group-phone {
        width: 100%; /* Ancho completo */
        margin-right: 0; /* Sin margen derecho */
    }

    .elementor-field-group-submit button {
        font-size: 14px; /* Reducir tamaño de fuente */
    }
}

/* Para tabletas 1024 x 1366 */
@media (max-width: 1025px) and (min-width: 768px) {
    .contacto h1 {
        font-size: 40px; /* Ajustar tamaño de fuente */
    }

    .contacto h2 {
        font-size: 26px; /* Ajustar tamaño de fuente */
        margin: 20px 0px;
    }

    .contacto p {
        font-size: 18px; /* Ajustar tamaño de fuente */
        margin: 20px 0px;
    }

    .elementor-field-group-row {
        flex-direction: row; /* Mantener en fila */
    }

    .elementor-field-group-name,
    .elementor-field-group-email,
    .elementor-field-group-phone {
        flex: 1; /* Cada campo ocupa el mismo espacio */
    }

    .elementor-field-group-name,
    .elementor-field-group-email {
        margin-right: 45px; /* Espaciado entre campos */
    }
}

/* Para pantallas de PC 1080 x 674 */
@media (min-width: 1080px) and (max-width: 1366px) {
    .contacto h1 {
        font-size: 50px; /* Ajustar tamaño de fuente */
    }

    .contacto h2 {
        font-size: 28px; /* Ajustar tamaño de fuente */
    }

    .contacto-form {
        padding: 20px; /* Reducir el padding del formulario */
    }

    .elementor-field-group-row {
        flex-direction: row; /* Cambiar a columna en pantallas pequeñas */
    }

    .elementor-field-group-name,
    .elementor-field-group-email,
    .elementor-field-group-phone {
        margin-right: 40px;
        margin-bottom: 10px; /* Espaciado inferior */
    }
}