/* ===================================================
   Layout: Contact banner
   File:   template-parts/flexible/contact_banner/contact_banner.css
=================================================== */
.contact-banner {
  padding: 50px 0 75px 0;
}

.contact-banner-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 90%;
}

.contact-banner-content p {
  margin: 0 !important;
}

.contact-banner-desc,
.contact-banner-desc p {
  color: var(--color-19);
  margin: 0 !important;
}

.contact-banner-address,
.contact-banner-address p {
  color: var(--color-18);
  margin: 0 !important;
}

/* Light theme form styling */
.contact-banner .form-container {
  color: var(--color-18);
  background-color: var(--color-17);
  padding: 24px;
  border-radius: 20px;
}

.contact-banner .form-container label {
  color: var(--color-18);
}

.contact-banner .form-type-label {
  color: rgba(40, 40, 40, 0.5);
}

.contact-banner .form-type-label.active {
  color: var(--color-18);
}

.contact-banner .toggle-slider {
  background-color: var(--color-18);
}

.contact-banner .file-upload-label {
  color: var(--color-21);
}

.contact-banner .file-upload-label svg path {
  stroke: var(--color-18);
}

.contact-banner-content {
  padding-top: 120px;
}

.contact-banner .contact-banner-wrap {
  display: grid;
  grid-template-columns: repeat(2, 2fr);
  gap: 24px;
}

@media (max-width: 767.98px) {
  .contact-banner .row {
    row-gap: 40px;
  }

  .contact-banner-content {
    padding-top: 0;
    max-width: 100%;
  }
  .contact-banner .contact-banner-wrap {
    grid-template-columns: repeat(1, 1fr);
    gap: 0;
  }
  .contact-banner .form-container {
    padding: 10px 14px;
  }
}