/* ================================================================
   HOMEPAGE SECTION VISUAL HIERARCHY
   Each section gets a distinct background + padding tightened
================================================================ */

/* ── 1. Reduce global section padding ── */
.quintec-section {
  padding: 3.75rem 0 !important;
}

/* ── 2. Products / Bestsellers — pure white, lifts above body ── */
.products-section {
  background: #ffffff !important;
  box-shadow: 0 2px 0 #E8ECE4, 0 -2px 0 #E8ECE4;
  position: relative;
  z-index: 1;
}

/* ── 3. Benefits / Why — fresh light green tint ── */
.benefits-section {
  background: linear-gradient(160deg, #EEF4E8 0%, #E2EDD5 100%) !important;
  position: relative;
}
.benefits-section .benefit-card {
  background: #ffffff !important;
  box-shadow: 0 2px 14px rgba(91,124,63,.09) !important;
  border-color: rgba(91,124,63,.12) !important;
}
.benefits-section .benefit-card:hover {
  box-shadow: 0 10px 32px rgba(91,124,63,.18) !important;
}

/* ── 4. Categories — bold dark-green inverted block ── */
.categories-section {
  background: linear-gradient(140deg, #14321e 0%, #0d2015 100%) !important;
}
.categories-section .section-label {
  background: rgba(212,181,106,.15) !important;
  color: #d4b56a !important;
  border: 1px solid rgba(212,181,106,.3) !important;
}
.categories-section .section-title {
  color: #ffffff !important;
}
.categories-section .section-subtitle {
  color: rgba(255,255,255,.72) !important;
}
/* Slider arrows on dark bg */
.categories-section #cat-prev,
.categories-section #cat-next {
  background: rgba(255,255,255,.1) !important;
  border: 1.5px solid rgba(255,255,255,.2) !important;
  color: #fff !important;
}
.categories-section #cat-prev:hover,
.categories-section #cat-next:hover {
  background: rgba(212,181,106,.22) !important;
  border-color: #d4b56a !important;
}
/* Dots */
#cat-dots .rv-dot {
  background: rgba(255,255,255,.25) !important;
}
#cat-dots .rv-dot.active {
  background: #d4b56a !important;
}

/* ── 5. Reviews / Testimonials — warm cream ── */
.rv-section {
  background: linear-gradient(180deg, #FDF7F0 0%, #F5EDE1 100%) !important;
  position: relative;
}
.rv-section::before,
.rv-section::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #EAD8C0 30%, #EAD8C0 70%, transparent 100%);
}
.rv-section::before { top: 0; }
.rv-section::after  { bottom: 0; }

/* Review cards: white on cream bg */
.rv-section .rv-card {
  background: #ffffff !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
}

/* ── 6. Contact section — deep forest (inverted, like header) ── */
.contact-section {
  background: linear-gradient(140deg, #14321e 0%, #0c1e12 100%) !important;
}
.contact-section .section-label {
  background: rgba(212,181,106,.15) !important;
  color: #d4b56a !important;
  border: 1px solid rgba(212,181,106,.3) !important;
}
.contact-section .section-title {
  color: #ffffff !important;
}
.contact-section .section-subtitle {
  color: rgba(255,255,255,.7) !important;
}
/* Contact cards stay white, pop on dark bg */
.contact-section .contact-cards {
  margin-top: 2rem;
}

/* ── 7. Blog — light warm off-white ── */
.hp-blog-section {
  background: #F7F5F1 !important;
  border-top: 1px solid #E5E1D8 !important;
  border-bottom: 1px solid #E5E1D8 !important;
}

/* ── 8. Homepage FAQ — light sage green, full-width band ── */
.qcat-faq-section {
  background: #EFF7EA !important;
  border-top: 2px solid #C8E0BC !important;
  border-bottom: 2px solid #C8E0BC !important;
  padding: 3.75rem 2rem !important;
  margin: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
.qcat-faq-section .qcat-faq-header,
.qcat-faq-section .qcat-faq-list {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
.qcat-faq-section .qcat-faq-title {
  color: #14321e !important;
  font-size: 2rem;
}
/* FAQ items on sage bg */
.qcat-faq-section .qcat-faq-list {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(91,124,63,.10);
}

/* ── 9. Email capture — already green, tighten padding ── */
.email-capture-section {
  padding: 4rem 2rem !important;
}

/* ── 10. Press bar — clean white strip ── */
.press-bar {
  background: #ffffff !important;
  border-top: 1px solid #E8ECE4 !important;
  border-bottom: 1px solid #E8ECE4 !important;
  padding: 1rem 0 !important;
}

/* ── 11. Section headers: tighten margin ── */
.section-header {
  margin-bottom: 2.75rem !important;
}

/* ── 12. Responsive: smaller padding on mobile ── */
@media (max-width: 640px) {
  .quintec-section {
    padding: 2.75rem 0 !important;
  }
  .qcat-faq-section {
    padding: 2.75rem 1.25rem !important;
  }
  .email-capture-section {
    padding: 3rem 1.25rem !important;
  }
}