/* ====================================================================
   PAGE SECTIONS — Automera  v2
   Core Solutions | How We Work | Achievements | Industries
   Colors : #E2201A  #373643  Lato / Fahkwang
   Rules  : no scale/translateX/Y — hover via shadow/color/opacity only
   ==================================================================== */

/* ─── Shared design tokens ─────────────────────────────────────────── */
:root {
  --ps-red: #e2201a;
  --ps-red-tint: #fff0ef;
  --ps-heading: #373643;
  --ps-muted: #6b6e82;
  --ps-border: rgba(0, 0, 0, 0.06);
  --ps-radius: 16px;
  --ps-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 8px 28px rgba(0, 0, 0, 0.05);
  --ps-shadow-red:
    0 4px 8px rgba(0, 0, 0, 0.05), 0 16px 40px rgba(226, 32, 26, 0.1);
  --ps-trans: 0.3s ease;
}

/* ====================================================================
   1 — CORE SOLUTION CARDS
       Left accent bar · icon in rounded square · column layout
       HTML: one .core-solution-card per Elementor column
   ==================================================================== */

.core-solution-card {
  position: relative;
  background: #ffffff;
  border-radius: var(--ps-radius);
  /* extra left room for the accent bar */
  padding: 36px 30px 36px 34px;
  box-shadow: var(--ps-shadow);
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow var(--ps-trans);
}

/* 4 px red accent bar on the left edge */
.core-solution-card::before {
  content: "";
  position: absolute;
  top: 37px;
  left: 0;
  width: 4px;
  height: 52px;
  background: var(--ps-red);
  border-radius: 0 3px 3px 0;
}

.no-before::before {
  display: none !important;
  content: none !important;
}

.core-solution-card:hover {
  box-shadow: var(--ps-shadow-red);
}

/* Icon container — soft red square */
.core-solution-card .csc-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--ps-red-tint);
  font-size: 26px;
  line-height: 1;
  margin-bottom: 22px;
  flex-shrink: 0;
  align-self: flex-start;
}

.core-solution-card .csc-label {
  display: block;
  font-family: "Lato", sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ps-red);
  margin-bottom: 6px;
}

.core-solution-card .csc-title {
  font-family: "Fahkwang", sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #373643;
  margin: 0 0 14px;
  line-height: 1.35;
}

.core-solution-card .csc-desc {
  font-family: "Lato", sans-serif;
  font-size: 17px;
  color: #6b6e82;
  line-height: 1.78;
  margin: 0;
  flex: 1;
  max-width: 100%;
}

/* RTL */
.rtl .core-solution-card {
  text-align: right;
  padding: 36px 34px 36px 30px;
}

.rtl .core-solution-card::before {
  left: auto;
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* ====================================================================
   2 — HOW WE WORK WITH YOU  (Horizontal Timeline — 2 rows of 3)
       HTML: .hww-timeline > two .hww-row divs > three .hww-step each
   ==================================================================== */

.hww-timeline {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* Row: step | arrow | step | arrow | step */
.hww-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: start;
}

/* Each step: circle on top, content below — centered */
.hww-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 12px;
}

/* Numbered circle */
.hww-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ps-red);
  color: #ffffff;
  font-family: "Fahkwang", sans-serif;
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
  margin-bottom: 20px;
  box-shadow:
    0 0 0 6px rgba(226, 32, 26, 0.1),
    0 4px 14px rgba(226, 32, 26, 0.24);
}

/* Arrow connector between steps */
.hww-arrow {
  position: relative;
  width: 48px;
  align-self: stretch;
}

/* Shaft */
.hww-arrow::before {
  content: "";
  position: absolute;
  top: 25px;
  /* center of 52px circle */
  left: 0;
  height: 2px;
  background: rgba(226, 32, 26, 0.3);
  left: -194px;
  width: 420px;
}

/* Arrowhead (right-pointing triangle) */
.hww-arrow::after {
  content: "";
  position: absolute;
  top: 18px;
  /* 26px − 8px (half of 16px head height) */
  right: -191px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 13px solid rgba(226, 32, 26, 0.45);
}

.hww-title {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--ps-heading) !important;
  margin: 0 0 8px !important;
  line-height: 1.35 !important;
}

.hww-desc {
  font-family: "Lato", sans-serif !important;
  font-size: 16px !important;
  color: var(--ps-muted) !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* RTL: reverse grid order and mirror arrow direction */
.rtl .hww-timeline {
  direction: rtl;
}

/* Mirror the entire arrow element so shaft + arrowhead both flip correctly.
   scaleX(-1) turns the right-pointing LTR arrow into a left-pointing RTL arrow
   without needing to individually reposition ::before and ::after. */
.rtl .hww-arrow {
  transform: scaleX(-1);
}

/* ====================================================================
   3 — WHAT WILL YOU ACHIEVE
       Centered outcome cards · icon in circle · thin red rule
       HTML: one .achieve-grid wrapping four .achieve-card blocks
   ==================================================================== */

.achieve-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.achieve-card {
  background: #ffffff;
  height: 100%;
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius);
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: var(--ps-shadow);
  transition:
    box-shadow var(--ps-trans),
    border-color var(--ps-trans);
}

.achieve-card:hover {
  border-color: rgba(226, 32, 26, 0.18);
  box-shadow: var(--ps-shadow-red);
}

/* Icon in a round container */
.achieve-card .ac-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--ps-red-tint);
  font-size: 28px;
  line-height: 1;
  margin-bottom: 16px;
  flex-shrink: 0;
}

/* Short red rule separating icon from text */
.achieve-card .ac-rule {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ps-red);
  border-radius: 2px;
  margin: 0 auto 24px !important;
}

.achieve-card .ac-title {
  font-family: "Fahkwang", sans-serif;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--ps-heading) !important;
  margin: 0 0 10px !important;
  line-height: 1.3 !important;
  color: #373643 !important;
}

.achieve-card .ac-desc {
  font-family: "Lato", sans-serif !important;
  font-size: 18px !important;
  color: var(--ps-muted) !important;
  line-height: 1.75 !important;
  margin-top: auto !important;
  margin: 0;
}

/* RTL: centered layout — alignment unchanged */

/* ====================================================================
   4 — INDUSTRIES WE SERVE
       Horizontal row items · icon in small square · 3-col grid
       HTML: one .industries-grid wrapping five .industry-item blocks
   ==================================================================== */

.industries-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.industries-grid> :last-child {
  grid-column: 1 / -1;
}

.industry-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 20px;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid var(--ps-border);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  transition:
    box-shadow var(--ps-trans),
    border-color var(--ps-trans);
}

.industry-item:hover {
  border-color: rgba(226, 32, 26, 0.2);
  box-shadow: 0 4px 20px rgba(226, 32, 26, 0.07);
}

/* Icon container — smaller, rounded square */
.industry-item .ii-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--ps-red-tint);
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}

.industry-item .ii-body {
  flex: 1;
}

.industry-item .ii-title {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #373643 !important;
  margin: 0 0 5px !important;
  line-height: 1.3 !important;
}

.industry-item .ii-desc {
  font-family: "Lato", sans-serif !important;
  font-size: 16px !important;
  color: var(--ps-muted) !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* RTL */
.rtl .industry-item {
  text-align: right;
}

/* ====================================================================
   RESPONSIVE
   ==================================================================== */

/* ── Tablet ≤ 1023px ─────────────────────────── */
@media only screen and (max-width: 1023px) {
  .industries-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Mobile ≤ 767px ──────────────────────────── */
@media only screen and (max-width: 767px) {

  .achieve-grid,
  .industries-grid {
    grid-template-columns: 1fr;
  }

  .core-solution-card {
    padding: 28px 24px 28px 28px;
  }

  .rtl .core-solution-card {
    padding: 28px 28px 28px 24px;
  }

  .hww-timeline {
    gap: 24px;
  }

  .hww-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .hww-arrow {
    display: none;
  }

  .hww-step {
    flex-direction: column;
    text-align: left;
    align-items: flex-start;
    gap: 10px;
    padding: 0;
    padding-bottom: 15px;
    border-bottom: 2px solid #D1D2D6;
  }

  .rtl .hww-step {
    text-align: right;
  }

  .hww-num {
    width: 42px;
    height: 42px;
    font-size: 13px;
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .achieve-card {
    padding: 32px 24px;
  }
}

/* ====================================================================
   SIRI Assessment Timeline — "tl" prefix
   ====================================================================
   Class map (HTML widget):
     tl-section      → outer wrapper  (dark bg)
     tl-bg           → full-bleed background image (absolute, z 0)
     tl-overlay      → dark gradient over the image  (absolute, z 1)
     tl-content      → z-indexed wrapper for all visible content (z 2)
     tl-header       → eyebrow + title + subtitle
     tl-eyebrow      → small red uppercase label
     tl-title        → main heading
     tl-subtitle     → description paragraph
     tl-track        → the 4-step horizontal timeline
     tl-step         → single phase column
     tl-step-head    → number + connector line row
     tl-num          → "01" large red number
     tl-line         → horizontal connector between steps
     tl-body         → card below the number
     tl-duration     → red pill badge (e.g. "3 – 5 days")
     tl-name         → phase title
     tl-foot         → total duration callout bar
   ==================================================================== */

/* ── Section shell ────────────────────────────────────────────────── */
.tl-section {
  background: #0f0e15;
  padding: 0;
  position: relative;
  overflow: hidden;
}

/* ── Background image ─────────────────────────────────────────────── */
.tl-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.tl-bg img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  display: block;
  opacity: 0.18;
  filter: grayscale(30%);
}

/* ── Dark gradient overlay (on top of image) ──────────────────────── */
.tl-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      #0f0e15 0%,
      rgba(15, 14, 21, 0.72) 40%,
      rgba(15, 14, 21, 0.72) 60%,
      #0f0e15 100%),
    radial-gradient(ellipse at top left,
      rgba(226, 32, 26, 0.12) 0%,
      transparent 55%);
  pointer-events: none;
}

/* ── Content layer (sits above bg + overlay) ──────────────────────── */
.tl-content {
  position: relative !important;
  z-index: 2 !important;
  padding: 64px 30px 64px !important;
}

/* ── Header ───────────────────────────────────────────────────────── */
.tl-header {
  text-align: center !important;
  margin-bottom: 72px !important;
}

.tl-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: "Lato", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: #848484 !important;
  line-height: 1 !important;
  margin: 0 0 10px !important;
}

.tl-title {
  font-family: "Fahkwang", sans-serif !important;
  font-size: clamp(24px, 3.6vw, 40px) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.03em !important;
  color: #ffffff;
  margin: 0 0 20px !important;
}

.tl-title span {
  color: #e2201a;
}

.tl-subtitle {
  font-family: "Lato", sans-serif !important;
  font-size: clamp(14px, 1.4vw, 20px) !important;
  line-height: 1.8 !important;
  color: rgba(255, 255, 255, 0.5) !important;
  max-width: 560px !important;
  margin: 0 auto !important;
}

/* ── 5-step track ─────────────────────────────────────────────────── */
.tl-track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  row-gap: 20px;
  position: relative;
}

/* ── 4-step track ─────────────────────────────────────────────────── */
.tl-track-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  row-gap: 20px;
  position: relative;
}

.tl-mes-track {
  grid-template-columns: repeat(3, 1fr) !important;
  row-gap: 20px !important;
  column-gap: 10px !important;
}

/* ── Single step ──────────────────────────────────────────────────── */
.tl-step {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: relative;
}

/* ── Number + connector row ───────────────────────────────────────── */
.tl-step-head {
  display: flex;
  align-items: center;
  margin-bottom: 28px;
  height: 72px;
}

.tl-num {
  font-family: "Fahkwang", sans-serif;
  font-size: 52px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #e2201a;
  flex-shrink: 0;
  width: 72px;
  text-align: center;
  position: relative;
  z-index: 1;
  text-shadow: 0 0 40px rgba(226, 32, 26, 0.35);
}

/* Horizontal connector line — hidden on last step */
.tl-line {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg,
      rgba(226, 32, 26, 0.5) 0%,
      rgba(226, 32, 26, 0.12) 100%);
  position: relative;
  margin: 0 8px;
}

/* Arrow head at end of line */
.tl-line::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid rgba(226, 32, 26, 0.45);
}

.tl-step:last-child .tl-line {
  display: none;
}

/* ── Phase card body ──────────────────────────────────────────────── */
.tl-body {
  background: #1c1b2a !important;
  border-radius: 16px !important;
  padding: 28px 24px 32px !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  margin-right: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
  position: relative !important;
  overflow: hidden !important;
  margin-bottom: 0 !important;
}

.tl-body p {
  margin-bottom: 0 !important;
}

/* Top-left accent dot */
.tl-body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, #e2201a 0%, transparent 100%);
  border-radius: 16px 0 0 16px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tl-step:hover .tl-body {
  border-color: rgba(226, 32, 26, 0.25);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(226, 32, 26, 0.1);
}

.tl-step:hover .tl-body::before {
  opacity: 1;
}

.tl-step:last-child .tl-body {
  margin-right: 0;
}

/* ── Duration badge ───────────────────────────────────────────────── */
.tl-duration {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  background: rgba(226, 32, 26, 0.12);
  border: 1px solid rgba(226, 32, 26, 0.3);
  color: #e2201a;
  font-family: "Lato", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 50px;
  line-height: 1;
}

.tl-duration::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e2201a;
  flex-shrink: 0;
}


