/*-----------------------------------------------
Banner of the contact us section
-------------------------------------------------*/

#banner-contactus {
    position: relative;
    overflow: hidden;
    color: #fff;
    text-align: start; /* Alineación del texto a la izquierda */
    margin: 0 !important; /* Elimina todos los márgenes */
    padding: 0 !important; /* Elimina todos los rellenos */
    background: url("../../resources/images/bg/bg-6.png");
    background-size: cover; /* Asegura que la imagen cubra todo el banner */
    background-position: center center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    width: auto; /* Asegura que ocupe todo el ancho disponible */
    border-radius: 20px;
    border: 0px solid #f10303;
    box-sizing: border-box; /* Incluye padding y borde en el cálculo del ancho */
    max-height: max-content;
    pointer-events: none; /* Desactiva cualquier interacción con el banner */
}

/* Pseudo-elemento antes para superponer color con opacidad sobre la imagen */
#banner-contactus::before {
    content: ''; /* Necesario para el pseudo-elemento */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Asegura que la capa cubra todo el contenedor */
    background-color: #452856; /* Color de superposición */
    opacity: 0.8; /* Ajusta la opacidad entre 0 y 1 */
    pointer-events: none; /* Evita que interfiera con los clics */
    z-index: 1; /* Asegura que la capa esté debajo del contenido */
}

/* Asegura que el contenido esté por encima de la capa */
#banner-contactus .banner-contactus {
    position: relative;
    z-index: 2; /* Asegura que el contenido (texto) esté por encima de la capa vino */
}

/* Títulos y texto en el banner */
#banner-contactus h2, #banner-contactus h3, #banner-contactus p {
    position: relative; /* Necesario para asegurar que los elementos se ubiquen sobre la capa */
    z-index: 2; /* Asegura que los textos estén por encima de la capa */
}

#banner-contactus h2 {
    color: #fff; /* Color de texto blanco */
    font-size: 2em;
    line-height: 1.75em;
    margin: 0; /* Elimina márgenes */
    padding: 0.50em 0em 0.25em 0em ; /* Solo relleno en los lados */
    text-transform:initial; 
    z-index: 2; /* Asegura que el texto esté por encima de la capa */
}

#banner-contactus h3 {
    color: #fff; /* Color de texto blanco */
    font-size: 1.50em;
    line-height: 1.50em;
    margin: 0; /* Elimina márgenes */
    padding: 0em 0em 0.50em 2em; /* Solo relleno en los lados */
    text-transform:initial; 
    z-index: 2; /* Asegura que el texto esté por encima de la capa */
}

#banner-contactus h3 span {
    display: block; /* Esto hace que los dos textos estén en líneas separadas */
    margin-bottom: 0.5em; /* Espacio entre los textos */
}

#banner-contactus p {
    font-weight: 400;
    font-size: 18px;
    line-height: 25.2;
    letter-spacing: normal;
    text-align: start;
    margin: 0; /* Elimina márgenes */
    padding: 0 10%; /* Relleno en los lados para mantener proporciones */
    z-index: 2; /* Asegura que el texto esté por encima de la capa */
}

#banner-contactus strong {
    color: inherit;
}

#banner-contactus > .container {
    position: relative;
    width: auto; /* Asegura que el contenedor tenga el 100% del ancho disponible */
    max-width: auto; /* Opcional: añade un límite máximo al ancho */
    margin: 0; /* Centra el contenedor */
}

#banner-contactus > .container:before, #banner-contactus > .container:after {
    content: '';
    display: block;
    position: absolute;
    width: auto;
    height: auto;
    margin-top: 0;
    background: url("images/bracket.svg");
    opacity: 0.15;
}

#banner-contactus > .container:before {
    left: 0;
}

#banner-contactus > .container:after {
    transform: scaleX(-1);
    right: 0;
}

/*---------------------------------------------------------------
Main Form of the contact us section
---------------------------------------------------------------*/

form label {
    font-weight: 600;
    text-transform: uppercase;
    color: #453f3e;
    display: block;
    margin: 0 0 1em 0;
}

form input[type="text"],
form input[type="email"],
form input[type="password"],
form select,
form textarea {
    -moz-transition: background-color 0.25s ease-in-out;
    -webkit-transition: background-color 0.25s ease-in-out;
    -ms-transition: background-color 0.25s ease-in-out;
    transition: background-color 0.25s ease-in-out;
    display: block;
    border: 0;
    background: #e8e8e8;
    width: 100%;
    box-shadow: inset 2px 2px 0px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    line-height: 1.25em;
    padding: 0.75em 1em 0.75em 1em;
}

