/* =========================================================
   PAGE CSS: INDEX (Homepage Only)
   Sections included:
   - Hero
   - Services (image-style)
   - Promotions (layout only)
   - Contact Hub layout
   - Unified Form layout
========================================================= */

/* ================================
   HERO SECTION – FINAL VERSION
================================ */
.hero {
  position: relative;
  padding: 160px 0 120px;
  text-align: center;

  /* Background image + dark overlay */
  background:
    linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.85)),
    url('../../images/hero.png');

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  color: #fff;
  overflow: hidden;
}

.hero-content h1 {
  font-size: 3rem;
  margin-bottom: 15px;
  text-shadow: 0 5px 25px rgba(0,0,0,0.8);
}

.hero-content p {
  max-width: 780px;
  margin: 0 auto 25px;
  color: #e6e6e6;
  font-size: 1.15rem;
}

.hero-btns {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}



/* =========================================================
   SERVICES SECTION (image-style already styled in cards.css)
========================================================= */
.services {
  padding: 90px 0;
}

.services h2 {
  margin-bottom: 40px;
}

/* =========================================================
   CONTACT HUB SECTION
========================================================= */
#contact-hub {
  padding: 90px 0;
}

#contact-hub h2 {
  margin-bottom: 40px;
}

/* improve grid spacing */
.contact-hub-grid {
  margin-top: 20px;
}

/* =========================================================
   UNIFIED FORM SECTION
========================================================= */
#unified-form {
  padding: 90px 0;
}

#unified-form h2 {
  margin-bottom: 35px;
}

#unified-form .contact-form {
  max-width: 720px;
  margin: 0 auto;
}

/* Purpose dropdown fix */
#formType {
  font-size: 1rem;
}

/* “Use My Location” buttons alignment */
.location-btn {
  margin-top: 10px;
  width: 100%;
}

/* Additional spacing for survey-only fields */
#surveyExtra {
  margin-top: 15px;
}

/* =========================================================
   GLOBAL HOMEPAGE RESPONSIVE TWEAKS
========================================================= */
@media (max-width: 768px) {

  .services {
    padding: 70px 0;
  }

  #promotions {
    padding: 60px 0;
  }

  #contact-hub {
    padding: 70px 0;
  }

  #unified-form {
    padding: 70px 0;
  }

  #unified-form .contact-form {
    padding: 20px 15px;
  }
}

@media (max-width: 600px) {

  .hero-content h1 {
    font-size: 1.9rem;
  }

  .hero-btns .btn {
    width: 100%;
  }

  .services h2,
  #contact-hub h2,
  #unified-form h2 {
    font-size: 1.6rem;
  }
}