/* ── Phase name ───────────────────────────────────────────────────── */
.tl-name {
  font-family: "Fahkwang", sans-serif !important;
  font-size: clamp(17px, 1.3vw, 28px) !important;
  font-weight: 700 !important;
  color: #ffffff;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}

/* ── Total duration footer ────────────────────────────────────────── */
.tl-foot {
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.tl-foot-inner {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  background: #1c1b2a;
  border: 1px solid rgba(226, 32, 26, 0.25);
  border-radius: 50px;
  padding: 18px 36px;
}

.tl-foot-label {
  font-family: "Lato", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  white-space: nowrap;
}

.tl-foot-divider {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

.tl-foot-value {
  font-family: "Fahkwang", sans-serif;
  font-size: clamp(15px, 1.5vw, 24px);
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  letter-spacing: -0.02em;
}

.tl-foot-value strong {
  color: #e2201a;
}

@media (max-width: 1200px) {
  .tl-track {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .tl-line {
    display: none;
  }

  .tl-step-head {
    margin-bottom: 0px;
  }
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .tl-num {
    font-size: 42px;
    width: 60px;
  }

  .tl-body {
    padding: 22px 18px 26px;
    margin-right: 12px;
  }

  .tl-foot-inner {
    padding: 16px 28px;
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .tl-content {
    padding: 40px !important;
  }

  .tl-header {
    margin-bottom: 42px !important;
  }

  /* Switch to 2-column grid */
  .tl-track {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  /* Hide connector lines on mobile grid */
  .tl-line {
    display: none;
  }

  .tl-step-head {
    height: auto;
    margin-bottom: 16px;
  }

  .tl-num {
    font-size: 38px;
    width: auto;
    margin-bottom: 0;
  }

  .tl-body {
    margin-right: 0;
  }

  .tl-foot-inner {
    flex-direction: column;
    text-align: center;
    border-radius: 16px;
    gap: 10px;
    padding: 20px 28px;
  }

  .tl-foot-divider {
    width: 40px;
    height: 1px;
  }
}

@media (max-width: 480px) {
  .tl-track {
    grid-template-columns: 1fr;
  }

  .tl-header {
    margin-bottom: 28px !important;
  }
  
  .tl-track-4 {
      grid-template-columns: repeat(1, 1fr) !important;
  }

  .tl-content {
    padding: 12px !important;
  }

  .tl-foot-inner {
    padding: 15px;
  }
}

/* ====================================================================
   RTL overrides — SIRI Assessment Timeline (.tl-*)
   ==================================================================== */

.rtl .in-card::before {
    right: -60px !important;
    left: 0 !important;
}

/* Mirror the red glow to top-right in RTL */
.rtl .tl-overlay {
  background:
    linear-gradient(180deg,
      #0f0e15 0%,
      rgba(15, 14, 21, 0.72) 40%,
      rgba(15, 14, 21, 0.72) 60%,
      #0f0e15 100%),
    radial-gradient(ellipse at top right,
      rgba(226, 32, 26, 0.12) 0%,
      transparent 55%) !important;
}

/* Remove Latin-only tight tracking from title */
.rtl .tl-title {
  letter-spacing: 0 !important;
}

/* Remove wide uppercase tracking from eyebrow and duration badge */
.rtl .tl-eyebrow {
  letter-spacing: normal !important;
}

.rtl .tl-duration {
  letter-spacing: 0 !important;
}

/* Remove tight tracking from phase name and allow wrapping for Arabic */
.rtl .tl-name {
  letter-spacing: 0 !important;
  text-wrap: wrap !important;
}

/* Connector line: reverse gradient direction and flip arrowhead to point left */
.rtl .tl-line {
  background: linear-gradient(270deg,
      rgba(226, 32, 26, 0.5) 0%,
      rgba(226, 32, 26, 0.12) 100%) !important;
}

.rtl .tl-line::after {
  right: auto !important;
  left: -1px !important;
  border-left: none !important;
  border-right: 8px solid rgba(226, 32, 26, 0.45) !important;
}

/* Card body: flip side margin and accent bar to right edge */
.rtl .tl-body {
  margin-right: 0 !important;
  margin-left: 16px !important;
}

.rtl .tl-step:last-child .tl-body {
  margin-left: 0 !important;
}

.rtl .tl-body::before {
  left: auto !important;
  right: 0 !important;
  border-radius: 0 16px 16px 0 !important;
}

/* Remove Latin-only tracking from footer label and value */
.rtl .tl-foot-label {
  letter-spacing: 0 !important;
}

.rtl .tl-foot-value {
  letter-spacing: 0 !important;
}

/* Responsive: mirror margin at tablet */
@media (max-width: 1024px) {
  .rtl .tl-body {
    margin-left: 12px !important;
    margin-right: 0 !important;
  }
}

/* At ≤768px lines are hidden and body margin is already 0 — no extra fix needed */

/* ====================================================================
   CTA Section — "cta" prefix
   ====================================================================
   Class map (HTML widget):
     cta-section   → outer wrapper
     cta-glow      → decorative red radial glow (absolute)
     cta-inner     → centered content column
     cta-badge     → small pill above the heading
     cta-heading   → main bold title
     cta-sub       → italic question line (red accent)
     cta-desc      → supporting paragraph
     cta-actions   → button wrapper row
   ==================================================================== */

.cta-section {
  position: relative;
  background: #0f0e15;
  overflow: hidden;
  padding: 64px 0 64px;
}

/* Central red radial glow — the visual "pull" of the section */
.cta-glow {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle,
      rgba(226, 32, 26, 0.16) 0%,
      rgba(226, 32, 26, 0.05) 45%,
      transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.cta-section::before {
  top: 0;
}

.cta-section::after {
  bottom: 0;
}

/* ── Inner content ────────────────────────────────────────────────── */
.cta-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Main heading ─────────────────────────────────────────────────── */
.cta-heading {
  font-family: "Fahkwang", sans-serif !important;
  font-size: clamp(30px, 4vw, 56px) !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.03em !important;
  color: #ffffff !important;
  margin: 0 0 24px !important;
}

.cta-heading span {
  color: #e2201a !important;
}

/* ── Italic question line ─────────────────────────────────────────── */
.cta-sub {
  font-family: "Lato", sans-serif !important;
  font-size: clamp(15px, 1.6vw, 19px) !important;
  font-style: italic !important;
  color: rgba(255, 255, 255, 0.65) !important;
  line-height: 1.6 !important;
  margin: 0 0 20px !important;
}

/* ── Description ──────────────────────────────────────────────────── */
.cta-desc {
  font-family: "Lato", sans-serif;
  font-size: clamp(13px, 1.3vw, 15px);
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.42);
  margin: 0 0 48px;
  max-width: 580px;
}

/* ── Button row ───────────────────────────────────────────────────── */
.cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .cta-section {
    padding: 72px 0 68px;
  }

  .cta-glow {
    width: 480px;
    height: 480px;
  }
}

@media (max-width: 480px) {
  .cta-section {
    padding: 56px 0 52px;
  }

  .cta-heading {
    letter-spacing: -0.02em;
  }

  .cta-glow {
    width: 320px;
    height: 320px;
  }
}

/* ====================================================================
   CUSTOM SECTIONS (migrated from style.css)
   ==================================================================== */

/* ====================================================================
   Z-Pattern section — Vision & Mission
   ====================================================================
   Class map (assign in Elementor Advanced > CSS Classes):
     .zp-section  → outer container wrapping both rows
     .zp-row      → each row e-div-block
     .zp-img-col  → image column e-div-block  (40%)
     .zp-image    → image widget inside zp-img-col
     .zp-text-col → text column e-div-block   (60%)
     .zp-title    → heading widget (title)
     .zp-desc     → heading widget (body text)
   Z-pattern:
     Row 1 (Vision)  → [zp-img-col 40%] | [zp-text-col 60%]
     Row 2 (Mission) → [zp-text-col 60%] | [zp-img-col 40%]
   ==================================================================== */

/* ── Outer section ────────────────────────────────────────────────── */
.zp-section {
  overflow: hidden;
  background: #f4f5f7;
}

/* ── Row: flex, 40/60 split ───────────────────────────────────────── */
.zp-row {
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-wrap: nowrap !important;
  flex-wrap: nowrap !important;
  -webkit-align-items: stretch !important;
  align-items: stretch !important;
  min-height: 500px;
  overflow: hidden;
  padding: 40px !important;
  height: 80% !important;
}

.zp-row+.zp-row {
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}

/* ── Image column: 40% ────────────────────────────────────────────── */
.zp-img-col {
  -webkit-flex: 0 0 40% !important;
  flex: 0 0 40% !important;
  width: 40% !important;
  min-width: 40% !important;
  -webkit-align-self: stretch !important;
  align-self: stretch !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 480px !important;
}

/* Image widget: absolutely fills the column */
.zp-image {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.zp-image .elementor-widget-container {
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;
}

.zp-image img {
  width: 98% !important;
  height: 100% !important;
  min-height: 480px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 25px !important;
}

/* ── Text column: 60% ─────────────────────────────────────────────── */
.zp-text-col {
  -webkit-flex: 0 0 60% !important;
  flex: 0 0 60% !important;
  width: 60% !important;
  -webkit-align-self: stretch !important;
  align-self: stretch !important;
  background: #ffffff;
  padding: 72px 80px !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-direction: column !important;
  flex-direction: column !important;
  -webkit-justify-content: space-between !important;
  justify-content: space-between !important;
  -webkit-align-items: flex-start !important;
  align-items: flex-start !important;
  position: relative;
  box-sizing: border-box !important;
}

/* Left accent bar — default: text is on the RIGHT (image is first-child) */
.zp-text-col::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 4px;
  height: 72px;
  background: linear-gradient(180deg, #e2201a 0%, #b71b15 100%);
  border-radius: 0 4px 4px 0;
}

/* When text is on the LEFT (first-child), move bar to right edge */
.zp-row>.zp-text-col:first-child::before {
  left: auto;
  right: 0;
  border-radius: 4px 0 0 4px;
}

/* ── Title ────────────────────────────────────────────────────────── */
.zp-title .elementor-heading-title {
  font-size: clamp(26px, 2.6vw, 40px) !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
  color: #373643 !important;
  letter-spacing: -0.025em !important;
  margin: 0 !important;
  font-family: "Fahkwang", sans-serif !important;
}

/* Red underline after title */
.zp-title .elementor-heading-title::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  background: linear-gradient(90deg, #e2201a 0%, #b71b15 100%);
  border-radius: 2px;
  margin-top: 18px;
}

/* ── Body text — pushed to flex-end ──────────────────────────────── */
.zp-desc {
  margin-top: 30px !important;
  padding-top: 32px !important;
  width: 100%;
}

.zp-desc .elementor-heading-title {
  font-size: 19px !important;
  line-height: 1.88 !important;
  color: #6b7280 !important;
  font-weight: 500 !important;
  margin: 0 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  font-family: inherit !important;
}

.zp-desc .elementor-heading-title strong {
  color: #373643;
  font-weight: 700;
}

/* ====================================================================
   Story / Timeline section — "Our Story"
   ====================================================================
   Class map (assign in Elementor Advanced > CSS Classes):
     st-section    → outer section container
     st-inner      → 2-column div-block (flex row)
     st-left       → left div-block  (~57%)
     st-right      → right div-block (~43%)
     st-eyebrow    → heading widget  — small label above title
     st-title      → heading widget  — main bold title
     st-subtitle   → heading widget  — italic subtitle
     st-timeline   → div-block       — wraps all timeline items
     st-item       → div-block       — one milestone row
     st-year       → heading widget  — year ("2020")
     st-name       → heading widget  — milestone title
     st-desc       → heading widget  — description text
     st-image      → image widget    — right-side image
     st-card       → div-block       — optional stats card overlay
   ==================================================================== */

/* ── Section ──────────────────────────────────────────────────────── */
.st-section {
  background: #ffffff;
  overflow: visible;
}

/* ── 2-column inner row ───────────────────────────────────────────── */
.st-inner {
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-wrap: nowrap !important;
  flex-wrap: nowrap !important;
  -webkit-align-items: flex-start !important;
  align-items: center !important;
  gap: 72px !important;
  padding: 0 !important;
  background-color: #f4f5f7 !important;
  padding: 20px !important;
  border-radius: 40px !important;
}

/* ── Left column ──────────────────────────────────────────────────── */
.st-left {
  -webkit-flex: 0 0 57% !important;
  flex: 0 0 57% !important;
  width: 57% !important;
  min-width: 0;
  padding-left: 20px !important;
}

/* ── Right column ─────────────────────────────────────────────────── */
.st-right {
  -webkit-flex: 1 1 auto !important;
  flex: 1 1 auto !important;
  min-width: 0;
  position: sticky;
  -webkit-align-self: flex-start !important;
  align-self: center !important;
  padding: 0 !important;
}

/* ── Eyebrow label ────────────────────────────────────────────────── */
.st-eyebrow .elementor-heading-title {
  display: -webkit-inline-flex !important;
  display: inline-flex !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: #e2201a !important;
  line-height: 1 !important;
  margin: 0 0 16px !important;
}

.st-eyebrow .elementor-heading-title::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 2px;
  background: #e2201a;
  border-radius: 2px;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

/* ── Main title ───────────────────────────────────────────────────── */
.st-title .elementor-heading-title {
  font-size: clamp(32px, 3.2vw, 40px) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  color: #373643 !important;
  letter-spacing: -0.025em !important;
  font-family: "Fahkwang", sans-serif !important;
  margin: 0 !important;
}

/* ── Italic subtitle ──────────────────────────────────────────────── */
.st-subtitle .elementor-heading-title {
  font-size: clamp(15px, 1.5vw, 20px) !important;
  font-weight: 400 !important;
  font-style: italic !important;
  color: #e2201a !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-family: Georgia, "Times New Roman", serif !important;
  max-width: 59% !important;
  justify-self: end;
}

/* ── Timeline wrapper ─────────────────────────────────────────────── */
.st-timeline {
  position: relative !important;
  margin-top: 0 !important;
  padding: 0 !important;
}

/* No full-height line — each item draws its own connector via ::after */
.st-timeline::before {
  display: none;
}

/* ── Timeline item — CSS Grid: icon col | text col ───────────────── */
.st-item {
  position: relative;
  display: grid !important;
  grid-template-columns: 52px 1fr !important;
  grid-template-rows: auto auto auto !important;
  -webkit-column-gap: 20px !important;
  column-gap: 20px !important;
  row-gap: 0 !important;
  padding: 0 0 36px 0 !important;
  -webkit-align-items: start !important;
  align-items: start !important;
  max-width: 75% !important;
}

.st-item:last-child {
  padding-bottom: 0 !important;
}

/* Connecting line: from bottom of icon box to bottom of item's padding */
.st-item::after {
  content: "";
  position: absolute !important;
  left: 25px;
  /* center of 52px icon (26px) - 1px half-line */
  top: 52px;
  /* starts right below the icon box */
  bottom: 0;
  /* reaches end of item's padding-bottom gap */
  width: 2px;
  background: linear-gradient(180deg,
      rgba(226, 32, 26, 0.22) 0%,
      rgba(226, 32, 26, 0.05) 100%);
  border-radius: 0 0 2px 2px;
  z-index: 0;
}

/* No connector after the last item */
.st-item:last-child::after {
  display: none !important;
}

/* Icon box — col 1, spans all text rows, sits above the line */
.st-item::before {
  content: "\f0eb";
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  font-size: 18px !important;
  font-style: normal !important;
  grid-column: 1 !important;
  grid-row: 1 / span 3 !important;
  -webkit-align-self: start !important;
  align-self: start !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  -webkit-justify-content: center !important;
  justify-content: center !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 14px !important;
  background: #fef2f2 !important;
  color: #e2201a !important;
  border: 1.5px solid rgba(226, 32, 26, 0.2) !important;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  -webkit-transition:
    background 0.3s ease,
    box-shadow 0.3s ease !important;
  transition:
    background 0.3s ease,
    box-shadow 0.3s ease !important;
}

.st-item:hover::before {
  background: rgba(226, 32, 26, 0.14) !important;
  box-shadow: 0 4px 16px rgba(226, 32, 26, 0.18) !important;
}

/* Per-milestone icon */
.st-timeline .st-item:nth-child(1)::before {
  content: "\f0eb" !important;
}

/* lightbulb  */
.st-timeline .st-item:nth-child(2)::before {
  content: "\f135" !important;
}

/* rocket     */
.st-timeline .st-item:nth-child(3)::before {
  content: "\f201" !important;
}

/* chart-line */
.st-timeline .st-item:nth-child(4)::before {
  content: "\f091" !important;
}

/* trophy     */

/* Place year / name / desc in column 2 */
.st-item>.st-year {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

.st-item>.st-name {
  grid-column: 2 !important;
  grid-row: 2 !important;
}

.st-item>.st-desc {
  grid-column: 2 !important;
  grid-row: 3 !important;
}

/* Hover: red title */
.st-item:hover .st-name .elementor-heading-title {
  color: #e2201a !important;
}

/* ── Year badge ───────────────────────────────────────────────────── */
.st-year .elementor-heading-title {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: #e2201a !important;
  line-height: 1 !important;
  margin: 0 0 5px !important;
  padding-top: 2px !important;
}

/* ── Milestone title ──────────────────────────────────────────────── */
.st-name .elementor-heading-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #373643 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 7px !important;
  -webkit-transition: color 0.25s ease !important;
  transition: color 0.25s ease !important;
}

/* ── Description ──────────────────────────────────────────────────── */
.st-desc .elementor-heading-title {
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #6b7280 !important;
  line-height: 1.75 !important;
  margin: 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-family: inherit !important;
}

.st-desc .elementor-heading-title strong {
  color: #373643;
  font-weight: 600;
}

/* ── Right side image ─────────────────────────────────────────────── */
.st-image .elementor-widget-container {
  line-height: 0 !important;
  padding: 0 !important;
}

.st-image img {
  width: 100% !important;
  height: 500px !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.13) !important;
}

/* ── Stats card overlay ───────────────────────────────────────────── */
/*   st-right must be position:relative (already set via CSS)         */
/*   Add a div-block with class st-card inside st-right               */
/*   Inside st-card:                                                  */
/*     st-card-title → heading widget (card header)                  */
/*     st-stat       → div-block for each row                        */
/*       st-stat-label  → heading widget (label + %)                 */
/*       st-stat-bar    → div-block (add extra class for color)      */
/* ── Stats card overlay ───────────────────────────────────────────── */
/*   Elementor structure inside st-card:                              */
/*     st-card-title  → heading widget  "Task Status Distribution"   */
/*     st-stats-row   → div-block       (3-column flex row)          */
/*       st-stat      → div-block (x3)  one column per metric        */
/*         st-stat-label → heading      label ("In Progress")        */
/*         st-stat-pct   → heading      big number ("67%")           */
/*         st-stat-bar   → div-block    colored bar (+ st-bar-XX)    */
.st-card {
  position: absolute !important;
  bottom: 28px;
  left: -16px;
  background: #ffffff;
  border-radius: 16px;
  padding: 16px 18px 18px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.14);
  width: 280px;
  z-index: 3;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Card header title */
.st-card-title .elementor-heading-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #373643 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  margin: 0 0 12px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
  line-height: 1 !important;
}

/* Stats row: 3 equal columns */
.st-stats-row {
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-align-items: stretch !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
}

/* Each stat column */
.st-stat {
  -webkit-flex: 1 !important;
  flex: 1 !important;
  padding: 0 12px !important;
  border-right: 1px solid rgba(0, 0, 0, 0.07) !important;
  margin: 0 !important;
}

.st-stat:first-child {
  padding-left: 0 !important;
}

.st-stat:last-child {
  padding-right: 0 !important;
  border-right: none !important;
}

/* Small label */
.st-stat-label .elementor-heading-title {
  font-size: 9.5px !important;
  font-weight: 600 !important;
  color: #9ca3af !important;
  margin: 0 0 6px !important;
  text-transform: none !important;
  letter-spacing: 0.2px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Large percentage number */
.st-stat-pct .elementor-heading-title {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #373643 !important;
  line-height: 1 !important;
  margin: 0 0 8px !important;
  letter-spacing: -0.02em !important;
}

/* Progress bar track */
.st-stat-bar {
  height: 5px !important;
  background: #f1f5f9 !important;
  border-radius: 99px !important;
  overflow: hidden !important;
  position: relative !important;
  padding: 0 !important;
}

/* Bar fill */
.st-stat-bar::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 0%;
  border-radius: 99px !important;
}

/* Color + width variants */
.st-bar-67::after {
  width: 67%;
  background: #22c55e !important;
}

.st-bar-24::after {
  width: 24%;
  background: #3b82f6 !important;
}

.st-bar-9::after {
  width: 9%;
  background: #e2201a !important;
}

/* ====================================================================
   Task 2 fix: Mission section — outer container uses vm-row class
   instead of zp-row, and text column uses zp-row instead of zp-text-col
   ==================================================================== */

/* Make vm-row act as the flex row wrapper */
.vm-row {
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-wrap: nowrap !important;
  flex-wrap: nowrap !important;
  -webkit-align-items: stretch !important;
  align-items: stretch !important;
  overflow: hidden !important;
  min-height: 480px !important;
  padding: 10px !important;
}

/* zp-row as direct child of vm-row = text column (60%) */
.vm-row>.zp-row {
  -webkit-flex: 0 0 60% !important;
  flex: 0 0 60% !important;
  width: 60% !important;
  -webkit-align-self: stretch !important;
  align-self: stretch !important;
  padding: 68px 72px !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-direction: column !important;
  flex-direction: column !important;
  -webkit-justify-content: center !important;
  justify-content: center !important;
  -webkit-align-items: flex-start !important;
  align-items: flex-start !important;
  position: relative;
  box-sizing: border-box !important;
  min-height: unset !important;
  align-self: center !important;
}

/* Image column (40%) */
.vm-row>.zp-img-col {
  -webkit-flex: 0 0 40% !important;
  flex: 0 0 40% !important;
  width: 40% !important;
  -webkit-align-self: stretch !important;
  align-self: stretch !important;
  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  padding: 0 !important;
}

/* Image fills the column fully */
.vm-row>.zp-img-col .zp-image {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.vm-row>.zp-img-col .zp-image img {
  width: 98% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* When image is on LEFT — add padding to text column */
.vm-row.img-left>.zp-img-col {
  order: -1 !important;
}

.vm-row.img-left>.zp-row {
  padding-left: 72px !important;
}

/* ====================================================================
   Responsive — Z-Pattern (.zp-section / .vm-row) &
   Story / Timeline (.st-section)
   ==================================================================== */

@media (max-width: 1024px) {

  /* ── Z-Pattern: tighten spacing, shrink images & type ────────────── */
  .zp-row {
    padding: 28px !important;
    min-height: auto !important;
    height: auto !important;
  }

  .zp-img-col,
  .vm-row>.zp-img-col {
    min-height: 360px !important;
  }

  .zp-image img,
  .vm-row>.zp-img-col .zp-image img {
    min-height: 360px !important;
  }

  .vm-row {
    min-height: 360px !important;
  }

  .zp-text-col,
  .vm-row>.zp-row {
    padding: 48px 40px !important;
  }

  .vm-row.img-left>.zp-row {
    padding-left: 40px !important;
  }

  .zp-title .elementor-heading-title {
    font-size: clamp(24px, 3.6vw, 34px) !important;
  }

  .zp-desc .elementor-heading-title {
    font-size: 17px !important;
    line-height: 1.75 !important;
  }

  /* ── Story: free up width, shrink image & card ───────────────────── */
  .st-inner {
    gap: 36px !important;
    padding: 24px !important;
  }

  .st-left {
    padding-left: 0 !important;
  }

  .st-item {
    max-width: 100% !important;
  }

  .st-subtitle .elementor-heading-title {
    max-width: 100% !important;
  }

  .st-image img {
    height: 420px !important;
  }

  .st-card {
    width: 240px !important;
    left: -10px !important;
    padding: 14px 16px !important;
  }
}

@media (max-width: 768px) {

  /* ── Z-Pattern: stack image above text ────────────────────────────── */
  .zp-row,
  .vm-row {
    flex-direction: column !important;
    flex-wrap: wrap !important;
    height: auto !important;
    min-height: auto !important;
    padding: 0 !important;
  }

  .zp-img-col,
  .vm-row>.zp-img-col {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 100% !important;
    min-height: 260px !important;
  }

  .zp-image img,
  .vm-row>.zp-img-col .zp-image img {
    width: 100% !important;
    min-height: 260px !important;
    border-radius: 16px !important;
  }

  .zp-text-col,
  .vm-row>.zp-row {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-height: unset !important;
    padding: 36px 24px !important;
  }

  .vm-row.img-left>.zp-row {
    padding-left: 24px !important;
  }

  /* Accent bar becomes a horizontal mark above the title */
  .zp-text-col::before,
  .zp-row>.zp-text-col:first-child::before {
    top: 0;
    left: 24px;
    right: auto;
    transform: none;
    width: 56px;
    height: 4px;
    border-radius: 0 0 4px 4px;
  }

  .zp-title .elementor-heading-title {
    font-size: clamp(22px, 6vw, 28px) !important;
  }

  .zp-desc {
    margin-top: 18px !important;
    padding-top: 18px !important;
  }

  .zp-desc .elementor-heading-title {
    font-size: 15px !important;
    line-height: 1.7 !important;
  }

  /* ── Story: stack columns, drop sticky image ─────────────────────── */
  .st-inner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 28px !important;
    padding: 20px !important;
    border-radius: 24px !important;
  }

  .st-left,
  .st-right {
    flex: 0 0 auto !important;
    width: 100% !important;
    padding-left: 0 !important;
    position: static !important;
    align-self: stretch !important;
  }

  .st-title .elementor-heading-title {
    font-size: clamp(26px, 6vw, 32px) !important;
  }

  .st-subtitle .elementor-heading-title {
    font-size: clamp(14px, 3.6vw, 17px) !important;
  }

  .st-image img {
    height: 320px !important;
  }

  .st-card {
    position: static !important;
    width: 100% !important;
    left: auto !important;
    bottom: auto !important;
    margin-top: -32px !important;
  }
}

@media (max-width: 480px) {

  /* ── Z-Pattern ─────────────────────────────────────────────────── */
  .zp-img-col,
  .vm-row>.zp-img-col {
    min-height: 200px !important;
  }

  .zp-image img,
  .vm-row>.zp-img-col .zp-image img {
    min-height: 200px !important;
    border-radius: 12px !important;
  }

  .zp-text-col,
  .vm-row>.zp-row {
    padding: 28px 20px !important;
  }

  .vm-row.img-left>.zp-row {
    padding-left: 20px !important;
  }

  .zp-text-col::before,
  .zp-row>.zp-text-col:first-child::before {
    left: 20px;
  }

  .zp-title .elementor-heading-title {
    font-size: clamp(20px, 7vw, 24px) !important;
  }

  /* ── Story ─────────────────────────────────────────────────────── */
  .st-inner {
    padding: 16px !important;
    border-radius: 18px !important;
  }

  .st-item {
    grid-template-columns: 44px 1fr !important;
    column-gap: 14px !important;
  }

  .st-item::before {
    width: 44px !important;
    height: 44px !important;
    font-size: 16px !important;
  }

  .st-item::after {
    left: 21px;
    top: 44px;
  }

  .st-image img {
    height: 240px !important;
  }

  .st-stat {
    padding: 0 8px !important;
  }

  .st-stat-pct .elementor-heading-title {
    font-size: 18px !important;
  }
}

/* ====================================================================
   RTL overrides — Story / Timeline (.st-section)
   ==================================================================== */

/* Prevent RTL direction from auto-flipping the grid columns.
   Instead we explicitly mirror: icon goes to the right column,
   text (1fr) goes to the left column, matching Arabic reading order. */
.rtl .st-item {
  direction: ltr !important;
  grid-template-columns: 1fr 52px !important;
}

/* Move the icon box to the right column */
.rtl .st-item::before {
  grid-column: 2 !important;
}

/* Move connecting line to the right side, centred under the icon */
.rtl .st-item::after {
  left: auto !important;
  right: 25px !important;
}

/* Keep text columns in column 1 (left) */
.rtl .st-item>.st-year {
  grid-column: 1 !important;
}

.rtl .st-item>.st-name {
  grid-column: 1 !important;
}

.rtl .st-item>.st-desc {
  grid-column: 1 !important;
}

/* Restore Arabic text direction inside the text cells */
.rtl .st-item>.st-year,
.rtl .st-item>.st-name,
.rtl .st-item>.st-desc {
  direction: rtl !important;
  text-align: right !important;
}

/* Flip the stats card overlay to poke out from the right side */
.rtl .st-card {
  left: auto !important;
  right: -16px !important;
}

/* ====================================================================
     FAQ Accordion — "ac" prefix
     ====================================================================
     Class map (Elementor HTML widget):
       ac-wrap     → outer container
       ac-eyebrow  → small red label above title
       ac-title    → main section heading
       ac-list     → wraps all accordion items
       ac-item     → single accordion row
       ac-trigger  → clickable question row
       ac-body     → collapsible answer panel
     ==================================================================== */

.ac-wrap {
  background: #0f0e15 !important;
  border-radius: 24px !important;
  padding: 56px 52px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  height: auto !important;
}

/* ── Eyebrow ──────────────────────────────────────────────────────── */
.ac-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: #e2201a !important;
  font-family: "Lato", sans-serif !important;
  line-height: 1 !important;
  margin: 0 0 18px !important;
}

.ac-eyebrow::before {
  content: "" !important;
  display: inline-block !important;
  width: 28px !important;
  height: 2px !important;
  background: #e2201a !important;
  border-radius: 2px !important;
  flex-shrink: 0 !important;
}

/* ── Section title ────────────────────────────────────────────────── */
.ac-title {
  font-family: "Fahkwang", sans-serif !important;
  font-size: clamp(26px, 3vw, 40px) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.025em !important;
  color: #ffffff !important;
  margin: 0 0 44px !important;
}

/* ── Accordion list ───────────────────────────────────────────────── */
.ac-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ── Single item ──────────────────────────────────────────────────── */
.ac-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ── Trigger (question row) ───────────────────────────────────────── */
.ac-trigger {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  width: 100% !important;
  background: none !important;
  border: none !important;
  padding: 22px 0 !important;
  cursor: pointer !important;
  text-align: left !important;
  -webkit-tap-highlight-color: transparent !important;
}

.ac-trigger:focus-visible {
  outline: 2px solid rgba(226, 32, 26, 0.5) !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
}

.ac-question {
  font-family: "Fahkwang", sans-serif !important;
  font-size: clamp(15px, 1.6vw, 20px) !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  transition: color 0.25s ease !important;
  flex: 1 !important;
}

.ac-item.is-open .ac-question,
.ac-trigger:hover .ac-question {
  color: #e2201a !important;
}

/* ── Chevron icon ─────────────────────────────────────────────────── */
.ac-icon {
  flex-shrink: 0 !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition:
    border-color 0.25s ease,
    background 0.25s ease,
    transform 0.35s ease !important;
}

.ac-icon svg {
  width: 14px !important;
  height: 14px !important;
  stroke: #ffffff !important;
  fill: none !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  transition: stroke 0.25s ease !important;
}

.ac-item.is-open .ac-icon {
  background: #e2201a !important;
  border-color: #e2201a !important;
  transform: rotate(180deg) !important;
}

.ac-item.is-open .ac-icon svg {
  stroke: #ffffff !important;
}

.ac-trigger:hover .ac-icon {
  border-color: rgba(226, 32, 26, 0.5) !important;
}

/* ── Answer panel ─────────────────────────────────────────────────── */
.ac-body {
  overflow: hidden !important;
  max-height: 0 !important;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.ac-item.is-open .ac-body {
  max-height: 600px !important;
}

.ac-answer {
  font-family: "Lato", sans-serif !important;
  font-size: 17px !important;
  line-height: 1.8 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  padding: 0 52px 24px 0 !important;
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .ac-wrap {
    padding: 44px 40px !important;
  }
}

@media (max-width: 768px) {
  .ac-wrap {
    padding: 36px 28px !important;
    border-radius: 18px !important;
  }

  .ac-answer {
    padding-right: 8px !important;
  }
}

@media (max-width: 480px) {
  .ac-wrap {
    padding: 28px 20px !important;
    border-radius: 14px !important;
  }

  .ac-trigger {
    padding: 18px 0 !important;
  }

  .ac-icon {
    width: 28px !important;
    height: 28px !important;
  }
}

.ac-answer-list {
  list-style: none !important;
  margin: 6px 0 10px !important;
  padding: 0 !important;
}

.ac-answer-list li {
  font-family: "Lato", sans-serif !important;
  font-size: 17px !important;
  line-height: 1.8 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  padding-left: 18px !important;
  position: relative !important;
}

.ac-answer-list li::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 13px !important;
  width: 6px !important;
  height: 2px !important;
  background: #e2201a !important;
  border-radius: 1px !important;
}

/* ====================================================================
   RTL overrides — FAQ Accordion (.ac-*)
   ==================================================================== */

/* Trigger button has an explicit text-align:left that breaks Arabic text */
.rtl .ac-trigger {
  text-align: right !important;
}

/* Question text: align right and remove Latin-only negative letter-spacing */
.rtl .ac-question {
  text-align: right !important;
  letter-spacing: 0 !important;
}

/* Section title: remove tight Latin letter-spacing for Arabic glyphs */
.rtl .ac-title {
  letter-spacing: 0 !important;
}

/* Eyebrow label: remove wide letter-spacing (only suits Latin uppercase) */
.rtl .ac-eyebrow {
  letter-spacing: normal !important;
}

/* Eyebrow dash: flip from left-of-text to right-of-text
   (::before is first in flex order; direction:rtl places it on the right,
    which IS the reading-start in Arabic — correct as-is, no order change
    needed, but reverse the side margin if any leaks through) */

/* Answer padding: LTR leaves 52px on the right for the icon gap;
   in RTL the chevron icon sits on the LEFT, so shift the gap there */
.rtl .ac-answer {
  padding: 0 0 24px 52px !important;
}

/* Answer list bullets: move from left edge to right edge */
.rtl .ac-answer-list li {
  padding-left: 0 !important;
  padding-right: 18px !important;
}

.rtl .ac-answer-list li::before {
  left: auto !important;
  right: 0 !important;
}

/* Responsive: mirror the reduced right-padding to left */
@media (max-width: 768px) {
  .rtl .ac-answer {
    padding-right: 0 !important;
    padding-left: 8px !important;
  }
}

@media (max-width: 480px) {
  .rtl .ac-answer {
    padding-left: 0 !important;
  }
}

/* ====================================================================
     Compliance Badges section — "cb" prefix
     ====================================================================
     Class map (HTML widget):
       cb-header    → top 2-col row (title + desc)
       cb-title     → bold Arabic heading
       cb-desc      → description paragraph
       cb-badges    → flex row of all badge items
       cb-badge     → single badge (icon circle + label)
       cb-circle    → the round icon container
       cb-label     → text below the circle
     ==================================================================== */

/* ── Top header row ───────────────────────────────────────────────── */
.cb-header {
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
  margin-bottom: 64px !important;
  justify-content: space-between !important;
  padding: 0 20px !important;
  flex-direction: column;
}

.cb-title {
  flex: 0 0 45% !important;
  font-family: "Fahkwang" sans-serif !important;
  font-size: clamp(28px, 3.2vw, 40px) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  color: #373643 !important;
  margin: 0 !important;
}

.cb-title em {
  font-style: normal !important;
  color: #e2201a !important;
}

.cb-desc {
  flex: 1 !important;
  font-family: "Lato", "Cairo", "Tajawal", sans-serif !important;
  font-size: 20px !important;
  line-height: 1.7 !important;
  color: #6b7280 !important;
  margin: 6px 0 0 !important;
  max-width: 880px !important;
}

/* ── Badge row ────────────────────────────────────────────────────── */
.cb-badges {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 35px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ── Single badge ─────────────────────────────────────────────────── */
.cb-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: default;
}

.cb-circle {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: #dcdee5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 0;
  box-sizing: border-box;
  transition:
    background 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
  flex-shrink: 0;
}

.cb-circle svg {
  width: 45px;
  height: 45px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.cb-badge:hover .cb-circle {
  background: #fff1f0;
  box-shadow: 0 8px 32px rgba(226, 32, 26, 0.14);
  transform: translateY(-4px);
}

.cb-badge:hover .cb-circle svg {
  transform: scale(1.1);
}

.cb-label {
  font-family: "Lato" sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #373643;
  text-align: center;
  line-height: 1.4;
  letter-spacing: 0.01em;
  max-width: 100%;
  flex-shrink: 1;
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .cb-circle {
    width: 230px;
    height: 230px;
    gap: 8px;
    padding: 0 16px;
  }

  .cb-circle svg {
    width: 26px;
    height: 26px;
  }

  .cb-badges {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
  }

  .cb-label {
    font-size: 11px;
    max-width: 100%;
    text-wrap: wrap;
  }
}

@media (max-width: 768px) {
  .cb-header {
    flex-direction: row !important;
    gap: 20px !important;
    margin-bottom: 44px !important;
  }

  .cb-title {
    flex: none;
  }

  .cb-desc {
    max-width: 100%;
  }

  .cb-badges {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  .cb-badge {
    flex: 0 0 calc(33.333% - 20px);
    min-width: 140px;
  }

  .cb-circle {
    flex-direction: column !important;
    width: 200px;
    height: 200px;
  }
}

@media (max-width: 480px) {
  .cb-header {
    flex-direction: column !important;
  }

  .cb-badge {
    flex: 0 0 calc(50% - 20px);
  }

  .cb-circle {
    width: 150px;
    height: 150px;
  }

  .cb-circle svg {
    width: 28px;
    height: 28px;
  }

  .cb-label {
    font-size: 12px;
    text-wrap: wrap;
  }
}

/* ====================================================================
   Service Cards — "sc" prefix
   ====================================================================
   Class map (HTML widget inside dark #0f0e15 section):
     sc-grid    → 3-column card grid
     sc-card    → single card
     sc-top     → top row (icon left, arrow right)
     sc-icon    → SVG icon wrapper
     sc-arrow   → diagonal arrow top-right
     sc-title   → card heading
     sc-desc    → card description
   ==================================================================== */

.sc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
}

/* ── Single card ──────────────────────────────────────────────────── */
.sc-card {
  height: 100%;
  background: #0f0e15;
  border-radius: 20px;
  padding: 32px 28px 36px;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.sc-card::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #e2201a 0%, #b71b15 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.sc-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45);
}

.sc-card:hover::before {
  transform: scaleX(1);
}

/* ── Top row: icon left, arrow right ─────────────────────────────── */
.sc-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 40px;
}

/* ── SVG icon wrapper ─────────────────────────────────────────────── */
.sc-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sc-icon svg {
  width: 36px;
  height: 36px;
  stroke: #ffffff;
  fill: none;
  transition: stroke 0.3s ease;
}

.sc-card:hover .sc-icon svg {
  stroke: #e2201a;
}

/* ── Arrow top-right ──────────────────────────────────────────────── */
.sc-arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease;
}

.sc-arrow svg {
  width: 14px;
  height: 14px;
  stroke: #ffffff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.3s ease;
}

.sc-card:hover .sc-arrow {
  background: #e2201a;
  border-color: #e2201a;
  transform: translate(3px, -3px);
}

.sc-card:hover .sc-arrow svg {
  stroke: #ffffff;
}

/* ── Title ────────────────────────────────────────────────────────── */
.sc-title {
  font-family: "Fahkwang", sans-serif !important;
  font-size: clamp(16px, 1.6vw, 28px) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.35 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 12px !important;
}

/* ── Description ──────────────────────────────────────────────────── */
.sc-desc {
  font-family: "Lato", sans-serif !important;
  font-size: clamp(16px, 1.6vw, 20px) !important;
  line-height: 1.75 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  margin: 0 !important;
  max-width: 90% !important;
}

/* ── Red card variant (.sc-card-red) ──────────────────────────────── */
.sc-card.sc-card-red {
  background: #e2201a;
}

.sc-card.sc-card-red::before {
  background: rgba(255, 255, 255, 0.3);
}

.sc-card.sc-card-red .sc-icon svg {
  stroke: #ffffff;
}

.sc-card.sc-card-red .sc-arrow {
  border-color: rgba(255, 255, 255, 0.35);
}

.sc-card.sc-card-red .sc-arrow svg {
  stroke: #ffffff;
}

.sc-card.sc-card-red:hover .sc-arrow {
  background: #ffffff;
  border-color: #ffffff;
}

.sc-card.sc-card-red:hover .sc-arrow svg {
  stroke: #e2201a;
}

.sc-card.sc-card-red .sc-title {
  color: #ffffff;
}

.sc-card.sc-card-red .sc-desc {
  color: rgba(255, 255, 255, 0.75);
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .sc-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 600px) {
  .sc-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .sc-card {
    padding: 24px 22px 28px;
  }

  .sc-top {
    margin-bottom: 28px;
  }
}

.stl-mes-sec-grid-left {
  grid-column: span 2 !important;
}

/* Alternative: fade out instead of hide */
.banner-slider-nav-hidden .banner-slider-nav {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Or hide only specific buttons */
.banner-slider-nav-hidden .banner-slider-button-prev,
.banner-slider-nav-hidden .banner-slider-button-next {
  display: none !important;
}

.banner-slider-nav-hidden .banner-slider-nav {
  display: none !important;
}

.banner-slider-nav-hidden .banner-slider {
  pointer-events: none !important;
}

/* Optional: Keep it looking normal but frozen */
.banner-slider-nav-hidden .banner-slider {
  pointer-events: none !important;
  cursor: default !important;
}

/* ====================================================================
   Shield Badge Cards — "sb" prefix
   ====================================================================
   Class map (HTML widget):
     sb-card       → the shield-shaped badge
     sb-check      → top circle with checkmark
     sb-label      → center text label
     sb-info       → bottom info circle icon
   ==================================================================== */

.sb-card {
  position: relative !important;
  width: 200px !important;
  min-height: 228px !important;
  background: #1c1b2a !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  clip-path: path("M 58,0 L 142,0 Q 160,0 166,17 L 193,96 Q 200,114 193,132 L 166,211 Q 160,228 142,228 L 58,228 Q 40,228 34,211 L 7,132 Q 0,114 7,96 L 34,17 Q 40,0 58,0 Z") !important;
  padding: 42px 22px !important;
  gap: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  text-align: center !important;
  cursor: default !important;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.35)) !important;
  transition:
    filter 0.3s ease,
    background 0.3s ease !important;
}

.sb-card:hover {
  background: #231f35 !important;
  filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 16px rgba(226, 32, 26, 0.2)) !important;
}

/* ── Top checkmark circle ─────────────────────────────────────────── */
.sb-check {
  width: 52px !important;
  height: 52px !important;
  box-shadow: 0 0 0 5px rgba(226, 32, 26, 0.2) !important;
  border-radius: 50%;
  background: #e2201a;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sb-check svg {
  width: 25px !important;
  height: 25px !important;
  stroke: #ffffff;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Label ────────────────────────────────────────────────────────── */
.sb-label {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.4 !important;
  letter-spacing: 0.02em !important;
  margin: 0 !important;
}

/* ── Bottom info circle ───────────────────────────────────────────── */
.sb-info {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    border-color 0.25s ease,
    background 0.25s ease;
  cursor: pointer;
}

.sb-info:hover {
  border-color: #e2201a;
  background: rgba(226, 32, 26, 0.12);
}

.sb-info svg {
  width: 15px !important;
  height: 15px !important;
  stroke: rgba(255, 255, 255, 0.55);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.25s ease;
}

.sb-info:hover svg {
  stroke: #e2201a;
}

/* ── Red variant ──────────────────────────────────────────────────── */
.sb-card.sb-red {
  background: #e2201a;
  border-color: rgba(255, 255, 255, 0.15);
}

.sb-card.sb-red:hover {
  background: #c41b14 !important;
  filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 20px rgba(226, 32, 26, 0.4)) !important;
}

.sb-card.sb-red .sb-check {
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

.sb-card.sb-red .sb-info {
  border-color: rgba(255, 255, 255, 0.35);
}

.sb-card.sb-red .sb-info:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: #ffffff;
}

.sb-card.sb-red .sb-info svg {
  stroke: rgba(255, 255, 255, 0.7);
}

/* ====================================================================
   Icon Accordion — "iac" prefix
   ====================================================================
   Class map (HTML widget):
     iac-wrap        → outer container (white bg)
     iac-list        → <ul> wrapping all items
     iac-item        → <li> single row (add is-open to expand)
     iac-trigger     → <button> clickable row
     iac-icon        → SVG icon wrapper (left)
     iac-question    → bold heading text
     iac-chevron     → right-side collapse indicator
     iac-body        → collapsible answer panel
     iac-answer      → answer paragraph(s)
   ==================================================================== */

/* ── Outer wrapper ────────────────────────────────────────────────── */
.iac-wrap {
  background: #ffffff !important;
  border-radius: 16px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* ── List reset ───────────────────────────────────────────────────── */
.iac-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Single item ──────────────────────────────────────────────────── */
.iac-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.iac-item:first-child {
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* ── Trigger row ──────────────────────────────────────────────────── */
.iac-trigger {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  width: 100% !important;
  background: none !important;
  border: none !important;
  padding: 20px 4px !important;
  cursor: pointer !important;
  text-align: left !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: background 0.2s ease !important;
}

.iac-trigger:hover {
  background: rgba(226, 32, 26, 0.02) !important;
}

.iac-trigger:focus-visible {
  outline: 2px solid rgba(226, 32, 26, 0.4) !important;
  outline-offset: -2px !important;
  border-radius: 8px !important;
}

/* ── Icon wrapper ─────────────────────────────────────────────────── */
.iac-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  background: #f4f5f7 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: background 0.25s ease !important;
}

.iac-icon svg {
  width: 20px !important;
  height: 20px !important;
  stroke: #373643 !important;
  fill: none !important;
  stroke-width: 1.75 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  transition: stroke 0.25s ease !important;
  flex-shrink: 0 !important;
}

.iac-item.is-open .iac-icon {
  background: #fff0ef !important;
}

.iac-item.is-open .iac-icon svg {
  stroke: #e2201a !important;
}

.iac-trigger:hover .iac-icon {
  background: #fff0ef !important;
}

.iac-trigger:hover .iac-icon svg {
  stroke: #e2201a !important;
}

/* ── Question text ────────────────────────────────────────────────── */
.iac-question {
  flex: 1 !important;
  font-family: "Fahkwang", sans-serif !important;
  font-size: clamp(15px, 1.5vw, 17px) !important;
  font-weight: 700 !important;
  color: #373643 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
  text-align: left !important;
  transition: color 0.25s ease !important;
}

.rtl .iac-question {
  text-align: right !important;
}

.iac-item.is-open .iac-question,
.iac-trigger:hover .iac-question {
  color: #e2201a !important;
}

/* ── Chevron ──────────────────────────────────────────────────────── */
.iac-chevron {
  flex-shrink: 0 !important;
  width: 28px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.iac-chevron svg {
  width: 16px !important;
  height: 16px !important;
  stroke: #9ca3af !important;
  fill: none !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  transition: stroke 0.25s ease !important;
}

.iac-item.is-open .iac-chevron {
  transform: rotate(180deg) !important;
}

.iac-item.is-open .iac-chevron svg {
  stroke: #e2201a !important;
}

/* ── Answer panel ─────────────────────────────────────────────────── */
.iac-body {
  overflow: hidden !important;
  max-height: 0 !important;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.iac-item.is-open .iac-body {
  max-height: 800px !important;
}

.iac-answer {
  font-family: "Lato", sans-serif !important;
  font-size: 14px !important;
  line-height: 1.85 !important;
  color: #6b7280 !important;
  padding: 0 4px 24px 56px !important;
  margin: 0 !important;
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .iac-trigger {
    gap: 12px !important;
    padding: 16px 4px !important;
  }

  .iac-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
  }

  .iac-icon svg {
    width: 18px !important;
    height: 18px !important;
  }

  .iac-answer {
    padding-left: 48px !important;
  }
}

@media (max-width: 480px) {
  .iac-icon {
    width: 32px !important;
    height: 32px !important;
  }

  .iac-icon svg {
    width: 16px !important;
    height: 16px !important;
  }

  .iac-answer {
    padding-left: 8px !important;
    padding-bottom: 18px !important;
  }
}

.qms-bor-up-r-l {
  border-radius: 65px 65px 0 0 !important;
}

/* ====================================================================
   Diagonal Image Panel — "dip" prefix
   ====================================================================
   Class map (HTML widget):
     dip-wrap       → outer relative container (sets dimensions)
     dip-img        → <img> filling the container
     dip-accent     → decorative dark badge bottom-right
     dip-accent svg → up-arrow icon inside the badge
   ==================================================================== */

/* ── Outer container ──────────────────────────────────────────────── */
.dip-wrap {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 280px !important;
  overflow: hidden !important;
  /* Diagonal cut: full-right top, diagonal to full-left at bottom */
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) !important;
  border-radius: 24px 20px 20px 24px !important;
}

/* ── Photo ────────────────────────────────────────────────────────── */
.dip-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 999px 77px 59px 8px !important;
  border-left: 10px solid #e2201a !important;
}

.rtl .dip-wrap img {
    border-left: 0 !important;
    border-right: 10px solid #e2201a !important;
    border-radius: 77px 999px 8px 59px !important;
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .dip-wrap {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) !important;
    border-radius: 0 0 16px 16px !important;
    min-height: 240px !important;
  }
}

@media (max-width: 480px) {
  .dip-wrap {
    min-height: 200px !important;
  }

  .dip-accent {
    width: 38px !important;
    height: 38px !important;
    bottom: 14px !important;
    right: 14px !important;
  }

  .dip-accent svg {
    width: 15px !important;
    height: 15px !important;
  }
}

/* ====================================================================
   LEFT TABS SECTION — "lt" prefix
   ====================================================================
   Class map (HTML widget):
     lt-section     → outer wrapper
     lt-container   → flex row (left nav + right image)
     lt-nav         → left vertical tabs navigation
     lt-nav-item    → single navigation tab
     lt-nav-item.active → active tab state
     lt-image-area  → right side image container
     lt-image       → image element inside container
   ====================================================================
*/

.lt-section {
  background: #ffffff;
  padding: 80px 60px !important;
  position: relative;
  overflow: hidden;
}

.lt-container {
  display: flex !important;
  align-items: stretch !important;
  gap: 60px !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
}

/* Left navigation tabs */
.lt-nav {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  flex: 0 0 280px !important;
  min-width: 280px !important;
}

/* Individual navigation item/tab */
.lt-nav-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  padding: 24px 24px !important;
  background: #f4f5f7 !important;
  border: 2px solid transparent !important;
  border-radius: 16px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  text-align: left !important;
  border-left: 3px solid #e2201a !important;
  position: relative !important;
  overflow: hidden !important;
}

