@import "../components/checkbox.css";
@import "../components/inputText.css";
@import "../components/switch.css";

.contactForm {
  @apply relative z-10 h-full overflow-hidden;

  padding-top: var(--spacing-sm-margin-section);
  padding-bottom: var(--spacing-sm-margin-with-footer);
  color: var(--color-white);
  background: linear-gradient(199deg, #0065b6 39.29%, #68d2ff 117.05%);

  @variant md {
    padding-top: var(--spacing-md-margin-section);
    padding-bottom: var(--spacing-md-margin-with-footer);
  }

  @variant lg {
    padding-top: var(--spacing-lg-margin-section);
    padding-bottom: var(--spacing-lg-margin-with-footer);
  }

  &::after {
    @apply absolute aspect-square;

    top: -235.164px;
    right: -168px;
    z-index: -1;
    width: 489px;
    content: "";
    background: #68d2ff;
    border-radius: 100%;
    filter: blur(100px);

    @variant lg {
      top: 0;
      right: 0;
      width: 28.2%;
      min-width: 489px;
      transform: translate(23.9%, -34.9%);
    }
  }
}

.contactForm-information {
  @apply space-y-32;

  @variant lg {
    @apply space-y-40;

    padding-bottom: var(--spacing-lg-sm);
  }
}

.contactForm-form {
  @apply space-y-40;

  padding-top: 20px;
}

.contactForm-submit {
  width: 240px;
}