/* CONTACT HERO */
.contact-hero {
  padding: 8rem 0;
}

/* CONTACT FORM */
.contact-form {
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(178, 24, 24, 0.1);
  border-radius: 8px;
  padding: 3rem;
  margin-bottom: 4rem;
}

.form-control {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  padding: 0.75rem 1rem;
}

.form-control:focus {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: var(--color-accent);
  color: white;
  box-shadow: 0 0 0 0.2rem rgba(178, 24, 24, 0.25);
}

.form-control::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

/* CONTACT INFO */
.contact-info-card {
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(178, 24, 24, 0.1);
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  transition: transform 0.3s ease;
  height: 100%;
}

.contact-info-card:hover {
  transform: translateY(-5px);
  border-color: rgba(178, 24, 24, 0.3);
}

/* PROCESS OVERVIEW */
.process-overview {
  padding: 8rem 0;
}

.process-step {
  padding: 1rem;
}

.step-icon {
  width: 60px;
  height: 60px;
  line-height: 60px;
  border-radius: 50%;
  border: 3px solid var(--color-accent);
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0 auto 1rem;
  box-shadow: 0 0 15px rgba(178, 24, 24, 0.4);
}
/* Add these styles to your existing contact.css */

/* Form Styling */
.form-control {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  padding: 0.75rem 1rem;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.form-control:focus {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: var(--color-accent);
  color: white;
  box-shadow: 0 0 0 0.2rem rgba(178, 24, 24, 0.25);
}

.form-control::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

/* Select Dropdown Styling */
select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23B21818' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 16px 12px;
  padding-right: 2.5rem;
}

select.form-control option {
  background-color: var(--color-darker);
  color: white;
}

select.form-control option:first-child {
  color: #999;
}

/* Alert Styling */
.alert {
  border: none;
  border-radius: 5px;
  padding: 1rem;
  margin-top: 1rem;
}

.alert-success {
  background-color: rgba(40, 167, 69, 0.1);
  color: #28a745;
  border-left: 4px solid #28a745;
}

.alert-danger {
  background-color: rgba(220, 53, 69, 0.1);
  color: #dc3545;
  border-left: 4px solid #dc3545;
}

/* Button Loading State */
button[disabled] {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Form Validation */
.form-control:invalid {
  border-color: #dc3545;
}

.form-control:valid {
  border-color: #28a745;
}