.lt-nav-item:hover {
  background: #fff0ef !important;
  border-color: #e2201a !important;
  box-shadow: 0 4px 16px rgba(226, 32, 26, 0.15) !important;
}

.lt-nav-item.active {
  background: #e2201a !important;
  border-color: #e2201a !important;
  box-shadow: 0 8px 32px rgba(226, 32, 26, 0.25) !important;
}

.lt-nav-item .lt-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  background: rgba(226, 32, 26, 0.08) !important;
  color: #e2201a !important;
  font-size: 24px !important;
  flex-shrink: 0 !important;
  transition: all 0.3s ease !important;
}

.lt-nav-item:hover .lt-icon {
  background: rgba(226, 32, 26, 0.15) !important;
  transform: scale(1.1) !important;
}

.lt-nav-item.active .lt-icon {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

.lt-nav-text {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.lt-nav-title {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #373643 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  transition: color 0.3s ease !important;
}

.lt-nav-item:hover .lt-nav-title {
  color: #e2201a !important;
}

.lt-nav-item.active .lt-nav-title {
  color: #ffffff !important;
}

.lt-nav-desc {
  font-family: "Lato", sans-serif !important;
  font-size: 13px !important;
  color: #6b6e82 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  transition: color 0.3s ease !important;
}

.lt-nav-item:hover .lt-nav-desc {
  color: #5a5d6f !important;
}

.lt-nav-item.active .lt-nav-desc {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Right side image area */
.lt-image-area {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 400px !important;
  position: relative !important;
  overflow: hidden !important;
  background: #f4f5f7 !important;
  border-radius: 20px !important;
}

.lt-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  opacity: 0 !important;
  transition: opacity 0.5s ease !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}

.lt-image.active {
  opacity: 1 !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
}

/* RTL Support */
.rtl .lt-container {
  flex-direction: row-reverse !important;
}

.rtl .lt-nav-item {
  text-align: right !important;
  border-left: none !important;
  border-right: 4px solid #e2201a !important;
}

.rtl .lt-nav-item:hover {
  transform: translateX(-8px) !important;
}

.rtl .lt-nav {
  flex: 0 0 280px !important;
}

/* Responsive */
@media (max-width: 1024px) {
  .lt-section {
    padding: 60px 40px !important;
  }

  .lt-container {
    gap: 40px !important;
  }

  .lt-nav {
    flex: 0 0 240px !important;
    min-width: 240px !important;
  }

  .lt-nav-item {
    padding: 20px 18px !important;
  }

  .lt-nav-item .lt-icon {
    width: 40px !important;
    height: 40px !important;
    font-size: 20px !important;
  }

  .lt-nav-title {
    font-size: 14px !important;
  }

  .lt-image-area {
    min-height: 350px !important;
  }
}

@media (max-width: 768px) {
  .lt-section {
    padding: 50px 24px !important;
  }

  .lt-container {
    flex-direction: column !important;
    gap: 40px !important;
  }

  .rtl .lt-container {
    flex-direction: column !important;
  }

  .lt-nav {
    flex: 1 !important;
    min-width: auto !important;
    gap: 12px !important;
  }

  .lt-nav-item {
    padding: 18px 16px !important;
  }

  .lt-nav-item .lt-icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 18px !important;
  }

  .lt-image-area {
    min-height: 300px !important;
  }
}

@media (max-width: 480px) {
  .lt-section {
    padding: 40px 20px !important;
  }

  .lt-container {
    gap: 24px !important;
  }

  .lt-nav {
    gap: 10px !important;
  }

  .lt-nav-item {
    padding: 16px 14px !important;
  }

  .lt-nav-title {
    font-size: 13px !important;
  }

  .lt-nav-desc {
    font-size: 12px !important;
  }

  .lt-image-area {
    min-height: 250px !important;
  }
}

/* ====================================================================
   HORIZONTAL TABS SECTION — "ht" prefix
   ====================================================================
   Class map (HTML widget):
     ht-section     → outer wrapper (full background)
     ht-inner       → inner container
     ht-header      → header with title
     ht-eyebrow     → small red label
     ht-title       → section title
     ht-nav         → horizontal tabs navigation
     ht-tab         → single tab button
     ht-tab.active  → active tab state
     ht-content     → content area wrapper
     ht-panel       → content panel (one per tab)
     ht-panel.active → active panel
   ====================================================================
*/

.ht-section {
  background: linear-gradient(135deg, #e2201a 0%, #b71b15 100%) !important;
  padding: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

.ht-inner {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 60px 24px !important;
}

/* Header section */
.ht-header {
  text-align: center !important;
  margin-bottom: 48px !important;
}

.ht-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: "Lato", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.8) !important;
  margin-bottom: 12px !important;
  line-height: 1 !important;
}

.ht-eyebrow::before {
  content: "" !important;
  display: inline-block !important;
  width: 28px !important;
  height: 2px !important;
  background: rgba(255, 255, 255, 0.6) !important;
  border-radius: 2px !important;
}

.ht-title {
  font-family: "Fahkwang", sans-serif !important;
  font-size: clamp(28px, 3.2vw, 48px) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.1 !important;
  letter-spacing: -0.025em !important;
  margin: 0 !important;
}

/* Horizontal tabs navigation */
.ht-nav {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 48px !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.15) !important;
  padding-bottom: 24px !important;
}

.ht-tab {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 14px !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 3px solid transparent !important;
  cursor: pointer !important;
  font-family: "Fahkwang", sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.6) !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  white-space: nowrap !important;
  margin-bottom: -26px !important;
}

.ht-tab:hover {
  color: rgba(255, 255, 255, 0.9) !important;
}

.ht-tab.active {
  color: #ffffff !important;
  border-bottom-color: #ffffff !important;
}

.ht-tab .ht-tab-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  font-size: 14px !important;
  opacity: 0.8 !important;
  transition: opacity 0.3s ease !important;
}

.ht-tab.active .ht-tab-icon {
  opacity: 1 !important;
}

/* Content area */
.ht-content {
  position: relative !important;
}

.ht-panel {
  display: none !important;
  animation: fadeIn 0.4s ease !important;
}

.ht-panel.active {
  display: block !important;
}

@keyframes fadeIn {
  from {
    opacity: 0 !important;
    transform: translateY(10px) !important;
  }

  to {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}

/* Panel content (paragraph-based) */
.ht-panel-text {
  font-family: "Lato", sans-serif !important;
  font-size: clamp(15px, 1.5vw, 18px) !important;
  line-height: 1.8 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  margin: 32px 0 0 !important;
  max-width: 800px !important;
}

.ht-panel-text strong {
  color: #ffffff !important;
  font-weight: 700 !important;
}

.ht-panel-text em {
  color: rgba(255, 255, 255, 0.95) !important;
  font-style: italic !important;
}

/* RTL Support */
.rtl .ht-nav {
  flex-direction: row-reverse !important;
}

/* Responsive */
@media (max-width: 1024px) {
  .ht-inner {
    padding: 48px 20px !important;
  }

  .ht-header {
    margin-bottom: 40px !important;
  }

  .ht-title {
    font-size: clamp(24px, 2.8vw, 40px) !important;
  }

  .ht-nav {
    margin-bottom: 40px !important;
    gap: 12px !important;
    padding-bottom: 20px !important;
  }

  .ht-tab {
    padding: 10px 16px !important;
    font-size: 13px !important;
    margin-bottom: -24px !important;
  }
}

@media (max-width: 768px) {
  .ht-section {
    background: linear-gradient(135deg, #e2201a 0%, #b71b15 100%) !important;
  }

  .ht-inner {
    padding: 40px 16px !important;
  }

  .ht-header {
    margin-bottom: 32px !important;
  }

  .ht-title {
    font-size: clamp(20px, 2.4vw, 32px) !important;
  }

  .ht-nav {
    gap: 8px !important;
    margin-bottom: 32px !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.12) !important;
    padding-bottom: 16px !important;
  }

  .ht-tab {
    padding: 8px 12px !important;
    font-size: 12px !important;
    margin-bottom: -18px !important;
  }

  .ht-tab .ht-tab-icon {
    width: 20px !important;
    height: 20px !important;
    font-size: 12px !important;
  }

  .ht-panel-text {
    font-size: 15px !important;
  }
}

@media (max-width: 480px) {
  .ht-inner {
    padding: 32px 12px !important;
  }

  .ht-header {
    margin-bottom: 24px !important;
  }

  .ht-eyebrow {
    font-size: 10px !important;
    margin-bottom: 8px !important;
  }

  .ht-title {
    font-size: clamp(18px, 2vw, 26px) !important;
  }

  .ht-nav {
    gap: 6px !important;
    margin-bottom: 24px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 12px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .ht-tab {
    padding: 6px 10px !important;
    font-size: 11px !important;
    margin-bottom: -14px !important;
    min-width: max-content !important;
  }

  .ht-panel-text {
    font-size: 14px !important;
    margin-top: 24px !important;
  }
}

/* ── PAGE WRAPPER ── */
.bm-page-wrapper {
  position: relative !important;
}

/* ── HERO SECTION ── */
.bm-section {
  position: relative !important;
  background-position: center center !important;
  background-attachment: scroll !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  padding: 0 !important;
  overflow: visible !important;
  /* CRITICAL — allows cards to overflow downward */
  min-height: 500px !important;
  display: flex !important;
  align-items: center !important;
}

.new-bm-before::before {
  width: 45% !important;
}

/* ── OVERLAY (content row) ── */
.bm-overlay {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 40px 60px 240px !important;
  margin-bottom: 0 !important;
}

/* ── CONTENT (left half) ── */
.bm-content {
  position: relative !important;
  z-index: 2 !important;
  width: 50% !important;
  max-width: 50% !important;
  flex-shrink: 0 !important;
  text-align: left !important;
  padding-right: 40px !important;
}

.bm-headline {
  font-family: "Fahkwang", sans-serif !important;
  font-size: clamp(32px, 4.5vw, 40px) !important;
  font-weight: 800 !important;
  color: #373643 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 20px !important;
}

.bm-accent {
  color: #e2201a !important;
}

.bm-description {
  font-family: "Lato", sans-serif !important;
  font-size: clamp(14px, 1.6vw, 20px) !important;
  line-height: 1.8 !important;
  color: #535565 !important;
  margin: 0 0 28px !important;
  max-width: 100% !important;
}

.bm-cta-group {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

/* ── FEATURE CARDS — floats between sections ── */
.bm-features {
  position: absolute !important;
  bottom: 50px !important;
  left: 50% !important;
  transform: translate(-50%, 50%) !important;
  /* KEY: 50% down = half card height below hero bottom */
  width: calc(100% - 80px) !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  background: #ffffff !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 48px rgba(0, 0, 0, 0.13) !important;
  z-index: 10 !important;
  /* above both sections */
}

.bm-feature-card {
  position: relative !important;
  background: #ffffff !important;
  padding: 36px 20px 32px !important;
  text-align: center !important;
  transition: background 0.3s ease !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: 220px !important;
  border-right: 1px solid #e5e7eb !important;
}

.bm-feature-card:last-child {
  border-right: none !important;
}

/* Top red accent on hover */
.bm-feature-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 0 !important;
  background: #e2201a !important;
  transition: height 0.3s ease !important;
}

.bm-feature-card:hover::before {
  height: 3px !important;
}

.bm-feature-card:hover {
  background: #fafafa !important;
}

.bm-feature-icon {
  width: 68px !important;
  height: 68px !important;
  border-radius: 14px !important;
  background: #fff0ef !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 20px !important;
  flex-shrink: 0 !important;
  color: #e2201a !important;
  transition: background 0.3s ease !important;
}

.bm-feature-card:hover .bm-feature-icon {
  background: #ffe0de !important;
}

.bm-feature-label {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #373643 !important;
  margin: 0 0 8px !important;
  line-height: 1.35 !important;
}

.bm-feature-desc {
  font-family: "Lato", sans-serif !important;
  font-size: 16px !important;
  color: #6b6e82 !important;
  line-height: 1.75 !important;
  margin: 0 !important;
  max-width: 100%;
}

/* ── NEXT SECTION — padding-top creates space for floating cards ── */
.bm-next-section {
  padding-top: 140px !important;
  /* roughly half card height + gap */
  position: relative !important;
  z-index: 1 !important;
}

/* ════════════════════════════════
   RESPONSIVE
════════════════════════════════ */

/* Tablet landscape */
@media (max-width: 1200px) {
  .bm-overlay {
    padding: 60px 48px 180px !important;
  }

  .bm-features {
    width: calc(100% - 48px) !important;
    grid-template-columns: repeat(5, 1fr) !important;
  }

  .bm-feature-card {
    padding: 28px 14px 24px !important;
    min-height: 200px !important;
  }

  .bm-feature-card:nth-child(4),
  .bm-feature-card:nth-child(5) {
    border-top: 1px solid #e5e7eb !important;
  }

  .bm-feature-card:nth-child(5) {
    border-right: none !important;
    grid-column: span 1 !important;
  }

  .bm-feature-icon {
    width: 54px !important;
    height: 54px !important;
    margin-bottom: 14px !important;
  }

  .bm-feature-label {
    font-size: 15px !important;
  }

  .bm-feature-desc {
    font-size: 13px !important;
    line-height: 1.65 !important;
  }

  /* Cards are 1 row tall (~200px). Half height ≈ 100px + 8px offset → 130px */
  .bm-next-section {
    padding-top: 130px !important;
  }
}

/* Tablet portrait */
@media (max-width: 1024px) {
  .bm-section {
    min-height: 400px !important;
  }
  
  .bm-overlay {
    padding: 48px 36px 250px !important;
  }

  .bm-content {
    width: 100% !important;
    max-width: 70% !important;
    padding-right: 0 !important;
    text-align: left !important;
  }

  .bm-cta-group {
    justify-content: center !important;
  }

  .bm-features {
    grid-template-columns: repeat(5, 1fr) !important;
    width: calc(100% - 40px) !important;
    bottom: 130px !important;
  }

  .bm-feature-card {
    padding: 24px 12px 20px !important;
    min-height: 190px !important;
  }

  .bm-feature-card:nth-child(4),
  .bm-feature-card:nth-child(5) {
    border-top: 1px solid #e5e7eb !important;
    border-right: 1px solid #e5e7eb !important;
  }

  .bm-feature-card:nth-child(5) {
    border-right: none !important;
  }

  .bm-feature-icon {
    width: 50px !important;
    height: 50px !important;
    border-radius: 10px !important;
    margin-bottom: 12px !important;
  }

  .bm-feature-label {
    font-size: 14px !important;
  }

  .bm-feature-desc {
    font-size: 12px !important;
    line-height: 1.6 !important;
  }

  .bm-next-section {
    display: none;
  }
}

/* Mobile landscape */
@media (max-width: 768px) {
  .bm-section {
    min-height: auto !important;
  }

  .bm-overlay {
    padding: 40px 20px 420px !important;
  }

  .bm-content {
    text-align: left !important;
    max-width: 75% !important;
  }

  .bm-description {
    max-width: 100% !important;
  }

  .bm-cta-group {
    justify-content: center !important;
  }

  .bm-features {
    grid-template-columns: repeat(2, 1fr) !important;
    width: calc(100% - 32px) !important;
    border-radius: 16px !important;
  }

  /* Reset all card borders, sizing & type */
  .bm-feature-card {
    border-right: none !important;
    border-top: none !important;
    min-height: 180px !important;
    padding: 24px 20px !important;
  }

  .bm-feature-icon {
    width: 56px !important;
    height: 56px !important;
    border-radius: 12px !important;
    margin-bottom: 14px !important;
  }

  .bm-feature-label {
    font-size: 17px !important;
  }

  .bm-feature-desc {
    font-size: 14px !important;
    line-height: 1.7 !important;
  }

  /* Col 1 gets right border */
  .bm-feature-card:nth-child(odd) {
    border-right: 1px solid #e5e7eb !important;
  }

  /* Row 2+ gets top border */
  .bm-feature-card:nth-child(n + 3) {
    border-top: 1px solid #e5e7eb !important;
  }

  /* 5th card spans full width */
  .bm-feature-card:nth-child(5) {
    grid-column: span 2 !important;
    border-right: none !important;
  }

  /* 3 rows × 180px ≈ 540px. Half ≈ 270px + 8px offset → 300px */
  .bm-next-section {
    padding-top: 260px !important;
  }
}

/* Mobile portrait */
@media (max-width: 480px) {
  .bm-overlay {
    padding: 36px 10px 480px !important;
  }
  
  .bm-content {
    max-width: 100% !important;
  }
  
  .bm-features {
      bottom: 50px !important;
  }
    
    .bm-description {
        margin: 0 0 18px !important;
    }

  .bm-features {
    grid-template-columns: 1fr !important;
    width: calc(100% - 24px) !important;
    transform: translate(-50%, 50%) !important;
  }

  .bm-feature-card {
    border-right: none !important;
    border-top: none !important;
    min-height: 140px !important;
    padding: 20px 20px !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 9px !important;
    text-align: center !important;
  }

  .bm-feature-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 10px !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
  }

  .bm-feature-label {
    font-size: 16px !important;
    margin-bottom: 4px !important;
  }

  .bm-feature-desc {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }

  .bm-feature-card:not(:first-child) {
    border-top: 1px solid #e5e7eb !important;
  }

  .bm-feature-card:nth-child(odd) {
    border-right: none !important;
  }

  .bm-feature-card:nth-child(5) {
    grid-column: span 1 !important;
  }

  /* 5 cards × 140px ≈ 700px. Half ≈ 350px + 8px offset → 380px */
  .bm-next-section {
    padding-top: 380px !important;
  }
}

/* ====================================================================
   RTL overrides — Banner/Hero (.bm-section)
   ==================================================================== */


.rtl .new-bm-before::before {
  left: auto !important;
  right: 0 !important;
}

/* Content block: flip text alignment and inner padding */
.rtl .bm-content {
  text-align: right !important;
  padding-right: 0 !important;
  padding-left: 40px !important;
}

/* CTA buttons: anchor to inline-start (right in RTL) */
.rtl .bm-cta-group {
  justify-content: flex-start !important;
}

/* At tablet portrait (≤1024px) the overlay already covers full width
   with a vertical gradient — no directional fix needed, but text
   alignment still applies */
@media (max-width: 1024px) {
  .rtl .bm-content {
    padding-left: 0 !important;
    text-align: right !important;
  }

  .rtl .bm-cta-group {
    justify-content: center !important;
  }
}

/* At mobile (≤768px) content is already centered — no extra RTL fix needed */

/* ── LEFT COLUMN ── */
.as-left {
  flex: 0 0 240px !important;
  min-width: 200px !important;
  position: sticky !important;
  top: 100px !important;
}

.as-heading {
  font-family: "Fahkwang", sans-serif !important;
  font-size: clamp(28px, 3.5vw, 40px) !important;
  font-weight: 700 !important;
  color: #0f0e15 !important;
  line-height: 1.2 !important;
  margin: 0 0 16px !important;
  letter-spacing: -0.02em !important;
}

.as-accent {
  color: #e2201a !important;
}

.as-desc {
  font-family: "Lato", sans-serif !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  color: #6b7280 !important;
  margin: 0 0 28px !important;
}

/* CTA button */
.as-btn {
  display: inline-flex !important;
  align-items: center !important;
  padding: 11px 26px !important;
  background: #e2201a !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 50px !important;
  font-family: "Fahkwang", sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition:
    background 0.3s ease,
    transform 0.2s ease !important;
  cursor: pointer !important;
}

.as-btn:hover {
  background: #c41916 !important;
  transform: translateY(-2px) !important;
}

/* ── BASE CARD ── */
.as-card {
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 28px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 15px !important;
  transition:
    box-shadow 0.3s ease,
    transform 0.3s ease !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  height: 100% !important;
}

.as-card:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1) !important;
  transform: translateY(-3px) !important;
}

/* Card header (icon + title row) */
.as-card-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Icon wrapper */
.as-icon-wrap {
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  background: #f5f5f5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: #e2201a !important;
  transition: background 0.3s ease !important;
}

.as-card:hover .as-icon-wrap {
  background: #fff0ef !important;
}

.zp-card-subheader {
  display: block;
  font-size: 20px;
  font-weight: 800;
  color: #373643;
  margin-bottom: 2px;
  line-height: 1.3;
}

.zp-card-desc {
  display: block;
  font-size: 17px;
  font-weight: 400;
  color: #6b7280;
  line-height: 1.6;
}

/* Card title */
.as-card-title {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #373643 !important;
  margin: 0 !important;
  line-height: 1.25 !important;
}

.as-card-desc {
  font-family: "Lato", sans-serif !important;
  font-size: 18px !important;
  line-height: 1.7 !important;
  color: #6b7280 !important;
  margin: 0 !important;
  flex: 1 !important;
  max-width: 90%;
}

.vm-hero {
  position: relative;
  width: 100%;
  max-height: 600px;
  min-height: 400px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 80px;
  height: 600px;
  overflow: hidden;
}

.as-card-link {
  font-family: "Lato", sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #e2201a !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition:
    gap 0.2s ease,
    color 0.2s ease !important;
  margin-top: auto !important;
}

.as-card-link:hover {
  color: #c41916 !important;
}

.as-card-link:hover::after {
  transform: translateX(4px) !important;
}

@media (max-width: 1024px) {
  .as-left {
    flex: 0 0 200px !important;
  }
}

@media (max-width: 768px) {
  .as-left {
    flex: none !important;
    width: 100% !important;
    position: static !important;
    text-align: center !important;
  }
}

@media (max-width: 540px) {
  .as-card {
    padding: 22px !important;
  }
}

.hw-steps {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 !important;
  align-items: start !important;
  justify-self: center !important;
  max-width: 1280px !important;
}

/* ── SINGLE STEP ── */
.hw-step {
  padding: 0 24px !important;
  position: relative !important;
}

/* Top row: number circle + horizontal connector line */
.hw-step-top {
  display: flex !important;
  align-items: center !important;
  margin-bottom: 24px !important;
}

/* Big outlined number circle */
.hw-step-number {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  border: 2px solid #e2201a !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: "Fahkwang", sans-serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: #e2201a !important;
  flex-shrink: 0 !important;
  background: #ffffff !important;
  position: relative !important;
  z-index: 1 !important;
  transition:
    background 0.3s ease,
    color 0.3s ease !important;
}

.hw-step:hover .hw-step-number {
  background: #e2201a !important;
  color: #ffffff !important;
}

/* Horizontal dashed connector line */
.hw-connector {
  flex: 1 !important;
  height: 2px !important;
  border-top: 2px dashed #e5e7eb !important;
  margin-left: 12px !important;
}

/* Step title */
.hw-step-title {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #373643 !important;
  margin: 0 0 12px !important;
  line-height: 1.3 !important;
}

/* Step description */
.hw-step-desc {
  font-family: "Lato", sans-serif !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: #6b7280 !important;
  margin: 0 !important;
  max-width: 80% !important;
}

/* 2 columns */
@media (max-width: 1024px) {
  .hw-steps {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 48px 0 !important;
  }

  /* connectors only on col 1 items in each row */
  .hw-step:nth-child(2n) .hw-connector {
    display: none !important;
  }

  /* re-add connector for col 1 items */
  .hw-step:nth-child(2n-1) .hw-connector {
    display: block !important;
  }

  .hw-step {
    padding: 0 20px !important;
  }
}

/* 1 column stacked */
@media (max-width: 600px) {
  .hw-section {
    padding: 60px 0 !important;
  }

  .hw-container {
    padding: 0 24px !important;
  }

  .hw-header {
    margin-bottom: 48px !important;
  }

  .hw-steps {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  .hw-step {
    padding: 0 !important;
    display: flex !important;
    gap: 20px !important;
    align-items: flex-start !important;
  }

  /* On mobile: number left, content right */
  .hw-step-top {
    flex-direction: column !important;
    align-items: center !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
  }

  /* Vertical connector on mobile */
  .hw-connector {
    flex: none !important;
    width: 2px !important;
    height: 100% !important;
    min-height: 60px !important;
    border-top: none !important;
    border-left: 2px dashed #e5e7eb !important;
    margin-left: 0 !important;
    margin-top: 10px !important;
  }

  /* Last step: hide connector */
  .hw-step--last .hw-connector {
    display: none !important;
  }

  .hw-step-number {
    width: 64px !important;
    height: 64px !important;
    font-size: 20px !important;
  }

  .hw-step-content {
    padding-top: 10px !important;
  }

  .hw-step-title {
    font-size: 16px !important;
    margin-bottom: 8px !important;
  }

  .hw-step-desc {
    font-size: 13.5px !important;
  }
}

@media (max-width: 400px) {
  .hw-step-number {
    width: 56px !important;
    height: 56px !important;
    font-size: 18px !important;
  }

  .hw-heading {
    font-size: clamp(24px, 6vw, 32px) !important;
  }
}

.ms-accent {
  color: #e2201a !important;
}

.ms-integrations {
  background: #f9f9f9 !important;
  padding: 70px 48px !important;
  font-family: "Lato", sans-serif !important;
  height: 100% !important;
  box-sizing: border-box !important;
  border-radius: 12px !important;
}

.ms-int-inner {
  max-width: 480px !important;
}

.ms-int-heading {
  font-family: "Fahkwang", sans-serif !important;
  font-size: clamp(24px, 3vw, 40px) !important;
  font-weight: 700 !important;
  color: #0f0e15 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 20px !important;
}

.ms-int-subtitle {
  font-family: "Lato", sans-serif !important;
  font-size: 15px !important;
  color: #6b7280 !important;
  margin: 0 0 20px !important;
  line-height: 1.6 !important;
}

/* Checklist */
.ms-int-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 28px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.ms-int-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-family: "Lato", sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #0f0e15 !important;
}

/* Check icon circle */
.ms-int-check {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: #e2201a !important;
}

/* Sync note at bottom */
.ms-int-note {
  font-family: "Lato", sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #e2201a !important;
  margin: 0 !important;
  padding: 16px 20px !important;
  background: #fff5f5 !important;
  border-left: 3px solid #e2201a !important;
  border-radius: 0 8px 8px 0 !important;
}

/* ══════════════════════════════════════════
   SECTION 2 — TESTIMONIALS
══════════════════════════════════════════ */

.ms-testimonials {
  background: #f9f9f9 !important;
  padding: 70px 48px !important;
  font-family: "Lato", sans-serif !important;
  height: 100% !important;
  box-sizing: border-box !important;
  border-radius: 12px !important;
  display: flex !important;
  /* ← add */
  flex-direction: column !important;
  /* ← add */
}

.ms-tes-inner {
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  height: 100% !important;
}

.ms-tes-heading {
  font-family: "Fahkwang", sans-serif !important;
  font-size: clamp(20px, 2.5vw, 40px) !important;
  font-weight: 700 !important;
  color: #0f0e15 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 36px !important;
}

/* 3-col card grid */
.ms-tes-grid {
  display: grid !important;
  grid-template-columns: repeat(1, 1fr) !important;
  gap: 20px !important;
  margin-top: auto !important;
  /* pushes grid to bottom */
  width: 100% !important;
}

/* Individual card */
.ms-tes-card {
  background: #ffffff !important;
  border: 1px solid #e8edf2 !important;
  border-radius: 12px !important;
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  transition:
    box-shadow 0.3s ease,
    transform 0.3s ease !important;
}

.ms-tes-card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-3px) !important;
}

/* Stars */
.ms-tes-stars {
  display: flex !important;
  gap: 3px !important;
}

.ms-tes-stars span {
  color: #e2201a !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

/* Quote */
.ms-tes-quote {
  font-family: "Lato", sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0f0e15 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  font-style: normal !important;
  flex: 1 !important;
}

/* Author block */
.ms-tes-author {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  padding-top: 12px !important;
  border-top: 1px solid #f0f0f0 !important;
  margin-top: auto !important;
}

.ms-tes-name {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #0f0e15 !important;
}

.ms-tes-role {
  font-family: "Lato", sans-serif !important;
  font-size: 12px !important;
  color: #9ca3af !important;
}

/* ── RESPONSIVE ── */

@media (max-width: 1024px) {

  .ms-integrations,
  .ms-testimonials {
    padding: 56px 36px !important;
  }

  .ms-tes-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .ms-tes-card:last-child {
    grid-column: span 2 !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    width: 100% !important;
  }
}

@media (max-width: 768px) {

  .ms-integrations,
  .ms-testimonials {
    padding: 48px 24px !important;
  }

  .ms-int-inner {
    max-width: 100% !important;
  }

  .ms-tes-grid {
    grid-template-columns: 1fr !important;
  }

  .ms-tes-card:last-child {
    grid-column: span 1 !important;
    max-width: 100% !important;
  }

  .ms-int-heading,
  .ms-tes-heading {
    font-size: clamp(22px, 5vw, 28px) !important;
  }
}

@media (max-width: 480px) {

  .ms-integrations,
  .ms-testimonials {
    padding: 40px 16px !important;
  }

  .ms-tes-card {
    padding: 20px !important;
  }

  .ms-int-item {
    font-size: 14px !important;
  }
}

/* Cards row */
.exp-container {
  display: flex !important;
  gap: 12px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  height: 480px !important;
  align-items: stretch !important;
}

/* ── BASE CARD ── */
.exp-card {
  position: relative !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  cursor: pointer !important;

  flex-basis: 135px !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;

  /* smooth single property transition — no glitch */
  transition: flex-basis 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;

  /* GPU layer for buttery smooth */
  will-change: flex-basis !important;
}

/* ── ACTIVE / HOVERED CARD ── */
.exp-card--active {
  flex-basis: 600px !important;
  flex-grow: 1 !important;
  flex-shrink: 1 !important;
}

/* Background image */
.exp-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  transition: transform 0.5s ease !important;
  will-change: transform !important;
}

.exp-card--active .exp-img {
  transform: scale(1.04) !important;
}

/* Dark gradient overlay */
.exp-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to top,
      rgba(15, 14, 21, 0.92) 0%,
      rgba(15, 14, 21, 0.5) 50%,
      rgba(15, 14, 21, 0.15) 100%) !important;
  z-index: 1 !important;
  transition: background 0.4s ease !important;
}

/* Collapsed cards: stronger overlay */
.exp-card:not(.exp-card--active):not(:hover) .exp-overlay {
  background: rgba(15, 14, 21, 0.65) !important;
}

/* ── CONTENT ── */
.exp-content {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 2 !important;
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  /* prevent content wrapping in collapsed state */
  min-width: 280px !important;
}

