.contact-container {
  display: flex;
  flex-direction: column;
}

.contact-text-container {
  display: flex;
  flex-direction: column;
  background-image: url('/assets/homepage/contact-bg-min.webp');
  background-size: contain;
  background-repeat: no-repeat;
  color: white;
}

.contact-title {
  color: white;
  margin-bottom: 0;
  font-family: 'Korbin';
  font-weight: 600;
  font-style: italic;
}

.font-yellow {
  color: #f6d764;
}

#contact-canvas-container {
  /* Add any canvas container specific styles here */
}

@media (min-width: 1024px) {
  #contact-canvas-container {
    display: flex;
    justify-content: flex-end;
  }

  .contact-container {
    flex-direction: row;
  }

  .contact-text-container {
    flex: 1; /* Equal width */
  }

  #contact-canvas-container {
    flex: 1; /* Equal width */
  }
}

/* 768px and above - side by side */
@media (min-width: 768px) {
}

@media (max-width: 1024px) {
  .contact-text-container {
    align-items: flex-start;
    padding-left: 5%;
  }
}

/* Below 768px - column layout (canvas below text) */
@media (max-width: 767px) {
  .contact-container {
    flex-direction: column;
  }

  .contact-text-container {
    order: 1; /* Text first */
  }

  #contact-canvas-container {
    order: 2; /* Canvas second (below) */
  }
}

@media (max-width: 767px) {
  .contact-text-container {
    align-items: flex-start;
    padding-left: 0%;
  }

  .contact-title {
    padding-left: 5%;
  }

  .contact-subtitle {
    padding-left: 5%;
  }
  .form-container {
    align-self: center;
    overflow-x: hidden;
    margin-left: 0;
  }
}