.contactUs-wrapper {
  border: 1px solid rgba(33, 33, 33, 0.4);
  border-radius: var(--rounded-8xl);
  gap: var(--spacing-8);
  flex-wrap: wrap;
  overflow: hidden;
  position: relative;
  padding-inline: clamp(1rem, 8vw, 5rem);
  padding-block: var(--spacing-32);
  z-index: 1;
}

.contactUs-wrapper::after,
.contactUs-wrapper::before {
  content: "";
  position: absolute;
  background: var(--dark-gray-gradient);
  mix-blend-mode: luminosity;
  opacity: 0.14;
  filter: blur(240px);
  height: 100%;
  width: 160%;
  left: -60%;
  top: 40%;
}

.contactUs-wrapper::before {
  left: 20%;
  top: -40%;
}

.form-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-block-start: var(--section-margin);
}

.contactForm {
  border: 1px solid var(--border);
  border-radius: var(--rounded-2xl);
  gap: var(--spacing-4);
  padding: var(--spacing-8);
  max-width: 35rem;
  width: 100%;
  position: relative;
}

.contactForm::before,
.contactForm::after {
  content: "";
  border-radius: inherit;
  position: absolute;
  inset: 0;
  background: var(--kn-black);
  mix-blend-mode: hue;
  height: 100%;
  width: 100%;
  z-index: -2;
}

.contactForm::after {
  background: var(--dark-gray-gradient);
  mix-blend-mode: luminosity;
  opacity: 0.16;
  filter: blur(280px);
  z-index: -1;
}

.input-wrapper {
  gap: var(--spacing-4);
}

input,
select,
textarea {
  border: 1px solid var(--border);
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--kn-white);
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  padding-block: var(--spacing-3);
  padding-inline: var(--spacing-4);
  border-radius: var(--rounded-lg);
  outline: none;
  width: 100%;
}

.light input,
select,
textarea {
  border-color: rgba(153, 143, 143, 0.555);
}

.input-group {
  width: 100%;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--primary-500);
}

.contactFormLabel {
  color: var(--gray-400);
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  margin-block-end: var(--spacing-0-5);
  text-transform: uppercase;
}

.contact-heading {
  padding-top: var(--spacing-10);
}

.submit-btn {
  border: none !important;
  width: 100% !important;
  text-align: center;
  justify-content: center !important;
  margin-block-start: var(--spacing-3);
  min-height: 45px;
}

.form-content {
  border-style: solid;
  border-width: 1px;
  border-image: var(--gradient-border-180) 0% 100% 0% 100%;
  padding-inline: var(--spacing-14);
  padding-block-end: calc(var(--section-margin) / 2);
  margin-block-end: calc(var(--section-margin) / 2);
}

.form-content .heroHeading-wrapper {
  margin-block-end: var(--spacing-14);
}

.contactForm-wrapper {
  padding-block: var(--spacing-14);
  position: relative;
}

.contactForm-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  transform: translateX(-50%);
  left: 50%;
  border-style: solid;
  border-width: 1px;
  border-image: var(--gradient-border) 100% 0% 100% 0%;
  width: calc(100% + (var(--spacing-14) * 10));
}

.light .contactForm-wrapper::before {
  z-index: 0;
}

.form-content p {
  width: 100%;
  max-width: 28.75rem;
}

::backdrop {
  background: rgba(8, 8, 15, 0.88);
}

.light ::backdrop {
  background: rgba(230, 230, 255, 0.35);
}

.close-btn {
  position: absolute;
  top: -3rem;
  right: 0;
  cursor: pointer;
  border-radius: var(--rounded-xl);
  border: 1px solid var(--border);
  background: var(--kn-black);
  padding: var(--spacing-2);
}

.dialog-wrapper {
  height: 100dvh;
  width: 100%;
  position: absolute;
  position: fixed;
  z-index: 99;
}

.contactUs-success-dialog {
  background-color: var(--kn-black);
  border-radius: var(--rounded-2xl);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(90px);
  margin: auto;
  width: 90%;
  max-width: 35rem;
  padding: var(--spacing-12);
  gap: var(--spacing-3);
  overflow: visible;
}

.contactUs-success-dialog::after,
.close-btn::after {
  content: "";
  position: absolute;
  background: var(--dark-gray-gradient);
  mix-blend-mode: luminosity;
  opacity: 0.14;
  inset: 0;
  filter: blur(120px);
  height: 100%;
  width: 100%;
}

.successContent {
  gap: var(--spacing-1);
}

.successContent h2 {
  font-weight: var(--font-weight-medium);
}


select>option {
  background-color: var(--kn-black) !important;
  color: var(--kn-white) !important;
}