/* =========================
   BRAND VARIABLES
========================= */
:root {
  --primary-green: #2F4F2F;   /* Headings, primary buttons */
  --accent-green: #3E7A3F;    /* Hover on buttons */
  --gold-accent: #CEB77E;     /* Icons, subtle borders */
  --neutral-offwhite: #F5F2EA;
  --neutral-dark: #444444;
  --neutral-light: #F8F8F8;
  --white: #FFFFFF;

  --heading-font: 'Playfair Display', serif;
  --body-font: 'Raleway', sans-serif;

  --transition: all 0.3s ease;
  --radius: 12px;
}

/* =========================
   GENERAL STYLES
========================= */
body {
  font-family: var(--body-font);
  background-color: var(--neutral-light);
  color: var(--neutral-dark);
  margin: 0;
}

/* =========================
   HERO SECTION
========================= */
.contact-hero {
  background: linear-gradient(135deg, var(--primary-green), var(--gold-accent));
  color: var(--white);
  border-radius: var(--radius);
}

.heroimg {
  height: auto;
  width: 50%;
}

.decorative-white-wave {
  width: 70px;
  height: 15px;
  background-color: var(--white);
  border-radius: 6px;
  box-shadow: 0 0 12px rgba(255,255,255,0.5);
  position: relative;
}
.decorative-white-wave::before,
.decorative-white-wave::after {
  content: '';
  position: absolute;
  width: 45px;
  height: 10px;
  background-color: rgba(255,255,255,0.8);
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(255,255,255,0.4);
}
.decorative-white-wave::before {
  left: -35px;
  top: 6px;
  transform: rotate(-15deg);
}
.decorative-white-wave::after {
  left: -55px;
  top: -6px;
  transform: rotate(-30deg);
}

/* =========================
   SECTION HEADERS
========================= */
.section-header h1,
.section-header h2,
.section-header h3 {
  font-family: var(--heading-font);
  font-weight: 700;
  line-height: 1.2;
}

/* Hero heading (force white) */
.contact-hero h1,
.contact-hero p {
  color: var(--white) !important;
}

/* Other section headings (green) */
.contact-us-section h2,
.contact-info-card h6,
.card-body h5 {
  color: var(--primary-green);
}

.section-header p {
  font-size: 1.1rem;
  font-family: var(--body-font);
  color: var(--neutral-offwhite);
}

/* =========================
   CTA BUTTON
========================= */
.section-header .btn-light {
  border-radius: 0.75rem;
  padding: 0.75rem 1.5rem;
  transition: var(--transition);
}
.section-header .btn-light:hover {
  background-color: var(--neutral-light);
  color: var(--accent-green);
  transform: translateY(-2px);
}

/* =========================
   CONTACT US SECTION
========================= */
.contact-us-section {
  background-color: var(--neutral-light);
}

.contact-info-card {
  background-color: var(--white);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid var(--neutral-offwhite);
}
.contact-info-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
}

.contact-icon {
  font-size: 1.5rem;
  color: var(--gold-accent);
  margin-bottom: 0.5rem;
}

/* =========================
   FORM STYLING
========================= */
.custom-input {
  border: 1px solid #dee2e6;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  font-family: var(--body-font);
}
.custom-input:focus {
  border-color: var(--primary-green);
  box-shadow: 0 0 0 0.25rem rgba(47, 79, 47, 0.25);
}

/* =========================
   BUTTONS
========================= */
.btn-success {
  background-color: var(--primary-green) !important;
  border: none;
  font-weight: 600;
  color: var(--white);
  transition: var(--transition);
}
.btn-success:hover {
  background-color: var(--accent-green) !important;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 991.98px) {
  .section-header h1 { font-size: 2rem; }
  .section-header p { font-size: 1rem; }
}