{"id":1521,"date":"2022-12-21T08:24:58","date_gmt":"2022-12-21T08:24:58","guid":{"rendered":"http:\/\/qrowdwp.pixydrops.com\/?page_id=18"},"modified":"2026-08-21T15:12:17","modified_gmt":"2026-08-21T15:12:17","slug":"home-one","status":"publish","type":"page","link":"https:\/\/demo.freshosoft.in\/bargach\/","title":{"rendered":"Home One"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1521\" class=\"elementor elementor-1521\" data-elementor-settings=\"{&quot;ha_cmc_init_switcher&quot;:&quot;no&quot;}\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6dafed9 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"6dafed9\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-70bd33e\" data-id=\"70bd33e\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-25f020e elementor-widget elementor-widget-html\" data-id=\"25f020e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     BARGACH \u00b7 FULL WIDTH SLIDER \u2013 ELEMENTOR HTML WIDGET (v3 \u2728 LIGHT + BORDER DESIGN)\r\n     Slide 1: Sparkle effect (Every drop finds its way to someone)\r\n     Slide 2: Wave effect (Empowering communities with Technology)\r\n\r\n     ADDED: Beautiful border\/perforated frame design around the slider\r\n     with decorative edges and elegant detailing.\r\n     ============================================================ -->\r\n<style>\r\n  \/* Fonts *\/\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&display=swap');\r\n  @import url('https:\/\/fonts.bunny.net\/css?family=playfair-display:600');\r\n\r\n  \/* ========== RESET & BASE ========== *\/\r\n  .bargach-slider {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 100vh;\r\n    min-height: 100vh;\r\n    max-height: 100vh;\r\n    height: 100svh;\r\n    min-height: 100svh;\r\n    max-height: 100svh;\r\n    overflow: hidden;\r\n    background: #f7f2e7;\r\n    isolation: isolate;\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n  .bargach-slider * {\r\n    box-sizing: border-box;\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n\r\n  \/* ========== DECORATIVE BORDER WRAPPER ========== *\/\r\n  .bargach-slider-wrap {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 100%;\r\n    padding: 12px;\r\n    background: transparent;\r\n    border-radius: 0;\r\n  }\r\n\r\n  \/* Perforated border top & bottom *\/\r\n  .bargach-slider-wrap::before,\r\n  .bargach-slider-wrap::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    left: 12px;\r\n    right: 12px;\r\n    height: 6px;\r\n    z-index: 25;\r\n    pointer-events: none;\r\n    opacity: 0.4;\r\n  }\r\n  .bargach-slider-wrap::before {\r\n    top: 6px;\r\n    background-image: repeating-linear-gradient(90deg, #b8791e 0 6px, transparent 6px 16px);\r\n    background-size: 16px 6px;\r\n  }\r\n  .bargach-slider-wrap::after {\r\n    bottom: 6px;\r\n    background-image: repeating-linear-gradient(90deg, #b8791e 0 6px, transparent 6px 16px);\r\n    background-size: 16px 6px;\r\n  }\r\n\r\n  \/* Corner decorations *\/\r\n  .bargach-slider-wrap .corner {\r\n    position: absolute;\r\n    z-index: 25;\r\n    pointer-events: none;\r\n    width: 28px;\r\n    height: 28px;\r\n    border-color: #b8791e;\r\n    border-style: solid;\r\n    border-width: 0;\r\n    opacity: 0.5;\r\n  }\r\n  .bargach-slider-wrap .corner-tl {\r\n    top: 6px;\r\n    left: 12px;\r\n    border-top-width: 2px;\r\n    border-left-width: 2px;\r\n  }\r\n  .bargach-slider-wrap .corner-tr {\r\n    top: 6px;\r\n    right: 12px;\r\n    border-top-width: 2px;\r\n    border-right-width: 2px;\r\n  }\r\n  .bargach-slider-wrap .corner-bl {\r\n    bottom: 6px;\r\n    left: 12px;\r\n    border-bottom-width: 2px;\r\n    border-left-width: 2px;\r\n  }\r\n  .bargach-slider-wrap .corner-br {\r\n    bottom: 6px;\r\n    right: 12px;\r\n    border-bottom-width: 2px;\r\n    border-right-width: 2px;\r\n  }\r\n\r\n  \/* Thin inner border *\/\r\n  .bargach-slider-wrap .inner-border {\r\n    position: absolute;\r\n    inset: 14px;\r\n    z-index: 24;\r\n    pointer-events: none;\r\n    border: 1px solid rgba(184, 121, 30, 0.12);\r\n    border-radius: 2px;\r\n  }\r\n\r\n  \/* Decorative dots at corners (inside) *\/\r\n  .bargach-slider-wrap .inner-dot {\r\n    position: absolute;\r\n    z-index: 25;\r\n    pointer-events: none;\r\n    width: 8px;\r\n    height: 8px;\r\n    border-radius: 50%;\r\n    background: #b8791e;\r\n    opacity: 0.3;\r\n    box-shadow: 0 0 12px rgba(184, 121, 30, 0.1);\r\n  }\r\n  .bargach-slider-wrap .inner-dot-tl { top: 18px; left: 18px; }\r\n  .bargach-slider-wrap .inner-dot-tr { top: 18px; right: 18px; }\r\n  .bargach-slider-wrap .inner-dot-bl { bottom: 18px; left: 18px; }\r\n  .bargach-slider-wrap .inner-dot-br { bottom: 18px; right: 18px; }\r\n\r\n  \/* ========== SLIDES CONTAINER ========== *\/\r\n  .bargach-slides {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 100%;\r\n    display: flex;\r\n    transition: transform 1s cubic-bezier(0.77, 0, 0.18, 1);\r\n    will-change: transform;\r\n    border-radius: 4px;\r\n    overflow: hidden;\r\n  }\r\n\r\n  \/* ========== INDIVIDUAL SLIDE ========== *\/\r\n  .bargach-slide {\r\n    flex: 0 0 100%;\r\n    width: 100%;\r\n    height: 100%;\r\n    min-height: 100vh;\r\n    min-height: 100svh;\r\n    display: flex;\r\n    align-items: center;\r\n    position: relative;\r\n    overflow: hidden;\r\n    color: #1e2d28;\r\n    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\r\n  }\r\n\r\n  \/* ---------- background image + KEN BURNS ---------- *\/\r\n  .bargach-slide .slide-bg {\r\n    position: absolute;\r\n    inset: 0;\r\n    z-index: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    background-size: cover;\r\n    background-position: center 30%;\r\n    background-repeat: no-repeat;\r\n    filter: brightness(1.02) saturate(0.85) contrast(1.02);\r\n    transform: scale(1.14);\r\n    will-change: transform;\r\n  }\r\n  .bargach-slide.active .slide-bg {\r\n    animation: heroKen 8s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;\r\n  }\r\n  @keyframes heroKen {\r\n    from { transform: scale(1.14); }\r\n    to   { transform: scale(1.035); }\r\n  }\r\n\r\n  .bargach-slide .slide-vignette {\r\n    position: absolute;\r\n    inset: 0;\r\n    z-index: 1;\r\n    background: radial-gradient(120% 100% at 60% 30%, rgba(255,255,255,0.35) 0%, rgba(250,245,232,0.82) 65%, rgba(247,242,231,0.95) 100%);\r\n    pointer-events: none;\r\n  }\r\n  .bargach-slide .slide-glow {\r\n    position: absolute;\r\n    z-index: 1;\r\n    pointer-events: none;\r\n    width: 70vw;\r\n    height: 70vw;\r\n    max-width: 800px;\r\n    max-height: 800px;\r\n    top: -10%;\r\n    right: -5%;\r\n    background: radial-gradient(circle, rgba(243,177,60,0.18) 0%, rgba(243,177,60,0.05) 50%, transparent 75%);\r\n    filter: blur(40px);\r\n    transition: transform 0.5s ease-out;\r\n  }\r\n\r\n  \/* floating golden particles *\/\r\n  .hero-particles {\r\n    position: absolute;\r\n    inset: 0;\r\n    z-index: 2;\r\n    pointer-events: none;\r\n    overflow: hidden;\r\n  }\r\n  .hero-particles i {\r\n    position: absolute;\r\n    left: var(--x, 50%);\r\n    bottom: -4vh;\r\n    width: 4px;\r\n    height: 4px;\r\n    border-radius: 50%;\r\n    background: #c9861f;\r\n    box-shadow: 0 0 8px rgba(200,134,31,0.7);\r\n    filter: blur(0.4px);\r\n    opacity: 0;\r\n    transform: scale(var(--s, 1));\r\n    animation: heroFloat var(--d, 14s) linear var(--dl, 0s) infinite;\r\n  }\r\n  .hero-particles i:nth-child(1)  { --x: 6%;  --d: 13s; --dl: 0s;    --s: .8;  }\r\n  .hero-particles i:nth-child(2)  { --x: 14%; --d: 17s; --dl: 2.2s;  --s: 1.1; }\r\n  .hero-particles i:nth-child(3)  { --x: 24%; --d: 15s; --dl: 5s;    --s: .7;  }\r\n  .hero-particles i:nth-child(4)  { --x: 33%; --d: 19s; --dl: 1s;    --s: 1;   }\r\n  .hero-particles i:nth-child(5)  { --x: 42%; --d: 14s; --dl: 7s;    --s: .9;  }\r\n  .hero-particles i:nth-child(6)  { --x: 52%; --d: 18s; --dl: 3.4s;  --s: .6;  }\r\n  .hero-particles i:nth-child(7)  { --x: 61%; --d: 13.5s; --dl: 9s;  --s: 1.2; }\r\n  .hero-particles i:nth-child(8)  { --x: 70%; --d: 16s; --dl: 0.6s;  --s: .8;  }\r\n  .hero-particles i:nth-child(9)  { --x: 78%; --d: 20s; --dl: 4.6s;  --s: 1;   }\r\n  .hero-particles i:nth-child(10) { --x: 85%; --d: 15s; --dl: 8s;    --s: .7;  }\r\n  .hero-particles i:nth-child(11) { --x: 91%; --d: 17s; --dl: 6.2s;  --s: .9;  }\r\n  .hero-particles i:nth-child(12) { --x: 96%; --d: 14.5s; --dl: 11s; --s: .6;  }\r\n  @keyframes heroFloat {\r\n    0%   { transform: translateY(0) scale(var(--s, 1));        opacity: 0; }\r\n    8%   { opacity: .9; }\r\n    45%  { opacity: .45; }\r\n    72%  { opacity: .8; }\r\n    100% { transform: translateY(-108vh) scale(var(--s, 1));   opacity: 0; }\r\n  }\r\n\r\n  \/* ---------- content ---------- *\/\r\n  .bargach-slide .slide-stage {\r\n    position: relative;\r\n    z-index: 5;\r\n    width: 100%;\r\n    max-width: 1520px;\r\n    margin: 0 auto;\r\n    padding: clamp(80px, 10vw, 140px) clamp(24px, 5vw, 64px) clamp(120px, 16vh, 170px);\r\n  }\r\n  .bargach-slide .slide-copy {\r\n    max-width: 760px;\r\n    transition: transform 0.3s ease-out;\r\n    will-change: transform;\r\n  }\r\n\r\n  .bargach-slide .slide-eyebrow {\r\n    font-size: clamp(10px, 1.2vw, 12px);\r\n    letter-spacing: 0.22em;\r\n    text-transform: uppercase;\r\n    font-weight: 400;\r\n    color: #b8791e;\r\n    margin: 0 0 22px;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    opacity: 0;\r\n    transform: translateY(14px);\r\n    transition: opacity 0.35s ease;\r\n  }\r\n  .bargach-slide.active .slide-eyebrow {\r\n    animation: riseSlide 0.7s cubic-bezier(.22,.68,.2,1) 0.15s forwards;\r\n  }\r\n  .bargach-slide .slide-eyebrow::before {\r\n    content: \"\";\r\n    width: 26px;\r\n    height: 1px;\r\n    background: rgba(184,121,30,0.5);\r\n    display: inline-block;\r\n  }\r\n\r\n  \/* ---------- SLIDE 1: POP-WORD + SPARKLE ---------- *\/\r\n  .bargach-slide .slide-headline-sparkle {\r\n    font-family: 'Playfair Display', 'Fraunces', Georgia, serif;\r\n    font-weight: 600;\r\n    font-size: clamp(42px, 7vw, 100px);\r\n    line-height: 1.05;\r\n    letter-spacing: -0.01em;\r\n    max-width: 850px;\r\n    margin: 0 0 26px;\r\n    color: #1e2d28;\r\n    perspective: 500px;\r\n  }\r\n  .bargach-slide .slide-headline-sparkle .word {\r\n    display: block;\r\n    opacity: 0;\r\n    transform: rotateX(120deg);\r\n    transform-origin: 50% 100%;\r\n    transition: opacity 0.35s ease;\r\n  }\r\n  .bargach-slide.active .slide-headline-sparkle .word {\r\n    animation:\r\n      showSlide 0.01s forwards,\r\n      popWord 0.9s cubic-bezier(0.14, 1.23, 0.33, 1.16) forwards;\r\n  }\r\n  .bargach-slide .slide-headline-sparkle .word:nth-of-type(2) {\r\n    padding: 0 2rem;\r\n    background: linear-gradient(100deg, #b8791e 25%, #f3c869 50%, #b8791e 75%);\r\n    background-size: 220% 100%;\r\n    background-position: 0% 0;\r\n    -webkit-background-clip: text;\r\n    background-clip: text;\r\n    color: transparent;\r\n  }\r\n  .bargach-slide.active .slide-headline-sparkle .word:nth-of-type(2) {\r\n    animation:\r\n      showSlide 0.01s 1.0s forwards,\r\n      popWord 0.9s cubic-bezier(0.14, 1.23, 0.33, 1.16) 1.0s forwards,\r\n      goldSheen 4s ease-in-out 2.3s infinite;\r\n  }\r\n  .bargach-slide.active .slide-headline-sparkle .word:nth-of-type(3) {\r\n    animation-delay: 1.8s, 1.8s;\r\n  }\r\n  .bargach-slide .slide-headline-sparkle .word:nth-of-type(3) {\r\n    display: flex;\r\n    align-items: center;\r\n    flex-wrap: wrap;\r\n    gap: 0.1em;\r\n  }\r\n  .bargach-slide .slide-headline-sparkle .shimmer-target {\r\n    display: inline-block;\r\n  }\r\n  .bargach-slide.active .slide-headline-sparkle .word:last-of-type .shimmer-target {\r\n    animation: shimmerSlide 0.25s 2.6s forwards;\r\n  }\r\n  .bargach-slide .slide-headline-sparkle .word em {\r\n    font-style: italic;\r\n    color: #b8791e;\r\n  }\r\n\r\n  \/* superscript with bars + sparkle *\/\r\n  .bargach-slide .superscript {\r\n    position: relative;\r\n    display: inline-block;\r\n    vertical-align: text-top;\r\n    margin-left: 0.05em;\r\n  }\r\n  .bargach-slide.active .superscript {\r\n    animation: shimmerSlide 0.25s 2.6s forwards;\r\n  }\r\n  .bargach-slide .superscript::before {\r\n    --bar-width: 25%;\r\n    position: absolute;\r\n    top: 30%;\r\n    left: 40%;\r\n    width: 20%;\r\n    height: 55%;\r\n    background: linear-gradient(\r\n      to right,\r\n      #1e2d28 var(--bar-width),\r\n      transparent var(--bar-width) calc(100% - var(--bar-width)),\r\n      #1e2d28 calc(100% - var(--bar-width))\r\n    );\r\n    content: \"\";\r\n    transform: scaleY(0);\r\n  }\r\n  .bargach-slide.active .superscript::before {\r\n    animation: barScale 0.25s linear 2.3s 1 forwards;\r\n  }\r\n  .bargach-slide .superscript::after {\r\n    --size: clamp(4rem, 8vw, 10rem);\r\n    position: absolute;\r\n    top: -15%;\r\n    left: -70%;\r\n    width: var(--size);\r\n    height: var(--size);\r\n    background: radial-gradient(\r\n        circle at center,\r\n        rgb(184 121 30 \/ 90%) 0% 7%,\r\n        transparent 7% 100%\r\n      ),\r\n      conic-gradient(\r\n        transparent 0deg 18deg,\r\n        rgba(184,121,30,0.35) 18deg,\r\n        transparent 20deg 40deg,\r\n        rgba(184,121,30,0.35) 40deg,\r\n        transparent 43deg 87deg,\r\n        rgba(184,121,30,0.35) 87deg,\r\n        transparent 95deg 175deg,\r\n        rgba(184,121,30,0.35) 175deg,\r\n        transparent 178deg 220deg,\r\n        rgba(184,121,30,0.35) 220deg,\r\n        transparent 222deg 270deg,\r\n        rgba(184,121,30,0.35) 270deg,\r\n        transparent 275deg 300deg,\r\n        rgba(184,121,30,0.35) 300deg,\r\n        transparent 303deg 360deg\r\n      );\r\n    border-radius: 50%;\r\n    clip-path: polygon(\r\n      50% 0,\r\n      59.13% 26.64%,\r\n      85.13% -2.35%,\r\n      100% 50%,\r\n      50% 100%,\r\n      0 50%,\r\n      31.39% 34.86%\r\n    );\r\n    content: \"\";\r\n    filter: blur(1px);\r\n    transform: scale(0);\r\n  }\r\n  .bargach-slide.active .superscript::after {\r\n    animation: sparkleSlide 0.5s linear 2.4s 1 forwards;\r\n  }\r\n\r\n  \/* ---------- SLIDE 2: WAVE EFFECT ---------- *\/\r\n  .bargach-slide .slide-headline-wave {\r\n    font-family: 'Fraunces', Georgia, 'Times New Roman', serif;\r\n    font-weight: 380;\r\n    font-size: clamp(42px, 7vw, 100px);\r\n    line-height: 1.05;\r\n    letter-spacing: -0.01em;\r\n    max-width: 850px;\r\n    margin: 0 0 26px;\r\n    color: #1e2d28;\r\n  }\r\n  .bargach-slide .slide-headline-wave .word {\r\n    display: block;\r\n    opacity: 0;\r\n    transform: translateY(20px);\r\n    transition: opacity 0.35s ease;\r\n  }\r\n  .bargach-slide.active .slide-headline-wave .word {\r\n    animation: slideUpWave 0.6s cubic-bezier(.22,.68,.2,1) forwards;\r\n  }\r\n  .bargach-slide.active .slide-headline-wave .word:nth-child(1) { animation-delay: 0.3s; }\r\n  .bargach-slide.active .slide-headline-wave .word:nth-child(2) { animation-delay: 0.7s; }\r\n  .bargach-slide.active .slide-headline-wave .word:nth-child(3) { animation-delay: 1.1s; }\r\n\r\n  .bargach-slide .wave-container {\r\n    display: inline-block;\r\n  }\r\n  .bargach-slide .wave-text {\r\n    display: inline-flex;\r\n  }\r\n  .bargach-slide .wave-text span {\r\n    display: inline-block;\r\n    color: #b8791e;\r\n  }\r\n  .bargach-slide.active .wave-text span {\r\n    animation: waveSlide 1.8s ease-in-out infinite;\r\n  }\r\n  .bargach-slide.active .wave-text span:nth-child(1) { animation-delay: 0s; }\r\n  .bargach-slide.active .wave-text span:nth-child(2) { animation-delay: 0.12s; }\r\n  .bargach-slide.active .wave-text span:nth-child(3) { animation-delay: 0.24s; }\r\n  .bargach-slide.active .wave-text span:nth-child(4) { animation-delay: 0.36s; }\r\n  .bargach-slide.active .wave-text span:nth-child(5) { animation-delay: 0.48s; }\r\n  .bargach-slide.active .wave-text span:nth-child(6) { animation-delay: 0.60s; }\r\n  .bargach-slide.active .wave-text span:nth-child(7) { animation-delay: 0.72s; }\r\n  .bargach-slide.active .wave-text span:nth-child(8) { animation-delay: 0.84s; }\r\n  .bargach-slide.active .wave-text span:nth-child(9) { animation-delay: 0.96s; }\r\n  .bargach-slide.active .wave-text span:nth-child(10) { animation-delay: 1.08s; }\r\n\r\n  \/* ---------- common slide content ---------- *\/\r\n  .bargach-slide .slide-subtext {\r\n    font-weight: 300;\r\n    font-size: clamp(14px, 1.5vw, 17px);\r\n    line-height: 1.7;\r\n    color: #4a625b;\r\n    max-width: 620px;\r\n    margin: 0 0 38px;\r\n    opacity: 0;\r\n    transform: translateY(14px);\r\n    transition: opacity 0.35s ease;\r\n  }\r\n  .bargach-slide.active .slide-subtext {\r\n    animation: riseSlide 0.7s cubic-bezier(.22,.68,.2,1) forwards;\r\n  }\r\n  .bargach-slide.active .slide-subtext.delay-1 { animation-delay: 2.8s; }\r\n  .bargach-slide.active .slide-subtext.delay-2 { animation-delay: 2.0s; }\r\n  .bargach-slide .slide-subtext strong {\r\n    color: #b8791e;\r\n    font-weight: 500;\r\n  }\r\n\r\n  .bargach-slide .slide-actions {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 18px;\r\n    flex-wrap: wrap;\r\n    opacity: 0;\r\n    transform: translateY(14px);\r\n    transition: opacity 0.35s ease;\r\n  }\r\n  .bargach-slide.active .slide-actions {\r\n    animation: riseSlide 0.7s cubic-bezier(.22,.68,.2,1) forwards;\r\n  }\r\n  .bargach-slide.active .slide-actions.delay-1 { animation-delay: 3.0s; }\r\n  .bargach-slide.active .slide-actions.delay-2 { animation-delay: 2.2s; }\r\n\r\n  .bargach-slide .slide-btn {\r\n    font-size: clamp(12px, 1.1vw, 14px);\r\n    font-weight: 500;\r\n    letter-spacing: 0.02em;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    padding: 14px 28px;\r\n    border-radius: 999px;\r\n    text-decoration: none;\r\n    cursor: pointer;\r\n    transition: transform 0.3s cubic-bezier(.22,.68,.2,1), box-shadow 0.3s ease, background 0.3s ease;\r\n  }\r\n  .bargach-slide .slide-btn-primary {\r\n    background: #f3b13c;\r\n    color: #1e2d28;\r\n    border: 1px solid #f3b13c;\r\n  }\r\n  .bargach-slide .slide-btn-primary:hover {\r\n    transform: translate3d(0,-2px,0);\r\n    box-shadow: 0 16px 40px -12px rgba(243,177,60,0.5);\r\n  }\r\n  .bargach-slide .slide-btn-secondary {\r\n    background: transparent;\r\n    color: #1e2d28;\r\n    border: 1px solid rgba(30,45,40,0.22);\r\n  }\r\n  .bargach-slide .slide-btn-secondary:hover {\r\n    background: rgba(30,45,40,0.06);\r\n    transform: translate3d(0,-2px,0);\r\n    border-color: rgba(30,45,40,0.35);\r\n  }\r\n  .bargach-slide .slide-btn-arrow {\r\n    display: inline-block;\r\n    transition: transform 0.3s cubic-bezier(.22,.68,.2,1);\r\n    line-height: 1;\r\n  }\r\n  .bargach-slide .slide-btn:hover .slide-btn-arrow { transform: translateX(4px); }\r\n\r\n  \/* ---------- LOCATION ---------- *\/\r\n  .bargach-slide .slide-location {\r\n    margin-top: 34px;\r\n    font-size: clamp(10px, 1vw, 12px);\r\n    letter-spacing: 0.18em;\r\n    text-transform: uppercase;\r\n    color: #5c7a72;\r\n    opacity: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 6px;\r\n    transition: opacity 0.35s ease;\r\n  }\r\n  .bargach-slide.active .slide-location {\r\n    animation: riseSlide 0.7s cubic-bezier(.22,.68,.2,1) forwards;\r\n  }\r\n  .bargach-slide.active .slide-location.delay-1 { animation-delay: 3.2s; }\r\n  .bargach-slide.active .slide-location.delay-2 { animation-delay: 2.4s; }\r\n\r\n  .bargach-slide .slide-location .loc-dot {\r\n    display: inline-block;\r\n    width: 4px;\r\n    height: 4px;\r\n    border-radius: 50%;\r\n    background: #b8791e;\r\n    margin: 0 4px;\r\n  }\r\n  .bargach-slide .slide-location .loc-icon {\r\n    color: #b8791e;\r\n    font-size: 10px;\r\n    margin-right: 2px;\r\n  }\r\n  .bargach-slide .slide-location .loc-item {\r\n    color: #2e433d;\r\n  }\r\n\r\n  \/* ========== ANIMATIONS ========== *\/\r\n  @keyframes popWord {\r\n    to { transform: rotateX(0); }\r\n  }\r\n  @keyframes showSlide {\r\n    to { opacity: 1; }\r\n  }\r\n  @keyframes barScale {\r\n    to { transform: scaleY(1); }\r\n  }\r\n  @keyframes sparkleSlide {\r\n    0% { transform: scale(0); }\r\n    60% { transform: scale(1) translate(4px, 1px) rotate(8deg); }\r\n    100% { transform: scale(0) translate(4px, 1px) rotate(8deg); }\r\n  }\r\n  @keyframes shimmerSlide {\r\n    to { text-shadow: 0 0 12px rgba(184,121,30,0.4), 0 0 30px rgba(184,121,30,0.15); }\r\n  }\r\n  @keyframes goldSheen {\r\n    0%, 100% { background-position: 0% 0; }\r\n    50%      { background-position: 100% 0; }\r\n  }\r\n  @keyframes waveSlide {\r\n    0%, 100% { transform: translateY(0); }\r\n    50% { transform: translateY(-12px); }\r\n  }\r\n  @keyframes slideUpWave {\r\n    from { opacity: 0; transform: translateY(20px); }\r\n    to { opacity: 1; transform: translateY(0); }\r\n  }\r\n  @keyframes riseSlide {\r\n    from { opacity: 0; transform: translateY(14px); }\r\n    to { opacity: 1; transform: translateY(0); }\r\n  }\r\n\r\n  \/* ========== SCROLL INDICATOR ========== *\/\r\n  .bargach-slide .slide-scroll {\r\n    position: absolute;\r\n    z-index: 11;\r\n    left: auto;\r\n    right: clamp(24px, 5vw, 64px);\r\n    bottom: 32px;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: flex-end;\r\n    gap: 12px;\r\n    opacity: 0;\r\n    transition: opacity 0.35s ease;\r\n  }\r\n  .bargach-slide.active .slide-scroll {\r\n    animation: riseSlide 0.7s cubic-bezier(.22,.68,.2,1) forwards;\r\n  }\r\n  .bargach-slide.active .slide-scroll.delay-1 { animation-delay: 3.4s; }\r\n  .bargach-slide.active .slide-scroll.delay-2 { animation-delay: 2.6s; }\r\n  .bargach-slide .slide-scroll-text {\r\n    font-size: clamp(9px, 0.9vw, 11px);\r\n    letter-spacing: 0.18em;\r\n    text-transform: uppercase;\r\n    color: #5c7a72;\r\n  }\r\n  .bargach-slide .slide-scroll-line {\r\n    position: relative;\r\n    width: 1px;\r\n    height: 40px;\r\n    background: rgba(30,45,40,0.18);\r\n    overflow: hidden;\r\n  }\r\n  .bargach-slide .slide-scroll-line::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    left: 0;\r\n    top: -40px;\r\n    width: 1px;\r\n    height: 40px;\r\n    background: #b8791e;\r\n  }\r\n  .bargach-slide.active .slide-scroll-line::after {\r\n    animation: scrollMoveSlide 2.2s ease-in-out infinite;\r\n  }\r\n  @keyframes scrollMoveSlide {\r\n    0%   { top: -40px; }\r\n    60%  { top: 40px; }\r\n    100% { top: 40px; }\r\n  }\r\n\r\n  \/* ========== SLIDER CONTROLS \u2014 progress pill dots ========== *\/\r\n  .bargach-slider-controls {\r\n    position: absolute;\r\n    bottom: 40px;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    z-index: 30;\r\n    display: flex;\r\n    gap: 12px;\r\n    align-items: center;\r\n  }\r\n  .bargach-slider-controls .dot {\r\n    width: 12px;\r\n    height: 12px;\r\n    border-radius: 999px;\r\n    background: rgba(30,45,40,0.18);\r\n    border: none;\r\n    cursor: pointer;\r\n    padding: 0;\r\n    position: relative;\r\n    overflow: hidden;\r\n    transition: width 0.35s cubic-bezier(.22,.68,.2,1), background 0.3s ease;\r\n  }\r\n  .bargach-slider-controls .dot:hover {\r\n    background: rgba(30,45,40,0.35);\r\n  }\r\n  .bargach-slider-controls .dot.active {\r\n    width: 38px;\r\n    background: rgba(30,45,40,0.2);\r\n  }\r\n  .bargach-slider-controls .dot.active::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    inset: 0;\r\n    border-radius: 999px;\r\n    background: #f3b13c;\r\n    box-shadow: 0 0 14px rgba(243,177,60,0.5);\r\n    transform: scaleX(0);\r\n    transform-origin: left;\r\n    animation: heroDotFill var(--adur, 6s) linear forwards;\r\n  }\r\n  .bargach-slider.is-paused .dot.active::after {\r\n    animation-play-state: paused;\r\n  }\r\n  @keyframes heroDotFill {\r\n    to { transform: scaleX(1); }\r\n  }\r\n\r\n  \/* ========== RESPONSIVE ========== *\/\r\n  @media (max-width: 1024px) {\r\n    .bargach-slide .slide-headline-sparkle,\r\n    .bargach-slide .slide-headline-wave {\r\n      font-size: clamp(38px, 6vw, 52px);\r\n    }\r\n    .bargach-slider-wrap { padding: 8px; }\r\n    .bargach-slider-wrap .corner { width: 20px; height: 20px; }\r\n    .bargach-slider-wrap .inner-border { inset: 10px; }\r\n    .bargach-slider-wrap .inner-dot { width: 6px; height: 6px; }\r\n    .bargach-slider-wrap .inner-dot-tl { top: 14px; left: 14px; }\r\n    .bargach-slider-wrap .inner-dot-tr { top: 14px; right: 14px; }\r\n    .bargach-slider-wrap .inner-dot-bl { bottom: 14px; left: 14px; }\r\n    .bargach-slider-wrap .inner-dot-br { bottom: 14px; right: 14px; }\r\n  }\r\n  @media (max-width: 900px) {\r\n    .bargach-slide .slide-stage { padding-top: 120px; }\r\n    .bargach-slide .slide-headline-sparkle,\r\n    .bargach-slide .slide-headline-wave {\r\n      font-size: clamp(32px, 7vw, 48px);\r\n    }\r\n    .bargach-slide .slide-copy { max-width: 100%; }\r\n    .bargach-slide .superscript::after { --size: clamp(3rem, 6vw, 5rem); }\r\n  }\r\n  @media (max-width: 768px) {\r\n    .bargach-slide .slide-headline-sparkle,\r\n    .bargach-slide .slide-headline-wave {\r\n      font-size: clamp(28px, 6vw, 38px);\r\n    }\r\n    .bargach-slide .slide-subtext {\r\n      font-size: 13px;\r\n    }\r\n    .hero-particles i:nth-child(n+8) { display: none; }\r\n    .bargach-slider-wrap { padding: 6px; }\r\n    .bargach-slider-wrap .corner { width: 16px; height: 16px; }\r\n    .bargach-slider-wrap .inner-border { inset: 8px; border-width: 1px; }\r\n    .bargach-slider-wrap .inner-dot { display: none; }\r\n    .bargach-slider-wrap::before,\r\n    .bargach-slider-wrap::after { height: 4px; background-size: 12px 4px; }\r\n    .bargach-slider-wrap::before { top: 4px; }\r\n    .bargach-slider-wrap::after { bottom: 4px; }\r\n  }\r\n\r\n  @media (max-height: 860px) and (min-width: 601px) {\r\n    .bargach-slide .slide-headline-sparkle,\r\n    .bargach-slide .slide-headline-wave {\r\n      font-size: clamp(30px, 5.2vw, 60px);\r\n      margin-bottom: 18px;\r\n    }\r\n    .bargach-slide .slide-eyebrow { margin-bottom: 14px; }\r\n    .bargach-slide .slide-subtext {\r\n      margin-bottom: 24px;\r\n      font-size: 14px;\r\n      line-height: 1.6;\r\n    }\r\n    .bargach-slide .slide-location { margin-top: 22px; }\r\n    .bargach-slide .slide-scroll { display: none; }\r\n    .bargach-slide .slide-stage {\r\n      padding-top: clamp(70px, 9vh, 110px);\r\n      padding-bottom: clamp(100px, 14vh, 140px);\r\n    }\r\n  }\r\n  @media (max-height: 700px) and (min-width: 601px) {\r\n    .bargach-slide .slide-headline-sparkle,\r\n    .bargach-slide .slide-headline-wave {\r\n      font-size: clamp(26px, 4.6vw, 44px);\r\n    }\r\n    .bargach-slide .slide-subtext { font-size: 13px; }\r\n    .bargach-slide .slide-subtext br + br { display: none; }\r\n  }\r\n\r\n  @media (max-width: 600px) {\r\n    .bargach-slide .slide-stage {\r\n      padding-top: 100px;\r\n      padding-bottom: 110px;\r\n    }\r\n    .bargach-slide .slide-headline-sparkle,\r\n    .bargach-slide .slide-headline-wave {\r\n      font-size: clamp(24px, 8vw, 34px);\r\n    }\r\n    .bargach-slide .slide-headline-sparkle .word:nth-of-type(2) { padding: 0 0.5rem; }\r\n    .bargach-slide .slide-actions { flex-direction: column; align-items: stretch; }\r\n    .bargach-slide .slide-btn { justify-content: center; padding: 14px 20px; }\r\n    .bargach-slide .slide-scroll { display: none; }\r\n    .bargach-slide .slide-bg { background-position: center 20%; }\r\n    .bargach-slide .slide-subtext { font-size: 13px; }\r\n    .bargach-slide .superscript::after { --size: clamp(2rem, 5vw, 3.5rem); top: -10%; left: -50%; }\r\n    .bargach-slide .superscript::before { top: 25%; left: 35%; width: 25%; height: 50%; }\r\n    .bargach-slide .slide-location {\r\n      font-size: 9px;\r\n      flex-wrap: wrap;\r\n      gap: 3px;\r\n    }\r\n    .bargach-slide .slide-location .loc-dot {\r\n      width: 3px;\r\n      height: 3px;\r\n      margin: 0 2px;\r\n    }\r\n    @keyframes waveSlide {\r\n      0%, 100% { transform: translateY(0); }\r\n      50% { transform: translateY(-6px); }\r\n    }\r\n    .bargach-slider-controls { bottom: 24px; gap: 10px; }\r\n    .bargach-slider-controls .dot { width: 10px; height: 10px; }\r\n    .bargach-slider-controls .dot.active { width: 30px; }\r\n    .hero-particles i:nth-child(n+6) { display: none; }\r\n    .bargach-slider-wrap { padding: 4px; }\r\n    .bargach-slider-wrap .corner { display: none; }\r\n    .bargach-slider-wrap .inner-border { inset: 6px; border-width: 0.5px; }\r\n  }\r\n  @media (max-width: 400px) {\r\n    .bargach-slide .slide-headline-sparkle,\r\n    .bargach-slide .slide-headline-wave {\r\n      font-size: clamp(20px, 9vw, 28px);\r\n    }\r\n    .bargach-slide .slide-btn { font-size: 12px; padding: 12px 16px; }\r\n    .bargach-slide .superscript::after { --size: 2.2rem; top: -5%; left: -40%; }\r\n    .bargach-slide .slide-location {\r\n      font-size: 8px;\r\n      gap: 2px;\r\n    }\r\n    .bargach-slide .slide-subtext {\r\n      font-size: 12px;\r\n    }\r\n  }\r\n\r\n  \/* reduced motion *\/\r\n  @media (prefers-reduced-motion: reduce) {\r\n    .bargach-slide * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }\r\n    .hero-particles { display: none !important; }\r\n    .bargach-slide .slide-bg { animation: none !important; transform: scale(1.03) !important; }\r\n    .bargach-slide .slide-scroll-line::after { animation: none !important; }\r\n    .bargach-slide .slide-headline-sparkle .word { opacity: 1 !important; transform: none !important; animation: none !important; }\r\n    .bargach-slide .slide-headline-sparkle .word:nth-of-type(2) { background-position: 0% 0 !important; }\r\n    .bargach-slide .superscript::before { transform: scaleY(1) !important; animation: none !important; }\r\n    .bargach-slide .superscript::after { transform: scale(0) !important; animation: none !important; }\r\n    .bargach-slide .slide-headline-sparkle .word:last-of-type .shimmer-target { text-shadow: none !important; animation: none !important; }\r\n    .bargach-slide .slide-headline-wave .word { opacity: 1 !important; transform: none !important; animation: none !important; }\r\n    .bargach-slide .wave-text span { animation: none !important; transform: none !important; }\r\n    .bargach-slide .slide-eyebrow, .bargach-slide .slide-subtext,\r\n    .bargach-slide .slide-actions, .bargach-slide .slide-location,\r\n    .bargach-slide .slide-scroll {\r\n      opacity: 1 !important; transform: none !important; animation: none !important;\r\n    }\r\n    .bargach-slider-controls .dot.active::after { animation: none !important; transform: scaleX(1) !important; }\r\n    .bargach-slides { transition: none !important; }\r\n  }\r\n<\/style>\r\n\r\n<!-- ============================================================\r\n     SLIDER HTML WITH DECORATIVE BORDER\r\n     ============================================================ -->\r\n<div class=\"bargach-slider\" aria-label=\"Bargach Foundation slider\">\r\n  <div class=\"bargach-slider-wrap\">\r\n\r\n    <!-- Decorative border elements -->\r\n    <span class=\"corner corner-tl\"><\/span>\r\n    <span class=\"corner corner-tr\"><\/span>\r\n    <span class=\"corner corner-bl\"><\/span>\r\n    <span class=\"corner corner-br\"><\/span>\r\n    <span class=\"inner-border\"><\/span>\r\n    <span class=\"inner-dot inner-dot-tl\"><\/span>\r\n    <span class=\"inner-dot inner-dot-tr\"><\/span>\r\n    <span class=\"inner-dot inner-dot-bl\"><\/span>\r\n    <span class=\"inner-dot inner-dot-br\"><\/span>\r\n\r\n    <div class=\"bargach-slides\" id=\"bargachSlides\">\r\n\r\n      <!-- ===== SLIDE 1 ===== -->\r\n      <div class=\"bargach-slide active\" data-index=\"0\">\r\n        <div class=\"slide-bg\" style=\"background-image: url('https:\/\/up.freshosoft.work\/bargach\/wp-content\/uploads\/2026\/08\/banner.jpg.jpeg');\" aria-hidden=\"true\"><\/div>\r\n        <div class=\"slide-vignette\" aria-hidden=\"true\"><\/div>\r\n        <div class=\"slide-glow\" aria-hidden=\"true\"><\/div>\r\n\r\n        <div class=\"slide-stage\">\r\n          <div class=\"slide-copy\">\r\n            <div class=\"slide-eyebrow\">Est. 2020 \u00b7 WB \/ MP \/ Odisha<\/div>\r\n\r\n            <h1 class=\"slide-headline-sparkle\">\r\n              <span class=\"word\">Every drop<\/span>\r\n              <span class=\"word\">finds its way<\/span>\r\n              <span class=\"word\">to <em class=\"shimmer-target\">someone<\/em><span class=\"superscript\"><\/span><\/span>\r\n            <\/h1>\r\n\r\n            <p class=\"slide-subtext delay-1\">Education, digital skills, livelihoods and safe drinking water for rural &amp; semi-urban communities \u2014 village by village, alongside government initiatives.<\/p>\r\n\r\n            <div class=\"slide-actions delay-1\">\r\n              <a href=\"#donate\" class=\"slide-btn slide-btn-primary\">\r\n                Donate Now <span class=\"slide-btn-arrow\" aria-hidden=\"true\">\u2192<\/span>\r\n              <\/a>\r\n              <a href=\"#programs\" class=\"slide-btn slide-btn-secondary\">\r\n                Our Programs <span class=\"slide-btn-arrow\" aria-hidden=\"true\">\u2192<\/span>\r\n              <\/a>\r\n            <\/div>\r\n\r\n            <div class=\"slide-location delay-1\">\r\n              <span class=\"loc-icon\">\u25ce<\/span>\r\n              <span class=\"loc-item\">West Bengal<\/span>\r\n              <span class=\"loc-dot\"><\/span>\r\n              <span class=\"loc-item\">Madhya Pradesh<\/span>\r\n              <span class=\"loc-dot\"><\/span>\r\n              <span class=\"loc-item\">Odisha<\/span>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"slide-scroll delay-1\" aria-hidden=\"true\">\r\n          <span class=\"slide-scroll-text\">Scroll to explore<\/span>\r\n          <span class=\"slide-scroll-line\"><\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- ===== SLIDE 2 ===== -->\r\n      <div class=\"bargach-slide\" data-index=\"1\">\r\n        <div class=\"slide-bg\" style=\"background-image: url('https:\/\/up.freshosoft.work\/bargach\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2026-03-26-at-4.00.55-PM.jpeg');\" aria-hidden=\"true\"><\/div>\r\n        <div class=\"slide-vignette\" aria-hidden=\"true\"><\/div>\r\n        <div class=\"slide-glow\" aria-hidden=\"true\"><\/div>\r\n\r\n        <div class=\"slide-stage\">\r\n          <div class=\"slide-copy\">\r\n            <div class=\"slide-eyebrow\">Community IT Centres \u00b7 WASH Project<\/div>\r\n\r\n            <h1 class=\"slide-headline-wave\">\r\n              <span class=\"word\">Empowering<\/span>\r\n              <span class=\"word\">communities<\/span>\r\n              <span class=\"word\">\r\n                with&nbsp;\r\n                <span class=\"wave-container\">\r\n                  <span class=\"wave-text\">\r\n                    <span>T<\/span><span>e<\/span><span>c<\/span><span>h<\/span><span>n<\/span><span>o<\/span><span>l<\/span><span>o<\/span><span>g<\/span><span>y<\/span>\r\n                  <\/span>\r\n                <\/span>\r\n              <\/span>\r\n            <\/h1>\r\n\r\n            <p class=\"slide-subtext delay-2\">\r\n              <strong>30+ Community IT Centres<\/strong> across 13 districts of West Bengal, reaching over 20,000 beneficiaries. \r\n              Digital literacy, job skills &amp; technology access for marginalised communities.\r\n              <br><br>\r\n              <strong>Safe Drinking Water WASH Project<\/strong> \u2014 33 taps installed in Dokra village (400+ villagers) &amp; \r\n              3 water purifiers in Patachitra Gram (500+ villagers) removing iron &amp; arsenic.\r\n            <\/p>\r\n\r\n            <div class=\"slide-actions delay-2\">\r\n              <a href=\"#donate\" class=\"slide-btn slide-btn-primary\">\r\n                Donate Now <span class=\"slide-btn-arrow\" aria-hidden=\"true\">\u2192<\/span>\r\n              <\/a>\r\n              <a href=\"#programs\" class=\"slide-btn slide-btn-secondary\">\r\n                Our Programs <span class=\"slide-btn-arrow\" aria-hidden=\"true\">\u2192<\/span>\r\n              <\/a>\r\n            <\/div>\r\n\r\n            <div class=\"slide-location delay-2\">\r\n              <span class=\"loc-icon\">\u25ce<\/span>\r\n              <span class=\"loc-item\">West Bengal<\/span>\r\n              <span class=\"loc-dot\"><\/span>\r\n              <span class=\"loc-item\">Madhya Pradesh<\/span>\r\n              <span class=\"loc-dot\"><\/span>\r\n              <span class=\"loc-item\">Odisha<\/span>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"slide-scroll delay-2\" aria-hidden=\"true\">\r\n          <span class=\"slide-scroll-text\">Scroll to explore<\/span>\r\n          <span class=\"slide-scroll-line\"><\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div><!-- \/bargach-slides -->\r\n\r\n    <!-- floating particles -->\r\n    <div class=\"hero-particles\" aria-hidden=\"true\">\r\n      <i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i>\r\n      <i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i>\r\n    <\/div>\r\n\r\n    <!-- Slider Controls -->\r\n    <div class=\"bargach-slider-controls\" aria-hidden=\"true\">\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    <\/div>\r\n\r\n  <\/div><!-- \/bargach-slider-wrap -->\r\n<\/div>\r\n\r\n<!-- ============================================================\r\n     SLIDER SCRIPT\r\n     ============================================================ -->\r\n<script>\r\n  (function() {\r\n    var slider = document.querySelector('.bargach-slider');\r\n    if (!slider) return;\r\n    var slidesContainer = document.getElementById('bargachSlides');\r\n    if (!slidesContainer) return;\r\n    var slides = slidesContainer.querySelectorAll('.bargach-slide');\r\n    var dots = slider.querySelectorAll('.dot');\r\n    var totalSlides = slides.length;\r\n    var currentIndex = 0;\r\n    var isAnimating = false;\r\n    var autoplayInterval = null;\r\n    var autoplayDelay = 6000;\r\n\r\n    slider.style.setProperty('--adur', autoplayDelay + 'ms');\r\n\r\n    function goToSlide(index) {\r\n      if (isAnimating || index === currentIndex) return;\r\n      if (index < 0) index = totalSlides - 1;\r\n      if (index >= totalSlides) index = 0;\r\n\r\n      isAnimating = true;\r\n      slidesContainer.style.transform = 'translateX(-' + (index * 100) + '%)';\r\n\r\n      slides.forEach(function(slide, i) {\r\n        slide.classList.toggle('active', i === index);\r\n      });\r\n\r\n      dots.forEach(function(dot, i) {\r\n        dot.classList.remove('active');\r\n        if (i === index) {\r\n          void dot.offsetWidth;\r\n          dot.classList.add('active');\r\n        }\r\n      });\r\n\r\n      currentIndex = index;\r\n\r\n      setTimeout(function() {\r\n        isAnimating = false;\r\n      }, 1050);\r\n    }\r\n\r\n    dots.forEach(function(dot) {\r\n      dot.addEventListener('click', function() {\r\n        var index = parseInt(this.getAttribute('data-index'));\r\n        goToSlide(index);\r\n        resetAutoplay();\r\n      });\r\n    });\r\n\r\n    slider.addEventListener('keydown', function(e) {\r\n      if (e.key === 'ArrowLeft') {\r\n        e.preventDefault();\r\n        goToSlide(currentIndex - 1);\r\n        resetAutoplay();\r\n      } else if (e.key === 'ArrowRight') {\r\n        e.preventDefault();\r\n        goToSlide(currentIndex + 1);\r\n        resetAutoplay();\r\n      }\r\n    });\r\n\r\n    var touchStartX = 0;\r\n    var touchEndX = 0;\r\n\r\n    slider.addEventListener('touchstart', function(e) {\r\n      touchStartX = e.changedTouches[0].screenX;\r\n    }, { passive: true });\r\n\r\n    slider.addEventListener('touchend', function(e) {\r\n      touchEndX = e.changedTouches[0].screenX;\r\n      var diff = touchStartX - touchEndX;\r\n      if (Math.abs(diff) > 50) {\r\n        if (diff > 0) {\r\n          goToSlide(currentIndex + 1);\r\n        } else {\r\n          goToSlide(currentIndex - 1);\r\n        }\r\n        resetAutoplay();\r\n      }\r\n    }, { passive: true });\r\n\r\n    function startAutoplay() {\r\n      if (autoplayInterval) clearInterval(autoplayInterval);\r\n      autoplayInterval = setInterval(function() {\r\n        goToSlide(currentIndex + 1);\r\n      }, autoplayDelay);\r\n    }\r\n\r\n    function resetAutoplay() {\r\n      if (autoplayInterval) {\r\n        clearInterval(autoplayInterval);\r\n        startAutoplay();\r\n      }\r\n    }\r\n\r\n    startAutoplay();\r\n\r\n    slider.addEventListener('mouseenter', function() {\r\n      if (autoplayInterval) {\r\n        clearInterval(autoplayInterval);\r\n        autoplayInterval = null;\r\n      }\r\n      slider.classList.add('is-paused');\r\n    });\r\n\r\n    slider.addEventListener('mouseleave', function() {\r\n      slider.classList.remove('is-paused');\r\n      startAutoplay();\r\n    });\r\n\r\n    var isDesktop = window.matchMedia('(min-width: 901px)').matches;\r\n    var prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n    if (isDesktop && !prefersReduced) {\r\n      var mx = 0, my = 0, ticking = false;\r\n\r\n      slider.addEventListener('mousemove', function(e) {\r\n        var rect = slider.getBoundingClientRect();\r\n        mx = ((e.clientX - rect.left) \/ rect.width) - 0.5;\r\n        my = ((e.clientY - rect.top) \/ rect.height) - 0.5;\r\n        if (!ticking) {\r\n          window.requestAnimationFrame(function() {\r\n            var s = slides[currentIndex];\r\n            if (s) {\r\n              var copy = s.querySelector('.slide-copy');\r\n              var glow = s.querySelector('.slide-glow');\r\n              if (copy) copy.style.transform = 'translate3d(' + (mx * 10) + 'px,' + (my * 6) + 'px,0)';\r\n              if (glow) glow.style.transform = 'translate3d(' + (mx * -26) + 'px,' + (my * -16) + 'px,0)';\r\n            }\r\n            ticking = false;\r\n          });\r\n          ticking = true;\r\n        }\r\n      });\r\n\r\n      slider.addEventListener('mouseleave', function() {\r\n        slides.forEach(function(s) {\r\n          var copy = s.querySelector('.slide-copy');\r\n          var glow = s.querySelector('.slide-glow');\r\n          if (copy) copy.style.transform = 'translate3d(0,0,0)';\r\n          if (glow) glow.style.transform = 'translate3d(0,0,0)';\r\n        });\r\n      });\r\n    }\r\n\r\n    window.bargachSlider = {\r\n      goTo: goToSlide,\r\n      next: function() { goToSlide(currentIndex + 1); },\r\n      prev: function() { goToSlide(currentIndex - 1); },\r\n      current: function() { return currentIndex; }\r\n    };\r\n\r\n  })();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-0f2226c elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"0f2226c\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-9d484fa\" data-id=\"9d484fa\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-fd42bd3 elementor-widget elementor-widget-html\" data-id=\"fd42bd3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     BARGACH \u00b7 ABOUT US \u2013 UNIQUE ANIMATED IMPACT DESIGN\r\n     Left: Image Slider (2 images) with animated border\r\n     Right: Content with animated icons, glow badge,\r\n           FULLY ANIMATED IMPACT NUMBERS with unique style\r\n     Light, modern, super unique.\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-about-unique {\r\n    --b-ink: #07211d;\r\n    --b-teal: #0f4a42;\r\n    --b-teal-2: #166358;\r\n    --b-mint: #eef6f2;\r\n    --b-gold: #f3b13c;\r\n    --b-gold-2: #ffcf7a;\r\n    --b-text-dark: #12241f;\r\n    --b-text-body: #33453f;\r\n    --b-text-muted: #6a8a7e;\r\n    --b-shadow: 0 20px 60px rgba(7,33,29,0.10);\r\n\r\n    position: relative;\r\n    width: 100%;\r\n    min-height: 100vh;\r\n    overflow: hidden;\r\n    background: var(--b-mint);\r\n    color: var(--b-text-dark);\r\n    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\r\n    display: flex;\r\n    align-items: center;\r\n    isolation: isolate;\r\n    box-sizing: border-box;\r\n    padding: 0;\r\n    margin: 0;\r\n  }\r\n  .bargach-about-unique * { box-sizing: border-box; }\r\n\r\n  \/* ---------- background texture ---------- *\/\r\n  .bargach-about-unique .about-bg-texture {\r\n    position: absolute;\r\n    inset: 0;\r\n    z-index: 0;\r\n    background:\r\n      radial-gradient(ellipse at 20% 50%, rgba(243,177,60,0.06) 0%, transparent 60%),\r\n      radial-gradient(ellipse at 80% 20%, rgba(15,74,66,0.04) 0%, transparent 50%),\r\n      radial-gradient(ellipse at 50% 80%, rgba(22,99,88,0.03) 0%, transparent 40%);\r\n    pointer-events: none;\r\n  }\r\n\r\n  \/* ---------- Container ---------- *\/\r\n  .bargach-about-unique .about-container {\r\n    position: relative;\r\n    z-index: 5;\r\n    width: 100%;\r\n    max-width: 1440px;\r\n    margin: 0 auto;\r\n    padding: clamp(50px, 6vw, 90px) clamp(24px, 5vw, 60px);\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    gap: clamp(40px, 5vw, 80px);\r\n    align-items: center;\r\n  }\r\n\r\n  \/* ========== LEFT: IMAGE SLIDER WITH ANIMATED BORDER ========== *\/\r\n  .bargach-about-unique .about-image-wrapper {\r\n    position: relative;\r\n    max-width: 580px;\r\n    border-radius: 24px;\r\n    padding: 10px;\r\n    background: linear-gradient(135deg, var(--b-gold), var(--b-teal-2), var(--b-gold), var(--b-teal), var(--b-gold));\r\n    background-size: 400% 400%;\r\n    animation: borderGlowUnique 6s ease-in-out infinite;\r\n    box-shadow: var(--b-shadow);\r\n    opacity: 0;\r\n    transform: translateX(-20px);\r\n    animation: slideInLeftUnique 0.8s cubic-bezier(.22,.68,.2,1) 0.2s forwards;\r\n  }\r\n  @keyframes borderGlowUnique {\r\n    0% { background-position: 0% 50%; }\r\n    25% { background-position: 100% 0%; }\r\n    50% { background-position: 100% 100%; }\r\n    75% { background-position: 0% 100%; }\r\n    100% { background-position: 0% 50%; }\r\n  }\r\n\r\n  .bargach-about-unique .about-image-wrapper .image-inner {\r\n    width: 100%;\r\n    height: 100%;\r\n    border-radius: 16px;\r\n    overflow: hidden;\r\n    position: relative;\r\n    background: var(--b-mint);\r\n    aspect-ratio: 3\/4;\r\n  }\r\n\r\n  .bargach-about-unique .image-slider {\r\n    width: 100%;\r\n    height: 100%;\r\n    position: relative;\r\n    overflow: hidden;\r\n    border-radius: 16px;\r\n  }\r\n  .bargach-about-unique .image-slider .slide {\r\n    position: absolute;\r\n    inset: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    opacity: 0;\r\n    transition: opacity 0.8s ease-in-out;\r\n    border-radius: 16px;\r\n  }\r\n  .bargach-about-unique .image-slider .slide.active {\r\n    opacity: 1;\r\n  }\r\n  .bargach-about-unique .image-slider .slide img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n    display: block;\r\n    border-radius: 16px;\r\n    transition: transform 0.6s cubic-bezier(.22,.68,.2,1);\r\n  }\r\n  .bargach-about-unique .about-image-wrapper:hover .slide.active img {\r\n    transform: scale(1.04);\r\n  }\r\n\r\n  \/* slider dots *\/\r\n  .bargach-about-unique .slider-dots {\r\n    position: absolute;\r\n    bottom: 16px;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    z-index: 10;\r\n    display: flex;\r\n    gap: 10px;\r\n  }\r\n  .bargach-about-unique .slider-dots .dot {\r\n    width: 10px;\r\n    height: 10px;\r\n    border-radius: 50%;\r\n    background: rgba(255,255,255,0.35);\r\n    border: 2px solid rgba(255,255,255,0.5);\r\n    cursor: pointer;\r\n    transition: all 0.3s ease;\r\n    padding: 0;\r\n  }\r\n  .bargach-about-unique .slider-dots .dot.active {\r\n    background: var(--b-gold);\r\n    border-color: var(--b-gold);\r\n    transform: scale(1.2);\r\n    box-shadow: 0 0 20px rgba(243,177,60,0.4);\r\n  }\r\n  .bargach-about-unique .slider-dots .dot:hover {\r\n    background: rgba(255,255,255,0.7);\r\n  }\r\n  .bargach-about-unique .slider-dots .dot.active:hover {\r\n    background: var(--b-gold);\r\n  }\r\n\r\n  \/* floating badge on image *\/\r\n  .bargach-about-unique .about-image-badge {\r\n    position: absolute;\r\n    bottom: 60px;\r\n    right: -12px;\r\n    padding: 12px 20px;\r\n    border-radius: 14px;\r\n    font-size: clamp(12px, 1vw, 14px);\r\n    font-weight: 500;\r\n    box-shadow: 0 8px 30px rgba(7,33,29,0.20);\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    backdrop-filter: blur(4px);\r\n    -webkit-backdrop-filter: blur(4px);\r\n    background: rgba(22,99,88,0.92);\r\n    border: 1px solid rgba(255,255,255,0.10);\r\n    color: #fff;\r\n    z-index: 5;\r\n    animation: badgeGlowUnique 3s ease-in-out infinite;\r\n  }\r\n  @keyframes badgeGlowUnique {\r\n    0%, 100% { box-shadow: 0 0 20px rgba(243,177,60,0.2), 0 8px 30px rgba(7,33,29,0.20); }\r\n    50% { box-shadow: 0 0 50px rgba(243,177,60,0.4), 0 8px 30px rgba(7,33,29,0.25); }\r\n  }\r\n  .bargach-about-unique .about-image-badge .badge-num {\r\n    font-family: 'Fraunces', Georgia, serif;\r\n    font-size: clamp(22px, 2vw, 32px);\r\n    font-weight: 560;\r\n    color: var(--b-gold-2);\r\n    line-height: 1;\r\n  }\r\n\r\n  \/* ========== RIGHT: CONTENT ========== *\/\r\n  .bargach-about-unique .about-content {\r\n    max-width: 640px;\r\n  }\r\n\r\n  .bargach-about-unique .about-tag {\r\n    font-size: clamp(10px, 1vw, 12px);\r\n    letter-spacing: 0.22em;\r\n    text-transform: uppercase;\r\n    font-weight: 600;\r\n    color: var(--b-teal);\r\n    margin: 0 0 12px;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    opacity: 0;\r\n    transform: translateY(14px);\r\n    animation: riseUnique 0.7s cubic-bezier(.22,.68,.2,1) 0.3s forwards;\r\n  }\r\n  .bargach-about-unique .about-tag::before {\r\n    content: \"\";\r\n    width: 30px;\r\n    height: 2px;\r\n    background: var(--b-gold);\r\n    display: inline-block;\r\n  }\r\n\r\n  .bargach-about-unique .about-heading {\r\n    font-family: 'Fraunces', Georgia, 'Times New Roman', serif;\r\n    font-weight: 380;\r\n    font-size: clamp(34px, 5vw, 60px);\r\n    line-height: 1.05;\r\n    letter-spacing: -0.01em;\r\n    margin: 0 0 20px;\r\n    color: var(--b-ink);\r\n    opacity: 0;\r\n    transform: translateY(14px);\r\n    animation: riseUnique 0.8s cubic-bezier(.22,.68,.2,1) 0.45s forwards;\r\n  }\r\n  .bargach-about-unique .about-heading em {\r\n    font-style: italic;\r\n    color: var(--b-teal-2);\r\n  }\r\n\r\n  .bargach-about-unique .about-text {\r\n    font-weight: 300;\r\n    font-size: clamp(15px, 1.2vw, 17px);\r\n    line-height: 1.75;\r\n    color: var(--b-text-body);\r\n    margin: 0 0 28px;\r\n    opacity: 0;\r\n    transform: translateY(14px);\r\n    animation: riseUnique 0.7s cubic-bezier(.22,.68,.2,1) 0.6s forwards;\r\n  }\r\n  .bargach-about-unique .about-text strong {\r\n    color: var(--b-teal-2);\r\n    font-weight: 500;\r\n  }\r\n\r\n  \/* ---------- Pillars with ANIMATED ICONS ---------- *\/\r\n  .bargach-about-unique .about-pillars {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    gap: 10px 16px;\r\n    margin: 0 0 28px;\r\n    opacity: 0;\r\n    transform: translateY(14px);\r\n    animation: riseUnique 0.7s cubic-bezier(.22,.68,.2,1) 0.75s forwards;\r\n  }\r\n  .bargach-about-unique .about-pillar {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    font-size: clamp(12px, 0.95vw, 14px);\r\n    font-weight: 400;\r\n    color: var(--b-text-body);\r\n    padding: 6px 14px 6px 10px;\r\n    background: rgba(255,255,255,0.60);\r\n    border-radius: 999px;\r\n    border: 1px solid rgba(15,74,66,0.08);\r\n    transition: all 0.3s ease;\r\n  }\r\n  .bargach-about-unique .about-pillar:hover {\r\n    transform: translateY(-2px) scale(1.02);\r\n    box-shadow: 0 8px 20px rgba(7,33,29,0.08);\r\n    border-color: var(--b-gold);\r\n  }\r\n  .bargach-about-unique .about-pillar .pillar-icon {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: 28px;\r\n    height: 28px;\r\n    border-radius: 50%;\r\n    background: rgba(243,177,60,0.12);\r\n    color: var(--b-gold);\r\n    font-size: 14px;\r\n    flex-shrink: 0;\r\n    animation: iconBounceUnique 2s ease-in-out infinite;\r\n  }\r\n  .bargach-about-unique .about-pillar:nth-child(1) .pillar-icon { animation-delay: 0s; }\r\n  .bargach-about-unique .about-pillar:nth-child(2) .pillar-icon { animation-delay: 0.4s; }\r\n  .bargach-about-unique .about-pillar:nth-child(3) .pillar-icon { animation-delay: 0.8s; }\r\n  .bargach-about-unique .about-pillar:nth-child(4) .pillar-icon { animation-delay: 1.2s; }\r\n\r\n  @keyframes iconBounceUnique {\r\n    0%, 100% { transform: scale(1) rotate(0deg); }\r\n    20% { transform: scale(1.2) rotate(-8deg); }\r\n    40% { transform: scale(0.9) rotate(4deg); }\r\n    60% { transform: scale(1.1) rotate(-4deg); }\r\n    80% { transform: scale(0.95) rotate(2deg); }\r\n  }\r\n\r\n  \/* ---------- Badge with GLOW EFFECT ---------- *\/\r\n  .bargach-about-unique .about-badge {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 12px;\r\n    padding: 10px 20px;\r\n    border-radius: 999px;\r\n    border: 1px solid rgba(15,74,66,0.12);\r\n    background: rgba(255,255,255,0.70);\r\n    backdrop-filter: blur(4px);\r\n    -webkit-backdrop-filter: blur(4px);\r\n    font-size: clamp(11px, 0.9vw, 13px);\r\n    color: var(--b-teal);\r\n    opacity: 0;\r\n    transform: translateY(14px);\r\n    animation: riseUnique 0.7s cubic-bezier(.22,.68,.2,1) 0.9s forwards;\r\n    animation: badgePulseUnique 3s ease-in-out infinite;\r\n  }\r\n  @keyframes badgePulseUnique {\r\n    0%, 100% { box-shadow: 0 0 20px rgba(243,177,60,0.1); }\r\n    50% { box-shadow: 0 0 50px rgba(243,177,60,0.25), 0 0 80px rgba(243,177,60,0.08); }\r\n  }\r\n  .bargach-about-unique .about-badge .badge-num {\r\n    font-family: 'Fraunces', Georgia, serif;\r\n    font-size: clamp(18px, 1.6vw, 24px);\r\n    font-weight: 560;\r\n    color: var(--b-gold);\r\n    line-height: 1;\r\n  }\r\n\r\n  \/* ========== IMPACT NUMBERS \u2013 UNIQUE DESIGN ========== *\/\r\n  .bargach-about-unique .impact-section {\r\n    margin-top: 30px;\r\n    padding-top: 28px;\r\n    border-top: 2px solid rgba(243,177,60,0.15);\r\n    opacity: 0;\r\n    transform: translateY(14px);\r\n    animation: riseUnique 0.7s cubic-bezier(.22,.68,.2,1) 1.0s forwards;\r\n  }\r\n\r\n  .bargach-about-unique .impact-label {\r\n    font-size: clamp(10px, 0.9vw, 11px);\r\n    letter-spacing: 0.18em;\r\n    text-transform: uppercase;\r\n    color: var(--b-text-muted);\r\n    margin: 0 0 16px;\r\n    font-weight: 500;\r\n    position: relative;\r\n    display: inline-block;\r\n  }\r\n  .bargach-about-unique .impact-label::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    bottom: -4px;\r\n    left: 0;\r\n    width: 0;\r\n    height: 2px;\r\n    background: var(--b-gold);\r\n    animation: labelLine 1s cubic-bezier(.22,.68,.2,1) 1.5s forwards;\r\n  }\r\n  @keyframes labelLine {\r\n    to { width: 100%; }\r\n  }\r\n\r\n  .bargach-about-unique .impact-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(3, 1fr);\r\n    gap: 14px 20px;\r\n  }\r\n\r\n  \/* Unique Impact Card *\/\r\n  .bargach-about-unique .impact-item {\r\n    background: rgba(255,255,255,0.50);\r\n    backdrop-filter: blur(4px);\r\n    -webkit-backdrop-filter: blur(4px);\r\n    padding: 16px 14px 14px;\r\n    border-radius: 16px;\r\n    border: 1px solid rgba(15,74,66,0.06);\r\n    text-align: center;\r\n    transition: all 0.4s cubic-bezier(.22,.68,.2,1);\r\n    opacity: 0;\r\n    transform: translateY(20px) scale(0.95);\r\n    animation: impactCardIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;\r\n    position: relative;\r\n    overflow: hidden;\r\n  }\r\n  .bargach-about-unique .impact-item::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    background: linear-gradient(135deg, rgba(243,177,60,0.05), rgba(15,74,66,0.03));\r\n    opacity: 0;\r\n    transition: opacity 0.4s ease;\r\n    border-radius: 16px;\r\n    pointer-events: none;\r\n  }\r\n  .bargach-about-unique .impact-item:hover::before {\r\n    opacity: 1;\r\n  }\r\n  .bargach-about-unique .impact-item:hover {\r\n    transform: translateY(-4px) scale(1.02);\r\n    box-shadow: 0 12px 40px rgba(7,33,29,0.10);\r\n    border-color: rgba(243,177,60,0.20);\r\n  }\r\n\r\n  .bargach-about-unique .impact-item:nth-child(1) { animation-delay: 1.1s; }\r\n  .bargach-about-unique .impact-item:nth-child(2) { animation-delay: 1.2s; }\r\n  .bargach-about-unique .impact-item:nth-child(3) { animation-delay: 1.3s; }\r\n  .bargach-about-unique .impact-item:nth-child(4) { animation-delay: 1.4s; }\r\n  .bargach-about-unique .impact-item:nth-child(5) { animation-delay: 1.5s; }\r\n  .bargach-about-unique .impact-item:nth-child(6) { animation-delay: 1.6s; }\r\n\r\n  @keyframes impactCardIn {\r\n    from { opacity: 0; transform: translateY(20px) scale(0.95); }\r\n    to { opacity: 1; transform: translateY(0) scale(1); }\r\n  }\r\n\r\n  .bargach-about-unique .impact-item .impact-number {\r\n    font-family: 'Fraunces', Georgia, serif;\r\n    font-weight: 560;\r\n    font-size: clamp(26px, 2.8vw, 42px);\r\n    line-height: 1;\r\n    color: var(--b-teal-2);\r\n    display: block;\r\n    margin-bottom: 4px;\r\n    animation: numberPopUnique 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;\r\n    opacity: 0;\r\n    transform: scale(0.3) rotate(-10deg);\r\n  }\r\n  .bargach-about-unique .impact-item:nth-child(1) .impact-number { animation-delay: 1.2s; }\r\n  .bargach-about-unique .impact-item:nth-child(2) .impact-number { animation-delay: 1.3s; }\r\n  .bargach-about-unique .impact-item:nth-child(3) .impact-number { animation-delay: 1.4s; }\r\n  .bargach-about-unique .impact-item:nth-child(4) .impact-number { animation-delay: 1.5s; }\r\n  .bargach-about-unique .impact-item:nth-child(5) .impact-number { animation-delay: 1.6s; }\r\n  .bargach-about-unique .impact-item:nth-child(6) .impact-number { animation-delay: 1.7s; }\r\n\r\n  @keyframes numberPopUnique {\r\n    from { opacity: 0; transform: scale(0.3) rotate(-10deg); }\r\n    to { opacity: 1; transform: scale(1) rotate(0deg); }\r\n  }\r\n\r\n  .bargach-about-unique .impact-item .impact-label-text {\r\n    font-size: clamp(10px, 0.8vw, 12px);\r\n    color: var(--b-text-muted);\r\n    font-weight: 400;\r\n    letter-spacing: 0.02em;\r\n    opacity: 0;\r\n    animation: riseUnique 0.4s cubic-bezier(.22,.68,.2,1) forwards;\r\n  }\r\n  .bargach-about-unique .impact-item:nth-child(1) .impact-label-text { animation-delay: 1.3s; }\r\n  .bargach-about-unique .impact-item:nth-child(2) .impact-label-text { animation-delay: 1.4s; }\r\n  .bargach-about-unique .impact-item:nth-child(3) .impact-label-text { animation-delay: 1.5s; }\r\n  .bargach-about-unique .impact-item:nth-child(4) .impact-label-text { animation-delay: 1.6s; }\r\n  .bargach-about-unique .impact-item:nth-child(5) .impact-label-text { animation-delay: 1.7s; }\r\n  .bargach-about-unique .impact-item:nth-child(6) .impact-label-text { animation-delay: 1.8s; }\r\n\r\n  \/* small decorative icon on each impact card *\/\r\n  .bargach-about-unique .impact-item .impact-icon {\r\n    display: inline-block;\r\n    font-size: 18px;\r\n    margin-bottom: 6px;\r\n    animation: iconFloat 3s ease-in-out infinite;\r\n  }\r\n  .bargach-about-unique .impact-item:nth-child(1) .impact-icon { animation-delay: 0s; }\r\n  .bargach-about-unique .impact-item:nth-child(2) .impact-icon { animation-delay: 0.5s; }\r\n  .bargach-about-unique .impact-item:nth-child(3) .impact-icon { animation-delay: 1.0s; }\r\n  .bargach-about-unique .impact-item:nth-child(4) .impact-icon { animation-delay: 0.3s; }\r\n  .bargach-about-unique .impact-item:nth-child(5) .impact-icon { animation-delay: 0.8s; }\r\n  .bargach-about-unique .impact-item:nth-child(6) .impact-icon { animation-delay: 1.3s; }\r\n\r\n  @keyframes iconFloat {\r\n    0%, 100% { transform: translateY(0); }\r\n    50% { transform: translateY(-4px); }\r\n  }\r\n\r\n  \/* ========== ANIMATIONS ========== *\/\r\n  @keyframes riseUnique {\r\n    from { opacity: 0; transform: translateY(14px); }\r\n    to { opacity: 1; transform: translateY(0); }\r\n  }\r\n  @keyframes slideInLeftUnique {\r\n    from { opacity: 0; transform: translateX(-30px); }\r\n    to { opacity: 1; transform: translateX(0); }\r\n  }\r\n\r\n  \/* ========== RESPONSIVE ========== *\/\r\n  @media (max-width: 1024px) {\r\n    .bargach-about-unique .about-container {\r\n      grid-template-columns: 1fr;\r\n      gap: 40px;\r\n      padding: clamp(40px, 5vw, 60px) clamp(20px, 4vw, 40px);\r\n    }\r\n    .bargach-about-unique .about-image-wrapper {\r\n      max-width: 100%;\r\n      margin: 0 auto;\r\n    }\r\n    .bargach-about-unique .about-image-wrapper .image-inner {\r\n      aspect-ratio: 4\/3;\r\n    }\r\n    .bargach-about-unique .about-content {\r\n      max-width: 100%;\r\n    }\r\n    .bargach-about-unique .impact-grid {\r\n      grid-template-columns: repeat(3, 1fr);\r\n    }\r\n  }\r\n\r\n  @media (max-width: 768px) {\r\n    .bargach-about-unique .about-heading {\r\n      font-size: clamp(28px, 6vw, 40px);\r\n    }\r\n    .bargach-about-unique .about-pillars {\r\n      gap: 8px 12px;\r\n    }\r\n    .bargach-about-unique .impact-grid {\r\n      grid-template-columns: repeat(2, 1fr);\r\n      gap: 10px 14px;\r\n    }\r\n    .bargach-about-unique .about-image-badge {\r\n      bottom: 50px;\r\n      right: -6px;\r\n      padding: 8px 14px;\r\n    }\r\n    .bargach-about-unique .about-image-badge .badge-num {\r\n      font-size: 20px;\r\n    }\r\n    .bargach-about-unique .about-image-wrapper .image-inner {\r\n      aspect-ratio: 4\/3;\r\n    }\r\n    .bargach-about-unique .impact-item {\r\n      padding: 14px 10px 12px;\r\n    }\r\n    .bargach-about-unique .impact-item .impact-number {\r\n      font-size: clamp(22px, 4vw, 32px);\r\n    }\r\n  }\r\n\r\n  @media (max-width: 480px) {\r\n    .bargach-about-unique .about-container {\r\n      padding: 30px 16px;\r\n      gap: 30px;\r\n    }\r\n    .bargach-about-unique .about-heading {\r\n      font-size: clamp(24px, 7vw, 32px);\r\n    }\r\n    .bargach-about-unique .about-text {\r\n      font-size: 14px;\r\n    }\r\n    .bargach-about-unique .impact-grid {\r\n      grid-template-columns: 1fr 1fr;\r\n      gap: 8px 10px;\r\n    }\r\n    .bargach-about-unique .impact-item .impact-number {\r\n      font-size: clamp(20px, 5vw, 26px);\r\n    }\r\n    .bargach-about-unique .about-image-wrapper .image-inner {\r\n      aspect-ratio: 4\/3;\r\n      min-height: 200px;\r\n    }\r\n    .bargach-about-unique .about-pillar {\r\n      font-size: 11px;\r\n      padding: 4px 10px 4px 6px;\r\n    }\r\n    .bargach-about-unique .about-pillar .pillar-icon {\r\n      width: 22px;\r\n      height: 22px;\r\n      font-size: 11px;\r\n    }\r\n    .bargach-about-unique .about-image-badge {\r\n      bottom: 40px;\r\n      right: -4px;\r\n      padding: 6px 12px;\r\n      font-size: 11px;\r\n      border-radius: 10px;\r\n    }\r\n    .bargach-about-unique .about-image-badge .badge-num {\r\n      font-size: 16px;\r\n    }\r\n    .bargach-about-unique .about-badge {\r\n      font-size: 11px;\r\n      padding: 6px 14px;\r\n    }\r\n    .bargach-about-unique .slider-dots .dot {\r\n      width: 8px;\r\n      height: 8px;\r\n      gap: 6px;\r\n    }\r\n    .bargach-about-unique .impact-item .impact-icon {\r\n      font-size: 14px;\r\n    }\r\n    .bargach-about-unique .impact-item {\r\n      padding: 10px 8px 8px;\r\n    }\r\n  }\r\n\r\n  \/* Reduced Motion *\/\r\n  @media (prefers-reduced-motion: reduce) {\r\n    .bargach-about-unique * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }\r\n    .bargach-about-unique .about-image-wrapper { animation: none !important; opacity: 1 !important; transform: none !important; }\r\n    .bargach-about-unique .about-image-wrapper { background: linear-gradient(135deg, var(--b-gold), var(--b-teal-2)); }\r\n    .bargach-about-unique .about-pillar .pillar-icon { animation: none !important; }\r\n    .bargach-about-unique .about-badge { animation: none !important; }\r\n    .bargach-about-unique .about-image-badge { animation: none !important; }\r\n    .bargach-about-unique .impact-item { opacity: 1 !important; transform: none !important; animation: none !important; }\r\n    .bargach-about-unique .impact-item .impact-number { opacity: 1 !important; transform: scale(1) !important; animation: none !important; }\r\n    .bargach-about-unique .impact-item .impact-label-text { opacity: 1 !important; animation: none !important; }\r\n    .bargach-about-unique .impact-item .impact-icon { animation: none !important; }\r\n    .bargach-about-unique .impact-label::after { animation: none !important; width: 100% !important; }\r\n    .bargach-about-unique .about-tag,\r\n    .bargach-about-unique .about-heading,\r\n    .bargach-about-unique .about-text,\r\n    .bargach-about-unique .about-pillars,\r\n    .bargach-about-unique .about-badge,\r\n    .bargach-about-unique .impact-section {\r\n      opacity: 1 !important; transform: none !important; animation: none !important;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<!-- ============================================================\r\n     ABOUT US HTML \u2013 UNIQUE DESIGN WITH IMAGE SLIDER\r\n     ============================================================ -->\r\n<section class=\"bargach-about-unique\" aria-label=\"About Bargach Foundation\">\r\n  <!-- Background texture -->\r\n  <div class=\"about-bg-texture\" aria-hidden=\"true\"><\/div>\r\n\r\n  <div class=\"about-container\">\r\n    <!-- LEFT: IMAGE SLIDER with animated border -->\r\n    <div class=\"about-image-wrapper\">\r\n      <div class=\"image-inner\">\r\n        <div class=\"image-slider\" id=\"aboutSliderUnique\">\r\n          <div class=\"slide active\">\r\n            <img\r\n              src=\"https:\/\/up.freshosoft.work\/bargach\/wp-content\/uploads\/2026\/08\/Gemini_Generated_Image_jegxukjegxukjegx.jpg\"\r\n              alt=\"Community members in rural India supported by Bargach Foundation\"\r\n              loading=\"lazy\"\r\n              decoding=\"async\"\r\n            \/>\r\n          <\/div>\r\n          <div class=\"slide\">\r\n            <img\r\n              src=\"https:\/\/up.freshosoft.work\/bargach\/wp-content\/uploads\/2026\/08\/Gemini_Generated_Image_lremjqlremjqlrem.jpg\"\r\n              alt=\"Rural community development and education\"\r\n              loading=\"lazy\"\r\n              decoding=\"async\"\r\n            \/>\r\n          <\/div>\r\n          <!-- slider dots -->\r\n          <div class=\"slider-dots\">\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          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n      <!-- floating badge -->\r\n      <div class=\"about-image-badge\">\r\n        <span class=\"badge-num\">04<\/span>\r\n        <span>Core Programs<\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- RIGHT: CONTENT -->\r\n    <div class=\"about-content\">\r\n      <div class=\"about-tag\">Who We Are<\/div>\r\n\r\n      <h2 class=\"about-heading\">\r\n        A non-profit rooted in<br> <em>the villages it serves.<\/em>\r\n      <\/h2>\r\n\r\n      <p class=\"about-text\">\r\n        <strong>Bargach Foundation<\/strong> was set up in September 2020 to serve communities of rural and semi-urban India \u2014 operating across <strong>West Bengal, Madhya Pradesh and Odisha<\/strong>, in tandem with initiatives of the government.\r\n        <br><br>\r\n        We focus on skill development, livelihood enhancement and WASH programs benefiting marginalised and underprivileged communities of society.\r\n      <\/p>\r\n\r\n      <!-- Pillars with ANIMATED ICONS -->\r\n      <div class=\"about-pillars\">\r\n        <span class=\"about-pillar\">\r\n          <span class=\"pillar-icon\">\ud83d\udca7<\/span> Safe Water\r\n        <\/span>\r\n        <span class=\"about-pillar\">\r\n          <span class=\"pillar-icon\">\ud83d\udcda<\/span> Child Education\r\n        <\/span>\r\n        <span class=\"about-pillar\">\r\n          <span class=\"pillar-icon\">\ud83d\udcbb<\/span> Digital Literacy\r\n        <\/span>\r\n        <span class=\"about-pillar\">\r\n          <span class=\"pillar-icon\">\ud83d\udee0\ufe0f<\/span> Livelihood Skills\r\n        <\/span>\r\n      <\/div>\r\n\r\n      <!-- Badge with GLOW EFFECT -->\r\n      <div class=\"about-badge\">\r\n        <span class=\"badge-num\">04<\/span>\r\n        <span>\u2014 Core programs currently active<\/span>\r\n      <\/div>\r\n\r\n      <!-- IMPACT NUMBERS \u2013 UNIQUE DESIGN -->\r\n      <div class=\"impact-section\">\r\n        <div class=\"impact-label\">Our Impact<\/div>\r\n        <div class=\"impact-grid\">\r\n          <div class=\"impact-item\">\r\n            <span class=\"impact-icon\">\ud83c\udf1f<\/span>\r\n            <span class=\"impact-number\">70K+<\/span>\r\n            <span class=\"impact-label-text\">People reached<\/span>\r\n          <\/div>\r\n          <div class=\"impact-item\">\r\n            <span class=\"impact-icon\">\ud83d\udcbb<\/span>\r\n            <span class=\"impact-number\">20K+<\/span>\r\n            <span class=\"impact-label-text\">IT beneficiaries<\/span>\r\n          <\/div>\r\n          <div class=\"impact-item\">\r\n            <span class=\"impact-icon\">\ud83c\udfdb\ufe0f<\/span>\r\n            <span class=\"impact-number\">30<\/span>\r\n            <span class=\"impact-label-text\">IT Centres<\/span>\r\n          <\/div>\r\n          <div class=\"impact-item\">\r\n            <span class=\"impact-icon\">\ud83d\udca7<\/span>\r\n            <span class=\"impact-number\">1.2K+<\/span>\r\n            <span class=\"impact-label-text\">Villagers with safe water<\/span>\r\n          <\/div>\r\n          <div class=\"impact-item\">\r\n            <span class=\"impact-icon\">\ud83d\udeb0<\/span>\r\n            <span class=\"impact-number\">33<\/span>\r\n            <span class=\"impact-label-text\">Taps installed<\/span>\r\n          <\/div>\r\n          <div class=\"impact-item\">\r\n            <span class=\"impact-icon\">\ud83d\udccd<\/span>\r\n            <span class=\"impact-number\">3<\/span>\r\n            <span class=\"impact-label-text\">States served<\/span>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\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 slider = document.getElementById('aboutSliderUnique');\r\n    if (!slider) return;\r\n    var slides = slider.querySelectorAll('.slide');\r\n    var dots = slider.querySelectorAll('.dot');\r\n    var currentIndex = 0;\r\n    var totalSlides = slides.length;\r\n    var interval;\r\n\r\n    function goToSlide(index) {\r\n      if (index < 0) index = totalSlides - 1;\r\n      if (index >= totalSlides) index = 0;\r\n\r\n      slides.forEach(function(slide, i) {\r\n        slide.classList.toggle('active', i === index);\r\n      });\r\n      dots.forEach(function(dot, i) {\r\n        dot.classList.toggle('active', i === index);\r\n      });\r\n      currentIndex = index;\r\n    }\r\n\r\n    function nextSlide() {\r\n      goToSlide(currentIndex + 1);\r\n    }\r\n\r\n    \/\/ Dot click handlers\r\n    dots.forEach(function(dot) {\r\n      dot.addEventListener('click', function() {\r\n        var index = parseInt(this.getAttribute('data-index'));\r\n        goToSlide(index);\r\n        resetAutoplay();\r\n      });\r\n    });\r\n\r\n    \/\/ Touch swipe\r\n    var touchStartX = 0;\r\n    var touchEndX = 0;\r\n\r\n    slider.addEventListener('touchstart', function(e) {\r\n      touchStartX = e.changedTouches[0].screenX;\r\n    }, { passive: true });\r\n\r\n    slider.addEventListener('touchend', function(e) {\r\n      touchEndX = e.changedTouches[0].screenX;\r\n      var diff = touchStartX - touchEndX;\r\n      if (Math.abs(diff) > 50) {\r\n        if (diff > 0) {\r\n          goToSlide(currentIndex + 1);\r\n        } else {\r\n          goToSlide(currentIndex - 1);\r\n        }\r\n        resetAutoplay();\r\n      }\r\n    }, { passive: true });\r\n\r\n    \/\/ Autoplay\r\n    function startAutoplay() {\r\n      if (interval) clearInterval(interval);\r\n      interval = setInterval(nextSlide, 4000);\r\n    }\r\n\r\n    function resetAutoplay() {\r\n      if (interval) {\r\n        clearInterval(interval);\r\n        startAutoplay();\r\n      }\r\n    }\r\n\r\n    startAutoplay();\r\n\r\n    \/\/ Pause on hover\r\n    slider.addEventListener('mouseenter', function() {\r\n      if (interval) {\r\n        clearInterval(interval);\r\n        interval = null;\r\n      }\r\n    });\r\n    slider.addEventListener('mouseleave', function() {\r\n      startAutoplay();\r\n    });\r\n\r\n    \/\/ Parallax effect on image (desktop only)\r\n    var wrapper = slider.closest('.about-image-wrapper');\r\n    var isDesktop = window.matchMedia('(min-width: 901px)').matches;\r\n    var prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n    if (isDesktop && !prefersReduced && wrapper) {\r\n      var inner = wrapper.querySelector('.image-inner');\r\n      var section = wrapper.closest('.bargach-about-unique');\r\n\r\n      section.addEventListener('mousemove', function(e) {\r\n        var rect = section.getBoundingClientRect();\r\n        var mouseX = ((e.clientX - rect.left) \/ rect.width) - 0.5;\r\n        var mouseY = ((e.clientY - rect.top) \/ rect.height) - 0.5;\r\n        inner.style.transform = 'translate(' + (mouseX * 8) + 'px, ' + (mouseY * 6) + 'px)';\r\n      });\r\n\r\n      section.addEventListener('mouseleave', function() {\r\n        inner.style.transform = 'translate(0,0)';\r\n      });\r\n    }\r\n\r\n  })();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-64327e0 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"64327e0\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ead3a8c\" data-id=\"ead3a8c\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8052f4a elementor-widget elementor-widget-html\" data-id=\"8052f4a\" 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 LIGHT SEMI-DARK WITH CREAMY ACCORDION\r\n     Light background with subtle dark accents, creamy smooth\r\n     accordion animation, and colorful highlights.\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  .bgpr-section {\r\n    --ink: #1f2a26;\r\n    --teal: #2a9d8f;\r\n    --teal-light: #3ab0a0;\r\n    --gold: #d48c3c;\r\n    --gold-light: #e8b86d;\r\n    --coral: #e07a5f;\r\n    --coral-light: #f0a38c;\r\n    --lavender: #9b8ec4;\r\n    --rose: #d96c8a;\r\n    --sage: #7a9e8a;\r\n    --text-light: #1f2a26;\r\n    --text-muted: #6a8a7a;\r\n    --text-body: #3d534a;\r\n    --hairline: rgba(26, 122, 107, 0.08);\r\n    --bg-dark: #f5f2eb;\r\n    --bg-card: rgba(255, 255, 255, 0.88);\r\n    --bg-hover: rgba(212, 140, 60, 0.04);\r\n    --border-glow: rgba(212, 140, 60, 0.10);\r\n\r\n    --bgpr-serif: 'Fraunces', Georgia, 'Times New Roman', serif;\r\n    --bgpr-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\r\n\r\n    position: relative;\r\n    width: 100%;\r\n    background: var(--bg-dark);\r\n    color: var(--text-light);\r\n    font-family: var(--bgpr-sans);\r\n    overflow: hidden;\r\n    padding: clamp(40px, 5vw, 70px) 0;\r\n  }\r\n  .bgpr-section *,\r\n  .bgpr-section *::before,\r\n  .bgpr-section *::after {\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  \/* ---------- light background with colorful glow ---------- *\/\r\n  .bgpr-section .bgpr-bg {\r\n    position: absolute;\r\n    inset: 0;\r\n    z-index: 0;\r\n    background: \r\n      radial-gradient(ellipse at 10% 20%, rgba(212, 140, 60, 0.08) 0%, transparent 50%),\r\n      radial-gradient(ellipse at 90% 80%, rgba(42, 157, 143, 0.06) 0%, transparent 50%),\r\n      radial-gradient(ellipse at 50% 50%, rgba(224, 122, 95, 0.04) 0%, transparent 60%),\r\n      radial-gradient(ellipse at 20% 90%, rgba(155, 142, 196, 0.04) 0%, transparent 40%);\r\n    pointer-events: none;\r\n  }\r\n  .bgpr-section .bgpr-overlay {\r\n    position: absolute;\r\n    inset: 0;\r\n    z-index: 1;\r\n    background:\r\n      radial-gradient(ellipse at 30% 20%, rgba(245, 242, 235, 0.10) 0%, rgba(245, 242, 235, 0.50) 60%, rgba(245, 242, 235, 0.80) 100%);\r\n    pointer-events: none;\r\n  }\r\n  .bgpr-section .bgpr-glow-bg {\r\n    position: absolute;\r\n    z-index: 1;\r\n    pointer-events: none;\r\n    width: 60vw;\r\n    height: 60vw;\r\n    max-width: 700px;\r\n    max-height: 700px;\r\n    top: -10%;\r\n    right: -5%;\r\n    background: \r\n      radial-gradient(circle, rgba(212, 140, 60, 0.05) 0%, rgba(212, 140, 60, 0.01) 40%, transparent 70%),\r\n      radial-gradient(circle at 30% 50%, rgba(42, 157, 143, 0.03) 0%, transparent 50%);\r\n    filter: blur(60px);\r\n  }\r\n\r\n  .bgpr-container {\r\n    position: relative;\r\n    z-index: 2;\r\n    max-width: 1400px;\r\n    margin: 0 auto;\r\n    padding: clamp(64px, 8vw, 112px) clamp(22px, 4.5vw, 56px);\r\n  }\r\n\r\n  \/* ---------- header with warm glow ---------- *\/\r\n  .bgpr-header {\r\n    margin-bottom: clamp(44px, 6vw, 72px);\r\n    max-width: 640px;\r\n  }\r\n  .bgpr-tag {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    font-size: 11.5px;\r\n    font-weight: 600;\r\n    letter-spacing: 0.18em;\r\n    text-transform: uppercase;\r\n    color: var(--coral);\r\n    margin: 0 0 18px;\r\n  }\r\n  .bgpr-tag::before {\r\n    content: \"\";\r\n    width: 22px;\r\n    height: 1px;\r\n    background: var(--coral);\r\n    display: inline-block;\r\n  }\r\n  .bgpr-header h2 {\r\n    font-family: var(--bgpr-serif);\r\n    font-weight: 380;\r\n    font-size: clamp(34px, 4.4vw, 58px);\r\n    line-height: 1.08;\r\n    margin: 0;\r\n    color: var(--text-light);\r\n    text-shadow: 0 0 30px rgba(212, 140, 60, 0.06), 0 0 60px rgba(212, 140, 60, 0.03);\r\n    animation: glowPulse 4s ease-in-out infinite;\r\n  }\r\n  @keyframes glowPulse {\r\n    0%, 100% {\r\n      text-shadow: 0 0 30px rgba(212, 140, 60, 0.06), 0 0 60px rgba(212, 140, 60, 0.03);\r\n    }\r\n    50% {\r\n      text-shadow: 0 0 40px rgba(212, 140, 60, 0.12), 0 0 80px rgba(212, 140, 60, 0.05), 0 0 120px rgba(212, 140, 60, 0.02);\r\n    }\r\n  }\r\n  .bgpr-header h2 em {\r\n    font-style: italic;\r\n    color: var(--coral);\r\n    text-shadow: 0 0 40px rgba(224, 122, 95, 0.08), 0 0 80px rgba(224, 122, 95, 0.03);\r\n  }\r\n\r\n  \/* ---------- layout: image on RIGHT ---------- *\/\r\n  .bgpr-layout {\r\n    display: grid;\r\n    grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr);\r\n    gap: clamp(32px, 5vw, 64px);\r\n    align-items: start;\r\n  }\r\n  @media (max-width: 900px) {\r\n    .bgpr-layout {\r\n      grid-template-columns: 1fr;\r\n      gap: 28px;\r\n    }\r\n  }\r\n\r\n  \/* ---------- sticky visual frame (RIGHT) ---------- *\/\r\n  .bgpr-visual {\r\n    position: sticky;\r\n    top: 6vh;\r\n    order: 2;\r\n  }\r\n  @media (max-width: 900px) {\r\n    .bgpr-visual {\r\n      position: static;\r\n      order: -1;\r\n    }\r\n  }\r\n\r\n  .bgpr-frame {\r\n    position: relative;\r\n    width: 100%;\r\n    aspect-ratio: 4 \/ 4.8;\r\n    border-radius: 8px 48px 8px 8px;\r\n    overflow: hidden;\r\n    background: #fffcf5;\r\n    box-shadow: 0 40px 90px -32px rgba(31, 42, 38, 0.08), inset 0 0 0 1px rgba(31, 42, 38, 0.04);\r\n    border: 2px solid transparent;\r\n    background-image: linear-gradient(#fffcf5, #fffcf5), \r\n                      linear-gradient(135deg, var(--gold-light), var(--coral-light), var(--teal-light));\r\n    background-origin: padding-box, border-box;\r\n    background-clip: padding-box, border-box;\r\n  }\r\n  @media (max-width: 900px) {\r\n    .bgpr-frame {\r\n      aspect-ratio: 16 \/ 10;\r\n      border-radius: 8px 36px 8px 8px;\r\n    }\r\n  }\r\n\r\n  .bgpr-frame-img {\r\n    position: absolute;\r\n    inset: 0;\r\n    opacity: 0;\r\n    transition: opacity 0.6s ease;\r\n  }\r\n  .bgpr-frame-img.bgpr-active {\r\n    opacity: 1;\r\n  }\r\n  .bgpr-frame-img img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n    display: block;\r\n  }\r\n  .bgpr-frame::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    inset: 0;\r\n    z-index: 2;\r\n    background: linear-gradient(200deg, rgba(248, 244, 237, 0) 40%, rgba(248, 244, 237, 0.50) 100%);\r\n    pointer-events: none;\r\n  }\r\n\r\n  .bgpr-frame-meta {\r\n    position: absolute;\r\n    left: 20px;\r\n    bottom: 18px;\r\n    z-index: 3;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 14px;\r\n  }\r\n  .bgpr-frame-count {\r\n    font-family: var(--bgpr-serif);\r\n    font-style: italic;\r\n    font-size: 15px;\r\n    color: var(--coral);\r\n    font-weight: 600;\r\n  }\r\n  .bgpr-frame-dots {\r\n    display: flex;\r\n    gap: 6px;\r\n  }\r\n  .bgpr-frame-dots span {\r\n    width: 6px;\r\n    height: 6px;\r\n    border-radius: 50%;\r\n    background: rgba(31, 42, 38, 0.15);\r\n    transition: all 0.3s ease;\r\n  }\r\n  .bgpr-frame-dots span.bgpr-active {\r\n    background: var(--coral);\r\n    transform: scale(1.5);\r\n    box-shadow: 0 0 12px rgba(224, 122, 95, 0.25);\r\n  }\r\n\r\n  \/* ---------- index list (LEFT) ---------- *\/\r\n  .bgpr-index {\r\n    border-top: 2px solid var(--hairline);\r\n    order: 1;\r\n  }\r\n\r\n  .bgpr-row {\r\n    border-bottom: 1px solid var(--hairline);\r\n    transition: background 0.3s ease;\r\n    cursor: pointer;\r\n    position: relative;\r\n  }\r\n  .bgpr-row:hover {\r\n    background: var(--bg-hover);\r\n  }\r\n  .bgpr-row.bgpr-open {\r\n    background: rgba(212, 140, 60, 0.04);\r\n  }\r\n\r\n  .bgpr-row-head {\r\n    all: unset;\r\n    display: grid;\r\n    grid-template-columns: auto 1fr auto;\r\n    align-items: baseline;\r\n    gap: clamp(14px, 2.4vw, 28px);\r\n    width: 100%;\r\n    padding: clamp(20px, 2.6vw, 30px) 4px;\r\n    cursor: pointer;\r\n  }\r\n  .bgpr-row-num {\r\n    font-family: var(--bgpr-serif);\r\n    font-weight: 560;\r\n    font-size: clamp(34px, 4vw, 54px);\r\n    line-height: 1;\r\n    color: var(--lavender);\r\n    opacity: 0.4;\r\n    transition: all 0.3s ease;\r\n  }\r\n  .bgpr-row.bgpr-open .bgpr-row-num,\r\n  .bgpr-row-head:hover .bgpr-row-num {\r\n    opacity: 1;\r\n    color: var(--coral);\r\n  }\r\n\r\n  .bgpr-row-titles {\r\n    min-width: 0;\r\n  }\r\n  .bgpr-row-title {\r\n    font-family: var(--bgpr-serif);\r\n    font-weight: 380;\r\n    font-size: clamp(19px, 2vw, 27px);\r\n    line-height: 1.2;\r\n    color: var(--text-light);\r\n    margin: 0 0 6px;\r\n    transition: color 0.3s ease;\r\n  }\r\n  .bgpr-row-head:hover .bgpr-row-title {\r\n    color: var(--teal);\r\n  }\r\n  .bgpr-row-title em {\r\n    font-style: italic;\r\n    color: var(--coral);\r\n  }\r\n  .bgpr-row-sub {\r\n    font-size: 12.5px;\r\n    letter-spacing: 0.04em;\r\n    color: var(--text-muted);\r\n    font-weight: 400;\r\n  }\r\n\r\n  \/* ---------- ATTRACTIVE ANIMATED PLUS ICON ---------- *\/\r\n  .bgpr-row-toggle {\r\n    width: 40px;\r\n    height: 40px;\r\n    border-radius: 50%;\r\n    border: 2px solid var(--hairline);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    flex: none;\r\n    position: relative;\r\n    transition: all 0.5s cubic-bezier(.22, .68, .2, 1);\r\n    background: rgba(255, 255, 255, 0.50);\r\n    backdrop-filter: blur(4px);\r\n    -webkit-backdrop-filter: blur(4px);\r\n  }\r\n  .bgpr-row-toggle::before,\r\n  .bgpr-row-toggle::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    background: var(--text-muted);\r\n    transition: all 0.5s cubic-bezier(.22, .68, .2, 1);\r\n    border-radius: 2px;\r\n  }\r\n  .bgpr-row-toggle::before {\r\n    width: 16px;\r\n    height: 2px;\r\n  }\r\n  .bgpr-row-toggle::after {\r\n    width: 2px;\r\n    height: 16px;\r\n  }\r\n  .bgpr-row-head:hover .bgpr-row-toggle {\r\n    border-color: var(--coral);\r\n    background: rgba(224, 122, 95, 0.06);\r\n    transform: scale(1.05);\r\n    box-shadow: 0 0 30px rgba(224, 122, 95, 0.08);\r\n  }\r\n  .bgpr-row-head:hover .bgpr-row-toggle::before,\r\n  .bgpr-row-head:hover .bgpr-row-toggle::after {\r\n    background: var(--coral);\r\n  }\r\n  .bgpr-row.bgpr-open .bgpr-row-toggle {\r\n    background: var(--coral);\r\n    border-color: var(--coral);\r\n    transform: rotate(90deg) scale(1.1);\r\n    box-shadow: 0 0 40px rgba(224, 122, 95, 0.20);\r\n  }\r\n  .bgpr-row.bgpr-open .bgpr-row-toggle::before,\r\n  .bgpr-row.bgpr-open .bgpr-row-toggle::after {\r\n    background: #fffcf5;\r\n  }\r\n  .bgpr-row.bgpr-open .bgpr-row-toggle::after {\r\n    transform: scaleY(0);\r\n  }\r\n\r\n  \/* ---------- CREAMY SMOOTH ACCORDION ---------- *\/\r\n  .bgpr-row-panel {\r\n    display: grid;\r\n    grid-template-rows: 0fr;\r\n    transition: grid-template-rows 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n    will-change: grid-template-rows;\r\n  }\r\n  .bgpr-row.bgpr-open .bgpr-row-panel {\r\n    grid-template-rows: 1fr;\r\n  }\r\n  .bgpr-row-panel-inner {\r\n    overflow: hidden;\r\n  }\r\n  .bgpr-row-panel-content {\r\n    padding: 0 4px clamp(24px, 3vw, 34px);\r\n    max-width: 640px;\r\n    opacity: 0;\r\n    transform: translateY(-10px);\r\n    transition: opacity 0.5s ease 0.2s, transform 0.5s cubic-bezier(.22, .68, .2, 1) 0.2s;\r\n  }\r\n  .bgpr-row.bgpr-open .bgpr-row-panel-content {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n\r\n  .bgpr-row-desc {\r\n    font-weight: 300;\r\n    font-size: 14.5px;\r\n    line-height: 1.75;\r\n    color: var(--text-body);\r\n    margin: 0 0 18px;\r\n  }\r\n  .bgpr-row-desc strong {\r\n    color: var(--coral);\r\n    font-weight: 500;\r\n  }\r\n\r\n  .bgpr-row-stats {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    gap: 10px 28px;\r\n    padding: 14px 0;\r\n    border-top: 2px solid var(--hairline);\r\n    margin-bottom: 14px;\r\n  }\r\n  .bgpr-stat {\r\n    display: flex;\r\n    align-items: baseline;\r\n    gap: 6px;\r\n  }\r\n  .bgpr-stat-num {\r\n    font-family: var(--bgpr-serif);\r\n    font-weight: 560;\r\n    font-size: 21px;\r\n    color: var(--teal);\r\n  }\r\n  .bgpr-stat-label {\r\n    font-size: 11.5px;\r\n    color: var(--text-muted);\r\n    letter-spacing: 0.02em;\r\n  }\r\n\r\n  .bgpr-row-partners {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    gap: 8px;\r\n  }\r\n  .bgpr-partner {\r\n    font-size: 11.5px;\r\n    font-weight: 500;\r\n    color: var(--coral);\r\n    background: rgba(224, 122, 95, 0.06);\r\n    border: 1px solid rgba(224, 122, 95, 0.10);\r\n    padding: 4px 14px;\r\n    border-radius: 999px;\r\n  }\r\n\r\n  \/* ---------- View Full Details Button ---------- *\/\r\n  .bgpr-view-btn {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    margin-top: 16px;\r\n    padding: 10px 24px;\r\n    background: linear-gradient(135deg, var(--gold), var(--coral));\r\n    color: #fffcf5;\r\n    border: none;\r\n    border-radius: 999px;\r\n    font-family: var(--bgpr-sans);\r\n    font-size: 13px;\r\n    font-weight: 600;\r\n    cursor: pointer;\r\n    transition: all 0.3s ease;\r\n    box-shadow: 0 4px 16px rgba(212, 140, 60, 0.15);\r\n  }\r\n  .bgpr-view-btn:hover {\r\n    transform: translateY(-2px) scale(1.02);\r\n    box-shadow: 0 8px 30px rgba(224, 122, 95, 0.25);\r\n    background: linear-gradient(135deg, var(--gold-light), var(--coral-light));\r\n  }\r\n  .bgpr-view-btn .btn-arrow {\r\n    display: inline-block;\r\n    transition: transform 0.3s ease;\r\n  }\r\n  .bgpr-view-btn:hover .btn-arrow {\r\n    transform: translateX(4px);\r\n  }\r\n\r\n  \/* ---------- mobile inline thumbnail ---------- *\/\r\n  .bgpr-row-thumb {\r\n    display: none;\r\n  }\r\n  @media (max-width: 900px) {\r\n    .bgpr-row-thumb {\r\n      display: block;\r\n      width: 100%;\r\n      aspect-ratio: 16\/9;\r\n      border-radius: 8px;\r\n      overflow: hidden;\r\n      margin-bottom: 16px;\r\n      border: 2px solid rgba(212, 140, 60, 0.08);\r\n    }\r\n    .bgpr-row-thumb img {\r\n      width: 100%;\r\n      height: 100%;\r\n      object-fit: cover;\r\n      display: block;\r\n    }\r\n  }\r\n\r\n  \/* ============================================================\r\n     POPUP OVERLAY \u2014 LIGHT SEMI-DARK\r\n     ============================================================ *\/\r\n  .bgpr-popup-overlay {\r\n    position: fixed;\r\n    inset: 0;\r\n    z-index: 999;\r\n    background: rgba(245, 242, 235, 0.92);\r\n    backdrop-filter: blur(16px);\r\n    -webkit-backdrop-filter: blur(16px);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    opacity: 0;\r\n    pointer-events: none;\r\n    transition: opacity 0.5s cubic-bezier(.22, .68, .2, 1);\r\n    padding: 20px;\r\n  }\r\n  .bgpr-popup-overlay.active {\r\n    opacity: 1;\r\n    pointer-events: auto;\r\n  }\r\n\r\n  .bgpr-popup-content {\r\n    background: #fffcf5;\r\n    border-radius: 24px;\r\n    max-width: 820px;\r\n    width: 100%;\r\n    max-height: 90vh;\r\n    overflow-y: auto;\r\n    padding: 0;\r\n    transform: scale(0.92) translateY(20px);\r\n    transition: transform 0.5s cubic-bezier(.22, .68, .2, 1);\r\n    box-shadow: 0 40px 80px rgba(31, 42, 38, 0.08);\r\n    position: relative;\r\n    border: 2px solid transparent;\r\n    background-image: linear-gradient(#fffcf5, #fffcf5), \r\n                      linear-gradient(135deg, var(--gold-light), var(--coral-light), var(--teal-light));\r\n    background-origin: padding-box, border-box;\r\n    background-clip: padding-box, border-box;\r\n  }\r\n  .bgpr-popup-overlay.active .bgpr-popup-content {\r\n    transform: scale(1) translateY(0);\r\n  }\r\n\r\n  .bgpr-popup-close {\r\n    position: absolute;\r\n    top: 16px;\r\n    right: 20px;\r\n    z-index: 10;\r\n    background: rgba(31, 42, 38, 0.04);\r\n    border: none;\r\n    color: var(--text-light);\r\n    width: 44px;\r\n    height: 44px;\r\n    border-radius: 50%;\r\n    font-size: 24px;\r\n    cursor: pointer;\r\n    transition: all 0.3s ease;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-family: 'Inter', sans-serif;\r\n    backdrop-filter: blur(4px);\r\n    -webkit-backdrop-filter: blur(4px);\r\n  }\r\n  .bgpr-popup-close:hover {\r\n    background: var(--coral);\r\n    color: #fffcf5;\r\n    transform: rotate(90deg);\r\n  }\r\n\r\n  .bgpr-popup-image {\r\n    width: 100%;\r\n    height: clamp(220px, 30vw, 380px);\r\n    overflow: hidden;\r\n    border-radius: 24px 24px 0 0;\r\n    position: relative;\r\n  }\r\n  .bgpr-popup-image img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n    opacity: 0.95;\r\n  }\r\n  .bgpr-popup-image .popup-chapter {\r\n    position: absolute;\r\n    top: 20px;\r\n    left: 20px;\r\n    background: rgba(255, 255, 255, 0.85);\r\n    backdrop-filter: blur(4px);\r\n    -webkit-backdrop-filter: blur(4px);\r\n    color: var(--coral);\r\n    padding: 4px 16px;\r\n    border-radius: 999px;\r\n    font-size: 12px;\r\n    font-weight: 600;\r\n    letter-spacing: 0.06em;\r\n    border: 1px solid rgba(224, 122, 95, 0.08);\r\n  }\r\n\r\n  .bgpr-popup-body {\r\n    padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 40px) clamp(28px, 3vw, 40px);\r\n  }\r\n  .bgpr-popup-body h2 {\r\n    font-family: var(--bgpr-serif);\r\n    font-weight: 560;\r\n    font-size: clamp(26px, 3vw, 38px);\r\n    color: var(--text-light);\r\n    margin: 0 0 8px;\r\n    line-height: 1.1;\r\n  }\r\n  .bgpr-popup-body h2 .highlight {\r\n    color: var(--coral);\r\n  }\r\n  .bgpr-popup-body .popup-desc {\r\n    font-size: clamp(15px, 1.1vw, 17px);\r\n    line-height: 1.75;\r\n    color: var(--text-body);\r\n    font-weight: 300;\r\n    margin: 0 0 16px;\r\n  }\r\n  .bgpr-popup-body .popup-desc strong {\r\n    color: var(--coral);\r\n    font-weight: 500;\r\n  }\r\n\r\n  .bgpr-popup-body .popup-stats {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    gap: 12px 24px;\r\n    padding: 16px 0;\r\n    border-top: 2px solid var(--hairline);\r\n    border-bottom: 2px solid var(--hairline);\r\n    margin: 0 0 16px;\r\n  }\r\n  .bgpr-popup-body .popup-stats .stat-item {\r\n    display: flex;\r\n    align-items: baseline;\r\n    gap: 4px;\r\n    font-size: clamp(13px, 0.9vw, 15px);\r\n    color: var(--text-body);\r\n    font-weight: 300;\r\n  }\r\n  .bgpr-popup-body .popup-stats .stat-item .stat-num {\r\n    font-family: var(--bgpr-serif);\r\n    font-weight: 560;\r\n    font-size: clamp(22px, 2vw, 32px);\r\n    color: var(--teal);\r\n    line-height: 1;\r\n  }\r\n\r\n  .bgpr-popup-body .popup-partners {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    gap: 6px 10px;\r\n    margin-top: 6px;\r\n  }\r\n  .bgpr-popup-body .popup-partners .partner-tag {\r\n    font-size: clamp(11px, 0.8vw, 13px);\r\n    color: var(--text-muted);\r\n    background: rgba(31, 42, 38, 0.04);\r\n    padding: 4px 14px;\r\n    border-radius: 999px;\r\n    border: 1px solid rgba(31, 42, 38, 0.04);\r\n    font-weight: 400;\r\n  }\r\n  .bgpr-popup-body .popup-partners .partner-tag.gold {\r\n    background: rgba(224, 122, 95, 0.06);\r\n    border-color: rgba(224, 122, 95, 0.08);\r\n    color: var(--coral);\r\n    font-weight: 500;\r\n  }\r\n\r\n  .bgpr-popup-content::-webkit-scrollbar {\r\n    width: 6px;\r\n  }\r\n  .bgpr-popup-content::-webkit-scrollbar-track {\r\n    background: transparent;\r\n  }\r\n  .bgpr-popup-content::-webkit-scrollbar-thumb {\r\n    background: var(--coral);\r\n    border-radius: 999px;\r\n  }\r\n\r\n  \/* ---------- scroll reveal ---------- *\/\r\n  .bgpr-reveal {\r\n    opacity: 0;\r\n    transform: translateY(18px);\r\n    transition: opacity 0.6s cubic-bezier(.22, .68, .2, 1), transform 0.6s cubic-bezier(.22, .68, .2, 1);\r\n  }\r\n  .bgpr-reveal.bgpr-in {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n\r\n  @media (prefers-reduced-motion: reduce) {\r\n    .bgpr-section * {\r\n      transition-duration: 0.01ms !important;\r\n      animation-duration: 0.01ms !important;\r\n    }\r\n    .bgpr-section .bgpr-reveal {\r\n      opacity: 1 !important;\r\n      transform: none !important;\r\n    }\r\n    .bgpr-header h2 {\r\n      animation: none !important;\r\n    }\r\n    .bgpr-row-panel-content {\r\n      opacity: 1 !important;\r\n      transform: none !important;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<!-- ============================================================\r\n     HTML \u2014 LIGHT SEMI-DARK WITH CREAMY ACCORDION\r\n     ============================================================ -->\r\n<section class=\"bgpr-section\" aria-label=\"Our Programs\">\r\n\r\n  <!-- Background -->\r\n  <div class=\"bgpr-bg\" aria-hidden=\"true\"><\/div>\r\n  <div class=\"bgpr-overlay\" aria-hidden=\"true\"><\/div>\r\n  <div class=\"bgpr-glow-bg\" aria-hidden=\"true\"><\/div>\r\n\r\n  <div class=\"bgpr-container\">\r\n\r\n    <div class=\"bgpr-header bgpr-reveal\">\r\n      <p class=\"bgpr-tag\">Our Programs<\/p>\r\n      <h2>Chapters of <em>Change<\/em><\/h2>\r\n    <\/div>\r\n\r\n    <div class=\"bgpr-layout\">\r\n\r\n      <!-- LEFT: Chapter Index -->\r\n      <div class=\"bgpr-index bgpr-reveal\" id=\"bgprIndex\">\r\n\r\n        <!-- Chapter 01 -->\r\n        <div class=\"bgpr-row\" data-chapter=\"1\">\r\n          <button class=\"bgpr-row-head\" aria-expanded=\"false\" aria-controls=\"bgpr-panel-1\" id=\"bgpr-head-1\">\r\n            <span class=\"bgpr-row-num\">01<\/span>\r\n            <span class=\"bgpr-row-titles\">\r\n              <span class=\"bgpr-row-title\"><em>Alokodoy<\/em> \u2014 Child-Friendly Coaching<\/span>\r\n              <span class=\"bgpr-row-sub\">Purba Bardhaman \u00b7 Est. 22 Sep 2025<\/span>\r\n            <\/span>\r\n            <span class=\"bgpr-row-toggle\" aria-hidden=\"true\"><\/span>\r\n          <\/button>\r\n          <div class=\"bgpr-row-panel\" id=\"bgpr-panel-1\" role=\"region\" aria-labelledby=\"bgpr-head-1\">\r\n            <div class=\"bgpr-row-panel-inner\">\r\n              <div class=\"bgpr-row-panel-content\">\r\n                <div class=\"bgpr-row-thumb\"><img decoding=\"async\" data-chapter-img=\"1\" src=\"\" alt=\"Alokodoy coaching centre\" loading=\"lazy\" \/><\/div>\r\n                <p class=\"bgpr-row-desc\">Established <strong>22nd September 2025<\/strong> in Dokra village, Dariapur, Purba Bardhaman \u2014 built because limited resources, poverty and first-generation learning were pushing children out of school.<\/p>\r\n                <div class=\"bgpr-row-stats\">\r\n                  <div class=\"bgpr-stat\"><span class=\"bgpr-stat-num\">50<\/span><span class=\"bgpr-stat-label\">Children<\/span><\/div>\r\n                  <div class=\"bgpr-stat\"><span class=\"bgpr-stat-num\">1<\/span><span class=\"bgpr-stat-label\">Village<\/span><\/div>\r\n                <\/div>\r\n                <div class=\"bgpr-row-partners\">\r\n                  <span class=\"bgpr-partner\">Artisan Soul<\/span>\r\n                  <span class=\"bgpr-partner\">Vector Finance Pvt Ltd<\/span>\r\n                  <span class=\"bgpr-partner\">Purba Bardhaman District Police<\/span>\r\n                <\/div>\r\n                <button class=\"bgpr-view-btn\" data-chapter=\"1\">View Full Details <span class=\"btn-arrow\">\u2192<\/span><\/button>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- Chapter 02 -->\r\n        <div class=\"bgpr-row\" data-chapter=\"2\">\r\n          <button class=\"bgpr-row-head\" aria-expanded=\"false\" aria-controls=\"bgpr-panel-2\" id=\"bgpr-head-2\">\r\n            <span class=\"bgpr-row-num\">02<\/span>\r\n            <span class=\"bgpr-row-titles\">\r\n              <span class=\"bgpr-row-title\"><em>Awareness<\/em> Generation Programs<\/span>\r\n              <span class=\"bgpr-row-sub\">Rainwater \u00b7 Safe Water \u00b7 Sanitation<\/span>\r\n            <\/span>\r\n            <span class=\"bgpr-row-toggle\" aria-hidden=\"true\"><\/span>\r\n          <\/button>\r\n          <div class=\"bgpr-row-panel\" id=\"bgpr-panel-2\" role=\"region\" aria-labelledby=\"bgpr-head-2\">\r\n            <div class=\"bgpr-row-panel-inner\">\r\n              <div class=\"bgpr-row-panel-content\">\r\n                <div class=\"bgpr-row-thumb\"><img decoding=\"async\" data-chapter-img=\"2\" src=\"\" alt=\"Awareness generation programs\" loading=\"lazy\" \/><\/div>\r\n                <p class=\"bgpr-row-desc\">Run in partnership with <strong>Water.org<\/strong> through leaflets, posters, banners and videos travelling door to door \u2014 reaching over <strong>70,000<\/strong> people with the case for household water connections and a sanitary toilet in every home.<\/p>\r\n                <div class=\"bgpr-row-stats\">\r\n                  <div class=\"bgpr-stat\"><span class=\"bgpr-stat-num\">70,000<\/span><span class=\"bgpr-stat-label\">People Reached<\/span><\/div>\r\n                  <div class=\"bgpr-stat\"><span class=\"bgpr-stat-num\">3<\/span><span class=\"bgpr-stat-label\">Topics<\/span><\/div>\r\n                <\/div>\r\n                <div class=\"bgpr-row-partners\"><span class=\"bgpr-partner\">Water.org<\/span><\/div>\r\n                <button class=\"bgpr-view-btn\" data-chapter=\"2\">View Full Details <span class=\"btn-arrow\">\u2192<\/span><\/button>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- Chapter 03 -->\r\n        <div class=\"bgpr-row\" data-chapter=\"3\">\r\n          <button class=\"bgpr-row-head\" aria-expanded=\"false\" aria-controls=\"bgpr-panel-3\" id=\"bgpr-head-3\">\r\n            <span class=\"bgpr-row-num\">03<\/span>\r\n            <span class=\"bgpr-row-titles\">\r\n              <span class=\"bgpr-row-title\"><em>Community<\/em> IT Centres<\/span>\r\n              <span class=\"bgpr-row-sub\">30 Centres \u00b7 13 Districts \u00b7 20K+ Beneficiaries<\/span>\r\n            <\/span>\r\n            <span class=\"bgpr-row-toggle\" aria-hidden=\"true\"><\/span>\r\n          <\/button>\r\n          <div class=\"bgpr-row-panel\" id=\"bgpr-panel-3\" role=\"region\" aria-labelledby=\"bgpr-head-3\">\r\n            <div class=\"bgpr-row-panel-inner\">\r\n              <div class=\"bgpr-row-panel-content\">\r\n                <div class=\"bgpr-row-thumb\"><img decoding=\"async\" data-chapter-img=\"3\" src=\"\" alt=\"Community IT centres\" loading=\"lazy\" \/><\/div>\r\n                <p class=\"bgpr-row-desc\">Free venues where marginalised community members learn <strong>digital literacy<\/strong> and job-finding IT skills \u2014 now <strong>30 centres<\/strong> across <strong>13 districts<\/strong> of West Bengal, reaching over <strong>20,000<\/strong> beneficiaries.<\/p>\r\n                <div class=\"bgpr-row-stats\">\r\n                  <div class=\"bgpr-stat\"><span class=\"bgpr-stat-num\">30<\/span><span class=\"bgpr-stat-label\">Centres<\/span><\/div>\r\n                  <div class=\"bgpr-stat\"><span class=\"bgpr-stat-num\">13<\/span><span class=\"bgpr-stat-label\">Districts<\/span><\/div>\r\n                  <div class=\"bgpr-stat\"><span class=\"bgpr-stat-num\">20,000+<\/span><span class=\"bgpr-stat-label\">Beneficiaries<\/span><\/div>\r\n                <\/div>\r\n                <button class=\"bgpr-view-btn\" data-chapter=\"3\">View Full Details <span class=\"btn-arrow\">\u2192<\/span><\/button>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- Chapter 04 -->\r\n        <div class=\"bgpr-row\" data-chapter=\"4\">\r\n          <button class=\"bgpr-row-head\" aria-expanded=\"false\" aria-controls=\"bgpr-panel-4\" id=\"bgpr-head-4\">\r\n            <span class=\"bgpr-row-num\">04<\/span>\r\n            <span class=\"bgpr-row-titles\">\r\n              <span class=\"bgpr-row-title\"><em>Skill Development<\/em> Training<\/span>\r\n              <span class=\"bgpr-row-sub\">Utkarsh Bangla \u00b7 Emami Foundation<\/span>\r\n            <\/span>\r\n            <span class=\"bgpr-row-toggle\" aria-hidden=\"true\"><\/span>\r\n          <\/button>\r\n          <div class=\"bgpr-row-panel\" id=\"bgpr-panel-4\" role=\"region\" aria-labelledby=\"bgpr-head-4\">\r\n            <div class=\"bgpr-row-panel-inner\">\r\n              <div class=\"bgpr-row-panel-content\">\r\n                <div class=\"bgpr-row-thumb\"><img decoding=\"async\" data-chapter-img=\"4\" src=\"\" alt=\"Skill development training\" loading=\"lazy\" \/><\/div>\r\n                <p class=\"bgpr-row-desc\">With <strong>Utkarsh Bangla<\/strong> and the <strong>Emami Foundation<\/strong>, youth train online and offline through a <strong>3-month MOA course<\/strong> grooming them for professional realms. Centres: Bansberia (Hooghly) \u00b7 Haripal \u00b7 Purba Bardhaman.<\/p>\r\n                <div class=\"bgpr-row-stats\">\r\n                  <div class=\"bgpr-stat\"><span class=\"bgpr-stat-num\">3<\/span><span class=\"bgpr-stat-label\">Months<\/span><\/div>\r\n                  <div class=\"bgpr-stat\"><span class=\"bgpr-stat-num\">3<\/span><span class=\"bgpr-stat-label\">Centres<\/span><\/div>\r\n                <\/div>\r\n                <div class=\"bgpr-row-partners\">\r\n                  <span class=\"bgpr-partner\">Utkarsh Bangla<\/span>\r\n                  <span class=\"bgpr-partner\">Emami Foundation<\/span>\r\n                <\/div>\r\n                <button class=\"bgpr-view-btn\" data-chapter=\"4\">View Full Details <span class=\"btn-arrow\">\u2192<\/span><\/button>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- Chapter 05 -->\r\n        <div class=\"bgpr-row\" data-chapter=\"5\">\r\n          <button class=\"bgpr-row-head\" aria-expanded=\"false\" aria-controls=\"bgpr-panel-5\" id=\"bgpr-head-5\">\r\n            <span class=\"bgpr-row-num\">05<\/span>\r\n            <span class=\"bgpr-row-titles\">\r\n              <span class=\"bgpr-row-title\"><em>Safe Drinking Water<\/em> \u2014 WASH<\/span>\r\n              <span class=\"bgpr-row-sub\">33 Taps \u00b7 1,200+ Villagers<\/span>\r\n            <\/span>\r\n            <span class=\"bgpr-row-toggle\" aria-hidden=\"true\"><\/span>\r\n          <\/button>\r\n          <div class=\"bgpr-row-panel\" id=\"bgpr-panel-5\" role=\"region\" aria-labelledby=\"bgpr-head-5\">\r\n            <div class=\"bgpr-row-panel-inner\">\r\n              <div class=\"bgpr-row-panel-content\">\r\n                <div class=\"bgpr-row-thumb\"><img decoding=\"async\" data-chapter-img=\"5\" src=\"\" alt=\"Safe drinking water WASH project\" loading=\"lazy\" \/><\/div>\r\n                <p class=\"bgpr-row-desc\">Villages in <strong>Purba Bardhaman &amp; Paschim Medinipur<\/strong> suffered scarcity and contamination of water. <strong>33 taps<\/strong> now serve Dokra village (<strong>400+<\/strong> villagers), and <strong>3 purifiers<\/strong> removing iron &amp; arsenic serve Patachitra Gram, Naya, Pingla (<strong>500+<\/strong> villagers).<\/p>\r\n                <div class=\"bgpr-row-stats\">\r\n                  <div class=\"bgpr-stat\"><span class=\"bgpr-stat-num\">33<\/span><span class=\"bgpr-stat-label\">Taps<\/span><\/div>\r\n                  <div class=\"bgpr-stat\"><span class=\"bgpr-stat-num\">3<\/span><span class=\"bgpr-stat-label\">Purifiers<\/span><\/div>\r\n                  <div class=\"bgpr-stat\"><span class=\"bgpr-stat-num\">1,200+<\/span><span class=\"bgpr-stat-label\">Villagers<\/span><\/div>\r\n                  <div class=\"bgpr-stat\"><span class=\"bgpr-stat-num\">2<\/span><span class=\"bgpr-stat-label\">Districts<\/span><\/div>\r\n                <\/div>\r\n                <button class=\"bgpr-view-btn\" data-chapter=\"5\">View Full Details <span class=\"btn-arrow\">\u2192<\/span><\/button>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n      <!-- RIGHT: Sticky Visual Frame -->\r\n      <div class=\"bgpr-visual bgpr-reveal\" aria-hidden=\"true\">\r\n        <div class=\"bgpr-frame\" id=\"bgprFrame\">\r\n          <div class=\"bgpr-frame-meta\">\r\n            <span class=\"bgpr-frame-count\" id=\"bgprCount\">01 \u2014 05<\/span>\r\n            <div class=\"bgpr-frame-dots\" id=\"bgprDots\"><\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- ============================================================\r\n     POPUP OVERLAY\r\n     ============================================================ -->\r\n  <div class=\"bgpr-popup-overlay\" id=\"bgprPopup\">\r\n    <div class=\"bgpr-popup-content\">\r\n      <button class=\"bgpr-popup-close\" id=\"bgprPopupClose\">\u2715<\/button>\r\n      <div class=\"bgpr-popup-image\">\r\n        <img decoding=\"async\" id=\"bgprPopupImg\" src=\"\" alt=\"\">\r\n        <span class=\"popup-chapter\" id=\"bgprPopupChapter\">Chapter 01<\/span>\r\n      <\/div>\r\n      <div class=\"bgpr-popup-body\">\r\n        <h2 id=\"bgprPopupTitle\"><\/h2>\r\n        <div class=\"popup-desc\" id=\"bgprPopupDesc\"><\/div>\r\n        <div class=\"popup-stats\" id=\"bgprPopupStats\"><\/div>\r\n        <div class=\"popup-partners\" id=\"bgprPopupPartners\"><\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- ============================================================\r\n     SCRIPT\r\n     ============================================================ -->\r\n<script>\r\n  (function() {\r\n    var section = document.querySelector('.bgpr-section');\r\n    if (!section) return;\r\n\r\n    var bgprChapterImages = {\r\n      1: \"https:\/\/up.freshosoft.work\/bargach\/wp-content\/uploads\/2026\/08\/GM.jpeg\",\r\n      2: \"https:\/\/up.freshosoft.work\/bargach\/wp-content\/uploads\/2026\/08\/y-scaled.jpeg\",\r\n      3: \"https:\/\/up.freshosoft.work\/bargach\/wp-content\/uploads\/2026\/08\/er.jpeg\",\r\n      4: \"https:\/\/up.freshosoft.work\/bargach\/wp-content\/uploads\/2026\/08\/c6.jpeg\",\r\n      5: \"https:\/\/up.freshosoft.work\/bargach\/wp-content\/uploads\/2026\/08\/Gemini_Generated_Image_gtj8jtgtj8jtgtj8.jpg\"\r\n    };\r\n\r\n    var chaptersData = {\r\n      1: {\r\n        title: '<span class=\"highlight\">Alokodoy<\/span> \u2014 Child-Friendly Coaching Centre',\r\n        chapter: 'Chapter 01',\r\n        img: bgprChapterImages[1],\r\n        desc: 'Established <strong>22nd September 2025<\/strong> in Dokra village, Dariapur, Purba Bardhaman \u2014 built because limited resources, poverty and first-generation learning were pushing children out of school.',\r\n        stats: [\r\n          { num: '50', label: 'Children' },\r\n          { num: '1', label: 'Village' }\r\n        ],\r\n        partners: ['Artisan Soul', 'Vector Finance Pvt Ltd', 'Purba Bardhaman District Police']\r\n      },\r\n      2: {\r\n        title: '<span class=\"highlight\">Awareness<\/span> Generation Programs',\r\n        chapter: 'Chapter 02',\r\n        img: bgprChapterImages[2],\r\n        desc: '<strong>Rainwater Harvesting \u00b7 Safe Drinking Water \u00b7 Hygienic Sanitation<\/strong><br>Run in partnership with <strong>Water.org<\/strong> through leaflets, posters, banners and videos travelling door to door \u2014 reaching over <strong>70,000<\/strong> people with the case for household water connections and a sanitary toilet in every home.',\r\n        stats: [\r\n          { num: '70,000', label: 'People Reached' },\r\n          { num: '3', label: 'Topics' }\r\n        ],\r\n        partners: ['Water.org']\r\n      },\r\n      3: {\r\n        title: '<span class=\"highlight\">Community<\/span> IT Centres',\r\n        chapter: 'Chapter 03',\r\n        img: bgprChapterImages[3],\r\n        desc: 'Free venues where marginalised community members learn <strong>digital literacy<\/strong> and job-finding IT skills \u2014 now <strong>30 centres<\/strong> across <strong>13 districts<\/strong> of West Bengal, reaching over <strong>20,000<\/strong> beneficiaries.',\r\n        stats: [\r\n          { num: '30', label: 'Centres' },\r\n          { num: '13', label: 'Districts' },\r\n          { num: '20,000+', label: 'Beneficiaries' }\r\n        ],\r\n        partners: []\r\n      },\r\n      4: {\r\n        title: '<span class=\"highlight\">Skill Development<\/span> Training Programs',\r\n        chapter: 'Chapter 04',\r\n        img: bgprChapterImages[4],\r\n        desc: 'With <strong>Utkarsh Bangla<\/strong> and the <strong>Emami Foundation<\/strong>, youth train online and offline through a <strong>3-month MOA course<\/strong> grooming them for professional realms.<br><br><strong>Centres:<\/strong> Bansberia (Hooghly) \u00b7 Haripal \u00b7 Purba Bardhaman',\r\n        stats: [\r\n          { num: '3', label: 'Months' },\r\n          { num: '3', label: 'Centres' }\r\n        ],\r\n        partners: ['Utkarsh Bangla', 'Emami Foundation']\r\n      },\r\n      5: {\r\n        title: '<span class=\"highlight\">Safe Drinking Water<\/span> \u2014 WASH Project',\r\n        chapter: 'Chapter 05',\r\n        img: bgprChapterImages[5],\r\n        desc: 'Villages in <strong>Purba Bardhaman &amp; Paschim Medinipur<\/strong> suffered scarcity and contamination of water.<br><br><strong>33 taps<\/strong> now serve Dokra village (<strong>400+<\/strong> villagers), and <strong>3 purifiers<\/strong> removing iron &amp; arsenic serve Patachitra Gram, Naya, Pingla (<strong>500+<\/strong> villagers) \u2014 <strong>1,200+<\/strong> villagers in total.',\r\n        stats: [\r\n          { num: '33', label: 'Taps' },\r\n          { num: '3', label: 'Purifiers' },\r\n          { num: '1,200+', label: 'Villagers' },\r\n          { num: '2', label: 'Districts' }\r\n        ],\r\n        partners: []\r\n      }\r\n    };\r\n\r\n    var frame = document.getElementById('bgprFrame');\r\n    var dotsWrap = document.getElementById('bgprDots');\r\n    var countEl = document.getElementById('bgprCount');\r\n    var rows = section.querySelectorAll('.bgpr-row');\r\n    var totalChapters = rows.length;\r\n\r\n    Object.keys(bgprChapterImages).forEach(function(key, i) {\r\n      var wrap = document.createElement('div');\r\n      wrap.className = 'bgpr-frame-img' + (key === '1' ? ' bgpr-active' : '');\r\n      wrap.setAttribute('data-frame-img', key);\r\n      var img = document.createElement('img');\r\n      img.src = bgprChapterImages[key];\r\n      img.alt = '';\r\n      img.loading = i === 0 ? 'eager' : 'lazy';\r\n      img.decoding = 'async';\r\n      wrap.appendChild(img);\r\n      frame.insertBefore(wrap, frame.querySelector('.bgpr-frame-meta'));\r\n\r\n      var dot = document.createElement('span');\r\n      dot.setAttribute('data-dot', key);\r\n      if (key === '1') dot.classList.add('bgpr-active');\r\n      dotsWrap.appendChild(dot);\r\n    });\r\n\r\n    section.querySelectorAll('[data-chapter-img]').forEach(function(img) {\r\n      var key = img.getAttribute('data-chapter-img');\r\n      if (bgprChapterImages[key]) img.src = bgprChapterImages[key];\r\n    });\r\n\r\n    function setActiveChapter(key) {\r\n      frame.querySelectorAll('[data-frame-img]').forEach(function(el) {\r\n        el.classList.toggle('bgpr-active', el.getAttribute('data-frame-img') === key);\r\n      });\r\n      dotsWrap.querySelectorAll('[data-dot]').forEach(function(el) {\r\n        el.classList.toggle('bgpr-active', el.getAttribute('data-dot') === key);\r\n      });\r\n      countEl.textContent = key.padStart(2, '0') + ' \u2014 ' + String(totalChapters).padStart(2, '0');\r\n    }\r\n\r\n    var isDesktop = window.matchMedia('(min-width: 901px)').matches;\r\n    var canHover = window.matchMedia('(hover: hover)').matches;\r\n\r\n    rows.forEach(function(row) {\r\n      var chapter = row.getAttribute('data-chapter');\r\n      var head = row.querySelector('.bgpr-row-head');\r\n\r\n      \/\/ HOVER: change image + open accordion smoothly\r\n      if (isDesktop && canHover) {\r\n        row.addEventListener('mouseenter', function() {\r\n          setActiveChapter(chapter);\r\n          var isOpen = row.classList.contains('bgpr-open');\r\n          if (!isOpen) {\r\n            rows.forEach(function(r) {\r\n              r.classList.remove('bgpr-open');\r\n              r.querySelector('.bgpr-row-head').setAttribute('aria-expanded', 'false');\r\n            });\r\n            row.classList.add('bgpr-open');\r\n            head.setAttribute('aria-expanded', 'true');\r\n          }\r\n        });\r\n      }\r\n\r\n      head.addEventListener('click', function(e) {\r\n        e.stopPropagation();\r\n        var isOpen = row.classList.contains('bgpr-open');\r\n\r\n        rows.forEach(function(r) {\r\n          r.classList.remove('bgpr-open');\r\n          r.querySelector('.bgpr-row-head').setAttribute('aria-expanded', 'false');\r\n        });\r\n\r\n        if (!isOpen) {\r\n          row.classList.add('bgpr-open');\r\n          head.setAttribute('aria-expanded', 'true');\r\n          setActiveChapter(chapter);\r\n        }\r\n      });\r\n    });\r\n\r\n    var popup = document.getElementById('bgprPopup');\r\n    var popupClose = document.getElementById('bgprPopupClose');\r\n    var popupImg = document.getElementById('bgprPopupImg');\r\n    var popupChapter = document.getElementById('bgprPopupChapter');\r\n    var popupTitle = document.getElementById('bgprPopupTitle');\r\n    var popupDesc = document.getElementById('bgprPopupDesc');\r\n    var popupStats = document.getElementById('bgprPopupStats');\r\n    var popupPartners = document.getElementById('bgprPopupPartners');\r\n\r\n    var viewButtons = section.querySelectorAll('.bgpr-view-btn');\r\n\r\n    function openPopup(chapterId) {\r\n      var data = chaptersData[chapterId];\r\n      if (!data) return;\r\n\r\n      popupImg.src = data.img;\r\n      popupImg.alt = data.title.replace(\/<[^>]*>\/g, '');\r\n      popupChapter.textContent = data.chapter;\r\n      popupTitle.innerHTML = data.title;\r\n      popupDesc.innerHTML = data.desc;\r\n\r\n      popupStats.innerHTML = '';\r\n      data.stats.forEach(function(stat) {\r\n        var div = document.createElement('div');\r\n        div.className = 'stat-item';\r\n        div.innerHTML = '<span class=\"stat-num\">' + stat.num + '<\/span> ' + stat.label;\r\n        popupStats.appendChild(div);\r\n      });\r\n\r\n      popupPartners.innerHTML = '';\r\n      if (data.partners && data.partners.length > 0) {\r\n        data.partners.forEach(function(p) {\r\n          var span = document.createElement('span');\r\n          span.className = 'partner-tag gold';\r\n          span.textContent = '\ud83e\udd1d ' + p;\r\n          popupPartners.appendChild(span);\r\n        });\r\n      } else {\r\n        var empty = document.createElement('span');\r\n        empty.className = 'partner-tag';\r\n        empty.textContent = 'No partners listed';\r\n        popupPartners.appendChild(empty);\r\n      }\r\n\r\n      popup.classList.add('active');\r\n      document.body.style.overflow = 'hidden';\r\n\r\n      setTimeout(function() {\r\n        var nums = popupStats.querySelectorAll('.stat-num');\r\n        nums.forEach(function(el) {\r\n          var text = el.textContent;\r\n          var num = parseInt(text.replace(\/,\/g, ''));\r\n          if (isNaN(num) || text.includes('+') || text.includes(',')) return;\r\n          el.textContent = '0';\r\n          var target = num;\r\n          var duration = 1200;\r\n          var startTime = null;\r\n\r\n          function update(timestamp) {\r\n            if (!startTime) startTime = timestamp;\r\n            var progress = Math.min((timestamp - startTime) \/ duration, 1);\r\n            var eased = 1 - Math.pow(1 - progress, 3);\r\n            var current = Math.round(eased * target);\r\n            el.textContent = current;\r\n            if (progress < 1) {\r\n              requestAnimationFrame(update);\r\n            } else {\r\n              el.textContent = target;\r\n            }\r\n          }\r\n          requestAnimationFrame(update);\r\n        });\r\n      }, 300);\r\n    }\r\n\r\n    function closePopup() {\r\n      popup.classList.remove('active');\r\n      document.body.style.overflow = '';\r\n    }\r\n\r\n    viewButtons.forEach(function(btn) {\r\n      btn.addEventListener('click', function(e) {\r\n        e.stopPropagation();\r\n        var chapter = parseInt(this.getAttribute('data-chapter'));\r\n        openPopup(chapter);\r\n      });\r\n    });\r\n\r\n    popupClose.addEventListener('click', closePopup);\r\n    popup.addEventListener('click', function(e) {\r\n      if (e.target === this) closePopup();\r\n    });\r\n    document.addEventListener('keydown', function(e) {\r\n      if (e.key === 'Escape') closePopup();\r\n    });\r\n\r\n    var prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n    var revealEls = section.querySelectorAll('.bgpr-reveal');\r\n\r\n    if (prefersReducedMotion || !('IntersectionObserver' in window)) {\r\n      revealEls.forEach(function(el) { el.classList.add('bgpr-in'); });\r\n    } else {\r\n      var observer = new IntersectionObserver(function(entries) {\r\n        entries.forEach(function(entry, i) {\r\n          if (entry.isIntersecting) {\r\n            setTimeout(function() { entry.target.classList.add('bgpr-in'); }, i * 80);\r\n            observer.unobserve(entry.target);\r\n          }\r\n        });\r\n      }, { threshold: 0.15, rootMargin: '0px 0px -60px 0px' });\r\n      revealEls.forEach(function(el) { observer.observe(el); });\r\n    }\r\n\r\n  })();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-e6d5129 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"e6d5129\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-518cfcf\" data-id=\"518cfcf\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-bd396e2 elementor-widget elementor-widget-html\" data-id=\"bd396e2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     XHPF \u2014 BARGACH FOUNDATION GALLERY \u2014 LIGHT & COLORFUL\r\n     Horizontal film reel with perforated edges, auto-play,\r\n     pause on hover, and smooth navigation controls.\r\n     Dark theme removed \u2014 now light, warm & vibrant.\r\n     ============================================================ -->\r\n<style>\r\n  \/* ============================================================\r\n     XHPF \u2014 LIGHT & COLORFUL GALLERY\r\n     ============================================================ *\/\r\n\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600&family=DM+Serif+Display:ital@0;1&display=swap');\r\n\r\n  .xhpf-gallery {\r\n    --xf-bg: #f8f4ed;        \/* warm light base *\/\r\n    --xf-bg-2: #fffcf5;      \/* lighter card bg *\/\r\n    --xf-cream: #2a241c;     \/* dark text for contrast *\/\r\n    --xf-cream-dim: #5a4f42;\r\n    --xf-cream-faint: #a3927e;\r\n    --xf-amber: #d48c3c;     \/* warm gold *\/\r\n    --xf-amber-dim: rgba(212, 140, 60, 0.35);\r\n    --xf-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\r\n    --xf-serif: 'DM Serif Display', Georgia, 'Times New Roman', serif;\r\n\r\n    position: relative;\r\n    width: 100%;\r\n    background: var(--xf-bg);\r\n    color: var(--xf-cream);\r\n    font-family: var(--xf-sans);\r\n    overflow: hidden;\r\n    padding: clamp(56px, 7vw, 90px) 0 clamp(40px, 5vw, 64px);\r\n    isolation: isolate;\r\n  }\r\n  .xhpf-gallery *,\r\n  .xhpf-gallery *::before,\r\n  .xhpf-gallery *::after {\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  \/* ---------- header ---------- *\/\r\n  .xhpf-head {\r\n    max-width: 1560px;\r\n    margin: 0 auto;\r\n    padding: 0 clamp(20px, 4.5vw, 56px);\r\n    display: grid;\r\n    grid-template-columns: minmax(0, 0.9fr) minmax(0, 2.2fr) minmax(0, 0.9fr);\r\n    gap: clamp(16px, 3vw, 32px);\r\n    align-items: end;\r\n    margin-bottom: clamp(40px, 5vw, 64px);\r\n  }\r\n  @media (max-width: 860px) {\r\n    .xhpf-head {\r\n      grid-template-columns: 1fr;\r\n      gap: 12px;\r\n    }\r\n  }\r\n  .xhpf-label {\r\n    font-size: 11.5px;\r\n    font-weight: 500;\r\n    letter-spacing: 0.18em;\r\n    text-transform: uppercase;\r\n    color: var(--xf-amber);\r\n    margin: 0 0 4px;\r\n  }\r\n  .xhpf-heading {\r\n    font-weight: 400;\r\n    font-size: clamp(28px, 3.8vw, 50px);\r\n    line-height: 1.08;\r\n    letter-spacing: -0.01em;\r\n    color: var(--xf-cream);\r\n    margin: 0;\r\n  }\r\n  .xhpf-heading em {\r\n    font-family: var(--xf-serif);\r\n    font-style: italic;\r\n    font-weight: 400;\r\n    color: var(--xf-amber);\r\n  }\r\n  .xhpf-support {\r\n    font-size: 13.5px;\r\n    font-weight: 300;\r\n    line-height: 1.6;\r\n    color: var(--xf-cream-dim);\r\n    max-width: 240px;\r\n    text-align: right;\r\n    margin: 0;\r\n  }\r\n  @media (max-width: 860px) {\r\n    .xhpf-support {\r\n      text-align: left;\r\n      max-width: 100%;\r\n    }\r\n  }\r\n\r\n  \/* ---------- reel wrapper with perforated edges ---------- *\/\r\n  .xhpf-reel {\r\n    position: relative;\r\n  }\r\n  .xhpf-perf {\r\n    height: 10px;\r\n    background-image: repeating-linear-gradient(90deg, #ded5c8 0 10px, transparent 10px 22px);\r\n    background-position: 0 center;\r\n    opacity: 0.6;\r\n  }\r\n  .xhpf-perf-top {\r\n    margin-bottom: clamp(14px, 2vw, 24px);\r\n  }\r\n  .xhpf-perf-bottom {\r\n    margin-top: clamp(14px, 2vw, 24px);\r\n  }\r\n\r\n  \/* ---------- horizontal track ---------- *\/\r\n  .xhpf-track {\r\n    display: flex;\r\n    gap: clamp(14px, 2vw, 26px);\r\n    overflow-x: auto;\r\n    overflow-y: hidden;\r\n    scroll-snap-type: x proximity;\r\n    -webkit-overflow-scrolling: touch;\r\n    padding: 0 clamp(20px, 12vw, 22vw) 12px;\r\n    cursor: grab;\r\n    scrollbar-width: none;\r\n    height: clamp(360px, 62vh, 640px);\r\n    scroll-behavior: smooth;\r\n  }\r\n  .xhpf-track::-webkit-scrollbar {\r\n    display: none;\r\n  }\r\n  .xhpf-track.xhpf-dragging {\r\n    cursor: grabbing;\r\n    scroll-snap-type: none;\r\n    user-select: none;\r\n  }\r\n\r\n  .xhpf-frame {\r\n    position: relative;\r\n    flex: 0 0 auto;\r\n    width: min(72vw, 760px);\r\n    height: 100%;\r\n    scroll-snap-align: center;\r\n    border-radius: 8px;\r\n    overflow: hidden;\r\n    background: var(--xf-bg-2);\r\n    box-shadow: 0 4px 20px rgba(0,0,0,0.04), 0 1px 4px rgba(0,0,0,0.04);\r\n  }\r\n  .xhpf-frame.xhpf-narrow {\r\n    width: min(38vw, 400px);\r\n  }\r\n  .xhpf-frame img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n    display: block;\r\n    transition: transform 900ms cubic-bezier(.22, .68, .2, 1), filter 900ms ease;\r\n    pointer-events: none;\r\n  }\r\n  .xhpf-frame:hover img {\r\n    transform: scale(1.035);\r\n    filter: saturate(1.08) contrast(1.02);\r\n  }\r\n  .xhpf-frame::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    inset: 0;\r\n    box-shadow: inset 0 0 0 1px rgba(42, 36, 28, 0.05);\r\n    pointer-events: none;\r\n    border-radius: 8px;\r\n  }\r\n  .xhpf-frame-num {\r\n    position: absolute;\r\n    left: 12px;\r\n    bottom: 12px;\r\n    z-index: 2;\r\n    font-size: 10px;\r\n    letter-spacing: 0.1em;\r\n    color: rgba(42, 36, 28, 0.6);\r\n    font-variant-numeric: tabular-nums;\r\n    background: rgba(248, 244, 237, 0.75);\r\n    padding: 3px 9px;\r\n    border-radius: 999px;\r\n    backdrop-filter: blur(3px);\r\n  }\r\n\r\n  @media (max-width: 860px) {\r\n    .xhpf-track {\r\n      padding: 0 8vw 10px;\r\n      height: 52vh;\r\n      scroll-snap-type: x mandatory;\r\n    }\r\n    .xhpf-frame {\r\n      width: 84vw;\r\n    }\r\n    .xhpf-frame.xhpf-narrow {\r\n      width: 60vw;\r\n    }\r\n  }\r\n\r\n  \/* ---------- controls ---------- *\/\r\n  .xhpf-controls {\r\n    max-width: 1560px;\r\n    margin: clamp(22px, 3vw, 34px) auto 0;\r\n    padding: 0 clamp(20px, 4.5vw, 56px);\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 20px;\r\n  }\r\n  .xhpf-arrow {\r\n    width: 42px;\r\n    height: 42px;\r\n    border-radius: 50%;\r\n    border: 1px solid rgba(42, 36, 28, 0.12);\r\n    background: transparent;\r\n    color: var(--xf-cream);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-size: 16px;\r\n    cursor: pointer;\r\n    flex: none;\r\n    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;\r\n  }\r\n  .xhpf-arrow:hover {\r\n    background: rgba(42, 36, 28, 0.04);\r\n    border-color: rgba(42, 36, 28, 0.25);\r\n    transform: translateY(-1px);\r\n  }\r\n  .xhpf-arrow:focus-visible {\r\n    outline: 2px solid var(--xf-amber);\r\n    outline-offset: 2px;\r\n  }\r\n\r\n  .xhpf-progress-wrap {\r\n    flex: 1;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 16px;\r\n    min-width: 0;\r\n  }\r\n  .xhpf-progress-track {\r\n    position: relative;\r\n    flex: 1;\r\n    height: 2px;\r\n    background: rgba(42, 36, 28, 0.1);\r\n    border-radius: 2px;\r\n  }\r\n  .xhpf-progress-fill {\r\n    position: absolute;\r\n    left: 0;\r\n    top: 0;\r\n    bottom: 0;\r\n    width: 0%;\r\n    background: var(--xf-amber);\r\n    border-radius: 2px;\r\n    transition: width 0.15s linear;\r\n  }\r\n  .xhpf-counter {\r\n    font-size: 11px;\r\n    letter-spacing: 0.1em;\r\n    color: var(--xf-cream-dim);\r\n    font-variant-numeric: tabular-nums;\r\n    white-space: nowrap;\r\n  }\r\n\r\n  .xhpf-autoplay-indicator {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 6px;\r\n    font-size: 10px;\r\n    letter-spacing: 0.1em;\r\n    color: var(--xf-cream-faint);\r\n    opacity: 0.7;\r\n    transition: opacity 0.3s ease;\r\n  }\r\n  .xhpf-autoplay-indicator .pulse-dot {\r\n    width: 6px;\r\n    height: 6px;\r\n    border-radius: 50%;\r\n    background: var(--xf-amber);\r\n    animation: pulse-dot 2s ease-in-out infinite;\r\n  }\r\n  .xhpf-autoplay-indicator.paused .pulse-dot {\r\n    animation: none;\r\n    background: var(--xf-cream-faint);\r\n  }\r\n  @keyframes pulse-dot {\r\n    0%,\r\n    100% {\r\n      opacity: 1;\r\n      transform: scale(1);\r\n    }\r\n    50% {\r\n      opacity: 0.3;\r\n      transform: scale(0.6);\r\n    }\r\n  }\r\n\r\n  @media (max-width: 560px) {\r\n    .xhpf-controls {\r\n      gap: 12px;\r\n    }\r\n    .xhpf-arrow {\r\n      width: 36px;\r\n      height: 36px;\r\n      font-size: 14px;\r\n    }\r\n    .xhpf-autoplay-indicator {\r\n      display: none;\r\n    }\r\n  }\r\n\r\n  \/* ---------- end line ---------- *\/\r\n  .xhpf-end {\r\n    text-align: center;\r\n    margin-top: clamp(50px, 6vw, 80px);\r\n    font-size: 11px;\r\n    letter-spacing: 0.18em;\r\n    text-transform: uppercase;\r\n    color: var(--xf-cream-faint);\r\n  }\r\n\r\n  \/* ---------- reveal ---------- *\/\r\n  .xhpf-reveal {\r\n    opacity: 0;\r\n    transform: translateY(20px);\r\n    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.22, .68, .2, 1);\r\n  }\r\n  .xhpf-reveal.xhpf-in {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n\r\n  @media (prefers-reduced-motion: reduce) {\r\n    .xhpf-gallery * {\r\n      transition-duration: 0.01ms !important;\r\n      animation-duration: 0.01ms !important;\r\n    }\r\n    .xhpf-reveal {\r\n      opacity: 1 !important;\r\n      transform: none !important;\r\n    }\r\n    .xhpf-frame:hover img {\r\n      transform: none !important;\r\n    }\r\n    .xhpf-track {\r\n      scroll-behavior: auto !important;\r\n    }\r\n    .xhpf-autoplay-indicator .pulse-dot {\r\n      animation: none !important;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<!-- ============================================================\r\n     GALLERY HTML \u2014 LIGHT & COLORFUL\r\n     ============================================================ -->\r\n<section class=\"xhpf-gallery\" aria-label=\"Moments from the field \u2014 photo reel\">\r\n\r\n  <div class=\"xhpf-head xhpf-reveal\">\r\n    <p class=\"xhpf-label\">On the ground \u2192<\/p>\r\n    <h2 class=\"xhpf-heading\">Moments from the <em>field<\/em><\/h2>\r\n    <p class=\"xhpf-support\">Real people. Real places. Small moments that become lasting change.<\/p>\r\n  <\/div>\r\n\r\n  <div class=\"xhpf-reel xhpf-reveal\">\r\n    <div class=\"xhpf-perf xhpf-perf-top\" aria-hidden=\"true\"><\/div>\r\n\r\n    <div class=\"xhpf-track\" id=\"xhpfTrack\" tabindex=\"0\" role=\"region\" aria-label=\"Photo reel, scroll or use arrow keys to browse\">\r\n      <!-- frames injected by script from config -->\r\n    <\/div>\r\n\r\n    <div class=\"xhpf-perf xhpf-perf-bottom\" aria-hidden=\"true\"><\/div>\r\n  <\/div>\r\n\r\n  <div class=\"xhpf-controls xhpf-reveal\">\r\n    <button class=\"xhpf-arrow\" id=\"xhpfPrev\" aria-label=\"Previous photo\">\u2190<\/button>\r\n    <div class=\"xhpf-progress-wrap\">\r\n      <div class=\"xhpf-progress-track\">\r\n        <div class=\"xhpf-progress-fill\" id=\"xhpfProgress\"><\/div>\r\n      <\/div>\r\n      <span class=\"xhpf-counter\" id=\"xhpfCounter\">01 \/ 12<\/span>\r\n    <\/div>\r\n    <button class=\"xhpf-arrow\" id=\"xhpfNext\" aria-label=\"Next photo\">\u2192<\/button>\r\n    <div class=\"xhpf-autoplay-indicator\" id=\"xhpfAutoIndicator\">\r\n      <span class=\"pulse-dot\"><\/span>\r\n      <span>Auto<\/span>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <p class=\"xhpf-end xhpf-reveal\">The story continues \u2192<\/p>\r\n\r\n<\/section>\r\n\r\n<!-- ============================================================\r\n     SCRIPT \u2013 FIXED AUTO SLIDE (unchanged logic, light theme)\r\n     ============================================================ -->\r\n<script>\r\n  (function() {\r\n    var root = document.querySelector('.xhpf-gallery');\r\n    if (!root) return;\r\n\r\n    \/* ==========================================================\r\n       4K IMAGE CONFIGURATION\r\n       ========================================================== *\/\r\n    var xhpfImages = [\r\n      \"https:\/\/up.freshosoft.work\/bargach\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2026-06-18-at-2.46.29-PM.jpeg\",\r\n      \"https:\/\/up.freshosoft.work\/bargach\/wp-content\/uploads\/2026\/08\/exam.jpeg\",\r\n      \"https:\/\/up.freshosoft.work\/bargach\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2026-06-16-at-13.50.20.jpeg\",\r\n      \"https:\/\/up.freshosoft.work\/bargach\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2026-06-16-at-13.51.14.jpeg\",\r\n      \"https:\/\/up.freshosoft.work\/bargach\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2026-06-12-at-8.05.12-PM-1.jpeg\",\r\n      \"https:\/\/up.freshosoft.work\/bargach\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2026-06-13-at-2.34.25-PM-1.jpeg\",\r\n      \"https:\/\/up.freshosoft.work\/bargach\/wp-content\/uploads\/2026\/08\/2_.jpeg\",\r\n      \"https:\/\/up.freshosoft.work\/bargach\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2026-05-15-at-1.43.05-PM-2.jpeg\",\r\n      \"https:\/\/up.freshosoft.work\/bargach\/wp-content\/uploads\/2026\/08\/PB.jpeg\",\r\n      \"https:\/\/up.freshosoft.work\/bargach\/wp-content\/uploads\/2026\/08\/New-Joiners-Bansberia.jpeg\",\r\n      \"https:\/\/up.freshosoft.work\/bargach\/wp-content\/uploads\/2026\/08\/Batch1-scaled.jpeg\",\r\n      \"https:\/\/up.freshosoft.work\/bargach\/wp-content\/uploads\/2026\/08\/mb.jpeg\"\r\n    ];\r\n\r\n    var track = document.getElementById('xhpfTrack');\r\n    var progress = document.getElementById('xhpfProgress');\r\n    var counter = document.getElementById('xhpfCounter');\r\n    var prevBtn = document.getElementById('xhpfPrev');\r\n    var nextBtn = document.getElementById('xhpfNext');\r\n    var autoIndicator = document.getElementById('xhpfAutoIndicator');\r\n\r\n    \/* build frames *\/\r\n    xhpfImages.forEach(function(src, i) {\r\n      var fig = document.createElement('figure');\r\n      fig.className = 'xhpf-frame' + (i % 3 === 1 ? ' xhpf-narrow' : '');\r\n      fig.setAttribute('data-index', i);\r\n      var img = document.createElement('img');\r\n      img.src = src;\r\n      img.alt = 'Bargach Foundation field documentation';\r\n      img.loading = i < 2 ? 'eager' : 'lazy';\r\n      img.decoding = 'async';\r\n      var num = document.createElement('span');\r\n      num.className = 'xhpf-frame-num';\r\n      num.textContent = String(i + 1).padStart(2, '0');\r\n      fig.appendChild(img);\r\n      fig.appendChild(num);\r\n      track.appendChild(fig);\r\n    });\r\n\r\n    var frames = Array.prototype.slice.call(track.querySelectorAll('.xhpf-frame'));\r\n    var total = frames.length;\r\n\r\n    function pad(n) { return String(n).padStart(2, '0'); }\r\n\r\n    \/* ---------- progress + counter ---------- *\/\r\n    var ticking = false;\r\n\r\n    function updateProgress() {\r\n      var trackRect = track.getBoundingClientRect();\r\n      var center = trackRect.left + trackRect.width \/ 2;\r\n      var closestIndex = 0,\r\n        closestDist = Infinity;\r\n      frames.forEach(function(f, i) {\r\n        var r = f.getBoundingClientRect();\r\n        var d = Math.abs((r.left + r.width \/ 2) - center);\r\n        if (d < closestDist) { closestDist = d;\r\n          closestIndex = i; }\r\n      });\r\n      counter.textContent = pad(closestIndex + 1) + ' \/ ' + pad(total);\r\n\r\n      var maxScroll = track.scrollWidth - track.clientWidth;\r\n      var pct = maxScroll > 0 ? (track.scrollLeft \/ maxScroll) * 100 : 0;\r\n      progress.style.width = pct + '%';\r\n      ticking = false;\r\n      return closestIndex;\r\n    }\r\n    updateProgress();\r\n\r\n    track.addEventListener('scroll', function() {\r\n      if (!ticking) { window.requestAnimationFrame(updateProgress);\r\n        ticking = true; }\r\n    }, { passive: true });\r\n\r\n    \/* ---------- wheel support ---------- *\/\r\n    track.addEventListener('wheel', function(e) {\r\n      if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {\r\n        e.preventDefault();\r\n        track.scrollLeft += e.deltaY;\r\n      }\r\n    }, { passive: false });\r\n\r\n    \/* ---------- mouse drag ---------- *\/\r\n    var isDown = false,\r\n      startX = 0,\r\n      startScroll = 0;\r\n    track.addEventListener('pointerdown', function(e) {\r\n      if (e.pointerType !== 'mouse') return;\r\n      isDown = true;\r\n      track.classList.add('xhpf-dragging');\r\n      startX = e.clientX;\r\n      startScroll = track.scrollLeft;\r\n      pauseAutoPlay();\r\n    });\r\n    window.addEventListener('pointermove', function(e) {\r\n      if (!isDown) return;\r\n      track.scrollLeft = startScroll - (e.clientX - startX);\r\n    });\r\n    window.addEventListener('pointerup', function() {\r\n      isDown = false;\r\n      track.classList.remove('xhpf-dragging');\r\n      resumeAutoPlay();\r\n    });\r\n\r\n    \/* ---------- prev \/ next ---------- *\/\r\n    function frameStep() {\r\n      return (frames[1] ? frames[1].getBoundingClientRect().left - frames[0].getBoundingClientRect().left : track\r\n        .clientWidth * 0.7);\r\n    }\r\n    prevBtn.addEventListener('click', function() {\r\n      pauseAutoPlay();\r\n      track.scrollBy({ left: -frameStep(), behavior: 'smooth' });\r\n      setTimeout(resumeAutoPlay, 3000);\r\n    });\r\n    nextBtn.addEventListener('click', function() {\r\n      pauseAutoPlay();\r\n      track.scrollBy({ left: frameStep(), behavior: 'smooth' });\r\n      setTimeout(resumeAutoPlay, 3000);\r\n    });\r\n\r\n    track.addEventListener('keydown', function(e) {\r\n      if (e.key === 'ArrowRight') { e.preventDefault();\r\n        pauseAutoPlay();\r\n        track.scrollBy({ left: frameStep(), behavior: 'smooth' });\r\n        setTimeout(resumeAutoPlay, 3000); }\r\n      if (e.key === 'ArrowLeft') { e.preventDefault();\r\n        pauseAutoPlay();\r\n        track.scrollBy({ left: -frameStep(), behavior: 'smooth' });\r\n        setTimeout(resumeAutoPlay, 3000); }\r\n    });\r\n\r\n    \/* ==========================================================\r\n       FIXED AUTO SLIDE \u2013 using scrollLeft with animation\r\n       ========================================================== *\/\r\n    var autoPlayInterval = null;\r\n    var autoPlayDelay = 4500;\r\n    var isPaused = false;\r\n    var isAnimating = false;\r\n\r\n    function getVisibleIndex() {\r\n      var trackRect = track.getBoundingClientRect();\r\n      var center = trackRect.left + trackRect.width \/ 2;\r\n      var closestIndex = 0,\r\n        closestDist = Infinity;\r\n      frames.forEach(function(f, i) {\r\n        var r = f.getBoundingClientRect();\r\n        var d = Math.abs((r.left + r.width \/ 2) - center);\r\n        if (d < closestDist) { closestDist = d;\r\n          closestIndex = i; }\r\n      });\r\n      return closestIndex;\r\n    }\r\n\r\n    function getFrameScrollLeft(index) {\r\n      var frame = frames[index];\r\n      if (!frame) return 0;\r\n      var frameRect = frame.getBoundingClientRect();\r\n      var trackRect = track.getBoundingClientRect();\r\n      var offset = frameRect.left - trackRect.left;\r\n      var targetScroll = track.scrollLeft + offset - (track.clientWidth \/ 2) + (frameRect.width \/ 2);\r\n      return Math.max(0, Math.min(targetScroll, track.scrollWidth - track.clientWidth));\r\n    }\r\n\r\n    function goToSlide(index) {\r\n      if (isAnimating || isPaused) return;\r\n      if (index < 0) index = total - 1;\r\n      if (index >= total) index = 0;\r\n\r\n      var targetScroll = getFrameScrollLeft(index);\r\n      isAnimating = true;\r\n\r\n      var startScroll = track.scrollLeft;\r\n      var distance = targetScroll - startScroll;\r\n      var duration = 600;\r\n      var startTime = null;\r\n\r\n      function animateScroll(timestamp) {\r\n        if (!startTime) startTime = timestamp;\r\n        var progress = Math.min((timestamp - startTime) \/ duration, 1);\r\n        var eased = 1 - Math.pow(1 - progress, 3);\r\n        track.scrollLeft = startScroll + (distance * eased);\r\n        if (progress < 1) {\r\n          requestAnimationFrame(animateScroll);\r\n        } else {\r\n          track.scrollLeft = targetScroll;\r\n          isAnimating = false;\r\n          updateProgress();\r\n        }\r\n      }\r\n      requestAnimationFrame(animateScroll);\r\n    }\r\n\r\n    function goToNextSlide() {\r\n      if (isPaused || isAnimating) return;\r\n      var currentIndex = getVisibleIndex();\r\n      var nextIndex = (currentIndex + 1) % total;\r\n      goToSlide(nextIndex);\r\n    }\r\n\r\n    function startAutoPlay() {\r\n      if (autoPlayInterval) clearInterval(autoPlayInterval);\r\n      autoPlayInterval = setInterval(goToNextSlide, autoPlayDelay);\r\n      if (autoIndicator) {\r\n        autoIndicator.classList.remove('paused');\r\n      }\r\n    }\r\n\r\n    function pauseAutoPlay() {\r\n      isPaused = true;\r\n      if (autoPlayInterval) {\r\n        clearInterval(autoPlayInterval);\r\n        autoPlayInterval = null;\r\n      }\r\n      if (autoIndicator) {\r\n        autoIndicator.classList.add('paused');\r\n      }\r\n    }\r\n\r\n    function resumeAutoPlay() {\r\n      isPaused = false;\r\n      if (!autoPlayInterval) {\r\n        startAutoPlay();\r\n      }\r\n      if (autoIndicator) {\r\n        autoIndicator.classList.remove('paused');\r\n      }\r\n    }\r\n\r\n    \/* ---------- hover to pause ---------- *\/\r\n    track.addEventListener('mouseenter', function() {\r\n      pauseAutoPlay();\r\n    });\r\n\r\n    track.addEventListener('mouseleave', function() {\r\n      resumeAutoPlay();\r\n    });\r\n\r\n    \/* ---------- touch support ---------- *\/\r\n    track.addEventListener('touchstart', function() {\r\n      pauseAutoPlay();\r\n    });\r\n\r\n    track.addEventListener('touchend', function() {\r\n      setTimeout(resumeAutoPlay, 3000);\r\n    });\r\n\r\n    \/* ---------- start auto-play ---------- *\/\r\n    startAutoPlay();\r\n\r\n    \/* ---------- reveal on scroll ---------- *\/\r\n    var prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n    var revealEls = root.querySelectorAll('.xhpf-reveal');\r\n    if (prefersReducedMotion || !('IntersectionObserver' in window)) {\r\n      revealEls.forEach(function(el) { el.classList.add('xhpf-in'); });\r\n    } else {\r\n      var obs = new IntersectionObserver(function(entries) {\r\n        entries.forEach(function(entry, i) {\r\n          if (entry.isIntersecting) {\r\n            setTimeout(function() { entry.target.classList.add('xhpf-in'); }, i * 90);\r\n            obs.unobserve(entry.target);\r\n          }\r\n        });\r\n      }, { threshold: 0.15 });\r\n      revealEls.forEach(function(el) { obs.observe(el); });\r\n    }\r\n\r\n    \/* ---------- cleanup on page hide ---------- *\/\r\n    document.addEventListener('visibilitychange', function() {\r\n      if (document.hidden) {\r\n        pauseAutoPlay();\r\n      } else {\r\n        resumeAutoPlay();\r\n      }\r\n    });\r\n\r\n  })();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-ce28520 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"ce28520\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c134689\" data-id=\"c134689\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ed3d708 elementor-widget elementor-widget-html\" data-id=\"ed3d708\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     BARGACH \u00b7 STORIES OF CHANGE \u2013 LIGHT & COLORFUL\r\n     Modern slider with animated cards, gradient text,\r\n     floating counter badge, dot navigation, and auto-play.\r\n     Dark theme removed \u2014 now warm, airy & vibrant.\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  .bgpr-stories-slider {\r\n    --ink: #1f2a26;\r\n    --teal: #166358;\r\n    --teal-2: #1a7a6b;\r\n    --mint: #f5f2eb;\r\n    --gold: #d48c3c;\r\n    --gold-2: #e8b86d;\r\n    --text-dark: #1f2a26;\r\n    --text-body: #4a5a52;\r\n    --text-muted: #8a9e93;\r\n    --hairline: rgba(26, 122, 107, 0.10);\r\n\r\n    --bgpr-serif: 'Fraunces', Georgia, 'Times New Roman', serif;\r\n    --bgpr-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\r\n\r\n    position: relative;\r\n    width: 100%;\r\n    background: var(--mint);\r\n    color: var(--text-dark);\r\n    font-family: var(--bgpr-sans);\r\n    padding: clamp(60px, 8vw, 100px) 0;\r\n    overflow: hidden;\r\n  }\r\n  .bgpr-stories-slider *,\r\n  .bgpr-stories-slider *::before,\r\n  .bgpr-stories-slider *::after {\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  \/* ---------- background texture ---------- *\/\r\n  .bgpr-stories-slider .stories-bg {\r\n    position: absolute;\r\n    inset: 0;\r\n    z-index: 0;\r\n    background:\r\n      radial-gradient(ellipse at 5% 15%, rgba(212, 140, 60, 0.06) 0%, transparent 50%),\r\n      radial-gradient(ellipse at 95% 85%, rgba(26, 122, 107, 0.04) 0%, transparent 50%),\r\n      radial-gradient(ellipse at 50% 50%, rgba(22, 99, 88, 0.02) 0%, transparent 60%);\r\n    pointer-events: none;\r\n  }\r\n\r\n  .bgpr-stories-slider .stories-container {\r\n    position: relative;\r\n    z-index: 1;\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    padding: 0 clamp(22px, 4.5vw, 56px);\r\n  }\r\n\r\n  \/* ========== HEADER ========== *\/\r\n  .bgpr-stories-slider .stories-header {\r\n    text-align: center;\r\n    margin-bottom: clamp(40px, 5vw, 56px);\r\n  }\r\n  .bgpr-stories-slider .stories-tag {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    font-size: 11.5px;\r\n    font-weight: 600;\r\n    letter-spacing: 0.18em;\r\n    text-transform: uppercase;\r\n    color: var(--teal-2);\r\n    margin: 0 0 12px;\r\n  }\r\n  .bgpr-stories-slider .stories-tag::before,\r\n  .bgpr-stories-slider .stories-tag::after {\r\n    content: \"\";\r\n    width: 30px;\r\n    height: 1px;\r\n    background: var(--gold);\r\n    display: inline-block;\r\n  }\r\n  .bgpr-stories-slider .stories-header h2 {\r\n    font-family: var(--bgpr-serif);\r\n    font-weight: 380;\r\n    font-size: clamp(34px, 4.4vw, 58px);\r\n    line-height: 1.08;\r\n    margin: 0 0 12px;\r\n    color: var(--ink);\r\n  }\r\n  .bgpr-stories-slider .stories-header h2 .gradient-text {\r\n    background: linear-gradient(135deg, var(--teal-2), var(--gold));\r\n    -webkit-background-clip: text;\r\n    -webkit-text-fill-color: transparent;\r\n    background-clip: text;\r\n  }\r\n  .bgpr-stories-slider .stories-header .stories-sub {\r\n    font-size: clamp(15px, 1.2vw, 18px);\r\n    color: var(--text-body);\r\n    font-weight: 300;\r\n    max-width: 620px;\r\n    margin: 0 auto;\r\n    line-height: 1.6;\r\n  }\r\n\r\n  \/* ========== FLOATING COUNTER BADGE ========== *\/\r\n  .bgpr-stories-slider .counter-badge {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 12px;\r\n    background: rgba(255, 255, 255, 0.75);\r\n    backdrop-filter: blur(8px);\r\n    -webkit-backdrop-filter: blur(8px);\r\n    padding: 8px 20px 8px 16px;\r\n    border-radius: 999px;\r\n    border: 1px solid rgba(26, 122, 107, 0.06);\r\n    box-shadow: 0 4px 20px rgba(31, 42, 38, 0.04);\r\n    margin-bottom: 20px;\r\n    font-size: 13px;\r\n    color: var(--text-muted);\r\n  }\r\n  .bgpr-stories-slider .counter-badge .counter-num {\r\n    font-family: var(--bgpr-serif);\r\n    font-weight: 560;\r\n    font-size: 20px;\r\n    color: var(--teal-2);\r\n  }\r\n  .bgpr-stories-slider .counter-badge .counter-dot {\r\n    width: 4px;\r\n    height: 4px;\r\n    border-radius: 50%;\r\n    background: var(--gold);\r\n    display: inline-block;\r\n  }\r\n\r\n  \/* ========== SLIDER ========== *\/\r\n  .bgpr-stories-slider .slider-wrapper {\r\n    position: relative;\r\n    overflow: hidden;\r\n    border-radius: 20px;\r\n    margin-bottom: 30px;\r\n  }\r\n\r\n  .bgpr-stories-slider .slider-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  \/* ========== STORY SLIDE ========== *\/\r\n  .bgpr-stories-slider .story-slide {\r\n    flex: 0 0 100%;\r\n    padding: 0 4px;\r\n  }\r\n\r\n  .bgpr-stories-slider .story-card {\r\n    background: rgba(255, 255, 255, 0.85);\r\n    backdrop-filter: blur(8px);\r\n    -webkit-backdrop-filter: blur(8px);\r\n    border-radius: 20px;\r\n    padding: clamp(30px, 4vw, 44px) clamp(28px, 3.5vw, 40px);\r\n    border: 1px solid rgba(26, 122, 107, 0.06);\r\n    box-shadow: 0 8px 30px rgba(31, 42, 38, 0.04);\r\n    transition: transform 0.4s cubic-bezier(.22, .68, .2, 1), box-shadow 0.4s ease;\r\n    position: relative;\r\n    min-height: 280px;\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n  }\r\n  .bgpr-stories-slider .story-card:hover {\r\n    transform: translateY(-4px);\r\n    box-shadow: 0 20px 60px rgba(31, 42, 38, 0.08);\r\n    border-color: rgba(212, 140, 60, 0.12);\r\n  }\r\n\r\n  \/* story number badge *\/\r\n  .bgpr-stories-slider .story-card .story-number {\r\n    font-family: var(--bgpr-serif);\r\n    font-weight: 560;\r\n    font-size: clamp(14px, 1.2vw, 18px);\r\n    color: var(--gold);\r\n    letter-spacing: 0.04em;\r\n    margin-bottom: 12px;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n  }\r\n  .bgpr-stories-slider .story-card .story-number::after {\r\n    content: \"\";\r\n    flex: 1;\r\n    height: 1px;\r\n    background: var(--hairline);\r\n  }\r\n\r\n  \/* story name *\/\r\n  .bgpr-stories-slider .story-card .story-name {\r\n    font-family: var(--bgpr-serif);\r\n    font-weight: 560;\r\n    font-size: clamp(28px, 3vw, 42px);\r\n    color: var(--ink);\r\n    margin: 0 0 10px;\r\n    line-height: 1.1;\r\n  }\r\n  .bgpr-stories-slider .story-card .story-name .highlight {\r\n    color: var(--teal-2);\r\n  }\r\n\r\n  \/* story description *\/\r\n  .bgpr-stories-slider .story-card .story-desc {\r\n    font-size: clamp(15px, 1.1vw, 17px);\r\n    line-height: 1.7;\r\n    color: var(--text-body);\r\n    font-weight: 300;\r\n    margin: 0 0 18px;\r\n    max-width: 640px;\r\n  }\r\n  .bgpr-stories-slider .story-card .story-desc strong {\r\n    color: var(--teal-2);\r\n    font-weight: 500;\r\n  }\r\n\r\n  \/* story outcome badge *\/\r\n  .bgpr-stories-slider .story-card .story-outcome {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    font-size: clamp(13px, 0.9vw, 14px);\r\n    font-weight: 500;\r\n    color: var(--teal-2);\r\n    background: rgba(212, 140, 60, 0.08);\r\n    border: 1px solid rgba(212, 140, 60, 0.12);\r\n    padding: 8px 20px;\r\n    border-radius: 999px;\r\n    align-self: flex-start;\r\n  }\r\n  .bgpr-stories-slider .story-card .story-outcome .outcome-icon {\r\n    font-size: 15px;\r\n  }\r\n\r\n  \/* ========== SLIDER CONTROLS ========== *\/\r\n  .bgpr-stories-slider .slider-controls {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 20px;\r\n    margin-top: 8px;\r\n  }\r\n\r\n  \/* dots *\/\r\n  .bgpr-stories-slider .slider-dots {\r\n    display: flex;\r\n    gap: 10px;\r\n  }\r\n  .bgpr-stories-slider .slider-dots .dot {\r\n    width: 10px;\r\n    height: 10px;\r\n    border-radius: 50%;\r\n    background: rgba(26, 122, 107, 0.15);\r\n    border: none;\r\n    cursor: pointer;\r\n    transition: all 0.3s ease;\r\n    padding: 0;\r\n  }\r\n  .bgpr-stories-slider .slider-dots .dot.active {\r\n    background: var(--gold);\r\n    transform: scale(1.25);\r\n    box-shadow: 0 0 20px rgba(212, 140, 60, 0.3);\r\n  }\r\n  .bgpr-stories-slider .slider-dots .dot:hover {\r\n    background: rgba(26, 122, 107, 0.30);\r\n  }\r\n  .bgpr-stories-slider .slider-dots .dot.active:hover {\r\n    background: var(--gold);\r\n  }\r\n\r\n  \/* nav buttons *\/\r\n  .bgpr-stories-slider .slider-nav {\r\n    width: 44px;\r\n    height: 44px;\r\n    border-radius: 50%;\r\n    border: 1px solid var(--hairline);\r\n    background: rgba(255, 255, 255, 0.80);\r\n    backdrop-filter: blur(4px);\r\n    -webkit-backdrop-filter: blur(4px);\r\n    cursor: pointer;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-size: 20px;\r\n    color: var(--text-dark);\r\n    transition: all 0.3s ease;\r\n    box-shadow: 0 4px 12px rgba(31, 42, 38, 0.04);\r\n  }\r\n  .bgpr-stories-slider .slider-nav:hover {\r\n    background: var(--gold);\r\n    border-color: var(--gold);\r\n    color: var(--ink);\r\n    transform: scale(1.05);\r\n  }\r\n  .bgpr-stories-slider .slider-nav:disabled {\r\n    opacity: 0.3;\r\n    cursor: not-allowed;\r\n    transform: none;\r\n  }\r\n  .bgpr-stories-slider .slider-nav:disabled:hover {\r\n    background: rgba(255, 255, 255, 0.80);\r\n    border-color: var(--hairline);\r\n    color: var(--text-dark);\r\n  }\r\n\r\n  \/* ========== CTA BUTTON ========== *\/\r\n  .bgpr-stories-slider .stories-cta {\r\n    text-align: center;\r\n    margin-top: 32px;\r\n  }\r\n  .bgpr-stories-slider .stories-cta .btn-stories {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    padding: 14px 36px;\r\n    background: var(--gold);\r\n    color: var(--ink);\r\n    border: none;\r\n    border-radius: 999px;\r\n    font-family: var(--bgpr-sans);\r\n    font-size: 15px;\r\n    font-weight: 600;\r\n    cursor: pointer;\r\n    text-decoration: none;\r\n    transition: all 0.3s ease;\r\n    box-shadow: 0 4px 20px rgba(212, 140, 60, 0.25);\r\n  }\r\n  .bgpr-stories-slider .stories-cta .btn-stories:hover {\r\n    transform: translateY(-3px);\r\n    box-shadow: 0 8px 40px rgba(212, 140, 60, 0.35);\r\n  }\r\n  .bgpr-stories-slider .stories-cta .btn-stories .btn-arrow {\r\n    display: inline-block;\r\n    transition: transform 0.3s ease;\r\n  }\r\n  .bgpr-stories-slider .stories-cta .btn-stories:hover .btn-arrow {\r\n    transform: translateX(6px);\r\n  }\r\n\r\n  \/* ========== RESPONSIVE ========== *\/\r\n  @media (max-width: 768px) {\r\n    .bgpr-stories-slider .story-card {\r\n      padding: 24px 20px;\r\n      min-height: 240px;\r\n    }\r\n    .bgpr-stories-slider .story-card .story-name {\r\n      font-size: clamp(24px, 5vw, 32px);\r\n    }\r\n    .bgpr-stories-slider .story-card .story-desc {\r\n      font-size: 14px;\r\n    }\r\n    .bgpr-stories-slider .slider-nav {\r\n      width: 38px;\r\n      height: 38px;\r\n      font-size: 16px;\r\n    }\r\n  }\r\n\r\n  @media (max-width: 480px) {\r\n    .bgpr-stories-slider .stories-header h2 {\r\n      font-size: clamp(28px, 7vw, 38px);\r\n    }\r\n    .bgpr-stories-slider .story-card {\r\n      padding: 20px 16px;\r\n      min-height: 200px;\r\n    }\r\n    .bgpr-stories-slider .story-card .story-name {\r\n      font-size: clamp(20px, 5vw, 26px);\r\n    }\r\n    .bgpr-stories-slider .story-card .story-desc {\r\n      font-size: 13px;\r\n    }\r\n    .bgpr-stories-slider .story-card .story-outcome {\r\n      font-size: 12px;\r\n      padding: 6px 14px;\r\n    }\r\n    .bgpr-stories-slider .slider-controls {\r\n      gap: 12px;\r\n    }\r\n    .bgpr-stories-slider .slider-nav {\r\n      width: 34px;\r\n      height: 34px;\r\n      font-size: 14px;\r\n    }\r\n    .bgpr-stories-slider .slider-dots .dot {\r\n      width: 8px;\r\n      height: 8px;\r\n    }\r\n    .bgpr-stories-slider .counter-badge {\r\n      font-size: 12px;\r\n      padding: 6px 14px 6px 12px;\r\n    }\r\n    .bgpr-stories-slider .counter-badge .counter-num {\r\n      font-size: 17px;\r\n    }\r\n    .bgpr-stories-slider .stories-cta .btn-stories {\r\n      padding: 12px 28px;\r\n      font-size: 14px;\r\n    }\r\n  }\r\n\r\n  \/* Reduced Motion *\/\r\n  @media (prefers-reduced-motion: reduce) {\r\n    .bgpr-stories-slider * {\r\n      transition-duration: 0.01ms !important;\r\n      animation-duration: 0.01ms !important;\r\n    }\r\n    .bgpr-stories-slider .slider-track {\r\n      transition: none !important;\r\n    }\r\n    .bgpr-stories-slider .story-card:hover {\r\n      transform: none !important;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<!-- ============================================================\r\n     STORIES OF CHANGE \u2013 SLIDER HTML (LIGHT & COLORFUL)\r\n     ============================================================ -->\r\n<section class=\"bgpr-stories-slider\" aria-label=\"Stories of Change\">\r\n  <div class=\"stories-bg\" aria-hidden=\"true\"><\/div>\r\n\r\n  <div class=\"stories-container\">\r\n\r\n    <!-- Header with Counter Badge -->\r\n    <div class=\"stories-header\">\r\n      <div class=\"stories-tag\">People Behind the Numbers<\/div>\r\n\r\n      <!-- Floating Counter Badge -->\r\n      <div class=\"counter-badge\">\r\n        <span class=\"counter-num\">04<\/span>\r\n        <span class=\"counter-dot\"><\/span>\r\n        <span>Stories of Transformation<\/span>\r\n      <\/div>\r\n\r\n      <h2>\r\n        Change is measured in <span class=\"gradient-text\">lives<\/span>,<br>\r\n        not just numbers.\r\n      <\/h2>\r\n      <p class=\"stories-sub\">\r\n        Behind every programme is a person \u2014 a student finding confidence, a young person stepping into employment, or a community gaining access to essential resources.\r\n      <\/p>\r\n    <\/div>\r\n\r\n    <!-- Slider -->\r\n    <div class=\"slider-wrapper\">\r\n      <div class=\"slider-track\" id=\"storiesTrack\">\r\n\r\n        <!-- Slide 01 -->\r\n        <div class=\"story-slide\">\r\n          <div class=\"story-card\">\r\n            <div class=\"story-number\">01 \/ 04<\/div>\r\n            <h3 class=\"story-name\"><span class=\"highlight\">Annu<\/span> Shaw<\/h3>\r\n            <p class=\"story-desc\">\r\n              After completing her training, <strong>Annu Shaw<\/strong> secured employment at <strong>mPokket<\/strong>.\r\n              <br>\r\n              Her aspiration is to become financially stable while supporting the education of her sisters.\r\n            <\/p>\r\n            <div class=\"story-outcome\">\r\n              <span class=\"outcome-icon\">\ud83d\udcbc<\/span>\r\n              mPokket \u00b7 Financial Stability\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- Slide 02 -->\r\n        <div class=\"story-slide\">\r\n          <div class=\"story-card\">\r\n            <div class=\"story-number\">02 \/ 04<\/div>\r\n            <h3 class=\"story-name\"><span class=\"highlight\">Kaushiki<\/span> Malik<\/h3>\r\n            <p class=\"story-desc\">\r\n              For <strong>Kaushiki Malik<\/strong>, the training became a turning point.\r\n              <br>\r\n              She successfully secured a position at <strong>HDB Financial Services<\/strong>, moving towards greater financial independence.\r\n            <\/p>\r\n            <div class=\"story-outcome\">\r\n              <span class=\"outcome-icon\">\ud83c\udfe6<\/span>\r\n              HDB Financial Services \u00b7 Independence\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- Slide 03 -->\r\n        <div class=\"story-slide\">\r\n          <div class=\"story-card\">\r\n            <div class=\"story-number\">03 \/ 04<\/div>\r\n            <h3 class=\"story-name\"><span class=\"highlight\">Gouri Sankar<\/span> Chatterjee<\/h3>\r\n            <p class=\"story-desc\">\r\n              <strong>Gouri Sankar Chatterjee<\/strong> successfully joined <strong>Bandhan Bank<\/strong>.\r\n              <br>\r\n              His journey towards financial independence has also strengthened his motivation and confidence about his career.\r\n            <\/p>\r\n            <div class=\"story-outcome\">\r\n              <span class=\"outcome-icon\">\ud83c\udfdb\ufe0f<\/span>\r\n              Bandhan Bank \u00b7 Confidence &amp; Growth\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- Slide 04 -->\r\n        <div class=\"story-slide\">\r\n          <div class=\"story-card\">\r\n            <div class=\"story-number\">04 \/ 04<\/div>\r\n            <h3 class=\"story-name\"><span class=\"highlight\">Moumita<\/span> Mondal<\/h3>\r\n            <p class=\"story-desc\">\r\n              <strong>Moumita Mondal<\/strong> joined <strong>HDB Financial Services<\/strong>.\r\n              <br>\r\n              For her, becoming financially independent has been an important milestone.\r\n            <\/p>\r\n            <div class=\"story-outcome\">\r\n              <span class=\"outcome-icon\">\ud83d\udcaa<\/span>\r\n              HDB Financial Services \u00b7 Milestone Achieved\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Controls -->\r\n    <div class=\"slider-controls\">\r\n      <button class=\"slider-nav\" id=\"prevBtn\" aria-label=\"Previous\">\u2039<\/button>\r\n\r\n      <div class=\"slider-dots\" id=\"sliderDots\">\r\n        <button class=\"dot active\" data-index=\"0\" aria-label=\"Story 1\"><\/button>\r\n        <button class=\"dot\" data-index=\"1\" aria-label=\"Story 2\"><\/button>\r\n        <button class=\"dot\" data-index=\"2\" aria-label=\"Story 3\"><\/button>\r\n        <button class=\"dot\" data-index=\"3\" aria-label=\"Story 4\"><\/button>\r\n      <\/div>\r\n\r\n      <button class=\"slider-nav\" id=\"nextBtn\" aria-label=\"Next\">\u203a<\/button>\r\n    <\/div>\r\n\r\n    <!-- CTA Button -->\r\n    <div class=\"stories-cta\">\r\n      <a href=\"#\" class=\"btn-stories\">\r\n        Read More Stories <span class=\"btn-arrow\">\u2192<\/span>\r\n      <\/a>\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('storiesTrack');\r\n    var dots = document.querySelectorAll('#sliderDots .dot');\r\n    var prevBtn = document.getElementById('prevBtn');\r\n    var nextBtn = document.getElementById('nextBtn');\r\n    var slides = track.querySelectorAll('.story-slide');\r\n    var totalSlides = slides.length;\r\n    var currentIndex = 0;\r\n    var isAnimating = false;\r\n    var autoplayInterval = null;\r\n    var autoplayDelay = 5000;\r\n\r\n    function goToSlide(index) {\r\n      if (isAnimating || index === currentIndex) return;\r\n      if (index < 0) index = totalSlides - 1;\r\n      if (index >= totalSlides) index = 0;\r\n\r\n      isAnimating = true;\r\n      track.style.transform = 'translateX(-' + (index * 100) + '%)';\r\n\r\n      dots.forEach(function(dot, i) {\r\n        dot.classList.toggle('active', i === index);\r\n      });\r\n\r\n      currentIndex = index;\r\n\r\n      setTimeout(function() {\r\n        isAnimating = false;\r\n      }, 750);\r\n    }\r\n\r\n    \/\/ Dot click handlers\r\n    dots.forEach(function(dot) {\r\n      dot.addEventListener('click', function() {\r\n        var index = parseInt(this.getAttribute('data-index'));\r\n        goToSlide(index);\r\n        resetAutoplay();\r\n      });\r\n    });\r\n\r\n    \/\/ Nav buttons\r\n    prevBtn.addEventListener('click', function() {\r\n      goToSlide(currentIndex - 1);\r\n      resetAutoplay();\r\n    });\r\n\r\n    nextBtn.addEventListener('click', function() {\r\n      goToSlide(currentIndex + 1);\r\n      resetAutoplay();\r\n    });\r\n\r\n    \/\/ Keyboard navigation\r\n    document.addEventListener('keydown', function(e) {\r\n      var section = document.querySelector('.bgpr-stories-slider');\r\n      if (!section) return;\r\n      var rect = section.getBoundingClientRect();\r\n      if (e.key === 'ArrowLeft' && rect.top < window.innerHeight && rect.bottom > 0) {\r\n        e.preventDefault();\r\n        goToSlide(currentIndex - 1);\r\n        resetAutoplay();\r\n      } else if (e.key === 'ArrowRight' && rect.top < window.innerHeight && rect.bottom > 0) {\r\n        e.preventDefault();\r\n        goToSlide(currentIndex + 1);\r\n        resetAutoplay();\r\n      }\r\n    });\r\n\r\n    \/\/ Touch swipe\r\n    var touchStartX = 0;\r\n    var touchEndX = 0;\r\n    var sliderWrapper = document.querySelector('.bgpr-stories-slider .slider-wrapper');\r\n\r\n    sliderWrapper.addEventListener('touchstart', function(e) {\r\n      touchStartX = e.changedTouches[0].screenX;\r\n    }, { passive: true });\r\n\r\n    sliderWrapper.addEventListener('touchend', function(e) {\r\n      touchEndX = e.changedTouches[0].screenX;\r\n      var diff = touchStartX - touchEndX;\r\n      if (Math.abs(diff) > 50) {\r\n        if (diff > 0) {\r\n          goToSlide(currentIndex + 1);\r\n        } else {\r\n          goToSlide(currentIndex - 1);\r\n        }\r\n        resetAutoplay();\r\n      }\r\n    }, { passive: true });\r\n\r\n    \/\/ Autoplay\r\n    function startAutoplay() {\r\n      if (autoplayInterval) clearInterval(autoplayInterval);\r\n      autoplayInterval = setInterval(function() {\r\n        goToSlide(currentIndex + 1);\r\n      }, autoplayDelay);\r\n    }\r\n\r\n    function resetAutoplay() {\r\n      if (autoplayInterval) {\r\n        clearInterval(autoplayInterval);\r\n        startAutoplay();\r\n      }\r\n    }\r\n\r\n    \/\/ Start autoplay\r\n    startAutoplay();\r\n\r\n    \/\/ Pause on hover\r\n    sliderWrapper.addEventListener('mouseenter', function() {\r\n      if (autoplayInterval) {\r\n        clearInterval(autoplayInterval);\r\n        autoplayInterval = null;\r\n      }\r\n    });\r\n\r\n    sliderWrapper.addEventListener('mouseleave', function() {\r\n      startAutoplay();\r\n    });\r\n\r\n    \/\/ Expose API\r\n    window.bgprStoriesSlider = {\r\n      goTo: goToSlide,\r\n      next: function() { goToSlide(currentIndex + 1); },\r\n      prev: function() { goToSlide(currentIndex - 1); },\r\n      current: function() { return currentIndex; }\r\n    };\r\n\r\n  })();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5e2ff6b elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"5e2ff6b\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-395cb67\" data-id=\"395cb67\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8f47844 elementor-widget elementor-widget-html\" data-id=\"8f47844\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     BARGACH \u00b7 GET INVOLVED \u2013 SEMI-DARK WITH COLORFUL ACCENTS\r\n     Image cards with hover popup showing details & buttons.\r\n     Animated text, Google Maps popup, QR code.\r\n     Semi-dark background with warm vibrant highlights.\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  .bgpr-getinvolved {\r\n    --ink: #1f2a26;\r\n    --teal: #2a9d8f;\r\n    --teal-2: #1a7a6b;\r\n    --teal-light: #3ab0a0;\r\n    --mint: #f5f2eb;\r\n    --gold: #e8a84c;\r\n    --gold-2: #f0c97e;\r\n    --coral: #e07a5f;\r\n    --coral-light: #f0a38c;\r\n    --lavender: #9b8ec4;\r\n    --text-dark: #1f2a26;\r\n    --text-body: #4a5a52;\r\n    --text-muted: #8a9e93;\r\n    --text-muted-2: #bcdbd3;\r\n    --line: rgba(255, 255, 255, 0.06);\r\n    --bg-dark: #0f1a16;\r\n    --bg-card: rgba(20, 35, 30, 0.85);\r\n\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    min-height: 100vh;\r\n    font-family: var(--sans);\r\n    overflow: hidden;\r\n    background: var(--bg-dark);\r\n    color: #fff;\r\n    padding: 0;\r\n    margin: 0;\r\n  }\r\n  .bgpr-getinvolved *,\r\n  .bgpr-getinvolved *::before,\r\n  .bgpr-getinvolved *::after {\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  \/* ========== BACKGROUND ========== *\/\r\n  .bgpr-getinvolved .gi-bg {\r\n    position: absolute;\r\n    inset: 0;\r\n    z-index: 0;\r\n    background: url('https:\/\/images.unsplash.com\/photo-1488521787991-ed7bbaae773c?q=80&w=2070&auto=format&fit=crop') center 35% \/ cover no-repeat;\r\n    filter: brightness(0.25) saturate(0.7) contrast(1.05);\r\n    transform: scale(1.02);\r\n    transition: transform 0.2s ease-out;\r\n    opacity: 0.6;\r\n  }\r\n  .bgpr-getinvolved .gi-overlay {\r\n    position: absolute;\r\n    inset: 0;\r\n    z-index: 1;\r\n    background:\r\n      radial-gradient(ellipse at 30% 20%, rgba(15, 26, 22, 0.40) 0%, rgba(15, 26, 22, 0.70) 60%, rgba(15, 26, 22, 0.92) 100%),\r\n      radial-gradient(ellipse at 70% 80%, rgba(42, 157, 143, 0.06) 0%, transparent 60%);\r\n    pointer-events: none;\r\n  }\r\n  .bgpr-getinvolved .gi-glow {\r\n    position: absolute;\r\n    z-index: 1;\r\n    pointer-events: none;\r\n    width: 50vw;\r\n    height: 50vw;\r\n    max-width: 600px;\r\n    max-height: 600px;\r\n    top: -5%;\r\n    right: -5%;\r\n    background: radial-gradient(circle, rgba(232, 168, 76, 0.06) 0%, rgba(232, 168, 76, 0.02) 50%, transparent 75%);\r\n    filter: blur(60px);\r\n  }\r\n\r\n  \/* ========== CONTAINER ========== *\/\r\n  .bgpr-getinvolved .gi-container {\r\n    position: relative;\r\n    z-index: 2;\r\n    max-width: 1400px;\r\n    margin: 0 auto;\r\n    padding: clamp(40px, 5vw, 70px) clamp(22px, 4.5vw, 56px);\r\n  }\r\n\r\n  \/* ========== HEADER ========== *\/\r\n  .bgpr-getinvolved .gi-header {\r\n    text-align: center;\r\n    margin-bottom: clamp(40px, 5vw, 60px);\r\n  }\r\n  .bgpr-getinvolved .gi-tag {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    font-size: 11.5px;\r\n    font-weight: 600;\r\n    letter-spacing: 0.18em;\r\n    text-transform: uppercase;\r\n    color: var(--gold);\r\n    margin: 0 0 12px;\r\n  }\r\n  .bgpr-getinvolved .gi-tag::before,\r\n  .bgpr-getinvolved .gi-tag::after {\r\n    content: \"\";\r\n    width: 30px;\r\n    height: 1px;\r\n    background: var(--gold);\r\n    display: inline-block;\r\n  }\r\n  .bgpr-getinvolved .gi-header h2 {\r\n    font-family: var(--serif);\r\n    font-weight: 380;\r\n    font-size: clamp(34px, 4.4vw, 56px);\r\n    line-height: 1.08;\r\n    margin: 0;\r\n    color: #fff;\r\n    text-shadow: 0 0 30px rgba(232, 168, 76, 0.05);\r\n  }\r\n  .bgpr-getinvolved .gi-header h2 .highlight {\r\n    color: var(--gold);\r\n    text-shadow: 0 0 40px rgba(232, 168, 76, 0.10);\r\n  }\r\n  .bgpr-getinvolved .gi-header .gi-sub {\r\n    font-size: clamp(15px, 1.2vw, 18px);\r\n    color: var(--text-muted-2);\r\n    font-weight: 300;\r\n    max-width: 560px;\r\n    margin: 12px auto 0;\r\n    line-height: 1.6;\r\n  }\r\n\r\n  \/* ========== 3 COLUMN IMAGE CARDS ========== *\/\r\n  .bgpr-getinvolved .gi-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(3, 1fr);\r\n    gap: clamp(20px, 2.5vw, 32px);\r\n    margin-bottom: clamp(50px, 6vw, 80px);\r\n  }\r\n\r\n  .bgpr-getinvolved .gi-card {\r\n    position: relative;\r\n    border-radius: 24px;\r\n    overflow: hidden;\r\n    aspect-ratio: 4\/5;\r\n    min-height: 380px;\r\n    cursor: pointer;\r\n    transition: transform 0.5s cubic-bezier(.22, .68, .2, 1), box-shadow 0.5s ease;\r\n    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.20);\r\n    border: 1px solid rgba(255, 255, 255, 0.04);\r\n  }\r\n  .bgpr-getinvolved .gi-card:hover {\r\n    transform: translateY(-8px) scale(1.01);\r\n    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.40);\r\n    border-color: rgba(232, 168, 76, 0.10);\r\n  }\r\n\r\n  .bgpr-getinvolved .gi-card .card-bg {\r\n    position: absolute;\r\n    inset: 0;\r\n    z-index: 0;\r\n    background-size: cover;\r\n    background-position: center;\r\n    transition: transform 0.7s cubic-bezier(.22, .68, .2, 1);\r\n  }\r\n  .bgpr-getinvolved .gi-card:hover .card-bg {\r\n    transform: scale(1.08);\r\n  }\r\n\r\n  .bgpr-getinvolved .gi-card .card-overlay {\r\n    position: absolute;\r\n    inset: 0;\r\n    z-index: 1;\r\n    background: linear-gradient(180deg, rgba(15, 26, 22, 0.10) 0%, rgba(15, 26, 22, 0.55) 50%, rgba(15, 26, 22, 0.85) 100%);\r\n    transition: background 0.5s ease;\r\n  }\r\n  .bgpr-getinvolved .gi-card:hover .card-overlay {\r\n    background: linear-gradient(180deg, rgba(15, 26, 22, 0.05) 0%, rgba(15, 26, 22, 0.45) 50%, rgba(15, 26, 22, 0.80) 100%);\r\n  }\r\n\r\n  .bgpr-getinvolved .gi-card .card-content {\r\n    position: absolute;\r\n    bottom: 0;\r\n    left: 0;\r\n    right: 0;\r\n    z-index: 2;\r\n    padding: clamp(24px, 3vw, 40px) clamp(20px, 2.5vw, 32px);\r\n  }\r\n\r\n  .bgpr-getinvolved .gi-card .card-icon {\r\n    width: 56px;\r\n    height: 56px;\r\n    border-radius: 50%;\r\n    background: rgba(232, 168, 76, 0.10);\r\n    border: 1px solid rgba(232, 168, 76, 0.12);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-size: 24px;\r\n    margin-bottom: 12px;\r\n    backdrop-filter: blur(4px);\r\n    -webkit-backdrop-filter: blur(4px);\r\n    transition: all 0.3s ease;\r\n  }\r\n  .bgpr-getinvolved .gi-card:hover .card-icon {\r\n    background: rgba(232, 168, 76, 0.18);\r\n    border-color: var(--gold);\r\n    transform: scale(1.05);\r\n  }\r\n\r\n  .bgpr-getinvolved .gi-card .card-title {\r\n    font-family: var(--serif);\r\n    font-weight: 560;\r\n    font-size: clamp(26px, 2.8vw, 36px);\r\n    color: #fff;\r\n    margin: 0 0 8px;\r\n  }\r\n  .bgpr-getinvolved .gi-card .card-title .highlight {\r\n    color: var(--gold-2);\r\n  }\r\n  .bgpr-getinvolved .gi-card .card-desc {\r\n    font-size: clamp(13px, 0.95vw, 15px);\r\n    line-height: 1.6;\r\n    color: var(--text-muted-2);\r\n    font-weight: 300;\r\n    margin: 0 0 16px;\r\n    max-width: 90%;\r\n    opacity: 0.8;\r\n  }\r\n\r\n  .bgpr-getinvolved .gi-card .card-btn {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    padding: 10px 24px;\r\n    border-radius: 999px;\r\n    background: var(--gold);\r\n    color: var(--bg-dark);\r\n    font-size: 13px;\r\n    font-weight: 600;\r\n    text-decoration: none;\r\n    transition: all 0.3s ease;\r\n    border: none;\r\n    cursor: pointer;\r\n    font-family: var(--sans);\r\n  }\r\n  .bgpr-getinvolved .gi-card .card-btn:hover {\r\n    transform: translateY(-2px);\r\n    box-shadow: 0 8px 30px rgba(232, 168, 76, 0.30);\r\n  }\r\n  .bgpr-getinvolved .gi-card .card-btn .btn-arrow {\r\n    display: inline-block;\r\n    transition: transform 0.3s ease;\r\n  }\r\n  .bgpr-getinvolved .gi-card .card-btn:hover .btn-arrow {\r\n    transform: translateX(4px);\r\n  }\r\n  .bgpr-getinvolved .gi-card .card-btn.outline {\r\n    background: transparent;\r\n    color: #fff;\r\n    border: 1px solid rgba(255, 255, 255, 0.12);\r\n  }\r\n  .bgpr-getinvolved .gi-card .card-btn.outline:hover {\r\n    background: rgba(255, 255, 255, 0.06);\r\n    border-color: var(--gold);\r\n    box-shadow: none;\r\n  }\r\n\r\n  \/* ========== CARD IMAGES ========== *\/\r\n  .bgpr-getinvolved .gi-card.donate .card-bg {\r\n    background-image: url('https:\/\/up.freshosoft.work\/bargach\/wp-content\/uploads\/2026\/08\/Real.jpeg');\r\n  }\r\n  .bgpr-getinvolved .gi-card.volunteer .card-bg {\r\n    background-image: url('https:\/\/up.freshosoft.work\/bargach\/wp-content\/uploads\/2026\/08\/rerete.jpeg');\r\n  }\r\n  .bgpr-getinvolved .gi-card.partner .card-bg {\r\n    background-image: url('https:\/\/up.freshosoft.work\/bargach\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2026-02-23-at-1.59.51-PM.jpeg');\r\n  }\r\n\r\n  \/* ========== FINAL CTA \u2013 IMAGE CARDS WITH POPUP ========== *\/\r\n  .bgpr-getinvolved .gi-final-cta {\r\n    padding: clamp(40px, 5vw, 60px) 0 clamp(30px, 4vw, 44px);\r\n    border-top: 1px solid var(--line);\r\n    border-bottom: 1px solid var(--line);\r\n    margin-bottom: clamp(40px, 5vw, 60px);\r\n  }\r\n\r\n  .bgpr-getinvolved .gi-final-cta .cta-header {\r\n    text-align: center;\r\n    margin-bottom: clamp(30px, 3vw, 44px);\r\n  }\r\n  .bgpr-getinvolved .gi-final-cta .cta-tag {\r\n    font-size: 11.5px;\r\n    font-weight: 600;\r\n    letter-spacing: 0.18em;\r\n    text-transform: uppercase;\r\n    color: var(--gold);\r\n    margin: 0 0 8px;\r\n  }\r\n  .bgpr-getinvolved .gi-final-cta .cta-header h3 {\r\n    font-family: var(--serif);\r\n    font-weight: 380;\r\n    font-size: clamp(28px, 3.5vw, 44px);\r\n    color: #fff;\r\n    margin: 0 0 12px;\r\n  }\r\n  .bgpr-getinvolved .gi-final-cta .cta-header h3 .highlight {\r\n    color: var(--gold);\r\n  }\r\n\r\n  .bgpr-getinvolved .gi-final-cta .cta-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(2, 1fr);\r\n    gap: clamp(20px, 2.5vw, 32px);\r\n    max-width: 900px;\r\n    margin: 0 auto;\r\n  }\r\n\r\n  \/* ========== CTA IMAGE CARDS WITH POPUP ========== *\/\r\n  .bgpr-getinvolved .gi-final-cta .cta-img-card {\r\n    position: relative;\r\n    border-radius: 20px;\r\n    overflow: hidden;\r\n    aspect-ratio: 16\/10;\r\n    min-height: 200px;\r\n    cursor: pointer;\r\n    transition: transform 0.5s cubic-bezier(.22, .68, .2, 1), box-shadow 0.5s ease;\r\n    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.20);\r\n    border: 1px solid rgba(255, 255, 255, 0.04);\r\n  }\r\n  .bgpr-getinvolved .gi-final-cta .cta-img-card:hover {\r\n    transform: translateY(-6px);\r\n    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.40);\r\n    border-color: rgba(232, 168, 76, 0.08);\r\n  }\r\n\r\n  .bgpr-getinvolved .gi-final-cta .cta-img-card .card-bg {\r\n    position: absolute;\r\n    inset: 0;\r\n    z-index: 0;\r\n    background-size: cover;\r\n    background-position: center;\r\n    transition: transform 0.7s cubic-bezier(.22, .68, .2, 1);\r\n  }\r\n  .bgpr-getinvolved .gi-final-cta .cta-img-card:hover .card-bg {\r\n    transform: scale(1.08);\r\n  }\r\n\r\n  .bgpr-getinvolved .gi-final-cta .cta-img-card .card-overlay {\r\n    position: absolute;\r\n    inset: 0;\r\n    z-index: 1;\r\n    background: linear-gradient(180deg, rgba(15, 26, 22, 0.15) 0%, rgba(15, 26, 22, 0.55) 60%, rgba(15, 26, 22, 0.85) 100%);\r\n    transition: background 0.5s ease;\r\n  }\r\n  .bgpr-getinvolved .gi-final-cta .cta-img-card:hover .card-overlay {\r\n    background: linear-gradient(180deg, rgba(15, 26, 22, 0.08) 0%, rgba(15, 26, 22, 0.45) 50%, rgba(15, 26, 22, 0.80) 100%);\r\n  }\r\n\r\n  .bgpr-getinvolved .gi-final-cta .cta-img-card .card-content {\r\n    position: absolute;\r\n    bottom: 0;\r\n    left: 0;\r\n    right: 0;\r\n    z-index: 2;\r\n    padding: clamp(20px, 2.5vw, 32px) clamp(20px, 2.5vw, 28px);\r\n  }\r\n  .bgpr-getinvolved .gi-final-cta .cta-img-card .card-content .card-label {\r\n    font-size: 10px;\r\n    font-weight: 600;\r\n    letter-spacing: 0.12em;\r\n    text-transform: uppercase;\r\n    color: var(--gold-2);\r\n    margin: 0 0 4px;\r\n  }\r\n  .bgpr-getinvolved .gi-final-cta .cta-img-card .card-content .card-title-sm {\r\n    font-family: var(--serif);\r\n    font-weight: 560;\r\n    font-size: clamp(22px, 2.2vw, 30px);\r\n    color: #fff;\r\n    margin: 0 0 6px;\r\n  }\r\n\r\n  \/* Popup content - hidden by default, shows on hover *\/\r\n  .bgpr-getinvolved .gi-final-cta .cta-img-card .card-popup {\r\n    max-height: 0;\r\n    overflow: hidden;\r\n    opacity: 0;\r\n    transform: translateY(10px);\r\n    transition: all 0.5s cubic-bezier(.22, .68, .2, 1);\r\n  }\r\n  .bgpr-getinvolved .gi-final-cta .cta-img-card:hover .card-popup {\r\n    max-height: 300px;\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n\r\n  .bgpr-getinvolved .gi-final-cta .cta-img-card .card-popup .popup-desc {\r\n    font-size: clamp(13px, 0.9vw, 14.5px);\r\n    color: var(--text-muted-2);\r\n    font-weight: 300;\r\n    line-height: 1.5;\r\n    margin: 0 0 10px;\r\n    max-width: 95%;\r\n  }\r\n  .bgpr-getinvolved .gi-final-cta .cta-img-card .card-popup .popup-actions {\r\n    display: flex;\r\n    gap: 10px;\r\n    flex-wrap: wrap;\r\n    margin-top: 6px;\r\n  }\r\n  .bgpr-getinvolved .gi-final-cta .cta-img-card .card-popup .popup-actions .popup-btn {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 6px;\r\n    padding: 8px 18px;\r\n    border-radius: 999px;\r\n    font-size: 12px;\r\n    font-weight: 600;\r\n    text-decoration: none;\r\n    transition: all 0.3s ease;\r\n    font-family: var(--sans);\r\n    border: none;\r\n    cursor: pointer;\r\n  }\r\n  .bgpr-getinvolved .gi-final-cta .cta-img-card .card-popup .popup-actions .popup-btn.primary {\r\n    background: var(--gold);\r\n    color: var(--bg-dark);\r\n  }\r\n  .bgpr-getinvolved .gi-final-cta .cta-img-card .card-popup .popup-actions .popup-btn.primary:hover {\r\n    transform: translateY(-2px);\r\n    box-shadow: 0 8px 20px rgba(232, 168, 76, 0.30);\r\n  }\r\n  .bgpr-getinvolved .gi-final-cta .cta-img-card .card-popup .popup-actions .popup-btn.outline {\r\n    background: transparent;\r\n    color: #fff;\r\n    border: 1px solid rgba(255, 255, 255, 0.12);\r\n  }\r\n  .bgpr-getinvolved .gi-final-cta .cta-img-card .card-popup .popup-actions .popup-btn.outline:hover {\r\n    background: rgba(255, 255, 255, 0.06);\r\n    border-color: var(--gold);\r\n  }\r\n  .bgpr-getinvolved .gi-final-cta .cta-img-card .card-popup .popup-actions .popup-btn .btn-arrow {\r\n    display: inline-block;\r\n    transition: transform 0.3s ease;\r\n  }\r\n  .bgpr-getinvolved .gi-final-cta .cta-img-card .card-popup .popup-actions .popup-btn:hover .btn-arrow {\r\n    transform: translateX(4px);\r\n  }\r\n\r\n  \/* CTA card images *\/\r\n  .bgpr-getinvolved .gi-final-cta .cta-img-card.donate-now .card-bg {\r\n    background-image: url('https:\/\/up.freshosoft.work\/bargach\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2026-06-16-at-13.53.35.jpeg');\r\n  }\r\n  .bgpr-getinvolved .gi-final-cta .cta-img-card.our-programs .card-bg {\r\n    background-image: url('https:\/\/up.freshosoft.work\/bargach\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2026-06-18-at-2.46.29-PM.jpeg');\r\n  }\r\n\r\n  \/* ========== CONTACT SECTION ========== *\/\r\n  .bgpr-getinvolved .gi-contact {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1.2fr;\r\n    gap: clamp(30px, 4vw, 50px);\r\n    background: rgba(255, 255, 255, 0.03);\r\n    backdrop-filter: blur(12px);\r\n    -webkit-backdrop-filter: blur(12px);\r\n    border-radius: 24px;\r\n    border: 1px solid rgba(255, 255, 255, 0.04);\r\n    padding: clamp(30px, 4vw, 48px) clamp(28px, 3.5vw, 44px);\r\n    position: relative;\r\n    overflow: hidden;\r\n  }\r\n  .bgpr-getinvolved .gi-contact::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    top: -50%;\r\n    right: -20%;\r\n    width: 60%;\r\n    height: 200%;\r\n    background: radial-gradient(ellipse, rgba(232, 168, 76, 0.02), transparent 70%);\r\n    pointer-events: none;\r\n  }\r\n\r\n  .bgpr-getinvolved .gi-contact-left {\r\n    position: relative;\r\n    z-index: 1;\r\n  }\r\n  .bgpr-getinvolved .gi-contact-left .contact-tag {\r\n    font-size: 11px;\r\n    font-weight: 600;\r\n    letter-spacing: 0.18em;\r\n    text-transform: uppercase;\r\n    color: var(--gold);\r\n    margin: 0 0 8px;\r\n  }\r\n  .bgpr-getinvolved .gi-contact-left .contact-image {\r\n    width: 100%;\r\n    max-height: 180px;\r\n    border-radius: 16px;\r\n    overflow: hidden;\r\n    margin-bottom: 16px;\r\n    border: 1px solid rgba(255, 255, 255, 0.04);\r\n  }\r\n  .bgpr-getinvolved .gi-contact-left .contact-image img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n    display: block;\r\n    transition: transform 0.5s ease;\r\n  }\r\n  .bgpr-getinvolved .gi-contact-left .contact-image:hover img {\r\n    transform: scale(1.03);\r\n  }\r\n\r\n  \/* Animated Text *\/\r\n  .bgpr-getinvolved .gi-contact-left .animated-text {\r\n    overflow: hidden;\r\n  }\r\n  .bgpr-getinvolved .gi-contact-left .animated-text h4 {\r\n    font-family: var(--serif);\r\n    font-weight: 380;\r\n    font-size: clamp(24px, 2.8vw, 36px);\r\n    color: #fff;\r\n    margin: 0 0 12px;\r\n    line-height: 1.1;\r\n  }\r\n  .bgpr-getinvolved .gi-contact-left .animated-text h4 .highlight {\r\n    color: var(--gold);\r\n  }\r\n  .bgpr-getinvolved .gi-contact-left .animated-text h4 .word {\r\n    display: inline-block;\r\n    opacity: 0;\r\n    transform: translateY(20px);\r\n    animation: wordFadeIn 0.6s cubic-bezier(.22, .68, .2, 1) forwards;\r\n  }\r\n  .bgpr-getinvolved .gi-contact-left .animated-text h4 .word:nth-child(1) { animation-delay: 0.1s; }\r\n  .bgpr-getinvolved .gi-contact-left .animated-text h4 .word:nth-child(2) { animation-delay: 0.2s; }\r\n  .bgpr-getinvolved .gi-contact-left .animated-text h4 .word:nth-child(3) { animation-delay: 0.3s; }\r\n  .bgpr-getinvolved .gi-contact-left .animated-text h4 .word:nth-child(4) { animation-delay: 0.4s; }\r\n  .bgpr-getinvolved .gi-contact-left .animated-text h4 .word:nth-child(5) { animation-delay: 0.5s; }\r\n  .bgpr-getinvolved .gi-contact-left .animated-text h4 .word:nth-child(6) { animation-delay: 0.6s; }\r\n  .bgpr-getinvolved .gi-contact-left .animated-text h4 .word:nth-child(7) { animation-delay: 0.7s; }\r\n  .bgpr-getinvolved .gi-contact-left .animated-text h4 .word:nth-child(8) { animation-delay: 0.8s; }\r\n  .bgpr-getinvolved .gi-contact-left .animated-text h4 .word:nth-child(9) { animation-delay: 0.9s; }\r\n  .bgpr-getinvolved .gi-contact-left .animated-text h4 .word:nth-child(10) { animation-delay: 1.0s; }\r\n  .bgpr-getinvolved .gi-contact-left .animated-text h4 .word:nth-child(11) { animation-delay: 1.1s; }\r\n  .bgpr-getinvolved .gi-contact-left .animated-text h4 .word:nth-child(12) { animation-delay: 1.2s; }\r\n\r\n  @keyframes wordFadeIn {\r\n    from { opacity: 0; transform: translateY(20px); }\r\n    to { opacity: 1; transform: translateY(0); }\r\n  }\r\n\r\n  .bgpr-getinvolved .gi-contact-left .contact-sub {\r\n    font-size: clamp(14px, 1vw, 16px);\r\n    color: var(--text-muted-2);\r\n    font-weight: 300;\r\n    margin: 0 0 20px;\r\n    line-height: 1.6;\r\n  }\r\n  .bgpr-getinvolved .gi-contact-left .contact-btn {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    padding: 12px 28px;\r\n    border-radius: 999px;\r\n    background: var(--gold);\r\n    color: var(--bg-dark);\r\n    font-size: 13px;\r\n    font-weight: 600;\r\n    text-decoration: none;\r\n    transition: all 0.3s ease;\r\n    border: none;\r\n    cursor: pointer;\r\n    font-family: var(--sans);\r\n  }\r\n  .bgpr-getinvolved .gi-contact-left .contact-btn:hover {\r\n    transform: translateY(-2px);\r\n    box-shadow: 0 8px 30px rgba(232, 168, 76, 0.30);\r\n  }\r\n  .bgpr-getinvolved .gi-contact-left .contact-btn .btn-arrow {\r\n    display: inline-block;\r\n    transition: transform 0.3s ease;\r\n  }\r\n  .bgpr-getinvolved .gi-contact-left .contact-btn:hover .btn-arrow {\r\n    transform: translateX(4px);\r\n  }\r\n\r\n  .bgpr-getinvolved .gi-contact-right {\r\n    position: relative;\r\n    z-index: 1;\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    gap: 16px 24px;\r\n  }\r\n  .bgpr-getinvolved .gi-contact-right .contact-item {\r\n    padding: 12px 0;\r\n    border-bottom: 1px solid var(--line);\r\n  }\r\n  .bgpr-getinvolved .gi-contact-right .contact-item .item-label {\r\n    font-size: 10px;\r\n    font-weight: 600;\r\n    letter-spacing: 0.12em;\r\n    text-transform: uppercase;\r\n    color: var(--gold);\r\n    margin: 0 0 4px;\r\n  }\r\n  .bgpr-getinvolved .gi-contact-right .contact-item .item-value {\r\n    font-size: clamp(13px, 0.95vw, 15px);\r\n    color: #fff;\r\n    font-weight: 400;\r\n    line-height: 1.4;\r\n  }\r\n  .bgpr-getinvolved .gi-contact-right .contact-item .item-value a {\r\n    color: var(--text-muted-2);\r\n    text-decoration: none;\r\n    transition: color 0.3s ease;\r\n  }\r\n  .bgpr-getinvolved .gi-contact-right .contact-item .item-value a:hover {\r\n    color: var(--gold);\r\n  }\r\n  .bgpr-getinvolved .gi-contact-right .contact-item .item-value .map-link {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 6px;\r\n    font-size: 12px;\r\n    color: var(--gold);\r\n    text-decoration: none;\r\n    margin-top: 4px;\r\n    transition: all 0.3s ease;\r\n    cursor: pointer;\r\n    border: none;\r\n    background: none;\r\n    font-family: var(--sans);\r\n    padding: 0;\r\n  }\r\n  .bgpr-getinvolved .gi-contact-right .contact-item .item-value .map-link:hover {\r\n    color: var(--gold-2);\r\n    gap: 10px;\r\n  }\r\n  .bgpr-getinvolved .gi-contact-right .contact-item.full {\r\n    grid-column: 1 \/ -1;\r\n  }\r\n\r\n  \/* ========== MAP POPUP ========== *\/\r\n  .bgpr-getinvolved .map-popup-overlay {\r\n    position: fixed;\r\n    inset: 0;\r\n    z-index: 999;\r\n    background: rgba(15, 26, 22, 0.88);\r\n    backdrop-filter: blur(16px);\r\n    -webkit-backdrop-filter: blur(16px);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    opacity: 0;\r\n    pointer-events: none;\r\n    transition: opacity 0.5s cubic-bezier(.22, .68, .2, 1);\r\n    padding: 20px;\r\n  }\r\n  .bgpr-getinvolved .map-popup-overlay.active {\r\n    opacity: 1;\r\n    pointer-events: auto;\r\n  }\r\n  .bgpr-getinvolved .map-popup-content {\r\n    background: #1a2a24;\r\n    border-radius: 24px;\r\n    max-width: 820px;\r\n    width: 100%;\r\n    max-height: 90vh;\r\n    overflow: hidden;\r\n    transform: scale(0.92) translateY(20px);\r\n    transition: transform 0.5s cubic-bezier(.22, .68, .2, 1);\r\n    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.4);\r\n    position: relative;\r\n    border: 1px solid rgba(255, 255, 255, 0.04);\r\n  }\r\n  .bgpr-getinvolved .map-popup-overlay.active .map-popup-content {\r\n    transform: scale(1) translateY(0);\r\n  }\r\n  .bgpr-getinvolved .map-popup-close {\r\n    position: absolute;\r\n    top: 16px;\r\n    right: 20px;\r\n    z-index: 10;\r\n    background: rgba(255, 255, 255, 0.06);\r\n    border: none;\r\n    color: #fff;\r\n    width: 44px;\r\n    height: 44px;\r\n    border-radius: 50%;\r\n    font-size: 24px;\r\n    cursor: pointer;\r\n    transition: all 0.3s ease;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-family: 'Inter', sans-serif;\r\n    backdrop-filter: blur(4px);\r\n    -webkit-backdrop-filter: blur(4px);\r\n  }\r\n  .bgpr-getinvolved .map-popup-close:hover {\r\n    background: var(--gold);\r\n    color: var(--bg-dark);\r\n    transform: rotate(90deg);\r\n  }\r\n  .bgpr-getinvolved .map-popup-body {\r\n    padding: 24px 28px 28px;\r\n  }\r\n  .bgpr-getinvolved .map-popup-body iframe {\r\n    width: 100%;\r\n    height: 400px;\r\n    border-radius: 16px;\r\n    border: none;\r\n  }\r\n  .bgpr-getinvolved .map-popup-body .map-address {\r\n    margin-top: 16px;\r\n    font-size: 14px;\r\n    color: var(--text-muted-2);\r\n    line-height: 1.6;\r\n  }\r\n  .bgpr-getinvolved .map-popup-body .map-address strong {\r\n    color: #fff;\r\n  }\r\n\r\n  \/* QR Code Box *\/\r\n  .bgpr-getinvolved .gi-contact-right .qr-box {\r\n    background: rgba(255, 255, 255, 0.03);\r\n    border-radius: 16px;\r\n    padding: 16px;\r\n    text-align: center;\r\n    border: 1px solid var(--line);\r\n    grid-column: 1 \/ -1;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 20px;\r\n  }\r\n  .bgpr-getinvolved .gi-contact-right .qr-box .qr-code {\r\n    width: 100px;\r\n    height: 100px;\r\n    background: #fff;\r\n    border-radius: 12px;\r\n    padding: 8px;\r\n    flex-shrink: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    overflow: hidden;\r\n  }\r\n  .bgpr-getinvolved .gi-contact-right .qr-box .qr-code img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: contain;\r\n  }\r\n  .bgpr-getinvolved .gi-contact-right .qr-box .qr-info {\r\n    text-align: left;\r\n  }\r\n  .bgpr-getinvolved .gi-contact-right .qr-box .qr-info .qr-label {\r\n    font-size: 10px;\r\n    font-weight: 600;\r\n    letter-spacing: 0.12em;\r\n    text-transform: uppercase;\r\n    color: var(--gold);\r\n    margin: 0 0 4px;\r\n  }\r\n  .bgpr-getinvolved .gi-contact-right .qr-box .qr-info .qr-text {\r\n    font-size: 13px;\r\n    color: var(--text-muted-2);\r\n    font-weight: 300;\r\n    margin: 0;\r\n  }\r\n  .bgpr-getinvolved .gi-contact-right .qr-box .qr-info .qr-text strong {\r\n    color: #fff;\r\n    font-weight: 400;\r\n  }\r\n\r\n  \/* ========== RESPONSIVE ========== *\/\r\n  @media (max-width: 1024px) {\r\n    .bgpr-getinvolved .gi-grid { gap: 20px; }\r\n    .bgpr-getinvolved .gi-contact { grid-template-columns: 1fr; gap: 24px; }\r\n    .bgpr-getinvolved .gi-contact-right { grid-template-columns: 1fr 1fr; }\r\n    .bgpr-getinvolved .gi-card { min-height: 320px; aspect-ratio: 4\/4.5; }\r\n    .bgpr-getinvolved .gi-contact-right .qr-box { flex-direction: column; text-align: center; }\r\n    .bgpr-getinvolved .gi-contact-right .qr-box .qr-info { text-align: center; }\r\n    .bgpr-getinvolved .gi-final-cta .cta-grid { grid-template-columns: 1fr; max-width: 480px; }\r\n  }\r\n\r\n  @media (max-width: 768px) {\r\n    .bgpr-getinvolved .gi-grid { grid-template-columns: 1fr; gap: 16px; max-width: 480px; margin: 0 auto 40px; }\r\n    .bgpr-getinvolved .gi-card { min-height: 280px; aspect-ratio: 16\/9; }\r\n    .bgpr-getinvolved .gi-card .card-desc { max-width: 100%; }\r\n    .bgpr-getinvolved .gi-contact { padding: 24px 20px; }\r\n    .bgpr-getinvolved .gi-contact-right { grid-template-columns: 1fr; gap: 8px; }\r\n    .bgpr-getinvolved .gi-contact-right .contact-item.full { grid-column: 1; }\r\n    .bgpr-getinvolved .gi-contact-right .qr-box { flex-direction: row; text-align: left; padding: 12px; }\r\n    .bgpr-getinvolved .gi-contact-right .qr-box .qr-info { text-align: left; }\r\n    .bgpr-getinvolved .gi-header h2 { font-size: clamp(28px, 7vw, 38px); }\r\n    .bgpr-getinvolved .gi-contact-left .contact-image { max-height: 140px; }\r\n    .bgpr-getinvolved .gi-final-cta .cta-grid { grid-template-columns: 1fr; max-width: 400px; }\r\n    .bgpr-getinvolved .gi-final-cta .cta-img-card { min-height: 180px; }\r\n  }\r\n\r\n  @media (max-width: 480px) {\r\n    .bgpr-getinvolved .gi-container { padding: 24px 16px; }\r\n    .bgpr-getinvolved .gi-card { min-height: 220px; aspect-ratio: 16\/9; }\r\n    .bgpr-getinvolved .gi-card .card-icon { width: 44px; height: 44px; font-size: 18px; }\r\n    .bgpr-getinvolved .gi-card .card-title { font-size: clamp(20px, 5vw, 26px); }\r\n    .bgpr-getinvolved .gi-final-cta .cta-header h3 { font-size: clamp(24px, 6vw, 32px); }\r\n    .bgpr-getinvolved .gi-contact-left h4 { font-size: clamp(22px, 5vw, 28px); }\r\n    .bgpr-getinvolved .gi-card .card-desc { font-size: 12px; }\r\n    .bgpr-getinvolved .gi-contact-right .qr-box { flex-direction: column; text-align: center; }\r\n    .bgpr-getinvolved .gi-contact-right .qr-box .qr-info { text-align: center; }\r\n    .bgpr-getinvolved .gi-contact-right .qr-box .qr-code { width: 80px; height: 80px; }\r\n    .bgpr-getinvolved .gi-final-cta .cta-img-card { min-height: 160px; }\r\n    .bgpr-getinvolved .gi-final-cta .cta-img-card .card-content .card-title-sm { font-size: clamp(18px, 4vw, 24px); }\r\n    .bgpr-getinvolved .map-popup-body iframe { height: 250px; }\r\n  }\r\n\r\n  \/* Reduced Motion *\/\r\n  @media (prefers-reduced-motion: reduce) {\r\n    .bgpr-getinvolved * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }\r\n    .bgpr-getinvolved .gi-card:hover { transform: none !important; }\r\n    .bgpr-getinvolved .gi-final-cta .cta-img-card:hover { transform: none !important; }\r\n    .bgpr-getinvolved .gi-final-cta .cta-img-card .card-popup { max-height: 300px !important; opacity: 1 !important; transform: none !important; }\r\n    .bgpr-getinvolved .gi-contact-left .animated-text h4 .word { opacity: 1 !important; transform: none !important; animation: none !important; }\r\n    .bgpr-getinvolved .gi-bg { transform: none !important; }\r\n  }\r\n<\/style>\r\n\r\n<!-- ============================================================\r\n     GET INVOLVED HTML \u2013 SEMI-DARK WITH COLORFUL ACCENTS\r\n     ============================================================ -->\r\n<section class=\"bgpr-getinvolved\" aria-label=\"Get Involved\">\r\n\r\n  <!-- Background -->\r\n  <div class=\"gi-bg\" aria-hidden=\"true\"><\/div>\r\n  <div class=\"gi-overlay\" aria-hidden=\"true\"><\/div>\r\n  <div class=\"gi-glow\" aria-hidden=\"true\"><\/div>\r\n\r\n  <div class=\"gi-container\">\r\n\r\n    <!-- Header -->\r\n    <div class=\"gi-header\">\r\n      <div class=\"gi-tag\">Your Part Matters<\/div>\r\n      <h2>There are many ways to <span class=\"highlight\">create change<\/span>.<\/h2>\r\n      <p class=\"gi-sub\">You can support our work with a donation, your time, your skills or a partnership.<\/p>\r\n    <\/div>\r\n\r\n    <!-- 3 Column Image Cards -->\r\n    <div class=\"gi-grid\">\r\n\r\n      <!-- Donate -->\r\n      <div class=\"gi-card donate\">\r\n        <div class=\"card-bg\" aria-hidden=\"true\"><\/div>\r\n        <div class=\"card-overlay\" aria-hidden=\"true\"><\/div>\r\n        <div class=\"card-content\">\r\n          <div class=\"card-icon\">\u2764\ufe0f<\/div>\r\n          <h3 class=\"card-title\"><span class=\"highlight\">Donate<\/span><\/h3>\r\n          <p class=\"card-desc\">Help support programmes focused on education, safe water, digital literacy, skill development and community empowerment.<\/p>\r\n          <a href=\"#\" class=\"card-btn\">Donate Now <span class=\"btn-arrow\">\u2192<\/span><\/a>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Volunteer -->\r\n      <div class=\"gi-card volunteer\">\r\n        <div class=\"card-bg\" aria-hidden=\"true\"><\/div>\r\n        <div class=\"card-overlay\" aria-hidden=\"true\"><\/div>\r\n        <div class=\"card-content\">\r\n          <div class=\"card-icon\">\ud83e\udd1d<\/div>\r\n          <h3 class=\"card-title\"><span class=\"highlight\">Volunteer<\/span><\/h3>\r\n          <p class=\"card-desc\">Share your time, experience or skills and become part of our community-focused work.<\/p>\r\n          <a href=\"#\" class=\"card-btn outline\">Volunteer With Us <span class=\"btn-arrow\">\u2192<\/span><\/a>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Partner -->\r\n      <div class=\"gi-card partner\">\r\n        <div class=\"card-bg\" aria-hidden=\"true\"><\/div>\r\n        <div class=\"card-overlay\" aria-hidden=\"true\"><\/div>\r\n        <div class=\"card-content\">\r\n          <div class=\"card-icon\">\ud83c\udf31<\/div>\r\n          <h3 class=\"card-title\"><span class=\"highlight\">Partner<\/span><\/h3>\r\n          <p class=\"card-desc\">Bring your organisation, resources and expertise together with our programmes to create greater social impact.<\/p>\r\n          <a href=\"#\" class=\"card-btn outline\">Partner With Us <span class=\"btn-arrow\">\u2192<\/span><\/a>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n    <!-- Final CTA \u2013 Image Cards with Popup Content -->\r\n    <div class=\"gi-final-cta\">\r\n      <div class=\"cta-header\">\r\n        <div class=\"cta-tag\">Be Part of the Story<\/div>\r\n        <h3>A better future starts with <span class=\"highlight\">what we do today<\/span>.<\/h3>\r\n      <\/div>\r\n\r\n      <div class=\"cta-grid\">\r\n        <!-- Donate Now Card -->\r\n        <div class=\"cta-img-card donate-now\">\r\n          <div class=\"card-bg\" aria-hidden=\"true\"><\/div>\r\n          <div class=\"card-overlay\" aria-hidden=\"true\"><\/div>\r\n          <div class=\"card-content\">\r\n            <div class=\"card-label\">Support Our Work<\/div>\r\n            <div class=\"card-title-sm\">Donate Now<\/div>\r\n            <div class=\"card-popup\">\r\n              <p class=\"popup-desc\">Your contribution helps us provide education, safe water, digital literacy, and skill development to communities across West Bengal, Madhya Pradesh, and Odisha.<\/p>\r\n              <div class=\"popup-actions\">\r\n                <a href=\"#\" class=\"popup-btn primary\">Donate Now <span class=\"btn-arrow\">\u2192<\/span><\/a>\r\n                <a href=\"#\" class=\"popup-btn outline\">Learn More <span class=\"btn-arrow\">\u2192<\/span><\/a>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- Our Programs Card -->\r\n        <div class=\"cta-img-card our-programs\">\r\n          <div class=\"card-bg\" aria-hidden=\"true\"><\/div>\r\n          <div class=\"card-overlay\" aria-hidden=\"true\"><\/div>\r\n          <div class=\"card-content\">\r\n            <div class=\"card-label\">Explore Our Work<\/div>\r\n            <div class=\"card-title-sm\">Our Programs<\/div>\r\n            <div class=\"card-popup\">\r\n              <p class=\"popup-desc\">From Alokodoy coaching centres to Community IT Centres, Skill Development training, and WASH projects \u2014 see how we're creating change across 3 states.<\/p>\r\n              <div class=\"popup-actions\">\r\n                <a href=\"#\" class=\"popup-btn primary\">Explore Programs <span class=\"btn-arrow\">\u2192<\/span><\/a>\r\n                <a href=\"#\" class=\"popup-btn outline\">View All <span class=\"btn-arrow\">\u2192<\/span><\/a>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Contact Section with Animated Text -->\r\n    <div class=\"gi-contact\">\r\n\r\n      <!-- Left: Image + Animated Title -->\r\n      <div class=\"gi-contact-left\">\r\n        <div class=\"contact-tag\">Let's Connect<\/div>\r\n        <div class=\"contact-image\">\r\n          <img decoding=\"async\" src=\"https:\/\/up.freshosoft.work\/bargach\/wp-content\/uploads\/2026\/08\/Gemini_Generated_Image_yuifwpyuifwpyuif.jpg\" alt=\"Contact us\" loading=\"lazy\" \/>\r\n        <\/div>\r\n\r\n        <!-- Animated Text -->\r\n        <div class=\"animated-text\">\r\n          <h4>\r\n            <span class=\"word\">Have<\/span>\r\n            <span class=\"word\">an<\/span>\r\n            <span class=\"word\">idea,<\/span>\r\n            <span class=\"word\">a<\/span>\r\n            <span class=\"word\">question,<\/span>\r\n            <span class=\"word\">or<\/span>\r\n            <span class=\"word\">a<\/span>\r\n            <span class=\"word\">way<\/span>\r\n            <span class=\"word\">to<\/span>\r\n            <span class=\"word\"><span class=\"highlight\">collaborate<\/span>?<\/span>\r\n          <\/h4>\r\n        <\/div>\r\n\r\n        <p class=\"contact-sub\">We'd love to hear from you.<\/p>\r\n        <a href=\"#\" class=\"contact-btn\">Contact Us <span class=\"btn-arrow\">\u2192<\/span><\/a>\r\n      <\/div>\r\n\r\n      <!-- Right: Details + QR Code -->\r\n      <div class=\"gi-contact-right\">\r\n\r\n        <div class=\"contact-item\">\r\n          <div class=\"item-label\">Phone<\/div>\r\n          <div class=\"item-value\">7044581644<br>9836000397<\/div>\r\n        <\/div>\r\n\r\n        <div class=\"contact-item\">\r\n          <div class=\"item-label\">Email<\/div>\r\n          <div class=\"item-value\">\r\n            <a href=\"mailto:info@bargachfoundation.org\">info@bargachfoundation.org<\/a><br>\r\n            <a href=\"mailto:santanu.podder@bargachfoundation.org\">santanu.podder@...<\/a>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"contact-item full\">\r\n          <div class=\"item-label\">Address<\/div>\r\n          <div class=\"item-value\">\r\n            ASO 603, Tower-South, Astra Towers, 2C\/1 Action Area II C, Rajarhat, Kolkata \u2014 700 161, West Bengal\r\n            <br>\r\n            <button class=\"map-link\" id=\"openMapBtn\">\r\n              \ud83d\udccd Open in Google Maps \u2192\r\n            <\/button>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- QR Code Box -->\r\n        <div class=\"qr-box\">\r\n          <div class=\"qr-code\">\r\n            <img decoding=\"async\" src=\"https:\/\/api.qrserver.com\/v1\/create-qr-code\/?size=200x200&data=https%3A%2F%2Fwww.bargachfoundation.org%2Fcontact\" alt=\"QR Code\" loading=\"lazy\" \/>\r\n          <\/div>\r\n          <div class=\"qr-info\">\r\n            <div class=\"qr-label\">Scan to Connect<\/div>\r\n            <p class=\"qr-text\">Scan this QR code to visit our <strong>contact page<\/strong> and get in touch with us directly.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n  <!-- ============================================================\r\n     MAP POPUP\r\n     ============================================================ -->\r\n  <div class=\"map-popup-overlay\" id=\"mapPopup\">\r\n    <div class=\"map-popup-content\">\r\n      <button class=\"map-popup-close\" id=\"mapPopupClose\">\u2715<\/button>\r\n      <div class=\"map-popup-body\">\r\n        <iframe\r\n          src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d3684.123456789012!2d88.456789!3d22.567890!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMjLCsDM0JzA0LjQiTiA4OMKwMjcnMjQuNiJF!5e0!3m2!1sen!2sin!4v1234567890\"\r\n          allowfullscreen=\"\"\r\n          loading=\"lazy\"\r\n          referrerpolicy=\"no-referrer-when-downgrade\"\r\n        ><\/iframe>\r\n        <div class=\"map-address\">\r\n          <strong>\ud83d\udccd Bargach Foundation<\/strong><br>\r\n          ASO 603, Tower-South, Astra Towers,<br>\r\n          2C\/1 Action Area II C, Rajarhat,<br>\r\n          Kolkata \u2014 700 161, West Bengal\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n<!-- ============================================================\r\n     SCRIPT \u2013 MAP POPUP\r\n     ============================================================ -->\r\n<script>\r\n  (function() {\r\n    var mapPopup = document.getElementById('mapPopup');\r\n    var mapOpenBtn = document.getElementById('openMapBtn');\r\n    var mapCloseBtn = document.getElementById('mapPopupClose');\r\n\r\n    if (mapOpenBtn && mapPopup) {\r\n      mapOpenBtn.addEventListener('click', function() {\r\n        mapPopup.classList.add('active');\r\n        document.body.style.overflow = 'hidden';\r\n      });\r\n    }\r\n\r\n    if (mapCloseBtn && mapPopup) {\r\n      mapCloseBtn.addEventListener('click', function() {\r\n        mapPopup.classList.remove('active');\r\n        document.body.style.overflow = '';\r\n      });\r\n    }\r\n\r\n    if (mapPopup) {\r\n      mapPopup.addEventListener('click', function(e) {\r\n        if (e.target === this) {\r\n          mapPopup.classList.remove('active');\r\n          document.body.style.overflow = '';\r\n        }\r\n      });\r\n    }\r\n\r\n    document.addEventListener('keydown', function(e) {\r\n      if (e.key === 'Escape' && mapPopup && mapPopup.classList.contains('active')) {\r\n        mapPopup.classList.remove('active');\r\n        document.body.style.overflow = '';\r\n      }\r\n    });\r\n\r\n    \/\/ Parallax\r\n    var section = document.querySelector('.bgpr-getinvolved');\r\n    if (section) {\r\n      var bg = section.querySelector('.gi-bg');\r\n      if (bg) {\r\n        var isDesktop = window.matchMedia('(min-width: 901px)').matches;\r\n        var prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n        if (isDesktop && !prefersReduced) {\r\n          var mouseX = 0,\r\n            mouseY = 0,\r\n            ticking = false;\r\n          section.addEventListener('mousemove', function(e) {\r\n            var rect = section.getBoundingClientRect();\r\n            mouseX = ((e.clientX - rect.left) \/ rect.width) - 0.5;\r\n            mouseY = ((e.clientY - rect.top) \/ rect.height) - 0.5;\r\n            if (!ticking) {\r\n              window.requestAnimationFrame(function() {\r\n                bg.style.transform = 'scale(1.02) translate(' + (mouseX * 12) + 'px, ' + (mouseY * 8) + 'px)';\r\n                ticking = false;\r\n              });\r\n              ticking = true;\r\n            }\r\n          });\r\n          section.addEventListener('mouseleave', function() {\r\n            bg.style.transform = 'scale(1.02) translate(0,0)';\r\n          });\r\n        }\r\n      }\r\n    }\r\n  })();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fde2a1e elementor-widget elementor-widget-html\" data-id=\"fde2a1e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     BARGACH \u00b7 PARTNERS \u2013 SEMI-DARK WITH FULL BACKGROUND\r\n     Semi-dark theme with full background image, large logo marquee,\r\n     animated with smooth scroll, and popup for partnership CTA.\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  .bgpt-wrapper {\r\n    --gold: #d4a14b;\r\n    --gold-light: #f3d99b;\r\n    --gold-soft: rgba(212, 161, 75, 0.15);\r\n    --text-dark: #1e2b26;\r\n    --text-body: #dcefe9;\r\n    --text-muted: #a9cdc3;\r\n    --text-light: #f4efe4;\r\n    --bg-dark: #0f1a16;\r\n    --bg-card: rgba(255, 255, 255, 0.06);\r\n    --shadow: 0 20px 60px rgba(0, 0, 0, 0.30);\r\n    --radius: 24px;\r\n    --transition: 0.5s cubic-bezier(0.22, 0.68, 0.2, 1);\r\n    --border-light: rgba(255, 255, 255, 0.06);\r\n\r\n    position: relative;\r\n    width: 100%;\r\n    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\r\n    padding: clamp(50px, 7vw, 90px) 0;\r\n    overflow: hidden;\r\n    box-sizing: border-box;\r\n    background: var(--bg-dark);\r\n    min-height: 100vh;\r\n    display: flex;\r\n    align-items: center;\r\n  }\r\n  .bgpt-wrapper *,\r\n  .bgpt-wrapper *::before,\r\n  .bgpt-wrapper *::after {\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  \/* ---------- full background image with overlay ---------- *\/\r\n  .bgpt-wrapper .bgpt-bg {\r\n    position: absolute;\r\n    inset: 0;\r\n    z-index: 0;\r\n    background: url('https:\/\/up.freshosoft.work\/bargach\/wp-content\/uploads\/2026\/08\/7.jpeg') center 40% \/ cover no-repeat;\r\n    filter: brightness(0.25) saturate(0.8) contrast(1.1);\r\n    transform: scale(1.02);\r\n    transition: transform 0.2s ease-out;\r\n  }\r\n  .bgpt-wrapper .bgpt-bg-2 {\r\n    position: absolute;\r\n    inset: 0;\r\n    z-index: 0;\r\n    background:\r\n      radial-gradient(ellipse at 20% 80%, rgba(212, 161, 75, 0.06) 0%, transparent 50%),\r\n      radial-gradient(ellipse at 80% 20%, rgba(212, 161, 75, 0.04) 0%, transparent 40%);\r\n    pointer-events: none;\r\n  }\r\n  .bgpt-wrapper .bgpt-overlay {\r\n    position: absolute;\r\n    inset: 0;\r\n    z-index: 1;\r\n    background:\r\n      radial-gradient(ellipse at 30% 20%, rgba(15, 26, 22, 0.40) 0%, rgba(15, 26, 22, 0.75) 60%, rgba(15, 26, 22, 0.92) 100%);\r\n    pointer-events: none;\r\n  }\r\n  .bgpt-wrapper .bgpt-glow {\r\n    position: absolute;\r\n    z-index: 1;\r\n    pointer-events: none;\r\n    width: 60vw;\r\n    height: 60vw;\r\n    max-width: 700px;\r\n    max-height: 700px;\r\n    top: -10%;\r\n    right: -5%;\r\n    background: radial-gradient(circle, rgba(212, 161, 75, 0.08) 0%, rgba(212, 161, 75, 0.02) 50%, transparent 75%);\r\n    filter: blur(60px);\r\n  }\r\n\r\n  \/* ---------- container ---------- *\/\r\n  .bgpt-wrapper .bgpt-container {\r\n    position: relative;\r\n    z-index: 2;\r\n    max-width: 1280px;\r\n    margin: 0 auto;\r\n    padding: 0 clamp(20px, 4vw, 48px);\r\n    width: 100%;\r\n  }\r\n\r\n  \/* ============================================================\r\n     HEADER\r\n     ============================================================ *\/\r\n  .bgpt-wrapper .bgpt-header {\r\n    text-align: center;\r\n    margin-bottom: clamp(32px, 4vw, 48px);\r\n  }\r\n  .bgpt-wrapper .bgpt-tag {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    font-size: 11px;\r\n    font-weight: 600;\r\n    letter-spacing: 0.22em;\r\n    text-transform: uppercase;\r\n    color: var(--gold);\r\n    margin: 0 0 12px;\r\n  }\r\n  .bgpt-wrapper .bgpt-tag::before,\r\n  .bgpt-wrapper .bgpt-tag::after {\r\n    content: \"\";\r\n    width: 32px;\r\n    height: 1px;\r\n    background: var(--gold);\r\n    display: inline-block;\r\n  }\r\n  .bgpt-wrapper .bgpt-heading {\r\n    font-family: 'Fraunces', Georgia, 'Times New Roman', serif;\r\n    font-weight: 380;\r\n    font-size: clamp(32px, 4.2vw, 52px);\r\n    line-height: 1.12;\r\n    letter-spacing: -0.01em;\r\n    color: var(--text-light);\r\n    margin: 0 0 10px;\r\n  }\r\n  .bgpt-wrapper .bgpt-heading .highlight {\r\n    color: var(--gold);\r\n  }\r\n  .bgpt-wrapper .bgpt-sub {\r\n    font-weight: 300;\r\n    font-size: clamp(15px, 1.3vw, 17px);\r\n    line-height: 1.7;\r\n    color: var(--text-muted);\r\n    max-width: 560px;\r\n    margin: 0 auto;\r\n  }\r\n\r\n  \/* ============================================================\r\n     MAIN CARD \u2013 GLASS EFFECT\r\n     ============================================================ *\/\r\n  .bgpt-wrapper .bgpt-card {\r\n    position: relative;\r\n    background: rgba(255, 255, 255, 0.04);\r\n    backdrop-filter: blur(16px);\r\n    -webkit-backdrop-filter: blur(16px);\r\n    border-radius: var(--radius);\r\n    box-shadow: var(--shadow);\r\n    overflow: hidden;\r\n    padding: clamp(28px, 4vw, 48px) clamp(24px, 3.5vw, 44px);\r\n    border: 1px solid rgba(255, 255, 255, 0.06);\r\n    transition: transform 0.4s ease, box-shadow 0.4s ease;\r\n  }\r\n  .bgpt-wrapper .bgpt-card:hover {\r\n    transform: translateY(-2px);\r\n    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.40);\r\n  }\r\n  .bgpt-wrapper .bgpt-card::before {\r\n    content: '';\r\n    position: absolute;\r\n    inset: 0;\r\n    background: radial-gradient(ellipse at 70% 10%, rgba(212, 161, 75, 0.04), transparent 60%);\r\n    pointer-events: none;\r\n  }\r\n\r\n  \/* ---------- top row ---------- *\/\r\n  .bgpt-wrapper .bgpt-top {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 16px 24px;\r\n    margin-bottom: 28px;\r\n    padding-bottom: 20px;\r\n    border-bottom: 1px solid rgba(255, 255, 255, 0.04);\r\n    position: relative;\r\n    z-index: 1;\r\n  }\r\n\r\n  .bgpt-wrapper .bgpt-left {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 18px;\r\n    flex: 1 1 220px;\r\n  }\r\n\r\n  .bgpt-wrapper .bgpt-seal {\r\n    flex-shrink: 0;\r\n    width: 64px;\r\n    height: 64px;\r\n    border-radius: 50%;\r\n    border: 2px solid var(--gold);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-family: 'Fraunces', Georgia, serif;\r\n    font-style: italic;\r\n    font-size: 12px;\r\n    font-weight: 560;\r\n    color: var(--gold);\r\n    background: rgba(212, 161, 75, 0.08);\r\n    line-height: 1.2;\r\n    text-align: center;\r\n    transition: all 0.3s ease;\r\n  }\r\n  .bgpt-wrapper .bgpt-seal:hover {\r\n    border-color: var(--gold-light);\r\n    background: rgba(212, 161, 75, 0.15);\r\n    transform: scale(1.05);\r\n  }\r\n\r\n  .bgpt-wrapper .bgpt-note {\r\n    font-size: 14.5px;\r\n    font-weight: 400;\r\n    color: var(--text-body);\r\n    margin: 0;\r\n    line-height: 1.5;\r\n  }\r\n  .bgpt-wrapper .bgpt-note small {\r\n    font-weight: 300;\r\n    color: var(--text-muted);\r\n    font-size: 13px;\r\n  }\r\n\r\n  \/* ---------- CTA button ---------- *\/\r\n  .bgpt-wrapper .bgpt-cta {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    padding: 12px 32px;\r\n    background: var(--gold);\r\n    color: #0f1a16;\r\n    font-weight: 600;\r\n    font-size: 14.5px;\r\n    font-family: 'Inter', sans-serif;\r\n    border: none;\r\n    border-radius: 60px;\r\n    cursor: pointer;\r\n    transition: all 0.3s ease;\r\n    box-shadow: 0 4px 20px rgba(212, 161, 75, 0.25);\r\n    letter-spacing: 0.01em;\r\n    line-height: 1;\r\n    white-space: nowrap;\r\n    position: relative;\r\n    overflow: hidden;\r\n  }\r\n  .bgpt-wrapper .bgpt-cta::before {\r\n    content: '';\r\n    position: absolute;\r\n    inset: 0;\r\n    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), transparent 60%);\r\n    pointer-events: none;\r\n  }\r\n  .bgpt-wrapper .bgpt-cta:hover {\r\n    background: #c4903a;\r\n    transform: translateY(-3px);\r\n    box-shadow: 0 12px 32px rgba(212, 161, 75, 0.35);\r\n  }\r\n  .bgpt-wrapper .bgpt-cta:active {\r\n    transform: translateY(0);\r\n  }\r\n  .bgpt-wrapper .bgpt-cta span {\r\n    display: inline-block;\r\n    transition: transform 0.3s ease;\r\n  }\r\n  .bgpt-wrapper .bgpt-cta:hover span {\r\n    transform: translateX(6px);\r\n  }\r\n\r\n  \/* ============================================================\r\n     LOGO MARQUEE \u2013 LARGE\r\n     ============================================================ *\/\r\n  .bgpt-wrapper .bgpt-marquee {\r\n    position: relative;\r\n    overflow: hidden;\r\n    padding: 8px 0 4px;\r\n    z-index: 1;\r\n  }\r\n\r\n  .bgpt-wrapper .bgpt-marquee-track {\r\n    display: flex;\r\n    width: max-content;\r\n    animation: scrollMarquee 45s linear infinite;\r\n  }\r\n  .bgpt-wrapper .bgpt-marquee:hover .bgpt-marquee-track {\r\n    animation-play-state: paused;\r\n  }\r\n\r\n  @keyframes scrollMarquee {\r\n    from {\r\n      transform: translateX(0);\r\n    }\r\n    to {\r\n      transform: translateX(-50%);\r\n    }\r\n  }\r\n\r\n  .bgpt-wrapper .bgpt-marquee-set {\r\n    display: flex;\r\n    align-items: center;\r\n    flex: 0 0 auto;\r\n    gap: clamp(24px, 3.5vw, 48px);\r\n    padding: 0 clamp(20px, 2.5vw, 40px);\r\n  }\r\n\r\n  .bgpt-wrapper .bgpt-marquee-item {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: clamp(14px, 1.8vw, 24px);\r\n    white-space: nowrap;\r\n    color: var(--text-body);\r\n    font-weight: 400;\r\n    font-size: clamp(13px, 1.2vw, 16px);\r\n    transition: transform 0.3s ease;\r\n  }\r\n  .bgpt-wrapper .bgpt-marquee-item:hover {\r\n    transform: scale(1.02);\r\n  }\r\n\r\n  .bgpt-wrapper .bgpt-marquee-item .logo-box {\r\n    width: clamp(68px, 8vw, 110px);\r\n    height: clamp(52px, 6vw, 80px);\r\n    border-radius: 14px;\r\n    background: rgba(255, 255, 255, 0.06);\r\n    border: 1px solid rgba(255, 255, 255, 0.06);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    flex-shrink: 0;\r\n    overflow: hidden;\r\n    padding: 6px 8px;\r\n    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10);\r\n    transition: all 0.3s ease;\r\n  }\r\n  .bgpt-wrapper .bgpt-marquee-item .logo-box:hover {\r\n    border-color: var(--gold-soft);\r\n    box-shadow: 0 4px 20px rgba(212, 161, 75, 0.08);\r\n  }\r\n\r\n  .bgpt-wrapper .bgpt-marquee-item .logo-box img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: contain;\r\n    display: block;\r\n    filter: brightness(0.95) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.10));\r\n    transition: filter 0.3s ease;\r\n  }\r\n  .bgpt-wrapper .bgpt-marquee-item .logo-box:hover img {\r\n    filter: brightness(1.05);\r\n  }\r\n\r\n  .bgpt-wrapper .bgpt-marquee-item .partner-name {\r\n    font-weight: 500;\r\n    color: var(--text-light);\r\n    letter-spacing: 0.01em;\r\n    font-size: clamp(13px, 1.1vw, 15px);\r\n  }\r\n\r\n  .bgpt-wrapper .bgpt-marquee-item::after {\r\n    content: \"\u25c6\";\r\n    font-size: 6px;\r\n    color: rgba(212, 161, 75, 0.25);\r\n    margin-left: clamp(8px, 1vw, 14px);\r\n  }\r\n  .bgpt-wrapper .bgpt-marquee-item:last-child::after {\r\n    content: \"\";\r\n    display: none;\r\n  }\r\n\r\n  \/* ============================================================\r\n     POPUP\r\n     ============================================================ *\/\r\n  .bgpt-wrapper .bgpt-popup-overlay {\r\n    position: fixed;\r\n    inset: 0;\r\n    z-index: 9999;\r\n    background: rgba(15, 26, 22, 0.70);\r\n    backdrop-filter: blur(12px);\r\n    -webkit-backdrop-filter: blur(12px);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 20px;\r\n    opacity: 0;\r\n    visibility: hidden;\r\n    transition: opacity 0.4s ease, visibility 0.4s ease;\r\n  }\r\n  .bgpt-wrapper .bgpt-popup-overlay.active {\r\n    opacity: 1;\r\n    visibility: visible;\r\n  }\r\n\r\n  .bgpt-wrapper .bgpt-popup {\r\n    background: #1a2a24;\r\n    max-width: 500px;\r\n    width: 100%;\r\n    border-radius: 28px;\r\n    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.40);\r\n    overflow: hidden;\r\n    transform: scale(0.94) translateY(16px);\r\n    transition: transform 0.4s cubic-bezier(.22, .68, .2, 1), opacity 0.4s ease;\r\n    opacity: 0;\r\n    border: 1px solid rgba(255, 255, 255, 0.06);\r\n  }\r\n  .bgpt-wrapper .bgpt-popup-overlay.active .bgpt-popup {\r\n    transform: scale(1) translateY(0);\r\n    opacity: 1;\r\n  }\r\n\r\n  .bgpt-wrapper .bgpt-popup-img {\r\n    width: 100%;\r\n    height: 190px;\r\n    object-fit: cover;\r\n    display: block;\r\n    background: #0f1a16;\r\n    opacity: 0.8;\r\n  }\r\n\r\n  .bgpt-wrapper .bgpt-popup-body {\r\n    padding: 28px 30px 32px;\r\n    text-align: center;\r\n  }\r\n  .bgpt-wrapper .bgpt-popup-body h3 {\r\n    font-family: 'Fraunces', Georgia, serif;\r\n    font-weight: 560;\r\n    font-size: 22px;\r\n    color: var(--text-light);\r\n    margin: 0 0 8px;\r\n    letter-spacing: -0.01em;\r\n  }\r\n  .bgpt-wrapper .bgpt-popup-body h3 .highlight {\r\n    color: var(--gold);\r\n  }\r\n  .bgpt-wrapper .bgpt-popup-body p {\r\n    font-size: 15px;\r\n    line-height: 1.65;\r\n    color: var(--text-muted);\r\n    margin: 0 0 24px;\r\n    font-weight: 300;\r\n  }\r\n\r\n  .bgpt-wrapper .bgpt-popup-actions {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 12px;\r\n  }\r\n  .bgpt-wrapper .bgpt-popup-actions .popup-btn {\r\n    padding: 10px 28px;\r\n    border-radius: 60px;\r\n    font-size: 13.5px;\r\n    font-weight: 600;\r\n    font-family: 'Inter', sans-serif;\r\n    cursor: pointer;\r\n    transition: all 0.3s ease;\r\n    border: none;\r\n  }\r\n  .bgpt-wrapper .bgpt-popup-actions .popup-btn.primary {\r\n    background: var(--gold);\r\n    color: #0f1a16;\r\n    box-shadow: 0 4px 16px rgba(212, 161, 75, 0.20);\r\n  }\r\n  .bgpt-wrapper .bgpt-popup-actions .popup-btn.primary:hover {\r\n    background: #c4903a;\r\n    transform: translateY(-2px);\r\n  }\r\n  .bgpt-wrapper .bgpt-popup-actions .popup-btn.outline {\r\n    background: transparent;\r\n    color: var(--text-body);\r\n    border: 1px solid rgba(255, 255, 255, 0.08);\r\n  }\r\n  .bgpt-wrapper .bgpt-popup-actions .popup-btn.outline:hover {\r\n    background: rgba(255, 255, 255, 0.04);\r\n    border-color: var(--gold);\r\n  }\r\n\r\n  \/* ============================================================\r\n     RESPONSIVE\r\n     ============================================================ *\/\r\n  @media (max-width: 820px) {\r\n    .bgpt-wrapper .bgpt-card {\r\n      padding: 22px 20px 26px;\r\n    }\r\n    .bgpt-wrapper .bgpt-top {\r\n      flex-direction: column;\r\n      align-items: stretch;\r\n      gap: 12px;\r\n    }\r\n    .bgpt-wrapper .bgpt-left {\r\n      flex: 1 1 auto;\r\n      gap: 14px;\r\n    }\r\n    .bgpt-wrapper .bgpt-seal {\r\n      width: 54px;\r\n      height: 54px;\r\n      font-size: 11px;\r\n    }\r\n    .bgpt-wrapper .bgpt-note {\r\n      font-size: 13.5px;\r\n    }\r\n    .bgpt-wrapper .bgpt-cta {\r\n      width: 100%;\r\n      justify-content: center;\r\n      padding: 12px 20px;\r\n      font-size: 14px;\r\n      white-space: normal;\r\n    }\r\n    .bgpt-wrapper .bgpt-marquee-item .logo-box {\r\n      width: 56px;\r\n      height: 44px;\r\n    }\r\n    .bgpt-wrapper .bgpt-marquee-set {\r\n      gap: 16px;\r\n      padding: 0 12px;\r\n    }\r\n  }\r\n\r\n  @media (max-width: 540px) {\r\n    .bgpt-wrapper .bgpt-marquee-item .partner-name {\r\n      display: none;\r\n    }\r\n    .bgpt-wrapper .bgpt-marquee-item::after {\r\n      content: \"\";\r\n      display: none;\r\n    }\r\n    .bgpt-wrapper .bgpt-marquee-set {\r\n      gap: 10px;\r\n      padding: 0 8px;\r\n    }\r\n    .bgpt-wrapper .bgpt-marquee-item .logo-box {\r\n      width: 52px;\r\n      height: 40px;\r\n      border-radius: 10px;\r\n      padding: 4px;\r\n    }\r\n    .bgpt-wrapper .bgpt-popup {\r\n      max-width: 94%;\r\n      border-radius: 20px;\r\n    }\r\n    .bgpt-wrapper .bgpt-popup-img {\r\n      height: 140px;\r\n    }\r\n    .bgpt-wrapper .bgpt-popup-body {\r\n      padding: 20px 16px 24px;\r\n    }\r\n    .bgpt-wrapper .bgpt-popup-body h3 {\r\n      font-size: 19px;\r\n    }\r\n    .bgpt-wrapper .bgpt-popup-body p {\r\n      font-size: 14px;\r\n    }\r\n  }\r\n\r\n  \/* Reduced Motion *\/\r\n  @media (prefers-reduced-motion: reduce) {\r\n    .bgpt-wrapper .bgpt-marquee-track {\r\n      animation: none;\r\n    }\r\n    .bgpt-wrapper .bgpt-popup-overlay,\r\n    .bgpt-wrapper .bgpt-popup {\r\n      transition: none;\r\n    }\r\n    .bgpt-wrapper .bgpt-card:hover {\r\n      transform: none;\r\n    }\r\n    .bgpt-wrapper .bgpt-cta:hover {\r\n      transform: none;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<!-- ============================================================\r\n     HTML\r\n     ============================================================ -->\r\n<div class=\"bgpt-wrapper\">\r\n\r\n  <!-- Full Background -->\r\n  <div class=\"bgpt-bg\" aria-hidden=\"true\"><\/div>\r\n  <div class=\"bgpt-bg-2\" aria-hidden=\"true\"><\/div>\r\n  <div class=\"bgpt-overlay\" aria-hidden=\"true\"><\/div>\r\n  <div class=\"bgpt-glow\" aria-hidden=\"true\"><\/div>\r\n\r\n  <div class=\"bgpt-container\">\r\n\r\n    <!-- Header -->\r\n    <div class=\"bgpt-header\">\r\n      <div class=\"bgpt-tag\">In Partnership<\/div>\r\n      <h2 class=\"bgpt-heading\">Working together to take <span class=\"highlight\">change<\/span> further<\/h2>\r\n      <p class=\"bgpt-sub\">Our programmes are strengthened through collaboration with organisations, institutions, government initiatives and community stakeholders.<\/p>\r\n    <\/div>\r\n\r\n    <!-- Main Card -->\r\n    <div class=\"bgpt-card\">\r\n\r\n      <!-- Top Row -->\r\n      <div class=\"bgpt-top\">\r\n        <div class=\"bgpt-left\">\r\n          <div class=\"bgpt-seal\" aria-hidden=\"true\">FY<br>25\u201326<\/div>\r\n          <div class=\"bgpt-note\">\r\n            Strategic partnerships documented in the <br><small>FY 2025\u201326 Annual Report.<\/small>\r\n          <\/div>\r\n        <\/div>\r\n        <button class=\"bgpt-cta\" id=\"bgptOpenPopup\">\r\n          Partner With Us <span aria-hidden=\"true\">\u2192<\/span>\r\n        <\/button>\r\n      <\/div>\r\n\r\n      <!-- Large Logo Marquee -->\r\n      <div class=\"bgpt-marquee\" role=\"list\" aria-label=\"Our partners\">\r\n        <div class=\"bgpt-marquee-track\" aria-hidden=\"true\">\r\n\r\n          <!-- Set 1 -->\r\n          <div class=\"bgpt-marquee-set\">\r\n            <span class=\"bgpt-marquee-item\">\r\n              <span class=\"logo-box\"><img decoding=\"async\" src=\"https:\/\/up.freshosoft.work\/bargach\/wp-content\/uploads\/2026\/08\/water-org-logo.bd23a712cf69.png\" alt=\"Water.org\" loading=\"lazy\"><\/span>\r\n              <span class=\"partner-name\">Water.org<\/span>\r\n            <\/span>\r\n            <span class=\"bgpt-marquee-item\">\r\n              <span class=\"logo-box\"><img decoding=\"async\" src=\"https:\/\/up.freshosoft.work\/bargach\/wp-content\/uploads\/2026\/08\/West_Bengal_Police_Logo.png\" alt=\"WB Police\" loading=\"lazy\"><\/span>\r\n              <span class=\"partner-name\">WB Police<\/span>\r\n            <\/span>\r\n            <span class=\"bgpt-marquee-item\">\r\n              <span class=\"logo-box\"><img decoding=\"async\" src=\"https:\/\/up.freshosoft.work\/bargach\/wp-content\/uploads\/2026\/08\/images.jpg\" alt=\"Emami Foundation\" loading=\"lazy\"><\/span>\r\n              <span class=\"partner-name\">Emami Foundation<\/span>\r\n            <\/span>\r\n            <span class=\"bgpt-marquee-item\">\r\n              <span class=\"logo-box\"><img decoding=\"async\" src=\"https:\/\/up.freshosoft.work\/bargach\/wp-content\/uploads\/2026\/08\/images.png\" alt=\"Utkarsh Bangla\" loading=\"lazy\"><\/span>\r\n              <span class=\"partner-name\">Utkarsh Bangla<\/span>\r\n            <\/span>\r\n            <span class=\"bgpt-marquee-item\">\r\n              <span class=\"logo-box\"><img decoding=\"async\" src=\"https:\/\/up.freshosoft.work\/bargach\/wp-content\/uploads\/2026\/08\/jana-likho-apni-kahaani-big.jpg\" alt=\"Jana Bank\" loading=\"lazy\"><\/span>\r\n              <span class=\"partner-name\">Jana Bank<\/span>\r\n            <\/span>\r\n            <span class=\"bgpt-marquee-item\">\r\n              <span class=\"logo-box\"><img decoding=\"async\" src=\"https:\/\/up.freshosoft.work\/bargach\/wp-content\/uploads\/2026\/08\/images-1.png\" alt=\"Finish Mondial\" loading=\"lazy\"><\/span>\r\n              <span class=\"partner-name\">Finish Mondial<\/span>\r\n            <\/span>\r\n            <span class=\"bgpt-marquee-item\">\r\n              <span class=\"logo-box\"><img decoding=\"async\" src=\"https:\/\/up.freshosoft.work\/bargach\/wp-content\/uploads\/2026\/08\/images-1.jpg\" alt=\"Hooghly Rural Police\" loading=\"lazy\"><\/span>\r\n              <span class=\"partner-name\">Hooghly Rural Police<\/span>\r\n            <\/span>\r\n            <span class=\"bgpt-marquee-item\">\r\n              <span class=\"logo-box\"><img decoding=\"async\" src=\"https:\/\/up.freshosoft.work\/bargach\/wp-content\/uploads\/2026\/08\/images-2.jpg\" alt=\"Govt & Community\" loading=\"lazy\"><\/span>\r\n              <span class=\"partner-name\">Govt & Community<\/span>\r\n            <\/span>\r\n          <\/div>\r\n\r\n          <!-- Set 2 (duplicate for seamless loop) -->\r\n          <div class=\"bgpt-marquee-set\">\r\n            <span class=\"bgpt-marquee-item\">\r\n              <span class=\"logo-box\"><img decoding=\"async\" src=\"https:\/\/up.freshosoft.work\/bargach\/wp-content\/uploads\/2026\/08\/water-org-logo.bd23a712cf69.png\" alt=\"Water.org\" loading=\"lazy\"><\/span>\r\n              <span class=\"partner-name\">Water.org<\/span>\r\n            <\/span>\r\n            <span class=\"bgpt-marquee-item\">\r\n              <span class=\"logo-box\"><img decoding=\"async\" src=\"https:\/\/up.freshosoft.work\/bargach\/wp-content\/uploads\/2026\/08\/West_Bengal_Police_Logo.png\" alt=\"WB Police\" loading=\"lazy\"><\/span>\r\n              <span class=\"partner-name\">WB Police<\/span>\r\n            <\/span>\r\n            <span class=\"bgpt-marquee-item\">\r\n              <span class=\"logo-box\"><img decoding=\"async\" src=\"https:\/\/up.freshosoft.work\/bargach\/wp-content\/uploads\/2026\/08\/images.jpg\" alt=\"Emami Foundation\" loading=\"lazy\"><\/span>\r\n              <span class=\"partner-name\">Emami Foundation<\/span>\r\n            <\/span>\r\n            <span class=\"bgpt-marquee-item\">\r\n              <span class=\"logo-box\"><img decoding=\"async\" src=\"https:\/\/up.freshosoft.work\/bargach\/wp-content\/uploads\/2026\/08\/images.png\" alt=\"Utkarsh Bangla\" loading=\"lazy\"><\/span>\r\n              <span class=\"partner-name\">Utkarsh Bangla<\/span>\r\n            <\/span>\r\n            <span class=\"bgpt-marquee-item\">\r\n              <span class=\"logo-box\"><img decoding=\"async\" src=\"https:\/\/up.freshosoft.work\/bargach\/wp-content\/uploads\/2026\/08\/jana-likho-apni-kahaani-big.jpg\" alt=\"Jana Bank\" loading=\"lazy\"><\/span>\r\n              <span class=\"partner-name\">Jana Bank<\/span>\r\n            <\/span>\r\n            <span class=\"bgpt-marquee-item\">\r\n              <span class=\"logo-box\"><img decoding=\"async\" src=\"https:\/\/up.freshosoft.work\/bargach\/wp-content\/uploads\/2026\/08\/images-1.png\" alt=\"Finish Mondial\" loading=\"lazy\"><\/span>\r\n              <span class=\"partner-name\">Finish Mondial<\/span>\r\n            <\/span>\r\n            <span class=\"bgpt-marquee-item\">\r\n              <span class=\"logo-box\"><img decoding=\"async\" src=\"https:\/\/up.freshosoft.work\/bargach\/wp-content\/uploads\/2026\/08\/images-1.jpg\" alt=\"Hooghly Rural Police\" loading=\"lazy\"><\/span>\r\n              <span class=\"partner-name\">Hooghly Rural Police<\/span>\r\n            <\/span>\r\n            <span class=\"bgpt-marquee-item\">\r\n              <span class=\"logo-box\"><img decoding=\"async\" src=\"https:\/\/up.freshosoft.work\/bargach\/wp-content\/uploads\/2026\/08\/images-2.jpg\" alt=\"Govt & Community\" loading=\"lazy\"><\/span>\r\n              <span class=\"partner-name\">Govt & Community<\/span>\r\n            <\/span>\r\n          <\/div>\r\n\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n  <!-- ============================================================\r\n       POPUP\r\n       ============================================================ -->\r\n  <div class=\"bgpt-popup-overlay\" id=\"bgptPopup\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"popup-title\">\r\n    <div class=\"bgpt-popup\">\r\n      <img decoding=\"async\" class=\"bgpt-popup-img\" id=\"popupImg\" src=\"https:\/\/images.unsplash.com\/photo-1522071820081-009f0129c71c?q=80&w=2070&auto=format&fit=crop\" alt=\"Collaboration\" loading=\"lazy\">\r\n      <div class=\"bgpt-popup-body\">\r\n        <h3 id=\"popup-title\">Let's <span class=\"highlight\">Partner<\/span> for Change<\/h3>\r\n        <p id=\"popup-desc\">We believe in the power of collaboration. Our work is amplified by organisations, institutions, and community leaders who share our vision for lasting social impact.<\/p>\r\n        <div class=\"bgpt-popup-actions\">\r\n          <button class=\"popup-btn outline\" id=\"bgptClosePopup\">Close<\/button>\r\n          <button class=\"popup-btn primary\" id=\"bgptNextPopup\">Next \u2192<\/button>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n<!-- ============================================================\r\n     SCRIPT\r\n     ============================================================ -->\r\n<script>\r\n  (function() {\r\n    const overlay = document.getElementById('bgptPopup');\r\n    const openBtn = document.getElementById('bgptOpenPopup');\r\n    const closeBtn = document.getElementById('bgptClosePopup');\r\n    const nextBtn = document.getElementById('bgptNextPopup');\r\n\r\n    function openPopup() {\r\n      overlay.classList.add('active');\r\n      document.body.style.overflow = 'hidden';\r\n      setTimeout(() => closeBtn.focus(), 100);\r\n    }\r\n\r\n    function closePopup() {\r\n      overlay.classList.remove('active');\r\n      document.body.style.overflow = '';\r\n      openBtn.focus();\r\n    }\r\n\r\n    if (openBtn) openBtn.addEventListener('click', openPopup);\r\n    if (closeBtn) closeBtn.addEventListener('click', closePopup);\r\n\r\n    if (overlay) {\r\n      overlay.addEventListener('click', function(e) {\r\n        if (e.target === overlay) closePopup();\r\n      });\r\n    }\r\n\r\n    document.addEventListener('keydown', function(e) {\r\n      if (e.key === 'Escape' && overlay.classList.contains('active')) closePopup();\r\n    });\r\n\r\n    \/\/ ----- Next button: rotate content -----\r\n    if (nextBtn) {\r\n      const content = [{\r\n        title: 'Partners in <span class=\"highlight\">Impact<\/span>',\r\n        desc: 'From Water.org to West Bengal Police, our alliances drive real change across communities in West Bengal, Madhya Pradesh, and Odisha.',\r\n        img: 'https:\/\/images.unsplash.com\/photo-1531482615713-2afd69097998?q=80&w=2070&auto=format&fit=crop'\r\n      }, {\r\n        title: 'Shared <span class=\"highlight\">Vision<\/span>',\r\n        desc: 'Collaboration with Emami Foundation, Utkarsh Bangla, and Jana Bank strengthens our programmes and extends our reach.',\r\n        img: 'https:\/\/images.unsplash.com\/photo-1559136555-9303baea8ebd?q=80&w=2070&auto=format&fit=crop'\r\n      }, {\r\n        title: 'Together we take <span class=\"highlight\">Change<\/span> Further',\r\n        desc: 'Government initiatives and community stakeholders are at the heart of our mission. Join us in creating lasting impact.',\r\n        img: 'https:\/\/images.unsplash.com\/photo-1522071820081-009f0129c71c?q=80&w=2070&auto=format&fit=crop'\r\n      }];\r\n\r\n      let idx = 0;\r\n      const titleEl = document.getElementById('popup-title');\r\n      const descEl = document.getElementById('popup-desc');\r\n      const imgEl = document.getElementById('popupImg');\r\n\r\n      nextBtn.addEventListener('click', function() {\r\n        idx = (idx + 1) % content.length;\r\n        const c = content[idx];\r\n        titleEl.innerHTML = c.title;\r\n        descEl.textContent = c.desc;\r\n        imgEl.src = c.img;\r\n        imgEl.alt = c.title.replace(\/<[^>]*>\/g, '');\r\n      });\r\n    }\r\n\r\n    \/\/ Reduced motion\r\n    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {\r\n      const style = document.createElement('style');\r\n      style.textContent = `\r\n        .bgpt-popup-overlay.active .bgpt-popup { transform: scale(1) !important; opacity: 1 !important; transition: none !important; }\r\n        .bgpt-popup-overlay.active { opacity: 1 !important; visibility: visible !important; transition: none !important; }\r\n      `;\r\n      document.head.appendChild(style);\r\n    }\r\n\r\n  })();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Est. 2020 \u00b7 WB \/ MP \/ Odisha Every drop finds its way to someone Education, digital skills, livelihoods and safe drinking water for rural &amp; semi-urban communities \u2014 village by village, alongside government initiatives. Donate Now \u2192 Our Programs \u2192 \u25ce West Bengal Madhya Pradesh Odisha Scroll to explore Community IT Centres \u00b7 WASH [&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-1521","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demo.freshosoft.in\/bargach\/wp-json\/wp\/v2\/pages\/1521","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=1521"}],"version-history":[{"count":29,"href":"https:\/\/demo.freshosoft.in\/bargach\/wp-json\/wp\/v2\/pages\/1521\/revisions"}],"predecessor-version":[{"id":1643,"href":"https:\/\/demo.freshosoft.in\/bargach\/wp-json\/wp\/v2\/pages\/1521\/revisions\/1643"}],"wp:attachment":[{"href":"https:\/\/demo.freshosoft.in\/bargach\/wp-json\/wp\/v2\/media?parent=1521"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}