/* ============================  credit.css  ============================ */

/* ---------- GLOBAL RESET & TOKEN SYSTEM ---------- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  /* typography */
  --ff-heading: "Libre Baskerville", serif;
  --ff-body:    "Almarai", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* light palette */
  --bg: #ffffff;
  --fg: #1a1a1a;
  --card-bg: #ffffff;
  --section-alt: #f4f4f4;
  --section-soft:#f9f9f9;
  --accent: #043f82;
  --accent-hover:#1251b8;
  --border: #e1e1e1;
  --overlay: rgba(0,0,0,.45);
}

[data-theme="dark"] {
  --bg: #121212;
  --fg: #f1f1f1;
  --card-bg: #1e1e1e;
  --section-alt:#1c1c1c;
  --section-soft:#181818;
  --accent: #5196ff;
  --accent-hover:#7cb0ff;
  --border: #333;
  --overlay: rgba(0,0,0,.55);
}

html { scroll-behavior:smooth; }
body {
  font-family: var(--ff-body);
  color: var(--fg);
  background: var(--bg);
  line-height: 1.65;
}
h1,h2,h3 { font-family: var(--ff-heading); color: var(--fg); line-height:1.25; }

.container {
  width: min(92%, 1200px);
  margin-inline:auto;
}

/* ---------- HERO ---------- */
.hero {
  position:relative;
  /* background: url("images/blog/3.jpg") center/cover no-repeat; */
  min-height:60vh;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  isolation:isolate;
}

/* ---------- HERO ---------- */
/* .hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  isolation: isolate; */

  /* use background-* props to avoid being overwritten elsewhere */
  /* background-image: url("images/blog/3.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
} */
.hero-overlay{
  position:absolute; inset:0;
  background:var(--overlay);
  z-index:-1;
}
.hero-content h1 {
  font-size:clamp(2rem,4vw + 1rem,3.3rem);
  margin-bottom:.75rem;
  color:#fff;
}
.hero-content p {
  font-size:clamp(1rem,.9vw + .9rem,1.35rem);
  color:#f8f8f8;
}

/* ---------- SECTION GENERICS ---------- */
section { padding:4rem 0; }
section:nth-of-type(odd){ background:var(--section-alt);}
section:nth-of-type(even){ background:var(--section-soft);}
h2{ font-size:clamp(1.8rem,2vw + 1rem,2.6rem); margin-bottom:2rem; }

/* ---------- LOAN DETAILS ---------- */
.loan-info{
  display:flex; gap:2rem; flex-wrap:wrap; justify-content:center; margin-top:2rem;
}
.loan-card{
  background:var(--card-bg);
  width:clamp(280px,28%,340px);
  padding:2rem 1.5rem;
  border-radius:10px;
  border:1px solid var(--border);
  box-shadow:0 4px 10px rgb(0 0 0 / .05);
  text-align:center;
  transition:transform .3s ease, box-shadow .3s ease;
}
.loan-card:hover{ transform:translateY(-4px); box-shadow:0 10px 18px rgb(0 0 0 / .08);}
.loan-card h3{ font-size:1.25rem; margin-bottom:.6rem; }

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

/* ---------- REQUIREMENTS ---------- */
.requirements ul{ list-style-type:none; margin-top:1.25rem; }
.requirements li{ padding:.75rem 0; border-bottom:1px solid var(--border); }
.requirements li:last-child{ border:none; }

/* ---------- PROCESS GRID ---------- */
.loan-process{ padding-block:5rem; }
.process-grid{
  display:grid; gap:3rem 4rem;
  grid-template-columns:1fr 1fr;
}
@media(max-width:820px){ .process-grid{ grid-template-columns:1fr; } }

.process-intro h2{ margin-bottom:1.25rem; }
.process-intro p { font-size:clamp(1rem,.9vw + .9rem,1.25rem); }

.process-steps{ counter-reset:step; list-style:none; padding-left:0; }
.process-steps li{
  position:relative; padding-left:3.6rem; margin-bottom:2.4rem;
}
.process-steps li::before{
  counter-increment:step; content:counter(step);
  position:absolute; left:0; top:.15rem;
  width:2.25rem; height:2.25rem; border-radius:50%;
  background:var(--accent); color:#fff; font-weight:700;
  display:grid; place-items:center;
}
.process-steps h3{ font-size:1.15rem; margin-bottom:.35rem; }

/* ---------- CTA / BUTTON (if you re-enable later) ---------- */
.button, .cta-button{
  display:inline-block; padding:.65rem 1.4rem;
  background:var(--accent); color:#fff;
  font-weight:600; border:none; border-radius:6px;
  transition:background .25s ease;
}
.button:hover, .cta-button:hover{ background:var(--accent-hover); }

/* ---------- ANIMATIONS (fade-in on scroll) ---------- */
.fade-in{ animation:fadeIn 1s ease forwards; }
@keyframes fadeIn{
  from{ opacity:0; transform:translateY(18px); }
  to  { opacity:1; transform:none; }
}
/* ---------- End of credit page styles ---------- */