form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="password"]:focus,
form select:focus,
form textarea:focus {
    background: #f0f0f0;
}

form textarea {
    min-height: 11em;
}

form ::-webkit-input-placeholder {
    color: #555 !important;
    line-height: 1.35em;
}

form :-moz-placeholder {
    color: #555 !important;
}

form ::-moz-placeholder {
    color: #555 !important;
}

form :-ms-input-placeholder {
    color: #555 !important;
}

form ::-moz-focus-inner {
    border: 0;
}

/*---------------------------------------------------------------
Form of the contact us section
---------------------------------------------------------------*/
#contact-form {
    background-color: rgba(69, 40, 86, 0.5); /* 0.6 es el nivel de opacidad */
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Estilo resaltado del texto, más sutil */
#contact-text {
    font-family: 'Montserrat', montserrat, sans-serif;
    font-size: 1.1em; /* Tamaño moderado */
    font-weight: 600; /* Peso de fuente para destacar pero sin ser tan pesado */
    color: #452856; /* Un color oscuro pero cálido */
    background: rgba(255, 255, 255, 0.4); /* Fondo semi-transparente con color suave */
    border-radius: 6px; /* Bordes suaves */
    padding: 8px 12px; /* Espaciado interno adecuado */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    text-align: left; /* Centrado del texto */
    margin: 10px 0; /* Margen superior e inferior */
    backdrop-filter: blur(3px); /* Efecto de difuminado suave (opcional) */
}

