/*!
 * Contact Page (form layout CSS)
 * Migrated 2026-05-21 from WPCode snippet #5110.
 */

/* ===== Base Layout ===== */

#brx-content {

  font-family: 'Exo', sans-serif;

  color: #252323;

  background-color: #fff;

  padding: 2rem;

  display: flex;

  flex-direction: column;

  gap: 4rem;

}



/* ===== Top Section (Headline + Form) ===== */

#top-container {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  gap: 2rem;

}



#top-container-left {

  flex: 1 1 40%;

  display: flex;

  align-items: center;

  justify-content: center;

}



#top-container-left h2 {

  font-size: 2.5rem;

  font-weight: 900;

  color: #fff;

  background: linear-gradient(to right, #00000088, #000000aa);

  padding: 1.5rem;

  border-radius: 10px;

  line-height: 1.2;

}



#top-container-right {

  flex: 1 1 50%;

  background-color: #0a0b20;

  color: #fff;

  border-radius: 1rem;

  padding: 2rem;

}



#top-container-right h3 {

  font-size: 1.25rem;

  font-weight: 400;

  margin-bottom: 1.5rem;

}



/* ===== Contact Form ===== */

#contact-form {

  display: flex;

  flex-direction: column;

  gap: 1rem;

}



#contact-form input,

#contact-form textarea {

  width: 100%;

  padding: 0.75rem 1rem;

  border-radius: 5px;

  border: 1px solid #ccc;

  background-color: #0a0b20;

  color: #fff;

  font-size: 1rem;

}



#contact-form input::placeholder,

#contact-form textarea::placeholder {

  color: #ccc;

}



#contact-form button {

  background-color: #be9f88;

  color: #252323;

  padding: 0.75rem 1.5rem;

  border: none;

  border-radius: 6px;

  font-weight: 700;

  cursor: pointer;

  transition: background 0.3s ease;

}



#contact-form button:hover {

  background-color: #a3836e;

}



/* ===== Bottom Section (Two Column Layout) ===== */

#bottom-container {

  display: flex;

  justify-content: space-between;

  gap: 2rem;

  flex-wrap: wrap;

}



/* Left: Quick Contact */

#bottom-container-left {

  flex: 1 1 45%;

}



#bottom-container-left h2 {

  font-size: 1.5rem;

  font-weight: 700;

  border-bottom: 2px solid #e57373;

  display: inline-block;

  margin-bottom: 1rem;

}



#bottom-container-left h3 {

  font-size: 1.1rem;

  margin: 1.2rem 0 0.2rem;

  display: flex;

  align-items: center;

  gap: 0.5rem;

}



#bottom-container-left p {

  margin: 0;

  font-size: 0.95rem;

  color: #555;

}



#bottom-container-left svg {

  width: 1em;

  height: 1em;

  flex-shrink: 0;

}



/* Right: Map */

#bottom-container-right {

  flex: 1 1 50%;

}



#bottom-container-right h2 {

  font-size: 1.5rem;

  font-weight: 700;

  border-bottom: 2px solid #e57373;

  display: inline-block;

  margin-bottom: 1rem;

}



#bottom-container-right iframe {

  width: 100%;

  height: 400px;

  border: none;

  border-radius: 10px;

}



/* ===== Responsive Adjustments ===== */

@media (max-width: 768px) {

  #top-container,

  #bottom-container {

    flex-direction: column;

  }



  #top-container-left h2,

  #top-container-right h3,

  #bottom-container-left h2,

  #bottom-container-right h2 {

    text-align: center;

  }



  #contact-form button {

    width: 100%;

  }

}