:root {
        --green-light:  #90ee90;
        --green-mid:    #4caf50;
        --green-dark:   #2e7d32;
        --green-bg:     #e8f5e9;
      }

      /* ---- Primary buttons ---- */
      .btn-primary,
      a.btn-primary,
      button.btn-primary,
      input[type="submit"].btn-primary {
        background-color: var(--green-mid) !important;
        border-color: var(--green-mid) !important;
        color: #fff !important;
      }
      .btn-primary:hover,
      a.btn-primary:hover {
        background-color: var(--green-dark) !important;
        border-color: var(--green-dark) !important;
      }

      /* ---- White outlined buttons on hero ---- */
      .btn-white,
      a.btn-white,
      .btn-outline-white {
        background-color: transparent !important;
        border-color: var(--green-light) !important;
        color: var(--green-light) !important;
      }
      .btn-white:hover,
      a.btn-white:hover {
        background-color: var(--green-light) !important;
        color: #1a3a1a !important;
      }

      /* Submit button in volunteer form */
      input[type="submit"] {
        background-color: var(--green-mid) !important;
        border-color: var(--green-mid) !important;
        color: #fff !important;
      }
      input[type="submit"]:hover {
        background-color: var(--green-dark) !important;
      }

      /* ---- Counter / intro section blocks ---- */
      .block-18.color-1 {
        background-color: var(--green-mid) !important;
      }
      .block-18.color-2 {
        background-color: var(--green-dark) !important;
      }
      .block-18.color-3 {
        background-color: #388e3c !important;
      }

      /* ---- Service icons ---- */
      .services .icon span,
      .services .icon {
        color: var(--green-mid) !important;
        border-color: var(--green-light) !important;
      }

      /* ---- Progress bars ---- */
      .progress-bar,
      .progress-bar.bg-primary {
        background-color: var(--green-mid) !important;
      }

      /* ---- Links & headings accent ---- */
      a {
        color: var(--green-dark) !important;
      }
      a:hover {
        color: var(--green-mid) !important;
      }

      /* ---- Navbar logo — white on hero, black past hero ---- */
      #ftco-navbar .navbar-brand {
        color: #ffffff !important;
      }
      #ftco-navbar.scrolled .navbar-brand {
        color: #111111 !important;
      }

      /* ---- Navbar menu items — white text ONLY, all states ---- */
      #ftco-navbar ul.navbar-nav li.nav-item a.nav-link,
      #ftco-navbar ul.navbar-nav li.nav-item a.nav-link:visited,
      #ftco-navbar ul.navbar-nav li.nav-item a.nav-link:focus,
      #ftco-navbar ul.navbar-nav li.nav-item a.nav-link:active {
        color: #ffffff !important;
      }
      #ftco-navbar ul.navbar-nav li.nav-item a.nav-link:hover {
        color: #ffffff !important;
        opacity: 0.8;
      }

      /* ---- Section headings underline/accent ---- */
      .heading-section h2::after,
      .heading-section span {
        background: var(--green-mid) !important;
        color: var(--green-mid) !important;
      }

      /* ---- Staff/person position label ---- */
      .staff .info .position {
        color: var(--green-mid) !important;
      }

      /* ---- Staff text span (loan amount highlight) ---- */
      .staff .info .text p span {
        color: var(--green-dark) !important;
        font-weight: 700;
      }

      /* ---- Blog meta icons & chat links ---- */
      .meta a,
      .meta-chat,
      .meta-chat span {
        color: var(--green-mid) !important;
      }

      /* ---- Blog/cause entry heading links ---- */
      .cause-entry .text h3 a,
      .blog-entry .text h3 a,
      .heading a {
        color: #1a3a1a !important;
      }
      .cause-entry .text h3 a:hover,
      .blog-entry .text h3 a:hover {
        color: var(--green-mid) !important;
      }

      /* ---- Donation time / raised labels ---- */
      .donation-time,
      .fund-raised {
        color: var(--green-dark) !important;
      }

      /* ---- Footer heading ---- */
      .ftco-footer-widget .ftco-heading-2 {
        color: var(--green-light) !important;
      }

      /* ---- Footer links ---- */
      .ftco-footer a,
      .ftco-footer .block-23 ul li a {
        color: #b9f0b9 !important;
      }
      .ftco-footer a:hover {
        color: var(--green-light) !important;
      }

      /* ---- Footer social icons ---- */
      .ftco-footer-social li a {
        background: var(--green-mid) !important;
        border-color: var(--green-mid) !important;
        color: #fff !important;
      }
      .ftco-footer-social li a:hover {
        background: var(--green-dark) !important;
      }

      /* ---- Loader circle stroke ---- */
      .path {
        stroke: var(--green-mid) !important;
      }

      /* ---- Event/time location icons ---- */
      .time-loc span,
      .time-loc i {
        color: var(--green-mid) !important;
      }

      /* ---- "Join Event" arrow links ---- */
      .blog-entry .text p a {
        color: var(--green-mid) !important;
        font-weight: 600;
      }
      .blog-entry .text p a:hover {
        color: var(--green-dark) !important;
      }

      /* ---- Block-21 footer news heading ---- */
      .block-21 .text .heading a {
        color: #fff !important;
      }
      .block-21 .text .heading a:hover {
        color: var(--green-light) !important;
      }

      /* ---- Counter number ---- */
      .block-18 .text strong.number {
        color: #fff !important;
      }

      /* ---- Volunteer section heading ---- */
      .volunteer h3 {
        color: #fff !important;
      }

      /* ---- Form controls focus ring ---- */
      .form-control:focus {
        border-color: var(--green-mid) !important;
        box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25) !important;
      }

      /* ---- Flaticon icons in service blocks ---- */
      .flaticon-donation-1::before,
      .flaticon-charity::before,
      .flaticon-donation::before {
        color: var(--green-mid) !important;
      }

      /* ---- "bg-light" sections subtle green tint ---- */
      .bg-light {
        background-color: var(--green-bg) !important;
      }

      /* ---- Navbar scrolled past hero: black text, green hover ---- */
      #ftco-navbar.scrolled ul.navbar-nav li.nav-item a.nav-link,
      #ftco-navbar.scrolled ul.navbar-nav li.nav-item a.nav-link:visited,
      #ftco-navbar.scrolled ul.navbar-nav li.nav-item a.nav-link:focus,
      #ftco-navbar.scrolled ul.navbar-nav li.nav-item a.nav-link:active {
        color: #111111 !important;
        opacity: 1 !important;
      }
      #ftco-navbar.scrolled ul.navbar-nav li.nav-item a.nav-link:hover {
        color: var(--green-mid) !important;
        opacity: 1 !important;
      }

      /* ---- Hero CTA secondary button ---- */
      .hero-wrap .btn {
        border-color: var(--green-light) !important;
      }
      .hero-wrap .btn-primary {
        background-color: var(--green-mid) !important;
        border-color: var(--green-mid) !important;
      }