/* Brand logo text (e.g. YOKOHAMA) */
.exp-logo {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: 0.05em !important;
  display: block !important;

  opacity: 0 !important;
  transform: translateY(10px) !important;
  transition:
    opacity 0.4s ease 0.15s,
    transform 0.4s ease 0.15s !important;
  white-space: nowrap !important;
}

/* Title */
.exp-title {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  white-space: normal !important;

  opacity: 0 !important;
  transform: translateY(10px) !important;
  transition:
    opacity 0.4s ease 0.25s,
    transform 0.4s ease 0.25s !important;
}

/* Show content when card is active or hovered */
.exp-card--active .exp-logo,
.exp-card:hover .exp-logo,
.exp-card--active .exp-title,
.exp-card:hover .exp-title,
.exp-card--active .exp-link,
.exp-card:hover .exp-link {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.exp-content p {
  font-family: "Lato", sans-serif !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: rgba(255, 255, 255, 0.75) !important;
  margin: 0 !important;

  opacity: 0 !important;
  transform: translateY(12px) !important;
  transition:
    opacity 0.35s ease 0.3s,
    transform 0.35s ease 0.3s !important;
}

.exp-card--active .exp-content p {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ── RESPONSIVE ── */

@media (max-width: 1024px) {
  .exp-section {
    padding: 60px 24px !important;
  }

  .exp-container {
    height: 400px !important;
  }

  .exp-card {
    flex: 0 0 60px !important;
    width: 60px !important;
    border-radius: 12px !important;
  }

  .exp-title {
    font-size: 14px !important;
  }
}

@media (max-width: 768px) {
  .exp-container {
    flex-direction: column !important;
    height: auto !important;
    gap: 10px !important;
  }

  .exp-card {
    flex: 0 0 72px !important;
    width: 100% !important;
    border-radius: 12px !important;
    height: 72px !important;
    transition:
      flex 0.5s ease,
      height 0.5s ease !important;
  }

  .exp-card--active,
  .exp-card:hover {
    flex: 0 0 320px !important;
    height: 320px !important;
    width: 100% !important;
  }

  .exp-title {
    font-size: 15px !important;
  }
}

@media (max-width: 480px) {
  .exp-section {
    padding: 48px 16px !important;
  }

  .exp-card--active,
  .exp-card:hover {
    flex: 0 0 260px !important;
    height: 260px !important;
  }

  .exp-title {
    font-size: 14px !important;
  }

  .exp-content {
    padding: 18px !important;
  }
}

/* ── STEPS ROW ── */
.tt-steps {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 0 !important;
  align-items: start !important;
  position: relative !important;
}

.tt-steps-2 {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 0 !important;
  align-items: start !important;
  position: relative !important;
}

.tt-steps-3 {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 !important;
  align-items: start !important;
  position: relative !important;
}

/* ── SINGLE STEP ── */
.tt-step {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 0 12px !important;
  position: relative !important;
}

/* Icon circle */
.tt-icon-wrap {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  border: 5px solid #e5e7eb !important;
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #e2201a !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 2 !important;
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease,
    box-shadow 0.3s ease !important;
  margin-bottom: 20px !important;
}

.tt-step:hover .tt-icon-wrap {
  background: #e2201a !important;
  border-color: #e2201a !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(226, 32, 26, 0.3) !important;
}

/* Connector line between steps */
.tt-connector {
  position: absolute !important;
  top: 38px !important;
  left: calc(50% + 40px) !important;
  right: calc(-50% + 40px) !important;
  display: flex !important;
  align-items: center !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.tt-connector-line {
  flex: 1 !important;
  height: 1px !important;
  border-top: 4px solid #d1d5db !important;
}

/* Last step — no connector */
.tt-step--last .tt-connector {
  display: none !important;
}

/* Step title */
.tt-step-title {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0f0e15 !important;
  margin: 0 0 10px !important;
  line-height: 1.3 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

/* Step description */
.tt-step-desc {
  font-family: "Lato", sans-serif !important;
  font-size: 13.5px !important;
  line-height: 1.7 !important;
  color: #6b7280 !important;
  margin: 0 0 14px !important;
  max-width: 80% !important;
}

/* 3 columns */
@media (max-width: 1100px) {
  .tt-steps {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 48px 0 !important;
  }

  /* hide connectors on last of each row */
  .tt-step:nth-child(3) .tt-connector,
  .tt-step:nth-child(6) .tt-connector {
    display: none !important;
  }

  /* add top border line for second row */
  .tt-step:nth-child(n + 4) {
    padding-top: 0 !important;
  }

  /* tt-steps-3 (4-col) → 2 columns at tablet landscape */
  .tt-steps-3 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 48px 0 !important;
  }

  /* hide connector on last item of each row (items 2 and 4) */
  .tt-steps-3 .tt-step:nth-child(2) .tt-connector,
  .tt-steps-3 .tt-step:nth-child(4) .tt-connector {
    display: none !important;
  }
}

/* 2 columns */
@media (max-width: 768px) {
  .tt-section {
    padding: 60px 0 !important;
  }

  .tt-container {
    padding: 0 24px !important;
  }

  .tt-header {
    margin-bottom: 48px !important;
  }

  .tt-steps {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 40px 0 !important;
  }

  .tt-step:nth-child(3) .tt-connector {
    display: block !important;
  }

  .tt-step:nth-child(2) .tt-connector,
  .tt-step:nth-child(4) .tt-connector,
  .tt-step:nth-child(6) .tt-connector {
    display: none !important;
  }

  .tt-icon-wrap {
    width: 68px !important;
    height: 68px !important;
  }

  .tt-connector {
    top: 32px !important;
    left: calc(50% + 34px) !important;
  }

  /* tt-steps-3 stays 2 columns — tighten gap and match connector offset */
  .tt-steps-3 {
    gap: 40px 0 !important;
  }

  .tt-step-title {
    font-size: 13px !important;
  }

  .tt-step-desc {
    font-size: 12.5px !important;
    max-width: 90% !important;
  }
}

/* 1 column */
@media (max-width: 480px) {
  .tt-steps {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  /* tt-steps-3 also collapses to 1 column */
  .tt-steps-3 {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
    align-items: center !important;
  }

  .tt-connector {
    display: none !important;
  }

  .tt-connector-line {
    display: none !important;
  }

  /* show all connectors from earlier nth-child rules */
  .tt-steps-3 .tt-step:nth-child(2) .tt-connector,
  .tt-steps-3 .tt-step:nth-child(4) .tt-connector {
    display: none !important;
  }

  .tt-step {
    padding: 0 !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  /* hide all connectors on single column */
  .tt-connector {
    display: none !important;
  }

  .tt-icon-wrap {
    flex-shrink: 0 !important;
    margin-bottom: 0 !important;
    width: 60px !important;
    height: 60px !important;
  }
}

/* ── RTL / ARABIC ─────────────────────────────────────────── */

/* Reverse grid reading direction for all tt-steps variants */
.rtl .tt-steps,
.rtl .tt-steps-2,
.rtl .tt-steps-3 {
  direction: rtl !important;
}

/* Mirror connector: swap left ↔ right so line flows right-to-left */
.rtl .tt-connector {
  left: calc(-50% + 40px) !important;
  right: calc(50% + 40px) !important;
}

/* At ≤768px the connector offset shrinks — mirror that too */
@media (max-width: 768px) {
  .rtl .tt-connector {
    left: calc(-50% + 34px) !important;
    right: calc(50% + 34px) !important;
  }
}

/* Single-column stacked view: steps align right in RTL */
@media (max-width: 480px) {
  .rtl .tt-step {
    flex-direction: column !important;
  }
  .tt-steps-2 {
  grid-template-columns: repeat(1, 1fr) !important;
  gap: 20px !important;
}
}

/* Arabic typography */
.rtl .tt-step-title {
  font-family: "29LT Bukra", "29LTBukra-Bold", "Cairo", sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.rtl .tt-step-desc {
  font-family: "29LT Bukra", "29LTBukra-Regular", "Cairo", sans-serif !important;
}


.wc-section {
  background: #f7f7f7 !important;
  padding: 0 !important;
  font-family: "Lato", sans-serif !important;
  overflow: hidden !important;
}

.wc-container {
  display: flex !important;
  align-items: stretch !important;
  min-height: 520px !important;
  max-width: 100% !important;
}

/* ── LEFT DARK PANEL ── */
.wc-left {
  position: relative !important;
  flex: 0 0 40% !important;
  background: #0f0e15 !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%) !important;
  padding-right: 40px !important;
}

.rtl .wc-left {
    clip-path: polygon(0 50%, 12% 0, 100% 0, 100% 100%, 12% 100%) !important;
}

.rtl .links-bar .services-links li a:before {
  margin-right: 0 !important;
  margin-left: 7px !important;
}

.wc-left-inner {
  position: relative !important;
  z-index: 2 !important;
  padding: 60px 40px 60px 48px !important;
}

.wc-heading {
  font-family: "Fahkwang", sans-serif !important;
  font-size: clamp(20px, 2.2vw, 28px) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.4 !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}

.wc-accent {
  color: #e2201a !important;
}

/* Decorative diagonal lines on dark panel */
.wc-left-deco {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background: repeating-linear-gradient(-55deg,
      transparent,
      transparent 18px,
      rgba(255, 255, 255, 0.025) 18px,
      rgba(255, 255, 255, 0.025) 19px) !important;
}

/* ── RIGHT CONTENT ── */
.wc-right {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 60px 64px 60px 80px !important;
  background: #ffffff !important;
  gap: 0 !important;
}

/* ── SINGLE ITEM ── */
.wc-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 20px !important;
  padding: 20px 0 !important;
  transition: transform 0.25s ease !important;
}

.wc-item:hover {
  transform: translateX(6px) !important;
}

/* Icon box */
.wc-icon-wrap {
  width: 52px !important;
  height: 52px !important;
  border-radius: 10px !important;
  background: #fff5f5 !important;
  border: 1px solid rgba(226, 32, 26, 0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: #e2201a !important;
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease !important;
}

.wc-item:hover .wc-icon-wrap {
  background: #e2201a !important;
  border-color: #e2201a !important;
  color: #ffffff !important;
}

/* Text body */
.wc-item-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  padding-top: 4px !important;
}

.wc-item-title {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #373643 !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

.wc-item-desc {
  font-family: "Lato", sans-serif !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: #6b7280 !important;
  margin: 0 !important;
}

/* Divider between items */
.wc-divider {
  width: 100% !important;
  height: 1px !important;
  background: #f0f0f0 !important;
  flex-shrink: 0 !important;
}

/* ── RESPONSIVE ── */

@media (max-width: 1024px) {
    .rtl .wc-left {
        clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%) !important;
    }
  .wc-left {
    flex: 0 0 280px !important;
    clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%) !important;
  }

  .wc-left-inner {
    padding: 48px 36px 48px 36px !important;
  }

  .wc-right {
    padding: 48px 40px !important;
  }
}

@media (max-width: 768px) {
  .wc-container {
    flex-direction: column !important;
    min-height: auto !important;
  }

  .wc-left {
    flex: none !important;
    width: 100% !important;
    clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%) !important;
    padding-right: 0 !important;
    padding-bottom: 40px !important;
  }

  .wc-left-inner {
    padding: 48px 32px 32px !important;
    text-align: center !important;
    width: 100% !important;
  }

  .wc-right {
    padding: 40px 24px !important;
  }

  .wc-item:hover {
    transform: none !important;
  }
}

@media (max-width: 480px) {
  .wc-left-inner {
    padding: 36px 20px 28px !important;
  }

  .wc-right {
    padding: 32px 16px !important;
  }

  .wc-icon-wrap {
    width: 44px !important;
    height: 44px !important;
  }

  .wc-item-title {
    font-size: 15px !important;
  }

  .wc-item-desc {
    font-size: 13px !important;
  }
}

.in-section {
  background: #f7f7f7 !important;
  padding: 90px 0 !important;
  font-family: "Lato", sans-serif !important;
}

.in-container {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 40px !important;
}

/* Header */
.in-header {
  text-align: center !important;
  max-width: 700px !important;
  margin: 0 auto 56px !important;
}

.in-heading {
  font-family: "Fahkwang", sans-serif !important;
  font-size: clamp(22px, 3vw, 34px) !important;
  font-weight: 700 !important;
  color: #0f0e15 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 14px !important;
}

.in-accent {
  color: #e2201a !important;
}

.in-subtext {
  font-family: "Lato", sans-serif !important;
  font-size: 15px !important;
  color: #6b7280 !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}

.in-cards {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  align-items: stretch !important;
}

.in-cards-4 {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
  align-items: stretch !important;
}

.in-card {
  background: #0f0e15 !important;
  border-radius: 16px !important;
  padding: 36px 20px 32px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  gap: 16px !important;
  position: relative !important;
  overflow: hidden !important;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease !important;
  cursor: default !important;
  min-height: 280px !important;
  height: 100% !important;
}

.in-card::before {
  content: "" !important;
  position: absolute !important;
  top: -60px !important;
  left: -60px !important;
  width: 140px !important;
  height: 140px !important;
  background: #e2201a !important;
  border-radius: 50% !important;
  z-index: 0 !important;
  opacity: 0.15 !important;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease !important;
}

.in-card:hover::before {
  opacity: 0.3 !important;
  transform: scale(1.15) !important;
}

.in-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.3) !important;
}

/* Step number */
.in-card-num {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 36px !important;
  font-weight: 800 !important;
  color: #e2201a !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  z-index: 1 !important;
  position: relative !important;
}

/* Title */
.in-card-title {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  z-index: 1 !important;
  position: relative !important;
}

.rtl .in-card-title {
    text-align: right;
}

/* Description */
.in-card-desc {
  font-family: "Lato", sans-serif !important;
  font-size: 20px !important;
  line-height: 1.75 !important;
  color: rgba(255, 255, 255, 0.55) !important;
  margin: 0 !important;
  z-index: 1 !important;
  position: relative !important;
  flex: 1 !important;
  max-width: 90% !important;
}

@media (max-width: 1200px) {
  .in-cards {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .in-cards {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  .in-card {
    min-height: 220px !important;
    padding: 28px 18px !important;
  }

  .in-card-num {
    font-size: 28px !important;
  }
}

@media (max-width: 480px) {
  .in-cards {
    grid-template-columns: 1fr !important;
  }

  .in-card {
    min-height: 180px !important;
  }
  
  .in-cards-4 {
      grid-template-columns: repeat(1, 1fr) !important;
  }
  
  .in-last-card {
    grid-column: span 1 !important;
    }
}

.in-last-card {
    grid-column: span 2;
}

/* ══════════════════════════════════════
   SECTION 2 — HOW AUTOMERA WORKS
══════════════════════════════════════ */

.aw-section {
  font-family: "Lato", sans-serif !important;
  background: #0f0e15 !important;
  overflow: hidden !important;
}

/* Section header */
.aw-header {
  text-align: center !important;
  padding: 80px 40px 56px !important;
}

.aw-heading {
  font-family: "Fahkwang", sans-serif !important;
  font-size: clamp(22px, 3vw, 34px) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.35 !important;
  letter-spacing: -0.02em !important;
  margin: 0 auto !important;
  max-width: 750px !important;
}

.aw-accent {
  color: #e2201a !important;
}

.aw-cards {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 !important;
  height: 520px !important;
}

.aw-cards-2 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0 !important;
  height: 520px !important;
}

.aw-cards-3 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0 !important;
  min-height: 530px;
}

/* Individual card */
.aw-card {
  position: relative !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: flex 0.4s ease !important;
}

/* Dark overlay */
.aw-card-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to top,
      rgba(15, 14, 21, 0.92) 0%,
      rgba(15, 14, 21, 0.55) 50%,
      rgba(15, 14, 21, 0.2) 100%) !important;
  transition: background 0.4s ease !important;
  z-index: 1 !important;
}

.aw-card:hover .aw-card-overlay {
  background: linear-gradient(to top,
      rgba(15, 14, 21, 0.96) 0%,
      rgba(15, 14, 21, 0.7) 50%,
      rgba(15, 14, 21, 0.35) 100%) !important;
}

/* Content */
.aw-card-content {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 2 !important;
  padding: 28px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* Icon circle */
.aw-card-icon {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  background: #e2201a !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  flex-shrink: 0 !important;
  margin-bottom: 6px !important;
  transition:
    background 0.3s ease,
    transform 0.3s ease !important;
}

.aw-card:hover .aw-card-icon {
  background: #c41916 !important;
  transform: scale(1.08) !important;
}

/* Title */
.aw-card-title {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin: 0 !important;
  line-height: 1.1 !important;
}

/* Description */
.aw-card-desc {
  font-family: "Lato", sans-serif !important;
  font-size: 17.5px !important;
  line-height: 1.7 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  margin: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  transition:
    max-height 0.4s ease,
    opacity 0.4s ease 0.1s !important;
}

.aw-card:hover .aw-card-desc {
  max-height: 120px !important;
  opacity: 1 !important;
}

/* ── RESPONSIVE ── */

@media (max-width: 1100px) {
    .aw-cards-3 {
      min-height: auto;
    }
  .in-cards {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  .aw-cards {
    grid-template-columns: repeat(2, 1fr) !important;
    height: auto !important;
  }

  .aw-card {
    height: 320px !important;
  }
}

@media (max-width: 768px) {
    .aw-cards-3 {
      min-height: auto;
    }
    
  .in-section {
    padding: 60px 0 !important;
  }

  .in-container {
    padding: 0 24px !important;
  }

  .in-cards {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  .aw-header {
    padding: 60px 24px 40px !important;
  }

  .aw-cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .aw-card {
    height: 280px !important;
  }

  .aw-card-desc {
    max-height: 100px !important;
    opacity: 1 !important;
  }
}

@media (max-width: 480px) {
  .in-cards {
    grid-template-columns: 1fr !important;
  }
  
  .aw-cards-3 {
      grid-template-columns: repeat(1, 1fr) !important;
      min-height: auto;
    }

  .in-card {
    flex-direction: column !important;
    text-align: left !important;
    align-items: flex-start !important;
    padding: 20px !important;
  }

.aw-cards-2 {
  grid-template-columns: repeat(2, 1fr) !important;
}

  .in-card-icon {
    width: 48px !important;
    height: 48px !important;
    flex-shrink: 0 !important;
  }

  .aw-cards {
    grid-template-columns: 1fr !important;
  }

  .aw-card {
    height: 260px !important;
  }

  .aw-header {
    padding: 48px 16px 32px !important;
  }
}

.we-header {
  margin-bottom: 56px !important;
}

.we-heading {
  font-family: "Fahkwang", sans-serif !important;
  font-size: clamp(22px, 3vw, 34px) !important;
  font-weight: 700 !important;
  color: #0f0e15 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
  max-width: 700px !important;
}

.we-accent {
  color: #e2201a !important;
}

/* 2x2 grid */
.we-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0 !important;
  border: 1px solid #eeeeee !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}

/* Each item */
.we-item {
  padding: 36px 40px !important;
  border-right: 1px solid #eeeeee !important;
  border-bottom: 1px solid #eeeeee !important;
  transition: background 0.25s ease !important;
  position: relative !important;
  min-height: 100%;
}

.we-item:nth-child(even) {
  border-right: none !important;
}

.we-item:nth-child(3),
.we-item:nth-child(4) {
  border-bottom: none !important;
}

.we-item:hover {
  background: #fafafa !important;
}

/* Left red accent bar on hover */
.we-item::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 0 !important;
  background: #e2201a !important;
  transition: width 0.3s ease !important;
}

.we-item:hover::before {
  width: 3px !important;
}

/* Title row */
.we-item-top {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
}

/* Red arrow */
.we-arrow {
  color: #e2201a !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  margin-top: -2px !important;
}

.we-item-title {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #0f0e15 !important;
  margin: 0 !important;
  line-height: 1.35 !important;
}

.we-item-desc {
  font-family: "Lato", sans-serif !important;
  font-size: 18px !important;
  line-height: 1.75 !important;
  color: #6b7280 !important;
  margin: 0 !important;
  padding-left: 32px !important;
  max-width: 80%;
  /* aligns under title, after arrow */
}

.hb-header {
  margin-bottom: 64px !important;
  max-width: 680px !important;
}

.hb-heading {
  font-family: "Fahkwang", sans-serif !important;
  font-size: clamp(22px, 3vw, 34px) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.3 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
}

.hb-accent {
  color: #e2201a !important;
}

/* 5-col steps grid */
.hb-steps {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 0 !important;
  position: relative !important;
}

/* Horizontal line connecting all steps */
.hb-steps::before {
  content: "" !important;
  position: absolute !important;
  top: 28px !important;
  /* center of number */
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: rgba(226, 32, 26, 0.25) !important;
  z-index: 0 !important;
}

/* Single step */
.hb-step {
  padding: 0 24px 0 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

.hb-step:last-child {
  padding-right: 0 !important;
}

/* Big number */
.hb-step-num {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 42px !important;
  font-weight: 800 !important;
  color: #e2201a !important;
  line-height: 1 !important;
  margin-bottom: 24px !important;
  letter-spacing: -0.03em !important;
  display: inline-block !important;
  position: relative !important;

  /* Circle bg behind number */
  background: #0f0e15 !important;
  padding-right: 12px !important;
}

/* Step title */
.hb-step-title {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 0 12px !important;
  line-height: 1.4 !important;
}

/* Step description */
.hb-step-desc {
  font-family: "Lato", sans-serif !important;
  font-size: 12.5px !important;
  line-height: 1.75 !important;
  color: rgba(255, 255, 255, 0.5) !important;
  margin: 0 !important;
}

/* Hover: brighten */
.hb-step:hover .hb-step-title {
  color: #e2201a !important;
  transition: color 0.25s ease !important;
}

.hb-step:hover .hb-step-desc {
  color: rgba(255, 255, 255, 0.75) !important;
  transition: color 0.25s ease !important;
}

/* ── RESPONSIVE ── */

/* Section 1 */
@media (max-width: 768px) {
  .we-section {
    padding: 60px 0 !important;
  }

  .we-container {
    padding: 0 24px !important;
  }

  .we-grid {
    grid-template-columns: 1fr !important;
  }

  .we-item {
    border-right: none !important;
    border-bottom: 1px solid #eeeeee !important;
    padding: 28px 24px !important;
  }

  .we-item:last-child {
    border-bottom: none !important;
  }

  .we-item:nth-child(3),
  .we-item:nth-child(4) {
    border-bottom: 1px solid #eeeeee !important;
  }

  .we-item:last-child {
    border-bottom: none !important;
  }
}

@media (max-width: 480px) {
  .we-item {
    padding: 24px 16px !important;
  }

  .we-item-desc {
    padding-left: 0 !important;
  }
}

/* Section 2 */
@media (max-width: 1100px) {
  .hb-steps {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 48px 0 !important;
  }

  .hb-steps::before {
    display: none !important;
  }

  .hb-step {
    padding: 0 32px 0 0 !important;
  }
}

@media (max-width: 768px) {
  .hb-section {
    padding: 60px 0 !important;
  }

  .hb-container {
    padding: 0 24px !important;
  }

  .hb-steps {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 40px 24px !important;
  }

  .hb-step {
    padding: 0 !important;
  }

  .hb-step-num {
    font-size: 32px !important;
    margin-bottom: 16px !important;
  }
}

@media (max-width: 480px) {
  .hb-steps {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  .hb-step-num {
    font-size: 28px !important;
  }

  .hb-step-title {
    font-size: 15px !important;
  }
}

.ar-accent {
  color: #e2201a !important;
}

.ar-cards {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
}

/* Base card */
.ar-card {
  background: #ffffff !important;
  border: 1px solid #f0f0f0 !important;
  border-radius: 16px !important;
  padding: 32px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  transition:
    box-shadow 0.3s ease,
    transform 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.ar-card:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.09) !important;
}

.ar-card-icon {
  width: 56px !important;
  height: 56px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: transform 0.3s ease !important;
}

.ar-card:hover .ar-card-icon {
  transform: scale(1.08) !important;
}

.ar-icon--red {
  background: #fff0ef !important;
  color: #e2201a !important;
}

.ar-icon--purple {
  background: #f3f0ff !important;
  color: #7c3aed !important;
}

.ar-icon--blue {
  background: #eff6ff !important;
  color: #2563eb !important;
}

.ar-icon--green {
  background: #f0fdf4 !important;
  color: #16a34a !important;
}

/* Card title */
.ar-card-title {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0f0e15 !important;
  margin: 0 !important;
  line-height: 1.35 !important;
}

/* Card description */
.ar-card-desc {
  font-family: "Lato", sans-serif !important;
  font-size: 13.5px !important;
  line-height: 1.75 !important;
  color: #6b7280 !important;
  margin: 0 !important;
  flex: 1 !important;
}

.hw-layout {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  position: relative !important;
  gap: 0 !important;
}

.hw-hub {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  position: relative !important;
  z-index: 3 !important;
  margin-bottom: 15px !important;
}

.hw-hub-icon {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  background: #0f0e15 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #e2201a !important;
  position: relative !important;
  z-index: 3 !important;
  box-shadow:
    0 0 0 10px rgba(226, 32, 26, 0.08),
    0 0 0 20px rgba(226, 32, 26, 0.04) !important;
}

.hw-hub-label {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #0f0e15 !important;
  text-align: center !important;
  line-height: 1.4 !important;
}

/* ── CONNECTORS ── */
.hw-connectors {
  display: flex !important;
  position: relative !important;
  width: 100% !important;
  height: 80px !important;
  z-index: 1 !important;
  pointer-events: none !important;
  margin-top: 0 !important;
}

/* Horizontal bar across top of connectors */
.hw-connectors::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  /* align with node centers: 
       each node is 25% wide, centers at 12.5%, 37.5%, 62.5%, 87.5% */
  left: 12.3% !important;
  right: 12.1% !important;
  height: 1px !important;
  background: rgba(226, 32, 26, 0.2) !important;
}

/* Each vertical drop line */
.hw-line {
  position: absolute !important;
  top: 0 !important;
  width: 1px !important;
  height: 100% !important;
  background: linear-gradient(180deg,
      rgba(226, 32, 26, 0.35) 0%,
      rgba(226, 32, 26, 0.1) 100%) !important;
}

.hw-line--1 {
  left: 12.15% !important;
}

.hw-line--2 {
  left: 37.3% !important;
}

.hw-line--3 {
  left: 62.6% !important;
}

.hw-line--4 {
  left: 87.78% !important;
}

/* Top dot on each line */
.hw-line::before {
  content: "" !important;
  position: absolute !important;
  top: -3px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #e2201a !important;
  opacity: 0.9 !important;
}

/* ── NODES ── */
.hw-nodes {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  width: 100% !important;
  position: relative !important;
  z-index: 2 !important;
}

.hw-node {
  background: #ffffff !important;
  border: 1px solid #f0f0f0 !important;
  border-radius: 16px !important;
  padding: 28px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  position: relative !important;
  /* clean card shadow matching image */
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06) !important;
  transition:
    box-shadow 0.3s ease,
    transform 0.3s ease,
    border-color 0.3s ease !important;
}

.hw-node:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
  transform: translateY(-4px) !important;
  border-color: rgba(226, 32, 26, 0.15) !important;
}

/* Top red dot connecting to line */
.hw-node::before {
  content: "" !important;
  position: absolute !important;
  top: -4px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #e2201a !important;
  opacity: 0.5 !important;
  z-index: 3 !important;
}

/* ── NODE ICONS ── */
.hw-node-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: transform 0.3s ease !important;
}

.hw-node:hover .hw-node-icon {
  transform: scale(1.08) !important;
}

/* icon colors — light tint matching image */
.hw-node-icon--red {
  background: #fff5f5 !important;
  color: #e2201a !important;
}

.hw-node-icon--green {
  background: #f0fdf4 !important;
  color: #16a34a !important;
}

.hw-node-icon--blue {
  background: #f0f7ff !important;
  color: #2563eb !important;
}

.hw-node-icon--amber {
  background: #fffbf0 !important;
  color: #d97706 !important;
}

/* ── NODE TEXT ── */
.hw-node-title {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0f0e15 !important;
  margin: 0 !important;
  line-height: 1.35 !important;
}

.hw-node-desc {
  font-family: "Lato", sans-serif !important;
  font-size: 13px !important;
  line-height: 1.75 !important;
  color: #9ca3af !important;
  margin: 0 !important;
}

/* ── RESPONSIVE ── */

