body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

.contact-form {
    width: 100%;
    max-width: 600px;
    margin: 50px auto;
    padding: 30px;
    background: linear-gradient(145deg, #ffffff, #f4f4f4); /* Degradado mínimo */
    box-shadow: 0 4px 6px rgba(221, 8, 8, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06); /* Sombra suave */
    border-radius: 8px;
    animation: fadeIn 1s ease-in-out;
}

.form-container {
    width: 100%;
    max-width: 1200px;
    margin: 50px auto;
    padding: 30px;
    background: rgba(247, 247, 247, 0.8); /* Fondo blanco con 80% de opacidad */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06); /* Sombra suave */
    border-radius: 8px;
    animation: fadeIn 1s ease-in-out;
    flex: 2; /* Ocupa más espacio que la frase */
    max-width: 600px; /* Ancho máximo del formulario */
    margin: 0 auto; /* Centra el formulario horizontalmente */
}

/* Cambiar el color del texto en el formulario */
.contact-form h2 {
    margin-bottom: 20px;
    font-size: 24px;
    color: #222; /* Cambiado a un tono más oscuro */
    text-align: center;
}

.contact-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #333; /* Cambiado a un tono más oscuro */
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    transition: border-color 0.3s;
    color: #333; /* Cambiado a un tono más oscuro */
    background-color: #fff; /* Fondo blanco para mayor contraste */
}

.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form textarea:focus {
    border-color: #007bff;
    outline: none;
    color: #333; /* Asegura que el texto sea visible al enfocar */
}

.contact-form textarea {
    resize: vertical;
    height: 150px;
    color: #333; /* Cambiado a un tono más oscuro */
}

.contact-form button {
    display: inline-block;
    width: 100%;
    padding: 10px 20px;
    background-color: #007bff;
    color: #141414; /* Texto blanco para contraste */
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
}

.contact-form button:hover {
    background-color: #0056b3;
}

button:hover {
    background-color: #007bff;
    color: #fff;
    transition: background-color 0.3s ease;
}

/* Cambiar el color del texto en los campos del formulario a rojo */
.form-container input[type="text"],
.form-container input[type="email"],
.form-container textarea {
    color: rgb(0, 0, 0) !important; /* Cambia el color del texto a rojo */
    background-color: #fff; /* Fondo blanco para contraste */
    border: 1px solid #ccc; /* Borde gris claro */
    padding: 10px;
    font-size: 16px;
}

/* Estilo para la etiqueta del campo "Servicio solicitado" */
.form-container label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #333; /* Color neutro para la etiqueta */
}

/* Estilo para el select */
.form-container select {
    width: 100%; /* Ocupa todo el ancho disponible */
    padding: 10px; /* Espaciado interno */
    border: 1px solid #ccc; /* Borde gris claro */
    border-radius: 4px; /* Bordes redondeados */
    font-size: 16px; /* Tamaño de fuente */
    background-color: #fff !important; /* Fondo blanco */
    color: #333; /* Color del texto */
    box-sizing: border-box; /* Asegura que el padding no afecte el ancho total */
    margin-bottom: 20px; /* Espaciado inferior */
    appearance: none; /* Elimina el estilo predeterminado del navegador */
}

/* Estilo al enfocar el select */
.form-container select:focus {
    border-color: #007bff; /* Cambia el color del borde al enfocar */
    outline: none; /* Elimina el borde azul predeterminado */
    background-color: #fff !important; /* Fondo blanco al enfocar */
    color: #333; /* Color del texto */
}

/* Estilo para las opciones del select */
.form-container select option {
    background-color: #fff !important; /* Fondo blanco para las opciones */
    color: #000 !important; /* Texto negro para las opciones */
    border: none; /* Elimina cualquier borde */
    padding: 5px; /* Espaciado interno para las opciones */
}

/* Estilo al pasar el mouse sobre las opciones */
.form-container select option:hover {
    background-color: #f4f4f4 !important; /* Fondo gris claro al pasar el mouse */
    color: #000 !important; /* Texto negro al pasar el mouse */
}

/* Cambiar el color del texto del placeholder a rojo */
.form-container input::placeholder,
.form-container textarea::placeholder {
    color: rgb(0, 0, 0) !important; /* Cambia el color del texto del placeholder a rojo */
}

