/* contactForm.css */

/*───────────────────────────────────────────────────────────────────────────
  1) Color Palette (taken from your main section)
───────────────────────────────────────────────────────────────────────────*/
:root {
  --primary-green: #4B7766;
  --secondary-gold: #CBB26A;
  --light-yellow: #FFF4CA;
  --text-dark: #ffcc00;
  --accent-orange: #ff8c00;
}

/*───────────────────────────────────────────────────────────────────────────
  2) Form Container Styling
───────────────────────────────────────────────────────────────────────────*/
#contact-panel .form-container {
  background-color: #264736;
  border: 2px solid var(--primary-green);
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.858);
  padding: 2rem;
}

#contact-panel {
  background-color: #173b28;
}


/*───────────────────────────────────────────────────────────────────────────
  3) Label Styling
───────────────────────────────────────────────────────────────────────────*/
#contact-panel .form-label {
  color: var(--text-dark);
  font-weight: 500;
}
.text-secondary{
    font-size: 1.2rem;
  color: #32cd32 !important;
}
/*───────────────────────────────────────────────────────────────────────────
  4) Input / Textarea Styling
───────────────────────────────────────────────────────────────────────────*/
#contact-panel .form-control {
  border: 2px solid var(--secondary-gold);
  border-radius: 5px;
  padding: 0.75rem 1rem;
  background-color: var(--light-yellow);
  color: #070325;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

#contact-panel .form-control:focus {
  border-color: var(--primary-green);
  box-shadow: 0 0 0 0.2rem rgba(75, 119, 102, 0.25);
}

/*───────────────────────────────────────────────────────────────────────────
  5) Button Styling
───────────────────────────────────────────────────────────────────────────*/
#contact-panel .btn-submit {
  background-color: var(--secondary-gold);
  color: var(--text-dark);
  border: none;
  font-weight: 600;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

#contact-panel .btn-submit:hover {
  background-color: #A38B53; /* slightly darker gold */
  transform: translateY(-2px);
  color: #ffffff;
}

/*───────────────────────────────────────────────────────────────────────────
  6) Result Text (Success / Error)
───────────────────────────────────────────────────────────────────────────*/
#contact-panel #result.text-success {
  color: var(--primary-green);
}

#contact-panel #result.text-danger {
  color: #dc3545;
}

#contact-panel #result.text-secondary {
  color: var(--text-dark);
}

/*───────────────────────────────────────────────────────────────────────────
  7) Invalid‐feedback / Invalid Border
───────────────────────────────────────────────────────────────────────────*/
.invalid-feedback {
  color: #dc3545; /* Bootstrap’s red */
}

.was-validated .form-control:invalid ~ .invalid-feedback,
.was-validated textarea:invalid ~ .invalid-feedback {
  display: block;
}

.form-control:invalid {
  border-color: #dc3545;
}
@media (max-width: 768px) {
  #contact-panel {
    min-height: auto;
    height: auto;
    padding: 2rem 1rem;
  }

  #contact-panel .row {
    flex-direction: column;
    height: auto !important;
  }

  #contact-panel .col-lg-4,
  #contact-panel .col-lg-8 {
    width: 100%;
    max-width: 100%;
    padding: 1rem !important;
  }
#contact-panel .form-container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto 10px auto;
  padding: 1.5rem;
  border-radius: 10px;
  background-color: #264736;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.85);
  border: 2px solid var(--primary-green);
  transition: all 0.3s ease;
}

  #contact-panel form {
    width: 100%;
  }
}