/* ----------------------contact form---------------------- */
.contact-form {
  border: 1px solid var(--bs-gray-300);
  background-color: var(--bs-gray-400);
  border-radius: 2.4rem;
}

.contact-form .form-control,
.contact-form .form-select {
  padding: 1.4rem 1.6rem;
  font-size: 1.5rem;
  color: var(--bs-white);
  background-color: var(--bs-gray-900);
  border: 1px solid var(--bs-gray-300);
  border-radius: 1.2rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.contact-form .form-control::placeholder {
  color: var(--bs-gray-100);
  opacity: 0.7;
}

.contact-form .form-control:focus,
.contact-form .form-select:focus {
  color: var(--bs-white);
  background-color: var(--bs-gray-500);
  border-color: var(--bs-teal);
  box-shadow: 0 0 0 0.3rem rgba(58, 199, 139, 0.18);
}

/* Bootstrap's default chevron is a dark SVG — invisible on this surface. */
.contact-form .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23CBC4D1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-size: 14px 11px;
}

/* the native dropdown list renders in the OS palette unless told otherwise */
.contact-form .form-select option {
  color: var(--bs-white);
  background-color: var(--bs-dark);
}

/* Only flag a field once the user has actually interacted with it — a bare
   :invalid would paint every required field red on first paint. */
.contact-form .form-control:user-invalid,
.contact-form .form-select:user-invalid {
  border-color: var(--bs-danger);
}

.contact-form .form-control:user-valid {
  border-color: var(--bs-teal);
}

/* ----------------------partnership panel---------------------- */
.partnership-panel {
  border: 1px solid var(--bs-gray-300);
  background-color: var(--bs-gray-400);
  border-radius: 4.8rem;
  overflow: hidden;
}

.partnership-panel > img {
  width: 42%;
  height: auto;
  object-fit: cover;
  border-radius: 3.2rem;
  flex-shrink: 0;
}

@media (max-width: 991.98px) {
  .partnership-panel {
    border-radius: 3.2rem;
  }

  .partnership-panel > img {
    width: 100%;
  }
}