/* Cambiar el color del texto al enfocar */
.form-container input:focus,
.form-container textarea:focus {
    color: rgb(0, 0, 0) !important; /* Asegura que el texto sea rojo al enfocar */
    border-color: #007bff; /* Cambia el color del borde al enfocar */
    outline: none;
}

body.contact-page .form-container input[type="text"],
body.contact-page .form-container input[type="email"],
body.contact-page .form-container textarea {
    color: rgb(0, 0, 0) !important; /* Cambia el color del texto a rojo */
    background-color: #fff; /* Fondo blanco para contraste */
    border: 1px solid #ccc; /* Borde gris claro */
    padding: 10px;
    font-size: 16px;
}

body.contact-page .form-container input::placeholder,
body.contact-page .form-container textarea::placeholder {
    color: rgb(0, 0, 0) !important; /* Cambia el color del texto del placeholder a rojo */
}

input::placeholder {
    color: #fff; /* Esto podría estar sobrescribiendo tu estilo */
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Contenedor principal para el formulario y el mapa */
.contact-container {
    display: flex; /* Usa flexbox para organizar los elementos en filas */
    align-items: flex-start; /* Alinea los elementos al inicio verticalmente */
    gap: 2rem; /* Espaciado entre la frase y el formulario */
    margin-top: 2rem;
}

/* Reducir el margen entre los campos */
.contact-container .row > div {
    margin-bottom: 10px; /* Ajusta el espaciado entre los campos */
}

/* Reducir el margen inferior del formulario */
.contact-container form {
    margin-bottom: 20px;
}

/* Reducir el ancho del formulario */
.contact-container .form-container {
    max-width: 600px; /* Ajusta el ancho máximo del formulario */
    margin: 0 auto; /* Centra el formulario horizontalmente */
}

/* Estilo para el formulario */
.form-container {
    flex: 2; /* Ocupa más espacio que la frase */
    max-width: 100%; /* Ocupa todo el ancho disponible */
    margin-bottom: 2rem; /* Espacio inferior entre el formulario y el mapa */
}


/* Estilo para el contenedor del título y la frase */
.contact-info {
    flex: 1; /* Ocupa el espacio disponible a la izquierda */
    text-align: right; /* Alinea el texto a la derecha */
    font-size: 16px; /* Tamaño de fuente */
    color: #333; /* Color del texto */
    line-height: 1.5; /* Altura de línea para mejor legibilidad */
}

/* Estilo para la pregunta */
.contact-info .contact-question {
    font-size: 26px; /* Tamaño de fuente más grande */
    font-weight: bold; /* Negrita para destacar */
    color: #fff; /* Texto en blanco */
    font-family: 'Playfair Display', serif; /* Tipografía elegante */
    margin-bottom: 15px; /* Espaciado inferior */
    text-align: left; /* Alineación a la izquierda */
    line-height: 1.4; /* Altura de línea para mejor legibilidad */
}

/* Estilo para la frase */
.contact-info .contact-message {
    font-size: 18px; /* Tamaño de fuente */
    font-weight: normal; /* Sin negrita */
    color: #fff; /* Texto en blanco */
    margin-bottom: 20px; /* Espaciado inferior */
    text-align: left; /* Alineación a la izquierda */
    line-height: 1.6; /* Altura de línea para mejor legibilidad */
}

/* Estilo para los iconos de contacto */
.contact-info .contact-icons {
    list-style: none; /* Elimina los puntos de la lista */
    padding: 0; /* Elimina el padding */
    margin: 0; /* Elimina el margen */
    display: flex; /* Alinea los iconos horizontalmente */
    flex-direction: column; /* Apila los iconos verticalmente */
    gap: 15px; /* Espaciado entre los elementos */
}

.contact-info .contact-icons li {
    display: flex; /* Alinea el icono y el texto horizontalmente */
    align-items: center; /* Centra verticalmente el icono con el texto */
    font-size: 16px; /* Tamaño de fuente */
    color: #fff; /* Texto en blanco */
    background: rgba(255, 255, 255, 0.1); /* Fondo translúcido */
    padding: 10px 15px; /* Espaciado interno */
    border-radius: 8px; /* Bordes redondeados */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Transiciones suaves */
}

.contact-info .contact-icons li:hover {
    background: rgba(255, 255, 255, 0.2); /* Fondo más claro al pasar el mouse */
    transform: translateY(-3px); /* Efecto de elevación */
}

.contact-info .contact-icons li i {
    font-size: 20px; /* Tamaño del icono */
    color: #fff; /* Color blanco para los iconos */
    margin-right: 10px; /* Espaciado entre el icono y el texto */
}

.contact-info .contact-icons li span {
    font-size: 16px; /* Tamaño de fuente del texto */
    color: #fff; /* Texto en blanco */
}

/* Estilo para la dirección */
.contact-info .contact-address {
    font-size: 16px; /* Tamaño de fuente */
    color: #fff; /* Texto en blanco */
    margin-top: 10px; /* Espaciado superior */
    line-height: 1.5; /* Altura de línea */
    display: inline-flex; /* Alinea el icono y el texto en una sola línea */
    /*align-items: center;  Centra verticalmente el icono con el texto */
}

.contact-info .contact-address i {
    font-size: 18px; /* Tamaño del icono */
    color: #fff; /* Color blanco para el icono */
    margin-right: 8px; /* Espaciado entre el icono y el texto */
}

/* Ajustes para pantallas pequeñas */
@media screen and (max-width: 768px) {
    .contact-container {
        flex-direction: column; /* Apila los elementos verticalmente */
        gap: 1rem; /* Reduce el espacio entre los elementos */
    }

    .form-container {
        max-width: 100%; /* Ocupa todo el ancho disponible */
    }
}

/* Estilo para las etiquetas del formulario */
.form-container label {
    display: block; /* Asegura que la etiqueta esté en una línea separada */
    margin-bottom: 5px; /* Espaciado inferior */
    font-weight: normal; /* Sin negrita */
    font-size: 16px; /* Tamaño de fuente igual al de los campos */
    color: #333; /* Color negro neutro */
    line-height: 1.5; /* Altura de línea para mejor legibilidad */
}

/* Estilo para las etiquetas dentro de .wrapper.style1 */
.wrapper.style1 label {
    display: block; /* Asegura que la etiqueta esté en una línea separada */
    margin-bottom: 5px; /* Espaciado inferior */
    font-weight: normal; /* Sin negrita */
    font-size: 16px; /* Tamaño de fuente igual al de los campos */
    color: #333; /* Color negro neutro */
    line-height: 1.5; /* Altura de línea para mejor legibilidad */
}

/* Estilo para el título "Contacto" */
header.major h2 {
    font-size: 36px; /* Tamaño de fuente más grande */
    font-weight: bold; /* Negrita para destacar */
    color: #fff; /* Texto en blanco */
    text-align: center; /* Centra el texto */
    margin-bottom: 10px; /* Espaciado inferior */
    position: relative; /* Necesario para la línea blanca */
}

/* Línea blanca debajo del título */
header.major h2::after {
    content: ""; /* Contenido vacío para la línea */
    display: block; /* Asegura que sea visible */
    width: 450%; /* Ancho de la línea */
    height: 3px; /* Altura de la línea */
    background-color: #fff; /* Color blanco */
    margin: 10px auto 0; /* Centra la línea y agrega espaciado */
}

/* Ajustes para pantallas móviles */
@media screen and (max-width: 768px) {
    header.major h2 {
        font-size: 28px; /* Tamaño de fuente más grande en móviles */
    }
}

/* Fondo del footer solo en la página de contacto */
body.contact-page #footer {
    background-color: rgba(29, 36, 42, 0.9);
    color: rgba(29, 36, 42, 0.9);
}
/* Fondo del footer solo en la página de contacto */
body.contact-page #footer {
    background-size: cover; /* Asegura que la imagen cubra todo el footer */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    color: #fff; /* Texto en blanco para mejor contraste */
}

