:root{
      --green:#7677a5;
      --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(--green) !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(--green);
      color:#fff;
    }
    .navbar .navbar-brand{
      font-weight:700;
      letter-spacing:.5px;
      color:#fff;
    }
    .brand-badge{
      background:#fff;
      color:var(--green);
      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:#fff;
      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-image:url("carousel1.jpg");
      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:#fff;
    }
    .hero-title{
      font-family:"Playfair Display",serif;
      font-size:48px;
      line-height:1.1;
      margin-bottom:.5rem;
    }
    .hero-desc{
      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:#057b9d;
      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);
      color: #fff;
    }
    .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:100%;height:270px;border-radius:50%;
      background:
        conic-gradient(var(--green) 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:#057b9d}
    .dot-admin{background:#912020}

    /* 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(--green);
      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(--green);
      color:#fff;
      padding:24px 0;
      font-size:.9rem;
    }

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

    .container-fluid{
      width: 90%;
    }