/* ============================= */
/*        Responsive Styles      */
/* ============================= */

/* Para pantallas medianas (max-width: 992px), ajustar el menú colapsado */
@media (max-width: 992px) {
    .navbar-collapse {
      position: absolute;
      top: 100%; /* justo debajo del navbar */
      left: 0;
      right: 0;
      background-color: #fff;
      z-index: 99;
      padding: 1rem 0;
      padding-left: 30%; /* o margin-left: 20px, según convenga */
      padding-right: 30%;
    }

    .hero-buttons {
        display: flex;
        justify-content: center;
        gap: 3rem; /* Espacio uniforme entre botones */
        flex-wrap: wrap;
        margin-top: 50px;
    }
  }
  
  /* Para pantallas pequeñas (max-width: 768px) */
  @media (max-width: 768px) {
      .navbar-brand img {
          height: 70px;
          max-height: 70px;
      }
      .navbar {
          height: 80px;
      }

      .hero-buttons {
        display: flex;
        justify-content: center;
        gap: 3rem; /* Espacio uniforme entre botones */
        flex-wrap: wrap;
        margin-top: 50px;
    }
  }
  
    /* Responsive: en pantallas pequeñas, ajustar altura del mapa y posición del formulario */
    @media (max-width: 768px) {
      .contact-wrapper {
        height: auto;
        margin-top: 0; /* Reduce el margin-top en móvil */
      }
      .map-contact {
        position: relative;
        height: 300px;
      }
      .map-contact iframe {
        height: 300px;
      }
      .form-contact {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        margin-top: 10px; /* Ajusta este valor para reducir la separación */
        width: 100%;
      }
    }