#contact-us {
  width: 100%;
  margin: 0 auto;
  padding: 40px 1rem 40px 1rem;
  box-sizing: border-box;
  display: grid;
  /* Mantenemos la distribución de ancho: 1fr para Left, 1.5fr para Right */
  grid-template-columns: 1fr 1fr; 
  gap: 40px;
  
  /* CLAVE: ESTIRAR los elementos para igualar la altura del más alto */
  align-items: stretch; 
  
  max-width: 1200px;
  min-height: 70vh;
}

/* Columna Izquierda: Tarjeta de Información */
#contact-us .left {
  background: #f8f8f8;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  width: 100%;
  
  /* MODIFICADO: Remover min-height fijo y asegurar que ocupe todo el espacio del Grid */
  height: 100%; 
  min-height: auto; /* Dejar que el grid maneje la altura */
  
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, background 0.3s;
}

#contact-us .left:hover {
  transform: translateY(-5px); 
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  background: #f0f6ff;
}

#contact-us .logo2 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
}

#contact-us .logo2 img {
  max-width: 400px;
  height: auto;
}

/* Título de la Sección "Contact Us" */
#contact-us .title h2 {
  font-size: 2.2rem;
  font-weight: 800;
  color: #1b3d73;
  margin-bottom: 1rem !important;
}

/* Contenedor de cada item (Email, Phone, Address) - Ahora usan IDs como #email */
.contact-item {
  text-align: center;
  margin-bottom: 1.5rem;
}

/* Estilo para los títulos (h5) de los ítems de contacto */
.contact-item h5 {
  font-size: 1.1rem;
  color: #555;
  margin-bottom: 0.25rem;
  margin-top: 1rem;
  font-weight: 700;
  /* Centrar Título + Ícono */
  display: flex; 
  align-items: center;
  justify-content: center;
  gap: 5px;
}

/* Estilo para los íconos */
.contact-item h5 .fa-envelope, 
.contact-item h5 .fa-phone,
.contact-item h5 .fa-map-marker-alt {
  color: #068fd3; /* Color primario para resaltar los íconos */
  font-size: 1.1em;
}

/* Contenedores de Párrafo de la información */
#email-paragraph,
#phone-paragraph,
#address1-paragraph,
#address2-paragraph {
  display: block; /* Asegura que el contenedor de los párrafos use el ancho completo */
}

.contact-item p {
  font-size: 1rem;
  color: #555;
  margin: 0;
  line-height: 1.5;
  /* Centrar el texto */
  text-align: center; 
}


/* Columna Derecha: Formulario */
#contact-us .right {
  display: flex;
  flex-direction: column;
  /* CLAVE: Ocupar toda la altura estirada del Grid */
  height: 100%; 
  
  /* CLAVE: Centrar el contenido verticalmente dentro de esta altura */
  justify-content: center; 
  
  align-items: flex-start;
  width: 100%;
  padding: 0;
}

.schedule-consultation {
  width: 100%;
  padding: 2.5rem;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.form-header-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #1b3d73; 
  text-align: center;
  margin-bottom: 2rem !important;
}

/* Estilización de Inputs/Botones de Bootstrap */
.schedule-consultation .form-label {
  font-weight: 600;
  color: #555;
}

.schedule-consultation .form-group i{
  color: #068fd3;
}

.schedule-consultation .form-control:focus {
  border-color: #068fd3;
  box-shadow: 0 0 0 0.25rem rgba(6, 143, 211, 0.25);
}

.schedule-consultation .btn-primary {
  background-color: #068fd3;
  border-color: #068fd3;
  font-weight: 600;
  transition: background-color 0.3s ease;
}

.schedule-consultation .btn-primary:hover {
  background-color: #1a2942;
  border-color: #1a2942;
}

/* Estilos para el mensaje de error */
.error-message {
  color: #dc3545; /* Rojo de error */
  font-size: 0.875em;
  margin-top: 0.25rem;
  display: block;
}

/* Resaltar el input que tiene un error */
.form-control.is-invalid {
  border-color: #dc3545 !important;
  /* (Opcional: Añade estilos para un icono de error si usas Bootstrap) */
}

/* Estilos para el div de feedback general */
#form-feedback-message {
  margin-bottom: 1rem;
  /* Asegúrate de que los colores de alert-success/danger de Bootstrap estén cargados */
}

/* Reglas para ocultar el campo Honeypot de forma efectiva */
.honeypot-field {
  /* Oculta completamente el div contenedor */
  display: none !important; 
  /* Las siguientes reglas son una alternativa si display: none falla o por seguridad */
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 0 !important;
  margin: 0 !important;
}

/* Opcional, pero buena práctica para asegurar que el input también esté inaccesible */
.honeypot-field input {
  display: none !important;
}

/* -------------------- */
/* RESPONSIVIDAD */
/* -------------------- */

@media (max-width: 991px) {
  #contact-us {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 30px 1rem;
    min-height: auto;
    max-width: 98vw;
  }
  
  #contact-us .left {
      min-height: auto;
      padding: 1.5rem;
  }

  #contact-us .left:hover {
      transform: none; 
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  }

  .schedule-consultation {
      padding: 1.5rem;
  }

  #contact-us .logo2 img {
      max-width: 300px;
  }
}
@media (max-width: 561px) {
  #contact-us .logo2 img {
      max-width: 200px;
  }
}