/* Botón flotante para abrir el chatbot */
#chatbot-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background: #25d366;
    color: white;
    border-radius: 50%;
    display: flex; /* Asegura que el botón sea visible */
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 1000;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#chatbot-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

#chatbot-toggle i {
    font-size: 24px;
}

/* Contenedor del chatbot */
#chatbot-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 350px;
    max-height: 500px; /* Tamaño máximo del contenedor */
    overflow-y: auto; /* Habilita el desplazamiento vertical */
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    display: none; /* Oculto por defecto */
    flex-direction: column;
    z-index: 1000;
}

/* Mostrar el chatbot */
#chatbot-container.visible {
    display: flex; /* Muestra el contenedor */
}

/* Ocultar completamente el chatbot */
#chatbot-container.hidden {
    display: none; /* Oculta completamente el contenedor */
}

/* Chatbot Header */
#chatbot-header {
    background: #075e54;
    color: white;
    padding: 15px;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#chatbot-header button {
    background: none;
    border: none;
    color: white;
    font-size: 9px;
    cursor: pointer;
}

/* Chatbot Messages */
#chatbot-messages {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
    background: #ece5dd;
    display: flex;
    flex-direction: column;
}

#chatbot-messages div {
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 8px;
    max-width: 80%;
    word-wrap: break-word;
    animation: fadeIn 0.3s ease-in-out;
}