@media (max-width: 1024px) {
  .hw-nodes {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .hw-connectors {
    display: none !important;
  }

  .hw-hub {
    margin-bottom: 40px !important;
  }
}

@media (max-width: 768px) {
    .ar-cards {
    grid-template-columns: repeat(2, 1fr) !important;
    }
  .hw-section {
    padding: 60px 0 !important;
  }

  .hw-container {
    padding: 0 24px !important;
  }

  .hw-nodes {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  .hw-node {
    padding: 22px 16px !important;
  }

  .hw-node::before {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .hw-nodes {
    grid-template-columns: 1fr !important;
  }
  .ar-cards {
    grid-template-columns: repeat(1, 1fr) !important;
    }
}

.sa-accent {
  color: #e2201a !important;
  display: block !important;
}

/* ── CARDS GRID ── */
.sa-cards {
  display: grid !important;
  grid-template-columns: 1.2fr 0.9fr 0.9fr !important;
  gap: 20px !important;
  align-items: stretch !important;
}

/* ── BASE CARD ── */
.sa-card {
  position: relative !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  padding: 40px 18px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 420px !important;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease !important;
}

.sa-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
}

/* ── CARD VARIANTS ── */
.sa-card--dark {
  background: #0f0e15 !important;
}

.sa-card--light {
  background: #ffffff !important;
  border: 1px solid #f0f0f0 !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06) !important;
}

.sa-card--accent {
  background: #e2201a !important;
}

/* ── CARD INNER (text block) ── */
.sa-card-inner {
  position: relative !important;
  z-index: 3 !important;
  padding-bottom: 40px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

/* ── TAG / LABEL ── */
.sa-card-tag {
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  padding: 6px 16px !important;
  background: rgba(226, 32, 26, 0.15) !important;
  color: #e2201a !important;
  border-radius: 50px !important;
  font-family: "Lato", sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}

.sa-card-tag--dark {
  background: rgba(15, 14, 21, 0.08) !important;
  color: #0f0e15 !important;
}

.sa-card-tag--white {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

/* ── CARD TITLE ── */
.sa-card-title {
  font-family: "Fahkwang", sans-serif !important;
  font-size: clamp(20px, 2vw, 36px) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}

.sa-card-title--dark {
  color: #0f0e15 !important;
}

.sa-card-title--white {
  color: #ffffff !important;
}

/* ── CARD DESC ── */
.sa-card-desc {
  font-family: "Lato", sans-serif !important;
  font-size: 18px !important;
  line-height: 1.75 !important;
  color: rgba(255, 255, 255, 0.6) !important;
  margin: 0 !important;
}

.sa-card-desc--dark {
  color: #6b7280 !important;
}

.sa-card-desc--white {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* ── CARD LINK ── */
.sa-card-link {
  font-family: "Lato", sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #e2201a !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 4px !important;
  transition: gap 0.2s ease !important;
}

.sa-card-link:hover {
  gap: 10px !important;
}

.sa-card-link--dark {
  color: #0f0e15 !important;
}

.sa-card-link--white {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* ── FLOATING BADGE ── */
.sa-badge {
  position: absolute !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: #ffffff !important;
  border-radius: 14px !important;
  padding: 12px 16px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14) !important;
  z-index: 3 !important;
  white-space: nowrap !important;
}

.sa-badge--1 {
  bottom: 168px !important;
  right: 24px !important;
}

.sa-badge--2 {
  bottom: 152px !important;
  right: 20px !important;
}

.sa-badge--3 {
  bottom: 152px !important;
  right: 20px !important;
}

/* Badge icon */
.sa-badge-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: #fff0ef !important;
  color: #e2201a !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.sa-badge-icon--dark {
  background: #f3f4f6 !important;
  color: #0f0e15 !important;
}

.sa-badge-icon--white {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

/* Badge on accent card */
.sa-card--accent .sa-badge {
  background: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(8px) !important;
  box-shadow: none !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Badge text */
.sa-badge-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.sa-badge-label {
  font-family: "Lato", sans-serif !important;
  font-size: 10px !important;
  color: #9ca3af !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
}

.sa-badge-label--dark {
  color: #6b7280 !important;
}

.sa-badge-label--white {
  color: rgba(255, 255, 255, 0.65) !important;
}

.sa-badge-value {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #0f0e15 !important;
}

.sa-badge-value--dark {
  color: #0f0e15 !important;
}

.sa-badge-value--white {
  color: #ffffff !important;
}

/* ── DECORATIVE IMAGE ── */
.sa-card-img {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1 !important;
  height: 55% !important;
  overflow: hidden !important;
}

.sa-card-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

.sa-card-img::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 60% !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

.sa-card--dark .sa-card-img::before {
  background: linear-gradient(180deg,
      #0f0e15 0%,
      rgba(15, 14, 21, 0) 100%) !important;
}

.sa-card--light .sa-card-img::before {
  background: linear-gradient(180deg,
      #ffffff 0%,
      rgba(255, 255, 255, 0) 100%) !important;
}

.sa-card--accent .sa-card-img::before {
  background: linear-gradient(180deg,
      #e2201a 0%,
      rgba(226, 32, 26, 0) 100%) !important;
}

.sa-card-img::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.15) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.sa-card-img--1 {
  left: 24px !important;
  right: 24px !important;
}

.sa-card-img--2 {
  left: 20px !important;
  right: 20px !important;
}

.sa-card-img--3 {
  left: 20px !important;
  right: 20px !important;
}

.sa-card-img svg {
  width: 100% !important;
  height: auto !important;
}

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .sa-cards {
    grid-template-columns: 1fr 1fr !important;
  }

  .sa-card--dark {
    grid-column: span 2 !important;
  }
}

@media (max-width: 768px) {
  .sa-section {
    padding: 60px 0 !important;
  }

  .sa-container {
    padding: 0 24px !important;
  }

  .sa-cards {
    grid-template-columns: 1fr !important;
  }

  .sa-card--dark {
    grid-column: span 1 !important;
  }

  .sa-card {
    padding: 32px 28px 180px !important;
    min-height: 380px !important;
  }
}

@media (max-width: 480px) {
  .sa-container {
    padding: 0 16px !important;
  }

  .sa-card {
    padding: 28px 20px 160px !important;
    border-radius: 18px !important;
  }

  .sa-badge {
    padding: 10px 12px !important;
  }
}

/* Timeline wrapper */
.tr-timeline {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

/* Vertical line */
.tr-timeline::before {
  content: "" !important;
  position: absolute !important;
  top: 12px !important;
  bottom: 90px !important;
  left: 11px !important;
  width: 2px !important;
  background: linear-gradient(180deg,
      #e2201a 0%,
      rgba(226, 32, 26, 0.15) 100%) !important;
  z-index: 0 !important;
}

/* Single item */
.tr-item {
  position: relative !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 0 !important;
  padding-bottom: 30px !important;
}

.tr-item--last {
  padding-bottom: 0 !important;
}

/* Dot on timeline */
.tr-dot {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 3px solid #e2201a !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 1 !important;
  margin-top: 10px !important;
  transition: background 0.3s ease !important;
}

.tr-item:hover .tr-dot {
  background: #e2201a !important;
}

/* Content row */
.tr-content {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  margin-left: 28px !important;
  padding: 20px 28px !important;
  background: #f9f9f9 !important;
  border-radius: 14px !important;
  flex: 1 !important;
  border: 1px solid transparent !important;
  transition:
    border-color 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease !important;
}

.tr-item:hover .tr-content {
  background: #ffffff !important;
  border-color: rgba(226, 32, 26, 0.12) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07) !important;
}

/* Icon box */
.tr-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  background: #fff0ef !important;
  color: #e2201a !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: background 0.3s ease !important;
}

.tr-item:hover .tr-icon {
  background: #e2201a !important;
  color: #ffffff !important;
}

.tr-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.tr-title {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #373643 !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

.tr-desc {
  font-family: "Lato", sans-serif !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
  color: #6b7280 !important;
  margin: 0 !important;
}

.rtl .tr-timeline::before {

    left: auto !important;

    right: 11px !important;

}

.rtl .tr-content {
    margin-left: 0 !important;
    margin-right: 28px !important;
    text-align: right !important;

}

.rtl .tr-text {

    text-align: right !important;

    align-items: flex-start !important;

}

.haw-steps {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 !important;
  align-items: start !important;
}

.haw-steps-3 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0 !important;
  align-items: start !important;
}

.haw-steps-6 {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 0 !important;
  align-items: start !important;
}

/* Single step */
.haw-step {
  padding: 0 24px 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.rtl .haw-step {
    padding: 0 !important;
}

.haw-step--last {
  padding-right: 0 !important;
}

/* Top row: icon + dashed connector */
.haw-step-top {
  display: flex !important;
  align-items: center !important;
  margin-bottom: 16px !important;
}

/* Icon circle */
.haw-step-icon {
  width: 70px !important;
  height: 70px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 1.5px solid #e5e7eb !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #0f0e15 !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 1 !important;
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease,
    box-shadow 0.3s ease !important;
}

.haw-step:hover .haw-step-icon {
  background: #e2201a !important;
  border-color: #e2201a !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(226, 32, 26, 0.28) !important;
}

/* Dashed connector line */
.haw-connector {
  flex: 1 !important;
  height: 1px !important;
  border-top: 2px dashed #d1d5db !important;
  margin-left: 12px !important;
}

/* Step number label */
.haw-step-num {
  font-family: "Lato", sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #e2201a !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
}

/* Step title */
.haw-step-title {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  color: #373643 !important;
  margin: 0 !important;
  line-height: 1.35 !important;
}

/* Step description */
.haw-step-desc {
  font-family: "Lato", sans-serif !important;
  font-size: 17.5px !important;
  line-height: 1.75 !important;
  color: #6b7280 !important;
  margin: 0 !important;
}

.cta-blob {
  position: absolute !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.cta-blob--1 {
  width: 500px !important;
  height: 500px !important;
  top: -200px !important;
  left: -100px !important;
  background: radial-gradient(circle,
      rgba(226, 32, 26, 0.18) 0%,
      transparent 70%) !important;
}

.cta-blob--2 {
  width: 400px !important;
  height: 400px !important;
  bottom: -150px !important;
  right: -80px !important;
  background: radial-gradient(circle,
      rgba(226, 32, 26, 0.12) 0%,
      transparent 70%) !important;
}

.cta-blob--3 {
  width: 300px !important;
  height: 300px !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: radial-gradient(circle,
      rgba(226, 32, 26, 0.06) 0%,
      transparent 70%) !important;
}

/* Inner content */
.cta-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 24px !important;
}

/* Eyebrow label */
.cta-eyebrow {
  font-family: "Lato", sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #e2201a !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  margin: 0 !important;
}

/* Main heading */
.cta-heading {
  font-family: "Fahkwang", sans-serif !important;
  font-size: clamp(28px, 4vw, 56px) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
  max-width: 80% !important;
}

.cta-accent {
  color: #e2201a !important;
}

/* CTA button */
.cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 16px 36px !important;
  background: #e2201a !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 50px !important;
  font-family: "Fahkwang", sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition:
    background 0.3s ease,
    transform 0.2s ease,
    box-shadow 0.3s ease !important;
  margin-top: 8px !important;
}

.cta-btn:hover {
  background: #c41916 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 32px rgba(226, 32, 26, 0.4) !important;
}

.cta-btn svg {
  transition: transform 0.2s ease !important;
}

.cta-btn:hover svg {
  transform: translateX(4px) !important;
}

/* ── RESPONSIVE ── */

/* Section 1 */
@media (max-width: 768px) {
    .haw-steps-3 {
      grid-template-columns: repeat(1, 1fr) !important;
      gap: 0 !important;
      align-items: center !important;
    }

  .tr-section {
    padding: 60px 0 !important;
  }

  .tr-container {
    padding: 0 24px !important;
  }

  .tr-content {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 18px 20px !important;
  }
}

@media (max-width: 480px) {
  .tr-container {
    padding: 0 16px !important;
  }

  .tr-content {
    margin-left: 20px !important;
  }
}

/* Section 2 */
@media (max-width: 1024px) {
  .haw-steps {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 48px 32px !important;
  }
  
  .haw-steps-6 {
      grid-template-columns: repeat(2, 1fr) !important;
      row-gap: 35px !important;
      align-items: center !important;
    }
  
  .haw-steps-6 .haw-step {
      gap: 0 !important;
  }

  .haw-step:nth-child(2) .haw-connector,
  .haw-step:nth-child(4) .haw-connector {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .haw-section {
    padding: 60px 0 !important;
  }
  
  .haw-steps-6 .haw-step {
      gap: 12px !important;
      align-items: center !important;
  }

  .haw-container {
    padding: 0 24px !important;
  }

  .haw-steps {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  .haw-connector {
    display: none !important;
  }

  .haw-step {
    flex-direction: row !important;
    gap: 20px !important;
    align-items: flex-start !important;
    padding: 0 !important;
  }

  .haw-step-top {
    flex-direction: column !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
  }

  .haw-step-icon {
    width: 48px !important;
    height: 48px !important;
  }

  /* text block */
  .haw-step>.haw-step-num,
  .haw-step>.haw-step-title,
  .haw-step>.haw-step-desc {
    margin-left: 0 !important;
    text-align: center;
  }
}

/* Section 3 */
@media (max-width: 768px) {
  .cta-section {
    padding: 72px 0 !important;
  }

  .cta-container {
    padding: 0 24px !important;
  }
}

@media (max-width: 480px) {
  .cta-container {
    padding: 0 16px !important;
  }

  .cta-btn {
    padding: 14px 28px !important;
    font-size: 14px !important;
    width: 100% !important;
    justify-content: center !important;
  }
  
  .haw-step {
    flex-direction: column !important;
    gap: 5px !important;
    align-items: center !important;
    padding: 10px !important;
  }
  
  .haw-step-desc {
      text-align: center !important;
  }
  
  .haw-steps-6 {
      grid-template-columns: repeat(1, 1fr) !important;
    }
}

.wca-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* ── LEFT ── */
.wca-left {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.wca-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  color: #e2201a;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.wca-eyebrow::before {
  content: "";
  width: 20px;
  height: 2px;
  background: #e2201a;
  flex-shrink: 0;
}

.wca-heading {
  font-family: "Fahkwang", sans-serif !important;
  font-size: clamp(26px, 3vw, 40px) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
}

.wca-heading em {
  font-style: normal !important;
  color: #e2201a !important;
}

.wca-body {
  font-size: 15px !important;
  line-height: 1.85 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  margin: 0 !important;
  max-width: 80% !important;
}

/* Checklist */
.wca-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding-top: 28px;
}

.wca-list-item {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
}

.wca-list-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e2201a;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(226, 32, 26, 0.18);
}

/* CTA button */
.wca-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  background: #e2201a;
  color: #ffffff;
  border-radius: 50px;
  font-family: "Fahkwang", sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  width: fit-content;
  transition:
    background 0.3s ease,
    transform 0.2s ease,
    box-shadow 0.3s ease;
}

.wca-btn:hover {
  background: #c41916;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(226, 32, 26, 0.35);
}

.wca-btn svg {
  transition: transform 0.2s ease;
}

.wca-btn:hover svg {
  transform: translateX(4px);
}

/* ── RIGHT CARD ── */
.wca-right {
  position: relative;
}

.wca-right-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 36px;
  position: relative;
  overflow: hidden;
}

/* Subtle red glow inside card */
.wca-right-card::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle,
      rgba(226, 32, 26, 0.12) 0%,
      transparent 70%);
  pointer-events: none;
}

/* Stats row */
.wca-stats {
  display: flex;
  align-items: center;
  gap: 24px;
}

.wca-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.wca-stat-num {
  font-family: "Fahkwang", sans-serif;
  font-size: 36px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
  letter-spacing: -0.03em;
}

.wca-stat-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.4;
}

.wca-stat-div {
  width: 1px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

/* Tags cloud */
.wca-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wca-tag {
  padding: 7px 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
  transition:
    border-color 0.25s ease,
    color 0.25s ease;
}

.wca-tag:hover {
  border-color: rgba(226, 32, 26, 0.4);
  color: rgba(255, 255, 255, 0.9);
}

.wca-tag--accent {
  background: rgba(226, 32, 26, 0.1);
  border-color: rgba(226, 32, 26, 0.2);
  color: rgba(255, 120, 100, 0.9);
}

/* Quote */
.wca-quote {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.wca-quote-line {
  width: 3px;
  min-height: 100%;
  background: #e2201a;
  border-radius: 2px;
  flex-shrink: 0;
  align-self: stretch;
}

.wca-quote-text {
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
  font-style: italic;
}

/* ══════════════════════════════════════
   SECTION 2 — WHAT WILL CHANGE
══════════════════════════════════════ */
.wc-header {
  margin-bottom: 64px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  color: #e2201a;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.wc-eyebrow::before {
  content: "";
  width: 20px;
  height: 2px;
  background: #e2201a;
  flex-shrink: 0;
}

.wc-heading {
  font-family: "Fahkwang", sans-serif;
  font-size: clamp(26px, 3.5vw, 42px);
  font-weight: 700;
  color: #0f0e15;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 600px;
}

.wc-accent {
  color: #e2201a;
}

/* 3-col grid, last item spans full width */
.wc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: #f0f0f0;
  border-radius: 0;
  overflow: hidden;
}

/* Single item */
.wc-item-2 {
  position: relative;
  background: #ffffff;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  transition: background 0.3s ease;
}

.wc-item-2:hover {
  background: #fafafa;
  transform: translateX(12px) !important;
}

.wc-item--wide-xs {
  grid-column: span 2;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  border-top: 2px solid #f0f0f0;
  padding: 28px 32px;
}

.wc-item--wide-xs .wc-item-body {
  display: flex;
  gap: 24px;
  align-items: self-start;
  flex: 1;
}

.wc-item--wide-xs .wc-item-desc {
  margin: 0;
  max-width: 480px;
}

.wc-item--wide-xs .wc-item-num {
  margin-left: auto;
  margin-top: 0;
}

/* Last item spans full row */
.wc-item--wide {
  grid-column: span 3;
  flex-direction: row;
  align-items: center;
  gap: 24px;
  border-top: 2px solid #f0f0f0;
  background: #fafafa;
  padding: 28px 32px;
}

.wc-item--wide .wc-item-body {
  display: flex;
  gap: 24px;
  align-items: self-start;
  flex: 1;
}

.wc-item--wide .wc-item-desc {
  margin: 0;
  max-width: 480px;
}

.wc-item--wide .wc-item-num {
  margin-left: auto;
  margin-top: 0;
}

/* Icon box */
.wc-item-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #fff5f5;
  color: #e2201a;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    background 0.3s ease,
    color 0.3s ease;
}

.wc-item-2:hover .wc-item-icon {
  background: #e2201a;
  color: #ffffff;
}

.wc-item-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wc-item-title {
  font-family: "Fahkwang", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #0f0e15;
  margin: 0;
  line-height: 1.3;
}

.wc-item-desc {
  font-size: 13px;
  line-height: 1.75;
  color: #9ca3af;
  margin: 0 0 0;
}

/* Ghost number */
.wc-item-num {
  font-family: "Fahkwang", sans-serif;
  font-size: 48px;
  font-weight: 800;
  color: rgba(0, 0, 0, 0.04);
  line-height: 1;
  letter-spacing: -0.04em;
  align-self: flex-end;
  margin-top: auto;
  pointer-events: none;
  transition: color 0.3s ease;
}

.wc-item-2:hover .wc-item-num {
  color: rgba(226, 32, 26, 0.06);
}

/* ── RESPONSIVE ── */

@media (max-width: 1024px) {
  .wca-container {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .wca-right-card {
    padding: 32px;
  }

  .wc-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .wc-item--wide {
    grid-column: span 2;
  }
}

@media (max-width: 768px) {

  .wca-section,
  .wc-section {
    padding: 72px 0;
  }

  .wca-container,
  .wc-container {
    padding: 0 24px;
  }

  .wca-stats {
    gap: 16px;
  }

  .wca-stat-num {
    font-size: 28px;
  }

  .wc-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2px;
  }

  .wc-item--wide {
    grid-column: span 2;
    flex-direction: column;
    align-items: flex-start;
  }

  .wc-item--wide .wc-item-body {
    flex-direction: column;
    gap: 6px;
  }
}

@media (max-width: 480px) {

  .wca-container,
  .wc-container {
    padding: 0 16px;
  }

  .wca-right-card {
    padding: 24px;
  }

  .wca-stats {
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
  }

  .wca-stat-div {
    width: 40px;
    height: 1px;
  }

  .wc-item {
    padding: 28px 20px;
  }

  .wc-item-num {
    font-size: 36px;
  }
}

.sc-cta-section {
  position: relative !important;
  background: #f04540 !important;
  /* lighter than #E2201A */
  border-radius: 24px !important;
  overflow: hidden !important;
  margin: 0 40px !important;
  padding: 52px 36px !important;
  font-family: "Lato", sans-serif !important;
}

/* ── RINGS WRAPPER ── */
.sc-cta-rings {
  position: absolute !important;
  top: 50% !important;
  right: -25% !important;
  transform: translateY(-50%) !important;
  width: 960px !important;
  height: 960px !important;
  pointer-events: none !important;
}

/* ── BASE RING ── */
.sc-cta-ring {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 50% !important;
  border: none !important;
  /* Radial shadow makes each ring look raised above the one beneath it:
     the glow spreads outward onto the next ring's surface */
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 0 18px 6px rgba(0, 0, 0, 0.16),
    inset 0 1px 4px rgba(255, 255, 255, 0.25) !important;
}

/* 12 rings — innermost brightest, outermost near invisible */
.sc-cta-ring--1 {
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.40) !important;
}

.sc-cta-ring--2 {
  width: 160px;
  height: 160px;
  background: rgba(255, 255, 255, 0.32) !important;
}

.sc-cta-ring--3 {
  width: 240px;
  height: 240px;
  background: rgba(255, 255, 255, 0.24) !important;
}

.sc-cta-ring--4 {
  width: 320px;
  height: 320px;
  background: rgba(255, 255, 255, 0.17) !important;
}

.sc-cta-ring--5 {
  width: 400px;
  height: 400px;
  background: rgba(255, 255, 255, 0.12) !important;
}

.sc-cta-ring--6 {
  width: 480px;
  height: 480px;
  background: rgba(255, 255, 255, 0.08) !important;
}

.sc-cta-ring--7 {
  width: 560px;
  height: 560px;
  background: rgba(255, 255, 255, 0.05) !important;
}

.sc-cta-ring--8 {
  width: 640px;
  height: 640px;
  background: rgba(255, 255, 255, 0.03) !important;
}

.sc-cta-ring--9 {
  width: 720px;
  height: 720px;
  background: rgba(255, 255, 255, 0.02) !important;
}

.sc-cta-ring--10 {
  width: 800px;
  height: 800px;
  background: rgba(255, 255, 255, 0.015) !important;
}

.sc-cta-ring--11 {
  width: 880px;
  height: 880px;
  background: rgba(255, 255, 255, 0.01) !important;
}

.sc-cta-ring--12 {
  width: 960px;
  height: 960px;
  background: rgba(255, 255, 255, 0.005) !important;
}

/* ── CONTENT ── */
.sc-cta-container {
  position: relative !important;
  z-index: 2 !important;
  max-width: 50% !important;
}

.sc-cta-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

.sc-cta-heading {
  font-family: "Fahkwang", sans-serif !important;
  font-size: clamp(28px, 4vw, 40px) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
}

.sc-cta-desc {
  font-size: 18px !important;
  line-height: 1.75 !important;
  color: rgba(255, 255, 255, 0.8) !important;
  margin: 0 !important;
  max-width: 460px !important;
}

.sc-cta-btns {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  margin-top: 8px !important;
}

@media (max-width: 1240px) {
  .sc-cta-rings {
    right: -32% !important;
  }
}


@media (max-width: 1025px) {
  .sc-cta-rings {
    right: -51% !important;
  }

  .rtl .sc-cta-rings {
    left: -51% !important;
    right: auto !important;
  }
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .sc-cta-section {
    margin: 0 24px !important;
    padding: 52px 36px !important;
    border-radius: 20px !important;
  }

  .sc-cta-rings {
    right: -485px !important;
    opacity: 0.7 !important;
  }

  .rtl .sc-cta-rings {
    left: -485px !important;
    right: auto !important;
  }
  
  .sc-cta-ring--9 {
    display: none;
   }
    
    .sc-cta-ring--10 {
    display: none;
    }
    
    .sc-cta-ring--11 {
     display: none;
    }
    
    .sc-cta-ring--12 {
     display: none;
    }

  .sc-cta-container {
    max-width: 53% !important;
  }
}

@media (max-width: 480px) {
  .sc-cta-section {
    margin: 0 16px !important;
    padding: 40px 24px !important;
    border-radius: 16px !important;
  }
  
  .sc-cta-rings {
    display: none;
  }

  .rtl .sc-cta-rings {
    display: none;
  }

  .sc-cta-container {
    max-width: 100% !important;
  }

  .sc-cta-btns {
    flex-direction: column !important;
    align-items: stretch !important;
  }
}

.sec-card {
  background: #ffffff !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  border: 1px solid #f0f0f0 !important;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.05) !important;
  display: flex !important;
  flex-direction: column !important;
  transition:
    box-shadow 0.3s ease,
    transform 0.3s ease !important;
  height: 100%;
}

.sec-card:hover {
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.1) !important;
  transform: translateY(-3px) !important;
}

/* ── CARD HEADER ── */
.sec-card-header {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 24px 28px !important;
  border-bottom: 1px solid #f5f5f5 !important;
}

/* Icon circle */
.sec-card-icon {
  width: 46px !important;
  height: 46px !important;
  border-radius: 12px !important;
  background: #fff0ef !important;
  color: #e2201a !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition:
    background 0.3s ease,
    color 0.3s ease !important;
}

.sec-card:hover .sec-card-icon {
  background: #e2201a !important;
  color: #ffffff !important;
}

.sec-card-title {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #0f0e15 !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

/* ── CARD BODY ── */
.sec-card-body {
  padding: 8px 28px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  gap: 10px !important;
  justify-content: space-around !important;
}

/* Each row: label + text */
.sec-card-row {
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  background-color: #f4f4f6 !important;
  border-radius: 12px !important;
}

/* Thin divider between rows */
.sec-card-divider {
  height: 1px !important;
  background: #f5f5f5 !important;
}

/* ── LABELS ── */
.sec-card-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  width: fit-content !important;
}

.sec-label--challenge {
  color: #dc6803 !important;
}

.sec-label--solution {
  color: #1a6fb3 !important;
}

.sec-label--result {
  color: #16a34a !important;
}

/* ── TEXT ── */
.sec-card-text {
  font-size: 13.5px !important;
  line-height: 1.75 !important;
  color: #6b7280 !important;
  margin: 0 !important;
}

@media (max-width: 480px) {
  .sec-card-header {
    padding: 20px 20px !important;
  }

  .sec-card-body {
    padding: 4px 20px 20px !important;
  }

  .sec-card-title {
    font-size: 15px !important;
  }
}

.bc-section {
  background: #ffffff !important;
  padding: 64px 0 !important;
  font-family: "Lato", sans-serif !important;
}

.bc-container {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 80px !important;
  align-items: stretch !important;
}

/* ══════════════════════════════════════
   LEFT
══════════════════════════════════════ */

.bc-left {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  height: 100% !important;
}

.bc-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #e2201a !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
}

.bc-eyebrow::before {
  content: "" !important;
  width: 20px !important;
  height: 2px !important;
  background: #e2201a !important;
  flex-shrink: 0 !important;
}

.bc-heading {
  font-family: "Fahkwang", sans-serif !important;
  font-size: clamp(22px, 2.8vw, 40px) !important;
  font-weight: 700 !important;
  color: #373643 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
}

.bc-accent {
  color: #e2201a !important;
}

.bc-desc {
  font-size: 18px !important;
  line-height: 1.75 !important;
  color: #6b7280 !important;
  margin: 0 !important;
}

/* List */
.bc-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  border: 1px solid #f0f0f0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

.bc-list-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 20px !important;
  border-bottom: 1px solid #f5f5f5 !important;
  transition: background 0.2s ease !important;
  cursor: default !important;
}

.bc-list-item:last-child {
  border-bottom: none !important;
}

.bc-list-item:hover {
  background: #fafafa !important;
}

.bc-item--active {
  background: #fff8f8 !important;
}

.bc-item--active .bc-item-dot {
  background: #e2201a !important;
  box-shadow: 0 0 0 3px rgba(226, 32, 26, 0.15) !important;
}

.bc-item-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #d1d5db !important;
  flex-shrink: 0 !important;
  transition: background 0.2s ease !important;
}

.bc-list-item:hover .bc-item-dot {
  background: #e2201a !important;
}

.bc-item-name {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0f0e15 !important;
  flex: 1 !important;
}

.bc-item-tag {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #9ca3af !important;
  background: #f5f5f5 !important;
  padding: 3px 10px !important;
  border-radius: 50px !important;
  letter-spacing: 0.3px !important;
}

.bc-item--active .bc-item-tag {
  background: #fff0ef !important;
  color: #e2201a !important;
}

/* ══════════════════════════════════════
   RIGHT
══════════════════════════════════════ */

.bc-right {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  height: 100% !important;
}

/* Main barcode card */
.bc-barcode-card {
  background: #f9f9f9 !important;
  border: 1px solid #eeeeee !important;
  border-radius: 20px !important;
  padding: 36px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  position: relative !important;
  overflow: hidden !important;
  flex: 1 !important;
  justify-content: center !important;
}

.bc-barcode-label {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #e2201a !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
}

/* Barcode SVG wrapper */
.bc-barcode-visual {
  background: #ffffff !important;
  border-radius: 10px !important;
  padding: 20px 16px !important;
  border: 1px solid #eeeeee !important;
  overflow: hidden !important;
  transition: opacity 0.25s ease !important;
  min-height: 100px !important;
  text-align: center !important;
}

.bc-barcode-visual.bc-fade {
  opacity: 0 !important;
}

/* Active list item cursor */
.bc-list-item {
  cursor: pointer !important;
}

.bc-barcode-code {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #0f0e15 !important;
  margin: 0 !important;
}

