:root{
      --green:#2b7a38;
      --green-overlay:rgba(43,122,115,0.8);
      --light:#f3f3f3;
      --beige:#e6dfd4;
      --orange:#f4a64a;
      --grey:#d9d9d9;
      --text:#333333;
      --radius-card:10px;
      --radius-btn:25px;
      --shadow:0 10px 24px rgba(0,0,0,.08);
    }
    .bg-green{
      background: var(--gradient-main) !important;
    }
    html,body{height:100%}
    body{
      font-family:Poppins,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif;
      color:var(--text);
      background:#fff;
      
    }

    /* Header */
    header{
      background:var(--gradient-main);;
      color:#fff;
    }
    .navbar .navbar-brand{
      font-weight:700;
      letter-spacing:.5px;
      color:#fff;
    }
    .brand-badge{
      background:#fff;
      color:var(--gradient-main);;
      padding:.25rem .5rem;
      border-radius:.4rem;
      margin-right:.5rem;
      font-weight:700;
    }
    .navbar .nav-link{
      /* color:#fff; */
      padding:.5rem 1rem;
      font-weight:500;
    }
    .navbar .nav-link:hover{opacity:.85}
    .btn-donate{
      background:var(--orange);
      color:#212529;
      border:none;
      border-radius:var(--radius-btn);
      padding:.5rem 1rem;
      font-weight:600;
      box-shadow:0 6px 14px rgba(244,166,74,.3);
    }
    .btn-donate .fa-heart{color:#c54c1c;margin-left:.4rem}

    /* Offcanvas mobile menu */
    .offcanvas{
      background:var(--green-overlay);
      color:#fff;
      backdrop-filter:saturate(120%) blur(2px);
    }
    .offcanvas .nav-link{color:#fff;font-size:1rem}
    .offcanvas .btn-donate{width:100%}

    /* Hero */
    .hero{
      background:var(--light);
      padding:0 0;
    }
    .section{padding:80px 0}
    @media (max-width: 576px){
      .section{padding:40px 0}
    }
    .hero-wrap{padding-top:24px;padding-bottom:24px}
    .hero-img{
      position:relative;
      min-height:892px;
      border:1px solid var(--grey);
      border-radius:8px;
      overflow:hidden;
      background: linear-gradient(rgb(18 19 18 / 60%), rgb(17 20 17 / 60%)), url('donation.png');
      background-size:cover;
      background-position:center;
      box-shadow:var(--shadow);
    }
    .hero-img::after{
      content:"";
      position:absolute;inset:0;
      /* background:var(--green-overlay); */
    }
    .hero-text{
      position:absolute;left:24px;bottom:24px;right:24px;
      color:#000;
    }
    .hero-title{
      font-family:"Playfair Display",serif;
      font-size:48px;
      line-height:1.1;
      margin-bottom:.5rem;
    }
    .hero-desc{
      max-width:560px;
      font-weight:400;
      opacity:.95;
    }
    @media (max-width: 576px){
      .hero-img{min-height:420px}
      .hero-title{font-size:38px}
    }

    /* Donation card */
    .donation-card{
      background:#fff;
      border:1px solid var(--grey);
      border-radius:var(--radius-card);
      box-shadow:var(--shadow);
      padding:24px;
    }
    .donation-card h5{
      font-weight:700;
      margin-bottom:.25rem;
      color:var(--text);
    }
    .donation-sub{
      font-size:.95rem;color:#667085;
      margin-bottom:1rem;
    }
    .amount-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:.75rem;
      margin-bottom:.75rem;
    }
    @media (max-width: 576px){
      .amount-grid{grid-template-columns:repeat(2,1fr)}
    }
    .amount-btn{
      border:2px solid var(--orange);
      color:#c54c1c;
      background:#fff;
      border-radius:var(--radius-btn);
      padding:.5rem .75rem;
      font-weight:600;
      transition:.2s ease;
    }
    .amount-btn.active{
      background:var(--orange);
      color:#212529;
      box-shadow:0 8px 18px rgba(244,166,74,.35);
    }
    .custom-amount{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:.75rem;
      margin-bottom:.75rem;
    }
    @media (max-width: 576px){
      .custom-amount{grid-template-columns:1fr}
    }
    .form-control, .form-select{
      border-color:var(--grey);
      border-radius:10px;
    }
    .form-control:focus, .form-select:focus{
      border-color:#bfbfbf;
      box-shadow:0 0 0 .2rem rgba(43,122,115,.08);
    }
    .donation-helper{
      color:#888;font-size:.9rem;margin-top:.25rem;margin-bottom:.75rem;
    }
    .radio-line{
      display:flex;gap:1.25rem;margin:.75rem 0 1rem;
    }
    .donate-action{
      text-align:center;
    }
    .btn-main{
      background:var(--orange);
      border:none;
      border-radius:var(--radius-btn);
      padding:.7rem 2.4rem;
      font-weight:700;
      box-shadow:0 10px 22px rgba(244,166,74,.35);
    }
    .share-line{
      display:flex;align-items:center;gap:.75rem;
      margin-top:1rem;color:#667085;
    }
    .share-line .icon{
      width:36px;height:36px;border:1px solid var(--grey);
      border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
      color:#667085;transition:.2s;
    }
    .share-line .icon:hover{background:var(--light)}

    /* WHY DONATE */
    .beige{background:var(--beige)}
    .why-title{
      font-weight:800;letter-spacing:.3px;margin-bottom:.5rem;
    }
    .why-text{max-width:720px}
    .chart-wrap{display:flex;align-items:center;justify-content:center}
    .pie-3d{
      position:relative;
      width:280px;height:180px;border-radius:50%;
      background:
        conic-gradient(var(--gradient-main) 0 331deg, #b8ddd9 331deg 360deg);
      transform:perspective(700px) rotateX(30deg);
      box-shadow:0 30px 40px rgba(0,0,0,.08);
    }
    .pie-3d::before{
      content:"";
      position:absolute;inset:12% 10%;
      border-radius:50%;
      background:radial-gradient(ellipse at 30% 30%, rgba(255,255,255,.6), rgba(255,255,255,0) 55%);
      transform:translateZ(0);
    }
    .chart-legend{
      text-align:center;margin-top:.75rem;color:#667085;font-weight:600;
    }
    .legend-items{
      display:flex;gap:1rem;justify-content:center;margin-top:.25rem;
    }
    .legend-dot{width:12px;height:12px;border-radius:50%;display:inline-block;margin-right:.4rem}
    .dot-programme{background:var(--gradient-main);}
    .dot-admin{background:#b8ddd9}

    /* FAQ */
    .faq-title{font-weight:800;margin-bottom:1rem}
    .faq-img{
      border:1px solid var(--grey);
      border-radius:8px;
      overflow:hidden;
      box-shadow:var(--shadow);
    }
    .faq-img img{width:100%;height:435px;display:block}
    .accordion{
      --bs-accordion-border-color: var(--grey);
      --bs-accordion-border-radius: 10px;
    }
    .accordion-button{
      border-radius:10px!important;
      background:var(--light);
      color:var(--text);
      font-weight:600;
    }
    .accordion-button:not(.collapsed){
      background: var(--gradient-main);;
      color:#fff;
      box-shadow:none;
    }
    .accordion-item{
      border:none;margin-bottom:.6rem;
      box-shadow:var(--shadow);
      border-radius:10px;
      overflow:hidden;
    }
    .accordion-body{background:#fff}

    /* Footer */
    footer{
      background:var(--gradient-main);;
      color:#fff;
      padding:24px 0;
      font-size:.9rem;
    }

    /* Utilities */
    .muted{color:#667085}

    .container-fluid{
      width: 90%;
    }

    .hero-banner {
        height: 80vh;
        background: linear-gradient(rgb(110 146 85 / 60%), rgb(17 20 17 / 60%)), url('home.png');
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
    }

    .hero-banner-donation{
         height: 80vh;
        background: linear-gradient(rgb(110 146 85 / 60%), rgb(17 20 17 / 60%)), url('1.png');
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
    }

    .hero-title {
        font-size: 3.5rem;
        font-weight: 800;
        text-shadow: 2px 2px 10px rgba(0,0,0,0.3);
    }

    .stat-card {
        padding: 30px;
        text-align: center;
        border-radius: 20px;
        transition: transform 0.3s ease;
    }

    .stat-card:hover {
        transform: scale(1.05);
    }

    .service-icon {
        width: 70px;
        height: 70px;
        background: var(--gradient-main);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        color: white;
        font-size: 1.8rem;
        margin: 0 auto 20px;
    }

    .how-it-works-step {
        text-align: center;
        padding: 20px;
    }

    .step-number {
        width: 40px;
        height: 40px;
        background: var(--primary-green);
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 15px;
        font-weight: 700;
    }

    .gallery-img {
        width: 100%;
        height: 250px;
        object-fit: cover;
        border-radius: 15px;
        transition: transform 0.3s ease;
        cursor: pointer;
    }

    .gallery-img:hover {
        transform: scale(1.03);
    }

    .faq-accordion .accordion-item {
        border: none;
        margin-bottom: 10px;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: var(--soft-shadow);
    }

    .faq-accordion .accordion-button:not(.collapsed) {
        background-color: var(--primary-green);
        color: white;
    }

    .cta-section {
        background: var(--gradient-main);
        color: white;
        padding: 80px 0;
        border-radius: 30px;
        margin-top: 50px;
    }