IMPACT TRACKER SECTION ═══════════════════════════════════════════════════════════ */ .impact {
     background: var(--bg-gray);
     padding: 3rem 0;
     position: relative;
   }

   .live-badge {
     display: inline-flex;
     align-items: center;
     gap: 0.4rem;
     background: rgba(172, 8, 7, 0.08);
     border: 1px solid rgba(172, 8, 7, 0.15);
     color: var(--red);
     font-size: 0.78rem;
     font-weight: 700;
     padding: 0.2em 0.75em;
     border-radius: 100px;
     font-family: var(--font-head);
   }

   .live-dot {
     font-size: 0.5rem;
     animation: livePulse 1.2s infinite;
   }

   @keyframes livePulse {

     0%,
     100% {
       opacity: 1;
     }

     50% {
       opacity: 0.2;
     }
   }

   .impact-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 1.5rem;
   }

   .impact-card {
     background: var(--bg-white);
     border-radius: var(--radius-md);
     padding: 2rem 1.6rem;
     box-shadow: var(--shadow-sm);
     text-align: center;
     transition: var(--transition);
     border: 1px solid var(--border);
     position: relative;
     overflow: hidden;
   }

   .impact-card::before {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 3px;
     background: linear-gradient(90deg, var(--red), var(--gold));
     transform: scaleX(0);
     transition: var(--transition);
     transform-origin: left;
   }

   .impact-card:hover {
     transform: translateY(-6px);
     box-shadow: var(--shadow-md);
     border-color: rgba(255, 189, 7, 0.3);
   }

   .impact-card:hover::before {
     transform: scaleX(1);
   }

   .impact-icon {
     width: 54px;
     height: 54px;
     border-radius: 14px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 1.2rem;
     font-size: 1.3rem;
   }

   .facebook-icon {
     background: rgba(24, 119, 242, 0.1);
     color: #1877f2;
   }

   .member-icon {
     background: rgba(172, 8, 7, 0.1);
     color: var(--red);
   }

   .event-icon {
     background: rgba(255, 189, 7, 0.12);
     color: var(--gold-dark);
   }

   .eco-icon {
     background: rgba(22, 163, 74, 0.1);
     color: #16a34a;
   }

   .crop-icon {
     background: rgba(5, 150, 105, 0.1);
     color: #059669;
   }

   .hours-icon {
     background: rgba(124, 58, 237, 0.1);
     color: #7c3aed;
   }

   .impact-number-wrap {
     display: flex;
     align-items: flex-end;
     justify-content: center;
     gap: 0.15rem;
     margin-bottom: 0.4rem;
   }

   .impact-number {
     font-family: var(--font-head);
     font-size: clamp(2rem, 4vw, 2.8rem);
     font-weight: 900;
     color: var(--dark);
     line-height: 1;
     font-variant-numeric: tabular-nums;
   }

   .impact-unit {
     font-family: var(--font-head);
     font-size: 1rem;
     font-weight: 700;
     color: var(--text-muted);
     padding-bottom: 0.3rem;
   }

   .impact-label {
     font-family: var(--font-head);
     font-size: 0.9rem;
     font-weight: 600;
     color: var(--dark);
     margin-bottom: 0.2rem;
   }

   .impact-sub {
     font-size: 0.75rem;
     color: var(--text-light);
     margin-bottom: 0.8rem;
   }

   .impact-update-tag {
     display: inline-flex;
     align-items: center;
     gap: 0.3rem;
     font-size: 0.7rem;
     font-weight: 600;
     color: var(--text-light);
     background: var(--bg-gray);
     padding: 0.25em 0.7em;
     border-radius: 100px;
   }
     /* ═══════════════════════════════════════════════════════════
     PROGRAMS GRID SECTION
  ═══════════════════════════════════════════════════════════ */
     .programs {
       background: var(--bg-gray);
       padding: 3rem 0;
     }
  
     .programs-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 1.6rem;
     }
  
     .program-card {
       background: var(--bg-white);
       border-radius: var(--radius-md);
       padding: 2rem;
       box-shadow: var(--shadow-sm);
       border: 1px solid var(--border);
       display: flex;
       flex-direction: column;
       gap: 0;
       transition: var(--transition);
       position: relative;
       overflow: hidden;
     }
  
     .program-card::after {
       content: '';
       position: absolute;
       inset: 0;
       border-radius: var(--radius-md);
       border: 2px solid transparent;
       transition: var(--transition);
       pointer-events: none;
     }
  
     .program-card:hover {
       transform: translateY(-10px);
       box-shadow: 0 24px 60px rgba(255, 189, 7, 0.18), var(--shadow-md);
       border-color: rgba(255, 189, 7, 0.4);
     }
  
     .program-card:hover::after {
       border-color: var(--gold);
     }
  
     .program-icon-wrap {
       width: 52px;
       height: 52px;
       border-radius: 14px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 1.3rem;
       margin-bottom: 1rem;
       transition: var(--transition);
     }
  
     .program-card:hover .program-icon-wrap {
       transform: scale(1.12) rotate(-6deg);
     }
  
     .eco-bg {
       background: rgba(22, 163, 74, 0.1);
       color: #16a34a;
     }
  
     .vege-bg {
       background: rgba(5, 150, 105, 0.1);
       color: #059669;
     }
  
     .civic-bg {
       background: rgba(172, 8, 7, 0.1);
       color: var(--red);
     }
  
     .leader-bg {
       background: rgba(255, 189, 7, 0.12);
       color: var(--gold-dark);
     }
  
     .clean-bg {
       background: rgba(2, 132, 199, 0.1);
       color: #0284c7;
     }
  
     .connect-bg {
       background: rgba(219, 39, 119, 0.1);
       color: #db2777;
     }
  
     .program-tag {
       display: inline-block;
       font-family: var(--font-head);
       font-size: 0.68rem;
       font-weight: 700;
       letter-spacing: 0.1em;
       text-transform: uppercase;
       color: var(--red);
       background: rgba(172, 8, 7, 0.07);
       padding: 0.25em 0.7em;
       border-radius: 100px;
       margin-bottom: 0.6rem;
       align-self: flex-start;
     }
  
     .program-title {
       font-family: var(--font-head);
       font-size: 1.25rem;
       font-weight: 700;
       color: var(--dark);
       margin-bottom: 0.8rem;
     }
  
     .program-desc {
       font-size: 0.88rem;
       color: var(--text-muted);
       line-height: 1.65;
       margin-bottom: 1.2rem;
       flex: 1;
     }
  
     .program-stats {
       display: flex;
       flex-direction: column;
       gap: 0.4rem;
       margin-bottom: 1.4rem;
     }
  
     .program-stats li {
       display: flex;
       align-items: center;
       gap: 0.5rem;
       font-size: 0.82rem;
       color: var(--text);
       font-weight: 500;
     }
  
     .program-stats li i {
       color: var(--gold-dark);
       font-size: 0.75rem;
       flex-shrink: 0;
     }
  
     .program-link {
       display: inline-flex;
       align-items: center;
       gap: 0.4rem;
       font-family: var(--font-head);
       font-size: 0.85rem;
       font-weight: 600;
       color: var(--red);
       border-top: 1px solid var(--border);
       padding-top: 1rem;
       margin-top: auto;
       transition: var(--transition);
     }
  
     .program-link:hover {
       color: var(--gold-dark);
       gap: 0.7rem;
     }
         /* ════════════════════════ PROJECTS SECTION ════════════════════════ */
         .projects-section {
           padding: 0rem 0;
           background: var(--bg-light);
           overflow: visible;
         }
    
         .projects-header-bar {
           margin-bottom: 1.5rem;
           text-align: center;
         }
    
         .projects-main-title {
           font-family: 'Poppins', sans-serif;
           font-weight: 900;
           font-size: clamp(2rem, 4vw, 3rem);
           color: #111;
           margin: 0 0 0.6rem;
         }
    
         .projects-title-line {
           height: 3px;
           background: var(--red, #cc0000);
           width: 100%;
           margin-bottom: 1rem;
           border-radius: 2px;
         }
    
         /* ── Events container ── */
         .proj-events-container {
           min-height: 500px;
           border-radius: 10px;
           box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
           overflow: hidden;
           background: white;
         }
    
         /* ── Tab nav ── */
         .proj-events-nav {
           display: flex;
           border-bottom: 1px solid #ddd;
           padding: 0 20px;
         }
    
         .proj-nav-tab {
           padding: 15px 25px;
           background: none;
           border: none;
           cursor: pointer;
           font-size: 18px;
           font-weight: bold;
           color: #666;
           font-family: 'Poppins', sans-serif;
           position: relative;
           transition: color 0.3s ease;
           outline: none;
           -webkit-tap-highlight-color: transparent;
         }
    
         .proj-nav-tab:hover {
           color: var(--red, #cc0000);
         }
    
         .proj-nav-tab.active {
           color: var(--red, #cc0000);
         }
    
         .proj-nav-tab.active::after {
           content: '';
           position: absolute;
           bottom: -1px;
           left: 0;
           width: 100%;
           height: 3px;
           background-color: var(--red, #cc0000);
         }
    
         /* ── Sections ── */
         .proj-events-section {
           display: none;
           padding: 20px;
         }
    
         .proj-events-section.active {
           display: block;
         }
    
         /* ── Banner ── */
         .proj-banner {
           position: relative;
           width: 100%;
           min-height: 600px;
           padding: 0 50px;
           display: flex;
           justify-content: space-between;
           align-items: center;
           gap: 50px;
           background: #111;
           background-size: cover;
           border-radius: 5px;
           overflow: hidden;
         }
    
         .proj-banner::before {
           content: '';
           position: absolute;
           inset: 0;
           background: rgba(0, 0, 0, 0.5);
           z-index: 2;
         }
    
         /* ── Background slide layers ── */
         .proj-bg-layer {
           position: absolute;
           inset: 0;
           background-size: cover;
           background-position: center;
           z-index: 1;
         }
    
         @keyframes projBgInRight {
           from {
             transform: translateX(100%);
           }
    
           to {
             transform: translateX(0);
           }
         }
    
         @keyframes projBgInLeft {
           from {
             transform: translateX(-100%);
           }
    
           to {
             transform: translateX(0);
           }
         }
    
         @keyframes projBgOutLeft {
           from {
             transform: translateX(0);
           }
    
           to {
             transform: translateX(-100%);
           }
         }
    
         @keyframes projBgOutRight {
           from {
             transform: translateX(0);
           }
    
           to {
             transform: translateX(100%);
           }
         }
    
         .proj-bg-in-right {
           animation: projBgInRight 0.65s cubic-bezier(0.4, 0, 0.2, 1) forwards;
         }
    
         .proj-bg-in-left {
           animation: projBgInLeft 0.65s cubic-bezier(0.4, 0, 0.2, 1) forwards;
         }
    
         .proj-bg-out-left {
           animation: projBgOutLeft 0.65s cubic-bezier(0.4, 0, 0.2, 1) forwards;
         }
    
         .proj-bg-out-right {
           animation: projBgOutRight 0.65s cubic-bezier(0.4, 0, 0.2, 1) forwards;
         }
    
         /* ── Left text content ── */
         .proj-content-left {
           position: relative;
           max-width: 400px;
           color: #f6f6f6;
           order: 1;
           z-index: 3;
           border-left: 4px solid var(--red, #cc0000);
           padding-left: 20px;
           display: flex;
           flex-direction: column;
           justify-content: center;
           gap: 0;
         }
    
         .proj-event-date {
           font-family: 'Poppins', sans-serif;
           font-size: 22px;
           font-weight: 600;
           color: rgba(255, 255, 255, 0.9);
           margin: 0 0 10px;
           padding: 0;
           transition: opacity 0.4s ease, transform 0.4s ease;
         }
    
         .proj-event-title {
           font-family: 'Poppins', sans-serif;
           font-size: 38px;
           line-height: 1.2;
           font-weight: 900;
           color: #fff;
           margin: 0 0 15px;
           text-transform: uppercase;
           transition: opacity 0.4s ease, transform 0.4s ease;
         }
    
         .proj-event-desc {
           font-size: 16px;
           color: rgba(255, 255, 255, 0.82);
           line-height: 1.65;
           margin: 0;
           transition: opacity 0.4s ease, transform 0.4s ease;
         }
    
         /* Text transition classes */
         .proj-text-out {
           opacity: 0 !important;
           transform: translateY(20px) !important;
         }
    
         .proj-text-in {
           opacity: 1 !important;
           transform: translateY(0) !important;
         }
    
         /* View Gallery button */
         .proj-gallery-link {
           display: inline-block;
           margin-top: 0;
           background: #fff;
           padding: 10px 22px;
           border-radius: 30px;
           text-decoration: none;
           color: var(--red, #cc0000);
           font-family: 'Poppins', sans-serif;
           font-weight: 700;
           font-size: 15px;
           width: fit-content;
           transition: background 0.2s ease, color 0.2s ease;
         }
    
         .proj-gallery-link:hover {
           background: var(--red, #cc0000);
           color: #fff;
         }
    
         /* ── Materialize carousel overrides ── */
         .proj-banner .carousel {
           order: 2;
           width: 300px !important;
           height: 400px !important;
           z-index: 3;
           overflow: visible !important;
           flex-shrink: 0;
         }
    
         .proj-banner .carousel .carousel-item {
           width: 100%;
           height: 100%;
           display: flex;
           align-items: center;
           justify-content: center;
         }
    
         .proj-banner .carousel .carousel-item img {
           width: 100%;
           height: 100%;
           border-radius: 20px;
           border: 5px solid white;
           object-fit: cover;
           transition: transform 0.3s ease;
         }
    
         .proj-banner .carousel .carousel-item img:hover {
           transform: scale(1.03);
         }
    
         /* ── Bottom controls row (View Gallery + Prev/Next) ── */
         .proj-bottom-controls {
           display: flex;
           align-items: center;
           gap: 14px;
           margin-top: 300px;
           position: fixed;
           flex-wrap: wrap;
         }
    
         /* ── Prev / Next buttons ── */
         .proj-slide-btns {
           display: flex;
           gap: 10px;
         }
    
         .proj-slide-btns button {
           background: rgba(255, 255, 255, 0.15);
           border: 2px solid rgba(255, 255, 255, 0.9);
           color: #fff;
           width: 44px;
           height: 44px;
           border-radius: 50%;
           cursor: pointer;
           font-size: 16px;
           display: flex;
           align-items: center;
           justify-content: center;
           transition: background 0.2s, transform 0.15s;
         }
    
         .proj-slide-btns button:hover {
           background: rgba(255, 255, 255, 0.32);
           transform: scale(1.1);
         }
    
         /* ── Upcoming section ── */
         .proj-upcoming-wrap {
           padding: 20px;
         }
    
         .proj-upcoming-title {
           color: var(--red, #cc0000);
           border-bottom: 2px solid var(--red, #cc0000);
           padding-bottom: 10px;
           margin-top: 0;
           font-family: 'Poppins', sans-serif;
           font-weight: 700;
           text-align: center;
           font-size: 40px;
         }
    
         .proj-upcoming-title span {
           color: #111;
         }
    
         /* ── Calendar Grid ── */
         .proj-calendar-grid {
           display: grid;
           grid-template-columns: repeat(3, 1fr);
           gap: 18px;
           margin: 30px 0 10px;
         }
    
         .proj-month-card {
           border-radius: 10px;
           overflow: hidden;
           box-shadow: 0 3px 12px rgba(0, 0, 0, 0.09);
           background: #fff;
           display: flex;
           flex-direction: column;
           transition: transform 0.25s ease, box-shadow 0.25s ease;
         }
    
         .proj-month-card:hover {
           transform: translateY(-4px);
           box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
         }
    
         .proj-month-header {
           background: var(--red, #cc0000);
           color: #fff;
           font-family: 'Poppins', sans-serif;
           font-weight: 700;
           font-size: 15px;
           padding: 10px 16px;
           text-transform: uppercase;
           letter-spacing: 0.5px;
         }
    
         .proj-month-events {
           list-style: none;
           padding: 14px 16px;
           margin: 0;
           display: flex;
           flex-direction: column;
           gap: 8px;
           flex: 1;
         }
    
         .proj-month-events li {
           font-family: 'Poppins', sans-serif;
           font-size: 13px;
           font-weight: 600;
           color: #333;
           padding: 8px 12px;
           background: #f7f7f7;
           border-radius: 6px;
           border-left: 3px solid var(--gold, #FFBD07);
           line-height: 1.4;
         }
    
         /* December full-width card */
         .proj-month-full {
           grid-column: 1 / -1;
         }
    
         .proj-month-events--row {
           flex-direction: row;
           flex-wrap: wrap;
         }
    
         .proj-month-events--row li {
           flex: 1 1 200px;
         }
    
         /* ── Responsive ── */
         @media (max-width: 960px) {
           .proj-banner {
             flex-direction: column;
             padding: 30px 20px;
             min-height: auto;
             gap: 20px;
           }
    
           .proj-content-left {
             max-width: 100%;
           }
    
           .proj-banner .carousel {
             width: 100% !important;
             height: 260px !important;
             order: 1;
           }
    
           .proj-upcoming-title {
             font-size: 28px;
           }
    
           .proj-calendar-grid {
             grid-template-columns: repeat(2, 1fr);
           }
    
           .proj-month-full {
             grid-column: 1 / -1;
           }
         }
    
         @media (max-width: 600px) {
           .proj-events-container {
             border-radius: 0;
           }
    
           .proj-banner {
             padding: 20px 15px;
           }
    
           .proj-event-title {
             font-size: 26px;
           }
    
           .proj-event-date {
             font-size: 17px;
           }
    
           .proj-event-desc {
             font-size: 14px;
           }
    
           .proj-calendar-grid {
             grid-template-columns: 1fr;
           }
    
           .proj-month-events--row {
             flex-direction: column;
           }
         }
    
         body {
           font-family: 'Poppins', Arial, sans-serif;
           background: #fff;
           margin: 0;
           padding: 0;
         }
    
         .officials-section {
           max-width: 1400px;
           margin: 40px auto;
           padding: 0 24px;
           text-align: center;
         }
    
         .officials-section h2 {
           font-size: 3rem;
           font-weight: 800;
           margin-bottom: 0;
           letter-spacing: 1px;
         }
    
         .officials-section h2 span {
           color: var(--red);
         }
    
         .officials-section p {
           font-size: 1.2rem;
           color: #222;
           margin-bottom: 40px;
           margin-top: 8px;
         }
    
         .officials-carousel-container {
           position: relative;
           display: flex;
           align-items: center;
           justify-content: center;
           position: relative;
         }
    
         .officials-arrow-btn {
           background: #e60000;
           color: #fff;
           border: none;
           border-radius: 50%;
           width: 50px;
           height: 50px;
           font-size: 1.2rem;
           cursor: pointer;
           display: flex;
           align-items: center;
           justify-content: center;
           transition: background 0.2s;
           z-index: 2;
           position: absolute;
           top: 50%;
           transform: translateY(-50%);
         }
    
         /* Move left/right arrows further from cards */
         .officials-arrow-btn#officialsPrevBtn {
           left: -70px;
         }
    
         .officials-arrow-btn#officialsNextBtn {
           right: -70px;
         }
    
         .officials-arrow-btn:disabled {
           background: #eee;
           color: #bbb;
           cursor: not-allowed;
         }
    
         .officials-cards-viewport {
           overflow: hidden;
           width: 100%;
           max-width: 1200px;
         }
    
         .officials-cards-row {
           display: flex;
           transition: transform 0.4s cubic-bezier(.4, 0, .2, 1);
           gap: 32px;
           padding: 16px 0;
         }
    
         .official-card {
           background: #fff;
           border-radius: 24px;
           box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
           width: 300px;
           min-width: 300px;
           max-width: 300px;
           display: flex;
           flex-direction: column;
           align-items: center;
           overflow: hidden;
           margin-bottom: 8px;
         }
    
         .official-card img {
           width: 100%;
           height: 320px;
           object-fit: cover;
           background: #eee;
           display: block;
         }
    
         .official-card .official-info {
           background: #e60000;
           color: #fff;
           width: 100%;
           padding: 18px 10px 12px 10px;
           border-bottom-left-radius: 16px;
           border-bottom-right-radius: 16px;
           border-top: 4px solid #c0c0c0;
           box-sizing: border-box;
         }
    
         .official-card .official-name {
           font-size: 1.2rem;
           font-weight: 700;
           margin: 0 0 4px 0;
           line-height: 1.2;
         }
    
         .official-card .official-position {
           font-size: 1rem;
           font-weight: 400;
           margin: 0;
           letter-spacing: 1px;
         }
    
         .official-card .official-name.big {
           font-size: 1.1rem;
           font-weight: 800;
           text-transform: uppercase;
         }
    
         .carousel-indicators {
           margin: 24px 0 0 0;
           display: flex;
           justify-content: center;
           align-items: center;
           gap: 24px;
           margin-bottom: 24px;
           margin-top: 0;
           position: static;
           z-index: 2;
    
           height: 6px;
           border-radius: 3px;
           background: #e0e0e0;
           transition: background 0.2s;
         }
    
         .carousel-indicator.active {
           background: #e60000;
         }
    
         @media (max-width: 1300px) {
           .officials-cards-viewport {
             max-width: 900px;
           }
    
           .official-card {
             width: 240px;
             min-width: 240px;
             max-width: 240px;
           }
    
           .official-card img {
             height: 220px;
           }
         }
    
         @media (max-width: 1000px) {
           .officials-cards-viewport {
             max-width: 600px;
           }
    
           .official-card {
             width: 180px;
             min-width: 180px;
             max-width: 180px;
           }
    
           .official-card img {
             height: 140px;
           }
         }
    
         @media (max-width: 700px) {
           .officials-section h2 {
             font-size: 2rem;
           }
    
           .officials-cards-viewport {
             max-width: 320px;
           }
    
           .official-card {
             width: 90vw;
             min-width: 90vw;
             max-width: 90vw;
           }
    
           .official-card img {
             height: 100px;
           }
    
           .officials-arrow-btn {
             width: 40px;
             height: 40px;
             font-size: 1.2rem;
           }
         }