/* Container del formulario */
.form-container {
    width: 100%;
    max-width: 800px;
    margin: 0px auto;
    padding: 0px;
    background-color: #f9f9f9;
    border-radius: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Estilos del encabezado y párrafo */
.form-container h2 {
    margin-bottom: 10px;
    font-size: 24px;
}

/* Estilo para el asterisco rojo en campos obligatorios */
.required {
    color: red;
    margin-left: 5px; /* Espacio entre el label y el asterisco */
}

.form-container p {
    margin: 0px;
    font-size: 16px;
    color: #666;
}

.form-paragraph {
    display: flex; /* Utiliza flexbox para alinear los elementos en una línea */
    align-items: flex-start; /* Alinea verticalmente el número y el texto */
    padding: 0px; 
    padding-bottom: 1em;
}

/* Estilos de los campos del formulario */
.form-group {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
}

.capitalize {
    text-transform: none; /* Mantener el texto tal como está */
    flex: 0 0 200px; /* Fixed width for the label */
    white-space: nowrap;
    text-align: start;
    color: #fff;
    vertical-align: top;
}

.form-group label {
    margin-bottom: 5px;
    font-weight: bold;
    text-align: start;
    vertical-align: top; /* Alinear el label en la parte superior */
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

/* Espaciador entre secciones */
.form-spacer {
    margin: 0px 0px;
}

/*---------------------------------------------------------------
Numbers and text of each numbered block of the contact us section
---------------------------------------------------------------*/

/* Estilo para el número en un círculo */
.column-number {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #452856; /* Fondo vino */
    color: #ffffff; /* Texto blanco */
    font-family: 'Lucida Sans', sans-serif;
    font-size: 1.5em; /* Tamaño del número */
    font-weight: bold;
    font-style: italic;
    border-radius: 50%;
    width: 1.5em; /* Ancho del círculo */
    height: 1.5em; /* Alto del círculo */
    text-align: center;
}

.column-text {
    width: calc(100% - 2.5em); /* Resto del espacio para el texto */
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    color: #453f3e;
    line-height: 1.5;
    margin-left: 10px; /* Espacio entre el número y el texto */
}

/*-----------------------------------------------
Social icons the contact us section
-------------------------------------------------*/

.social-icon-nolink {
    list-style: none; /* Elimina los puntos del <li> */
    margin: 5px 0 5px 0; /* Espaciado vertical entre los elementos */
    display: flex; /* Flexbox para organizar ícono y texto */
    align-items: center; /* Centrado vertical de ícono y texto */
    font-size: 1em; /* Ajusta el tamaño del texto a 1em */
}

.social-icon-nolink img {
    width: 32px; /* Tamaño inicial del ícono */
    height: 32px;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
    display: inline-block;
    filter: grayscale(100%); /* Apaga el color del ícono */
    transition: filter 0.3s ease-in-out, transform 0.3s ease-in-out; /* Suaviza el hover */
    margin-right: 20px; /* Espacio exacto entre ícono y texto */
    border: 0.5px solid #bebebe; /* Borde delgado */
    box-shadow: 1px 1px 2px #000; /* Sombra */
    border-radius: 50%; /* Hace los bordes circulares solo en el ícono */
}

.social-icon-nolink:hover img {
    filter: grayscale(0%); /* Activa el color en hover */
    transform: scale(1.125); /* Incrementa el tamaño en hover */
}

/* Estilo específico para la segunda imagen dentro del <li> */
.social-icon-nolink img:nth-child(2) {
    width: 250px; /* Ancho de la imagen de texto */
    height: 32px; /* Altura de la imagen */
    filter: opacity(50%); /* Escala de grises por defecto */
    transition: filter 0.3s ease-in-out; /* Suaviza el hover */
    margin-right: 0; /* Elimina el margen derecho para que esté alineada con el ícono */
    border: none; /* Sin borde */
    box-shadow: none; /* Sin sombra */
    border-radius: 0; /* Sin bordes redondeados en la segunda imagen */
}

.social-icon-nolink:hover img:nth-child(2) {
    filter: grayscale(0%); /* Elimina el filtro de escala de grises en hover */
    transform: scale(1.05); /* Incrementa el tamaño en hover */
}

.social-icon {
    list-style: none; /* Elimina los puntos del <li> */
    margin: 5px 0 5px; /* Espaciado vertical entre los elementos */
    display: flex; /* Flexbox para organizar ícono y texto */
    align-items: center; /* Centrado vertical de ícono y texto */
}

.social-icon a {
    text-decoration: none; /* Elimina el subrayado del enlace */
    color: inherit; /* Usa el color predeterminado */
    display: flex; /* Organiza ícono y texto en una fila */
    align-items: center; /* Centra verticalmente ícono y texto */
    font-size: 1em; /* Ajusta el tamaño del texto a 1em */
}

.social-icon img {
    width: 32px; /* Tamaño inicial del ícono */
    height: 32px; 
    margin-bottom: 0.5em;
    margin-top: 0.5em;
    display: inline-block;
    filter: grayscale(100%); /* Apaga el color del ícono */
    transition: filter 0.3s ease-in-out, transform 0.3s ease-in-out; /* Suaviza el hover */
    margin-right: 20px; /* Espacio exacto entre ícono y texto */
    border: 0.5px solid #bebebe; /* Borde delgado */
    box-shadow: 1px 1px 2px #000; /* Sombra */
    border-radius: 50%; /* Hace los bordes circulares */
}

.social-icon a:hover img {
    filter: grayscale(0%); /* Activa el color en hover */
    transform: scale(1.125); /* Incrementa el tamaño en hover (2px extra) */
}

/* Estilo específico para la segunda imagen dentro del <li> */
.social-icon a img:nth-child(2) {
    width: 250px; /* Ancho de la imagen de texto */
    height: 32px; /* Altura de la imagen */
    filter: opacity(50%); /* Escala de grises por defecto */
    transition: filter 0.3s ease-in-out; /* Suaviza el hover */
    margin-right: 0; /* Elimina el margen derecho para que esté alineada con el ícono */
    border: none; /* Sin borde */
    box-shadow: none; /* Sin sombra */
    border-radius: 0; /* Sin bordes redondeados en la segunda imagen */
}

.social-icon:hover img:nth-child(2) {
    filter: grayscale(0%); /* Elimina el filtro de escala de grises en hover */
    transform: scale(1.05); /* Incrementa el tamaño en hover */
}

/*-----------------------------------------------
Responsive or media of the contact us section
-------------------------------------------------*/

@media (max-width: 768px) {
    #banner-contactus h2 {
        font-size: 2em; /* Ajuste de tamaño en pantallas pequeñas */
    }

    #banner-contactus p {
        font-size: 1.25em; /* Ajuste del tamaño del texto */
        padding: 0 5%; /* Reduce el relleno lateral en pantallas pequeñas */
    }

    .column-number {
        width: 50px; /* Reduce el tamaño en pantallas más pequeñas */
        height: 50px; /* Reduce el tamaño en pantallas más pequeñas */
        font-size: 1.5em; /* Reduce el tamaño del número */
    }
}