.bc-barcode-sub {
  font-size: 14px !important;
  color: #9ca3af !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* Chips grid */
.bc-chips {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
}

.bc-chip {
  background: #f5f5f5 !important;
  border: 1px solid #eeeeee !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #4b5563 !important;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease !important;
  cursor: default !important;
}

.bc-chip:hover {
  background: #fff0ef !important;
  border-color: rgba(226, 32, 26, 0.2) !important;
  color: #e2201a !important;
}

.bc-chip--accent {
  background: #e2201a !important;
  border-color: #e2201a !important;
  color: #ffffff !important;
}

.bc-chip--accent:hover {
  background: #c41916 !important;
  border-color: #c41916 !important;
  color: #ffffff !important;
}

.bc-chip-icon {
  font-size: 16px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

/* ── RESPONSIVE ── */

@media (max-width: 1024px) {
  .bc-container {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }

  .bc-chips {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .bc-section {
    padding: 60px 0 !important;
  }

  .bc-container {
    padding: 0 24px !important;
  }

  .bc-chips {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .bc-barcode-card {
    padding: 24px !important;
  }
}

@media (max-width: 480px) {
  .bc-container {
    padding: 0 16px !important;
  }

  .bc-chips {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .bc-chip {
    padding: 10px 12px !important;
    font-size: 12px !important;
  }
}

.ra-section {
  background: #0f0e15 !important;
  padding: 0 0 !important;
  font-family: "Lato", sans-serif !important;
}

.ra-container {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 260px 1fr !important;
  gap: 80px !important;
  align-items: center !important;
}

/* Left heading */
.ra-left {
  position: sticky !important;
  top: 100px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

.ra-eyebrow {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #e2201a !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
}

.ra-heading {
  font-family: "Fahkwang", sans-serif !important;
  font-size: clamp(22px, 2.5vw, 40px) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.3 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
}

.ra-accent {
  color: #e2201a !important;
}

.ra-heading-line {
  width: 60px !important;
  height: 3px !important;
  background: #e2201a !important;
  border-radius: 2px !important;
}

/* Right grid — 3 col */
.ra-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

.ra-grid-2 {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

.ra-item {
  background: #0f0e15 !important;
  padding: 32px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  transition: background 0.3s ease !important;
}

.ra-item:hover {
  background: #1a1924 !important;
}

.ra-item-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  background: rgba(226, 32, 26, 0.12) !important;
  color: #e2201a !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: background 0.3s ease !important;
}

.ra-item:hover .ra-item-icon {
  background: #e2201a !important;
  color: #ffffff !important;
}

.ra-item-title {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 !important;
  line-height: 1.35 !important;
}

.ra-item-desc {
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: rgba(255, 255, 255, 0.45) !important;
  margin: 0 !important;
}

/* ══════════════════════════════════════
   SECTION 2 — COMPARISON TABLE
══════════════════════════════════════ */

.ct-section {
  background: #f9f9f9 !important;
  padding: 64px 0 !important;
  font-family: "Lato", sans-serif !important;
}

.ct-container {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 48px !important;
}

.ct-header {
  text-align: center !important;
  margin-bottom: 45px !important;
}

.ct-heading {
  font-family: "Fahkwang", sans-serif !important;
  font-size: clamp(22px, 3vw, 40px) !important;
  font-weight: 700 !important;
  color: #0f0e15 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 14px !important;
}

.ct-accent {
  color: #e2201a !important;
}

.ct-subtext {
  font-size: 20px !important;
  color: #6b7280 !important;
  margin: 0 auto !important;
  max-width: 900px !important;
  line-height: 1.7 !important;
}

/* Table */
.ct-table {
  background: #ffffff !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.07) !important;
  border: 1px solid #f0f0f0 !important;
}

/* Header row */
.ct-row {
  display: grid !important;
  grid-template-columns: 1fr 1.4fr 1.4fr !important;
  border-bottom: 1px solid #f5f5f5 !important;
}

.ct-row-2 {
    display: grid !important;
  grid-template-columns: 1fr 1.5fr !important;
  border-bottom: 1px solid #f5f5f5 !important;
}

.ct-row--last {
  border-bottom: none !important;
}

.ct-row--header {
  background: #fafafa !important;
  border-bottom: 2px solid #f0f0f0 !important;
}

.ct-cell {
  padding: 18px 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

.ct-cell--feature {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #9ca3af !important;
  border-right: 1px solid #f5f5f5 !important;
}

.ct-cell--traditional {
  color: #6b7280 !important;
  border-right: 1px solid #f5f5f5 !important;
  font-size: 13.5px !important;
}

.ct-cell--rfid {
  color: #0f0e15 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  background: rgba(226, 32, 26, 0.02) !important;
}

/* Column headers */
.ct-col-label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: "Fahkwang", sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0f0e15 !important;
}

.ct-col-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.ct-col-icon--gray {
  background: #f3f4f6 !important;
  color: #6b7280 !important;
}

.ct-col-icon--red {
  background: #fff0ef !important;
  color: #e2201a !important;
}

.ct-cell--rfid .ct-col-label {
  flex: 1 !important;
}

.ct-recommended {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  background: #e2201a !important;
  padding: 3px 10px !important;
  border-radius: 50px !important;
  letter-spacing: 0.3px !important;
  margin-left: auto !important;
}

/* Row icons */
.ct-icon {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}

.ct-icon--yes {
  background: #dcfce7 !important;
  color: #16a34a !important;
}

.ct-icon--no {
  background: #fee2e2 !important;
  color: #dc2626 !important;
}

/* ══════════════════════════════════════
   SECTION 3 — HOW RFID TRANSFORMS
══════════════════════════════════════ */

.rt-section {
  background: #ffffff !important;
  padding: 0 !important;
  font-family: "Lato", sans-serif !important;
}

.rt-container {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 48px !important;
}

.rt-header {
  text-align: center !important;
  margin-bottom: 30px !important;
}

.rt-heading {
  font-family: "Fahkwang", sans-serif !important;
  font-size: clamp(22px, 3vw, 40px) !important;
  font-weight: 700 !important;
  color: #0f0e15 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.02em !important;
  margin: 0 auto !important;
}

.rt-accent {
  color: #e2201a !important;
}

/* Layout */
.rt-layout {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 35px !important;
}

/* Top row — 2 cards */
.rt-row--top {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 20px !important;
  width: 100% !important;
}

/* Center hub */
.rt-hub {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.rt-hub-inner {
  width: 90px !important;
  height: 90px !important;
  border-radius: 50% !important;
  background: #0f0e15 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  color: #e2201a !important;
  box-shadow:
    0 0 0 12px rgba(226, 32, 26, 0.08),
    0 0 0 24px rgba(226, 32, 26, 0.04) !important;
}

.rt-hub-label {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  letter-spacing: 1px !important;
}

/* Bottom row — 3 cards */
.rt-row--bottom {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  width: 100% !important;
}

/* Base card */
.rt-card {
  background: #f9f9f9 !important;
  border: 1px solid #f0f0f0 !important;
  border-radius: 16px !important;
  padding: 28px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  position: relative !important;
  transition:
    box-shadow 0.3s ease,
    transform 0.3s ease,
    background 0.3s ease !important;
}

.rt-card:hover {
  background: #ffffff !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-3px) !important;
}

.rt-card-num {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #e2201a !important;
  letter-spacing: 0.5px !important;
}

/* Icon */
.rt-card-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: transform 0.3s ease !important;
}

.rt-card:hover .rt-card-icon {
  transform: scale(1.08) !important;
}

.rt-icon--red {
  background: #fff0ef !important;
  color: #e2201a !important;
}

.rt-icon--blue {
  background: #eff6ff !important;
  color: #2563eb !important;
}

.rt-icon--green {
  background: #f0fdf4 !important;
  color: #16a34a !important;
}

.rt-icon--amber {
  background: #fffbeb !important;
  color: #d97706 !important;
}

.rt-icon--purple {
  background: #f5f3ff !important;
  color: #7c3aed !important;
}

.rt-card-title {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #0f0e15 !important;
  margin: 0 !important;
  line-height: 1.35 !important;
}

.rt-card-desc {
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: #6b7280 !important;
  margin: 0 !important;
}

/* ── RESPONSIVE ── */

@media (max-width: 1024px) {
  .ra-container {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }

  .ra-left {
    position: static !important;
  }

  .ra-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .ct-container,
  .rt-container {
    padding: 0 32px !important;
  }

  .rt-row--top {
    width: 80% !important;
  }
}

@media (max-width: 768px) {
    .ct-header {
        margin-bottom: 15px !important;
    }

  .ra-section,
  .ct-section,
  .rt-section {
    padding: 60px 0 !important;
  }

  .ra-container,
  .ct-container,
  .rt-container {
    padding: 0 24px !important;
  }

  .ra-grid {
    grid-template-columns: 1fr !important;
  }

  /* comparison table — stack */
  .ct-row {
    grid-template-columns: 1fr !important;
  }
  
  .ct-row-2 {
    grid-template-columns: 1fr !important;
  }

  .ct-cell--feature {
    background: #f5f5f5 !important;
    border-right: none !important;
    border-bottom: 1px solid #eeeeee !important;
    font-size: 12px !important;
    padding: 10px 20px !important;
  }

  .ct-cell--traditional,
  .ct-cell--rfid {
    border-right: none !important;
    padding: 14px 20px !important;
  }

  .ct-cell--rfid {
    border-top: 1px solid #f5f5f5 !important;
  }

  .rt-row--top {
    width: 100% !important;
    grid-template-columns: 1fr !important;
  }

  .rt-row--bottom {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {

  .ra-container,
  .ct-container,
  .rt-container {
    padding: 0 16px !important;
  }

  .rt-row--bottom {
    grid-template-columns: 1fr !important;
  }

  .rt-hub-inner {
    width: 72px !important;
    height: 72px !important;
  }
}

.hero-badge-heading {
  display: inline-block !important;
  background: rgba(244, 244, 246, 0.3) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  padding: 28px 36px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08) !important;
}

.hero-badge-text {
  font-family: "Fahkwang", sans-serif !important;
  font-size: clamp(24px, 3.5vw, 38px) !important;
  font-weight: 700 !important;
  color: #fff !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  letter-spacing: -0.02em !important;
}

.hero-badge-highlight {
  color: #e2201a !important;
  position: relative !important;
  display: inline-block !important;
}

/* Subtle underline on accent word */
.hero-badge-highlight::after {
  content: "" !important;
  position: absolute !important;
  bottom: 2px !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: #e2201a !important;
  border-radius: 2px !important;
  opacity: 0.35 !important;
}

.am-eyebrow,
.ad-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #e2201a !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
}

.am-eyebrow::before,
.ad-eyebrow::before {
  content: "" !important;
  width: 20px !important;
  height: 2px !important;
  background: #e2201a !important;
  flex-shrink: 0 !important;
}

.am-accent {
  color: #e2201a !important;
}

/* ── TIMELINE ── */
.am-timeline {
  position: relative !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 0 !important;
}

/* Track base */
.am-track {
  position: absolute !important;
  top: 14px !important;
  left: 200px !important;
  right: 200px !important;
  height: 12px !important;
  background: #f0f0f0 !important;
  z-index: 0 !important;
}

/* Filled portion */
.am-track-fill {
  height: 100% !important;
  width: 100% !important;
  background: #e2201a !important;
  border-radius: 2px !important;
}

/* Single node */
.am-node {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
  flex: 1 !important;
}

/* Dot */
.am-node-dot {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #e5e7eb !important;
  color: #9ca3af !important;
  border: 3px solid #ffffff !important;
  margin-bottom: 20px !important;
  flex-shrink: 0 !important;
  transition:
    background 0.3s ease,
    color 0.3s ease !important;
}

.am-node--done .am-node-dot {
  background: #e2201a !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 5px rgba(226, 32, 26, 0.12) !important;
}

.am-node--active .am-node-dot {
  background: #0f0e15 !important;
  color: #e2201a !important;
  box-shadow: 0 0 0 5px rgba(15, 14, 21, 0.1) !important;
}

/* Content below dot */
.am-node-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 8px !important;
  padding: 0 16px !important;
}

.am-node-title {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0f0e15 !important;
  margin: 0 !important;
  line-height: 1.35 !important;
}

.am-node-desc {
  font-size: 13px !important;
  line-height: 1.7 !important;
  color: #6b7280 !important;
  margin: 0 !important;
  max-width: 80%;
}

/* ══════════════════════════════════════
   SECTION 2 — ADVANTAGES
══════════════════════════════════════ */

.ad-section {
  background: #f9f9f9 !important;
  padding: 90px 0 !important;
  font-family: "Lato", sans-serif !important;
}

.ad-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 48px !important;
}

.ad-header {
  margin-bottom: 56px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  align-items: center !important;
  text-align: center !important;
}

.ad-heading {
  font-family: "Fahkwang", sans-serif !important;
  font-size: clamp(22px, 3vw, 36px) !important;
  font-weight: 700 !important;
  color: #0f0e15 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
  max-width: 720px !important;
}

.ad-accent {
  color: #e2201a !important;
}

/* Layout: image left, cards right */
.ad-layout {
  display: grid !important;
  grid-template-columns: 1fr 1.4fr !important;
  gap: 32px !important;
  align-items: stretch !important;
}

/* Image block */
.ad-image {
  position: relative !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  min-height: 420px !important;
}

.ad-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* Floating badge on image */
.ad-image-badge {
  position: absolute !important;
  bottom: 24px !important;
  left: 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(8px) !important;
  padding: 10px 18px !important;
  border-radius: 50px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #0f0e15 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important;
}

.ad-image-badge svg {
  color: #e2201a !important;
  flex-shrink: 0 !important;
}

/* 2x2 cards grid */
.ad-cards {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
}

.ad-card {
  background: #ffffff !important;
  border: 1px solid #f0f0f0 !important;
  border-radius: 16px !important;
  padding: 28px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  transition:
    box-shadow 0.3s ease,
    transform 0.3s ease !important;
}

.ad-card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-3px) !important;
}

.ad-card-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 11px !important;
  background: #fff0ef !important;
  color: #e2201a !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition:
    background 0.3s ease,
    color 0.3s ease !important;
}

.ad-card:hover .ad-card-icon {
  background: #e2201a !important;
  color: #ffffff !important;
}

.ad-card-title {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0f0e15 !important;
  margin: 0 !important;
  line-height: 1.35 !important;
}

.ad-card-desc {
  font-size: 13px !important;
  line-height: 1.75 !important;
  color: #6b7280 !important;
  margin: 0 !important;
  flex: 1 !important;
}

.im-section {
  background: #0f0e15 !important;
  padding: 80px 0 !important;
  font-family: "Lato", sans-serif !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Subtle texture */
.im-section::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: repeating-linear-gradient(-45deg,
      transparent,
      transparent 50px,
      rgba(255, 255, 255, 0.015) 50px,
      rgba(255, 255, 255, 0.015) 51px) !important;
  pointer-events: none !important;
}

.im-container {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

.im-header {
  text-align: center !important;
  margin-bottom: 56px !important;
}

.im-heading {
  font-family: "Fahkwang", sans-serif !important;
  font-size: clamp(22px, 3vw, 40px) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.3 !important;
  letter-spacing: -0.02em !important;
  margin: 0 auto !important;
}

.im-accent {
  color: #e2201a !important;
}

/* 3 cards row */
.im-cards {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 2px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

.im-card {
  background: #0f0e15 !important;
  padding: 44px 36px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  position: relative !important;
  transition: background 0.3s ease !important;
}

.im-card:hover {
  background: #1a1924 !important;
}

.im-card-icon {
  width: 52px !important;
  height: 52px !important;
  border-radius: 13px !important;
  background: rgba(226, 32, 26, 0.12) !important;
  color: #e2201a !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: background 0.3s ease !important;
}

.im-card:hover .im-card-icon {
  background: #e2201a !important;
  color: #ffffff !important;
}

.im-card-num {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: rgba(226, 32, 26, 0.6) !important;
  letter-spacing: 1px !important;
}

.im-card-title {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 !important;
  line-height: 1.35 !important;
}

.im-card-desc {
  font-size: 13.5px !important;
  line-height: 1.8 !important;
  color: rgba(255, 255, 255, 0.5) !important;
  margin: 0 !important;
  flex: 1 !important;
}

/* ── RESPONSIVE ── */

@media (max-width: 1024px) {
  .ad-layout {
    grid-template-columns: 1fr !important;
  }

  .ad-image {
    min-height: 300px !important;
  }

  .im-cards {
    grid-template-columns: 1fr !important;
    gap: 2px !important;
  }
}

@media (max-width: 768px) {

  .am-section,
  .ad-section,
  .im-section {
    padding: 60px 0 !important;
  }

  .am-container,
  .ad-container,
  .im-container {
    padding: 0 24px !important;
  }

  .am-timeline {
    flex-direction: column !important;
    gap: 32px !important;
  }

  .am-track {
    top: 0 !important;
    bottom: 0 !important;
    left: 20px !important;
    right: auto !important;
    width: 3px !important;
    height: auto !important;
  }
  
  .rtl .am-track {
    top: 0 !important;
    bottom: 0 !important;
    right: 20px !important;
    left: auto !important;
    width: 3px !important;
    height: auto !important;
  }

  .am-track-fill {
    width: 100% !important;
    height: 65% !important;
    background: linear-gradient(180deg, #e2201a 0%, #f0f0f0 100%) !important;
  }

  .am-node {
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }

  .am-node-dot {
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
  }

  .am-node-content {
    align-items: flex-start !important;
    text-align: left !important;
    padding: 0 !important;
  }
  
  .rtl .am-node-content {
      text-align: right !important;
  }

  .ad-cards {
    grid-template-columns: 1fr !important;
  }

  .im-cards {
    border-radius: 16px !important;
  }
}

@media (max-width: 480px) {

  .am-container,
  .ad-container,
  .im-container {
    padding: 0 16px !important;
  }

  .im-card {
    padding: 32px 24px !important;
  }
}

.lis-accent {
  color: #e2201a !important;
}

.lis-checks-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
}

/* Last card spans full width when odd */
.lis-check-card--full {
  grid-column: -3 / -1 !important;
  margin: 0 auto !important;
  width: 100% !important;
}

.lis-check-card {
  background: #0f0e15 !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 16px !important;
  padding: 32px 28px !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 20px !important;
  transition:
    border-color 0.3s ease,
    background 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.lis-check-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 3px !important;
  height: 0 !important;
  background: #e2201a !important;
  transition: height 0.3s ease !important;
}

.lis-check-card:hover {
  background: #1f1d2e !important;
  border-color: rgba(226, 32, 26, 0.3) !important;
}

.lis-check-card:hover::before {
  height: 100% !important;
}

.lis-check-body {
  flex: 1 !important;
}

.lis-check-title {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 0 10px !important;
  line-height: 1.4 !important;
}

.lis-check-desc {
  font-family: "Lato", sans-serif !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
  color: rgba(255, 255, 255, 0.65) !important;
  margin: 0 0 16px !important;
}

.lis-check-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.lis-tag {
  font-family: "Lato", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.7) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 20px !important;
  padding: 4px 12px !important;
}

.lis-check-icon {
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  background: rgba(226, 32, 26, 0.12) !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #e2201a !important;
  font-size: 24px !important;
  transition: background 0.3s ease !important;
}

.lis-check-card:hover .lis-check-icon {
  background: rgba(226, 32, 26, 0.22) !important;
}

.lis-how-card {
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 36px 28px !important;
  position: relative !important;
  border: 1px solid #e8e9ec !important;
  transition:
    box-shadow 0.3s ease,
    transform 0.3s ease !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.lis-how-card:hover {
  box-shadow: 0 12px 40px rgba(15, 14, 21, 0.1) !important;
  transform: translateY(-4px) !important;
}

.lis-how-number {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 48px !important;
  font-weight: 800 !important;
  color: rgba(226, 32, 26, 0.1) !important;
  line-height: 1 !important;
  margin-bottom: 12px !important;
}

.lis-in-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.lis-how-icon-wrap {
  width: 64px !important;
  height: 64px !important;
  background: #0f0e15 !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  font-size: 26px !important;
  margin-bottom: 22px !important;
  transition: background 0.3s ease !important;
}

.lis-how-card:hover .lis-how-icon-wrap {
  background: #e2201a !important;
}

.lis-how-card-title {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #0f0e15 !important;
  margin: 0 0 12px !important;
  line-height: 1.35 !important;
}

.lis-how-card-desc {
  font-family: "Lato", sans-serif !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
  color: #6b7280 !important;
  margin: 0 0 24px !important;
  flex: 1 !important;
}

.lis-read-more {
  font-family: "Lato", sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #e2201a !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: gap 0.2s ease !important;
  margin-top: auto !important;
}

.lis-read-more:hover {
  gap: 10px !important;
  color: #b71b15 !important;
}

.lis-specs-section {
  background: #ffffff !important;
  padding: 80px 60px !important;
  border-top: 1px solid #e8e9ec !important;
}

.lis-specs-container {
  max-width: 1280px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 80px !important;
  align-items: center !important;
}

.lis-specs-eyebrow {
  display: inline-block !important;
  font-family: "Lato", sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: #e2201a !important;
  margin-bottom: 14px !important;
}

.lis-specs-title {
  font-family: "Fahkwang", sans-serif !important;
  font-size: clamp(24px, 3vw, 44px) !important;
  font-weight: 700 !important;
  color: #0f0e15 !important;
  margin: 0 0 18px !important;
  line-height: 1.35 !important;
}

.lis-specs-subtitle {
  font-family: "Lato", sans-serif !important;
  font-size: 18px !important;
  line-height: 1.8 !important;
  color: #6b7280 !important;
  margin: 0 0 32px !important;
}

.lis-specs-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #e2201a !important;
  color: #ffffff !important;
  font-family: "Fahkwang", sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 14px 30px !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  transition:
    background 0.3s ease,
    transform 0.2s ease !important;
}

.lis-specs-btn:hover {
  background: #b71b15 !important;
  transform: translateY(-2px) !important;
  color: #ffffff !important;
}

.lis-specs-label {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0f0e15 !important;
  margin: 0 0 20px !important;
  padding-bottom: 16px !important;
  border-bottom: 2px solid #e2201a !important;
  display: inline-block !important;
}

.lis-specs-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

.lis-specs-item {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  font-family: "Lato", sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #373643 !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid #f0f1f3 !important;
  transition: color 0.2s ease !important;
}

.lis-specs-item:last-child {
  border-bottom: none !important;
}

.lis-specs-item:hover {
  color: #e2201a !important;
}

.lis-specs-icon {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  background: rgba(226, 32, 26, 0.1) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #e2201a !important;
  font-size: 11px !important;
}

/* ============================================
   RESPONSIVE
============================================ */
@media (max-width: 1024px) {
  .lis-specs-container {
    gap: 50px !important;
  }
}

@media (max-width: 768px) {

  .lis-checks-section,
  .lis-how-section,
  .lis-specs-section {
    padding: 60px 16px !important;
  }

  .lis-checks-grid {
    grid-template-columns: 1fr !important;
  }

  .lis-check-card--full {
    grid-column: 1 !important;
    max-width: 100% !important;
  }

  .lis-how-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .lis-specs-container {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
}

@media (max-width: 480px) {
  .lis-check-card {
    flex-direction: column-reverse !important;
  }

  .lis-check-icon {
    margin-bottom: 16px !important;
  }
}

.ci-hero {
  background: none !important;
  position: relative !important;
  min-height: 600px !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  padding: 80px 60px !important;
}

.ci-hero::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: url("https://automera.sa/wp-content/uploads/2026/06/Hero-section2-scaled.png") center/cover no-repeat !important;
  clip-path: none !important;
  z-index: 0 !important;
}

/* Accent line top */
.ci-hero-accent-line {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 45% !important;
  height: 4px !important;
  background: linear-gradient(90deg, #e2201a 0%, transparent 100%) !important;
  z-index: 2 !important;
}

.ci-hero-container {
  position: relative !important;
  z-index: 2 !important;
  margin: 0 100px !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: center !important;
  gap: 40px !important;
}

.ci-hero-left {}

.ci-hero-title {
  font-family: "Fahkwang", sans-serif !important;
  font-size: clamp(28px, 4vw, 52px) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 20px !important;
}

.ci-hero-title span {
  color: #e2201a !important;
}

.ci-hero-subtitle {
  font-family: "Lato", sans-serif !important;
  font-size: clamp(15px, 1.8vw, 18px) !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  line-height: 1.6 !important;
  margin-bottom: 16px !important;
  border-left: 3px solid #e2201a !important;
  padding-left: 16px !important;
}

.rtl .ci-hero-subtitle {
    border-right: 3px solid #e2201a !important;
    border-left: none !important;
    padding-right: 16px !important;
    padding-left: 0 !important;
}

.ci-hero-desc {
  font-family: "Lato", sans-serif !important;
  font-size: 15px !important;
  line-height: 1.85 !important;
  color: rgba(255, 255, 255, 0.6) !important;
  margin-bottom: 36px !important;
  max-width: 85% !important;
}

.ci-hero-right {
  /* intentionally empty — background image shows through */
}

@media (max-width: 768px) {
  .ci-hero::before {
    display: none !important;
  }

  .ci-hero-container {
    grid-template-columns: 1fr !important;
  }

  .ci-hero {
    padding: 60px 20px !important;
  }
}

.ci-steps-section {
  background: #ffffff !important;
  padding: 80px 60px !important;
}

.ci-steps-container {
  max-width: 1280px !important;
  margin: 0 auto !important;
}

.ci-section-header {
  margin-bottom: 48px !important;
}

.ci-section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 12px;
}

.ci-section-title {
  font-family: "Fahkwang", sans-serif !important;
  font-size: clamp(24px, 3.5vw, 44px) !important;
  font-weight: 700 !important;
  color: #0a0d1a !important;
  line-height: 1.3 !important;
}

.ci-section-title span {
  color: #e2201a !important;
}

/* Numbered step cards — Image 1 style */
.ci-steps-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--grey-border);
  border-radius: 16px;
  overflow: hidden;
}

.ci-step-card {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  padding: 32px 36px;
  background: #ffffff;
  border-bottom: 1px solid var(--grey-border);
  transition:
    background 0.3s ease,
    transform 0.2s ease;
  position: relative;
  cursor: default;
}

.ci-step-card:last-child {
  border-bottom: none;
}

.ci-step-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--red);
  transition: width 0.3s ease;
}

.ci-step-card:hover {
  background: #fafafa;
}

.ci-step-card:hover::before {
  width: 4px;
}

.ci-step-num {
  width: 52px;
  height: 52px;
  min-width: 52px;
  background: var(--grey-bg);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Fahkwang", sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--dark);
  transition:
    background 0.3s ease,
    color 0.3s ease;
}

.ci-step-card:hover .ci-step-num {
  background: var(--red);
  color: #fff;
}

.ci-step-icon {
  width: 52px;
  height: 52px;
  min-width: 52px;
  background: rgba(226, 32, 26, 0.08);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--red);
  transition: background 0.3s ease;
}

.ci-step-card:hover .ci-step-icon {
  background: rgba(226, 32, 26, 0.15);
}

.ci-step-body {}

.ci-step-title {
  font-family: "Fahkwang", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 8px;
  line-height: 1.35;
}

.ci-step-desc {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-muted);
}

@media (max-width: 600px) {
  .ci-step-card {
    padding: 24px 20px;
    gap: 16px;
  }
}

/* ============================================================
   SECTION 3 — WHAT CAN MANUAL INSPECTION MISS?
   Interactive warning cards with hover reveal
============================================================ */
.ci-miss-section {
  background: #0a0d1a !important;
  padding: 64px 30px !important;
  position: relative !important;
  overflow: hidden !important;
}

.ci-miss-container {
  max-width: 1280px !important;
  margin: 0 auto !important;
  position: relative !important;
  z-index: 1 !important;
}

.ci-miss-header {
  text-align: center !important;
  margin-bottom: 60px !important;
}

.ci-miss-title {
  font-family: "Fahkwang", sans-serif !important;
  font-size: clamp(26px, 3.5vw, 40px) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.3 !important;
}

.ci-miss-title span {
  color: #e2201a !important;
}

/* Horizontal grid layout */
.ci-miss-grid {
  display: grid !important;
  grid-template-columns: repeat(8, 1fr) !important;
  gap: 40px 20px !important;
  margin: 0 auto !important;
}

.ci-miss-grid-5 {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 40px 20px !important;
  margin: 0 auto !important;
}

/* Card with vertical layout: icon on top, text below */
.ci-miss-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 20px !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  position: relative !important;
}

/* Icon wrapper */
.ci-miss-icon-wrapper {
  width: 70px !important;
  height: 70px !important;
  border-radius: 50% !important;
  background: rgba(226, 32, 26, 0.12) !important;
  border: 2px solid rgba(226, 32, 26, 0.25) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 32px !important;
  color: #e2201a !important;
  transition: all 0.3s ease !important;
  flex-shrink: 0 !important;
}

.ci-miss-card:hover .ci-miss-icon-wrapper {
  background: rgba(226, 32, 26, 0.25) !important;
  border-color: rgba(226, 32, 26, 0.5) !important;
  transform: scale(1.12) !important;
}

/* Label text below icon */
.ci-miss-label {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  line-height: 1.4 !important;
  transition: color 0.3s ease !important;
}

.ci-miss-card:hover .ci-miss-label {
  color: #e2201a !important;
}

/* Responsive design */
@media (max-width: 1024px) {
  .ci-miss-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px 15px !important;
  }
  
  
}

@media (max-width: 768px) {
  .ci-miss-section {
    padding: 60px 40px !important;
  }

  .ci-miss-header {
    margin-bottom: 50px !important;
  }

  .ci-miss-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 25px 15px !important;
  }
  
  .ci-hero-container {
      margin: 0 60px !important;
    }

  .ci-miss-icon-wrapper {
    width: 60px !important;
    height: 60px !important;
    font-size: 28px !important;
  }

  .ci-miss-label {
    font-size: 13px !important;
  }
}

@media (max-width: 480px) {
  .ci-miss-section {
    padding: 50px 20px !important;
  }
  
  .ci-hero-container {
      margin: 0 10px !important;
    }

  .ci-miss-title {
    font-size: 24px !important;
  }

  .ci-miss-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  
  .ci-miss-grid-5 {
    grid-template-columns: repeat(3, 1fr) !important;
    }


  .ci-miss-icon-wrapper {
    width: 55px !important;
    height: 55px !important;
    font-size: 24px !important;
  }
}

.ci-tech-section {
  background: #fff !important;
  padding: 80px 60px !important;
}

.ci-tech-container {
  max-width: 1280px !important;
  margin: 0 auto !important;
}

.ci-tech-header {
  text-align: center !important;
  margin-bottom: 16px !important;
}

.ci-tech-title {
  font-family: "Fahkwang", sans-serif !important;
  font-size: clamp(24px, 3.5vw, 44px) !important;
  font-weight: 700 !important;
  color: #0a0d1a !important;
  line-height: 1.3 !important;
}

.ci-tech-title span {
  color: #e2201a;
}

.ci-tech-subtitle {
  text-align: center !important;
  font-size: 18px !important;
  color: #777585 !important;
  max-width: 640px !important;
  margin: 12px auto 50px !important;
  line-height: 1.8 !important;
}

.ci-tech-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
}

/* last 2 cards — center them if odd */
.ci-tech-grid .ci-tech-card:nth-child(4),
.ci-tech-grid .ci-tech-card:nth-child(5) {}

.ci-tech-card {
  background: #ffffff !important;
  border: 1px solid #e8e9ec !important;
  border-radius: 16px !important;
  padding: 32px 28px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.35s ease !important;
  cursor: default !important;
  height: 100% !important;
}

.serv-cta-main-h {
        height: 360px !important;
}

.ci-tech-card:hover {
  border-color: rgba(226, 32, 26, 0.2) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.08) !important;
}

.ci-tech-emoji {
  font-size: 36px !important;
  display: block !important;
  margin-bottom: 16px !important;
  transition: transform 0.3s ease !important;
}

.ci-tech-card-title {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #0a0d1a !important;
  margin-bottom: 10px !important;
  line-height: 1.35 !important;
  position: relative !important;
  z-index: 1 !important;
}

.ci-tech-card-desc {
  font-size: 14px !important;
  line-height: 1.8 !important;
  color: #6b7280 !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Center last row if 5 cards in 3-col grid */
@media (min-width: 769px) {
  .ci-tech-card:nth-child(4) {
    grid-column: 1;
  }

  .ci-tech-card:nth-child(5) {
    grid-column: 2;
  }
}

@media (max-width: 900px) {
  .ci-tech-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ci-tech-card:nth-child(4),
  .ci-tech-card:nth-child(5) {
    grid-column: auto;
  }
}

@media (max-width: 560px) {
  .ci-tech-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   SECTION 5 — SPEED & PRODUCTIVITY
   Dark section with large animated stat cards
============================================================ */
.ci-speed-section {
  background: var(--dark);
  padding: 80px 20px;
  position: relative;
  overflow: hidden;
}

.ci-speed-section::before {
  content: "";
  position: absolute;
  bottom: -150px;
  left: -150px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle,
      rgba(226, 32, 26, 0.07) 0%,
      transparent 70%);
  pointer-events: none;
}

.ci-speed-container {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.ci-speed-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-bottom: 60px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.ci-speed-title {
  font-family: "Fahkwang", sans-serif;
  font-size: clamp(26px, 3.5vw, 42px);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
}

.ci-speed-title span {
  color: var(--red);
}

.ci-speed-desc {
  font-size: 15px;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.55);
}

.ci-speed-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.ci-speed-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 36px 28px;
  position: relative;
  overflow: hidden;
  transition: all 0.35s ease;
  cursor: default;
}

.ci-speed-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
      rgba(226, 32, 26, 0.08) 0%,
      transparent 70%);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.ci-speed-card:hover {
  border-color: rgba(226, 32, 26, 0.35);
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3);
}

.ci-speed-card:hover::before {
  opacity: 1;
}

.ci-speed-card-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: rgba(226, 32, 26, 0.1);
  border: 1px solid rgba(226, 32, 26, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
  transition:
    background 0.3s ease,
    transform 0.3s ease;
}

.ci-speed-card:hover .ci-speed-card-icon {
  background: rgba(226, 32, 26, 0.2);
  transform: scale(1.05) rotate(-3deg);
}

.ci-speed-card-emoji {
  font-size: 30px;
}

.ci-speed-card-title {
  font-family: "Fahkwang", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 12px;
  line-height: 1.35;
  position: relative;
  z-index: 1;
}

.ci-speed-card-desc {
  font-size: 14px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.55);
  position: relative;
  z-index: 1;
}

/* Highlighted card variant */
.ci-speed-card--highlight {
  background: var(--red);
  border-color: var(--red);
}

.ci-speed-card--highlight::before {
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.15) 0%,
      transparent 70%);
}

.ci-speed-card--highlight:hover {
  border-color: var(--red-dark);
  background: var(--red-dark);
}

.ci-speed-card--highlight .ci-speed-card-icon {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
}

.ci-speed-card--highlight .ci-speed-card-title {
  color: #ffffff;
}

.ci-speed-card--highlight .ci-speed-card-desc {
  color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 900px) {
  .ci-speed-top {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .ci-speed-cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.bc-types-track-wrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  padding-bottom: 4px !important;
}

.bc-types-track-wrap::-webkit-scrollbar {
  display: none !important;
}

/* The card row */
.bc-types-track {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr);
  align-items: center !important;
  gap: 16px !important;
  min-width: max-content !important;
  padding: 30px !important;
}

/* ── Base card ── */
.bc-type-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-self: center;
  justify-content: center !important;
  gap: 16px !important;
  width: 160px !important;
  min-height: 160px !important;
  background: #ffffff !important;
  border: 1.5px solid #e8e9ec !important;
  border-radius: 16px !important;
  padding: 24px 16px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
  text-decoration: none !important;
  max-width: 250px !important;
}

.bc-type-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg,
      rgba(226, 32, 26, 0.04) 0%,
      transparent 70%) !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}

.bc-type-card:hover {
  border-color: rgba(226, 32, 26, 0.35) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-4px) !important;
}

.bc-type-card:hover::before {
  opacity: 1 !important;
}

/* ── Active card (first, highlighted) ── */
.bc-type-card--active {
  background: #e2201a !important;
  border-color: #e2201a !important;
  box-shadow: 0 12px 22px rgba(226, 32, 26, 0.3) !important;
}

