@import "landing-page.css";

body {
  margin: 0;
}

a, p, h1, h2, h3, h4, h5, h6, span, button, div {
  font-family: 'Poppins', sans-serif;
}

.form {
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.form__image {
  border-radius: 0px;
  height: 100dvh;
  object-fit: cover;
  inset: 0;
  position: fixed;
  width: 100%;
}

.form__content {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 129px 350px 111px 0;
  position: relative;
  max-width: 537px;
  z-index: 1;
}

.form__content-title {
  color: var(--color-white);
  font-size: 31px;
  font-style: italic;
  font-weight: 600;
  line-height: 28px;
  margin-bottom: 31px;
  text-align: center;
}

.form__content-description {
  color: var(--color-white);
  font-size: 15px;
  font-weight: 300;
  line-height: 28px;
  margin-bottom: 6px;
}

.form__content-box {
  background: linear-gradient(104deg, rgba(12, 45, 156, 0.20) -0.34%, rgba(51, 51, 51, 0.20) 43.41%, rgba(106, 9, 113, 0.20) 87.15%);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(74, 66, 145, 0.20);
  border-radius: 24px;
  max-width: 537px;
  padding: 24px;
  width: 100%;
}

.form__content-logo {
  padding-top: 70px;
}

.form__content-image {
  height: auto;
  position: absolute;
  right: -120px;
  top: 75px;
  width: auto;
  z-index: -1;
}

.b24-form {
  width: 100%;
}

.b24-form-wrapper {
  background-color: transparent !important;
}

button[type="submit"] {
  background: linear-gradient(94deg, #29173D 2.53%, #2C1834 48.13%, #3F1443 93.72%) !important;
  border: 1px solid rgba(0, 0, 0, 0.00) !important;
  border-radius: 100px !important;
  color: var(--color-white) !important;
}

button[type="submit"]:hover {
  background: linear-gradient(94deg, #3F1443 2.53%, #2C1834 48.13%, #29173D 93.72%) !important;
}

.b24-form-control-container {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
}

.b24-form-control-label,
.b24-form-control,
.b24-form-control-string .b24-form-control:-webkit-autofill {
  color: var(--color-white) !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 12px !important;
  font-weight: 300 !important;
  line-height: 130% !important;
  padding: 8px 16px !important;
  -webkit-text-fill-color: var(--color-white) !important;
}

.b24-form-control {
  border: 0.5px solid #FFF !important;
  border-radius: 100px !important;
  color: var(--color-white) !important;
  font-size: 12px !important;
  font-weight: 300 !important;
  height: 32px !important;
  position: relative !important;
}

.b24-form-control-label {
  margin-bottom: 16px !important;
  width: fit-content !important;
}

.b24-form-control-not-empty+.b24-form-control-label,
.b24-form-control:focus+.b24-form-control-label {
  top: 0 !important;
}

.b24-form-control-not-empty + .b24-form-control-label,
.b24-form-control:focus + .b24-form-control-label {
  display: none !important;
}

.b24-form-control:focus:not([readonly]) {
  background-color: transparent !important;
}

.b24-form-content .b24-form-field.b24-form-control-alert {
  margin-bottom: 32px !important;
}

.b24-form-control-alert-message {
  top: 36px !important;
}

.b24-form-dropdown {
  position: static !important;
}

.b24-form-dropdown-container {
  left: 0;
  top: 48px;
}

.b24-form-icon-remove {
  height: 32px !important;
  opacity: 1 !important;
  padding: 8px 16px !important;
  right: 0 !important;
}

.b24-form-icon-remove:after, .b24-form-icon-remove:before {
  background: var(--color-white) !important;
}

.b24-form-control-container::after {
  border-right: 2px solid #fff !important;
  border-bottom: 2px solid #fff !important;
  top: 15px !important;
}

.b24-form-control-container:has(.b24-form-control-not-empty)::after {
  content: none !important;
}

@media (max-width: 1025px) {
  .form {
    margin: 0 auto;
    padding: 0 20px;
  }

  .form__content {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 100%;
    padding: 129px 0 111px 0;
    position: relative;
    width: 100%;
    z-index: 1;
  }

  .form__content-box {
    width: 90%;
  }

  .b24-form-control {
    border-width: 1px !important;
  }
}

@media (max-width: 768px) {
  .form__content-image {
    display: none;
  }
}