{"id":1766,"date":"2026-08-22T05:13:15","date_gmt":"2026-08-22T05:13:15","guid":{"rendered":"https:\/\/demo.freshosoft.in\/bargach\/?page_id=1766"},"modified":"2026-08-22T08:56:03","modified_gmt":"2026-08-22T08:56:03","slug":"impact-at-a-glance","status":"publish","type":"page","link":"https:\/\/demo.freshosoft.in\/bargach\/impact-at-a-glance\/","title":{"rendered":"Impact at a Glance"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1766\" class=\"elementor elementor-1766\" 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     IMPACT AT A GLANCE \u2013 MODERN WITH COUNTER ANIMATION\r\n     Clean layout with stats, icons, and counter animation.\r\n     Fully mobile responsive. Light, modern design.\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-impact-glance {\r\n    --i-bg: #f8f5ee;\r\n    --i-card: #ffffff;\r\n    --i-ink: #1f2a26;\r\n    --i-teal: #146354;\r\n    --i-teal-light: #1f8a75;\r\n    --i-gold: #c47a3a;\r\n    --i-gold-soft: #deb070;\r\n    --i-coral: #d96c52;\r\n    --i-text: #3d534a;\r\n    --i-muted: #6a8a7a;\r\n    --i-border: rgba(20, 99, 84, 0.06);\r\n    --i-shadow: 0 4px 16px rgba(31,42,38,0.04);\r\n\r\n    width: 100%;\r\n    max-width: 100%;\r\n    margin: 0;\r\n    padding: 0;\r\n    box-sizing: border-box;\r\n    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\r\n    background: var(--i-bg);\r\n    overflow: hidden;\r\n  }\r\n  .bargach-impact-glance *,\r\n  .bargach-impact-glance *::before,\r\n  .bargach-impact-glance *::after {\r\n    box-sizing: border-box;\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n\r\n  .bargach-impact-glance .i-wrap {\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    padding: clamp(40px, 5vw, 60px) clamp(16px, 3vw, 40px);\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 30px;\r\n  }\r\n\r\n  \/* ===== HEADER ===== *\/\r\n  .bargach-impact-glance .i-header {\r\n    text-align: center;\r\n    max-width: 700px;\r\n    margin: 0 auto;\r\n  }\r\n  .bargach-impact-glance .i-header .tag {\r\n    font-size: 10px;\r\n    font-weight: 600;\r\n    letter-spacing: 0.2em;\r\n    text-transform: uppercase;\r\n    color: var(--i-coral);\r\n  }\r\n  .bargach-impact-glance .i-header h1 {\r\n    font-family: 'Fraunces', Georgia, serif;\r\n    font-weight: 380;\r\n    font-size: clamp(28px, 3.8vw, 44px);\r\n    line-height: 1.08;\r\n    margin: 4px 0 8px;\r\n    color: var(--i-ink);\r\n  }\r\n  .bargach-impact-glance .i-header h1 em {\r\n    font-style: italic;\r\n    color: var(--i-gold);\r\n  }\r\n  .bargach-impact-glance .i-header p {\r\n    font-size: clamp(14px, 1vw, 16px);\r\n    color: var(--i-text);\r\n    line-height: 1.7;\r\n    margin: 0;\r\n  }\r\n\r\n  \/* ===== IMPACT GRID ===== *\/\r\n  .bargach-impact-glance .i-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(3, 1fr);\r\n    gap: 18px;\r\n  }\r\n\r\n  .bargach-impact-glance .i-grid .item {\r\n    background: var(--i-card);\r\n    border-radius: 16px;\r\n    padding: 24px 20px 22px;\r\n    border: 1px solid var(--i-border);\r\n    box-shadow: var(--i-shadow);\r\n    text-align: center;\r\n    transition: 0.3s ease;\r\n    position: relative;\r\n    overflow: hidden;\r\n  }\r\n  .bargach-impact-glance .i-grid .item::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    height: 3px;\r\n    background: linear-gradient(90deg, var(--i-gold), var(--i-teal-light));\r\n    opacity: 0;\r\n    transition: 0.4s ease;\r\n  }\r\n  .bargach-impact-glance .i-grid .item:hover::before {\r\n    opacity: 1;\r\n  }\r\n  .bargach-impact-glance .i-grid .item:hover {\r\n    transform: translateY(-4px);\r\n    box-shadow: 0 12px 36px rgba(31, 42, 38, 0.08);\r\n    border-color: rgba(196, 122, 58, 0.12);\r\n  }\r\n\r\n  .bargach-impact-glance .i-grid .item .icon {\r\n    font-size: 32px;\r\n    display: block;\r\n    margin-bottom: 8px;\r\n    opacity: 0.7;\r\n  }\r\n  .bargach-impact-glance .i-grid .item .number {\r\n    font-family: 'Fraunces', Georgia, serif;\r\n    font-weight: 560;\r\n    font-size: clamp(32px, 3.6vw, 48px);\r\n    color: var(--i-teal);\r\n    line-height: 1.05;\r\n  }\r\n  .bargach-impact-glance .i-grid .item .number .plus {\r\n    font-size: 0.6em;\r\n    color: var(--i-gold);\r\n  }\r\n  .bargach-impact-glance .i-grid .item .label {\r\n    font-size: clamp(12px, 0.9vw, 14px);\r\n    color: var(--i-text);\r\n    font-weight: 350;\r\n    margin-top: 4px;\r\n  }\r\n\r\n  \/* ===== RESPONSIVE ===== *\/\r\n  @media (max-width: 1024px) {\r\n    .bargach-impact-glance .i-grid { grid-template-columns: repeat(3, 1fr); }\r\n  }\r\n\r\n  @media (max-width: 768px) {\r\n    .bargach-impact-glance .i-wrap { padding: 28px 14px; gap: 24px; }\r\n    .bargach-impact-glance .i-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }\r\n    .bargach-impact-glance .i-grid .item { padding: 20px 16px 18px; }\r\n  }\r\n\r\n  @media (max-width: 480px) {\r\n    .bargach-impact-glance .i-wrap { padding: 20px 10px; gap: 20px; }\r\n    .bargach-impact-glance .i-header h1 { font-size: clamp(22px, 5vw, 28px); }\r\n    .bargach-impact-glance .i-header p { font-size: 13px; }\r\n    .bargach-impact-glance .i-grid { grid-template-columns: 1fr 1fr; gap: 10px; }\r\n    .bargach-impact-glance .i-grid .item { padding: 16px 12px 14px; border-radius: 14px; }\r\n    .bargach-impact-glance .i-grid .item .number { font-size: clamp(24px, 6vw, 32px); }\r\n    .bargach-impact-glance .i-grid .item .label { font-size: 11px; }\r\n    .bargach-impact-glance .i-grid .item .icon { font-size: 26px; }\r\n  }\r\n\r\n  @media (prefers-reduced-motion: reduce) {\r\n    .bargach-impact-glance * { transition-duration: 0.01ms !important; }\r\n    .bargach-impact-glance .i-grid .item:hover { transform: none !important; }\r\n  }\r\n<\/style>\r\n\r\n<!-- ===== HTML ===== -->\r\n<section class=\"bargach-impact-glance\" aria-label=\"Impact at a Glance\">\r\n\r\n  <div class=\"i-wrap\">\r\n\r\n    <!-- HEADER -->\r\n    <div class=\"i-header\">\r\n      <div class=\"tag\">Our Impact<\/div>\r\n      <h1>Impact <em>at a Glance<\/em><\/h1>\r\n      <p>Every number represents a life touched, a community strengthened, and a step towards a better future.<\/p>\r\n    <\/div>\r\n\r\n    <!-- IMPACT GRID -->\r\n    <div class=\"i-grid\">\r\n\r\n      <!-- 1 -->\r\n      <div class=\"item\">\r\n        <span class=\"icon\">\ud83c\udf31<\/span>\r\n        <div class=\"number\" data-target=\"70000\">0<span class=\"plus\">+<\/span><\/div>\r\n        <div class=\"label\">People Reached<\/div>\r\n      <\/div>\r\n\r\n      <!-- 2 -->\r\n      <div class=\"item\">\r\n        <span class=\"icon\">\ud83d\udcbb<\/span>\r\n        <div class=\"number\" data-target=\"20000\">0<span class=\"plus\">+<\/span><\/div>\r\n        <div class=\"label\">IT Beneficiaries<\/div>\r\n      <\/div>\r\n\r\n      <!-- 3 -->\r\n      <div class=\"item\">\r\n        <span class=\"icon\">\ud83c\udfdb\ufe0f<\/span>\r\n        <div class=\"number\" data-target=\"30\">0<\/div>\r\n        <div class=\"label\">IT Centres<\/div>\r\n      <\/div>\r\n\r\n      <!-- 4 -->\r\n      <div class=\"item\">\r\n        <span class=\"icon\">\ud83d\udccd<\/span>\r\n        <div class=\"number\" data-target=\"13\">0<\/div>\r\n        <div class=\"label\">Districts Covered<\/div>\r\n      <\/div>\r\n\r\n      <!-- 5 -->\r\n      <div class=\"item\">\r\n        <span class=\"icon\">\ud83d\udca7<\/span>\r\n        <div class=\"number\" data-target=\"1200\">0<span class=\"plus\">+<\/span><\/div>\r\n        <div class=\"label\">Villagers with Safe Water<\/div>\r\n      <\/div>\r\n\r\n      <!-- 6 -->\r\n      <div class=\"item\">\r\n        <span class=\"icon\">\ud83d\uddfa\ufe0f<\/span>\r\n        <div class=\"number\" data-target=\"3\">0<\/div>\r\n        <div class=\"label\">States Served<\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n<!-- ============================================================\r\n     COUNTER ANIMATION SCRIPT\r\n     ============================================================ -->\r\n<script>\r\n  (function() {\r\n    var section = document.querySelector('.bargach-impact-glance');\r\n    if (!section) return;\r\n\r\n    var numberElements = section.querySelectorAll('.number');\r\n    var observerOptions = {\r\n      root: null,\r\n      rootMargin: '0px 0px -40px 0px',\r\n      threshold: 0.2\r\n    };\r\n\r\n    var numberData = [];\r\n    numberElements.forEach(function(el) {\r\n      var target = parseInt(el.getAttribute('data-target'), 10);\r\n      var hasPlus = el.innerHTML.includes('+');\r\n      numberData.push({\r\n        el: el,\r\n        target: target,\r\n        hasPlus: hasPlus,\r\n        animated: false\r\n      });\r\n    });\r\n\r\n    function animateNumber(data) {\r\n      var el = data.el;\r\n      var target = data.target;\r\n      var duration = 1800;\r\n      var startTime = null;\r\n\r\n      function step(time) {\r\n        if (!startTime) startTime = time;\r\n        var progress = Math.min((time - startTime) \/ duration, 1);\r\n        var eased = 1 - Math.pow(1 - progress, 3);\r\n        var current = Math.round(eased * target);\r\n\r\n        var formatted = current.toLocaleString('en-US');\r\n        if (data.hasPlus) {\r\n          el.innerHTML = formatted + '<span class=\"plus\">+<\/span>';\r\n        } else {\r\n          el.innerHTML = formatted;\r\n        }\r\n\r\n        if (progress < 1) {\r\n          requestAnimationFrame(step);\r\n        } else {\r\n          var finalFormatted = target.toLocaleString('en-US');\r\n          if (data.hasPlus) {\r\n            el.innerHTML = finalFormatted + '<span class=\"plus\">+<\/span>';\r\n          } else {\r\n            el.innerHTML = finalFormatted;\r\n          }\r\n          data.animated = true;\r\n        }\r\n      }\r\n\r\n      requestAnimationFrame(step);\r\n    }\r\n\r\n    var observer = new IntersectionObserver(function(entries) {\r\n      entries.forEach(function(entry) {\r\n        if (entry.isIntersecting) {\r\n          var item = entry.target;\r\n          var index = Array.from(section.querySelectorAll('.item')).indexOf(item);\r\n          if (index !== -1 && numberData[index] && !numberData[index].animated) {\r\n            setTimeout(function() {\r\n              animateNumber(numberData[index]);\r\n            }, index * 100);\r\n          }\r\n        }\r\n      });\r\n    }, observerOptions);\r\n\r\n    var items = section.querySelectorAll('.item');\r\n    items.forEach(function(item) {\r\n      observer.observe(item);\r\n    });\r\n\r\n    \/\/ Fallback for visible items on load\r\n    setTimeout(function() {\r\n      items.forEach(function(item, idx) {\r\n        var rect = item.getBoundingClientRect();\r\n        var winHeight = window.innerHeight || document.documentElement.clientHeight;\r\n        if (rect.top < winHeight - 80 && rect.bottom > 0) {\r\n          if (numberData[idx] && !numberData[idx].animated) {\r\n            animateNumber(numberData[idx]);\r\n          }\r\n        }\r\n      });\r\n    }, 300);\r\n\r\n  })();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Our Impact Impact at a Glance Every number represents a life touched, a community strengthened, and a step towards a better future. \ud83c\udf31 0+ People Reached \ud83d\udcbb 0+ IT Beneficiaries \ud83c\udfdb\ufe0f 0 IT Centres \ud83d\udccd 0 Districts Covered \ud83d\udca7 0+ Villagers with Safe Water \ud83d\uddfa\ufe0f 0 States Served<\/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-1766","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demo.freshosoft.in\/bargach\/wp-json\/wp\/v2\/pages\/1766","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=1766"}],"version-history":[{"count":4,"href":"https:\/\/demo.freshosoft.in\/bargach\/wp-json\/wp\/v2\/pages\/1766\/revisions"}],"predecessor-version":[{"id":1856,"href":"https:\/\/demo.freshosoft.in\/bargach\/wp-json\/wp\/v2\/pages\/1766\/revisions\/1856"}],"wp:attachment":[{"href":"https:\/\/demo.freshosoft.in\/bargach\/wp-json\/wp\/v2\/media?parent=1766"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}