.bc-type-card--active::before {
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.15) 0%,
      transparent 70%) !important;
  opacity: 1 !important;
}

.bc-type-card--active:hover {
  background: #c41b15 !important;
  border-color: #c41b15 !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 18px 40px rgba(226, 32, 26, 0.4) !important;
}

/* ── Image wrapper ── */
.bc-type-img-wrap {
  width: 190px !important;
  height: 64px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Square codes (DataMatrix, QR) */
.bc-type-img--square {
  width: 64px !important;
  height: 64px !important;
  object-fit: contain !important;
}

.bc-type-img {
  max-width: 100% !important;
  max-height: 64px !important;
  object-fit: contain !important;
  display: block !important;
  /* Invert on active card (white barcode on red bg) */
  filter: none !important;
  transition: filter 0.3s ease !important;
}

/* On inactive cards, darken slightly on hover */
.bc-type-card:not(.bc-type-card--active):hover .bc-type-img {
  filter: contrast(1.1) !important;
}

/* ── Label ── */
.bc-type-label {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #0f0e15 !important;
  text-align: center !important;
  line-height: 1.3 !important;
  position: relative !important;
  z-index: 1 !important;
  white-space: nowrap !important;
  transition: color 0.3s ease !important;
}

.bc-type-card--active .bc-type-label {
  color: #ffffff !important;
}

.bc-type-card:not(.bc-type-card--active):hover .bc-type-label {
  color: #e2201a !important;
}

/* ── Responsive: on larger screens, distribute evenly ── */
@media (min-width: 900px) {
  .bc-types-track {
      grid-template-columns: repeat(6, 1fr);
    }

  .bc-type-card {
    flex: 1 !important;
    width: auto !important;
  }
}

@media (max-width: 640px) {
  .bc-types-section {
    padding: 48px 16px !important;
  }
  
  .bc-types-track {
      grid-template-columns: repeat(2, 1fr);
    }
    
    .ra-grid-2 {
        grid-template-columns: repeat(1, 1fr) !important;
    }
    
  .bc-type-card {
    width: 100% !important;
    min-height: 148px !important;
    padding: 20px 12px !important;
  }
}

.pti-section {
  background: #0f0e15 !important;
  padding: 64px 20px !important;
}

.pti-container {
  max-width: 1280px !important;
  margin: 0 auto !important;
}

/* Header */
.pti-header {
  margin-bottom: 48px !important;
}

.pti-title {
  font-family: "Fahkwang", sans-serif !important;
  font-size: clamp(24px, 3vw, 36px) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  text-align: center;
}

.pti-accent {
  color: #e2201a !important;
}

/* Grid */
.pti-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 1px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* Wide card */
.pti-card--wide {
  grid-column: 1 / 5 !important;
  border-right: none !important;
}

/* Card */
.pti-card {
  background: #0f0e15 !important;
  padding: 32px 26px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  transition: background 0.25s ease !important;
  position: relative !important;
}

.pti-card:hover {
  background: #16141f !important;
}

/* Red top border reveal on hover */
.pti-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: #e2201a !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform 0.3s ease !important;
}

.pti-card:hover::before {
  transform: scaleX(1) !important;
}

/* Icon */
.pti-icon-wrap {
  width: 52px !important;
  height: 52px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(226, 32, 26, 0.3) !important;
  background: rgba(226, 32, 26, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #e2201a !important;
  flex-shrink: 0 !important;
  transition:
    background 0.25s ease,
    border-color 0.25s ease !important;
}

.pti-card:hover .pti-icon-wrap {
  background: rgba(226, 32, 26, 0.16) !important;
  border-color: rgba(226, 32, 26, 0.5) !important;
}

.pti-svg {
  width: 26px !important;
  height: 26px !important;
}

/* Card body */
.pti-card-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  flex: 1 !important;
}

.pti-card-title {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

.pti-card-desc {
  font-family: "Lato", sans-serif !important;
  font-size: 13.5px !important;
  line-height: 1.75 !important;
  color: rgba(255, 255, 255, 0.5) !important;
  margin: 0 !important;
  flex: 1 !important;
  transition: color 0.25s ease !important;
}

.pti-card:hover .pti-card-desc {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Tags */
.pti-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 4px !important;
}

.pti-tag {
  font-family: "Lato", sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 4px !important;
  padding: 3px 8px !important;
  transition:
    color 0.25s ease,
    border-color 0.25s ease !important;
}

.pti-card:hover .pti-tag {
  color: #e2201a !important;
  border-color: rgba(226, 32, 26, 0.35) !important;
}

/* Responsive */
@media (max-width: 1024px) {
  .pti-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .pti-card--wide {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 560px) {
  .pti-section {
    padding: 60px 16px !important;
  }

  .pti-grid {
    grid-template-columns: 1fr !important;
  }

  .pti-card {
    padding: 26px 20px !important;
  }
}

.gq-section {
  background: #0f0e15 !important;
  padding: 80px 20px !important;
}

.gq-container {
  max-width: 1280px !important;
  margin: 0 auto !important;
}

.gq-header {
  margin-bottom: 48px !important;
}

.gq-title {
  font-family: "Fahkwang", sans-serif !important;
  font-size: clamp(24px, 3vw, 44px) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.35 !important;
  margin: 0 0 14px !important;
  text-align: center;
}

.gq-accent {
  color: #e2201a !important;
}

.gq-subtitle {
  font-family: "Lato", sans-serif !important;
  font-size: 18px !important;
  line-height: 1.8 !important;
  color: rgba(255, 255, 255, 0.5) !important;
  margin: 0 !important;
text-align: center;
}

/* Grid */
.gq-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 12px !important;
}

/* Base card */
.gq-card {
  border-radius: 14px !important;
  padding: 28px 20px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  border: 1px solid transparent !important;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.gq-card:hover {
  transform: translateY(-5px) !important;
}

/* Top row */
.gq-card-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Grade letter */
.gq-grade-letter {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 36px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

/* ISO badge */
.gq-iso-badge {
  font-family: "Lato", sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
}

/* Status dot */
.gq-dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
}

/* Title */
.gq-card-title {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

/* Desc */
.gq-card-desc {
  font-family: "Lato", sans-serif !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
  margin: 0 !important;
  flex: 1 !important;
}

/* Quality bar */
.gq-bar-wrap {
  height: 4px !important;
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 2px !important;
  overflow: hidden !important;
  margin-top: 4px !important;
}

.gq-bar {
  height: 100% !important;
  border-radius: 2px !important;
}

/* ── Grade A — Green ── */
.gq-card--a {
  background: #0d2416 !important;
  border-color: rgba(34, 197, 94, 0.25) !important;
}

.gq-card--a:hover {
  box-shadow: 0 16px 40px rgba(34, 197, 94, 0.12) !important;
}

.gq-card--a .gq-grade-letter {
  color: #22c55e !important;
}

.gq-card--a .gq-iso-badge {
  color: #22c55e !important;
  background: rgba(34, 197, 94, 0.12) !important;
}

.gq-card--a .gq-dot {
  background: #22c55e !important;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.6) !important;
}

.gq-card--a .gq-card-title {
  color: #22c55e !important;
}

.gq-card--a .gq-card-desc {
  color: rgba(255, 255, 255, 0.55) !important;
}

.gq-card--a .gq-bar {
  background: #22c55e !important;
}

/* ── Grade B — Yellow ── */
.gq-card--b {
  background: #1f1a07 !important;
  border-color: rgba(234, 179, 8, 0.25) !important;
}

.gq-card--b:hover {
  box-shadow: 0 16px 40px rgba(234, 179, 8, 0.12) !important;
}

.gq-card--b .gq-grade-letter {
  color: #eab308 !important;
}

.gq-card--b .gq-iso-badge {
  color: #eab308 !important;
  background: rgba(234, 179, 8, 0.12) !important;
}

.gq-card--b .gq-dot {
  background: #eab308 !important;
  box-shadow: 0 0 8px rgba(234, 179, 8, 0.6) !important;
}

.gq-card--b .gq-card-title {
  color: #eab308 !important;
}

.gq-card--b .gq-card-desc {
  color: rgba(255, 255, 255, 0.55) !important;
}

.gq-card--b .gq-bar {
  background: #eab308 !important;
}

/* ── Grade C — Orange ── */
.gq-card--c {
  background: #1f0f05 !important;
  border-color: rgba(249, 115, 22, 0.25) !important;
}

.gq-card--c:hover {
  box-shadow: 0 16px 40px rgba(249, 115, 22, 0.12) !important;
}

.gq-card--c .gq-grade-letter {
  color: #f97316 !important;
}

.gq-card--c .gq-iso-badge {
  color: #f97316 !important;
  background: rgba(249, 115, 22, 0.12) !important;
}

.gq-card--c .gq-dot {
  background: #f97316 !important;
  box-shadow: 0 0 8px rgba(249, 115, 22, 0.6) !important;
}

.gq-card--c .gq-card-title {
  color: #f97316 !important;
}

.gq-card--c .gq-card-desc {
  color: rgba(255, 255, 255, 0.55) !important;
}

.gq-card--c .gq-bar {
  background: #f97316 !important;
}

/* ── Grade D — Red ── */
.gq-card--d {
  background: #1f0808 !important;
  border-color: rgba(226, 32, 26, 0.25) !important;
}

.gq-card--d:hover {
  box-shadow: 0 16px 40px rgba(226, 32, 26, 0.12) !important;
}

.gq-card--d .gq-grade-letter {
  color: #e2201a !important;
}

.gq-card--d .gq-iso-badge {
  color: #e2201a !important;
  background: rgba(226, 32, 26, 0.12) !important;
}

.gq-card--d .gq-dot {
  background: #e2201a !important;
  box-shadow: 0 0 8px rgba(226, 32, 26, 0.6) !important;
}

.gq-card--d .gq-card-title {
  color: #e2201a !important;
}

.gq-card--d .gq-card-desc {
  color: rgba(255, 255, 255, 0.55) !important;
}

.gq-card--d .gq-bar {
  background: #e2201a !important;
}

/* ── Grade F — Dark grey ── */
.gq-card--f {
  background: #111111 !important;
  border-color: rgba(156, 163, 175, 0.2) !important;
}

.gq-card--f:hover {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4) !important;
}

.gq-card--f .gq-grade-letter {
  color: #6b7280 !important;
}

.gq-card--f .gq-iso-badge {
  color: #6b7280 !important;
  background: rgba(107, 114, 128, 0.12) !important;
}

.gq-card--f .gq-dot {
  background: #4b5563 !important;
}

.gq-card--f .gq-card-title {
  color: #9ca3af !important;
}

.gq-card--f .gq-card-desc {
  color: rgba(255, 255, 255, 0.35) !important;
}

.gq-card--f .gq-bar {
  background: #4b5563 !important;
}

/* ============================================================
   SECTION 2 — TIMELINE
============================================================ */
.tl-section-2 {
  background: #fff !important;
  padding: 64px 30px !important;
}

.tl-container-2 {
  max-width: 1280px !important;
  margin: 0 auto !important;
}

.tl-header-2 {
  text-align: center !important;
  margin-bottom: 64px !important;
}

.tl-title-2 {
  font-family: "Fahkwang", sans-serif !important;
  font-size: clamp(22px, 3vw, 34px) !important;
  font-weight: 700 !important;
  color: #373643 !important;
  line-height: 1.35 !important;
  margin: 0 !important;
}

.tl-accent-2 {
  color: #e2201a !important;
}

/* Track */
.tl-track-2 {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

/* Center vertical line */
.tl-line-2 {
  position: absolute !important;
  left: 50% !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 1px !important;
  background: #e2201a !important;
  transform: translateX(-50%) !important;
}

/* Each row */
.tl-item-2 {
  display: grid !important;
  grid-template-columns: 1fr 60px 1fr !important;
  align-items: center !important;
  gap: 0 !important;
  margin-bottom: 32px !important;
  position: relative !important;
  z-index: 1 !important;
}

/* RIGHT: node center, card right */
.tl-item--right {
  /* node col 2, card col 3 */
}

.tl-item--right .tl-node {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

.tl-item--right .tl-connector {
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: start !important;
}

.tl-item--right .tl-card {
  grid-column: 3 !important;
  grid-row: 1 !important;
  margin-left: 24px !important;
}

/* LEFT: card col 1, node col 2 */
.tl-item--left .tl-card {
  grid-column: 1 !important;
  grid-row: 1 !important;
  margin-right: 24px !important;
  text-align: right !important;
}

.tl-item--left .tl-connector {
  grid-column: 1 !important;
  grid-row: 1 !important;
  z-index: 1;
}

.tl-item--left .tl-node {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

/* Node circle */
.tl-node {
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  background: #1a1927 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255, 255, 255, 0.7) !important;
  justify-self: center !important;
  flex-shrink: 0 !important;
  transition:
    border-color 0.3s ease,
    color 0.3s ease,
    background 0.3s ease !important;
  z-index: 2 !important;
  position: relative !important;
}

.tl-node svg {
  width: 24px !important;
  height: 24px !important;
}

.tl-item-2:hover .tl-node {
  border-color: #e2201a !important;
  color: #e2201a !important;
  background: #fff !important;
}

/* Connector dot line */
.tl-connector {
  height: 1px !important;
  background: #e2201a !important;
  width: 100% !important;
  transition: background 0.3s ease !important;
}

.tl-item-2:hover .tl-connector {
  background: rgba(226, 32, 26, 0.4) !important;
}

/* Card */
.tl-card {
  background: #0a0d1a !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  padding: 24px 22px !important;
  transition:
    border-color 0.3s ease,
    background 0.3s ease !important;
  z-index: 2;
}

.tl-item-2:hover .tl-card {
  border-color: rgba(226, 32, 26, 0.3) !important;
  background: #1e1c2d !important;
}

/* Layer label */
.tl-layer {
  font-family: "Lato", sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: #e2201a !important;
  display: block !important;
  margin-bottom: 6px !important;
}

.tl-card-title {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 0 8px !important;
  line-height: 1.3 !important;
}

.tl-card-desc {
  font-family: "Lato", sans-serif !important;
  font-size: 13.5px !important;
  line-height: 1.75 !important;
  color: rgba(255, 255, 255, 0.5) !important;
  margin: 0 0 14px !important;
  transition: color 0.3s ease !important;
}

.tl-item:hover .tl-card-desc {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Chips */
.tl-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.tl-item--left .tl-chips {
  justify-content: flex-end !important;
}

.tl-chip {
  font-family: "Lato", sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 4px !important;
  padding: 3px 9px !important;
  transition:
    color 0.25s ease,
    border-color 0.25s ease !important;
}

.tl-item:hover .tl-chip {
  color: #e2201a !important;
  border-color: rgba(226, 32, 26, 0.3) !important;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .gq-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  
  .tl-section-2 {
    padding: 48px 24px !important;
  }
 
  .tl-header-2 {
    margin-bottom: 48px !important;
  }
}

@media (max-width: 768px) {
  .tl-section-2 {
    padding: 40px 20px !important;
  }
 
  .tl-container-2 {
    max-width: 100% !important;
  }
 
  .tl-header-2 {
    margin-bottom: 40px !important;
  }
 
  .tl-title-2 {
    font-size: clamp(20px, 2.5vw, 28px) !important;
  }
}

@media (max-width: 600px) {
  .gq-grid {
    grid-template-columns: 1fr 1fr !important;
  }
 
  /* Section padding for mobile */
  .tl-section-2 {
    padding: 32px 16px !important;
  }
 
  .tl-container-2 {
    max-width: 100% !important;
  }
 
  /* Header adjustments */
  .tl-header-2 {
    margin-bottom: 32px !important;
  }
 
  .tl-title-2 {
    font-size: clamp(18px, 2vw, 24px) !important;
    margin-bottom: 8px !important;
  }
 
  /* Hide center line on mobile */
  .tl-line-2 {
    display: none !important;
  }
 
  /* Timeline items: single column layout */
  .tl-item-2 {
    grid-template-columns: 44px 1fr !important;
    align-items: flex-start !important;
    gap: 0 16px !important;
    margin-bottom: 24px !important;
  }
 
  /* Node positioning for mobile */
  .tl-item--right .tl-node,
  .tl-item--left .tl-node {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 44px !important;
    height: 44px !important;
    justify-self: start !important;
    margin-top: 4px !important;
    flex-shrink: 0 !important;
  }
 
  .tl-node svg {
    width: 20px !important;
    height: 20px !important;
  }
 
  /* Card positioning and sizing for mobile */
  .tl-item--right .tl-card,
  .tl-item--left .tl-card {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    text-align: left !important;
    padding: 16px 14px !important;
  }
  
  .rtl .tl-item--right .tl-card,
  .rtl .tl-item--left .tl-card {
      text-align: right !important;
  }
 
  .tl-card-title {
    font-size: 16px !important;
    margin-bottom: 6px !important;
  }
 
  .tl-card-desc {
    font-size: 12.5px !important;
    line-height: 1.6 !important;
    margin-bottom: 10px !important;
  }
 
  /* Hide connectors on mobile */
  .tl-item--right .tl-connector,
  .tl-item--left .tl-connector {
    display: none !important;
  }
 
  /* Chips alignment */
  .tl-item--left .tl-chips {
    justify-content: flex-start !important;
  }
 
  .tl-chips {
    gap: 4px !important;
  }
 
  .tl-chip {
    font-size: 10px !important;
    padding: 2px 7px !important;
  }
 
  .tl-section {
    padding: 32px 16px !important;
  }
 
  .gq-section {
    padding: 40px 16px !important;
  }
}
 
/* Small Mobile (400px and below) */
@media (max-width: 400px) {
  .gq-grid {
    grid-template-columns: 1fr !important;
  }
 
  /* Extra padding reduction for small screens */
  .tl-section-2 {
    padding: 24px 12px !important;
  }
 
  .tl-header-2 {
    margin-bottom: 24px !important;
  }
 
  .tl-title-2 {
    font-size: clamp(16px, 1.8vw, 20px) !important;
  }
 
  /* Reduced spacing between items */
  .tl-item-2 {
    margin-bottom: 20px !important;
    gap: 0 12px !important;
  }
 
  /* Compact card padding */
  .tl-item--right .tl-card,
  .tl-item--left .tl-card {
    padding: 14px 12px !important;
  }
 
  .tl-card-title {
    font-size: 14px !important;
  }
 
  .tl-card-desc {
    font-size: 12px !important;
  }
 
  /* Smaller node for tiny screens */
  .tl-item--right .tl-node,
  .tl-item--left .tl-node {
    width: 40px !important;
    height: 40px !important;
  }
}

.bd-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 3px !important;
  background: #e2201a !important;
  border: 3px solid #e2201a !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}

/* ── Card ── */
.bd-card {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  position: relative !important;
  cursor: default !important;
  background: #0f0e15 !important;
  height: 100% !important;
}

/* ── Image wrap ── */
.bd-img-wrap {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  overflow: hidden !important;
}

.bd-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.4s ease !important;
  filter: saturate(0.85) !important;
}

.bd-card:hover .bd-img {
  transform: scale(1.06) !important;
  filter: saturate(1.1) !important;
}

/* Dark overlay on image — lifts on hover */
.bd-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(15, 14, 21, 0.35) !important;
  transition: background 0.3s ease !important;
}

.bd-card:hover .bd-overlay {
  background: rgba(15, 14, 21, 0.1) !important;
}

/* ── Card body (below image) ── */
.bd-card-body {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 20px 18px !important;
  background: #16141f !important;
  flex: 1 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  transition: background 0.25s ease !important;
}

.bd-card:hover .bd-card-body {
  background: #1c1a2d !important;
}

/* ── Icon ── */
.bd-icon-wrap {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 10px !important;
  background: rgba(226, 32, 26, 0.1) !important;
  border: 1px solid rgba(226, 32, 26, 0.2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #e2201a !important;
  transition:
    background 0.25s ease,
    border-color 0.25s ease !important;
  margin-top: 2px !important;
}

.bd-svg {
  width: 20px !important;
  height: 20px !important;
}

.bd-card:hover .bd-icon-wrap {
  background: rgba(226, 32, 26, 0.2) !important;
  border-color: rgba(226, 32, 26, 0.4) !important;
}

/* ── Title ── */
.bd-card-title {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 0 6px !important;
  line-height: 1.35 !important;
  transition: color 0.25s ease !important;
}

.bd-card:hover .bd-card-title {
  color: #ffffff !important;
}

/* ── Description ── */
.bd-card-desc {
  font-family: "Lato", sans-serif !important;
  font-size: 12.5px !important;
  line-height: 1.7 !important;
  color: rgba(255, 255, 255, 0.45) !important;
  margin: 0 !important;
  transition: color 0.25s ease !important;
}

.bd-card:hover .bd-card-desc {
  color: rgba(255, 255, 255, 0.65) !important;
}

/* ── Responsive ── */
@media (max-width: 860px) {
  .bd-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 560px) {
  .bd-section {
    padding: 60px 16px !important;
  }

  .bd-grid {
    grid-template-columns: 1fr !important;
    border-radius: 14px !important;
  }

  .bd-card-body {
    padding: 16px 14px !important;
  }
}

.int-section {
  position: relative !important;
  min-height: 520px !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  padding: 64px 30px !important;
}

/* RTL Layout */
.rtl .int-container {
    direction: rtl;
}

/* Move the visible image to the left */
.rtl .int-photo {
    object-position: center left !important;
}

/* Flip the white overlay */
.rtl .int-photo-mask {
    background: linear-gradient(
        270deg,
        #ffffff 0%,
        #ffffff 45%,
        rgba(255,255,255,.5) 56%,
        rgba(255,255,255,.1) 69%
    ) !important;
}

/* Hover border on the right instead of left */
.rtl .int-card::before {
    left: auto !important;
    right: 0 !important;
}

/* Optional: right-align text */
.rtl .int-header,
.rtl .int-card-title,
.rtl .int-desc {
    text-align: right;
}

/* Full-bleed background photo */
.int-photo-bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
}

.int-photo {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center right !important;
  display: block !important;
  filter: saturate(0.7) !important;
}

/* White fade from left — hides photo behind content */
.int-photo-mask {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg,
      #ffffff 0%,
      #ffffff 45%,
      rgba(255, 255, 255, 0.5) 56%,
      rgba(255, 255, 255, 0.1) 69%) !important;
}

/* Layout */
.int-container {
  position: relative !important;
  z-index: 1 !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 40px !important;
  align-items: center !important;
}

.int-left {}

.int-right {}

/* Header */
.int-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: "Lato", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: #e2201a !important;
  margin-bottom: 12px !important;
}

.int-eyebrow::before {
  content: "" !important;
  display: block !important;
  width: 20px !important;
  height: 1.5px !important;
  background: #e2201a !important;
}

.int-title {
  font-family: "Fahkwang", sans-serif !important;
  font-size: clamp(20px, 2.5vw, 44px) !important;
  font-weight: 700 !important;
  color: #0f0e15 !important;
  line-height: 1.35 !important;
  margin: 0 0 14px !important;
}

.int-accent {
  color: #e2201a !important;
}

.int-desc {
  font-family: "Lato", sans-serif !important;
  font-size: 16px !important;
  line-height: 1.8 !important;
  color: #6b7280 !important;
  margin: 0 0 28px !important;
  max-width: 480px !important;
}

/* Cards row */
.int-cards {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  border: 1px solid #e8e9ec !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}

.int-card {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid #f0f1f3 !important;
  transition: background 0.2s ease !important;
  position: relative !important;
}

.int-card:last-child {
  border-bottom: none !important;
}

.int-card::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 0 !important;
  background: #e2201a !important;
  transition: width 0.25s ease !important;
}

.int-card:hover {
  background: #fafafa !important;
}

.int-card:hover::before {
  width: 3px !important;
}

/* Dot */
.int-card-dot {
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  border-radius: 50% !important;
  background: #e8e9ec !important;
  transition: background 0.25s ease !important;
}

.int-card:hover .int-card-dot {
  background: #e2201a !important;
}

.int-card-body {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex: 1 !important;
  gap: 12px !important;
}

.int-card-title {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0f0e15 !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  transition: color 0.25s ease !important;
}

.int-card:hover .int-card-title {
  color: #e2201a !important;
}

.int-discover {
  font-family: "Lato", sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #e2201a !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  opacity: 0 !important;
  transition:
    opacity 0.25s ease,
    gap 0.2s ease !important;
}

.int-card:hover .int-discover {
  opacity: 1 !important;
}

.int-discover:hover {
  gap: 8px !important;
}

/* ============================================================
   SECTION 2 — APPLICATIONS
============================================================ */
.app-section {
  background: #f4f4f6 !important;
  padding: 64px 30px !important;
  border-top: 1px solid #e8e9ec !important;
}

.app-container {
  max-width: 1280px !important;
  margin: 0 auto !important;
}

.app-header {
  margin-bottom: 44px !important;
}

.app-title {
  font-family: "Fahkwang", sans-serif !important;
  font-size: clamp(20px, 2.5vw, 40px) !important;
  font-weight: 700 !important;
  color: #0f0e15 !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  max-width: 100% !important;
  text-align: center;
}

.app-accent {
  color: #e2201a !important;
}

/* Horizontal track — matching Image 2 */
.app-track {
  display: flex !important;
  align-items: stretch !important;
  background: #ffffff !important;
  border: 1px solid #e8e9ec !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}

/* Vertical divider between cards */
.app-divider {
  width: 1px !important;
  background: #e8e9ec !important;
  flex-shrink: 0 !important;
}

/* Card */
.app-card {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  transition: background 0.25s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.app-card:hover {
  background: #fafafa !important;
}

/* Image wrap */
.app-img-wrap {
  position: relative !important;
  width: 100% !important;
  height: 160px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

.app-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.4s ease !important;
  filter: saturate(0.8) !important;
}

.app-card:hover .app-img {
  transform: scale(1.05) !important;
  filter: saturate(1) !important;
}

.app-img-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(15, 14, 21, 0.3) !important;
  transition: background 0.3s ease !important;
}

.app-card:hover .app-img-overlay {
  background: rgba(15, 14, 21, 0.15) !important;
}

/* Icon on image */
.app-img-icon {
  position: absolute !important;
  bottom: 12px !important;
  left: 14px !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #e2201a !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  transition: background 0.25s ease !important;
}

.app-img-icon svg {
  width: 22px !important;
  height: 22px !important;
}

.app-card:hover .app-img-icon {
  background: #e2201a !important;
  color: #ffffff !important;
}

/* Card body */
.app-card-body {
  padding: 20px 18px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  flex: 1 !important;
}

.app-card-title {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0f0e15 !important;
  margin: 0 !important;
  line-height: 1.35 !important;
  transition: color 0.25s ease !important;
}

.app-card:hover .app-card-title {
  color: #e2201a !important;
}

.app-card-desc {
  font-family: "Lato", sans-serif !important;
  font-size: 13px !important;
  line-height: 1.75 !important;
  color: #6b7280 !important;
  margin: 0 !important;
  flex: 1 !important;
}

/* Get Quote link */
.app-quote {
  font-family: "Lato", sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #e2201a !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-top: 4px !important;
  transition: gap 0.2s ease !important;
}

.app-quote:hover {
  gap: 8px !important;
  color: #b71b15 !important;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .int-container {
    grid-template-columns: 1fr !important;
  }

  .int-photo-mask {
    background: linear-gradient(180deg,
        #ffffff 0%,
        #ffffff 50%,
        rgba(255, 255, 255, 0.6) 100%) !important;
  }

  .int-section {
    min-height: auto !important;
  }
}

@media (max-width: 700px) {
  .app-track {
    flex-direction: column !important;
    gap: 20px;
  }

  .app-divider {
    width: 100% !important;
    height: 1px !important;
  }

  .app-img-wrap {
    height: 180px !important;
  }

  .int-section,
  .app-section {
    padding: 60px 16px !important;
  }
}

.or-section {
  background: #ffffff !important;
  padding: 64px 30px !important;
}

.or-container {
  max-width: 100% !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 64px !important;
  align-items: center !important;
}

/* Photo column */
.or-photo-col {}

.or-photo-wrap {
  position: relative !important;
  border-radius: 16px !important;
  overflow: visible !important;
}

.or-photo {
  width: 100% !important;
  height: 520px !important;
  object-fit: cover !important;
  border-radius: 16px !important;
  display: block !important;
  filter: saturate(0.9) !important;
}

/* Floating stat card */
.or-float-card {
  position: absolute !important;
  bottom: -20px !important;
  right: -24px !important;
  background: #ffffff !important;
  border: 1px solid #e8e9ec !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
  min-width: 220px !important;
}

.or-float-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  background: rgba(226, 32, 26, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.or-float-icon svg {
  width: 20px !important;
  height: 20px !important;
}

.or-float-num {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #e2201a !important;
  line-height: 1 !important;
}

.or-float-label {
  font-family: "Lato", sans-serif !important;
  font-size: 11px !important;
  color: #6b7280 !important;
  line-height: 1.4 !important;
  max-width: 140px !important;
}

/* Content column */
.or-content-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.or-title {
  font-family: "Fahkwang", sans-serif !important;
  font-size: clamp(22px, 2.8vw, 40px) !important;
  font-weight: 700 !important;
  color: #373643 !important;
  line-height: 1.3 !important;
  margin: 0 0 14px !important;
}

.or-accent {
  color: #e2201a !important;
}

.or-lead {
  font-family: "Lato", sans-serif !important;
  font-size: 18px !important;
  line-height: 1.8 !important;
  color: #6b7280 !important;
  margin: 0 0 20px !important;
}

/* Items */
.or-items {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  border: 1px solid #e8e9ec !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.or-item:nth-child(odd) {
  border-right: 1px solid #f0f1f3 !important;
}

.or-item:nth-child(1),
.or-item:nth-child(2) {
  border-bottom: 1px solid #f0f1f3 !important;
}

/* remove bottom border from bottom row */
.or-item:nth-child(3),
.or-item:nth-child(4) {
  border-bottom: none !important;
}

.or-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 22px 20px !important;
  border-bottom: 1px solid #f0f1f3 !important;
  transition: background 0.2s ease !important;
  position: relative !important;
}

.or-item:last-child {
  border-bottom: none !important;
}

.or-item::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 0 !important;
  background: #e2201a !important;
  transition: width 0.25s ease !important;
}

.or-item:hover {
  background: #fafafa !important;
}

.or-item:hover::before {
  width: 3px !important;
}



.or-item-icon {
  flex-shrink: 0 !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 9px !important;
  background: rgba(226, 32, 26, 0.07) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #e2201a !important;
  margin-top: 2px !important;
}

.or-item-icon svg {
  width: 18px !important;
  height: 18px !important;
  stroke: #e2201a !important;
}

/* ── Text block ── */
.or-item-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}

.or-item-title {
  font-family: "Lato", sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #1e1d27 !important;
  line-height: 1.35 !important;
  margin: 0 !important;
}

.or-item-desc {
  font-family: "Lato", sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 400 !important;
  color: #6b7280 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* ── Hover: left red bar ── */
.or-item::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 0 !important;
  background: #e2201a !important;
  transition: width 0.25s ease !important;
  border-radius: 0 !important;
}

.or-item:hover {
  background: #fafafa !important;
}

.or-item:hover::before {
  width: 3px !important;
}

.wci-section {
  background: #ffffff !important;
  padding: 64px 30px !important;
}

.wci-container {
  max-width: 100% !important;
}

/* ── Header ── */
.wci-header {
  display: flex;
  flex-direction: column;
  align-items: center !important;
  margin-bottom: 30px !important;
}

.wci-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: "Lato", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: #e2201a !important;
  margin-bottom: 12px !important;
}

.wci-eyebrow::before {
  content: "" !important;
  display: block !important;
  width: 20px !important;
  height: 1.5px !important;
  background: #e2201a !important;
}

