/*
 * Contact Us page entrance animations.
 *
 * Webflow sets inline `opacity:0` on `.contact-one-details-wrapper`
 * (phone, address, email, LinkedIn). Without Interactions JS it stays
 * hidden, leaving the left half of the contact card empty.
 *
 * Loaded only on `/contact/contact-us`.
 */

@keyframes wf-contact-fade-up {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.wf-body .contact-one-details-wrapper {
  animation: wf-contact-fade-up 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 180ms;
}

@media (prefers-reduced-motion: reduce) {
  .wf-body .contact-one-details-wrapper {
    animation: none;
    opacity: 1 !important;
    transform: none;
  }
}

/* Contact message card — spacing and border fixes */
.contact-message-card {
  overflow: hidden;
}

.contact-message-card .wf-body,
.contact-message-card .wf-body .w-form,
.contact-message-card .wf-body .w-form form,
.contact-message-card .wf-body .w-input,
.contact-message-card .wf-body .button {
  box-sizing: border-box;
  max-width: 100%;
}

.contact-message-card .wf-body .w-form {
  margin-top: 2.5rem;
  margin-bottom: 0;
}

.contact-message-card .wf-body .w-form form {
  display: flex;
  flex-direction: column;
}

.contact-message-card .wf-body .text-field-two {
  display: block;
  width: 100%;
}

.contact-message-card .wf-body .button.full-width-button {
  width: 100%;
  margin-top: 1rem;
}

/*
 * Inset the white form card from the viewport.
 * The Webflow container goes full-width below 767px with no side padding,
 * so we pad the hero container and add card margins for a visible gutter.
 */
.wf-body .contact-one-hero-section > .w-layout-blockcontainer {
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

.wf-body .contact-one-hero-section .contact-form-one.border-radius-thirty,
.wf-body .contact-one-hero-section #react-contact-form-root.contact-form-one {
  margin-left: 16px;
  margin-right: 16px;
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
}

@media screen and (max-width: 767px) {
  .wf-body .contact-one-hero-section > .w-layout-blockcontainer {
    padding-left: 20px;
    padding-right: 20px;
  }

  .wf-body .contact-one-hero-section .contact-form-one.border-radius-thirty,
  .wf-body .contact-one-hero-section #react-contact-form-root.contact-form-one {
    margin-left: 12px;
    margin-right: 12px;
  }
}

@media screen and (max-width: 479px) {
  .wf-body .contact-one-hero-section > .w-layout-blockcontainer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .wf-body .contact-one-hero-section .contact-form-one.border-radius-thirty,
  .wf-body .contact-one-hero-section #react-contact-form-root.contact-form-one {
    margin-left: 8px;
    margin-right: 8px;
  }
}