/* ============================  epargne.css  ============================ */
/* ======= TOKEN SYSTEM (same as previous pages) ======= */
:root{
  --ff-head:"Libre Baskerville",serif;
  --ff-body:"Almarai",sans-serif;

  --bg:#fff;  --fg:#1a1a1a;
  --section-alt:#f4f4f4;
  --card-bg:#fff; --border:#e1e1e1;
  --accent:#043f82; --accent-hover:#1251b8;
  --overlay:rgba(0,0,0,.45);
}
[data-theme="dark"]{
  --bg:#121212; --fg:#f3f3f3;
  --section-alt:#1c1c1c;
  --card-bg:#1e1e1e; --border:#333;
  --accent:#5196ff; --accent-hover:#7cb0ff;
  --overlay:rgba(0,0,0,.55);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--ff-body);background:var(--bg);color:var(--fg);line-height:1.65;}
h1,h2,h3{font-family:var(--ff-head);color:var(--fg);line-height:1.25;}
h2{font-size:clamp(1.8rem,2vw + 1rem,2.5rem);margin-bottom:2rem;}
.container{width:min(92%,1200px);margin-inline:auto;}

section{padding:4rem 0;}
section:nth-of-type(odd){background:var(--section-alt);}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:60vh;
  /* background:url("{'/static/css/images/loan-hero.png'}") center/cover no-repeat; */
  display:flex;align-items:center;justify-content:center;text-align:center;isolation:isolate;}
.hero-overlay{position:absolute;inset:0;background:var(--overlay);z-index:-1;}
.hero-content h1{font-size:clamp(2.1rem,4vw + 1rem,3.4rem);margin-bottom:1rem;color:#fff;}
.hero-content p{font-size:clamp(1rem,1vw + .9rem,1.35rem);color:#f8f8f8;}

/* ---------- 3-FEATURE GRID ---------- */
.feature-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.feature-card{background:var(--card-bg);padding:2rem 1.5rem;border:1px solid var(--border);border-radius:10px;box-shadow:0 4px 10px rgb(0 0 0 / .05);text-align:center;transition:transform .3s ease;}
.feature-card:hover{transform:translateY(-4px);}
.feature-card h3{font-size:1.25rem;margin-bottom:.65rem;}

/* ---------- OPENING CONDITIONS ---------- */
.opening-grid{display:grid;gap:3rem 4rem;grid-template-columns:1fr 1fr;align-items:center;}
@media(max-width:820px){.opening-grid{grid-template-columns:1fr;}}
.opening-text ul{list-style:none;margin-top:1.25rem;}
.opening-text li{padding:.8rem 0;border-bottom:1px solid var(--border);}
.opening-text li:last-child{border:none;}
.opening-visual img{max-width:100%;height:auto;}

/* ---------- STEP-BY-STEP ---------- */
.step-list{counter-reset:stp;list-style:none;display:grid;gap:2.4rem;}
.step-list li{display:flex;gap:1.2rem;align-items:flex-start;}
@media(max-width:600px){.step-list li{flex-direction:column;}}
.step-num{counter-increment:stp;content:counter(stp);flex:0 0 2.4rem;display:grid;place-items:center;background:var(--accent);color:#fff;border-radius:50%;font-weight:700;height:2.4rem;}
.step-content h3{font-size:1.15rem;margin-bottom:.35rem;}

/* ---------- BENEFITS GRID ---------- */
.benefit-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.benefit-card{background:var(--card-bg);padding:2rem 1.5rem;border:1px solid var(--border);border-radius:10px;box-shadow:0 4px 10px rgb(0 0 0 / .05);text-align:center;transition:transform .3s ease;}
.benefit-card:hover{transform:translateY(-4px);}

/* ---------- CTA ---------- */
/* ---------- CTA ---------- */
.cta {
  text-align: center;
  background: var(--accent);
  padding: 2rem 1rem;
}

/* Text colors for both modes */
html[data-theme="dark"] .cta,
html[data-theme="dark"] .cta h2,
html[data-theme="dark"] .cta p {
  color: #fff;
}

html[data-theme="light"] .cta,
html[data-theme="light"] .cta h2,
html[data-theme="light"] .cta p {
  color: #111; /* Dark text for visibility */
}

/* Button styles */
.button {
  display: inline-block;
  padding: 0.65rem 1.6rem;
  background: #fff;
  color: var(--accent);
  font-weight: 600;
  border-radius: 6px;
  transition: background 0.25s ease, color 0.25s ease;
}

.button:hover {
  background: var(--accent-hover);
  color: #fff;
}

/* ---------- ANIMATION ---------- */
.pre-fade{opacity:0;transform:translateY(18px);}
.fade-in{transition:all .8s ease;opacity:1!important;transform:none!important;}
/* ---------- End of epargne page styles ---------- */