/* public/assets/css/style.css */

/* -----------------------------
   Theme Variables
------------------------------ */
:root{
  --brand: #008825;
  --brand-600: #00761f;
  --brand-700: #006a1c;
  --brand-soft: rgba(0, 136, 37, .10);
  --brand-soft-2: rgba(0, 136, 37, .16);

  --text: #0f172a;          /* slate-900 */
  --muted: #64748b;         /* slate-500 */
  --muted-2: #94a3b8;       /* slate-400 */
  --border: #e2e8f0;        /* slate-200 */
  --bg: #f8fafc;            /* slate-50 */
  --surface: #ffffff;

  --shadow-sm: 0 6px 16px rgba(15, 23, 42, .06);
  --shadow-md: 0 14px 32px rgba(15, 23, 42, .10);
  --radius: 16px;
  --radius-lg: 22px;

  --transition: 220ms ease;
}

/* -----------------------------
   Base
------------------------------ */
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}

a{ color: var(--brand); text-decoration: none; }
a:hover{ color: var(--brand-700); }

img{ max-width: 100%; height: auto; }

::selection{
  background: var(--brand-soft-2);
}

/* Improve Bootstrap focus */
:focus-visible{
  outline: 3px solid rgba(0, 136, 37, .35);
  outline-offset: 2px;
}

    /* --------------------------------
   Brand (navbar) – base
---------------------------------- */
.brand-logo{
    height: 40px;
    width: auto;
    object-fit: contain;
}

.brand-name{
    font-weight: 900;
    letter-spacing: -0.01em;
    color: var(--text);
    line-height: 1.1;
}

.brand-tagline{
    font-size: .78rem;
    font-weight: 600;
    color: rgba(15,23,42,.65);
}

.brand-logo,
.brand-name,
.brand-tagline{
    transition: color .25s ease, filter .25s ease, background .25s ease;
}


/* --------------------------------
   Dark mode brand fixes
---------------------------------- */
html[data-bs-theme="dark"] .brand-name{
    color: #ecfdf5; /* clean white-green */
}

html[data-bs-theme="dark"] .brand-tagline{
    color: rgba(229,231,235,.70);
}

/* Logo treatment in dark mode */
html[data-bs-theme="dark"] .brand-logo{
    filter: brightness(1.05) contrast(1.05);
}

/* Optional: subtle logo chip for visibility on very dark navbars */
html[data-bs-theme="dark"] .navbar .brand-logo{
    padding: 4px;
    border-radius: 10px;
    background: rgba(255,255,255,.06);
}
/* -----------------------------
   Helpers / Utilities
------------------------------ */
.container{
  max-width: 1180px;
}

.section{
  padding: 72px 0;
}

.section-sm{
  padding: 48px 0;
}

.surface{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.soft-bg{
  background: linear-gradient(180deg, rgba(0,136,37,.06), rgba(0,136,37,.03));
}

.text-muted{ color: var(--muted) !important; }
.small-muted{ color: var(--muted) !important; font-size: .92rem; }

.badge-soft{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--brand-soft);
  color: var(--brand-700);
  border: 1px solid rgba(0,136,37,.18);
  padding: .45rem .7rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .85rem;
}

