/* ==========================================================================
   Ashara Foundation — theme
   Premium Islamic-charity design system.
   Palette philosophy: emerald-teal is used as an ACCENT for actions, not as a
   wash. Structure (sidebar, footer, hero, topbar) uses a deep slate-teal "ink";
   surfaces use warm ivory neutrals; gold is the highlight / call-to-action.
   ========================================================================== */

:root {
  /* Brand — emerald teal (action colour, used sparingly) */
  --as-primary: #0E7C64;
  --as-primary-dark: #0A5E4B;
  --as-primary-light: #E6F3EF;
  --as-primary-rgb: 14, 124, 100;

  /* Ink — deep slate-teal, the structural colour (near-black, cool) */
  --as-ink: #102A2E;
  --as-ink-2: #17383D;
  --as-ink-rgb: 16, 42, 46;

  /* Gold — warm highlight / CTA */
  --as-accent: #C89B46;
  --as-accent-dark: #AC8232;
  --as-accent-light: #F6ECD5;
  --as-accent-rgb: 200, 155, 70;

  /* Text */
  --as-text: #13272B;
  --as-body: #46545A;
  --as-gray: #6B7A80;
  --as-muted: #8A979C;

  /* Surfaces — warm ivory neutrals */
  --as-bg: #FAF9F5;
  --as-bg-alt: #F1EEE7;
  --as-border: #E7E3D9;
  --as-card-bg: #ffffff;

  /* Admin chrome */
  --as-sidebar-bg: #102A2E;
  --as-sidebar-text: #AFC3C1;

  /* Shape & depth */
  --as-radius: 14px;
  --as-radius-sm: 10px;
  --as-shadow: 0 1px 3px rgba(16, 42, 46, .06), 0 6px 20px rgba(16, 42, 46, .06);
  --as-shadow-hover: 0 10px 34px rgba(16, 42, 46, .13);
  --as-shadow-lg: 0 18px 50px rgba(16, 42, 46, .16);

  --as-font-head: 'Poppins', 'Noto Sans Bengali', system-ui, sans-serif;
  --as-font-body: 'Noto Sans Bengali', 'Poppins', system-ui, sans-serif;

  /* Bootstrap overrides so native components inherit the brand */
  --bs-primary: #0E7C64;
  --bs-primary-rgb: 14, 124, 100;
  --bs-link-color: #0A5E4B;
  --bs-link-hover-color: #0E7C64;
  --bs-body-color: #46545A;
  --bs-border-radius: 10px;
}

[data-bs-theme="dark"] {
  --as-primary: #2FB79A;
  --as-primary-dark: #229f85;
  --as-primary-light: #14312b;
  --as-primary-rgb: 47, 183, 154;

  --as-ink: #0b1c1f;
  --as-ink-2: #12292e;

  --as-text: #eaf1ef;
  --as-body: #c4d1cd;
  --as-gray: #93a5a1;
  --as-muted: #7d908c;

  --as-bg: #0e1a1c;
  --as-bg-alt: #142326;
  --as-border: #26383b;
  --as-card-bg: #16282b;

  --as-sidebar-bg: #081517;
  --as-sidebar-text: #a9c2be;

  --as-shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .35);
  --as-shadow-hover: 0 10px 34px rgba(0, 0, 0, .5);

  --bs-primary: #2FB79A;
  --bs-primary-rgb: 47, 183, 154;
  --bs-body-color: #c4d1cd;
}

/* --------------------------------------------------------------- Base ----- */
* { scrollbar-color: var(--as-primary) transparent; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--as-font-body);
  background: var(--as-bg);
  color: var(--as-body);
  font-size: 16px;
  line-height: 1.7;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
main { flex: 1 0 auto; }

h1, h2, h3, h4, h5, h6, .navbar-brand {
  font-family: var(--as-font-head);
  color: var(--as-text);
  font-weight: 700;
  letter-spacing: -.01em;
}
p { margin-bottom: 1rem; }
a { color: var(--as-primary); text-decoration-color: rgba(var(--as-primary-rgb), .35); text-underline-offset: 3px; transition: color .2s; }
a:hover { color: var(--as-primary-dark); }