.wci-title {
  font-family: "Fahkwang", sans-serif !important;
  font-size: clamp(24px, 3vw, 40px) !important;
  font-weight: 700 !important;
  color: #373643 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  text-align: center;
}

.wci-accent {
  color: #e2201a !important;
}

/* ── Grid ── */
.wci-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1px !important;
  background: #e8e9ec !important;
  border: 1px solid #e8e9ec !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* ── Card ── */
.wci-card {
  background: #ffffff !important;
  padding: 36px 32px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 22px !important;
  transition: background 0.25s ease !important;
  position: relative !important;
}

.wci-card:hover {
  background: #fafafa !important;
}

/* ── Icon ── */
.wci-icon-wrap {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  border-radius: 16px !important;
  background: rgba(226, 32, 26, 0.06) !important;
  border: 1px solid rgba(226, 32, 26, 0.12) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #e2201a !important;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease !important;
}

.wci-svg {
  width: 34px !important;
  height: 34px !important;
}

.wci-card:hover .wci-icon-wrap {
  background: rgba(226, 32, 26, 0.12) !important;
  border-color: rgba(226, 32, 26, 0.25) !important;
  transform: scale(1.05) !important;
}

/* ── Body ── */
.wci-card-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  flex: 1 !important;
}

.wci-card-title {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #373643 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  transition: color 0.25s ease !important;
}

.wci-card:hover .wci-card-title {
  color: #e2201a !important;
}

.wci-card-desc {
  font-family: "Lato", sans-serif !important;
  font-size: 16px !important;
  line-height: 1.8 !important;
  color: #6b7280 !important;
  margin: 0 !important;
  transition: color 0.25s ease !important;
}

.wci-card:hover .wci-card-desc {
  color: #4b5563 !important;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .wci-grid {
    grid-template-columns: 1fr !important;
  }

  .wci-card {
    padding: 28px 24px !important;
  }
}

@media (max-width: 480px) {
  .wci-section {
    padding: 60px 16px !important;
  }

  .wci-card {
    flex-direction: column !important;
    gap: 16px !important;
    padding: 24px 20px !important;
  }

  .wci-icon-wrap {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
  }
}


.sch-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 18px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  cursor: pointer;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
  height: 100%;
}

.sch-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #e2201a;
  opacity: 0;
  border-radius: 18px 0 0 18px;
  transition: opacity 0.3s ease;
}

.sch-card:hover {
  border-color: rgba(226, 32, 26, 0.25);
  box-shadow: 0 12px 32px rgba(226, 32, 26, 0.09);
}

.sch-card:hover::before {
  opacity: 1;
}

.sch-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}

.sch-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 13px;
  background: #e2201a;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(226, 32, 26, 0.22);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sch-card:hover .sc-icon {
  transform: scale(1.07) rotate(4deg);
  box-shadow: 0 8px 20px rgba(226, 32, 26, 0.32);
}

.sch-icon svg {
  width: 24px;
  height: 24px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sch-title {
  font-family: 'Fahkwang', sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: #1e1d27;
  line-height: 1.3;
  transition: color 0.3s ease;
}

.sch-card:hover .sch-title {
  color: #e2201a;
}

.sch-tag {
  font-size: 11px;
  font-weight: 700;
  color: #e2201a;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  opacity: 0.85;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  transition: opacity 0.3s ease;
  text-align: center;
}

.sch-card:hover .sch-tag {
  opacity: 1;
}

.sch-desc {
  font-size: 15px;
  color: #666373;
  line-height: 1.6;
  text-align: center;
  font-weight: 500;
}

.sch-card:hover .sch-desc {
  color: #3a3944;
}


/* ── Section wrapper ── */
.logo-marquee-section {
  position: relative;
  width: 100%;
  padding: 0;
  background: #fff;
  overflow: hidden;
}

/* ── Left & right fade shadows ── */
.logo-marquee-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 180px;
  z-index: 2;
  pointer-events: none;
}

.logo-marquee-fade--left {
  left: 0;
  background: linear-gradient(to right, #ffffff 0%, transparent 100%);
}

.logo-marquee-fade--right {
  right: 0;
  background: linear-gradient(to left, #ffffff 0%, transparent 100%);
}

/* ── Scrolling track ── */
.logo-marquee-track {
  overflow: hidden;
  width: 100%;
}

.logo-marquee-inner {
  display: flex;
  align-items: center;
  gap: 60px;
  width: max-content;
  animation: logo-scroll 30s linear infinite;
}

/* Pause on hover */
.logo-marquee-section:hover .logo-marquee-inner {
  animation-play-state: paused;
}

/* ── Each logo item ── */
.logo-marquee-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-marquee-item img {
  height: 170px !important;
  width: 350px !important;
  max-width: 350px !important;
  object-fit: contain !important;
  opacity: 1 !important;
  transition: opacity 0.3s ease, filter 0.3s ease !important;
}

.logo-marquee-section:hover .logo-marquee-item img {
  opacity: 1;
  filter: grayscale(0%);
}

/* ── Keyframe ── */
@keyframes logo-scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}


/* ── Grid ── */
.core-solutions-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

/* ── Card ── */
.core-solution-card-2 {
  background: #ffffff !important;
  padding: 28px !important;
  border-radius: 16px !important;
  border-left: 4px solid #e2201a !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.3s ease !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.core-solution-card-2:hover {
  box-shadow: 0 6px 24px rgba(226, 32, 26, 0.1) !important;
  transform: translateY(-2px) !important;
}

.csc2-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.csc2-icon-wrap {
  flex-shrink: 0 !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  background: rgba(226, 32, 26, 0.07) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.csc2-icon-wrap svg {
  width: 22px !important;
  height: 22px !important;
  stroke: #e2201a !important;
}

.csc2-title {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #1e1d27 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}

.csc2-desc {
  font-family: "Lato", sans-serif !important;
  font-size: 15px !important;
  color: #666373 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}


/* ── Grid ── */
.achieve-grid-2 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  margin: 0 auto !important;
}

/* ── Card ── */
.achieve-card-2 {
  background: #ffffff !important;
  padding: 32px !important;
  border-radius: 16px !important;
  border: 1px solid #e5e7eb !important;
  text-align: center !important;
  transition: all 0.3s ease !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.achieve-card-2:hover {
  box-shadow: 0 8px 28px rgba(226, 32, 26, 0.09) !important;
  border-color: rgba(226, 32, 26, 0.2) !important;
  transform: translateY(-3px) !important;
}

/* ── Icon circle ── */
.ac2-icon-wrap {
  width: 64px !important;
  height: 64px !important;
  background: #fff0ef !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 16px !important;
  flex-shrink: 0 !important;
  transition: background 0.3s ease !important;
}

.achieve-card-2:hover .ac2-icon-wrap {
  background: rgba(226, 32, 26, 0.15) !important;
}

.ac2-icon-wrap i {
  font-size: 28px !important;
  color: #e2201a !important;
}

/* ── Red rule ── */
.ac2-rule {
  display: inline-block !important;
  width: 24px !important;
  height: 3px !important;
  background: #e2201a !important;
  border-radius: 2px !important;
  margin-bottom: 16px !important;
}

/* ── Title ── */
.ac2-title {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #1e1d27 !important;
  line-height: 1.3 !important;
  margin: 0 0 12px !important;
}

/* ── Description ── */
.ac2-desc {
  font-family: "Lato", sans-serif !important;
  font-size: 14px !important;
  color: #787878 !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .or-container {
        grid-template-columns: 1fr !important;
    }
    
    .or-photo-col {
        order: 2;
    }
    
    .or-content-col {
        order: 1;
    }
    
  .achieve-grid-2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 560px) {
  .achieve-grid-2 {
    grid-template-columns: 1fr !important;
  }
  
  .core-solutions-grid-2 {
    grid-template-columns: 1fr !important;  
  }
}


/* ── Card ── */
.impl-card {
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 28px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 14px !important;
  border: 1px solid #f0f0f0 !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
  height: 100% !important;
}

.impl-card::before {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: #e2201a !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform 0.3s ease !important;
}

.impl-card:hover {
  box-shadow: 0 8px 32px rgba(226, 32, 26, 0.1) !important;
  border-color: rgba(226, 32, 26, 0.15) !important;
  transform: translateY(-4px) !important;
}

.impl-card:hover::before {
  transform: scaleX(1) !important;
}

/* ── Step number ── */
.impl-step {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #e2201a !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}

/* ── Icon ── */
.impl-icon-wrap {
  width: 58px !important;
  height: 58px !important;
  background: #e2201a !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: 0 6px 16px rgba(226, 32, 26, 0.28) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.impl-card:hover .impl-icon-wrap {
  transform: scale(1.07) rotate(4deg) !important;
  box-shadow: 0 10px 24px rgba(226, 32, 26, 0.38) !important;
}

.impl-icon-wrap svg {
  width: 26px !important;
  height: 26px !important;
  stroke: #ffffff !important;
  fill: none !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* ── Title ── */
.impl-title {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1e1d27 !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  transition: color 0.3s ease !important;
}

.impl-card:hover .impl-title {
  color: #e2201a !important;
}

/* ── Divider ── */
.impl-divider {
  width: 28px !important;
  height: 2px !important;
  background: #e2201a !important;
  border-radius: 2px !important;
  opacity: 0.4 !important;
  flex-shrink: 0 !important;
}

/* ── Description ── */
.impl-desc {
  font-family: "Lato", sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  color: #787878 !important;
  line-height: 1.75 !important;
  margin: 0 !important;
}

/* ══════════════════════════════════════
   SECTION SPACING
══════════════════════════════════════ */

.am-section-space {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}

@media (max-width: 1024px) {
  .am-section-space {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
}

@media (max-width: 767px) {
  .am-section-space {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
}

/* ══════════════════════════════════════
   TYPOGRAPHY
══════════════════════════════════════ */

/* Main heading (h1 / hero titles) */
.am-heading-main h1 {
  font-size: 40px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}

.am-heading-main h2 {
  font-size: 32px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}

.am-heading-main h3 {
  font-size: 26px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}

@media (max-width: 1024px) {
  .am-heading-main h1 {
    font-size: 36px !important;
  }

  .am-heading-main h2 {
    font-size: 29px !important;
  }

  .am-heading-main h3 {
    font-size: 26px !important;
  }
}

@media (max-width: 767px) {
  .am-heading-main h1 {
    font-size: 24px !important;
  }

  .am-heading-main h2 {
    font-size: 24px !important;
  }

  .am-heading-main h3 {
    font-size: 24px !important;
  }
}

/* Section heading (h2) */
.am-heading {
  font-size: 40px !important;
  line-height: 1.25 !important;
}

@media (max-width: 1024px) {
  .am-heading {
    font-size: 36px !important;
  }
}

@media (max-width: 767px) {
  .am-heading {
    font-size: 24px !important;
  }
}

/* Body text */
.am-body p {
  font-size: 20px !important;
  line-height: 1.7 !important;
  font-weight: 500 !important;
}

@media (max-width: 1024px) {
  .am-body p {
    font-size: 16px !important;
  }
}

@media (max-width: 767px) {
  .am-body p {
    font-size: 15px !important;
  }
}

/* ══════════════════════════════════════
   INNER PADDING (cards / containers)
══════════════════════════════════════ */

.am-inner-pad {
  padding: 30px !important;
}

@media (max-width: 1024px) {
  .am-inner-pad {
    padding: 20px !important;
  }
}

@media (max-width: 767px) {
  .am-inner-pad {
    padding: 0 15px 15px 15px !important;
  }
}

/* Horizontal only variant */
.am-inner-pad-x {
  padding-left: 30px !important;
  padding-right: 30px !important;
}

@media (max-width: 1024px) {
  .am-inner-pad-x {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

@media (max-width: 767px) {
  .am-inner-pad-x {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

/* Vertical only variant */
.am-inner-pad-y {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}

@media (max-width: 1024px) {
  .am-inner-pad-y {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
}

@media (max-width: 767px) {
  .am-inner-pad-y {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }
}


.am-img {
  height: 600px !important;
}

@media (max-width: 1024px) {
  .am-img {
    height: 400px !important;
  }
}

@media (max-width: 767px) {
  .am-img {
    height: 250px !important;
  }
}

/* ====================================================================
   CARD RESPONSIVE — font-sizing & spacing for tablets & mobiles
   Applied to all card types across the system. Organised by breakpoint
   so each media query fires once (no duplicate @media blocks).
   ==================================================================== */

/* ── Tablet landscape ≤ 1024px ─────────────────────────────────────── */
@media (max-width: 1024px) {

  /* Core Solution Cards */
  .core-solution-card .csc-title {
    font-size: 21px !important;
  }

  .core-solution-card .csc-desc {
    font-size: 15px !important;
  }

  .core-solution-card .csc-icon-wrap {
    width: 50px !important;
    height: 50px !important;
    font-size: 22px !important;
  }

  /* Achievement Cards */
  .achieve-card {
    padding: 34px 26px !important;
  }

  .achieve-card .ac-icon-wrap {
    width: 56px !important;
    height: 56px !important;
    font-size: 24px !important;
  }

  .achieve-card .ac-title {
    font-size: 18px !important;
  }

  .achieve-card .ac-desc {
    font-size: 16px !important;
  }

  /* Industries Grid */
  .industry-item .ii-title {
    font-size: 22px !important;
  }

  .industry-item .ii-desc {
    font-size: 15px !important;
  }

  /* AS Cards */
  .as-card-title {
    font-size: 22px !important;
  }

  .as-card-desc {
    font-size: 17px !important;
  }

  /* Compliance Badges */
  .cb-desc {
    font-size: 17px !important;
  }

  /* ZP sub-card text */
  .zp-card-subheader {
    font-size: 18px !important;
  }

  .zp-card-desc {
    font-size: 15px !important;
  }

  /* IN (dark numbered) Cards */
  .in-card-title {
    font-size: 22px !important;
  }

  .in-card-desc {
    font-size: 16px !important;
  }

  /* WE (why-choose) grid items */
  .we-item {
    padding: 28px 28px !important;
  }

  .we-item-title {
    font-size: 18px !important;
  }

  .we-item-desc {
    font-size: 16px !important;
  }

  /* AW (how-automera-works) image cards */
  .aw-card-title {
    font-size: 18px !important;
  }

  .aw-card-desc {
    font-size: 15px !important;
  }
}

/* ── Tablet portrait / large mobile ≤ 768px ─────────────────────────── */
@media (max-width: 768px) {

  /* Core Solution Cards */
  .core-solution-card .csc-title {
    font-size: 19px !important;
  }

  .core-solution-card .csc-label {
    font-size: 10px !important;
  }

  .core-solution-card .csc-desc {
    font-size: 14px !important;
  }

  .core-solution-card .csc-icon-wrap {
    width: 44px !important;
    height: 44px !important;
    font-size: 20px !important;
    border-radius: 10px !important;
  }

  /* Achievement Cards */
  .achieve-card {
    padding: 28px 20px !important;
  }

  .achieve-card .ac-icon-wrap {
    width: 50px !important;
    height: 50px !important;
    font-size: 22px !important;
  }

  .achieve-card .ac-title {
    font-size: 17px !important;
  }

  .achieve-card .ac-desc {
    font-size: 15px !important;
  }

  /* Industries Grid */
  .industry-item {
    padding: 18px 16px !important;
  }

  .industry-item .ii-title {
    font-size: 18px !important;
  }

  .industry-item .ii-desc {
    font-size: 14px !important;
  }

  .industry-item .ii-icon-wrap {
    width: 38px !important;
    height: 38px !important;
    font-size: 18px !important;
  }

  /* AS Cards */
  .as-card {
    padding: 22px !important;
  }

  .as-card-title {
    font-size: 19px !important;
  }

  .as-card-desc {
    font-size: 16px !important;
  }

  /* Compliance Badges */
  .cb-desc {
    font-size: 15px !important;
  }

  /* ZP sub-card text */
  .zp-card-subheader {
    font-size: 16px !important;
  }

  .zp-card-desc {
    font-size: 14px !important;
  }

  /* IN Cards */
  .in-card-title {
    font-size: 20px !important;
  }

  .in-card-desc {
    font-size: 15px !important;
  }

  /* WE grid items */
  .we-item {
    padding: 24px 20px !important;
  }

  .we-item-title {
    font-size: 17px !important;
  }

  .we-item-desc {
    font-size: 15px !important;
    padding-left: 20px !important;
  }

  /* AW image cards */
  .aw-card-title {
    font-size: 16px !important;
  }

  .aw-card-desc {
    font-size: 14px !important;
  }
}

/* ── Small mobile ≤ 480px ───────────────────────────────────────────── */
@media (max-width: 480px) {

  /* Core Solution Cards */
  .core-solution-card .csc-title {
    font-size: 17px !important;
  }

  .core-solution-card .csc-desc {
    font-size: 13.5px !important;
  }

  /* Achievement Cards */
  .achieve-card {
    padding: 24px 16px !important;
  }

  .achieve-card .ac-icon-wrap {
    width: 44px !important;
    height: 44px !important;
    font-size: 20px !important;
  }

  .achieve-card .ac-title {
    font-size: 16px !important;
  }

  .achieve-card .ac-desc {
    font-size: 14px !important;
  }

  /* Industries Grid */
  .industry-item {
    padding: 14px 12px !important;
    gap: 12px !important;
  }

  .industry-item .ii-title {
    font-size: 16px !important;
  }

  .industry-item .ii-desc {
    font-size: 13px !important;
  }

  /* AS Cards */
  .as-card {
    padding: 18px !important;
  }

  .as-card-title {
    font-size: 17px !important;
  }

  .as-card-desc {
    font-size: 15px !important;
  }

  /* ZP sub-card text */
  .zp-card-subheader {
    font-size: 15px !important;
  }

  .zp-card-desc {
    font-size: 13.5px !important;
  }

  /* IN Cards */
  .in-card-title {
    font-size: 18px !important;
  }

  .in-card-desc {
    font-size: 14px !important;
  }

  /* WE grid — stack to 1 column */
  .we-grid {
    grid-template-columns: 1fr !important;
  }

  .we-item {
    padding: 20px 16px !important;
  }

  .we-item:nth-child(3),
  .we-item:nth-child(4) {
    border-bottom: 1px solid #eeeeee !important;
  }

  .we-item:last-child {
    border-bottom: none !important;
  }

  .we-item:nth-child(even) {
    border-right: none !important;
  }

  .we-item-title {
    font-size: 16px !important;
  }

  .we-item-desc {
    font-size: 14px !important;
    padding-left: 0 !important;
  }

  /* AW image cards */
  .aw-card-title {
    font-size: 15px !important;
  }
}

/* ====================================================================
   Arabic typography — '29LT Bukra', sans-serif for all RTL text
   Placed at end of file so source-order wins over equal-specificity
   rules defined above.  Pseudo-elements (::before / ::after) are
   intentionally excluded — * never matches them, so icon fonts are safe.
   ==================================================================== */

/* Covers every single-class selector in this file (specificity 0,1,0) */
.rtl * {
  font-family: '29LT Bukra', sans-serif !important;
}

/* Covers compound two-class patterns (adds .rtl prefix → 0,3,0 > 0,2,0) */
.rtl .elementor-heading-title,
.rtl .achieve-card .ac-title,
.rtl .achieve-card .ac-desc,
.rtl .core-solution-card .csc-title,
.rtl .core-solution-card .csc-label,
.rtl .core-solution-card .csc-desc,
.rtl .industry-item .ii-title,
.rtl .industry-item .ii-desc {
  font-family: '29LT Bukra', sans-serif !important;
}

/* Font Awesome 5 sets font-family on the element itself (.fas, .far, .fab),
   not on ::before — so .rtl * overrides it and breaks icons.
   Restore the correct icon font AFTER the broad override (higher specificity
   0,2,0 beats 0,1,0, and later source order settles any ties). */
.rtl .fa,
.rtl .fas,
.rtl .far,
.rtl .fal {
  font-family: 'Font Awesome 5 Free' !important;
}

.rtl .fab {
  font-family: 'Font Awesome 5 Brands' !important;
}

.h-full {
  height: 100% !important;
}


/* ══════════════════════════════════════
   SECTION 1 — DARK
══════════════════════════════════════ */

.ydark-section {
  background: #0f0e15 !important;
  padding: 0 30px !important;
}

.ydark-container {
  max-width: 1280px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 64px !important;
  align-items: center !important;
}

.ydark-left {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

.ydark-heading {
  font-family: "Fahkwang", sans-serif !important;
  font-size: clamp(22px, 2.8vw, 36px) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}

.ydark-lead {
  font-family: "Lato", sans-serif !important;
  font-size: 15px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  line-height: 1.75 !important;
  margin: 0 !important;
}

.ydark-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.ydark-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-family: "Lato", sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
}

.ydark-check {
  flex-shrink: 0 !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: #e2201a !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.ydark-check svg {
  width: 12px !important;
  height: 12px !important;
}

.ydark-footer {
  font-family: "Lato", sans-serif !important;
  font-size: 13.5px !important;
  color: rgba(255, 255, 255, 0.45) !important;
  line-height: 1.7 !important;
  margin: 0 !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.ydark-right {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.ydark-visual {
  width: 100% !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* ══════════════════════════════════════
   SECTION 2 — WHITE
══════════════════════════════════════ */

.ylight-section {
  background: #ffffff !important;
  padding: 0 30px !important;
}

.ylight-container {
  max-width: 1280px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 16px !important;
}

.ylight-eyebrow {
  font-family: "Lato", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #e2201a !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
}

.ylight-heading {
  font-family: "Fahkwang", sans-serif !important;
  font-size: clamp(24px, 3vw, 40px) !important;
  font-weight: 700 !important;
  color: #1e1d27 !important;
  line-height: 1.3 !important;
  text-align: center !important;
  margin: 0 !important;
}

.ylight-accent {
  color: #e2201a !important;
}

.ylight-lead {
  font-family: "Lato", sans-serif !important;
  font-size: 16px !important;
  color: #6b7280 !important;
  line-height: 1.75 !important;
  text-align: center !important;
  max-width: 560px !important;
  margin: 0 !important;
}

.ylight-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 20px !important;
  width: 100% !important;
  margin-top: 24px !important;
}

.ylight-card {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 16px !important;
  padding: 28px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 18px !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.ylight-card::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 0 !important;
  background: #e2201a !important;
  transition: width 0.25s ease !important;
}

.ylight-card:hover {
  border-color: rgba(226, 32, 26, 0.2) !important;
  box-shadow: 0 8px 28px rgba(226, 32, 26, 0.09) !important;
  transform: translateY(-2px) !important;
}

.ylight-card:hover::before {
  width: 3px !important;
}

.ylight-icon-wrap {
  flex-shrink: 0 !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 12px !important;
  background: rgba(226, 32, 26, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.3s ease !important;
}

.ylight-card:hover .ylight-icon-wrap {
  background: rgba(226, 32, 26, 0.14) !important;
}

.ylight-icon-wrap svg {
  width: 22px !important;
  height: 22px !important;
}

.ylight-card-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.ylight-card-title {
  font-family: "Fahkwang", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1e1d27 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  transition: color 0.3s ease !important;
}

.ylight-card:hover .ylight-card-title {
  color: #e2201a !important;
}

.ylight-card-desc {
  font-family: "Lato", sans-serif !important;
  font-size: 13.5px !important;
  color: #6b7280 !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */

@media (max-width: 1024px) {
  .ydark-section,
  .ylight-section {
    padding: 60px 30px !important;
  }

  .ydark-container {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
}

@media (max-width: 767px) {
  .ydark-section,
  .ylight-section {
    padding: 40px 20px !important;
  }

  .ylight-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ── Meet Our Team ───────────────────────────────────────── */
.mt-section {
  padding: 100px 0;
  background: #f4f5f7;
}
.mt-header {
  text-align: center;
  margin-bottom: 60px;
}
.mt-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #E2201A;
  margin-bottom: 14px;
}
.mt-title {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  color: #1e1d27;
  font-family: 'Fahkwang', sans-serif;
  margin-bottom: 16px;
  line-height: 1.3;
}
.mt-title span { color: #E2201A; }
.mt-subtitle {
  font-size: 17px;
  color: #787878;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.75;
}

/* Grid */
.mt-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

/* Card */
.mt-card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}
.mt-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(226,32,26,0.12);
}

/* Photo */
.mt-photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/4;
  background: #e8e8e8;
}
.mt-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.5s ease;
  display: block;
}
.mt-card:hover .mt-photo img {
  transform: scale(1.05);
}
.mt-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(30,29,39,0.75) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.mt-card:hover .mt-photo-overlay { opacity: 1; }

/* Social links (shown on hover) */
.mt-social {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  opacity: 0;
  transition: opacity 0.3s ease, bottom 0.3s ease;
  z-index: 2;
}
.mt-card:hover .mt-social {
  opacity: 1;
  bottom: 28px;
}
.mt-social a {
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  transition: background 0.2s;
  text-decoration: none;
}
.mt-social a:hover { background: #E2201A; border-color: #E2201A; }

/* Info */
.mt-info {
  padding: 20px 20px 24px;
}
.mt-rule {
  width: 36px;
  height: 3px;
  background: #E2201A;
  border-radius: 2px;
  margin-bottom: 12px;
}
.mt-name {
  font-size: 18px;
  font-weight: 700;
  color: #1e1d27;
  font-family: 'Fahkwang', sans-serif;
  margin-bottom: 4px;
  line-height: 1.3;
}
.mt-role {
  font-size: 13px;
  font-weight: 600;
  color: #E2201A;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
}
.mt-bio {
  font-size: 13.5px;
  color: #787878;
  line-height: 1.7;
}

/* RTL */
.rtl .mt-rule { margin-right: 0; margin-left: auto; }
.rtl .mt-title { font-family: '29LT Bukra', sans-serif; }
.rtl .mt-name  { font-family: '29LT Bukra', sans-serif; }

/* Responsive */
@media (max-width: 1200px) { .mt-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .mt-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (max-width: 600px)  {
  .mt-grid { grid-template-columns: 1fr; }
  .mt-section { padding: 60px 0; }
  .mt-header { margin-bottom: 40px; }
}

/* ── Team Section v2 (asymmetric layout) ─────────────────── */
.tm-section {
  padding: 100px 0;
  background: #fff;
}

/* Top row: text left + 2 cards right */
.tm-top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
  align-items: start;
}
.tm-intro {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-right: 40px;
}
.tm-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f4f5f7;
  border-radius: 100px;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 600;
  color: #1e1d27;
  letter-spacing: 0.5px;
  margin-bottom: 24px;
  width: fit-content;
}
.tm-tag::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E2201A;
  flex-shrink: 0;
}
.tm-heading {
  font-size: clamp(26px, 3.2vw, 42px) !important;
  font-weight: 700 !important;
  color: #1e1d27 !important;
  font-family: 'Fahkwang', sans-serif !important;
  line-height: 1.2 !important;
  margin-bottom: 20px !important;
}
.tm-heading span { color: #E2201A; }
.tm-desc {
  font-size: 15px !important;
  color: #787878 !important;
  line-height: 1.8 !important;
  margin-bottom: 0 !important;
}

/* Bottom row: 3 cards + explore box */
.tm-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 24px;
  align-items: start;
}

/* Card */
.tm-card {
  border-radius: 16px;
  overflow: hidden;
  background: #f4f5f7;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.tm-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.1);
}

/* Photo area */
.tm-photo-wrap {
  position: relative;
  display: flex;
}
.tm-photo-wrap img {
  width: 100%;
  aspect-ratio: 3/3.6;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* Social sidebar (left edge on photo) */
.tm-socials {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}
.tm-card:hover .tm-socials { opacity: 1; }
.tm-socials a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #1e1d27;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  text-decoration: none;
  transition: background 0.2s;
}
.tm-socials a:hover { background: #E2201A; }

/* Card info */
.tm-info {
  padding: 18px 18px 20px;
}
.tm-name {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #1e1d27 !important;
  font-family: 'Fahkwang', sans-serif !important;
  margin-bottom: 4px !important;
  line-height: 1.3 !important;
}
.tm-role {
  font-size: 13px !important;
  color: #787878 !important;
  font-weight: 400 !important;
  margin: 0 !important;
}

/* Explore box */
.tm-explore {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  border-radius: 16px;
  border: 2px dashed #E2E8F0;
  min-height: 200px;
  padding: 32px 20px;
  text-align: center;
  text-decoration: none;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.tm-explore:hover {
  border-color: #E2201A;
  background: #FFF0EF;
}
.tm-explore-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #1e1d27;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  transition: background 0.3s;
}
.tm-explore:hover .tm-explore-icon { background: #E2201A; }
.tm-explore-label {
  font-size: 15px;
  font-weight: 600;
  color: #1e1d27;
  line-height: 1.4;
}

/* RTL */
.rtl .tm-intro { padding-right: 0; padding-left: 40px; }
.rtl .tm-heading, .rtl .tm-name { font-family: '29LT Bukra', sans-serif !important; }
.rtl .tm-socials { left: auto; right: 14px; }

/* Responsive */
@media (max-width: 1100px) {
  .tm-top { grid-template-columns: 1fr 1fr; }
  .tm-top .tm-card:last-child { display: none; }
  .tm-bottom { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .tm-section { padding: 60px 0; }
  .tm-top { grid-template-columns: 1fr; }
  .tm-top .tm-card:last-child { display: block; }
  .tm-bottom { grid-template-columns: 1fr 1fr; }
  .tm-intro { padding: 0; margin-bottom: 8px; }
}
@media (max-width: 500px) {
  .tm-bottom { grid-template-columns: 1fr; }
}



/* Outer grid wrapper — assign to the parent container holding all cards */
.tm2-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
}

/* Single card container */
.tm2-card {
  background: #F4F5F7 !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  padding: 0 !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.07) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* Image widget wrapper — assign to the image container/widget */
.tm2-photo {
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  background: #F0F0F0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}
.tm2-photo img,
.tm2-photo .elementor-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
  display: block !important;
  transition: transform 0.4s ease !important;
}
.tm2-card:hover .tm2-photo img,
.tm2-card:hover .tm2-photo .elementor-image img {
  transform: scale(1.04) !important;
}

/* Text area container — assign to the inner flex container */
.tm2-info {
  background: #F4F5F7 !important;
  padding: 18px 20px 22px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

/* Red rule — assign to Divider widget */
.tm2-rule {
  width: 32px !important;
  height: 3px !important;
  min-height: 3px !important;
  border: none !important;
  background: #E2201A !important;
  margin: 0 0 10px 0 !important;
}

/* Name heading — assign to h6 heading widget */
.tm2-name .elementor-heading-title,
.tm2-name h6,
.tm2-name h5,
.tm2-name h4 {
  font-family: 'Fahkwang', sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #1e1d27 !important;
  line-height: 1.3 !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
}

/* Role/title heading — assign to p heading widget */
.tm2-role .elementor-heading-title,
.tm2-role p {
  font-family: 'Lato', sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #787878 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* RTL */
.rtl .tm2-rule { margin: 0 0 10px auto !important; }
.rtl .tm2-name .elementor-heading-title,
.rtl .tm2-name h6,
.rtl .tm2-role .elementor-heading-title, 
.rtl .tm2-role p {
  font-family: '29LT Bukra', sans-serif !important;
}

/* Tablet ≤1024px: 2 columns */
@media (max-width: 1024px) {
  .tm2-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
  /*.tm2-photo { height: 240px !important; }*/
}

/* Mobile ≤767px: 1 column */
@media (max-width: 767px) {
  .tm2-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /*.tm2-photo { height: 300px !important; }*/
  .tm2-info { padding: 16px 16px 20px 16px !important; }
}