/* ==========================================
   INVESTOR CONTACT SECTION
========================================== */

.investor-contact-section {
  background:
    radial-gradient(
      circle at 85% 20%,
      var(--color-009fe3-alpha-15),
      var(--color-transparent) 35%
    ),
    var(--color-020b14);

  padding: 150px 0;
}

.investor-contact-layout {
  display: grid;

  grid-template-columns: 0.9fr 1.1fr;

  gap: 90px;

  align-items: start;
  max-width: 1330px;
  margin: 0 auto;
}

/* ==========================================
   LEFT CONTACT CONTENT
========================================== */

.section-tag {
  display: block;

  color: var(--color-text-dark);

  font-size: var(--font-size-12);

  letter-spacing: 2px;

  font-weight: 700;
}

.contact-content h2,
.feedback-content h2 {
  color: var(--color-white);

  font-size: var(--font-size-42);

  line-height: 1.2;

  margin: 25px 0;

  font-family: "gotham", sans-serif;
}

.lead {
  max-width: 430px;

  color: var(--color-aeb8c3);

  line-height: 1.9;

  font-size: var(--font-size-15);
}

.person-detail {
  display: flex;

  align-items: center;

  gap: 18px;

  margin: 45px 0;
}

.person-detail i {
  height: 50px;

  width: 50px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  background: var(--color-brand-accent);

  color: var(--color-white);

  font-size: var(--font-size-18);
}

.person-detail h4 {
  color: var(--color-white);

  margin: 0 0 5px;

  font-size: var(--font-size-18);
}

.person-detail span {
  color: var(--color-brand-accent);

  font-size: var(--font-size-13);
}

.contact-info {
  display: flex;

  gap: 35px;

  padding: 30px 0;

  border-top: 1px solid var(--color-ffffff-alpha-12);

  border-bottom: 1px solid var(--color-ffffff-alpha-12);
}

.contact-info div {
  display: flex;

  align-items: center;

  gap: 10px;

  color: var(--color-text-muted);

  font-size: var(--font-size-14);
}

.contact-info i {
  color: var(--color-brand-accent);
}

.address {
  margin-top: 35px;
}

.address h4 {
  color: var(--color-white);

  font-size: var(--font-size-17);

  margin-bottom: 15px;
}

.address p {
  color: var(--color-aeb8c3);

  line-height: 1.8;

  font-size: var(--font-size-14);
}

/* ==========================================
   RIGHT FORM AREA
========================================== */

.feedback-content {
  padding-left: 60px;

  border-left: 1px solid var(--color-ffffff-alpha-12);
}

.feedback-content h2 {
  font-size: var(--font-size-34);

  margin-bottom: 35px;
}

/* FORM */

.premium-form {
  width: 100%;
}

/* floating inputs */

.input-group {
  position: relative;

  margin-bottom: 25px;
}

.input-row {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 20px;
}

.input-group input,
.input-group textarea,
.select-field select {
  width: 100%;

  background: var(--color-ffffff-alpha-04);

  border: 1px solid var(--color-ffffff-alpha-15);

  border-radius: 14px;

  padding: 18px 20px;

  color: var(--color-white);

  font-size: var(--font-size-14);

  font-family: inherit;

  outline: none;

  transition: 0.35s ease;
}

.input-group textarea {
  height: 140px;

  resize: none;
}

.input-group input:focus,
.input-group textarea:focus,
.select-field select:focus {
  border-color: var(--color-brand-accent);

  background: var(--color-009fe3-alpha-08);

  box-shadow: 0 0 0 4px var(--color-009fe3-alpha-08);
}

.input-group label {
  position: absolute;

  left: 20px;

  top: 18px;

  color: var(--color-8f9aa5);

  font-size: var(--font-size-14);

  pointer-events: none;

  transition: 0.3s ease;
}

.input-group input:focus + label,
.input-group textarea:focus + label,
.input-group input:valid + label,
.input-group textarea:valid + label {
  top: -9px;

  background: var(--color-020b14);

  padding: 0 8px;

  color: var(--color-brand-accent);

  font-size: var(--font-size-11);
}

/* SELECT */

.select-field {
  position: relative;
}

.select-field select {
  appearance: none;

  cursor: pointer;
}

/* REQUEST TYPE */

.select-group {
  margin-bottom: 25px;
}

.select-group > label {
  display: block;

  color: var(--color-aeb8c3);

  font-size: var(--font-size-13);

  margin-bottom: 15px;
}

.radio-options {
  display: flex;

  gap: 15px;
}
.input-group.select-field option {
  background-color: var(--color-black) !important;
}
.radio-box {
  padding: 14px 22px;

  border-radius: 50px;

  border: 1px solid var(--color-ffffff-alpha-15);

  color: var(--color-aeb8c3);

  cursor: pointer;

  transition: 0.3s ease;

  font-size: var(--font-size-14);
}

.radio-box input {
  display: none;
}

.radio-box.active,
.radio-box:hover {
  border-color: var(--color-brand-accent);

  background: var(--color-009fe3-alpha-12);

  color: var(--color-white);
}

/* CAPTCHA */

.captcha-area {
  display: flex;

  align-items: center;

  gap: 20px;

  margin-top: 25px;
}

.captcha-area span {
  color: var(--color-aeb8c3);

  font-size: var(--font-size-13);
}

.captcha-area strong {
  display: block;

  margin-top: 5px;

  color: var(--color-brand-accent);

  letter-spacing: 4px;

  font-size: var(--font-size-18);
}

.captcha-area input {
  height: 45px;

  width: 160px;

  background: var(--color-ffffff-alpha-04);

  border: 1px solid var(--color-ffffff-alpha-15);

  border-radius: 12px;

  color: var(--color-white);

  padding: 10px;
}

/* BUTTON */

.submit-btn {
  margin-top: 30px;

  padding: 16px 38px;

  border: none;

  border-radius: 50px;

  background: linear-gradient(90deg, var(--color-brand-accent), var(--color-brand-secondary));

  color: var(--color-white);

  font-size: var(--font-size-15);

  font-weight: 500;

  display: flex;

  align-items: center;

  gap: 12px;

  cursor: pointer;

  transition: 0.35s ease;
}

.submit-btn:hover {
  transform: translateY(-4px);

  box-shadow: 0 15px 35px var(--color-009fe3-alpha-35);
}

/* ==========================================
   ANIMATION
========================================== */

.reveal-contact {
  opacity: 0;

  transform: translateY(40px);
}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 1100px) {
  .investor-contact-layout {
    grid-template-columns: 1fr;

    gap: 60px;
  }

  .feedback-content {
    border-left: none;

    padding-left: 0;
  }
}

@media (max-width: 700px) {
  .contact-content h2 {
    font-size: var(--font-size-34);
  }

  .input-row {
    grid-template-columns: 1fr;
  }

  .contact-info {
    flex-direction: column;

    gap: 15px;
  }

  .radio-options {
    flex-direction: column;
  }

  .captcha-area {
    flex-direction: column;

    align-items: flex-start;
  }
}