.text-accent { color: var(--as-accent) !important; }
.text-primary { color: var(--as-primary) !important; }
.text-ink { color: var(--as-text) !important; }
.text-muted-2 { color: var(--as-muted) !important; }
.bg-ink { background: var(--as-ink) !important; }
.bg-soft { background: var(--as-bg-alt) !important; }
.bg-primary-green { background: linear-gradient(135deg, var(--as-primary-dark), var(--as-primary)) !important; }
.fw-black { font-weight: 800 !important; }

::selection { background: rgba(var(--as-primary-rgb), .18); }

/* --------------------------------------------------------------- Eyebrow -- */
.eyebrow {
  display: inline-block;
  font-family: var(--as-font-head);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--as-accent-dark);
  margin-bottom: .5rem;
}

/* ---------------------------------------------------------------- Buttons -- */
.btn {
  border-radius: var(--as-radius-sm);
  font-weight: 600;
  padding: 10px 22px;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn-lg { padding: 13px 30px; font-size: 1.02rem; }
.btn-sm { padding: 6px 14px; }

.btn-primary {
  background: var(--as-primary);
  border-color: var(--as-primary);
  color: #fff;
  box-shadow: 0 4px 14px rgba(var(--as-primary-rgb), .22);
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--as-primary-dark);
  border-color: var(--as-primary-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(var(--as-primary-rgb), .3);
}
.btn-outline-primary { border-color: var(--as-primary); color: var(--as-primary); background: transparent; }
.btn-outline-primary:hover { background: var(--as-primary); border-color: var(--as-primary); color: #fff; transform: translateY(-2px); }

/* Bootstrap compiles .nav-pills active bg to a literal blue that the
   --bs-primary override does not reach; pin it to the brand token so filter
   pills (projects) match the green/gold system in both light and dark modes. */
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--as-primary);
  --bs-nav-pills-link-active-color: #fff;
  gap: .4rem;
}
.nav-pills .nav-link { color: var(--bs-body-color); border: 1px solid rgba(var(--as-primary-rgb), .28); border-radius: 999px; padding: .4rem 1.1rem; transition: background .15s, color .15s, box-shadow .15s; }
.nav-pills .nav-link:hover { color: var(--as-primary); border-color: var(--as-primary); }
.nav-pills .nav-link.active { border-color: var(--as-primary); box-shadow: 0 4px 14px rgba(var(--as-primary-rgb), .22); }

.btn-gold {
  background: linear-gradient(135deg, var(--as-accent), var(--as-accent-dark));
  color: #fff;
  border: none;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(var(--as-accent-rgb), .3);
}
.btn-gold:hover, .btn-gold:focus {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 9px 26px rgba(var(--as-accent-rgb), .42);
  filter: brightness(1.04);
}
.btn-outline-gold { border: 1px solid var(--as-accent); color: var(--as-accent-dark); background: transparent; }
.btn-outline-gold:hover { background: var(--as-accent); color: #fff; }

.btn-outline-light:hover { color: var(--as-ink); }
.btn-check:focus + .btn, .btn:focus-visible { box-shadow: 0 0 0 .25rem rgba(var(--as-primary-rgb), .3); }

/* ------------------------------------------------------------------ Cards -- */
.card {
  border: 1px solid var(--as-border);
  border-radius: var(--as-radius);
  background: var(--as-card-bg);
  box-shadow: var(--as-shadow);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  overflow: hidden;
}
.card:hover { box-shadow: var(--as-shadow-hover); transform: translateY(-4px); border-color: rgba(var(--as-primary-rgb), .25); }
.card.no-hover:hover { transform: none; box-shadow: var(--as-shadow); border-color: var(--as-border); }
.card-body { padding: 1.4rem; }
.card-title { color: var(--as-text); font-weight: 700; }
.shadow-soft { box-shadow: var(--as-shadow) !important; }
.card-img-top { object-fit: cover; }

/* Feature card with a coloured leading rule */
.card-feature { position: relative; }
.card-feature::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: linear-gradient(var(--as-primary), var(--as-accent));
  opacity: 0; transition: opacity .25s;
}
.card-feature:hover::before { opacity: 1; }

