/* ============================================================
   LIGHT THEME — 07 WHY CHOOSE US SECTION
============================================================ */

/* ---- Section backgrounds (07.1 layout + 07.2 background) ---- */
body.light #section-why-choose-us {
  background: linear-gradient(160deg, #e8edf3 0%, #eef2f8 30%, #e4eaf2 50%, #eef2f8 70%, #e8edf3 100%);
  border-top: 2px solid rgba(0, 80, 160, 0.25);
  border-bottom: 2px solid rgba(0, 80, 160, 0.25);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.08), 0 -4px 20px rgba(0, 80, 160, 0.05), 0 4px 20px rgba(0, 80, 160, 0.05);
  animation: none;
}

body.light #section-why-choose-us::before {
  background: radial-gradient(ellipse 70% 100% at 50% 0%, rgba(0, 80, 160, 0.15), transparent 100%);
}

body.light #section-why-choose-us::after {
  background: radial-gradient(ellipse 70% 100% at 50% 100%, rgba(0, 90, 200, 0.08), transparent 70%);
}

/* ---- Animated radial bg layer: replace red/teal with blue ---- */
body.light .why-choose_us_backgorund_Animited {
  background:
    radial-gradient(520px 260px at 12% 22%, rgba(0, 90, 200, 0.08), transparent 55%),
    radial-gradient(520px 260px at 88% 78%, rgba(0, 110, 141, 0.06), transparent 55%);
}

body.light #section-why-choose-us:hover {
  border-color: rgba(0, 80, 160, 0.45);
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.06), 0 -6px 30px rgba(0, 80, 160, 0.08), 0 6px 30px rgba(0, 80, 160, 0.08);
}

/* ---- Section label badge → blue ---- */
body.light .content-section--why-choose-us .content-section__label02 {
  background: linear-gradient(135deg, rgb(0, 90, 200) 0%, rgb(0, 40, 110) 100%);
  box-shadow: 0 4px 15px rgba(0, 90, 200, 0.25), 0 0 30px rgba(0, 90, 200, 0.10);
}

body.light .content-section--why-choose-us .content-section__label02:hover,
body.light #section-why-choose-us:hover .content-section__label02 {
  background: linear-gradient(135deg, rgb(0, 110, 141) 0%, rgb(0, 50, 80) 100%);
  box-shadow: 0 6px 20px rgba(0, 110, 141, 0.35), 0 0 40px rgba(0, 110, 141, 0.15);
}

/* ---- Section heading gradient text → dark navy ---- */
body.light .why-choose-us__title,
body.light .why-choose-us__heading {
  background: linear-gradient(135deg, #0d1525 0%, #1e3a5f 60%, #2a5080 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: none;
}

/* ---- Section header underline → blue ---- */
body.light .why-choose-us__header::after {
  background: linear-gradient(
    90deg,
    rgba(0, 90, 200, 0) 0%,
    rgba(0, 90, 200, 0.70) 30%,
    rgba(0, 140, 220, 0.55) 70%,
    rgba(0, 90, 200, 0) 100%
  );
  box-shadow: 0 0 10px 2px rgba(0, 90, 200, 0.10);
}

/* ---- Cards ---- */
body.light .why-choose-us__card {
  background: linear-gradient(135deg, rgba(0, 80, 200, 0.07) 0%, #eef2f8 100%);
  border-color: rgba(0, 80, 160, 0.35);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.08),
    0 0 18px rgba(0, 100, 200, 0.10),
    inset 0 0 30px rgba(0, 100, 200, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.70);
}

body.light .why-choose-us__card:hover {
  background: linear-gradient(135deg, rgba(0, 100, 200, 0.12) 0%, #dce8f4 100%);
  border-color: rgba(0, 100, 200, 0.60);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.10),
    0 0 30px rgba(0, 100, 200, 0.18),
    inset 0 0 40px rgba(0, 100, 200, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.80);
}

body.light .why-choose-us__card-title {
  color: var(--text-0);
}

body.light .why-choose-us__card:hover .why-choose-us__card-title {
  color: var(--text-0);
}

body.light .why-choose-us__card-text {
  color: var(--text-2);
}

body.light .why-choose-us__card:hover .why-choose-us__card-text {
  color: var(--text-1);
}

body.light .why-choose-us__subheading {
  color: var(--cyan);
}

body.light .why-choose-us__text {
  color: var(--text-2);
}

/* ---- Modal ---- */
body.light .card-modal {
  border-color: rgba(0, 80, 160, 0.30);
}

body.light .card-modal__overlay {
  background: rgba(160, 180, 210, 0.72);
}

body.light .card-modal__content {
  background: linear-gradient(135deg, #eef2f8 0%, #e8edf3 45%, #f0f4f8 100%);
  border-color: rgba(0, 80, 160, 0.30);
  box-shadow: 0 18px 60px rgba(0, 80, 160, 0.18);
}

body.light .card-modal__close {
  background: rgba(220, 228, 240, 0.90);
  color: var(--text-0);
  border-color: rgba(0, 80, 160, 0.30);
}

body.light .card-modal__close:hover {
  background: rgba(0, 80, 160, 0.12);
  border-color: rgba(0, 80, 160, 0.55);
}

body.light .card-modal__body .why-choose-us__card {
  background: linear-gradient(135deg, rgba(0, 80, 200, 0.07) 0%, #eef2f8 100%);
  border-color: rgba(0, 80, 160, 0.30);
  box-shadow: 0 10px 30px rgba(0, 80, 160, 0.12);
}

body.light .modal-image-large,
body.light .modal-image-popout {
  border-color: rgba(0, 80, 160, 0.25);
  box-shadow: 0 8px 28px rgba(0, 80, 160, 0.12);
}

body.light .modal-image-caption {
  color: var(--text-1);
}