/* =====================================================================
   Home page section styling (loaded only on the home page).
   Kept as a plain CSS file so it ships via collectstatic without a Sass
   build. Loads after bootstrap.min.css, so it overrides the compiled
   _trust-sections.scss rules where they overlap.
   ===================================================================== */

/* ---- Why Us ---------------------------------------------------------- */
.why-choose-us {
  background: linear-gradient(180deg, #ffffff 0%, #f4f7fc 100%);
}

.why-choose-us .why-eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--bs-primary, #0d6efd);
  margin-bottom: 0.6rem;
}

.why-choose-us .why-heading {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: #1f2733;
  margin-bottom: 0.5rem;
}

.why-choose-us .why-subheading {
  color: #6b7280;
  font-size: 1.05rem;
  max-width: 560px;
  margin: 0 auto;
}

.why-choose-us .feature-box {
  background: #fff;
  border: 1px solid #eaeef4;
  border-radius: 18px;
  padding: 2.25rem 1.5rem;
  box-shadow: 0 6px 20px rgba(16, 24, 40, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.why-choose-us .feature-box:hover {
  background: #fff;
  transform: translateY(-8px);
  border-color: rgba(13, 110, 253, 0.35);
  box-shadow: 0 18px 38px rgba(13, 110, 253, 0.14);
}

.why-choose-us .feature-icon {
  width: 78px;
  height: 78px;
  margin: 0 auto 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #e7f0ff 0%, #d2e3ff 100%);
  color: var(--bs-primary, #0d6efd);
  font-size: 2rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.why-choose-us .feature-box:hover .feature-icon {
  transform: scale(1.08);
  box-shadow: 0 8px 18px rgba(13, 110, 253, 0.25);
}

.why-choose-us .feature-box h4 {
  font-weight: 700;
  font-size: 1.15rem;
  color: #1f2733;
  margin-bottom: 0.5rem;
}

.why-choose-us .feature-box p {
  color: #6b7280;
  font-size: 0.92rem;
  line-height: 1.5;
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .why-choose-us .feature-box,
  .why-choose-us .feature-icon {
    transition: none;
  }
  .why-choose-us .feature-box:hover,
  .why-choose-us .feature-box:hover .feature-icon {
    transform: none;
  }
}