/* -------------------------------- */
/* CONTACT SECTION START */
/* -------------------------------- */

.contact {
    text-align: center;
    background-color: #FCF8F0; /* Fondo color beige */
    padding: 5px 0; /* Reduce aún más el padding superior e inferior */
    margin-top: -10px; /* Añade un margen negativo para elevar la sección */
    }
    
    .contact-image-top,
    .contact-image-bottom {
    width: 100%;
    height: auto;
    }
    
    .contact-info {
    margin: 5px 0; /* Reduce el margen para elevar el contenido */
    }
    
    .contact-rectangle {
    background-color: #C0BDA8; /* Color de los rectángulos */
    color: #ffffff; /* Cambiado a blanco para el texto */
    padding: 8px; /* Reducir el padding para ser más delgado */
    margin: 5px 0; /* Reduce el margen para elevar el contenido */
    font-size: 1.2em;
    font-family: 'Century Gothic', sans-serif;
    border-radius: 5px;
    width: 100%; /* Asegura que los rectángulos ocupen todo el ancho */
    box-sizing: border-box; /* Incluir padding en el ancho total */
    letter-spacing: 2px; /* Añade espaciado entre los caracteres */
    }
    
    .separator {
    text-align: center;
    font-family: 'Playfair Display', serif; /* Usa la misma fuente elegante */
    font-size: 1.5em; /* Ajusta el tamaño de la fuente */
    color: #000000; /* Usa un color similar para mantener el estilo */
    margin: 10px 0 30px 0; /* Aumenta el margen inferior para mayor separación */
    line-height: 1; /* Mantener el espaciado adecuado */
    }
    
    .check-location {
    font-family: 'Playfair Display', serif; /* Usa una fuente serif similar */
    font-weight: 100; /* Establece un peso más ligero */
    font-size: 1.8em; /* Ajusta el tamaño de la fuente para que sea prominente */
    color: #A18064; /* Color similar al mostrado en la imagen */
    text-align: center;
    line-height: 1.4; /* Ajusta el espaciado entre líneas */
    margin: 10px 0; /* Mantiene un margen reducido */
    text-transform: uppercase; /* Asegura que el texto esté en mayúsculas */
    letter-spacing: 0.1em; /* Ajusta el espaciado entre letras */
    }
    
    .buttons-container {
    display: flex;
    flex-direction: column; /* Cambiado a columna para apilar los botones verticalmente */
    align-items: center; /* Asegura que los botones estén centrados */
    gap: 10px; /* Reduce el espacio entre botones */
    margin: 10px 0; /* Reduce el margen para elevar el contenido */
    }
    
    .contact-button {
    display: inline-block; /* Asegura que el enlace se comporte como un bloque con tamaño específico */
    text-align: center; /* Centra el texto dentro del enlace */
    text-decoration: none; /* Elimina el subrayado de los enlaces */
    color: #5A4634; /* Color del texto */
    border: none;
    padding: 12px 20px; /* Reduce el padding para acercar los bordes al texto */
    cursor: pointer;
    font-size: 1.5em; /* Mantener el tamaño de la fuente */
    font-family: 'Playfair Display', serif; /* Usa la misma fuente elegante */
    border-radius: 5px;
    transition: background-color 0.3s ease;
    width: auto; /* Ajusta el ancho al contenido del texto */
    max-width: 300px; /* Limita el ancho máximo para una mejor apariencia en pantallas grandes */
    text-transform: uppercase; /* Asegura que el texto esté en mayúsculas */
    line-height: 1.2; /* Asegura el espaciado adecuado entre líneas */
    margin: 10px 0; /* Añadir un pequeño margen vertical entre los botones */
    }
    
    .upcoming-travel-button {
    background-color: #C0BDA9; /* Color específico para UPCOMING TRAVEL */
    }
    
    .inquire-now-button {
    background-color: #A18064; /* Color específico para INQUIRE NOW */
    }
    
    /* Estilos para el hover si quieres mantener el mismo comportamiento al pasar el ratón */
    .contact-button:hover {
    background-color: #D8B4A0; /* Ejemplo de color al pasar el ratón, ajústalo como desees */
    color: #fff; /* Cambiar color del texto al pasar el ratón, si es necesario */
    }
    
    /* Media Queries for Responsive Design */
    @media (max-width: 768px) {
    .contact-rectangle {
      font-size: 1em;
      width: 100%; /* Asegura que los rectángulos ocupen todo el ancho en pantallas pequeñas */
      padding: 8px; /* Mantener el padding para que toquen de lado a lado */
      box-sizing: border-box; /* Incluir padding en el ancho total */
    }
    
    .contact-button {
      padding: 10px 15px; /* Ajustar padding para pantallas pequeñas */
      font-size: 1.3em; /* Ajustar tamaño de la fuente para pantallas pequeñas */
      width: auto; /* Asegurarse de que se vean bien en pantallas pequeñas */
    }
    
    .check-location {
      font-size: 1.2em;
    }
    }
    
    @media (min-width: 769px) and (max-width: 1023px) {
    .contact-rectangle {
      font-size: 1.1em;
      width: 70%; /* Ajusta el ancho al contenido en pantallas medianas */
      margin-left: auto;
      margin-right: auto;
    }
    
    .contact-button {
      padding: 12px 20px; /* Reducir el padding para acercar los bordes al texto */
      font-size: 1.4em;
    }
    
    .check-location {
      font-size: 1.4em;
    }
    }
    
    @media (min-width: 1024px) {
    .contact-rectangle {
      font-size: 1.3em;
      width: 60%; /* Ajusta el ancho al contenido en pantallas grandes */
      margin-left: auto;
      margin-right: auto;
    }
    
    .contact-button {
      padding: 12px 20px; /* Reducir el padding para acercar los bordes al texto */
      font-size: 1.5em;
    }
    
    .check-location {
      font-size: 1.5em;
    }
    }
    
    /* -------------------------------- */
    /* END CONTACT SECTION */
    /* -------------------------------- */
    