/* ============================================================
   LIGHT THEME — 08 SERVICES SECTION
============================================================ */

/* ---- Section background ---- */
body.light #section-services {
  background: linear-gradient(160deg, #e8edf3 0%, #eef2f8 30%, #e8eef4 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);
  animation: none;
}

body.light #section-services:hover {
  border-color: rgba(0, 80, 160, 0.45);
  box-shadow: 0 0 40px rgba(0, 80, 160, 0.10);
}

/* ---- Section auras: replace red top / white bottom with blue ---- */
body.light #section-services::before {
  background: radial-gradient(ellipse 70% 100% at 50% 0%, rgba(0, 80, 160, 0.15), transparent 100%);
}

body.light #section-services::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 .services_background_Animated {
  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%);
}

/* ---- Section label badge → blue ---- */
body.light .content-section--services .content-section__label03 {
  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--services .content-section__label03:hover,
body.light #section-services:hover .content-section__label03 {
  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 .services__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;
}

/* ---- Heading underline → blue ---- */
body.light .services__heading::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);
}

/* ---- Service cards ---- */
body.light .service-card {
  background: linear-gradient(160deg, rgba(0, 80, 200, 0.07) 0%, #eef2f8 100%);
  border-color: rgba(0, 80, 160, 0.35);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.07),
    0 0 18px rgba(0, 100, 200, 0.08),
    inset 0 0 28px rgba(0, 100, 200, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.70);
}

body.light .service-card:hover {
  background: linear-gradient(160deg, 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.09),
    0 0 28px 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);
}

/* ---- Card icon ---- */
body.light .service-card__icon {
  background: rgba(220, 230, 242, 0.80);
  border-color: rgba(0, 80, 160, 0.20);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.10);
}

body.light .service-card__icon svg * {
  stroke: rgba(0, 80, 160, 0.80);
}

/* ---- Card tag → teal/blue ---- */
body.light .service-card__tag {
  color: #ffffff;
  background: linear-gradient(135deg, rgb(0, 90, 200) 0%, rgb(0, 50, 120) 100%);
  border-color: rgba(0, 100, 200, 0.40);
  box-shadow: 0 4px 15px rgba(0, 90, 200, 0.20), 0 0 20px rgba(0, 80, 160, 0.08);
}

body.light .service-card:hover .service-card__tag {
  color: #ffffff;
  background: linear-gradient(135deg, rgb(0, 110, 141) 0%, rgb(0, 55, 80) 100%);
  border-color: rgba(0, 140, 200, 0.55);
  box-shadow: 0 4px 15px rgba(0, 110, 141, 0.25);
}

/* ---- Card title + text ---- */
body.light .service-card__title {
  color: var(--text-0);
}

body.light .service-card:hover .service-card__title,
body.light .service-card:focus-within .service-card__title {
  color: var(--text-0);
}

body.light .service-card__text {
  color: var(--text-2);
}

body.light .service-card:hover .service-card__text {
  color: var(--text-1);
  text-shadow: none;
}

/* ---- Text dot → themed cyan so it's visible on light card bg ---- */
body.light .service-card__text-dot {
  background: var(--cyan);
}