/* --------------------------------------------------------- Section titles -- */
section { padding: 84px 0; }
section.py-5 { padding: 84px 0 !important; }
.section-title {
  font-size: clamp(1.7rem, 1.1rem + 2vw, 2.4rem);
  font-weight: 800;
  color: var(--as-text);
  margin-bottom: 14px;
  line-height: 1.2;
}
.section-sub { font-size: 1.08rem; color: var(--as-gray); margin-bottom: 44px; max-width: 640px; }
.text-center .section-sub { margin-left: auto; margin-right: auto; }
.section-title::after {
  content: ''; display: block; width: 64px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--as-accent), var(--as-primary));
  margin: 16px auto 0;
}
.text-start .section-title::after, .section-title.text-start::after { margin-left: 0; }
.section-title.no-rule::after { display: none; }

/* ----------------------------------------------------------------- Topbar -- */
.topbar { background: var(--as-ink); color: #d7e4e1; font-size: .84rem; letter-spacing: .01em; }
.topbar a { color: #cdddd9; text-decoration: none; transition: color .2s; }
.topbar a:hover { color: var(--as-accent); }
.topbar .btn-link { text-decoration: none; font-weight: 600; }
.topbar .theme-toggle { color: #cdddd9; }
.topbar .theme-toggle:hover { color: var(--as-accent); }

/* ----------------------------------------------------------------- Navbar -- */
.navbar-main {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--as-border);
  box-shadow: 0 2px 18px rgba(16, 42, 46, .05);
  padding-top: .6rem; padding-bottom: .6rem;
}
[data-bs-theme="dark"] .navbar-main { background: rgba(22, 40, 43, .92); }
.navbar-main .navbar-brand { color: var(--as-primary); font-weight: 800; }
.navbar-main .nav-link {
  color: var(--as-text); font-weight: 500; position: relative;
  padding: .5rem .9rem; margin: 0 .1rem; border-radius: 8px;
}
.navbar-main .nav-link::after {
  content: ''; position: absolute; left: .9rem; right: .9rem; bottom: .32rem; height: 2px;
  background: var(--as-accent); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .22s ease;
}
.navbar-main .nav-link.active, .navbar-main .nav-link:hover { color: var(--as-primary); }
.navbar-main .nav-link.active::after, .navbar-main .nav-link:hover::after { transform: scaleX(1); }
.brand-icon { font-size: 1.6rem; color: var(--as-accent); line-height: 1; }
.brand-text { font-size: 1.2rem; font-weight: 800; color: var(--as-primary); letter-spacing: -.02em; }
.brand-logo { max-height: 50px; width: auto; }

/* ------------------------------------------------------------------- Hero -- */
.hero-section { position: relative; }
.hero-slide {
  position: relative; min-height: 620px; background-size: cover; background-position: center;
  display: flex; align-items: center;
}
.hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(115deg, rgba(16, 42, 46, .92) 0%, rgba(16, 42, 46, .72) 42%, rgba(10, 94, 75, .48) 100%);
}
.hero-overlay::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 85% 15%, rgba(200, 155, 70, .16), transparent 55%);
}
.hero-content { position: relative; z-index: 2; padding: 40px 0; }
.hero-content h1 { color: #fff; font-weight: 800; letter-spacing: -.02em; text-shadow: 0 2px 20px rgba(0, 0, 0, .25); }
.hero-content .lead { color: rgba(255, 255, 255, .9); font-size: 1.2rem; max-width: 620px; }
.carousel-indicators [data-bs-target] { width: 10px; height: 10px; border-radius: 50%; border: 0; }

/* -------------------------------------------------------------- Page hero -- */
/* Inner-page header band (shared `.bg-primary-green.text-white.py-5`).       */
.bg-primary-green.text-white {
  position: relative;
  background: linear-gradient(120deg, var(--as-ink) 0%, var(--as-ink-2) 45%, var(--as-primary-dark) 100%) !important;
  overflow: hidden;
}
.bg-primary-green.text-white::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(90% 120% at 100% 0%, rgba(var(--as-accent-rgb), .18), transparent 55%);
  pointer-events: none;
}
.bg-primary-green.text-white > .container { position: relative; z-index: 1; }
.bg-primary-green.text-white h1 { color: #fff; font-weight: 800; letter-spacing: -.02em; }
.bg-primary-green.text-white p { color: rgba(255, 255, 255, .82); margin-bottom: 0; }
.page-hero { padding: 76px 0 !important; }

/* ------------------------------------------------------------------ Stats -- */
.stat-card {
  text-align: center; padding: 2.1rem 1.2rem;
  background: var(--as-card-bg); border: 1px solid var(--as-border);
}
.stat-card .stat-number {
  font-family: var(--as-font-head);
  font-size: 2.6rem; font-weight: 800; line-height: 1;
  color: var(--as-primary);
  background: linear-gradient(135deg, var(--as-primary), var(--as-primary-dark));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.stat-card p { color: var(--as-gray); font-weight: 500; margin-top: .6rem; }
.stat-card .stat-icon { font-size: 1.8rem; color: var(--as-accent); margin-bottom: .5rem; display: block; }

/* --------------------------------------------------------------- Progress -- */
.progress { height: .55rem; border-radius: 1rem; background: var(--as-bg-alt); overflow: hidden; }
.progress-bar { background: linear-gradient(90deg, var(--as-primary), var(--as-accent)); border-radius: 1rem; }

/* ----------------------------------------------------------- Project card -- */
.project-card { overflow: hidden; }
.project-image { height: 210px; width: 100%; object-fit: cover; transition: transform .5s ease; }
.project-placeholder {
  height: 210px;
  background: linear-gradient(135deg, var(--as-ink), var(--as-primary-dark));
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, .4); font-size: 62px;
}
.project-card:hover .project-image { transform: scale(1.06); }

/* --------------------------------------------------------- Amount presets -- */
.amount-presets { display: flex; flex-wrap: wrap; gap: 9px; }
.amount-btn {
  min-width: 78px; padding: 10px 14px; border-radius: var(--as-radius-sm);
  border: 1.5px solid var(--as-border); background: var(--as-card-bg);
  color: var(--as-text); font-weight: 600; transition: all .18s;
}
.amount-btn:hover { border-color: var(--as-primary); color: var(--as-primary); transform: translateY(-1px); }
.amount-btn.selected { background: var(--as-primary); border-color: var(--as-primary); color: #fff; box-shadow: 0 4px 12px rgba(var(--as-primary-rgb), .28); }
.amount-btn.custom.selected { background: var(--as-accent); border-color: var(--as-accent); }
[data-fund-card] { cursor: pointer; }
[data-fund-card].selected-fund { border-color: var(--as-primary); box-shadow: 0 0 0 2px rgba(var(--as-primary-rgb), .3); }

/* ------------------------------------------------------------------ Forms -- */
.form-label { font-weight: 600; color: var(--as-text); margin-bottom: .4rem; font-size: .94rem; }
.form-control, .form-select {
  border: 1.5px solid var(--as-border); border-radius: var(--as-radius-sm);
  padding: .6rem .85rem; background: var(--as-card-bg); color: var(--as-text);
  transition: border-color .18s, box-shadow .18s;
}
.form-control::placeholder { color: var(--as-muted); }
.form-control:focus, .form-select:focus {
  border-color: var(--as-primary);
  box-shadow: 0 0 0 .22rem rgba(var(--as-primary-rgb), .16);
  background: var(--as-card-bg); color: var(--as-text);
}
.input-group-text { background: var(--as-bg-alt); border: 1.5px solid var(--as-border); color: var(--as-gray); }
.form-check-input:checked { background-color: var(--as-primary); border-color: var(--as-primary); }
.form-check-input:focus { border-color: var(--as-primary); box-shadow: 0 0 0 .22rem rgba(var(--as-primary-rgb), .16); }
.was-validated .form-control:invalid, .form-control.is-invalid { border-color: #dc3545; }

/* ----------------------------------------------------------------- Badges -- */
.badge { font-weight: 600; letter-spacing: .01em; padding: .4em .7em; border-radius: 6px; }
.badge.bg-primary-green { background: var(--as-primary) !important; }
.badge.rounded-pill { border-radius: 50rem; }

/* ------------------------------------------------------------------ Tables -- */
.table { color: var(--as-body); border-color: var(--as-border); }
.table > thead th {
  font-family: var(--as-font-head);
  font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--as-gray); font-weight: 600; border-bottom: 1.5px solid var(--as-border);
  background: var(--as-bg-alt);
}
.table > tbody > tr { border-color: var(--as-border); }
.table-hover > tbody > tr:hover > * { background: rgba(var(--as-primary-rgb), .05); }
.table-responsive th { white-space: nowrap; }

/* -------------------------------------------------------------- Accordion -- */
.faq-accordion .accordion-item { border: 1px solid var(--as-border); border-radius: var(--as-radius-sm) !important; margin-bottom: .7rem; overflow: hidden; background: var(--as-card-bg); }
.faq-accordion .accordion-button { font-weight: 600; color: var(--as-text); background: var(--as-card-bg); }
.faq-accordion .accordion-button:not(.collapsed) { color: var(--as-primary); background: var(--as-primary-light); box-shadow: none; }
.faq-accordion .accordion-button:focus { box-shadow: 0 0 0 .22rem rgba(var(--as-primary-rgb), .18); }

/* ------------------------------------------------------------ Social icon -- */
.social-icon {
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--as-bg-alt); color: var(--as-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; text-decoration: none; transition: all .25s;
}
.social-icon:hover { background: var(--as-primary); color: #fff; transform: translateY(-3px); }

/* ------------------------------------------------------------------ Footer -- */
.footer { background: var(--as-ink); color: #b9cbc7; margin-top: auto; }
.footer h5, .footer h6 { color: #fff; }
.footer h6 { position: relative; padding-bottom: .6rem; margin-bottom: 1.1rem; }
.footer h6::after { content: ''; position: absolute; left: 0; bottom: 0; width: 34px; height: 2px; background: var(--as-accent); border-radius: 2px; }
.footer a { color: #b9cbc7; text-decoration: none; transition: color .2s, padding .2s; }
.footer a:hover { color: var(--as-accent); }
.footer ul li { margin-bottom: .5rem; }
.footer .social-icon { background: rgba(255, 255, 255, .08); color: #dfeae7; }
.footer .social-icon:hover { background: var(--as-accent); color: var(--as-ink); }
.footer-bottom { background: rgba(0, 0, 0, .25); color: #8fa5a0; font-size: .88rem; }

/* ================================================================ ADMIN ==== */
.admin-shell { display: flex; min-height: calc(100vh - 58px); }

/* Admin top navbar — slate ink, overrides the public .bg-primary-green class */
.admin-navbar.bg-primary-green, .admin-navbar {
  background: var(--as-ink) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .18);
}
.admin-navbar .navbar-brand { color: #fff; }
.admin-navbar .brand-icon, .admin-navbar .text-accent { color: var(--as-accent) !important; }

.admin-sidebar {
  width: 256px; background: var(--as-sidebar-bg); color: var(--as-sidebar-text);
  flex-shrink: 0; transition: margin-left .25s ease; padding-bottom: 1rem;
  border-right: 1px solid rgba(255, 255, 255, .05);
}
.admin-sidebar .sidebar-head {
  padding: 1.1rem 1.3rem; font-family: var(--as-font-head); font-weight: 700; font-size: .8rem;
  letter-spacing: .1em; text-transform: uppercase; color: #7f9a95;
}
.admin-sidebar .nav-link {
  color: var(--as-sidebar-text); border-radius: 9px; padding: .58rem 1rem; margin: 2px 12px;
  font-weight: 500; font-size: .94rem; display: flex; align-items: center;
  transition: background .18s, color .18s;
}
.admin-sidebar .nav-link i { width: 1.4rem; font-size: 1.02rem; opacity: .85; }
.admin-sidebar .nav-link:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.admin-sidebar .nav-link.active {
  background: linear-gradient(135deg, rgba(var(--as-accent-rgb), .22), rgba(var(--as-accent-rgb), .12));
  color: #fff; box-shadow: inset 3px 0 0 var(--as-accent);
}
.admin-sidebar .nav-link.active i { color: var(--as-accent); opacity: 1; }
.admin-sidebar hr { border-color: rgba(255, 255, 255, .09); }

.admin-main { flex: 1; min-width: 0; padding: 1.8rem; background: var(--as-bg); }
.admin-main h4 { font-weight: 700; }
.admin-topbar { background: var(--as-card-bg); border-bottom: 1px solid var(--as-border); padding: .75rem 1.5rem; }

/* Admin stat tiles get an accent top edge */
.admin-main .card { border-radius: var(--as-radius-sm); }
.admin-main .card:hover { transform: none; box-shadow: var(--as-shadow-hover); }

@media (max-width: 991px) {
  .admin-sidebar { position: fixed; z-index: 1040; top: 58px; bottom: 0; left: 0; margin-left: -276px; box-shadow: var(--as-shadow-lg); }
  .admin-sidebar.open { margin-left: 0; }
}

/* ----------------------------------------------------------- Theme toggle -- */
.theme-toggle { cursor: pointer; border: none; background: transparent; color: inherit; font-size: 1.1rem; line-height: 1; padding: .2rem; transition: transform .2s, color .2s; }
.theme-toggle:hover { transform: rotate(-12deg); }

/* --------------------------------------------------------------- Lightbox -- */
#lightbox { position: fixed; inset: 0; background: rgba(10, 20, 22, .92); z-index: 2000; display: none; align-items: center; justify-content: center; padding: 2rem; }
#lightbox img { max-width: 92%; max-height: 92%; border-radius: 8px; box-shadow: var(--as-shadow-lg); }
.lightbox-close { position: absolute; top: 1.2rem; right: 1.6rem; color: #fff; font-size: 2rem; cursor: pointer; background: none; border: 0; line-height: 1; }

/* ------------------------------------------------------------------- A11y -- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--as-accent); outline-offset: 2px; border-radius: 3px;
}
.skip-link { position: absolute; left: -999px; top: 0; background: var(--as-primary); color: #fff; padding: .5rem 1rem; z-index: 2500; border-radius: 0 0 8px 0; }
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------------- Misc -- */
.lazy { background: var(--as-bg-alt); }
.avatar-circle {
  width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--as-primary), var(--as-primary-dark)); color: #fff; font-weight: 700;
}
hr { border-color: var(--as-border); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* -------------------------------------------------------------------- RTL -- */
[dir="rtl"] body { text-align: right; }
[dir="rtl"] .admin-sidebar .nav-link.active { box-shadow: inset -3px 0 0 var(--as-accent); }
[dir="rtl"] .footer h6::after { left: auto; right: 0; }
[dir="rtl"] .navbar-main .nav-link::after { transform-origin: right; }

/* ===================================================== CONTENT SECTIONS ====
   Presentation helpers for the foundation intro, program, spotlight,
   education and employment content added from the foundation's official
   vision document. Uses the existing brand tokens only. */
/* ----------------------------------------------------------------------- */

/* Dark spotlight band used for primary initiatives (beggar rehabilitation). */
.spotlight {
  background:
    radial-gradient(90% 120% at 15% 0%, rgba(var(--as-accent-rgb), .16), transparent 55%),
    linear-gradient(120deg, var(--as-ink) 0%, var(--as-ink-2) 45%, var(--as-primary-dark) 100%);
  color: var(--as-border);
}
.spotlight h2, .spotlight h3, .spotlight h4, .spotlight .section-title { color: #fff; }
.spotlight .section-title::after { background: linear-gradient(90deg, var(--as-accent), var(--as-primary)); }
.spotlight .lead { color: rgba(255, 255, 255, .9); }
.spotlight p { color: rgba(255, 255, 255, .82); }

/* Translucent card used on coloured / dark bands. */
.glass-card {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--as-radius);
  color: rgba(255, 255, 255, .82);
  box-shadow: var(--as-shadow);
}
.glass-card h3, .glass-card h4, .glass-card h5, .glass-card h6 { color: #fff; }
.glass-card p { color: rgba(255, 255, 255, .84); }
.glass-card small { color: rgba(255, 255, 255, .7); }

/* Large slogan display (e.g. the beggar-free Bangladesh commitment). */
.slogan {
  font-family: var(--as-font-head);
  font-size: clamp(1.45rem, 1.05rem + 1.5vw, 2.1rem);
  font-weight: 800;
  line-height: 1.25;
  color: var(--as-accent);
}
.text-accent { color: var(--as-accent) !important; }

/* Objective check-list. */
.objective-list li { display: flex; gap: .65rem; align-items: flex-start; padding: .42rem 0; }
.objective-list i { color: var(--as-accent-dark); font-size: 1.15rem; margin-top: .14rem; }

/* Small tag chips for training areas / institution lists. */
.chip {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--as-bg-alt); color: var(--as-text);
  border: 1px solid var(--as-border); border-radius: 999px;
  padding: .45rem .95rem; font-size: .9rem; font-weight: 500;
  transition: border-color .18s, color .18s, transform .18s;
}
.chip:hover { border-color: var(--as-primary); color: var(--as-primary); transform: translateY(-1px); }
[data-bs-theme="dark"] .chip { background: rgba(255, 255, 255, .05); color: var(--as-body); }

/* Program / service card icon. */
.program-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  background: var(--as-primary-light); color: var(--as-primary);
}