{"id":1598,"date":"2026-08-21T15:40:56","date_gmt":"2026-08-21T15:40:56","guid":{"rendered":"https:\/\/demo.freshosoft.in\/bargach\/?page_id=1598"},"modified":"2026-08-21T15:49:07","modified_gmt":"2026-08-21T15:49:07","slug":"our-programs","status":"publish","type":"page","link":"https:\/\/demo.freshosoft.in\/bargach\/our-programs\/","title":{"rendered":"Our Programs"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1598\" class=\"elementor elementor-1598\" data-elementor-settings=\"{&quot;ha_cmc_init_switcher&quot;:&quot;no&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-99ddde5 e-con e-atomic-element e-flexbox-base e-10f316b \" data-id=\"99ddde5\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"99ddde5\">\n    \t\t<div class=\"elementor-element elementor-element-a083630 elementor-widget elementor-widget-html\" data-id=\"a083630\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     BARGACH \u00b7 PROGRAMS HERO SLIDER\r\n     Clean, light, colorful slider with 4 slides.\r\n     ============================================================ -->\r\n<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,380;0,9..144,560;1,9..144,380&family=Inter:wght@300;400;500;600;700&display=swap');\r\n\r\n  .bargach-programs-slider {\r\n    --coral: #e07a5f;\r\n    --coral-light: #f0a38c;\r\n    --gold: #d48c3c;\r\n    --gold-2: #e8b86d;\r\n    --teal: #2a9d8f;\r\n    --text-dark: #1f2a26;\r\n    --text-body: #3d534a;\r\n    --text-muted: #6a8a7a;\r\n    --bg-light: #f8f4ed;\r\n    --bg-card: rgba(255, 255, 255, 0.82);\r\n    --hairline: rgba(26, 122, 107, 0.08);\r\n    --serif: 'Fraunces', Georgia, 'Times New Roman', serif;\r\n    --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\r\n\r\n    position: relative;\r\n    width: 100%;\r\n    padding: clamp(40px, 5vw, 60px) 0;\r\n    background: var(--bg-light);\r\n    overflow: hidden;\r\n  }\r\n  .bargach-programs-slider * { box-sizing: border-box; }\r\n\r\n  .bargach-programs-slider .ps-bg {\r\n    position: absolute; inset: 0; z-index: 0;\r\n    background:\r\n      radial-gradient(ellipse at 10% 20%, rgba(212,140,60,0.05) 0%, transparent 50%),\r\n      radial-gradient(ellipse at 90% 80%, rgba(42,157,143,0.04) 0%, transparent 50%);\r\n    pointer-events: none;\r\n  }\r\n\r\n  .bargach-programs-slider .ps-container {\r\n    position: relative; z-index: 2;\r\n    max-width: 1200px; margin: 0 auto;\r\n    padding: 0 clamp(22px, 4.5vw, 56px);\r\n  }\r\n\r\n  \/* ========== SLIDER WRAPPER ========== *\/\r\n  .bargach-programs-slider .ps-slider {\r\n    position: relative;\r\n    border-radius: 20px;\r\n    overflow: hidden;\r\n    box-shadow: 0 4px 24px rgba(31,42,38,0.06);\r\n    background: var(--bg-card);\r\n    border: 1px solid var(--hairline);\r\n  }\r\n\r\n  .bargach-programs-slider .ps-track {\r\n    display: flex;\r\n    transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);\r\n    will-change: transform;\r\n  }\r\n\r\n  .bargach-programs-slider .ps-slide {\r\n    flex: 0 0 100%;\r\n    display: grid;\r\n    grid-template-columns: 1fr 0.9fr;\r\n    min-height: 320px;\r\n  }\r\n  @media (max-width: 768px) {\r\n    .bargach-programs-slider .ps-slide {\r\n      grid-template-columns: 1fr;\r\n      min-height: auto;\r\n    }\r\n  }\r\n\r\n  \/* Image side *\/\r\n  .bargach-programs-slider .ps-slide .ps-image {\r\n    width: 100%; min-height: 280px;\r\n    overflow: hidden; position: relative;\r\n  }\r\n  .bargach-programs-slider .ps-slide .ps-image img {\r\n    width: 100%; height: 100%; object-fit: cover; display: block;\r\n  }\r\n  .bargach-programs-slider .ps-slide .ps-image .ps-badge {\r\n    position: absolute; top: 16px; left: 16px;\r\n    background: rgba(255,255,255,0.88); backdrop-filter: blur(4px);\r\n    padding: 4px 16px; border-radius: 999px;\r\n    font-size: 9px; font-weight: 600; text-transform: uppercase;\r\n    letter-spacing: 0.08em; color: var(--coral);\r\n    border: 1px solid rgba(224,122,95,0.08);\r\n  }\r\n\r\n  \/* Content side *\/\r\n  .bargach-programs-slider .ps-slide .ps-content {\r\n    padding: clamp(28px, 3.5vw, 44px) clamp(24px, 3vw, 40px);\r\n    display: flex; flex-direction: column; justify-content: center;\r\n    background: rgba(255,255,255,0.50);\r\n    backdrop-filter: blur(8px);\r\n    -webkit-backdrop-filter: blur(8px);\r\n  }\r\n  .bargach-programs-slider .ps-slide .ps-content .ps-eyebrow {\r\n    font-size: 10px; font-weight: 600; letter-spacing: 0.12em;\r\n    text-transform: uppercase; color: var(--coral); margin: 0 0 4px;\r\n  }\r\n  .bargach-programs-slider .ps-slide .ps-content .ps-headline {\r\n    font-family: var(--serif); font-weight: 560;\r\n    font-size: clamp(22px, 2.8vw, 36px);\r\n    color: var(--text-dark); margin: 0 0 8px; line-height: 1.1;\r\n  }\r\n  .bargach-programs-slider .ps-slide .ps-content .ps-headline .highlight {\r\n    color: var(--coral);\r\n  }\r\n  .bargach-programs-slider .ps-slide .ps-content .ps-text {\r\n    font-size: clamp(14px, 1vw, 16px); line-height: 1.7;\r\n    color: var(--text-body); font-weight: 300; margin: 0 0 16px;\r\n    max-width: 460px;\r\n  }\r\n  .bargach-programs-slider .ps-slide .ps-content .ps-btn {\r\n    display: inline-flex; align-items: center; gap: 8px;\r\n    padding: 10px 24px; border-radius: 999px;\r\n    background: var(--gold); color: #fff;\r\n    font-size: 13px; font-weight: 600; text-decoration: none;\r\n    border: none; cursor: pointer; font-family: var(--sans);\r\n    transition: all 0.3s ease; align-self: flex-start;\r\n  }\r\n  .bargach-programs-slider .ps-slide .ps-content .ps-btn:hover {\r\n    transform: translateY(-2px);\r\n    box-shadow: 0 8px 25px rgba(212,140,60,0.25);\r\n    background: var(--coral);\r\n  }\r\n  .bargach-programs-slider .ps-slide .ps-content .ps-btn .arrow {\r\n    display: inline-block; transition: transform 0.3s ease;\r\n  }\r\n  .bargach-programs-slider .ps-slide .ps-content .ps-btn:hover .arrow {\r\n    transform: translateX(4px);\r\n  }\r\n\r\n  \/* ========== CONTROLS ========== *\/\r\n  .bargach-programs-slider .ps-controls {\r\n    display: flex; align-items: center; justify-content: center;\r\n    gap: 16px; padding: 14px 20px 18px;\r\n    background: rgba(255,255,255,0.35);\r\n    backdrop-filter: blur(4px);\r\n    border-top: 1px solid var(--hairline);\r\n  }\r\n  .bargach-programs-slider .ps-controls .ps-dots {\r\n    display: flex; gap: 8px;\r\n  }\r\n  .bargach-programs-slider .ps-controls .ps-dots .dot {\r\n    width: 10px; height: 10px; border-radius: 50%;\r\n    background: rgba(31,42,38,0.12); border: none; cursor: pointer;\r\n    padding: 0; transition: all 0.3s ease;\r\n  }\r\n  .bargach-programs-slider .ps-controls .ps-dots .dot.active {\r\n    background: var(--coral); transform: scale(1.25);\r\n    box-shadow: 0 0 20px rgba(224,122,95,0.15);\r\n  }\r\n  .bargach-programs-slider .ps-controls .ps-dots .dot:hover {\r\n    background: rgba(31,42,38,0.25);\r\n  }\r\n  .bargach-programs-slider .ps-controls .ps-dots .dot.active:hover {\r\n    background: var(--coral);\r\n  }\r\n  .bargach-programs-slider .ps-controls .ps-nav {\r\n    width: 36px; height: 36px; border-radius: 50%;\r\n    border: 1px solid var(--hairline); background: rgba(255,255,255,0.60);\r\n    cursor: pointer; display: flex; align-items: center; justify-content: center;\r\n    font-size: 18px; color: var(--text-dark); transition: all 0.3s ease;\r\n  }\r\n  .bargach-programs-slider .ps-controls .ps-nav:hover {\r\n    background: var(--coral); border-color: var(--coral); color: #fff;\r\n  }\r\n\r\n  \/* ========== ANIMATIONS ========== *\/\r\n  @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }\r\n  .bargach-programs-slider .ps-slide .ps-content .ps-eyebrow {\r\n    opacity: 0; animation: fadeUp 0.5s ease 0.2s forwards;\r\n  }\r\n  .bargach-programs-slider .ps-slide .ps-content .ps-headline {\r\n    opacity: 0; animation: fadeUp 0.6s ease 0.3s forwards;\r\n  }\r\n  .bargach-programs-slider .ps-slide .ps-content .ps-text {\r\n    opacity: 0; animation: fadeUp 0.6s ease 0.4s forwards;\r\n  }\r\n  .bargach-programs-slider .ps-slide .ps-content .ps-btn {\r\n    opacity: 0; animation: fadeUp 0.6s ease 0.5s forwards;\r\n  }\r\n  .bargach-programs-slider .ps-slide .ps-image .ps-badge {\r\n    opacity: 0; animation: fadeUp 0.5s ease 0.3s forwards;\r\n  }\r\n\r\n  @media (prefers-reduced-motion: reduce) {\r\n    .bargach-programs-slider * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }\r\n    .bargach-programs-slider .ps-slide .ps-content .ps-eyebrow,\r\n    .bargach-programs-slider .ps-slide .ps-content .ps-headline,\r\n    .bargach-programs-slider .ps-slide .ps-content .ps-text,\r\n    .bargach-programs-slider .ps-slide .ps-content .ps-btn,\r\n    .bargach-programs-slider .ps-slide .ps-image .ps-badge {\r\n      opacity: 1 !important; animation: none !important;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<!-- ============================================================\r\n     PROGRAMS HERO SLIDER \u2013 HTML\r\n     ============================================================ -->\r\n<section class=\"bargach-programs-slider\" aria-label=\"Our Programs Slider\">\r\n\r\n  <div class=\"ps-bg\" aria-hidden=\"true\"><\/div>\r\n\r\n  <div class=\"ps-container\">\r\n\r\n    <div class=\"ps-slider\" id=\"psSlider\">\r\n\r\n      <div class=\"ps-track\" id=\"psTrack\">\r\n\r\n        <!-- SLIDE 01 \u2014 Education \/ Alokodoy -->\r\n        <div class=\"ps-slide\">\r\n          <div class=\"ps-image\">\r\n            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1503676260728-1c00da094a0b?q=80&w=2070&auto=format&fit=crop\" alt=\"Education\" loading=\"lazy\" \/>\r\n            <span class=\"ps-badge\">Program 01<\/span>\r\n          <\/div>\r\n          <div class=\"ps-content\">\r\n            <div class=\"ps-eyebrow\">PROGRAM 01 \u00b7 ALOKODOY<\/div>\r\n            <h3 class=\"ps-headline\">Every child deserves a <span class=\"highlight\">place to learn<\/span>.<\/h3>\r\n            <p class=\"ps-text\">A child-friendly coaching initiative supporting children from rural artisan families with education and a safe learning environment.<\/p>\r\n            <a href=\"#\" class=\"ps-btn\">Explore Alokodoy <span class=\"arrow\">\u2192<\/span><\/a>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- SLIDE 02 \u2014 Digital Literacy -->\r\n        <div class=\"ps-slide\">\r\n          <div class=\"ps-image\">\r\n            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1518770660439-4636190af475?q=80&w=2070&auto=format&fit=crop\" alt=\"Digital Literacy\" loading=\"lazy\" \/>\r\n            <span class=\"ps-badge\">Program 02<\/span>\r\n          <\/div>\r\n          <div class=\"ps-content\">\r\n            <div class=\"ps-eyebrow\">PROGRAM 02 \u00b7 COMMUNITY IT CENTRES<\/div>\r\n            <h3 class=\"ps-headline\">Connecting people to a <span class=\"highlight\">digital future<\/span>.<\/h3>\r\n            <p class=\"ps-text\">Free access to technology, digital literacy and job-oriented IT skills for marginalised communities.<\/p>\r\n            <a href=\"#\" class=\"ps-btn\">Explore IT Centres <span class=\"arrow\">\u2192<\/span><\/a>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- SLIDE 03 \u2014 Skills -->\r\n        <div class=\"ps-slide\">\r\n          <div class=\"ps-image\">\r\n            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1582213782179-e0d53f98f2ca?q=80&w=2070&auto=format&fit=crop\" alt=\"Skills\" loading=\"lazy\" \/>\r\n            <span class=\"ps-badge\">Program 03<\/span>\r\n          <\/div>\r\n          <div class=\"ps-content\">\r\n            <div class=\"ps-eyebrow\">PROGRAM 03 \u00b7 SKILL DEVELOPMENT<\/div>\r\n            <h3 class=\"ps-headline\">Skills that <span class=\"highlight\">create opportunities<\/span>.<\/h3>\r\n            <p class=\"ps-text\">Practical training helping young people build professional skills, confidence and pathways towards employment.<\/p>\r\n            <a href=\"#\" class=\"ps-btn\">Explore Skill Development <span class=\"arrow\">\u2192<\/span><\/a>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- SLIDE 04 \u2014 Water & WASH -->\r\n        <div class=\"ps-slide\">\r\n          <div class=\"ps-image\">\r\n            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1548839140-29a749e1cf4d?q=80&w=2070&auto=format&fit=crop\" alt=\"Water & WASH\" loading=\"lazy\" \/>\r\n            <span class=\"ps-badge\">Program 04<\/span>\r\n          <\/div>\r\n          <div class=\"ps-content\">\r\n            <div class=\"ps-eyebrow\">PROGRAM 04 \u00b7 SAFE DRINKING WATER<\/div>\r\n            <h3 class=\"ps-headline\">Safe water. <span class=\"highlight\">Healthier communities<\/span>.<\/h3>\r\n            <p class=\"ps-text\">Community-focused initiatives improving access to safe drinking water while promoting sanitation, hygiene and water awareness.<\/p>\r\n            <a href=\"#\" class=\"ps-btn\">Explore WASH <span class=\"arrow\">\u2192<\/span><\/a>\r\n          <\/div>\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n      <!-- Controls -->\r\n      <div class=\"ps-controls\">\r\n        <button class=\"ps-nav\" id=\"psPrev\" aria-label=\"Previous\">\u2039<\/button>\r\n        <div class=\"ps-dots\" id=\"psDots\">\r\n          <button class=\"dot active\" data-index=\"0\" aria-label=\"Slide 1\"><\/button>\r\n          <button class=\"dot\" data-index=\"1\" aria-label=\"Slide 2\"><\/button>\r\n          <button class=\"dot\" data-index=\"2\" aria-label=\"Slide 3\"><\/button>\r\n          <button class=\"dot\" data-index=\"3\" aria-label=\"Slide 4\"><\/button>\r\n        <\/div>\r\n        <button class=\"ps-nav\" id=\"psNext\" aria-label=\"Next\">\u203a<\/button>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- ============================================================\r\n     SLIDER SCRIPT\r\n     ============================================================ -->\r\n<script>\r\n  (function() {\r\n    var track = document.getElementById('psTrack');\r\n    var dots = document.querySelectorAll('#psDots .dot');\r\n    var prevBtn = document.getElementById('psPrev');\r\n    var nextBtn = document.getElementById('psNext');\r\n    var slides = track.querySelectorAll('.ps-slide');\r\n    var total = slides.length;\r\n    var current = 0;\r\n    var isAnimating = false;\r\n\r\n    function goTo(index) {\r\n      if (isAnimating || index === current) return;\r\n      if (index < 0) index = total - 1;\r\n      if (index >= total) index = 0;\r\n      isAnimating = true;\r\n      track.style.transform = 'translateX(-' + (index * 100) + '%)';\r\n      dots.forEach(function(d, i) { d.classList.toggle('active', i === index); });\r\n      current = index;\r\n      setTimeout(function() { isAnimating = false; }, 750);\r\n    }\r\n\r\n    dots.forEach(function(dot) {\r\n      dot.addEventListener('click', function() {\r\n        var idx = parseInt(this.getAttribute('data-index'));\r\n        goTo(idx);\r\n      });\r\n    });\r\n\r\n    prevBtn.addEventListener('click', function() { goTo(current - 1); });\r\n    nextBtn.addEventListener('click', function() { goTo(current + 1); });\r\n\r\n    \/\/ Keyboard\r\n    document.addEventListener('keydown', function(e) {\r\n      var section = document.querySelector('.bargach-programs-slider');\r\n      if (!section) return;\r\n      var rect = section.getBoundingClientRect();\r\n      if (rect.top < window.innerHeight && rect.bottom > 0) {\r\n        if (e.key === 'ArrowLeft') { e.preventDefault(); goTo(current - 1); }\r\n        if (e.key === 'ArrowRight') { e.preventDefault(); goTo(current + 1); }\r\n      }\r\n    });\r\n\r\n    \/\/ Touch\r\n    var startX = 0, endX = 0;\r\n    var slider = document.getElementById('psSlider');\r\n    slider.addEventListener('touchstart', function(e) {\r\n      startX = e.changedTouches[0].screenX;\r\n    }, { passive: true });\r\n    slider.addEventListener('touchend', function(e) {\r\n      endX = e.changedTouches[0].screenX;\r\n      var diff = startX - endX;\r\n      if (Math.abs(diff) > 50) {\r\n        if (diff > 0) goTo(current + 1);\r\n        else goTo(current - 1);\r\n      }\r\n    }, { passive: true });\r\n\r\n    \/\/ Autoplay\r\n    var autoplay = setInterval(function() { goTo(current + 1); }, 5000);\r\n    slider.addEventListener('mouseenter', function() { clearInterval(autoplay); });\r\n    slider.addEventListener('mouseleave', function() {\r\n      autoplay = setInterval(function() { goTo(current + 1); }, 5000);\r\n    });\r\n\r\n    window.bargachProgramSlider = { goTo: goTo };\r\n\r\n  })();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-b16fe08 e-con e-atomic-element e-flexbox-base e-02a9f41 \" data-id=\"b16fe08\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"b16fe08\">\n    \t\t<div class=\"elementor-element elementor-element-8bb9769 elementor-widget elementor-widget-html\" data-id=\"8bb9769\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     BARGACH \u00b7 OUR PROGRAMS \u2013 UNIQUE CARD DESIGN\r\n     Vertical card layout with image, content, stats, and button.\r\n     Clean, modern, light colorful design with hover effects.\r\n     ============================================================ -->\r\n<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,380;0,9..144,560;1,9..144,380&family=Inter:wght@300;400;500;600;700&display=swap');\r\n\r\n  .bargach-programs-vertical {\r\n    --coral: #e07a5f;\r\n    --coral-light: #f0a38c;\r\n    --gold: #d48c3c;\r\n    --gold-2: #e8b86d;\r\n    --teal: #2a9d8f;\r\n    --teal-2: #1a7a6b;\r\n    --text-dark: #1f2a26;\r\n    --text-body: #3d534a;\r\n    --text-muted: #6a8a7a;\r\n    --text-muted-light: #8a9e93;\r\n    --bg-light: #f8f4ed;\r\n    --bg-card: rgba(255, 255, 255, 0.85);\r\n    --hairline: rgba(26, 122, 107, 0.08);\r\n    --serif: 'Fraunces', Georgia, 'Times New Roman', serif;\r\n    --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\r\n\r\n    position: relative;\r\n    width: 100%;\r\n    padding: clamp(50px, 6vw, 80px) 0;\r\n    background: var(--bg-light);\r\n    font-family: var(--sans);\r\n    color: var(--text-dark);\r\n    overflow: hidden;\r\n  }\r\n  .bargach-programs-vertical * { box-sizing: border-box; }\r\n\r\n  \/* Background *\/\r\n  .bargach-programs-vertical .pv-bg {\r\n    position: absolute; inset: 0; z-index: 0;\r\n    background:\r\n      radial-gradient(ellipse at 10% 20%, rgba(212,140,60,0.04) 0%, transparent 50%),\r\n      radial-gradient(ellipse at 90% 80%, rgba(42,157,143,0.03) 0%, transparent 50%);\r\n    pointer-events: none;\r\n  }\r\n\r\n  .bargach-programs-vertical .pv-container {\r\n    position: relative; z-index: 2;\r\n    max-width: 1100px; margin: 0 auto;\r\n    padding: 0 clamp(22px, 4.5vw, 56px);\r\n  }\r\n\r\n  \/* ========== HEADER ========== *\/\r\n  .bargach-programs-vertical .pv-header {\r\n    margin-bottom: clamp(36px, 4vw, 52px);\r\n    max-width: 680px;\r\n  }\r\n  .bargach-programs-vertical .pv-tag {\r\n    display: inline-flex; align-items: center; gap: 10px;\r\n    font-size: 11.5px; font-weight: 600; letter-spacing: 0.18em;\r\n    text-transform: uppercase; color: var(--coral); margin: 0 0 8px;\r\n  }\r\n  .bargach-programs-vertical .pv-tag::before {\r\n    content: \"\"; width: 26px; height: 1px; background: var(--coral); display: inline-block;\r\n  }\r\n  .bargach-programs-vertical .pv-heading {\r\n    font-family: var(--serif); font-weight: 380;\r\n    font-size: clamp(28px, 3.5vw, 44px); line-height: 1.08;\r\n    margin: 0; color: var(--text-dark);\r\n  }\r\n  .bargach-programs-vertical .pv-heading .highlight {\r\n    background: linear-gradient(135deg, var(--coral), var(--gold));\r\n    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;\r\n  }\r\n  .bargach-programs-vertical .pv-sub {\r\n    font-size: clamp(15px, 1.1vw, 17px); line-height: 1.7;\r\n    color: var(--text-body); font-weight: 300; margin: 10px 0 0;\r\n    max-width: 600px;\r\n  }\r\n\r\n  \/* ========== PROGRAM CARDS ========== *\/\r\n  .bargach-programs-vertical .pv-cards {\r\n    display: flex; flex-direction: column;\r\n    gap: clamp(28px, 3.5vw, 44px);\r\n  }\r\n\r\n  \/* Individual Card - alternating layout *\/\r\n  .bargach-programs-vertical .pv-card {\r\n    display: grid;\r\n    grid-template-columns: 0.9fr 1.1fr;\r\n    gap: 0;\r\n    background: var(--bg-card);\r\n    backdrop-filter: blur(8px);\r\n    -webkit-backdrop-filter: blur(8px);\r\n    border-radius: 20px;\r\n    overflow: hidden;\r\n    border: 1px solid var(--hairline);\r\n    box-shadow: 0 4px 24px rgba(31,42,38,0.04);\r\n    transition: transform 0.4s ease, box-shadow 0.4s ease;\r\n  }\r\n  .bargach-programs-vertical .pv-card:hover {\r\n    transform: translateY(-4px);\r\n    box-shadow: 0 16px 50px rgba(31,42,38,0.08);\r\n    border-color: rgba(212,140,60,0.08);\r\n  }\r\n\r\n  \/* Alternate: reverse every even card *\/\r\n  .bargach-programs-vertical .pv-card:nth-child(even) {\r\n    grid-template-columns: 1.1fr 0.9fr;\r\n  }\r\n  .bargach-programs-vertical .pv-card:nth-child(even) .pv-card-image {\r\n    order: 2;\r\n  }\r\n  .bargach-programs-vertical .pv-card:nth-child(even) .pv-card-body {\r\n    order: 1;\r\n  }\r\n\r\n  @media (max-width: 768px) {\r\n    .bargach-programs-vertical .pv-card,\r\n    .bargach-programs-vertical .pv-card:nth-child(even) {\r\n      grid-template-columns: 1fr;\r\n    }\r\n    .bargach-programs-vertical .pv-card:nth-child(even) .pv-card-image {\r\n      order: -1;\r\n    }\r\n    .bargach-programs-vertical .pv-card:nth-child(even) .pv-card-body {\r\n      order: 0;\r\n    }\r\n  }\r\n\r\n  \/* Card Image *\/\r\n  .bargach-programs-vertical .pv-card .pv-card-image {\r\n    position: relative;\r\n    min-height: 280px;\r\n    overflow: hidden;\r\n  }\r\n  .bargach-programs-vertical .pv-card .pv-card-image img {\r\n    width: 100%; height: 100%; min-height: 280px;\r\n    object-fit: cover; display: block;\r\n    transition: transform 0.7s ease;\r\n  }\r\n  .bargach-programs-vertical .pv-card:hover .pv-card-image img {\r\n    transform: scale(1.04);\r\n  }\r\n  .bargach-programs-vertical .pv-card .pv-card-image .pv-number {\r\n    position: absolute; top: 16px; right: 16px;\r\n    font-family: var(--serif); font-weight: 560;\r\n    font-size: 14px; color: rgba(255,255,255,0.85);\r\n    background: rgba(15,26,22,0.35); backdrop-filter: blur(4px);\r\n    padding: 4px 14px; border-radius: 999px;\r\n    border: 1px solid rgba(255,255,255,0.08);\r\n  }\r\n  .bargach-programs-vertical .pv-card .pv-card-image .pv-badge {\r\n    position: absolute; bottom: 16px; left: 16px;\r\n    background: rgba(255,255,255,0.88); backdrop-filter: blur(4px);\r\n    padding: 4px 16px; border-radius: 999px;\r\n    font-size: 9px; font-weight: 600; text-transform: uppercase;\r\n    letter-spacing: 0.08em; color: var(--coral);\r\n    border: 1px solid rgba(224,122,95,0.08);\r\n  }\r\n\r\n  \/* Card Body *\/\r\n  .bargach-programs-vertical .pv-card .pv-card-body {\r\n    padding: clamp(24px, 3vw, 38px) clamp(24px, 3vw, 36px);\r\n    display: flex; flex-direction: column; justify-content: center;\r\n    background: rgba(255,255,255,0.30);\r\n    backdrop-filter: blur(4px);\r\n  }\r\n  .bargach-programs-vertical .pv-card .pv-card-body .pv-icon {\r\n    font-size: 26px; display: block; margin-bottom: 2px;\r\n  }\r\n  .bargach-programs-vertical .pv-card .pv-card-body .pv-title {\r\n    font-family: var(--serif); font-weight: 560;\r\n    font-size: clamp(22px, 2.4vw, 30px);\r\n    color: var(--text-dark); margin: 0 0 4px;\r\n  }\r\n  .bargach-programs-vertical .pv-card .pv-card-body .pv-title .highlight {\r\n    color: var(--coral);\r\n  }\r\n  .bargach-programs-vertical .pv-card .pv-card-body .pv-subtitle {\r\n    font-size: clamp(14px, 0.95vw, 16px);\r\n    color: var(--coral); font-weight: 500;\r\n    margin: 0 0 8px;\r\n  }\r\n  .bargach-programs-vertical .pv-card .pv-card-body .pv-desc {\r\n    font-size: clamp(14px, 0.95vw, 15.5px);\r\n    line-height: 1.7; color: var(--text-body);\r\n    font-weight: 300; margin: 0 0 6px;\r\n  }\r\n  .bargach-programs-vertical .pv-card .pv-card-body .pv-desc strong {\r\n    color: var(--teal-2); font-weight: 500;\r\n  }\r\n  .bargach-programs-vertical .pv-card .pv-card-body .pv-stats {\r\n    font-size: clamp(13px, 0.9vw, 14px);\r\n    color: var(--text-muted); font-weight: 400;\r\n    margin: 4px 0 12px;\r\n  }\r\n  .bargach-programs-vertical .pv-card .pv-card-body .pv-stats strong {\r\n    color: var(--teal-2); font-weight: 500;\r\n  }\r\n\r\n  \/* Card Button *\/\r\n  .bargach-programs-vertical .pv-card .pv-card-body .pv-btn {\r\n    display: inline-flex; align-items: center; gap: 8px;\r\n    padding: 10px 26px; border-radius: 999px;\r\n    background: var(--gold); color: #fff;\r\n    font-size: 13px; font-weight: 600; text-decoration: none;\r\n    border: none; cursor: pointer; font-family: var(--sans);\r\n    transition: all 0.3s ease; align-self: flex-start;\r\n    margin-top: 4px;\r\n  }\r\n  .bargach-programs-vertical .pv-card .pv-card-body .pv-btn:hover {\r\n    transform: translateY(-3px);\r\n    box-shadow: 0 8px 28px rgba(212,140,60,0.30);\r\n    background: var(--coral);\r\n  }\r\n  .bargach-programs-vertical .pv-card .pv-card-body .pv-btn .arrow {\r\n    display: inline-block; transition: transform 0.3s ease;\r\n  }\r\n  .bargach-programs-vertical .pv-card .pv-card-body .pv-btn:hover .arrow {\r\n    transform: translateX(4px);\r\n  }\r\n\r\n  \/* ========== ANIMATIONS ========== *\/\r\n  @keyframes fadeUp {\r\n    from { opacity: 0; transform: translateY(24px); }\r\n    to { opacity: 1; transform: translateY(0); }\r\n  }\r\n  .bargach-programs-vertical .pv-tag {\r\n    opacity: 0; animation: fadeUp 0.6s ease 0.1s forwards;\r\n  }\r\n  .bargach-programs-vertical .pv-heading {\r\n    opacity: 0; animation: fadeUp 0.7s ease 0.2s forwards;\r\n  }\r\n  .bargach-programs-vertical .pv-sub {\r\n    opacity: 0; animation: fadeUp 0.7s ease 0.3s forwards;\r\n  }\r\n  .bargach-programs-vertical .pv-card {\r\n    opacity: 0; animation: fadeUp 0.7s ease forwards;\r\n  }\r\n  .bargach-programs-vertical .pv-card:nth-child(1) { animation-delay: 0.1s; }\r\n  .bargach-programs-vertical .pv-card:nth-child(2) { animation-delay: 0.2s; }\r\n  .bargach-programs-vertical .pv-card:nth-child(3) { animation-delay: 0.3s; }\r\n  .bargach-programs-vertical .pv-card:nth-child(4) { animation-delay: 0.4s; }\r\n  .bargach-programs-vertical .pv-card:nth-child(5) { animation-delay: 0.5s; }\r\n\r\n  @media (prefers-reduced-motion: reduce) {\r\n    .bargach-programs-vertical * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }\r\n    .bargach-programs-vertical .pv-tag,\r\n    .bargach-programs-vertical .pv-heading,\r\n    .bargach-programs-vertical .pv-sub,\r\n    .bargach-programs-vertical .pv-card {\r\n      opacity: 1 !important; animation: none !important;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<!-- ============================================================\r\n     OUR PROGRAMS \u2013 VERTICAL CARDS HTML\r\n     ============================================================ -->\r\n<section class=\"bargach-programs-vertical\" aria-label=\"Our Programs\">\r\n\r\n  <div class=\"pv-bg\" aria-hidden=\"true\"><\/div>\r\n\r\n  <div class=\"pv-container\">\r\n\r\n    <!-- Header -->\r\n    <div class=\"pv-header\">\r\n      <div class=\"pv-tag\">What We Do<\/div>\r\n      <h2 class=\"pv-heading\">Practical programmes. <span class=\"highlight\">Real community<\/span> needs.<\/h2>\r\n      <p class=\"pv-sub\">From education and digital literacy to skill development and safe drinking water, our programmes are designed to create access, opportunity and stronger communities.<\/p>\r\n    <\/div>\r\n\r\n    <!-- Cards -->\r\n    <div class=\"pv-cards\">\r\n\r\n      <!-- 01 \u2013 ALOKODOY -->\r\n      <div class=\"pv-card\">\r\n        <div class=\"pv-card-image\">\r\n          <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1503676260728-1c00da094a0b?q=80&w=2070&auto=format&fit=crop\" alt=\"Alokodoy\" loading=\"lazy\" \/>\r\n          <span class=\"pv-number\">01<\/span>\r\n          <span class=\"pv-badge\">Education<\/span>\r\n        <\/div>\r\n        <div class=\"pv-card-body\">\r\n          <span class=\"pv-icon\">\ud83d\udcda<\/span>\r\n          <h3 class=\"pv-title\"><span class=\"highlight\">Alokodoy<\/span><\/h3>\r\n          <div class=\"pv-subtitle\">A Path to Enlightenment<\/div>\r\n          <p class=\"pv-desc\">A child-friendly coaching initiative established in <strong>Dokra village, Dariapur, Purba Bardhaman<\/strong>, supporting children with education, learning resources and a safe environment.<\/p>\r\n          <p class=\"pv-desc\">Created in response to limited learning resources, poverty, inadequate academic guidance and the challenges faced by first-generation learners.<\/p>\r\n          <a href=\"#\" class=\"pv-btn\">Learn More <span class=\"arrow\">\u2192<\/span><\/a>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- 02 \u2013 AWARENESS GENERATION -->\r\n      <div class=\"pv-card\">\r\n        <div class=\"pv-card-image\">\r\n          <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1532996122724-e3c354a0b15b?q=80&w=2070&auto=format&fit=crop\" alt=\"Awareness\" loading=\"lazy\" \/>\r\n          <span class=\"pv-number\">02<\/span>\r\n          <span class=\"pv-badge\">Awareness<\/span>\r\n        <\/div>\r\n        <div class=\"pv-card-body\">\r\n          <span class=\"pv-icon\">\ud83d\udce2<\/span>\r\n          <h3 class=\"pv-title\"><span class=\"highlight\">Awareness<\/span> Generation<\/h3>\r\n          <div class=\"pv-subtitle\">Rainwater Harvesting \u00b7 Safe Drinking Water \u00b7 Hygienic Sanitation<\/div>\r\n          <p class=\"pv-desc\">Our awareness programmes promote better understanding of water, sanitation and hygiene through community campaigns, educational materials and outreach.<\/p>\r\n          <p class=\"pv-stats\">In partnership with <strong>Water.org<\/strong>, the programme has reached <strong>70,000+<\/strong> people.<\/p>\r\n          <a href=\"#\" class=\"pv-btn\">Learn More <span class=\"arrow\">\u2192<\/span><\/a>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- 03 \u2013 COMMUNITY IT CENTRES -->\r\n      <div class=\"pv-card\">\r\n        <div class=\"pv-card-image\">\r\n          <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1518770660439-4636190af475?q=80&w=2070&auto=format&fit=crop\" alt=\"IT Centres\" loading=\"lazy\" \/>\r\n          <span class=\"pv-number\">03<\/span>\r\n          <span class=\"pv-badge\">Digital Literacy<\/span>\r\n        <\/div>\r\n        <div class=\"pv-card-body\">\r\n          <span class=\"pv-icon\">\ud83d\udcbb<\/span>\r\n          <h3 class=\"pv-title\"><span class=\"highlight\">Community<\/span> IT Centres<\/h3>\r\n          <div class=\"pv-subtitle\">Bridging the Digital Divide<\/div>\r\n          <p class=\"pv-desc\">Our Community IT Centres provide free access to technology, digital literacy training and job-finding IT skills for marginalised communities.<\/p>\r\n          <p class=\"pv-stats\">Today, the programme includes <strong>30 centres<\/strong> across <strong>13 districts<\/strong> of West Bengal, reaching <strong>20,000+<\/strong> beneficiaries.<\/p>\r\n          <a href=\"#\" class=\"pv-btn\">Learn More <span class=\"arrow\">\u2192<\/span><\/a>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- 04 \u2013 SKILL DEVELOPMENT -->\r\n      <div class=\"pv-card\">\r\n        <div class=\"pv-card-image\">\r\n          <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1582213782179-e0d53f98f2ca?q=80&w=2070&auto=format&fit=crop\" alt=\"Skills\" loading=\"lazy\" \/>\r\n          <span class=\"pv-number\">04<\/span>\r\n          <span class=\"pv-badge\">Livelihood<\/span>\r\n        <\/div>\r\n        <div class=\"pv-card-body\">\r\n          <span class=\"pv-icon\">\ud83d\udee0\ufe0f<\/span>\r\n          <h3 class=\"pv-title\"><span class=\"highlight\">Skill<\/span> Development<\/h3>\r\n          <div class=\"pv-subtitle\">Skills Today. Opportunities Tomorrow.<\/div>\r\n          <p class=\"pv-desc\">Through partnerships with <strong>Utkarsh Bangla<\/strong> and <strong>Emami Foundation<\/strong>, young people receive practical training designed to improve professional readiness and employment opportunities.<\/p>\r\n          <p class=\"pv-desc\">Training includes computer education, Microsoft Office, communication, personality development, career counselling and placement assistance.<\/p>\r\n          <a href=\"#\" class=\"pv-btn\">Learn More <span class=\"arrow\">\u2192<\/span><\/a>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- 05 \u2013 SAFE DRINKING WATER & WASH -->\r\n      <div class=\"pv-card\">\r\n        <div class=\"pv-card-image\">\r\n          <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1548839140-29a749e1cf4d?q=80&w=2070&auto=format&fit=crop\" alt=\"WASH\" loading=\"lazy\" \/>\r\n          <span class=\"pv-number\">05<\/span>\r\n          <span class=\"pv-badge\">WASH<\/span>\r\n        <\/div>\r\n        <div class=\"pv-card-body\">\r\n          <span class=\"pv-icon\">\ud83d\udca7<\/span>\r\n          <h3 class=\"pv-title\"><span class=\"highlight\">Safe Water<\/span> &amp; WASH<\/h3>\r\n          <div class=\"pv-subtitle\">Water. Health. Dignity.<\/div>\r\n          <p class=\"pv-desc\">Our WASH initiatives focus on safe drinking water, sanitation, hygiene awareness and community outreach.<\/p>\r\n          <p class=\"pv-stats\">Projects in <strong>Purba Bardhaman<\/strong> and <strong>Paschim Medinipur<\/strong> have benefited <strong>1,200+<\/strong> villagers, including safe-water interventions in Dokra and Pingla.<\/p>\r\n          <a href=\"#\" class=\"pv-btn\">Learn More <span class=\"arrow\">\u2192<\/span><\/a>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-c888795 e-con e-atomic-element e-flexbox-base e-298477d \" data-id=\"c888795\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"c888795\">\n    \t\t<div class=\"elementor-element elementor-element-d7fb197 elementor-widget elementor-widget-html\" data-id=\"d7fb197\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     BARGACH \u00b7 APPROACH, IMPACT & FINAL CTA\r\n     Clean, light, colorful section with approach cards,\r\n     impact stats, and final call-to-action.\r\n     ============================================================ -->\r\n<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,380;0,9..144,560;1,9..144,380&family=Inter:wght@300;400;500;600;700&display=swap');\r\n\r\n  .bargach-approach {\r\n    --coral: #e07a5f;\r\n    --coral-light: #f0a38c;\r\n    --gold: #d48c3c;\r\n    --gold-2: #e8b86d;\r\n    --teal: #2a9d8f;\r\n    --teal-2: #1a7a6b;\r\n    --text-dark: #1f2a26;\r\n    --text-body: #3d534a;\r\n    --text-muted: #6a8a7a;\r\n    --text-muted-light: #8a9e93;\r\n    --bg-light: #f8f4ed;\r\n    --bg-card: rgba(255, 255, 255, 0.82);\r\n    --hairline: rgba(26, 122, 107, 0.08);\r\n    --serif: 'Fraunces', Georgia, 'Times New Roman', serif;\r\n    --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\r\n\r\n    position: relative;\r\n    width: 100%;\r\n    padding: clamp(50px, 6vw, 80px) 0;\r\n    background: var(--bg-light);\r\n    font-family: var(--sans);\r\n    color: var(--text-dark);\r\n    overflow: hidden;\r\n  }\r\n  .bargach-approach * { box-sizing: border-box; }\r\n\r\n  \/* Background *\/\r\n  .bargach-approach .ap-bg {\r\n    position: absolute; inset: 0; z-index: 0;\r\n    background:\r\n      radial-gradient(ellipse at 10% 20%, rgba(212,140,60,0.04) 0%, transparent 50%),\r\n      radial-gradient(ellipse at 90% 80%, rgba(42,157,143,0.03) 0%, transparent 50%);\r\n    pointer-events: none;\r\n  }\r\n  .bargach-approach .ap-glow {\r\n    position: absolute; z-index: 1; pointer-events: none;\r\n    width: 50vw; height: 50vw; max-width: 500px;\r\n    top: -10%; right: -5%;\r\n    background: radial-gradient(circle, rgba(212,140,60,0.04) 0%, rgba(212,140,60,0.01) 40%, transparent 70%);\r\n    filter: blur(60px);\r\n  }\r\n\r\n  .bargach-approach .ap-container {\r\n    position: relative; z-index: 2;\r\n    max-width: 1100px; margin: 0 auto;\r\n    padding: 0 clamp(22px, 4.5vw, 56px);\r\n  }\r\n\r\n  \/* ========== DIVIDER ========== *\/\r\n  .bargach-approach .ap-divider {\r\n    display: flex; align-items: center; gap: 16px;\r\n    margin: clamp(32px, 4vw, 50px) 0 clamp(24px, 3vw, 34px);\r\n  }\r\n  .bargach-approach .ap-divider .line {\r\n    flex: 1; height: 1px; max-width: 80px;\r\n    background: linear-gradient(90deg, var(--coral), transparent);\r\n  }\r\n  .bargach-approach .ap-divider .diamond {\r\n    width: 8px; height: 8px; background: var(--coral);\r\n    transform: rotate(45deg); flex-shrink: 0; opacity: 0.4;\r\n  }\r\n\r\n  \/* ========== HEADER ========== *\/\r\n  .bargach-approach .ap-header {\r\n    margin-bottom: clamp(28px, 3.5vw, 40px);\r\n    max-width: 680px;\r\n  }\r\n  .bargach-approach .ap-tag {\r\n    display: inline-flex; align-items: center; gap: 10px;\r\n    font-size: 11.5px; font-weight: 600; letter-spacing: 0.18em;\r\n    text-transform: uppercase; color: var(--coral); margin: 0 0 8px;\r\n  }\r\n  .bargach-approach .ap-tag::before {\r\n    content: \"\"; width: 26px; height: 1px; background: var(--coral); display: inline-block;\r\n  }\r\n  .bargach-approach .ap-heading {\r\n    font-family: var(--serif); font-weight: 380;\r\n    font-size: clamp(28px, 3.5vw, 44px); line-height: 1.08;\r\n    margin: 0; color: var(--text-dark);\r\n  }\r\n  .bargach-approach .ap-heading .highlight {\r\n    background: linear-gradient(135deg, var(--coral), var(--gold));\r\n    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;\r\n  }\r\n  .bargach-approach .ap-sub {\r\n    font-size: clamp(15px, 1.1vw, 17px); line-height: 1.7;\r\n    color: var(--text-body); font-weight: 300; margin: 10px 0 0;\r\n    max-width: 600px;\r\n  }\r\n\r\n  \/* ========== APPROACH CARDS ========== *\/\r\n  .bargach-approach .ap-approach-grid {\r\n    display: grid; grid-template-columns: repeat(4, 1fr);\r\n    gap: clamp(14px, 1.8vw, 24px);\r\n    margin-bottom: clamp(30px, 4vw, 50px);\r\n  }\r\n  @media (max-width: 768px) {\r\n    .bargach-approach .ap-approach-grid {\r\n      grid-template-columns: repeat(2, 1fr);\r\n    }\r\n  }\r\n  @media (max-width: 450px) {\r\n    .bargach-approach .ap-approach-grid {\r\n      grid-template-columns: 1fr;\r\n      max-width: 320px; margin-left: auto; margin-right: auto;\r\n    }\r\n  }\r\n\r\n  .bargach-approach .ap-approach-card {\r\n    background: var(--bg-card); backdrop-filter: blur(8px);\r\n    -webkit-backdrop-filter: blur(8px);\r\n    border-radius: 16px; padding: clamp(20px, 2.5vw, 28px) clamp(16px, 2vw, 22px);\r\n    text-align: center; border: 1px solid var(--hairline);\r\n    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;\r\n    box-shadow: 0 4px 20px rgba(31,42,38,0.03);\r\n  }\r\n  .bargach-approach .ap-approach-card:hover {\r\n    transform: translateY(-6px);\r\n    box-shadow: 0 12px 40px rgba(31,42,38,0.06);\r\n    border-color: rgba(212,140,60,0.08);\r\n  }\r\n  .bargach-approach .ap-approach-card .ap-icon {\r\n    font-size: 32px; display: block; margin-bottom: 4px;\r\n  }\r\n  .bargach-approach .ap-approach-card .ap-label {\r\n    font-weight: 600; font-size: clamp(16px, 1.3vw, 20px);\r\n    color: var(--text-dark); margin: 0;\r\n  }\r\n  .bargach-approach .ap-approach-card .ap-label .highlight {\r\n    color: var(--coral);\r\n  }\r\n  .bargach-approach .ap-approach-card .ap-desc {\r\n    font-size: clamp(13px, 0.85vw, 14px);\r\n    color: var(--text-muted); font-weight: 300; margin: 4px 0 0;\r\n    line-height: 1.5;\r\n  }\r\n\r\n  \/* ========== IMPACT STATS ========== *\/\r\n  .bargach-approach .ap-impact-grid {\r\n    display: grid; grid-template-columns: repeat(6, 1fr);\r\n    gap: clamp(10px, 1.2vw, 16px);\r\n    margin: clamp(20px, 2.5vw, 32px) 0 clamp(30px, 4vw, 50px);\r\n  }\r\n  @media (max-width: 800px) {\r\n    .bargach-approach .ap-impact-grid {\r\n      grid-template-columns: repeat(3, 1fr);\r\n    }\r\n  }\r\n  @media (max-width: 450px) {\r\n    .bargach-approach .ap-impact-grid {\r\n      grid-template-columns: repeat(2, 1fr);\r\n    }\r\n  }\r\n\r\n  .bargach-approach .ap-impact-item {\r\n    background: var(--bg-card); backdrop-filter: blur(4px);\r\n    -webkit-backdrop-filter: blur(4px);\r\n    border-radius: 14px; padding: clamp(14px, 1.5vw, 20px) clamp(10px, 1vw, 16px);\r\n    text-align: center; border: 1px solid var(--hairline);\r\n    transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n  }\r\n  .bargach-approach .ap-impact-item:hover {\r\n    transform: translateY(-4px);\r\n    box-shadow: 0 8px 30px rgba(31,42,38,0.05);\r\n  }\r\n  .bargach-approach .ap-impact-item .ap-impact-num {\r\n    font-family: var(--serif); font-weight: 560;\r\n    font-size: clamp(24px, 2.4vw, 34px);\r\n    background: linear-gradient(135deg, var(--coral), var(--gold));\r\n    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;\r\n    line-height: 1;\r\n  }\r\n  .bargach-approach .ap-impact-item .ap-impact-label {\r\n    font-size: clamp(10px, 0.75vw, 12px);\r\n    color: var(--text-muted); font-weight: 400; margin-top: 2px;\r\n    line-height: 1.3;\r\n  }\r\n\r\n  \/* ========== FINAL CTA ========== *\/\r\n  .bargach-approach .ap-final-cta {\r\n    background: var(--bg-card); backdrop-filter: blur(8px);\r\n    -webkit-backdrop-filter: blur(8px);\r\n    border-radius: 20px; padding: clamp(32px, 4vw, 48px) clamp(24px, 3vw, 40px);\r\n    border: 1px solid var(--hairline);\r\n    text-align: center;\r\n    box-shadow: 0 4px 20px rgba(31,42,38,0.04);\r\n    margin-top: clamp(20px, 2vw, 30px);\r\n  }\r\n  .bargach-approach .ap-final-cta .ap-cta-icon {\r\n    font-size: 32px; display: block; margin-bottom: 4px;\r\n  }\r\n  .bargach-approach .ap-final-cta .ap-cta-title {\r\n    font-family: var(--serif); font-weight: 380;\r\n    font-size: clamp(22px, 2.5vw, 34px);\r\n    color: var(--text-dark); margin: 0 0 10px;\r\n  }\r\n  .bargach-approach .ap-final-cta .ap-cta-title .highlight {\r\n    color: var(--coral);\r\n  }\r\n  .bargach-approach .ap-final-cta .ap-cta-desc {\r\n    font-size: clamp(14px, 1vw, 16px);\r\n    color: var(--text-body); font-weight: 300;\r\n    max-width: 520px; margin: 0 auto 18px; line-height: 1.6;\r\n  }\r\n  .bargach-approach .ap-final-cta .ap-cta-btns {\r\n    display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;\r\n  }\r\n\r\n  .bargach-approach .ap-btn {\r\n    display: inline-flex; align-items: center; gap: 8px;\r\n    padding: 12px 28px; border-radius: 999px;\r\n    background: var(--gold); color: #fff;\r\n    font-size: 14px; font-weight: 600; text-decoration: none;\r\n    border: none; cursor: pointer; font-family: var(--sans);\r\n    transition: all 0.3s ease;\r\n  }\r\n  .bargach-approach .ap-btn:hover {\r\n    transform: translateY(-3px);\r\n    box-shadow: 0 8px 30px rgba(212,140,60,0.25);\r\n    background: var(--coral);\r\n  }\r\n  .bargach-approach .ap-btn .arrow {\r\n    display: inline-block; transition: transform 0.3s ease;\r\n  }\r\n  .bargach-approach .ap-btn:hover .arrow {\r\n    transform: translateX(4px);\r\n  }\r\n  .bargach-approach .ap-btn.outline {\r\n    background: transparent; color: var(--coral);\r\n    border: 1px solid var(--coral);\r\n  }\r\n  .bargach-approach .ap-btn.outline:hover {\r\n    background: var(--coral); color: #fff;\r\n  }\r\n\r\n  \/* ========== ANIMATIONS ========== *\/\r\n  @keyframes fadeUp {\r\n    from { opacity: 0; transform: translateY(20px); }\r\n    to { opacity: 1; transform: translateY(0); }\r\n  }\r\n  .bargach-approach .ap-tag { opacity: 0; animation: fadeUp 0.6s ease 0.1s forwards; }\r\n  .bargach-approach .ap-heading { opacity: 0; animation: fadeUp 0.7s ease 0.2s forwards; }\r\n  .bargach-approach .ap-sub { opacity: 0; animation: fadeUp 0.7s ease 0.3s forwards; }\r\n  .bargach-approach .ap-approach-card { opacity: 0; animation: fadeUp 0.6s ease forwards; }\r\n  .bargach-approach .ap-approach-card:nth-child(1) { animation-delay: 0.1s; }\r\n  .bargach-approach .ap-approach-card:nth-child(2) { animation-delay: 0.2s; }\r\n  .bargach-approach .ap-approach-card:nth-child(3) { animation-delay: 0.3s; }\r\n  .bargach-approach .ap-approach-card:nth-child(4) { animation-delay: 0.4s; }\r\n  .bargach-approach .ap-impact-item { opacity: 0; animation: fadeUp 0.5s ease forwards; }\r\n  .bargach-approach .ap-impact-item:nth-child(1) { animation-delay: 0.05s; }\r\n  .bargach-approach .ap-impact-item:nth-child(2) { animation-delay: 0.1s; }\r\n  .bargach-approach .ap-impact-item:nth-child(3) { animation-delay: 0.15s; }\r\n  .bargach-approach .ap-impact-item:nth-child(4) { animation-delay: 0.2s; }\r\n  .bargach-approach .ap-impact-item:nth-child(5) { animation-delay: 0.25s; }\r\n  .bargach-approach .ap-impact-item:nth-child(6) { animation-delay: 0.3s; }\r\n  .bargach-approach .ap-final-cta { opacity: 0; animation: fadeUp 0.7s ease 0.3s forwards; }\r\n\r\n  @media (prefers-reduced-motion: reduce) {\r\n    .bargach-approach * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }\r\n    .bargach-approach .ap-tag, .bargach-approach .ap-heading,\r\n    .bargach-approach .ap-sub, .bargach-approach .ap-approach-card,\r\n    .bargach-approach .ap-impact-item, .bargach-approach .ap-final-cta {\r\n      opacity: 1 !important; animation: none !important;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<!-- ============================================================\r\n     APPROACH, IMPACT & FINAL CTA \u2013 HTML\r\n     ============================================================ -->\r\n<section class=\"bargach-approach\" aria-label=\"Our Approach & Impact\">\r\n\r\n  <div class=\"ap-bg\" aria-hidden=\"true\"><\/div>\r\n  <div class=\"ap-glow\" aria-hidden=\"true\"><\/div>\r\n\r\n  <div class=\"ap-container\">\r\n\r\n    <!-- ====== APPROACH ====== -->\r\n    <div class=\"ap-header\">\r\n      <div class=\"ap-tag\">How We Create Impact<\/div>\r\n      <h2 class=\"ap-heading\">Every programme starts with a <span class=\"highlight\">need<\/span>.<\/h2>\r\n      <p class=\"ap-sub\">We work with communities and partners to understand local challenges and turn them into practical opportunities.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"ap-approach-grid\">\r\n      <div class=\"ap-approach-card\">\r\n        <span class=\"ap-icon\">\ud83d\udc42<\/span>\r\n        <h4 class=\"ap-label\"><span class=\"highlight\">Listen<\/span><\/h4>\r\n        <div class=\"ap-desc\">Understand the community<\/div>\r\n      <\/div>\r\n      <div class=\"ap-approach-card\">\r\n        <span class=\"ap-icon\">\ud83e\udd1d<\/span>\r\n        <h4 class=\"ap-label\"><span class=\"highlight\">Collaborate<\/span><\/h4>\r\n        <div class=\"ap-desc\">Work with partners &amp; institutions<\/div>\r\n      <\/div>\r\n      <div class=\"ap-approach-card\">\r\n        <span class=\"ap-icon\">\u26a1<\/span>\r\n        <h4 class=\"ap-label\"><span class=\"highlight\">Act<\/span><\/h4>\r\n        <div class=\"ap-desc\">Deliver practical solutions<\/div>\r\n      <\/div>\r\n      <div class=\"ap-approach-card\">\r\n        <span class=\"ap-icon\">\ud83c\udf1f<\/span>\r\n        <h4 class=\"ap-label\"><span class=\"highlight\">Empower<\/span><\/h4>\r\n        <div class=\"ap-desc\">Build knowledge, skills &amp; opportunity<\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- ====== DIVIDER ====== -->\r\n    <div class=\"ap-divider\">\r\n      <span class=\"line\"><\/span>\r\n      <span class=\"diamond\"><\/span>\r\n      <span class=\"line\" style=\"background:linear-gradient(270deg,var(--coral),transparent);\"><\/span>\r\n    <\/div>\r\n\r\n    <!-- ====== IMPACT AT A GLANCE ====== -->\r\n    <div class=\"ap-header\" style=\"max-width:100%;\">\r\n      <div class=\"ap-tag\">Impact at a Glance<\/div>\r\n      <h2 class=\"ap-heading\">Progress that <span class=\"highlight\">reaches<\/span> people.<\/h2>\r\n    <\/div>\r\n\r\n    <div class=\"ap-impact-grid\">\r\n      <div class=\"ap-impact-item\">\r\n        <div class=\"ap-impact-num\">70,000+<\/div>\r\n        <div class=\"ap-impact-label\">People Reached<\/div>\r\n      <\/div>\r\n      <div class=\"ap-impact-item\">\r\n        <div class=\"ap-impact-num\">20,000+<\/div>\r\n        <div class=\"ap-impact-label\">IT Beneficiaries<\/div>\r\n      <\/div>\r\n      <div class=\"ap-impact-item\">\r\n        <div class=\"ap-impact-num\">30<\/div>\r\n        <div class=\"ap-impact-label\">IT Centres<\/div>\r\n      <\/div>\r\n      <div class=\"ap-impact-item\">\r\n        <div class=\"ap-impact-num\">13<\/div>\r\n        <div class=\"ap-impact-label\">Districts<\/div>\r\n      <\/div>\r\n      <div class=\"ap-impact-item\">\r\n        <div class=\"ap-impact-num\">1,200+<\/div>\r\n        <div class=\"ap-impact-label\">Villagers Safe Water<\/div>\r\n      <\/div>\r\n      <div class=\"ap-impact-item\">\r\n        <div class=\"ap-impact-num\">3<\/div>\r\n        <div class=\"ap-impact-label\">States Served<\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- ====== FINAL CTA ====== -->\r\n    <div class=\"ap-divider\">\r\n      <span class=\"line\"><\/span>\r\n      <span class=\"diamond\"><\/span>\r\n      <span class=\"line\" style=\"background:linear-gradient(270deg,var(--coral),transparent);\"><\/span>\r\n    <\/div>\r\n\r\n    <div class=\"ap-final-cta\">\r\n      <span class=\"ap-cta-icon\">\ud83c\udf31<\/span>\r\n      <h3 class=\"ap-cta-title\">A programme can start with an idea. Impact begins when <span class=\"highlight\">people take part<\/span>.<\/h3>\r\n      <p class=\"ap-cta-desc\">Support our programmes and help us create more opportunities for children, youth and communities.<\/p>\r\n      <div class=\"ap-cta-btns\">\r\n        <a href=\"#\" class=\"ap-btn\">Donate Now <span class=\"arrow\">\u2192<\/span><\/a>\r\n        <a href=\"#\" class=\"ap-btn outline\">Partner With Us <span class=\"arrow\">\u2192<\/span><\/a>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Program 01 PROGRAM 01 \u00b7 ALOKODOY Every child deserves a place to learn. A child-friendly coaching initiative supporting children from rural artisan families with education and a safe learning environment. Explore Alokodoy \u2192 Program 02 PROGRAM 02 \u00b7 COMMUNITY IT CENTRES Connecting people to a digital future. Free access to technology, digital literacy and job-oriented [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-1598","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demo.freshosoft.in\/bargach\/wp-json\/wp\/v2\/pages\/1598","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.freshosoft.in\/bargach\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.freshosoft.in\/bargach\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.freshosoft.in\/bargach\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.freshosoft.in\/bargach\/wp-json\/wp\/v2\/comments?post=1598"}],"version-history":[{"count":4,"href":"https:\/\/demo.freshosoft.in\/bargach\/wp-json\/wp\/v2\/pages\/1598\/revisions"}],"predecessor-version":[{"id":1604,"href":"https:\/\/demo.freshosoft.in\/bargach\/wp-json\/wp\/v2\/pages\/1598\/revisions\/1604"}],"wp:attachment":[{"href":"https:\/\/demo.freshosoft.in\/bargach\/wp-json\/wp\/v2\/media?parent=1598"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}