/* -----------------------------
   Topbar
------------------------------ */
.topbar{
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.topbar .topbar-link{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  border: 1px solid var(--border);
  background: #fff;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), color var(--transition);
}

.topbar .topbar-link:hover{
  color: var(--brand);
  border-color: rgba(0,136,37,.35);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* -----------------------------
   Navbar / Branding
------------------------------ */
.navbar{
  border-bottom: 1px solid rgba(226,232,240,.55);
}

.brand-logo{
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(226,232,240,.9);
  padding: 6px;
}

.brand-name{
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text);
}

.brand-tagline{
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.1;
}

/* --------------------------------
   Navbar links – Professional
---------------------------------- */
.navbar .nav-link{
    position: relative;
    font-weight: 600;
    color: var(--text);
    border-radius: 10px;
    padding: .5rem .75rem;
    transition:
        color var(--transition),
        background-color var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
}

/* Hover */
.navbar .nav-link:hover{
    color: var(--brand-700);
    background: rgba(0,136,37,.08);
}

/* Active */
.navbar .nav-link.active{
    color: var(--brand-700);
    background: rgba(0,136,37,.14);
    box-shadow: inset 0 0 0 1px rgba(0,136,37,.25);
}

/* Subtle lift on hover (desktop only) */
@media (hover:hover){
    .navbar .nav-link:hover{
        transform: translateY(-1px);
    }
}

html[data-bs-theme="dark"] .navbar .nav-link{
    color: rgba(229,231,235,.82);
}

html[data-bs-theme="dark"] .navbar .nav-link:hover{
    color: #ffffff;
    background: rgba(0,136,37,.16);
}

html[data-bs-theme="dark"] .navbar .nav-link.active{
    color: #ecfdf5;
    background: rgba(0,136,37,.22);
    box-shadow: inset 0 0 0 1px rgba(0,136,37,.35);
}



/* Toggler refinement */
.navbar-toggler{
  border: 1px solid rgba(226,232,240,.9);
  border-radius: 14px;
  padding: .55rem .7rem;
}

/* -----------------------------
   Buttons (brand)
------------------------------ */
.btn{
  border-radius: 14px;
  font-weight: 700;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
}

.btn:active{
  transform: translateY(0) scale(.99);
}

.btn-brand{
  background: var(--brand);
  border: 1px solid var(--brand);
  color: #fff;
  box-shadow: 0 10px 22px rgba(0,136,37,.18);
}

.btn-brand:hover{
  background: var(--brand-600);
  border-color: var(--brand-600);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(0,136,37,.22);
}

.btn-brand-outline{
  background: #fff;
  border: 1px solid rgba(0,136,37,.35);
  color: var(--brand-700);
}

.btn-brand-outline:hover{
  background: rgba(0,136,37,.08);
  border-color: rgba(0,136,37,.55);
  color: var(--brand-700);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* Soft button utility */
.btn-soft{
  background: rgba(15,23,42,.04);
  border: 1px solid rgba(226,232,240,.9);
  color: rgba(15,23,42,.78);
}

.btn-soft:hover{
  background: rgba(15,23,42,.06);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* -----------------------------
   Forms
------------------------------ */
.form-control,
.form-select{
  border-radius: 14px;
  border: 1px solid rgba(226,232,240,.95);
  background: #fff;
  padding: .85rem 1rem;
}

.form-control:focus,
.form-select:focus{
  border-color: rgba(0,136,37,.55);
  box-shadow: 0 0 0 .25rem rgba(0,136,37,.15);
}

/* -----------------------------
   Page Header (optional section)
------------------------------ */
.page-header{
  padding: 34px 0;
  background:
    radial-gradient(900px 300px at 15% 10%, rgba(0,136,37,.10), transparent 60%),
    radial-gradient(900px 300px at 85% 0%, rgba(0,136,37,.08), transparent 55%),
    #fff;
  border-bottom: 1px solid var(--border);
}

.page-header .breadcrumb{
  margin-bottom: 0;
}

/* --------------------------------
   Dark mode: Page Header
---------------------------------- */
html[data-bs-theme="dark"] .page-header{
  padding: 34px 0;
  background:
    radial-gradient(900px 300px at 15% 10%, rgba(0,136,37,.22), transparent 60%),
    radial-gradient(900px 300px at 85% 0%, rgba(0,136,37,.14), transparent 55%),
    rgba(15,23,42,.92);
  border-bottom: 1px solid var(--border);
}

/* Text tuning inside page header */
html[data-bs-theme="dark"] .page-header h1,
html[data-bs-theme="dark"] .page-header h2,
html[data-bs-theme="dark"] .page-header h3{
  color: var(--text);
}

html[data-bs-theme="dark"] .page-header p,
html[data-bs-theme="dark"] .page-header .text-muted{
  color: rgba(229,231,235,.78) !important;
}

/* Breadcrumbs (if used later) */
html[data-bs-theme="dark"] .page-header .breadcrumb{
  background: transparent;
}

html[data-bs-theme="dark"] .page-header .breadcrumb-item,
html[data-bs-theme="dark"] .page-header .breadcrumb-item a{
  color: rgba(229,231,235,.72);
}

html[data-bs-theme="dark"] .page-header .breadcrumb-item.active{
  color: #b7f7ce;
}


/* -----------------------------
   Cards / Modern NGO blocks
------------------------------ */
.card{
  border-radius: var(--radius);
  border: 1px solid rgba(226,232,240,.9);
  box-shadow: none;
}

.card-soft{
  background: #fff;
  border: 1px solid rgba(226,232,240,.9);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.card-soft:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(0,136,37,.22);
}

.card-media{
  overflow: hidden;
  border-radius: var(--radius);
}

.card-media img{
  transition: transform var(--transition);
}

.card-soft:hover .card-media img{
  transform: scale(1.05);
}

.icon-pill{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-soft);
  color: var(--brand-700);
  border: 1px solid rgba(0,136,37,.18);
}

/* Section header style */
.section-head{
  margin-bottom: 26px;
}

.section-head .kicker{
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .78rem;
  color: var(--brand-700);
}

.section-head h2{
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 6px 0 8px;
}

.section-head p{
  color: var(--muted);
  max-width: 58ch;
  margin-bottom: 0;
}

/* -----------------------------
   Footer (Improved visibility)
------------------------------ */
.footer{
  position: relative;
  background:
    radial-gradient(900px 320px at 15% 0%, rgba(0,136,37,.08), transparent 55%),
    radial-gradient(900px 320px at 85% 0%, rgba(0,136,37,.06), transparent 55%),
    #fff;
  border-top: 1px solid var(--border);
}

/* stronger top divider for separation */
.footer::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,136,37,.25), transparent);
}

