/* Keep your site background from style.css; this focuses on the card */
.contact-wrap {
  max-width: 560px;
  margin: 28px auto;
  padding: 0 12px;
}

/* Lighter, smaller, lets the body background show more */
.contact-card {
  background: rgba(11, 16, 32, 0.72); /* semi-transparent rather than solid */
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 18px 16px;
}

@media (min-width: 576px) {
  .contact-card { padding: 22px 20px; }
}

.contact-title {
  font-weight: 700;
  color: #f39c12;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.contact-blurb {
  color: #dbe7ff;
  font-size: 0.95rem;
  margin-bottom: 18px;
}

/* Inputs: lighter background than your darkest, keep theme */
.contact-input.form-control {
  background: #162041;
  border: 1px solid rgba(243, 156, 18, 0.6);
  color: #fff;
}

.contact-input.form-control:focus {
  background: #0b1020;
  color: #fff;
  border-color: #f39c12;
  box-shadow: 0 0 0 0.2rem rgba(243, 156, 18, 0.2);
}

/* Placeholders */
.contact-input::placeholder { color: #cfd6e6; opacity: 1; }
.contact-input:-ms-input-placeholder { color: #cfd6e6; }
.contact-input::-ms-input-placeholder { color: #cfd6e6; }

/* Button */
.btn-contact {
  background: #f39c12;
  color: azure;
  font-weight: 700;
  border: 1px solid rgba(243, 156, 18, 0.7);
}

.btn-contact:hover,
.btn-contact:focus {
  background: #ffb84d;
  color: #0b1020;
}

/* Response text colors */
#formResponse.success { color: #ffcc66; }
#formResponse.error   { color: #ff6b6b; }