#chatbot-messages .user {
    background: #dcf8c6;
    color: black;
    align-self: flex-end;
}

#chatbot-messages .bot {
    background: white;
    color: black;
    align-self: flex-start;
    border: 1px solid #e0e0e0;
}

/* Chatbot Input */
#chatbot-input {
    display: flex;
    padding: 10px;
    border-top: 1px solid #e0e0e0;
    background: white;
}

#chatbot-user-input {
    flex: 1;
    padding: 10px;
    border: 1px solid #000000;
    border-radius: 20px;
    font-size: 14px;
}

#chatbot-user-input::placeholder {
    color: #000000; /* Cambia el color del texto del placeholder a negro */
    opacity: 1; /* Asegura que el color sea completamente visible */
}

#chatbot-user-input::-webkit-input-placeholder {
    color: #000000; /* Para navegadores basados en WebKit (Chrome, Safari) */
}

#chatbot-user-input:-ms-input-placeholder {
    color: #000000; /* Para Internet Explorer */
}

#chatbot-user-input::-ms-input-placeholder {
    color: #000000; /* Para Microsoft Edge */
}

#chatbot-send {
    margin-left: 10px;
    padding: 10px 15px;
    background: #25d366;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
}

#chatbot-send:hover {
    background: #1da851;
}

/* Estilo específico para el campo de entrada del chatbot */
#chatbot-message-input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc; /* Borde gris claro */
    border-radius: 20px; /* Bordes redondeados */
    font-size: 14px;
    color: #000; /* Texto negro */
    background-color: #fff; /* Fondo blanco */
}

/* Cambiar el color del placeholder a negro */
#chatbot-message-input::placeholder {
    color: #000; /* Texto del placeholder en negro */
    opacity: 1; /* Asegura que el color sea completamente visible */
}

/* Compatibilidad con navegadores */
#chatbot-message-input::-webkit-input-placeholder {
    color: #000; /* Para navegadores basados en WebKit (Chrome, Safari) */
}

#chatbot-message-input:-ms-input-placeholder {
    color: #000; /* Para Internet Explorer */
}

#chatbot-message-input::-ms-input-placeholder {
    color: #000; /* Para Microsoft Edge */
}

/* Animación de entrada */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Estilo base para los íconos */
#visit .features li .icon {
    font-size: 2.5rem; /* Tamaño del ícono */
    color: #555; /* Color neutro para un diseño minimalista */
    margin-bottom: 10px;
    transition: transform 0.3s ease, color 0.3s ease; /* Transición suave */
}

/* Efecto hover para los íconos */
#visit .features li .icon:hover {
    transform: scale(1.1); /* Aumenta ligeramente el tamaño */
    color: #007BFF; /* Azul elegante al pasar el cursor */
}

/* Estilo para los títulos de los servicios */
#visit .features li h3 {
    font-size: 1.2rem;
    color: #333; /* Color oscuro para contraste */
    margin-top: 10px;
    text-align: center; /* Centra el texto */
}

/* Estilo para las descripciones de los servicios */
#visit .features li p {
    font-size: 0.95rem;
    color: #666; /* Color gris suave */
    line-height: 1.5;
    text-align: center; /* Centra el texto */
}