.footer-logo{
  width: 90px;
  height: 90px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(226,232,240,.95);
  padding: 6px;
  object-fit: contain;
  box-shadow: 0 10px 22px rgba(2,6,23,.06);
}

.footer-brand{
  font-size: 2.5rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.1;
}

.footer-sub{
  color: rgba(15,23,42,.70);
  font-size: .92rem;
  font-weight: 600;
}

.footer-title{
  font-weight: 900;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
  color: rgba(15,23,42,.92);
}

/* Improve muted text inside footer only */
.footer .text-muted{
  color: rgba(15,23,42,.72) !important;
}

/* Links */
.footer-links{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.footer-links a{
  color: rgba(15,23,42,.78);
  font-weight: 700;
  text-decoration: none;
  transition: color var(--transition), transform var(--transition), opacity var(--transition);
}

.footer-links a:hover{
  color: var(--brand-700);
  transform: translateX(3px);
  opacity: 1;
}

.footer-mini-link{
  color: rgba(15,23,42,.78);
  font-weight: 800;
  text-decoration: none;
}

.footer-mini-link:hover{
  color: var(--brand-700);
}

.footer-hr{
  border-color: rgba(226,232,240,.92);
}

/* Social buttons */
.social-btn{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(226,232,240,.95);
  background: #fff;
  color: rgba(15,23,42,.75);
  box-shadow: 0 10px 22px rgba(2,6,23,.06);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background var(--transition), color var(--transition);
}

.social-btn:hover{
  color: var(--brand-700);
  background: rgba(0,136,37,.08);
  border-color: rgba(0,136,37,.35);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Newsletter input contrast in footer */
.footer .form-control{
  border-color: rgba(226,232,240,.95);
}
.footer .form-control:focus{
  border-color: rgba(0,136,37,.35);
  box-shadow: 0 0 0 .25rem rgba(0,136,37,.16);
}

/* -----------------------------
   Footer Dark Mode
------------------------------ */
html[data-bs-theme="dark"] .footer{
  background:
    radial-gradient(900px 320px at 15% 0%, rgba(0,136,37,.16), transparent 55%),
    radial-gradient(900px 320px at 85% 0%, rgba(0,136,37,.12), transparent 55%),
    rgba(15,23,42,.96);
  border-top: 1px solid var(--border);
}

html[data-bs-theme="dark"] .footer::before{
  background: linear-gradient(90deg, transparent, rgba(0,136,37,.35), transparent);
}

html[data-bs-theme="dark"] .footer-brand{
  color: #ecfdf5;
}

html[data-bs-theme="dark"] .footer-sub{
  color: rgba(229,231,235,.72);
}

html[data-bs-theme="dark"] .footer-title{
  color: rgba(229,231,235,.92);
}

html[data-bs-theme="dark"] .footer .text-muted{
  color: rgba(229,231,235,.74) !important;
}

html[data-bs-theme="dark"] .footer-links a{
  color: rgba(229,231,235,.78);
}

html[data-bs-theme="dark"] .footer-links a:hover{
  color: #ffffff;
}

html[data-bs-theme="dark"] .footer-mini-link{
  color: rgba(229,231,235,.78);
}

html[data-bs-theme="dark"] .footer-mini-link:hover{
  color: #ffffff;
}

html[data-bs-theme="dark"] .footer-hr{
  border-color: rgba(51,65,85,.85);
}

/* Dark: logo chip and socials */
html[data-bs-theme="dark"] .footer-logo{
  background: rgba(255,255,255,.06);
  border-color: rgba(51,65,85,.9);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
}

html[data-bs-theme="dark"] .social-btn{
  background: rgba(15,23,42,.92);
  border-color: rgba(51,65,85,.9);
  color: rgba(229,231,235,.80);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
}

html[data-bs-theme="dark"] .social-btn:hover{
  background: rgba(0,136,37,.16);
  border-color: rgba(0,136,37,.35);
  color: #fff;
}

/* Back to Top dark mode */
html[data-bs-theme="dark"] .back-to-top{
  background: rgba(15,23,42,.92);
  border-color: rgba(0,136,37,.35);
  color: #ecfdf5;
}
html[data-bs-theme="dark"] .back-to-top:hover{
  background: rgba(0,136,37,.14);
  border-color: rgba(0,136,37,.50);
}


/* -----------------------------
   Back to Top Button
------------------------------ */
.back-to-top{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(0,136,37,.25);
  background: #fff;
  color: var(--brand-700);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 1050;
}

.back-to-top.show{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover{
  background: rgba(0,136,37,.08);
  border-color: rgba(0,136,37,.45);
}

/* -----------------------------
   Lightbox polish (GLightbox)
------------------------------ */
.glightbox-clean .gslide-description{
  background: rgba(15, 23, 42, .85);
}

/* -----------------------------
   Responsive tweaks
------------------------------ */
@media (max-width: 991.98px){
  .navbar .nav-link{
    padding: .75rem .9rem;
  }
  .section{ padding: 56px 0; }
}

@media (max-width: 575.98px){
  .brand-logo{ width: 40px; height: 40px; }
  .section{ padding: 48px 0; }
}


/* -----------------------------
   Dark Theme Overrides
   Uses: <html data-bs-theme="dark">
------------------------------ */
html[data-bs-theme="dark"]{
  --text: #e5e7eb;      /* slate-200 */
  --muted: #a3a3a3;
  --muted-2: #9ca3af;
  --border: rgba(148,163,184,.22);
  --bg: #0b1220;        /* deep navy */
  --surface: #0f172a;   /* slate-900-ish */

  --shadow-sm: 0 10px 22px rgba(0,0,0,.28);
  --shadow-md: 0 18px 44px rgba(0,0,0,.35);
}

/* body background and text */
html[data-bs-theme="dark"] body{
  background: var(--bg);
  color: var(--text);
}

/* navbar / topbar / footer */
html[data-bs-theme="dark"] .topbar{
  background: rgba(15,23,42,.72);
  border-bottom: 1px solid var(--border);
}

html[data-bs-theme="dark"] .navbar{
  background: rgba(15,23,42,.92) !important;
  border-bottom: 1px solid var(--border);
}

html[data-bs-theme="dark"] .navbar .nav-link{
  color: rgba(229,231,235,.80);
}

html[data-bs-theme="dark"] .navbar .nav-link:hover{
  color: #fff;
  background: rgba(0,136,37,.14);
}

html[data-bs-theme="dark"] .navbar .nav-link.active{
  color: #fff;
  background: rgba(0,136,37,.18);
}

html[data-bs-theme="dark"] .footer{
  background: rgba(15,23,42,.92);
  border-top: 1px solid var(--border);
}

/* cards/surfaces */
html[data-bs-theme="dark"] .surface,
html[data-bs-theme="dark"] .card,
html[data-bs-theme="dark"] .card-soft{
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
/* --------------------------------
   Dark mode override for bg-white
---------------------------------- */

/* Any element using bg-white */
html[data-bs-theme="dark"] .bg-white{
    background-color: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border);
}

/* Nested text fixes (Bootstrap defaults) */
html[data-bs-theme="dark"] .bg-white .text-dark{
    color: var(--text) !important;
}

html[data-bs-theme="dark"] .bg-white .text-muted{
    color: var(--muted) !important;
}

/* Cards & dropdowns that rely on bg-white */
html[data-bs-theme="dark"] .bg-white.card,
html[data-bs-theme="dark"] .card.bg-white{
    background-color: var(--surface) !important;
    box-shadow: var(--shadow-sm);
}

/* Navbar dropdown menus */
html[data-bs-theme="dark"] .dropdown-menu.bg-white,
html[data-bs-theme="dark"] .dropdown-menu{
    background-color: var(--surface) !important;
    border-color: var(--border);
}

/* Modals */
html[data-bs-theme="dark"] .modal-content{
    background-color: var(--surface);
    border-color: var(--border);
}

/* Tables */
html[data-bs-theme="dark"] .table{
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    --bs-table-border-color: var(--border);
}

html[data-bs-theme="dark"] .table-light{
    --bs-table-bg: var(--surface);
    --bs-table-color: var(--text);
}

/* Alerts */
html[data-bs-theme="dark"] .alert-light{
    background-color: rgba(15,23,42,.65);
    border-color: var(--border);
    color: var(--text);
}

/* List groups */
html[data-bs-theme="dark"] .list-group-item{
    background-color: var(--surface);
    border-color: var(--border);
    color: var(--text);
}

/* Offcanvas */
html[data-bs-theme="dark"] .offcanvas{
    background-color: var(--surface);
    color: var(--text);
}


html[data-bs-theme="dark"] .soft-bg{
  background: linear-gradient(180deg, rgba(0,136,37,.08), rgba(15,23,42,.10));
}

/* borders / hr */
html[data-bs-theme="dark"] hr,
html[data-bs-theme="dark"] .footer-hr{
  border-color: var(--border);
}

/* forms */
html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select{
  background: rgba(2,6,23,.35);
  border-color: var(--border);
  color: var(--text);
}

html[data-bs-theme="dark"] .form-control::placeholder{
  color: rgba(229,231,235,.55);
}

/* buttons */
html[data-bs-theme="dark"] .btn-soft{
  background: rgba(255,255,255,.06);
  border-color: var(--border);
  color: rgba(229,231,235,.86);
}

html[data-bs-theme="dark"] .btn-brand-outline{
  background: rgba(255,255,255,.03);
  color: #d1fae5;
  border-color: rgba(0,136,37,.45);
}

html[data-bs-theme="dark"] .btn-brand-outline:hover{
  background: rgba(0,136,37,.14);
  color: #fff;
}

/* pills/icons */
html[data-bs-theme="dark"] .icon-pill{
  background: rgba(0,136,37,.16);
  border-color: rgba(0,136,37,.28);
  color: #b7f7ce;
}

/* links */
html[data-bs-theme="dark"] a{
  color: #7cf0a8;
}
html[data-bs-theme="dark"] a:hover{
  color: #b7f7ce;
}

/* back-to-top */
html[data-bs-theme="dark"] .back-to-top{
  background: rgba(15,23,42,.92);
  border-color: rgba(0,136,37,.35);
  color: #b7f7ce;
}

/* --------------------------------
   Dark mode: CTA Split
---------------------------------- */
html[data-bs-theme="dark"] .cta-split{
    background:
        radial-gradient(900px 380px at 15% 10%, rgba(0,136,37,.22), transparent 60%),
        radial-gradient(900px 380px at 85% 0%, rgba(0,136,37,.14), transparent 55%),
        rgba(15,23,42,.92) !important;
    border-color: var(--border) !important;
    box-shadow: var(--shadow-md);
}

html[data-bs-theme="dark"] .cta-split h1,
html[data-bs-theme="dark"] .cta-split h2,
html[data-bs-theme="dark"] .cta-split h3,
html[data-bs-theme="dark"] .cta-split .fw-bold{
    color: var(--text) !important;
}

html[data-bs-theme="dark"] .cta-split p,
html[data-bs-theme="dark"] .cta-split .text-muted,
html[data-bs-theme="dark"] .cta-split .small-muted{
    color: rgba(229,231,235,.78) !important;
}

/* Inner divider (Bootstrap border utilities) */
html[data-bs-theme="dark"] .cta-split .border-top,
html[data-bs-theme="dark"] .cta-split .border-start,
html[data-bs-theme="dark"] .cta-split .border-lg-start,
html[data-bs-theme="dark"] .cta-split .border-lg-top-0{
    border-color: var(--border) !important;
}

/* Badge */
html[data-bs-theme="dark"] .cta-split .badge-soft{
    background: rgba(0,136,37,.16);
    border-color: rgba(0,136,37,.28);
    color: #b7f7ce;
}

/* Buttons inside CTA */
html[data-bs-theme="dark"] .cta-split .btn-brand{
    box-shadow: 0 16px 34px rgba(0,136,37,.22);
}

html[data-bs-theme="dark"] .cta-split .btn-brand-outline{
    background: rgba(255,255,255,.03) !important;
    border-color: rgba(0,136,37,.50) !important;
    color: #d1fae5 !important;
}

html[data-bs-theme="dark"] .cta-split .btn-brand-outline:hover{
    background: rgba(0,136,37,.18) !important;
    color: #fff !important;
}

/* Links inside CTA */
html[data-bs-theme="dark"] .cta-split a{
    color: #7cf0a8;
}
html[data-bs-theme="dark"] .cta-split a:hover{
    color: #b7f7ce;
}


    /* --------------------------------
   Professional CTA block
---------------------------------- */
.cta-pro{
    border-radius: var(--radius-xl, 22px);
    border: 1px solid var(--border);
    background:
        radial-gradient(900px 320px at 15% 10%, rgba(0,136,37,.12), transparent 60%),
        radial-gradient(900px 320px at 85% 0%, rgba(0,136,37,.10), transparent 55%),
        var(--surface);
    box-shadow: var(--shadow-sm);
}

.cta-actions{
    display: grid;
    gap: 14px;
}

@media (min-width: 992px){
    .cta-actions{ gap: 16px; }
}

.cta-action-card{
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: rgba(255,255,255,.75);
    padding: 16px;
    box-shadow: var(--shadow-xs, 0 6px 18px rgba(2,6,23,.06));
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.cta-action-card:hover{
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: rgba(0,136,37,.25);
}

.cta-icon{
    width: 46px;
    height: 46px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,136,37,.12);
    border: 1px solid rgba(0,136,37,.22);
    color: var(--brand-700);
}

/* Dark mode */
html[data-bs-theme="dark"] .cta-pro{
    background:
        radial-gradient(900px 320px at 15% 10%, rgba(0,136,37,.18), transparent 60%),
        radial-gradient(900px 320px at 85% 0%, rgba(0,136,37,.14), transparent 55%),
        rgba(15,23,42,.92);
}

html[data-bs-theme="dark"] .cta-action-card{
    background: rgba(15,23,42,.92);
    border-color: var(--border);
}

html[data-bs-theme="dark"] .cta-action-card:hover{
    border-color: rgba(0,136,37,.35);
}

html[data-bs-theme="dark"] .cta-icon{
    background: rgba(0,136,37,.18);
    border-color: rgba(0,136,37,.35);
    color: #ecfdf5;
}