{"id":24,"date":"2022-12-21T08:39:06","date_gmt":"2022-12-21T08:39:06","guid":{"rendered":"http:\/\/qrowdwp.pixydrops.com\/?page_id=24"},"modified":"2026-08-22T09:21:57","modified_gmt":"2026-08-22T09:21:57","slug":"about","status":"publish","type":"page","link":"https:\/\/demo.freshosoft.in\/bargach\/about\/","title":{"rendered":"About"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"24\" class=\"elementor elementor-24\" data-elementor-settings=\"{&quot;ha_cmc_init_switcher&quot;:&quot;no&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-99ddde5 e-con e-atomic-element e-flexbox-base e-10f316b \" data-id=\"99ddde5\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"99ddde5\">\n    \t\t<div class=\"elementor-element elementor-element-a083630 elementor-widget elementor-widget-html\" data-id=\"a083630\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     HERO SECTION \u2013 SIMPLE & CLEAN\r\n     Light background, clean typography, clear CTA.\r\n     Fully mobile responsive. Modern, minimal design.\r\n     ============================================================ -->\r\n<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,380;0,9..144,560;1,9..144,380&family=Inter:wght@300;400;500;600;700&display=swap');\r\n\r\n  .bargach-hero-simple {\r\n    --h-bg: #f8f5ee;\r\n    --h-ink: #1f2a26;\r\n    --h-teal: #146354;\r\n    --h-gold: #c47a3a;\r\n    --h-gold-soft: #deb070;\r\n    --h-coral: #d96c52;\r\n    --h-text: #3d534a;\r\n    --h-muted: #6a8a7a;\r\n    --h-border: rgba(20, 99, 84, 0.06);\r\n\r\n    width: 100%;\r\n    max-width: 100%;\r\n    margin: 0;\r\n    padding: 0;\r\n    box-sizing: border-box;\r\n    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\r\n    background: var(--h-bg);\r\n    overflow: hidden;\r\n  }\r\n  .bargach-hero-simple *,\r\n  .bargach-hero-simple *::before,\r\n  .bargach-hero-simple *::after {\r\n    box-sizing: border-box;\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n\r\n  .bargach-hero-simple .h-wrap {\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    padding: clamp(50px, 8vh, 100px) clamp(20px, 4vw, 50px);\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    text-align: center;\r\n  }\r\n\r\n  \/* ===== EYEBROW ===== *\/\r\n  .bargach-hero-simple .h-eyebrow {\r\n    font-size: 11px;\r\n    font-weight: 600;\r\n    letter-spacing: 0.2em;\r\n    text-transform: uppercase;\r\n    color: var(--h-coral);\r\n    margin-bottom: 12px;\r\n  }\r\n\r\n  \/* ===== HEADLINE ===== *\/\r\n  .bargach-hero-simple .h-headline {\r\n    font-family: 'Fraunces', Georgia, serif;\r\n    font-weight: 380;\r\n    font-size: clamp(32px, 4.5vw, 56px);\r\n    line-height: 1.08;\r\n    color: var(--h-ink);\r\n    max-width: 800px;\r\n    margin: 0 0 16px;\r\n  }\r\n  .bargach-hero-simple .h-headline em {\r\n    font-style: italic;\r\n    color: var(--h-gold);\r\n  }\r\n\r\n  \/* ===== SUBTEXT ===== *\/\r\n  .bargach-hero-simple .h-sub {\r\n    font-size: clamp(15px, 1.1vw, 18px);\r\n    color: var(--h-text);\r\n    line-height: 1.7;\r\n    max-width: 620px;\r\n    margin: 0 0 32px;\r\n  }\r\n\r\n  \/* ===== BUTTONS ===== *\/\r\n  .bargach-hero-simple .h-actions {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 14px;\r\n    flex-wrap: wrap;\r\n  }\r\n  .bargach-hero-simple .h-btn {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    padding: 12px 30px;\r\n    border-radius: 999px;\r\n    font-size: 14px;\r\n    font-weight: 600;\r\n    font-family: inherit;\r\n    text-decoration: none;\r\n    transition: 0.3s ease;\r\n    cursor: pointer;\r\n    border: none;\r\n  }\r\n  .bargach-hero-simple .h-btn-primary {\r\n    background: var(--h-gold);\r\n    color: #fff;\r\n    box-shadow: 0 4px 16px rgba(196, 122, 58, 0.15);\r\n  }\r\n  .bargach-hero-simple .h-btn-primary:hover {\r\n    background: var(--h-gold-soft);\r\n    transform: translateY(-3px);\r\n    box-shadow: 0 8px 32px rgba(196, 122, 58, 0.25);\r\n  }\r\n  .bargach-hero-simple .h-btn-secondary {\r\n    background: transparent;\r\n    color: var(--h-teal);\r\n    border: 1px solid var(--h-border);\r\n  }\r\n  .bargach-hero-simple .h-btn-secondary:hover {\r\n    border-color: var(--h-gold);\r\n    background: rgba(196, 122, 58, 0.04);\r\n    transform: translateY(-3px);\r\n  }\r\n  .bargach-hero-simple .h-btn .arr {\r\n    display: inline-block;\r\n    transition: 0.3s ease;\r\n  }\r\n  .bargach-hero-simple .h-btn:hover .arr {\r\n    transform: translateX(4px);\r\n  }\r\n\r\n  \/* ===== DECORATIVE LINE ===== *\/\r\n  .bargach-hero-simple .h-line {\r\n    width: 60px;\r\n    height: 2px;\r\n    background: var(--h-gold);\r\n    margin: 0 auto 16px;\r\n    opacity: 0.4;\r\n  }\r\n\r\n  \/* ===== RESPONSIVE ===== *\/\r\n  @media (max-width: 768px) {\r\n    .bargach-hero-simple .h-wrap { padding: 40px 20px; }\r\n    .bargach-hero-simple .h-headline { font-size: clamp(28px, 5vw, 36px); }\r\n    .bargach-hero-simple .h-sub { font-size: 15px; }\r\n  }\r\n\r\n  @media (max-width: 480px) {\r\n    .bargach-hero-simple .h-wrap { padding: 30px 16px; }\r\n    .bargach-hero-simple .h-headline { font-size: clamp(24px, 6vw, 30px); }\r\n    .bargach-hero-simple .h-sub { font-size: 14px; }\r\n    .bargach-hero-simple .h-actions { flex-direction: column; width: 100%; }\r\n    .bargach-hero-simple .h-btn { width: 100%; justify-content: center; padding: 12px 20px; font-size: 13px; }\r\n    .bargach-hero-simple .h-eyebrow { font-size: 10px; }\r\n  }\r\n\r\n  @media (prefers-reduced-motion: reduce) {\r\n    .bargach-hero-simple * { transition-duration: 0.01ms !important; }\r\n  }\r\n<\/style>\r\n\r\n<!-- ===== HTML ===== -->\r\n<section class=\"bargach-hero-simple\" aria-label=\"Bargach Foundation\">\r\n\r\n  <div class=\"h-wrap\">\r\n\r\n    <!-- Eyebrow -->\r\n    <div class=\"h-eyebrow\">Who We Are \u00b7 Est. 2020<\/div>\r\n\r\n    <!-- Decorative Line -->\r\n    <div class=\"h-line\"><\/div>\r\n\r\n    <!-- Headline -->\r\n    <h1 class=\"h-headline\">\r\n      Building stronger <em>communities<\/em>,<br>\r\n      one opportunity at a time.\r\n    <\/h1>\r\n\r\n    <!-- Subtext -->\r\n    <p class=\"h-sub\">\r\n      Bargach Foundation is a non-profit organisation working with rural and semi-urban communities to create access to education, digital skills, livelihoods, safe drinking water and sustainable opportunities.\r\n    <\/p>\r\n\r\n    <!-- Buttons -->\r\n    <div class=\"h-actions\">\r\n      <a href=\"#\" class=\"h-btn h-btn-primary\">\r\n        Our Programs <span class=\"arr\">\u2192<\/span>\r\n      <\/a>\r\n      <a href=\"#\" class=\"h-btn h-btn-secondary\">\r\n        Get Involved <span class=\"arr\">\u2192<\/span>\r\n      <\/a>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/section>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-df5d0b3 e-con e-atomic-element e-flexbox-base e-df5d0b3-fd2b45a \" data-id=\"df5d0b3\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"df5d0b3\">\n    \t\t<div class=\"elementor-element elementor-element-76507d9 elementor-widget elementor-widget-html\" data-id=\"76507d9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     BARGACH \u00b7 OUR STORY \u2013 LIGHT COLORFUL\r\n     Warm, light, and colorful story section with decorative\r\n     elements and elegant typography.\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-story {\r\n    --ink: #1f2a26;\r\n    --teal: #2a9d8f;\r\n    --teal-2: #1a7a6b;\r\n    --teal-light: #3ab0a0;\r\n    --gold: #d48c3c;\r\n    --gold-2: #e8b86d;\r\n    --coral: #e07a5f;\r\n    --coral-light: #f0a38c;\r\n    --lavender: #9b8ec4;\r\n    --lavender-light: #c4b8e0;\r\n    --text-dark: #1f2a26;\r\n    --text-body: #3d534a;\r\n    --text-muted: #6a8a7a;\r\n    --text-muted-light: #8a9e93;\r\n    --bg-light: #f8f4ed;\r\n    --bg-card: rgba(255, 255, 255, 0.85);\r\n    --hairline: rgba(26, 122, 107, 0.08);\r\n    --serif: 'Fraunces', Georgia, 'Times New Roman', serif;\r\n    --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\r\n\r\n    position: relative;\r\n    width: 100%;\r\n    padding: clamp(60px, 8vw, 100px) 0;\r\n    background: var(--bg-light);\r\n    color: var(--text-dark);\r\n    font-family: var(--sans);\r\n    overflow: hidden;\r\n  }\r\n  .bargach-story *,\r\n  .bargach-story *::before,\r\n  .bargach-story *::after {\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  \/* ========== BACKGROUND TEXTURE ========== *\/\r\n  .bargach-story .story-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(42, 157, 143, 0.04) 0%, transparent 50%),\r\n      radial-gradient(ellipse at 50% 50%, rgba(224, 122, 95, 0.03) 0%, transparent 60%),\r\n      radial-gradient(ellipse at 20% 90%, rgba(155, 142, 196, 0.03) 0%, transparent 40%);\r\n    pointer-events: none;\r\n  }\r\n  .bargach-story .story-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: -10%;\r\n    right: -5%;\r\n    background: radial-gradient(circle, rgba(212, 140, 60, 0.05) 0%, rgba(212, 140, 60, 0.01) 40%, transparent 70%);\r\n    filter: blur(60px);\r\n  }\r\n  .bargach-story .story-glow-2 {\r\n    position: absolute;\r\n    z-index: 1;\r\n    pointer-events: none;\r\n    width: 40vw;\r\n    height: 40vw;\r\n    max-width: 500px;\r\n    max-height: 500px;\r\n    bottom: -10%;\r\n    left: -5%;\r\n    background: radial-gradient(circle, rgba(42, 157, 143, 0.04) 0%, rgba(42, 157, 143, 0.01) 50%, transparent 70%);\r\n    filter: blur(60px);\r\n  }\r\n\r\n  \/* ========== CONTAINER ========== *\/\r\n  .bargach-story .story-container {\r\n    position: relative;\r\n    z-index: 2;\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  \/* ========== DECORATIVE LINE ========== *\/\r\n  .bargach-story .story-deco-line {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 16px;\r\n    margin-bottom: 12px;\r\n  }\r\n  .bargach-story .story-deco-line .line {\r\n    flex: 1;\r\n    height: 1px;\r\n    background: linear-gradient(90deg, var(--gold), transparent);\r\n    max-width: 80px;\r\n  }\r\n  .bargach-story .story-deco-line .diamond {\r\n    width: 6px;\r\n    height: 6px;\r\n    background: var(--gold);\r\n    transform: rotate(45deg);\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  \/* ========== HEADER ========== *\/\r\n  .bargach-story .story-header {\r\n    margin-bottom: clamp(32px, 4vw, 48px);\r\n    max-width: 720px;\r\n  }\r\n  .bargach-story .story-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 12px;\r\n  }\r\n  .bargach-story .story-tag::before {\r\n    content: \"\";\r\n    width: 26px;\r\n    height: 1px;\r\n    background: var(--coral);\r\n    display: inline-block;\r\n  }\r\n  .bargach-story .story-heading {\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: var(--text-dark);\r\n  }\r\n  .bargach-story .story-heading .highlight {\r\n    background: linear-gradient(135deg, var(--coral), var(--gold));\r\n    -webkit-background-clip: text;\r\n    -webkit-text-fill-color: transparent;\r\n    background-clip: text;\r\n  }\r\n\r\n  \/* ========== CONTENT GRID ========== *\/\r\n  .bargach-story .story-grid {\r\n    display: grid;\r\n    grid-template-columns: 1fr 0.8fr;\r\n    gap: clamp(30px, 4vw, 56px);\r\n    align-items: start;\r\n  }\r\n  @media (max-width: 900px) {\r\n    .bargach-story .story-grid {\r\n      grid-template-columns: 1fr;\r\n      gap: 28px;\r\n    }\r\n  }\r\n\r\n  \/* ========== LEFT: TEXT CONTENT ========== *\/\r\n  .bargach-story .story-text {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 18px;\r\n  }\r\n  .bargach-story .story-text p {\r\n    font-size: clamp(15px, 1.1vw, 17.5px);\r\n    line-height: 1.75;\r\n    color: var(--text-body);\r\n    font-weight: 300;\r\n    margin: 0;\r\n  }\r\n  .bargach-story .story-text p strong {\r\n    color: var(--teal-2);\r\n    font-weight: 500;\r\n  }\r\n  .bargach-story .story-text .highlight-text {\r\n    color: var(--coral);\r\n    font-weight: 400;\r\n  }\r\n\r\n  \/* ========== QUOTE \/ PULLOUT ========== *\/\r\n  .bargach-story .story-quote {\r\n    background: rgba(255, 255, 255, 0.70);\r\n    backdrop-filter: blur(8px);\r\n    -webkit-backdrop-filter: blur(8px);\r\n    border-radius: 20px;\r\n    padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 32px);\r\n    border: 1px solid rgba(212, 140, 60, 0.08);\r\n    box-shadow: 0 4px 20px rgba(31, 42, 38, 0.04);\r\n    margin: 6px 0;\r\n  }\r\n  .bargach-story .story-quote .quote-icon {\r\n    font-size: 28px;\r\n    color: var(--gold);\r\n    opacity: 0.4;\r\n    line-height: 1;\r\n    margin-bottom: 6px;\r\n  }\r\n  .bargach-story .story-quote blockquote {\r\n    font-family: var(--serif);\r\n    font-weight: 380;\r\n    font-size: clamp(18px, 1.8vw, 24px);\r\n    line-height: 1.4;\r\n    color: var(--text-dark);\r\n    margin: 0 0 12px;\r\n    font-style: italic;\r\n  }\r\n  .bargach-story .story-quote blockquote .highlight {\r\n    color: var(--coral);\r\n  }\r\n  .bargach-story .story-quote .quote-source {\r\n    font-size: 13px;\r\n    color: var(--text-muted);\r\n    font-weight: 400;\r\n    letter-spacing: 0.04em;\r\n  }\r\n\r\n  \/* ========== RIGHT: DECORATIVE ELEMENTS ========== *\/\r\n  .bargach-story .story-side {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 20px;\r\n  }\r\n\r\n  \/* Stats Box *\/\r\n  .bargach-story .story-stats {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    gap: 12px;\r\n  }\r\n  .bargach-story .story-stat {\r\n    background: rgba(255, 255, 255, 0.70);\r\n    backdrop-filter: blur(8px);\r\n    -webkit-backdrop-filter: blur(8px);\r\n    border-radius: 16px;\r\n    padding: 18px 16px;\r\n    text-align: center;\r\n    border: 1px solid rgba(26, 122, 107, 0.06);\r\n    transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n  }\r\n  .bargach-story .story-stat:hover {\r\n    transform: translateY(-3px);\r\n    box-shadow: 0 8px 30px rgba(31, 42, 38, 0.06);\r\n  }\r\n  .bargach-story .story-stat .stat-number {\r\n    font-family: var(--serif);\r\n    font-weight: 560;\r\n    font-size: clamp(28px, 2.8vw, 38px);\r\n    background: linear-gradient(135deg, var(--coral), var(--gold));\r\n    -webkit-background-clip: text;\r\n    -webkit-text-fill-color: transparent;\r\n    background-clip: text;\r\n    line-height: 1;\r\n  }\r\n  .bargach-story .story-stat .stat-label {\r\n    font-size: 12px;\r\n    color: var(--text-muted);\r\n    font-weight: 400;\r\n    margin-top: 4px;\r\n    letter-spacing: 0.04em;\r\n  }\r\n\r\n  \/* Decorative Circle *\/\r\n  .bargach-story .story-circle-deco {\r\n    position: relative;\r\n    width: 100%;\r\n    aspect-ratio: 1\/1;\r\n    max-width: 320px;\r\n    margin: 0 auto;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n  }\r\n  .bargach-story .story-circle-deco .circle-ring {\r\n    position: absolute;\r\n    inset: 0;\r\n    border-radius: 50%;\r\n    border: 1px solid rgba(212, 140, 60, 0.10);\r\n  }\r\n  .bargach-story .story-circle-deco .circle-ring:nth-child(1) {\r\n    transform: scale(0.6);\r\n    border-color: rgba(224, 122, 95, 0.08);\r\n  }\r\n  .bargach-story .story-circle-deco .circle-ring:nth-child(2) {\r\n    transform: scale(0.8);\r\n    border-color: rgba(42, 157, 143, 0.08);\r\n  }\r\n  .bargach-story .story-circle-deco .circle-ring:nth-child(3) {\r\n    transform: scale(1);\r\n    border-color: rgba(212, 140, 60, 0.10);\r\n  }\r\n  .bargach-story .story-circle-deco .circle-content {\r\n    position: relative;\r\n    z-index: 2;\r\n    text-align: center;\r\n    padding: 20px;\r\n  }\r\n  .bargach-story .story-circle-deco .circle-content .year {\r\n    font-family: var(--serif);\r\n    font-weight: 560;\r\n    font-size: clamp(42px, 4vw, 56px);\r\n    color: var(--gold);\r\n    line-height: 1;\r\n  }\r\n  .bargach-story .story-circle-deco .circle-content .label {\r\n    font-size: 13px;\r\n    color: var(--text-muted);\r\n    letter-spacing: 0.08em;\r\n    font-weight: 400;\r\n    margin-top: 4px;\r\n  }\r\n  .bargach-story .story-circle-deco .circle-content .sub-label {\r\n    font-size: 11px;\r\n    color: var(--text-muted-light);\r\n    letter-spacing: 0.06em;\r\n    font-weight: 300;\r\n  }\r\n\r\n  @media (max-width: 600px) {\r\n    .bargach-story .story-stats {\r\n      grid-template-columns: 1fr 1fr;\r\n    }\r\n    .bargach-story .story-circle-deco {\r\n      max-width: 200px;\r\n    }\r\n    .bargach-story .story-quote blockquote {\r\n      font-size: 17px;\r\n    }\r\n  }\r\n\r\n  \/* ========== ANIMATIONS ========== *\/\r\n  @keyframes fadeUp {\r\n    from { opacity: 0; transform: translateY(20px); }\r\n    to { opacity: 1; transform: translateY(0); }\r\n  }\r\n  .bargach-story .story-tag {\r\n    opacity: 0;\r\n    animation: fadeUp 0.6s cubic-bezier(.22, .68, .2, 1) 0.1s forwards;\r\n  }\r\n  .bargach-story .story-heading {\r\n    opacity: 0;\r\n    animation: fadeUp 0.7s cubic-bezier(.22, .68, .2, 1) 0.2s forwards;\r\n  }\r\n  .bargach-story .story-text p {\r\n    opacity: 0;\r\n    animation: fadeUp 0.6s cubic-bezier(.22, .68, .2, 1) forwards;\r\n  }\r\n  .bargach-story .story-text p:nth-child(1) { animation-delay: 0.3s; }\r\n  .bargach-story .story-text p:nth-child(2) { animation-delay: 0.4s; }\r\n  .bargach-story .story-text p:nth-child(3) { animation-delay: 0.5s; }\r\n  .bargach-story .story-text p:nth-child(4) { animation-delay: 0.6s; }\r\n  .bargach-story .story-quote {\r\n    opacity: 0;\r\n    animation: fadeUp 0.7s cubic-bezier(.22, .68, .2, 1) 0.7s forwards;\r\n  }\r\n  .bargach-story .story-stat {\r\n    opacity: 0;\r\n    animation: fadeUp 0.6s cubic-bezier(.22, .68, .2, 1) forwards;\r\n  }\r\n  .bargach-story .story-stat:nth-child(1) { animation-delay: 0.4s; }\r\n  .bargach-story .story-stat:nth-child(2) { animation-delay: 0.5s; }\r\n  .bargach-story .story-stat:nth-child(3) { animation-delay: 0.6s; }\r\n  .bargach-story .story-stat:nth-child(4) { animation-delay: 0.7s; }\r\n  .bargach-story .story-circle-deco {\r\n    opacity: 0;\r\n    animation: fadeUp 0.8s cubic-bezier(.22, .68, .2, 1) 0.5s forwards;\r\n  }\r\n\r\n  \/* Reduced Motion *\/\r\n  @media (prefers-reduced-motion: reduce) {\r\n    .bargach-story * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }\r\n    .bargach-story .story-tag,\r\n    .bargach-story .story-heading,\r\n    .bargach-story .story-text p,\r\n    .bargach-story .story-quote,\r\n    .bargach-story .story-stat,\r\n    .bargach-story .story-circle-deco {\r\n      opacity: 1 !important;\r\n      animation: none !important;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<!-- ============================================================\r\n     OUR STORY \u2013 HTML\r\n     ============================================================ -->\r\n<section class=\"bargach-story\" aria-label=\"Our Story\">\r\n\r\n  <!-- Background -->\r\n  <div class=\"story-bg\" aria-hidden=\"true\"><\/div>\r\n  <div class=\"story-glow\" aria-hidden=\"true\"><\/div>\r\n  <div class=\"story-glow-2\" aria-hidden=\"true\"><\/div>\r\n\r\n  <div class=\"story-container\">\r\n\r\n    <!-- Header -->\r\n    <div class=\"story-header\">\r\n      <div class=\"story-tag\">Where We Began<\/div>\r\n      <h2 class=\"story-heading\">Rooted in the <span class=\"highlight\">communities<\/span> we serve.<\/h2>\r\n    <\/div>\r\n\r\n    <!-- Content Grid -->\r\n    <div class=\"story-grid\">\r\n\r\n      <!-- LEFT: Text -->\r\n      <div class=\"story-text\">\r\n\r\n        <p>\r\n          Established in <strong>2020<\/strong>, Bargach Foundation is a registered non-profit organisation dedicated to creating sustainable social impact among underserved communities.\r\n        <\/p>\r\n\r\n        <p>\r\n          Our work has grown around some of the most practical challenges faced by rural and semi-urban communities \u2014 limited access to learning opportunities, digital resources, employable skills, safe drinking water and sanitation.\r\n        <\/p>\r\n\r\n        <p>\r\n          <span class=\"highlight-text\">We believe these challenges are deeply connected.<\/span>\r\n        <\/p>\r\n\r\n        <div class=\"story-quote\">\r\n          <div class=\"quote-icon\">\"<\/div>\r\n          <blockquote>\r\n            A child needs the right environment to learn.<br>\r\n            A young person needs the right skills to find opportunity.<br>\r\n            A family needs access to safe water to live healthier lives.<br>\r\n            A community needs access to knowledge and technology to participate in a changing world.\r\n          <\/blockquote>\r\n          <div class=\"quote-source\">\u2014 Bargach Foundation Philosophy<\/div>\r\n        <\/div>\r\n\r\n        <p>\r\n          Our programmes therefore bring together <strong>education, digital literacy, skill development, livelihood enhancement, safe drinking water and WASH<\/strong> to address these needs at the community level.\r\n        <\/p>\r\n\r\n        <p>\r\n          Today, Bargach Foundation works across <strong>West Bengal, Odisha and Madhya Pradesh<\/strong>, creating initiatives designed to improve quality of life and strengthen opportunities for people who need them most.\r\n        <\/p>\r\n\r\n      <\/div>\r\n\r\n      <!-- RIGHT: Decorative -->\r\n      <div class=\"story-side\">\r\n\r\n        <!-- Stats -->\r\n        <div class=\"story-stats\">\r\n          <div class=\"story-stat\">\r\n            <div class=\"stat-number\">2020<\/div>\r\n            <div class=\"stat-label\">Year Founded<\/div>\r\n          <\/div>\r\n          <div class=\"story-stat\">\r\n            <div class=\"stat-number\">3<\/div>\r\n            <div class=\"stat-label\">States<\/div>\r\n          <\/div>\r\n          <div class=\"story-stat\">\r\n            <div class=\"stat-number\">30+<\/div>\r\n            <div class=\"stat-label\">IT Centres<\/div>\r\n          <\/div>\r\n          <div class=\"story-stat\">\r\n            <div class=\"stat-number\">20K+<\/div>\r\n            <div class=\"stat-label\">Beneficiaries<\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- Decorative Circle -->\r\n        <div class=\"story-circle-deco\">\r\n          <span class=\"circle-ring\"><\/span>\r\n          <span class=\"circle-ring\"><\/span>\r\n          <span class=\"circle-ring\"><\/span>\r\n          <div class=\"circle-content\">\r\n            <div class=\"year\">5+<\/div>\r\n            <div class=\"label\">Years of Impact<\/div>\r\n            <div class=\"sub-label\">Building communities<\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/section>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-28ba536 e-con e-atomic-element e-flexbox-base e-28ba536-cc87136 \" data-id=\"28ba536\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"28ba536\">\n    \t\t<div class=\"elementor-element elementor-element-37be653 elementor-widget elementor-widget-html\" data-id=\"37be653\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     BARGACH \u00b7 WHY WE EXIST \u2013 LIGHT COLORFUL WITH IMAGE LEFT\r\n     Warm, light, and colorful section with image on the left,\r\n     decorative elements, and elegant typography.\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-why {\r\n    --ink: #1f2a26;\r\n    --teal: #2a9d8f;\r\n    --teal-2: #1a7a6b;\r\n    --teal-light: #3ab0a0;\r\n    --gold: #d48c3c;\r\n    --gold-2: #e8b86d;\r\n    --coral: #e07a5f;\r\n    --coral-light: #f0a38c;\r\n    --lavender: #9b8ec4;\r\n    --lavender-light: #c4b8e0;\r\n    --text-dark: #1f2a26;\r\n    --text-body: #3d534a;\r\n    --text-muted: #6a8a7a;\r\n    --text-muted-light: #8a9e93;\r\n    --bg-light: #f8f4ed;\r\n    --bg-card: rgba(255, 255, 255, 0.85);\r\n    --hairline: rgba(26, 122, 107, 0.08);\r\n    --serif: 'Fraunces', Georgia, 'Times New Roman', serif;\r\n    --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\r\n\r\n    position: relative;\r\n    width: 100%;\r\n    padding: clamp(60px, 8vw, 100px) 0;\r\n    background: var(--bg-light);\r\n    color: var(--text-dark);\r\n    font-family: var(--sans);\r\n    overflow: hidden;\r\n  }\r\n  .bargach-why *,\r\n  .bargach-why *::before,\r\n  .bargach-why *::after {\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  \/* ========== BACKGROUND TEXTURE ========== *\/\r\n  .bargach-why .why-bg {\r\n    position: absolute;\r\n    inset: 0;\r\n    z-index: 0;\r\n    background:\r\n      radial-gradient(ellipse at 95% 15%, rgba(212, 140, 60, 0.05) 0%, transparent 50%),\r\n      radial-gradient(ellipse at 5% 85%, rgba(42, 157, 143, 0.04) 0%, transparent 50%),\r\n      radial-gradient(ellipse at 50% 50%, rgba(224, 122, 95, 0.03) 0%, transparent 60%),\r\n      radial-gradient(ellipse at 80% 90%, rgba(155, 142, 196, 0.03) 0%, transparent 40%);\r\n    pointer-events: none;\r\n  }\r\n  .bargach-why .why-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: -10%;\r\n    right: -5%;\r\n    background: radial-gradient(circle, rgba(212, 140, 60, 0.04) 0%, rgba(212, 140, 60, 0.01) 40%, transparent 70%);\r\n    filter: blur(60px);\r\n  }\r\n  .bargach-why .why-glow-2 {\r\n    position: absolute;\r\n    z-index: 1;\r\n    pointer-events: none;\r\n    width: 40vw;\r\n    height: 40vw;\r\n    max-width: 500px;\r\n    max-height: 500px;\r\n    bottom: -10%;\r\n    left: -5%;\r\n    background: radial-gradient(circle, rgba(42, 157, 143, 0.04) 0%, rgba(42, 157, 143, 0.01) 50%, transparent 70%);\r\n    filter: blur(60px);\r\n  }\r\n\r\n  \/* ========== CONTAINER ========== *\/\r\n  .bargach-why .why-container {\r\n    position: relative;\r\n    z-index: 2;\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  .bargach-why .why-header {\r\n    margin-bottom: clamp(32px, 4vw, 48px);\r\n    max-width: 720px;\r\n  }\r\n  .bargach-why .why-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 12px;\r\n  }\r\n  .bargach-why .why-tag::before {\r\n    content: \"\";\r\n    width: 26px;\r\n    height: 1px;\r\n    background: var(--coral);\r\n    display: inline-block;\r\n  }\r\n  .bargach-why .why-heading {\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: var(--text-dark);\r\n  }\r\n  .bargach-why .why-heading .highlight {\r\n    background: linear-gradient(135deg, var(--coral), var(--gold));\r\n    -webkit-background-clip: text;\r\n    -webkit-text-fill-color: transparent;\r\n    background-clip: text;\r\n  }\r\n\r\n  \/* ========== CONTENT GRID \u2014 IMAGE LEFT ========== *\/\r\n  .bargach-why .why-grid {\r\n    display: grid;\r\n    grid-template-columns: 0.9fr 1fr;\r\n    gap: clamp(30px, 4vw, 56px);\r\n    align-items: start;\r\n  }\r\n  @media (max-width: 900px) {\r\n    .bargach-why .why-grid {\r\n      grid-template-columns: 1fr;\r\n      gap: 28px;\r\n    }\r\n  }\r\n\r\n  \/* ========== LEFT: IMAGE ========== *\/\r\n  .bargach-why .why-image {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 16px;\r\n  }\r\n\r\n  .bargach-why .why-image-card {\r\n    border-radius: 20px;\r\n    overflow: hidden;\r\n    position: relative;\r\n    box-shadow: 0 8px 30px rgba(31, 42, 38, 0.06);\r\n    border: 1px solid rgba(26, 122, 107, 0.06);\r\n    transition: transform 0.4s ease, box-shadow 0.4s ease;\r\n  }\r\n  .bargach-why .why-image-card:hover {\r\n    transform: translateY(-4px);\r\n    box-shadow: 0 16px 50px rgba(31, 42, 38, 0.08);\r\n  }\r\n  .bargach-why .why-image-card img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n    display: block;\r\n    aspect-ratio: 4\/3;\r\n    transition: transform 0.6s ease;\r\n  }\r\n  .bargach-why .why-image-card:hover img {\r\n    transform: scale(1.03);\r\n  }\r\n  .bargach-why .why-image-card .image-overlay {\r\n    position: absolute;\r\n    bottom: 0;\r\n    left: 0;\r\n    right: 0;\r\n    padding: 20px 24px;\r\n    background: linear-gradient(0deg, rgba(248, 244, 237, 0.80) 0%, transparent 100%);\r\n    pointer-events: none;\r\n  }\r\n  .bargach-why .why-image-card .image-overlay .image-label {\r\n    font-size: 11px;\r\n    font-weight: 600;\r\n    letter-spacing: 0.12em;\r\n    text-transform: uppercase;\r\n    color: var(--coral);\r\n  }\r\n  .bargach-why .why-image-card .image-overlay .image-title {\r\n    font-family: var(--serif);\r\n    font-size: clamp(16px, 1.4vw, 20px);\r\n    color: var(--text-dark);\r\n    font-weight: 380;\r\n    margin: 0;\r\n  }\r\n\r\n  \/* Mission Card below image *\/\r\n  .bargach-why .why-mission {\r\n    background: rgba(255, 255, 255, 0.70);\r\n    backdrop-filter: blur(8px);\r\n    -webkit-backdrop-filter: blur(8px);\r\n    border-radius: 16px;\r\n    padding: clamp(18px, 2vw, 24px) clamp(18px, 2vw, 24px);\r\n    border: 1px solid rgba(212, 140, 60, 0.08);\r\n    box-shadow: 0 4px 20px rgba(31, 42, 38, 0.04);\r\n    text-align: center;\r\n  }\r\n  .bargach-why .why-mission .mission-icon {\r\n    font-size: 24px;\r\n    margin-bottom: 4px;\r\n  }\r\n  .bargach-why .why-mission .mission-text {\r\n    font-family: var(--serif);\r\n    font-weight: 380;\r\n    font-size: clamp(16px, 1.3vw, 20px);\r\n    line-height: 1.4;\r\n    color: var(--text-dark);\r\n    margin: 0;\r\n  }\r\n  .bargach-why .why-mission .mission-text .highlight {\r\n    color: var(--coral);\r\n  }\r\n  .bargach-why .why-mission .mission-sub {\r\n    font-size: 12px;\r\n    color: var(--text-muted);\r\n    font-weight: 300;\r\n    margin-top: 4px;\r\n  }\r\n\r\n  \/* ========== RIGHT: TEXT CONTENT ========== *\/\r\n  .bargach-why .why-text {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 16px;\r\n  }\r\n  .bargach-why .why-text p {\r\n    font-size: clamp(15px, 1.1vw, 17.5px);\r\n    line-height: 1.75;\r\n    color: var(--text-body);\r\n    font-weight: 300;\r\n    margin: 0;\r\n  }\r\n  .bargach-why .why-text p strong {\r\n    color: var(--teal-2);\r\n    font-weight: 500;\r\n  }\r\n  .bargach-why .why-text .highlight-text {\r\n    color: var(--coral);\r\n    font-weight: 400;\r\n  }\r\n\r\n  \/* ========== CHALLENGES LIST ========== *\/\r\n  .bargach-why .why-challenges {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    gap: 10px 20px;\r\n    margin: 6px 0 4px;\r\n    padding: 0;\r\n    list-style: none;\r\n  }\r\n  .bargach-why .why-challenges li {\r\n    font-size: clamp(14px, 0.95vw, 16px);\r\n    line-height: 1.5;\r\n    color: var(--text-body);\r\n    font-weight: 300;\r\n    padding-left: 20px;\r\n    position: relative;\r\n  }\r\n  .bargach-why .why-challenges li::before {\r\n    content: \"\u2726\";\r\n    position: absolute;\r\n    left: 0;\r\n    top: 0;\r\n    color: var(--coral);\r\n    font-size: 12px;\r\n  }\r\n  @media (max-width: 600px) {\r\n    .bargach-why .why-challenges {\r\n      grid-template-columns: 1fr;\r\n      gap: 8px;\r\n    }\r\n  }\r\n\r\n  \/* ========== ANIMATIONS ========== *\/\r\n  @keyframes fadeUp {\r\n    from { opacity: 0; transform: translateY(20px); }\r\n    to { opacity: 1; transform: translateY(0); }\r\n  }\r\n  .bargach-why .why-tag {\r\n    opacity: 0;\r\n    animation: fadeUp 0.6s cubic-bezier(.22, .68, .2, 1) 0.1s forwards;\r\n  }\r\n  .bargach-why .why-heading {\r\n    opacity: 0;\r\n    animation: fadeUp 0.7s cubic-bezier(.22, .68, .2, 1) 0.2s forwards;\r\n  }\r\n  .bargach-why .why-text p {\r\n    opacity: 0;\r\n    animation: fadeUp 0.6s cubic-bezier(.22, .68, .2, 1) forwards;\r\n  }\r\n  .bargach-why .why-text p:nth-child(1) { animation-delay: 0.3s; }\r\n  .bargach-why .why-text p:nth-child(2) { animation-delay: 0.4s; }\r\n  .bargach-why .why-text p:nth-child(3) { animation-delay: 0.5s; }\r\n  .bargach-why .why-text p:nth-child(4) { animation-delay: 0.6s; }\r\n  .bargach-why .why-challenges li {\r\n    opacity: 0;\r\n    animation: fadeUp 0.5s cubic-bezier(.22, .68, .2, 1) forwards;\r\n  }\r\n  .bargach-why .why-challenges li:nth-child(1) { animation-delay: 0.5s; }\r\n  .bargach-why .why-challenges li:nth-child(2) { animation-delay: 0.6s; }\r\n  .bargach-why .why-challenges li:nth-child(3) { animation-delay: 0.7s; }\r\n  .bargach-why .why-challenges li:nth-child(4) { animation-delay: 0.8s; }\r\n  .bargach-why .why-image-card {\r\n    opacity: 0;\r\n    animation: fadeUp 0.7s cubic-bezier(.22, .68, .2, 1) 0.3s forwards;\r\n  }\r\n  .bargach-why .why-mission {\r\n    opacity: 0;\r\n    animation: fadeUp 0.7s cubic-bezier(.22, .68, .2, 1) 0.5s forwards;\r\n  }\r\n\r\n  \/* Reduced Motion *\/\r\n  @media (prefers-reduced-motion: reduce) {\r\n    .bargach-why * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }\r\n    .bargach-why .why-tag,\r\n    .bargach-why .why-heading,\r\n    .bargach-why .why-text p,\r\n    .bargach-why .why-challenges li,\r\n    .bargach-why .why-image-card,\r\n    .bargach-why .why-mission {\r\n      opacity: 1 !important;\r\n      animation: none !important;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<!-- ============================================================\r\n     WHY WE EXIST \u2013 HTML WITH IMAGE LEFT\r\n     ============================================================ -->\r\n<section class=\"bargach-why\" aria-label=\"Why We Exist\">\r\n\r\n  <!-- Background -->\r\n  <div class=\"why-bg\" aria-hidden=\"true\"><\/div>\r\n  <div class=\"why-glow\" aria-hidden=\"true\"><\/div>\r\n  <div class=\"why-glow-2\" aria-hidden=\"true\"><\/div>\r\n\r\n  <div class=\"why-container\">\r\n\r\n    <!-- Header -->\r\n    <div class=\"why-header\">\r\n      <div class=\"why-tag\">The Need<\/div>\r\n      <h2 class=\"why-heading\">Because opportunity should not <span class=\"highlight\">depend on where you live<\/span>.<\/h2>\r\n    <\/div>\r\n\r\n    <!-- Content Grid \u2013 Image Left -->\r\n    <div class=\"why-grid\">\r\n\r\n      <!-- LEFT: Image + Mission -->\r\n      <div class=\"why-image\">\r\n\r\n        <!-- Image Card -->\r\n        <div class=\"why-image-card\">\r\n          <img decoding=\"async\" \r\n            src=\"https:\/\/images.unsplash.com\/photo-1488521787991-ed7bbaae773c?q=80&w=2070&auto=format&fit=crop\" \r\n            alt=\"Community working together\" \r\n            loading=\"lazy\"\r\n          \/>\r\n          <div class=\"image-overlay\">\r\n            <div class=\"image-label\">On the Ground<\/div>\r\n            <div class=\"image-title\">Working alongside communities<\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- Mission Card -->\r\n        <div class=\"why-mission\">\r\n          <div class=\"mission-icon\">\ud83c\udf31<\/div>\r\n          <p class=\"mission-text\">\r\n            Creating <span class=\"highlight\">pathways<\/span> to knowledge,<br>skills, health &amp; self-reliance.\r\n          <\/p>\r\n          <div class=\"mission-sub\">\u2014 Bargach Foundation Mission<\/div>\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n      <!-- RIGHT: Text -->\r\n      <div class=\"why-text\">\r\n\r\n        <p>\r\n          For many underserved communities, everyday barriers can make it difficult to access the opportunities that others may take for granted.\r\n        <\/p>\r\n\r\n        <ul class=\"why-challenges\">\r\n          <li>Limited learning resources can affect a child's education.<\/li>\r\n          <li>Lack of digital access can create new forms of exclusion.<\/li>\r\n          <li>Limited professional skills can make employment harder to reach.<\/li>\r\n          <li>Unsafe or contaminated water can affect families and communities.<\/li>\r\n        <\/ul>\r\n\r\n        <p>\r\n          We work to address these challenges through <strong>practical, community-focused initiatives<\/strong>.\r\n        <\/p>\r\n\r\n        <p>\r\n          <span class=\"highlight-text\">Our aim is not simply to provide short-term assistance.<\/span>\r\n        <\/p>\r\n\r\n        <p>\r\n          It is to create <strong>pathways towards knowledge, skills, health, dignity, employment and self-reliance<\/strong>.\r\n        <\/p>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/section>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-0e18ea5 e-con e-atomic-element e-flexbox-base e-0e18ea5-645f4c9 \" data-id=\"0e18ea5\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"0e18ea5\">\n    \t\t<div class=\"elementor-element elementor-element-e5abada elementor-widget elementor-widget-html\" data-id=\"e5abada\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     BARGACH \u00b7 VISION, MISSION & CORE FOCUS \u2013 WITH IMAGES\r\n     Light colorful design with images on every card.\r\n     Vision, Mission, and 4 Core Focus cards with icons,\r\n     hover effects, and popup details.\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-vm-full {\r\n    --ink: #1f2a26;\r\n    --teal: #2a9d8f;\r\n    --teal-2: #1a7a6b;\r\n    --teal-light: #3ab0a0;\r\n    --gold: #d48c3c;\r\n    --gold-2: #e8b86d;\r\n    --coral: #e07a5f;\r\n    --coral-light: #f0a38c;\r\n    --lavender: #9b8ec4;\r\n    --text-dark: #1f2a26;\r\n    --text-body: #3d534a;\r\n    --text-muted: #6a8a7a;\r\n    --text-muted-light: #8a9e93;\r\n    --bg-light: #f8f4ed;\r\n    --hairline: rgba(26, 122, 107, 0.08);\r\n    --serif: 'Fraunces', Georgia, 'Times New Roman', serif;\r\n    --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\r\n\r\n    position: relative;\r\n    width: 100%;\r\n    padding: clamp(60px, 8vw, 100px) 0;\r\n    background: var(--bg-light);\r\n    color: var(--text-dark);\r\n    font-family: var(--sans);\r\n    overflow: hidden;\r\n  }\r\n  .bargach-vm-full *,\r\n  .bargach-vm-full *::before,\r\n  .bargach-vm-full *::after {\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  \/* ========== BACKGROUND ========== *\/\r\n  .bargach-vm-full .vm-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.05) 0%, transparent 50%),\r\n      radial-gradient(ellipse at 90% 80%, rgba(42, 157, 143, 0.04) 0%, transparent 50%),\r\n      radial-gradient(ellipse at 50% 50%, rgba(224, 122, 95, 0.03) 0%, transparent 60%);\r\n    pointer-events: none;\r\n  }\r\n  .bargach-vm-full .vm-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: -10%;\r\n    right: -5%;\r\n    background: radial-gradient(circle, rgba(212, 140, 60, 0.04) 0%, rgba(212, 140, 60, 0.01) 40%, transparent 70%);\r\n    filter: blur(60px);\r\n  }\r\n  .bargach-vm-full .vm-glow-2 {\r\n    position: absolute;\r\n    z-index: 1;\r\n    pointer-events: none;\r\n    width: 40vw;\r\n    height: 40vw;\r\n    max-width: 500px;\r\n    max-height: 500px;\r\n    bottom: -10%;\r\n    left: -5%;\r\n    background: radial-gradient(circle, rgba(42, 157, 143, 0.04) 0%, rgba(42, 157, 143, 0.01) 50%, transparent 70%);\r\n    filter: blur(60px);\r\n  }\r\n\r\n  \/* ========== CONTAINER ========== *\/\r\n  .bargach-vm-full .vm-container {\r\n    position: relative;\r\n    z-index: 2;\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  \/* ========== SECTION DIVIDER ========== *\/\r\n  .bargach-vm-full .vm-divider {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 16px;\r\n    margin: clamp(40px, 5vw, 60px) 0 clamp(28px, 3vw, 40px);\r\n  }\r\n  .bargach-vm-full .vm-divider .line {\r\n    flex: 1;\r\n    height: 1px;\r\n    background: linear-gradient(90deg, var(--coral), transparent);\r\n    max-width: 80px;\r\n  }\r\n  .bargach-vm-full .vm-divider .diamond {\r\n    width: 8px;\r\n    height: 8px;\r\n    background: var(--coral);\r\n    transform: rotate(45deg);\r\n    flex-shrink: 0;\r\n    opacity: 0.4;\r\n  }\r\n\r\n  \/* ========== SECTION HEADERS ========== *\/\r\n  .bargach-vm-full .vm-section-header {\r\n    margin-bottom: clamp(24px, 3vw, 36px);\r\n    max-width: 720px;\r\n  }\r\n  .bargach-vm-full .vm-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 8px;\r\n  }\r\n  .bargach-vm-full .vm-tag::before {\r\n    content: \"\";\r\n    width: 26px;\r\n    height: 1px;\r\n    background: var(--coral);\r\n    display: inline-block;\r\n  }\r\n  .bargach-vm-full .vm-heading {\r\n    font-family: var(--serif);\r\n    font-weight: 380;\r\n    font-size: clamp(28px, 3.5vw, 44px);\r\n    line-height: 1.08;\r\n    margin: 0;\r\n    color: var(--text-dark);\r\n  }\r\n  .bargach-vm-full .vm-heading .highlight {\r\n    background: linear-gradient(135deg, var(--coral), var(--gold));\r\n    -webkit-background-clip: text;\r\n    -webkit-text-fill-color: transparent;\r\n    background-clip: text;\r\n  }\r\n  .bargach-vm-full .vm-sub {\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: 12px 0 0;\r\n    max-width: 640px;\r\n  }\r\n  .bargach-vm-full .vm-sub strong {\r\n    color: var(--teal-2);\r\n    font-weight: 500;\r\n  }\r\n\r\n  \/* ========== VISION & MISSION 2-COLUMN CARDS ========== *\/\r\n  .bargach-vm-full .vm-two-col {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    gap: clamp(24px, 3vw, 40px);\r\n    margin-bottom: clamp(40px, 5vw, 60px);\r\n  }\r\n  @media (max-width: 768px) {\r\n    .bargach-vm-full .vm-two-col {\r\n      grid-template-columns: 1fr;\r\n      gap: 20px;\r\n    }\r\n  }\r\n\r\n  .bargach-vm-full .vm-block {\r\n    background: rgba(255, 255, 255, 0.75);\r\n    backdrop-filter: blur(8px);\r\n    -webkit-backdrop-filter: blur(8px);\r\n    border-radius: 20px;\r\n    overflow: hidden;\r\n    border: 1px solid rgba(26, 122, 107, 0.06);\r\n    box-shadow: 0 4px 20px rgba(31, 42, 38, 0.04);\r\n    transition: transform 0.4s ease, box-shadow 0.4s ease;\r\n  }\r\n  .bargach-vm-full .vm-block:hover {\r\n    transform: translateY(-4px);\r\n    box-shadow: 0 12px 40px rgba(31, 42, 38, 0.08);\r\n    border-color: rgba(212, 140, 60, 0.08);\r\n  }\r\n\r\n  .bargach-vm-full .vm-block .block-image {\r\n    width: 100%;\r\n    aspect-ratio: 16\/7;\r\n    overflow: hidden;\r\n    position: relative;\r\n  }\r\n  .bargach-vm-full .vm-block .block-image img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n    display: block;\r\n    transition: transform 0.6s ease;\r\n  }\r\n  .bargach-vm-full .vm-block:hover .block-image img {\r\n    transform: scale(1.03);\r\n  }\r\n  .bargach-vm-full .vm-block .block-image .block-badge {\r\n    position: absolute;\r\n    top: 12px;\r\n    left: 12px;\r\n    background: rgba(255, 255, 255, 0.85);\r\n    backdrop-filter: blur(4px);\r\n    padding: 4px 14px;\r\n    border-radius: 999px;\r\n    font-size: 9px;\r\n    font-weight: 600;\r\n    letter-spacing: 0.08em;\r\n    text-transform: uppercase;\r\n    color: var(--coral);\r\n    border: 1px solid rgba(224, 122, 95, 0.08);\r\n  }\r\n\r\n  .bargach-vm-full .vm-block .block-body {\r\n    padding: clamp(18px, 2.2vw, 28px) clamp(20px, 2.5vw, 30px) clamp(20px, 2.5vw, 28px);\r\n  }\r\n  .bargach-vm-full .vm-block .block-body .block-icon {\r\n    font-size: 24px;\r\n    margin-bottom: 4px;\r\n    display: block;\r\n  }\r\n  .bargach-vm-full .vm-block .block-body .block-tag {\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(--coral);\r\n    margin: 0 0 2px;\r\n  }\r\n  .bargach-vm-full .vm-block .block-body .block-title {\r\n    font-family: var(--serif);\r\n    font-weight: 560;\r\n    font-size: clamp(18px, 1.8vw, 24px);\r\n    color: var(--text-dark);\r\n    margin: 0 0 8px;\r\n  }\r\n  .bargach-vm-full .vm-block .block-body .block-title .highlight {\r\n    color: var(--coral);\r\n  }\r\n  .bargach-vm-full .vm-block .block-body .block-desc {\r\n    font-size: clamp(14px, 0.95vw, 15.5px);\r\n    line-height: 1.7;\r\n    color: var(--text-body);\r\n    font-weight: 300;\r\n    margin: 0;\r\n  }\r\n  .bargach-vm-full .vm-block .block-body .block-desc strong {\r\n    color: var(--teal-2);\r\n    font-weight: 500;\r\n  }\r\n\r\n  \/* ========== CORE FOCUS \u2013 4 CARDS WITH IMAGES ========== *\/\r\n  .bargach-vm-full .vm-focus-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(4, 1fr);\r\n    gap: clamp(16px, 1.8vw, 24px);\r\n    margin-top: 8px;\r\n  }\r\n  @media (max-width: 1024px) {\r\n    .bargach-vm-full .vm-focus-grid {\r\n      grid-template-columns: repeat(2, 1fr);\r\n    }\r\n  }\r\n  @media (max-width: 600px) {\r\n    .bargach-vm-full .vm-focus-grid {\r\n      grid-template-columns: 1fr;\r\n      max-width: 400px;\r\n      margin-left: auto;\r\n      margin-right: auto;\r\n    }\r\n  }\r\n\r\n  .bargach-vm-full .vm-focus-card {\r\n    background: rgba(255, 255, 255, 0.75);\r\n    backdrop-filter: blur(8px);\r\n    -webkit-backdrop-filter: blur(8px);\r\n    border-radius: 16px;\r\n    overflow: hidden;\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    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;\r\n    cursor: pointer;\r\n  }\r\n  .bargach-vm-full .vm-focus-card:hover {\r\n    transform: translateY(-6px);\r\n    box-shadow: 0 16px 50px rgba(31, 42, 38, 0.08);\r\n    border-color: rgba(212, 140, 60, 0.10);\r\n  }\r\n\r\n  .bargach-vm-full .vm-focus-card .card-image {\r\n    width: 100%;\r\n    aspect-ratio: 16\/8;\r\n    overflow: hidden;\r\n    position: relative;\r\n  }\r\n  .bargach-vm-full .vm-focus-card .card-image img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n    display: block;\r\n    transition: transform 0.6s ease;\r\n  }\r\n  .bargach-vm-full .vm-focus-card:hover .card-image img {\r\n    transform: scale(1.05);\r\n  }\r\n  .bargach-vm-full .vm-focus-card .card-image .card-number-badge {\r\n    position: absolute;\r\n    top: 10px;\r\n    right: 12px;\r\n    font-family: var(--serif);\r\n    font-weight: 560;\r\n    font-size: 14px;\r\n    color: rgba(255, 255, 255, 0.80);\r\n    background: rgba(15, 26, 22, 0.30);\r\n    backdrop-filter: blur(4px);\r\n    padding: 2px 12px;\r\n    border-radius: 999px;\r\n    border: 1px solid rgba(255, 255, 255, 0.08);\r\n  }\r\n\r\n  .bargach-vm-full .vm-focus-card .card-body {\r\n    padding: clamp(16px, 1.8vw, 22px) clamp(16px, 1.8vw, 22px) clamp(18px, 2vw, 24px);\r\n  }\r\n  .bargach-vm-full .vm-focus-card .card-body .card-icon {\r\n    font-size: 22px;\r\n    margin-bottom: 4px;\r\n    display: block;\r\n  }\r\n  .bargach-vm-full .vm-focus-card .card-body .card-title {\r\n    font-family: var(--serif);\r\n    font-weight: 560;\r\n    font-size: clamp(16px, 1.4vw, 20px);\r\n    color: var(--text-dark);\r\n    margin: 0 0 4px;\r\n  }\r\n  .bargach-vm-full .vm-focus-card .card-body .card-title .highlight {\r\n    color: var(--coral);\r\n  }\r\n  .bargach-vm-full .vm-focus-card .card-body .card-desc {\r\n    font-size: clamp(12.5px, 0.85vw, 14px);\r\n    line-height: 1.6;\r\n    color: var(--text-body);\r\n    font-weight: 300;\r\n    margin: 0;\r\n  }\r\n  .bargach-vm-full .vm-focus-card .card-body .card-desc strong {\r\n    color: var(--teal-2);\r\n    font-weight: 500;\r\n  }\r\n  .bargach-vm-full .vm-focus-card .card-body .card-hint {\r\n    font-size: 10.5px;\r\n    color: var(--text-muted-light);\r\n    margin-top: 8px;\r\n    opacity: 0.5;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 4px;\r\n    transition: opacity 0.3s ease;\r\n  }\r\n  .bargach-vm-full .vm-focus-card:hover .card-body .card-hint {\r\n    opacity: 0.8;\r\n  }\r\n\r\n  \/* ========== POPUP OVERLAY ========== *\/\r\n  .bargach-vm-full .vm-popup-overlay {\r\n    position: fixed;\r\n    inset: 0;\r\n    z-index: 999;\r\n    background: rgba(248, 244, 237, 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  .bargach-vm-full .vm-popup-overlay.active {\r\n    opacity: 1;\r\n    pointer-events: auto;\r\n  }\r\n\r\n  .bargach-vm-full .vm-popup-content {\r\n    background: #fffcf5;\r\n    border-radius: 24px;\r\n    max-width: 640px;\r\n    width: 100%;\r\n    max-height: 90vh;\r\n    overflow-y: auto;\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: 1px solid rgba(26, 122, 107, 0.06);\r\n  }\r\n  .bargach-vm-full .vm-popup-overlay.active .vm-popup-content {\r\n    transform: scale(1) translateY(0);\r\n  }\r\n\r\n  .bargach-vm-full .vm-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-dark);\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  }\r\n  .bargach-vm-full .vm-popup-close:hover {\r\n    background: var(--coral);\r\n    color: #fffcf5;\r\n    transform: rotate(90deg);\r\n  }\r\n\r\n  .bargach-vm-full .vm-popup-body {\r\n    padding: clamp(28px, 3.5vw, 40px) clamp(24px, 3vw, 36px) clamp(28px, 3vw, 36px);\r\n  }\r\n  .bargach-vm-full .vm-popup-body .popup-number {\r\n    font-family: var(--serif);\r\n    font-weight: 560;\r\n    font-size: 14px;\r\n    color: var(--coral);\r\n    letter-spacing: 0.06em;\r\n    margin: 0 0 4px;\r\n  }\r\n  .bargach-vm-full .vm-popup-body h3 {\r\n    font-family: var(--serif);\r\n    font-weight: 560;\r\n    font-size: clamp(24px, 2.8vw, 34px);\r\n    color: var(--text-dark);\r\n    margin: 0 0 12px;\r\n  }\r\n  .bargach-vm-full .vm-popup-body h3 .highlight {\r\n    color: var(--coral);\r\n  }\r\n  .bargach-vm-full .vm-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  .bargach-vm-full .vm-popup-body .popup-desc strong {\r\n    color: var(--coral);\r\n    font-weight: 500;\r\n  }\r\n  .bargach-vm-full .vm-popup-body .popup-list {\r\n    list-style: none;\r\n    padding: 0;\r\n    margin: 0 0 16px;\r\n  }\r\n  .bargach-vm-full .vm-popup-body .popup-list li {\r\n    font-size: 14px;\r\n    color: var(--text-body);\r\n    font-weight: 300;\r\n    padding: 4px 0 4px 24px;\r\n    position: relative;\r\n    line-height: 1.6;\r\n    border-bottom: 1px solid rgba(26, 122, 107, 0.04);\r\n  }\r\n  .bargach-vm-full .vm-popup-body .popup-list li:last-child {\r\n    border-bottom: none;\r\n  }\r\n  .bargach-vm-full .vm-popup-body .popup-list li::before {\r\n    content: \"\u2726\";\r\n    position: absolute;\r\n    left: 0;\r\n    top: 4px;\r\n    color: var(--coral);\r\n    font-size: 11px;\r\n  }\r\n\r\n  .bargach-vm-full .vm-popup-content::-webkit-scrollbar {\r\n    width: 6px;\r\n  }\r\n  .bargach-vm-full .vm-popup-content::-webkit-scrollbar-track {\r\n    background: transparent;\r\n  }\r\n  .bargach-vm-full .vm-popup-content::-webkit-scrollbar-thumb {\r\n    background: var(--coral);\r\n    border-radius: 999px;\r\n  }\r\n\r\n  \/* ========== ANIMATIONS ========== *\/\r\n  @keyframes fadeUp {\r\n    from { opacity: 0; transform: translateY(20px); }\r\n    to { opacity: 1; transform: translateY(0); }\r\n  }\r\n  .bargach-vm-full .vm-tag { opacity: 0; animation: fadeUp 0.6s ease 0.1s forwards; }\r\n  .bargach-vm-full .vm-heading { opacity: 0; animation: fadeUp 0.7s ease 0.2s forwards; }\r\n  .bargach-vm-full .vm-sub { opacity: 0; animation: fadeUp 0.7s ease 0.3s forwards; }\r\n  .bargach-vm-full .vm-block { opacity: 0; animation: fadeUp 0.6s ease forwards; }\r\n  .bargach-vm-full .vm-block:nth-child(1) { animation-delay: 0.2s; }\r\n  .bargach-vm-full .vm-block:nth-child(2) { animation-delay: 0.3s; }\r\n  .bargach-vm-full .vm-focus-card { opacity: 0; animation: fadeUp 0.6s ease forwards; }\r\n  .bargach-vm-full .vm-focus-card:nth-child(1) { animation-delay: 0.2s; }\r\n  .bargach-vm-full .vm-focus-card:nth-child(2) { animation-delay: 0.3s; }\r\n  .bargach-vm-full .vm-focus-card:nth-child(3) { animation-delay: 0.4s; }\r\n  .bargach-vm-full .vm-focus-card:nth-child(4) { animation-delay: 0.5s; }\r\n\r\n  @media (prefers-reduced-motion: reduce) {\r\n    .bargach-vm-full * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }\r\n    .bargach-vm-full .vm-tag,\r\n    .bargach-vm-full .vm-heading,\r\n    .bargach-vm-full .vm-sub,\r\n    .bargach-vm-full .vm-block,\r\n    .bargach-vm-full .vm-focus-card {\r\n      opacity: 1 !important;\r\n      animation: none !important;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<!-- ============================================================\r\n     VISION, MISSION & CORE FOCUS \u2013 HTML WITH IMAGES\r\n     ============================================================ -->\r\n<section class=\"bargach-vm-full\" aria-label=\"Vision, Mission & Core Focus\">\r\n\r\n  <!-- Background -->\r\n  <div class=\"vm-bg\" aria-hidden=\"true\"><\/div>\r\n  <div class=\"vm-glow\" aria-hidden=\"true\"><\/div>\r\n  <div class=\"vm-glow-2\" aria-hidden=\"true\"><\/div>\r\n\r\n  <div class=\"vm-container\">\r\n\r\n    <!-- ====== VISION ====== -->\r\n    <div class=\"vm-section-header\">\r\n      <div class=\"vm-tag\">Where We Want to Go<\/div>\r\n      <h2 class=\"vm-heading\">A sustainable, inclusive and <span class=\"highlight\">self-reliant<\/span> society.<\/h2>\r\n      <p class=\"vm-sub\">We envision communities where people have the <strong>resources, knowledge and opportunities<\/strong> needed to shape their own futures.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"vm-two-col\">\r\n      <!-- Vision Card -->\r\n      <div class=\"vm-block\">\r\n        <div class=\"block-image\">\r\n          <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1531482615713-2afd69097998?q=80&w=2070&auto=format&fit=crop\" alt=\"Community empowerment\" loading=\"lazy\" \/>\r\n          <span class=\"block-badge\">Our Vision<\/span>\r\n        <\/div>\r\n        <div class=\"block-body\">\r\n          <span class=\"block-icon\">\ud83c\udf0d<\/span>\r\n          <div class=\"block-tag\">Our Vision<\/div>\r\n          <h3 class=\"block-title\">To build a <span class=\"highlight\">sustainable, inclusive<\/span> and self-reliant society<\/h3>\r\n          <p class=\"block-desc\">By empowering communities through <strong>education, livelihood opportunities, clean water<\/strong> and responsible development.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Commitment Card -->\r\n      <div class=\"vm-block\">\r\n        <div class=\"block-image\">\r\n          <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1517048676732-d65bc937f952?q=80&w=2070&auto=format&fit=crop\" alt=\"Community commitment\" loading=\"lazy\" \/>\r\n          <span class=\"block-badge\">Our Commitment<\/span>\r\n        <\/div>\r\n        <div class=\"block-body\">\r\n          <span class=\"block-icon\">\ud83d\udcab<\/span>\r\n          <div class=\"block-tag\">Our Commitment<\/div>\r\n          <h3 class=\"block-title\"><span class=\"highlight\">Community empowerment<\/span> &amp; responsible action<\/h3>\r\n          <p class=\"block-desc\">This vision reflects the Foundation's commitment to <strong>community empowerment, sustainable development<\/strong> and responsible action.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Divider -->\r\n    <div class=\"vm-divider\">\r\n      <span class=\"line\"><\/span>\r\n      <span class=\"diamond\"><\/span>\r\n      <span class=\"line\" style=\"background: linear-gradient(270deg, var(--coral), transparent);\"><\/span>\r\n    <\/div>\r\n\r\n    <!-- ====== MISSION ====== -->\r\n    <div class=\"vm-section-header\">\r\n      <div class=\"vm-tag\">What Drives Us<\/div>\r\n      <h2 class=\"vm-heading\">Turning access into <span class=\"highlight\">opportunity<\/span>.<\/h2>\r\n    <\/div>\r\n\r\n    <div class=\"vm-two-col\">\r\n      <!-- Mission Card -->\r\n      <div class=\"vm-block\">\r\n        <div class=\"block-image\">\r\n          <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1544027993-37dbfe43562a?q=80&w=2070&auto=format&fit=crop\" alt=\"Sustainable development\" loading=\"lazy\" \/>\r\n          <span class=\"block-badge\">Our Mission<\/span>\r\n        <\/div>\r\n        <div class=\"block-body\">\r\n          <span class=\"block-icon\">\ud83c\udfaf<\/span>\r\n          <div class=\"block-tag\">Our Mission<\/div>\r\n          <h3 class=\"block-title\">Improving lives through <span class=\"highlight\">sustainable development<\/span> &amp; livelihoods<\/h3>\r\n          <p class=\"block-desc\">To improve lives by promoting <strong>sustainable development, strengthening livelihoods<\/strong>, expanding access to safe drinking water and sanitation, and creating opportunities for youth through skill development.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Programmes Card -->\r\n      <div class=\"vm-block\">\r\n        <div class=\"block-image\">\r\n          <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1523050854058-8df90110c7f1?q=80&w=2070&auto=format&fit=crop\" alt=\"Education and programmes\" loading=\"lazy\" \/>\r\n          <span class=\"block-badge\">Our Programmes<\/span>\r\n        <\/div>\r\n        <div class=\"block-body\">\r\n          <span class=\"block-icon\">\ud83c\udf1f<\/span>\r\n          <div class=\"block-tag\">Our Programmes<\/div>\r\n          <h3 class=\"block-title\"><span class=\"highlight\">Education<\/span> \u00b7 Digital Literacy \u00b7 Livelihoods \u00b7 WASH<\/h3>\r\n          <p class=\"block-desc\">Our mission comes to life through programmes focused on <strong>education, digital literacy, employability, livelihoods, water, sanitation<\/strong> and community awareness.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Divider -->\r\n    <div class=\"vm-divider\">\r\n      <span class=\"line\"><\/span>\r\n      <span class=\"diamond\"><\/span>\r\n      <span class=\"line\" style=\"background: linear-gradient(270deg, var(--coral), transparent);\"><\/span>\r\n    <\/div>\r\n\r\n    <!-- ====== CORE FOCUS ====== -->\r\n    <div class=\"vm-section-header\">\r\n      <div class=\"vm-tag\">What We Work On<\/div>\r\n      <h2 class=\"vm-heading\">Four pathways towards <span class=\"highlight\">stronger<\/span> communities.<\/h2>\r\n    <\/div>\r\n\r\n    <div class=\"vm-focus-grid\">\r\n\r\n      <!-- Focus 01 \u2013 Safe Water -->\r\n      <div class=\"vm-focus-card\" data-popup=\"focus1\">\r\n        <div class=\"card-image\">\r\n          <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1548839140-29a749e1cf4d?q=80&w=2070&auto=format&fit=crop\" alt=\"Safe water\" loading=\"lazy\" \/>\r\n          <span class=\"card-number-badge\">01<\/span>\r\n        <\/div>\r\n        <div class=\"card-body\">\r\n          <span class=\"card-icon\">\ud83d\udca7<\/span>\r\n          <h4 class=\"card-title\"><span class=\"highlight\">Safe<\/span> Water<\/h4>\r\n          <p class=\"card-desc\">We work to improve access to <strong>safe drinking water<\/strong> while promoting awareness around sanitation, hygiene and responsible water practices.<\/p>\r\n          <div class=\"card-hint\">Click to learn more \u2192<\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Focus 02 \u2013 Child Education -->\r\n      <div class=\"vm-focus-card\" data-popup=\"focus2\">\r\n        <div class=\"card-image\">\r\n          <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1503676260728-1c00da094a0b?q=80&w=2070&auto=format&fit=crop\" alt=\"Child education\" loading=\"lazy\" \/>\r\n          <span class=\"card-number-badge\">02<\/span>\r\n        <\/div>\r\n        <div class=\"card-body\">\r\n          <span class=\"card-icon\">\ud83d\udcda<\/span>\r\n          <h4 class=\"card-title\"><span class=\"highlight\">Child<\/span> Education<\/h4>\r\n          <p class=\"card-desc\">Through child-focused initiatives such as <strong>Alokodoy<\/strong>, we support children from underserved communities with learning opportunities and educational resources.<\/p>\r\n          <div class=\"card-hint\">Click to learn more \u2192<\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Focus 03 \u2013 Digital Literacy -->\r\n      <div class=\"vm-focus-card\" data-popup=\"focus3\">\r\n        <div class=\"card-image\">\r\n          <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1518770660439-4636190af475?q=80&w=2070&auto=format&fit=crop\" alt=\"Digital literacy\" loading=\"lazy\" \/>\r\n          <span class=\"card-number-badge\">03<\/span>\r\n        <\/div>\r\n        <div class=\"card-body\">\r\n          <span class=\"card-icon\">\ud83d\udcbb<\/span>\r\n          <h4 class=\"card-title\"><span class=\"highlight\">Digital<\/span> Literacy<\/h4>\r\n          <p class=\"card-desc\">Our <strong>Community IT Centres<\/strong> create opportunities for marginalised community members to learn technology and develop digital skills.<\/p>\r\n          <div class=\"card-hint\">Click to learn more \u2192<\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Focus 04 \u2013 Livelihood Skills -->\r\n      <div class=\"vm-focus-card\" data-popup=\"focus4\">\r\n        <div class=\"card-image\">\r\n          <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1582213782179-e0d53f98f2ca?q=80&w=2070&auto=format&fit=crop\" alt=\"Livelihood skills\" loading=\"lazy\" \/>\r\n          <span class=\"card-number-badge\">04<\/span>\r\n        <\/div>\r\n        <div class=\"card-body\">\r\n          <span class=\"card-icon\">\ud83d\udee0\ufe0f<\/span>\r\n          <h4 class=\"card-title\"><span class=\"highlight\">Livelihood<\/span> Skills<\/h4>\r\n          <p class=\"card-desc\">We help youth develop <strong>practical, professional and employment-oriented skills<\/strong> that can contribute to greater financial independence.<\/p>\r\n          <div class=\"card-hint\">Click to learn more \u2192<\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n    <!-- Bottom note -->\r\n    <p style=\"font-size:13px; color:var(--text-muted-light); text-align:center; margin-top:28px; font-weight:300; letter-spacing:0.04em;\">\r\n      These focus areas reflect the Foundation's stated work around safe drinking water, sanitation, skill development and youth empowerment.\r\n    <\/p>\r\n\r\n  <\/div>\r\n\r\n  <!-- ============================================================\r\n     POPUP OVERLAY\r\n     ============================================================ -->\r\n  <div class=\"vm-popup-overlay\" id=\"vmPopup\">\r\n    <div class=\"vm-popup-content\">\r\n      <button class=\"vm-popup-close\" id=\"vmPopupClose\">\u2715<\/button>\r\n      <div class=\"vm-popup-body\">\r\n        <div class=\"popup-number\" id=\"popupNumber\">01<\/div>\r\n        <h3 id=\"popupTitle\"><\/h3>\r\n        <div class=\"popup-desc\" id=\"popupDesc\"><\/div>\r\n        <ul class=\"popup-list\" id=\"popupList\"><\/ul>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n<!-- ============================================================\r\n     SCRIPT \u2013 POPUP FUNCTIONALITY\r\n     ============================================================ -->\r\n<script>\r\n  (function() {\r\n    var popup = document.getElementById('vmPopup');\r\n    var popupClose = document.getElementById('vmPopupClose');\r\n    var popupNumber = document.getElementById('popupNumber');\r\n    var popupTitle = document.getElementById('popupTitle');\r\n    var popupDesc = document.getElementById('popupDesc');\r\n    var popupList = document.getElementById('popupList');\r\n\r\n    var popupData = {\r\n      focus1: {\r\n        number: '01',\r\n        title: '<span class=\"highlight\">Safe<\/span> Water',\r\n        desc: 'We work to improve access to <strong>safe drinking water<\/strong> while promoting awareness around sanitation, hygiene and responsible water practices.',\r\n        list: [\r\n          '33 taps installed in Dokra village (400+ villagers)',\r\n          '3 water purifiers removing iron & arsenic in Patachitra Gram (500+ villagers)',\r\n          'Awareness programmes on safe water practices',\r\n          'WASH initiatives across communities'\r\n        ]\r\n      },\r\n      focus2: {\r\n        number: '02',\r\n        title: '<span class=\"highlight\">Child<\/span> Education',\r\n        desc: 'Through child-focused initiatives such as <strong>Alokodoy<\/strong>, we support children from underserved communities with learning opportunities and educational resources.',\r\n        list: [\r\n          'Alokodoy Child-Friendly Coaching Centre established Sep 2025',\r\n          '50 children supported in Dokra village, Purba Bardhaman',\r\n          'Focus on first-generation learners',\r\n          'Partnership with local schools and communities'\r\n        ]\r\n      },\r\n      focus3: {\r\n        number: '03',\r\n        title: '<span class=\"highlight\">Digital<\/span> Literacy',\r\n        desc: 'Our <strong>Community IT Centres<\/strong> create opportunities for marginalised community members to learn technology and develop digital skills.',\r\n        list: [\r\n          '30 Community IT Centres across 13 districts of West Bengal',\r\n          'Over 20,000 beneficiaries reached',\r\n          'Digital literacy and job-finding IT skills',\r\n          'Free access for marginalised communities'\r\n        ]\r\n      },\r\n      focus4: {\r\n        number: '04',\r\n        title: '<span class=\"highlight\">Livelihood<\/span> Skills',\r\n        desc: 'We help youth develop <strong>practical, professional and employment-oriented skills<\/strong> that can contribute to greater financial independence.',\r\n        list: [\r\n          '3-month MOA course with Utkarsh Bangla & Emami Foundation',\r\n          'Centres at Bansberia (Hooghly), Haripal, Purba Bardhaman',\r\n          'Financial independence and career growth',\r\n          'Success stories: Annu Shaw (mPokket), Kaushiki Malik (HDB Financial)'\r\n        ]\r\n      }\r\n    };\r\n\r\n    var cards = document.querySelectorAll('.bargach-vm-full .vm-focus-card');\r\n\r\n    function openPopup(key) {\r\n      var data = popupData[key];\r\n      if (!data) return;\r\n\r\n      popupNumber.textContent = data.number;\r\n      popupTitle.innerHTML = data.title;\r\n      popupDesc.innerHTML = data.desc;\r\n\r\n      popupList.innerHTML = '';\r\n      if (data.list && data.list.length > 0) {\r\n        data.list.forEach(function(item) {\r\n          var li = document.createElement('li');\r\n          li.textContent = item;\r\n          popupList.appendChild(li);\r\n        });\r\n      }\r\n\r\n      popup.classList.add('active');\r\n      document.body.style.overflow = 'hidden';\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    cards.forEach(function(card) {\r\n      card.addEventListener('click', function() {\r\n        var key = this.getAttribute('data-popup');\r\n        openPopup(key);\r\n      });\r\n    });\r\n\r\n    popupClose.addEventListener('click', closePopup);\r\n\r\n    popup.addEventListener('click', function(e) {\r\n      if (e.target === this) closePopup();\r\n    });\r\n\r\n    document.addEventListener('keydown', function(e) {\r\n      if (e.key === 'Escape') closePopup();\r\n    });\r\n\r\n  })();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-8e09ba0 e-con e-atomic-element e-flexbox-base e-a0fef68 \" data-id=\"8e09ba0\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"8e09ba0\">\n    \t\t<div class=\"elementor-element elementor-element-656c13d elementor-widget elementor-widget-html\" data-id=\"656c13d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     BARGACH \u00b7 WHERE WE WORK \u2013 LIGHT COLORFUL WITH IMAGES\r\n     Complete section with geography, approach, impact, partners,\r\n     and SDG commitment. All cards with images.\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-www {\r\n    --ink: #1f2a26;\r\n    --teal: #2a9d8f;\r\n    --teal-2: #1a7a6b;\r\n    --teal-light: #3ab0a0;\r\n    --gold: #d48c3c;\r\n    --gold-2: #e8b86d;\r\n    --coral: #e07a5f;\r\n    --coral-light: #f0a38c;\r\n    --lavender: #9b8ec4;\r\n    --text-dark: #1f2a26;\r\n    --text-body: #3d534a;\r\n    --text-muted: #6a8a7a;\r\n    --text-muted-light: #8a9e93;\r\n    --bg-light: #f8f4ed;\r\n    --bg-card: rgba(255, 255, 255, 0.78);\r\n    --hairline: rgba(26, 122, 107, 0.08);\r\n    --serif: 'Fraunces', Georgia, 'Times New Roman', serif;\r\n    --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\r\n\r\n    position: relative;\r\n    width: 100%;\r\n    padding: clamp(60px, 8vw, 100px) 0;\r\n    background: var(--bg-light);\r\n    color: var(--text-dark);\r\n    font-family: var(--sans);\r\n    overflow: hidden;\r\n  }\r\n  .bargach-www *,\r\n  .bargach-www *::before,\r\n  .bargach-www *::after { box-sizing: border-box; }\r\n\r\n  \/* ========== BACKGROUND ========== *\/\r\n  .bargach-www .www-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.05) 0%, transparent 50%),\r\n      radial-gradient(ellipse at 90% 80%, rgba(42, 157, 143, 0.04) 0%, transparent 50%),\r\n      radial-gradient(ellipse at 50% 50%, rgba(224, 122, 95, 0.03) 0%, transparent 60%);\r\n    pointer-events: none;\r\n  }\r\n  .bargach-www .www-glow {\r\n    position: absolute; z-index: 1; pointer-events: none;\r\n    width: 50vw; height: 50vw; max-width: 600px; max-height: 600px;\r\n    top: -10%; right: -5%;\r\n    background: radial-gradient(circle, rgba(212, 140, 60, 0.04) 0%, rgba(212, 140, 60, 0.01) 40%, transparent 70%);\r\n    filter: blur(60px);\r\n  }\r\n  .bargach-www .www-glow-2 {\r\n    position: absolute; z-index: 1; pointer-events: none;\r\n    width: 40vw; height: 40vw; max-width: 500px; max-height: 500px;\r\n    bottom: -10%; left: -5%;\r\n    background: radial-gradient(circle, rgba(42, 157, 143, 0.04) 0%, rgba(42, 157, 143, 0.01) 50%, transparent 70%);\r\n    filter: blur(60px);\r\n  }\r\n\r\n  \/* ========== CONTAINER ========== *\/\r\n  .bargach-www .www-container {\r\n    position: relative; z-index: 2;\r\n    max-width: 1200px; margin: 0 auto;\r\n    padding: 0 clamp(22px, 4.5vw, 56px);\r\n  }\r\n\r\n  \/* ========== SECTION DIVIDER ========== *\/\r\n  .bargach-www .www-divider {\r\n    display: flex; align-items: center; gap: 16px;\r\n    margin: clamp(40px, 5vw, 60px) 0 clamp(28px, 3vw, 40px);\r\n  }\r\n  .bargach-www .www-divider .line {\r\n    flex: 1; height: 1px; max-width: 80px;\r\n    background: linear-gradient(90deg, var(--coral), transparent);\r\n  }\r\n  .bargach-www .www-divider .diamond {\r\n    width: 8px; height: 8px; background: var(--coral);\r\n    transform: rotate(45deg); flex-shrink: 0; opacity: 0.4;\r\n  }\r\n\r\n  \/* ========== SECTION HEADERS ========== *\/\r\n  .bargach-www .www-section-header {\r\n    margin-bottom: clamp(24px, 3vw, 36px);\r\n    max-width: 720px;\r\n  }\r\n  .bargach-www .www-tag {\r\n    display: inline-flex; align-items: center; gap: 10px;\r\n    font-size: 11.5px; font-weight: 600; letter-spacing: 0.18em;\r\n    text-transform: uppercase; color: var(--coral); margin: 0 0 8px;\r\n  }\r\n  .bargach-www .www-tag::before {\r\n    content: \"\"; width: 26px; height: 1px; background: var(--coral); display: inline-block;\r\n  }\r\n  .bargach-www .www-heading {\r\n    font-family: var(--serif); font-weight: 380;\r\n    font-size: clamp(28px, 3.5vw, 44px); line-height: 1.08;\r\n    margin: 0; color: var(--text-dark);\r\n  }\r\n  .bargach-www .www-heading .highlight {\r\n    background: linear-gradient(135deg, var(--coral), var(--gold));\r\n    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;\r\n  }\r\n  .bargach-www .www-sub {\r\n    font-size: clamp(15px, 1.1vw, 17px); line-height: 1.7;\r\n    color: var(--text-body); font-weight: 300; margin: 12px 0 0;\r\n    max-width: 640px;\r\n  }\r\n  .bargach-www .www-sub strong { color: var(--teal-2); font-weight: 500; }\r\n\r\n  \/* ========== 3-COLUMN STATE CARDS ========== *\/\r\n  .bargach-www .www-state-grid {\r\n    display: grid; grid-template-columns: repeat(3, 1fr);\r\n    gap: clamp(16px, 2vw, 24px);\r\n    margin-bottom: clamp(30px, 4vw, 50px);\r\n  }\r\n  @media (max-width: 768px) {\r\n    .bargach-www .www-state-grid { grid-template-columns: 1fr; max-width: 400px; margin-left: auto; margin-right: auto; }\r\n  }\r\n\r\n  .bargach-www .www-state-card {\r\n    background: var(--bg-card); backdrop-filter: blur(8px);\r\n    -webkit-backdrop-filter: blur(8px);\r\n    border-radius: 16px; overflow: hidden;\r\n    border: 1px solid var(--hairline);\r\n    box-shadow: 0 4px 20px rgba(31, 42, 38, 0.04);\r\n    transition: transform 0.4s ease, box-shadow 0.4s ease;\r\n  }\r\n  .bargach-www .www-state-card:hover {\r\n    transform: translateY(-4px);\r\n    box-shadow: 0 12px 40px rgba(31, 42, 38, 0.08);\r\n    border-color: rgba(212, 140, 60, 0.08);\r\n  }\r\n  .bargach-www .www-state-card .card-image {\r\n    width: 100%; aspect-ratio: 16\/8; overflow: hidden; position: relative;\r\n  }\r\n  .bargach-www .www-state-card .card-image img {\r\n    width: 100%; height: 100%; object-fit: cover; display: block;\r\n    transition: transform 0.6s ease;\r\n  }\r\n  .bargach-www .www-state-card:hover .card-image img { transform: scale(1.04); }\r\n  .bargach-www .www-state-card .card-image .state-badge {\r\n    position: absolute; bottom: 10px; left: 12px;\r\n    background: rgba(255,255,255,0.85); backdrop-filter: blur(4px);\r\n    padding: 2px 14px; border-radius: 999px;\r\n    font-size: 10px; font-weight: 600; color: var(--coral);\r\n    border: 1px solid rgba(224,122,95,0.08);\r\n  }\r\n  .bargach-www .www-state-card .card-body {\r\n    padding: clamp(16px, 2vw, 22px) clamp(16px, 2vw, 22px) clamp(18px, 2vw, 24px);\r\n  }\r\n  .bargach-www .www-state-card .card-body .state-icon { font-size: 22px; margin-bottom: 2px; display: block; }\r\n  .bargach-www .www-state-card .card-body .state-name {\r\n    font-family: var(--serif); font-weight: 560;\r\n    font-size: clamp(18px, 1.6vw, 24px); color: var(--text-dark); margin: 0 0 4px;\r\n  }\r\n  .bargach-www .www-state-card .card-body .state-name .highlight { color: var(--coral); }\r\n  .bargach-www .www-state-card .card-body .state-desc {\r\n    font-size: clamp(13px, 0.9vw, 14.5px); line-height: 1.6;\r\n    color: var(--text-body); font-weight: 300; margin: 0 0 6px;\r\n  }\r\n  .bargach-www .www-state-card .card-body .state-stats {\r\n    font-size: 12px; color: var(--text-muted); font-weight: 400;\r\n  }\r\n  .bargach-www .www-state-card .card-body .state-stats strong { color: var(--teal-2); }\r\n\r\n  \/* ========== 2-COLUMN CARDS ========== *\/\r\n  .bargach-www .www-two-col {\r\n    display: grid; grid-template-columns: 1fr 1fr;\r\n    gap: clamp(24px, 3vw, 40px);\r\n    margin-bottom: clamp(40px, 5vw, 60px);\r\n  }\r\n  @media (max-width: 768px) { .bargach-www .www-two-col { grid-template-columns: 1fr; gap: 20px; } }\r\n\r\n  .bargach-www .www-card {\r\n    background: var(--bg-card); backdrop-filter: blur(8px);\r\n    -webkit-backdrop-filter: blur(8px);\r\n    border-radius: 16px; overflow: hidden;\r\n    border: 1px solid var(--hairline);\r\n    box-shadow: 0 4px 20px rgba(31, 42, 38, 0.04);\r\n    transition: transform 0.4s ease, box-shadow 0.4s ease;\r\n  }\r\n  .bargach-www .www-card:hover {\r\n    transform: translateY(-4px);\r\n    box-shadow: 0 12px 40px rgba(31, 42, 38, 0.08);\r\n    border-color: rgba(212, 140, 60, 0.08);\r\n  }\r\n  .bargach-www .www-card .card-image {\r\n    width: 100%; aspect-ratio: 16\/6; overflow: hidden; position: relative;\r\n  }\r\n  .bargach-www .www-card .card-image img {\r\n    width: 100%; height: 100%; object-fit: cover; display: block;\r\n    transition: transform 0.6s ease;\r\n  }\r\n  .bargach-www .www-card:hover .card-image img { transform: scale(1.04); }\r\n  .bargach-www .www-card .card-image .card-badge {\r\n    position: absolute; top: 10px; left: 12px;\r\n    background: rgba(255,255,255,0.85); backdrop-filter: blur(4px);\r\n    padding: 2px 14px; border-radius: 999px;\r\n    font-size: 9px; font-weight: 600; text-transform: uppercase;\r\n    letter-spacing: 0.06em; color: var(--coral);\r\n    border: 1px solid rgba(224,122,95,0.08);\r\n  }\r\n  .bargach-www .www-card .card-body {\r\n    padding: clamp(18px, 2.2vw, 26px) clamp(18px, 2.2vw, 26px) clamp(20px, 2.2vw, 28px);\r\n  }\r\n  .bargach-www .www-card .card-body .card-icon { font-size: 22px; display: block; margin-bottom: 2px; }\r\n  .bargach-www .www-card .card-body .card-title {\r\n    font-family: var(--serif); font-weight: 560;\r\n    font-size: clamp(18px, 1.8vw, 24px); color: var(--text-dark); margin: 0 0 6px;\r\n  }\r\n  .bargach-www .www-card .card-body .card-title .highlight { color: var(--coral); }\r\n  .bargach-www .www-card .card-body .card-desc {\r\n    font-size: clamp(14px, 0.95vw, 15.5px); line-height: 1.7;\r\n    color: var(--text-body); font-weight: 300; margin: 0;\r\n  }\r\n  .bargach-www .www-card .card-body .card-desc strong { color: var(--teal-2); font-weight: 500; }\r\n\r\n  \/* ========== IMPACT STATS ========== *\/\r\n  .bargach-www .www-impact-grid {\r\n    display: grid; grid-template-columns: repeat(6, 1fr);\r\n    gap: clamp(12px, 1.5vw, 20px);\r\n    margin-bottom: clamp(30px, 4vw, 50px);\r\n  }\r\n  @media (max-width: 900px) { .bargach-www .www-impact-grid { grid-template-columns: repeat(3, 1fr); } }\r\n  @media (max-width: 500px) { .bargach-www .www-impact-grid { grid-template-columns: repeat(2, 1fr); } }\r\n\r\n  .bargach-www .www-impact-item {\r\n    background: var(--bg-card); backdrop-filter: blur(8px);\r\n    -webkit-backdrop-filter: blur(8px);\r\n    border-radius: 14px; padding: clamp(16px, 2vw, 24px) clamp(12px, 1.5vw, 18px);\r\n    text-align: center; border: 1px solid var(--hairline);\r\n    transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n  }\r\n  .bargach-www .www-impact-item:hover {\r\n    transform: translateY(-3px);\r\n    box-shadow: 0 8px 30px rgba(31, 42, 38, 0.06);\r\n  }\r\n  .bargach-www .www-impact-item .impact-number {\r\n    font-family: var(--serif); font-weight: 560;\r\n    font-size: clamp(26px, 2.8vw, 38px);\r\n    background: linear-gradient(135deg, var(--coral), var(--gold));\r\n    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;\r\n    line-height: 1;\r\n  }\r\n  .bargach-www .www-impact-item .impact-label {\r\n    font-size: clamp(11px, 0.8vw, 13px);\r\n    color: var(--text-muted); font-weight: 400; margin-top: 4px;\r\n  }\r\n\r\n  \/* ========== PARTNERS ========== *\/\r\n  .bargach-www .www-partners-grid {\r\n    display: flex; flex-wrap: wrap; gap: 10px 16px;\r\n    justify-content: center; padding: 8px 0;\r\n  }\r\n  .bargach-www .www-partner-tag {\r\n    background: var(--bg-card); backdrop-filter: blur(4px);\r\n    padding: 8px 20px; border-radius: 999px;\r\n    font-size: 13px; font-weight: 400;\r\n    color: var(--text-body); border: 1px solid var(--hairline);\r\n    transition: all 0.3s ease;\r\n  }\r\n  .bargach-www .www-partner-tag:hover {\r\n    border-color: var(--coral); color: var(--coral);\r\n    transform: translateY(-2px);\r\n    box-shadow: 0 4px 16px rgba(224,122,95,0.08);\r\n  }\r\n\r\n  \/* ========== SDG GRID ========== *\/\r\n  .bargach-www .www-sdg-grid {\r\n    display: grid; grid-template-columns: repeat(4, 1fr);\r\n    gap: clamp(14px, 1.8vw, 22px);\r\n    margin-top: 8px;\r\n  }\r\n  @media (max-width: 768px) { .bargach-www .www-sdg-grid { grid-template-columns: repeat(2, 1fr); } }\r\n  @media (max-width: 450px) { .bargach-www .www-sdg-grid { grid-template-columns: 1fr; max-width: 320px; margin-left: auto; margin-right: auto; } }\r\n\r\n  .bargach-www .www-sdg-card {\r\n    background: var(--bg-card); backdrop-filter: blur(8px);\r\n    -webkit-backdrop-filter: blur(8px);\r\n    border-radius: 14px; padding: clamp(16px, 2vw, 22px);\r\n    text-align: center; border: 1px solid var(--hairline);\r\n    transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n  }\r\n  .bargach-www .www-sdg-card:hover {\r\n    transform: translateY(-4px);\r\n    box-shadow: 0 8px 30px rgba(31, 42, 38, 0.06);\r\n    border-color: rgba(212, 140, 60, 0.08);\r\n  }\r\n  .bargach-www .www-sdg-card .sdg-icon { font-size: 32px; display: block; margin-bottom: 4px; }\r\n  .bargach-www .www-sdg-card .sdg-number {\r\n    font-family: var(--serif); font-weight: 560;\r\n    font-size: clamp(18px, 1.6vw, 24px);\r\n    color: var(--coral); margin: 0;\r\n  }\r\n  .bargach-www .www-sdg-card .sdg-title {\r\n    font-weight: 600; font-size: clamp(14px, 1vw, 16px);\r\n    color: var(--text-dark); margin: 4px 0;\r\n  }\r\n  .bargach-www .www-sdg-card .sdg-desc {\r\n    font-size: clamp(12px, 0.8vw, 13.5px);\r\n    color: var(--text-body); font-weight: 300; line-height: 1.5; margin: 0;\r\n  }\r\n\r\n  \/* ========== ANIMATIONS ========== *\/\r\n  @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }\r\n  .bargach-www .www-tag { opacity: 0; animation: fadeUp 0.6s ease 0.1s forwards; }\r\n  .bargach-www .www-heading { opacity: 0; animation: fadeUp 0.7s ease 0.2s forwards; }\r\n  .bargach-www .www-sub { opacity: 0; animation: fadeUp 0.7s ease 0.3s forwards; }\r\n  .bargach-www .www-state-card { opacity: 0; animation: fadeUp 0.6s ease forwards; }\r\n  .bargach-www .www-state-card:nth-child(1) { animation-delay: 0.15s; }\r\n  .bargach-www .www-state-card:nth-child(2) { animation-delay: 0.25s; }\r\n  .bargach-www .www-state-card:nth-child(3) { animation-delay: 0.35s; }\r\n  .bargach-www .www-card { opacity: 0; animation: fadeUp 0.6s ease forwards; }\r\n  .bargach-www .www-card:nth-child(1) { animation-delay: 0.2s; }\r\n  .bargach-www .www-card:nth-child(2) { animation-delay: 0.3s; }\r\n  .bargach-www .www-impact-item { opacity: 0; animation: fadeUp 0.5s ease forwards; }\r\n  .bargach-www .www-impact-item:nth-child(1) { animation-delay: 0.1s; }\r\n  .bargach-www .www-impact-item:nth-child(2) { animation-delay: 0.15s; }\r\n  .bargach-www .www-impact-item:nth-child(3) { animation-delay: 0.2s; }\r\n  .bargach-www .www-impact-item:nth-child(4) { animation-delay: 0.25s; }\r\n  .bargach-www .www-impact-item:nth-child(5) { animation-delay: 0.3s; }\r\n  .bargach-www .www-impact-item:nth-child(6) { animation-delay: 0.35s; }\r\n  .bargach-www .www-sdg-card { opacity: 0; animation: fadeUp 0.6s ease forwards; }\r\n  .bargach-www .www-sdg-card:nth-child(1) { animation-delay: 0.15s; }\r\n  .bargach-www .www-sdg-card:nth-child(2) { animation-delay: 0.25s; }\r\n  .bargach-www .www-sdg-card:nth-child(3) { animation-delay: 0.35s; }\r\n  .bargach-www .www-sdg-card:nth-child(4) { animation-delay: 0.45s; }\r\n\r\n  @media (prefers-reduced-motion: reduce) {\r\n    .bargach-www * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }\r\n    .bargach-www .www-tag, .bargach-www .www-heading, .bargach-www .www-sub,\r\n    .bargach-www .www-state-card, .bargach-www .www-card,\r\n    .bargach-www .www-impact-item, .bargach-www .www-sdg-card {\r\n      opacity: 1 !important; animation: none !important;\r\n    }\r\n  }\r\n\r\n  \/* ========== BUTTON ========== *\/\r\n  .bargach-www .www-btn {\r\n    display: inline-flex; align-items: center; gap: 8px;\r\n    padding: 12px 28px; border-radius: 999px;\r\n    background: var(--gold); color: var(--bg-light);\r\n    font-size: 14px; font-weight: 600; text-decoration: none;\r\n    border: none; cursor: pointer; font-family: var(--sans);\r\n    transition: all 0.3s ease;\r\n  }\r\n  .bargach-www .www-btn:hover {\r\n    transform: translateY(-3px);\r\n    box-shadow: 0 8px 30px rgba(212, 140, 60, 0.25);\r\n    background: var(--coral);\r\n  }\r\n  .bargach-www .www-btn .btn-arrow { display: inline-block; transition: transform 0.3s ease; }\r\n  .bargach-www .www-btn:hover .btn-arrow { transform: translateX(4px); }\r\n  .bargach-www .www-center { text-align: center; margin-top: 12px; }\r\n<\/style>\r\n\r\n<!-- ============================================================\r\n     WHERE WE WORK \u2013 HTML\r\n     ============================================================ -->\r\n<section class=\"bargach-www\" aria-label=\"Where We Work\">\r\n\r\n  <div class=\"www-bg\" aria-hidden=\"true\"><\/div>\r\n  <div class=\"www-glow\" aria-hidden=\"true\"><\/div>\r\n  <div class=\"www-glow-2\" aria-hidden=\"true\"><\/div>\r\n\r\n  <div class=\"www-container\">\r\n\r\n    <!-- ====== WHERE WE WORK ====== -->\r\n    <div class=\"www-section-header\">\r\n      <div class=\"www-tag\">Our Presence<\/div>\r\n      <h2 class=\"www-heading\">Local roots. A growing <span class=\"highlight\">regional<\/span> footprint.<\/h2>\r\n      <p class=\"www-sub\">Bargach Foundation works across <strong>West Bengal, Madhya Pradesh and Odisha<\/strong>, focusing on underserved rural and semi-urban communities.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"www-state-grid\">\r\n\r\n      <div class=\"www-state-card\">\r\n        <div class=\"card-image\">\r\n          <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1596178060671-7a80dc8059ea?q=80&w=2070&auto=format&fit=crop\" alt=\"West Bengal\" loading=\"lazy\" \/>\r\n          <span class=\"state-badge\">\ud83d\udccd West Bengal<\/span>\r\n        <\/div>\r\n        <div class=\"card-body\">\r\n          <span class=\"state-icon\">\ud83c\udfdb\ufe0f<\/span>\r\n          <h4 class=\"state-name\"><span class=\"highlight\">West<\/span> Bengal<\/h4>\r\n          <p class=\"state-desc\">Our largest programme footprint \u2014 Community IT Centres, skill development, WASH, awareness and education initiatives.<\/p>\r\n          <div class=\"state-stats\"><strong>30<\/strong> IT Centres \u00b7 <strong>13<\/strong> Districts<\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"www-state-card\">\r\n        <div class=\"card-image\">\r\n          <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1587474260584-136574528ed5?q=80&w=2070&auto=format&fit=crop\" alt=\"Madhya Pradesh\" loading=\"lazy\" \/>\r\n          <span class=\"state-badge\">\ud83d\udccd Madhya Pradesh<\/span>\r\n        <\/div>\r\n        <div class=\"card-body\">\r\n          <span class=\"state-icon\">\ud83c\udf33<\/span>\r\n          <h4 class=\"state-name\"><span class=\"highlight\">Madhya<\/span> Pradesh<\/h4>\r\n          <p class=\"state-desc\">Extending our focus on sustainable development and community empowerment.<\/p>\r\n          <div class=\"state-stats\">Expanding presence<\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"www-state-card\">\r\n        <div class=\"card-image\">\r\n          <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1561123784-74ae3701f1b5?q=80&w=2070&auto=format&fit=crop\" alt=\"Odisha\" loading=\"lazy\" \/>\r\n          <span class=\"state-badge\">\ud83d\udccd Odisha<\/span>\r\n        <\/div>\r\n        <div class=\"card-body\">\r\n          <span class=\"state-icon\">\ud83c\udf0a<\/span>\r\n          <h4 class=\"state-name\"><span class=\"highlight\">Odisha<\/span><\/h4>\r\n          <p class=\"state-desc\">Expanding our commitment to underserved communities and sustainable development.<\/p>\r\n          <div class=\"state-stats\">Growing impact<\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n    <!-- ====== HOW WE WORK ====== -->\r\n    <div class=\"www-divider\"><span class=\"line\"><\/span><span class=\"diamond\"><\/span><span class=\"line\" style=\"background:linear-gradient(270deg,var(--coral),transparent);\"><\/span><\/div>\r\n\r\n    <div class=\"www-section-header\">\r\n      <div class=\"www-tag\">Our Approach<\/div>\r\n      <h2 class=\"www-heading\">Listen locally. Act practically. <span class=\"highlight\">Build<\/span> sustainably.<\/h2>\r\n      <p class=\"www-sub\">We design our work around real community needs and long-term opportunities.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"www-two-col\">\r\n      <div class=\"www-card\">\r\n        <div class=\"card-image\">\r\n          <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1573497019940-1c28c88b4f3e?q=80&w=2070&auto=format&fit=crop\" alt=\"Listen and collaborate\" loading=\"lazy\" \/>\r\n          <span class=\"card-badge\">01 \u00b7 02<\/span>\r\n        <\/div>\r\n        <div class=\"card-body\">\r\n          <span class=\"card-icon\">\ud83d\udc42<\/span>\r\n          <h4 class=\"card-title\"><span class=\"highlight\">Listen<\/span> &amp; <span class=\"highlight\">Collaborate<\/span><\/h4>\r\n          <p class=\"card-desc\">Understand local needs and aspirations. Work with communities, partners and institutions.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"www-card\">\r\n        <div class=\"card-image\">\r\n          <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1556761175-5973dc0f32e7?q=80&w=2070&auto=format&fit=crop\" alt=\"Act and empower\" loading=\"lazy\" \/>\r\n          <span class=\"card-badge\">03 \u00b7 04 \u00b7 05<\/span>\r\n        <\/div>\r\n        <div class=\"card-body\">\r\n          <span class=\"card-icon\">\ud83d\ude80<\/span>\r\n          <h4 class=\"card-title\"><span class=\"highlight\">Act<\/span> \u00b7 <span class=\"highlight\">Empower<\/span> \u00b7 <span class=\"highlight\">Sustain<\/span><\/h4>\r\n          <p class=\"card-desc\">Turn needs into practical programmes. Build skills, knowledge and opportunities. Create lasting community value.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- ====== COMMUNITY AT THE CENTRE ====== -->\r\n    <div class=\"www-divider\"><span class=\"line\"><\/span><span class=\"diamond\"><\/span><span class=\"line\" style=\"background:linear-gradient(270deg,var(--coral),transparent);\"><\/span><\/div>\r\n\r\n    <div class=\"www-section-header\">\r\n      <div class=\"www-tag\">Our Philosophy<\/div>\r\n      <h2 class=\"www-heading\">We work <span class=\"highlight\">alongside<\/span> communities.<\/h2>\r\n      <p class=\"www-sub\">We believe communities understand their challenges best. That is why people remain at the centre of our programmes \u2014 from education and digital skills to employment and safe drinking water.<\/p>\r\n    <\/div>\r\n\r\n    <div style=\"display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:8px 0 20px;\">\r\n      <span style=\"background:var(--bg-card); padding:8px 24px; border-radius:999px; font-weight:500; font-size:15px; border:1px solid var(--hairline);\">\ud83d\udc42 Listen<\/span>\r\n      <span style=\"background:var(--bg-card); padding:8px 24px; border-radius:999px; font-weight:500; font-size:15px; border:1px solid var(--hairline);\">\ud83e\udd1d Understand<\/span>\r\n      <span style=\"background:var(--bg-card); padding:8px 24px; border-radius:999px; font-weight:500; font-size:15px; border:1px solid var(--hairline);\">\u26a1 Act<\/span>\r\n      <span style=\"background:var(--bg-card); padding:8px 24px; border-radius:999px; font-weight:500; font-size:15px; border:1px solid var(--hairline);\">\ud83c\udf1f Empower<\/span>\r\n    <\/div>\r\n\r\n    <!-- ====== OUR WORK IN ACTION ====== -->\r\n    <div class=\"www-divider\"><span class=\"line\"><\/span><span class=\"diamond\"><\/span><span class=\"line\" style=\"background:linear-gradient(270deg,var(--coral),transparent);\"><\/span><\/div>\r\n\r\n    <div class=\"www-section-header\">\r\n      <div class=\"www-tag\">From Vision to Action<\/div>\r\n      <h2 class=\"www-heading\">Programmes designed around <span class=\"highlight\">real needs<\/span>.<\/h2>\r\n    <\/div>\r\n\r\n    <div class=\"www-two-col\">\r\n      <div class=\"www-card\">\r\n        <div class=\"card-image\">\r\n          <img decoding=\"async\" src=\"https:\/\/images.upslash.com\/photo-1503676260728-1c00da094a0b?q=80&w=2070&auto=format&fit=crop\" alt=\"Alokodoy\" loading=\"lazy\" \/>\r\n          <span class=\"card-badge\">Education<\/span>\r\n        <\/div>\r\n        <div class=\"card-body\">\r\n          <span class=\"card-icon\">\ud83d\udcda<\/span>\r\n          <h4 class=\"card-title\"><span class=\"highlight\">Alokodoy<\/span><\/h4>\r\n          <p class=\"card-desc\">A child-friendly coaching initiative supporting children from underserved communities with learning opportunities and resources.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"www-card\">\r\n        <div class=\"card-image\">\r\n          <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1518770660439-4636190af475?q=80&w=2070&auto=format&fit=crop\" alt=\"Community IT Centres\" loading=\"lazy\" \/>\r\n          <span class=\"card-badge\">Digital Literacy<\/span>\r\n        <\/div>\r\n        <div class=\"card-body\">\r\n          <span class=\"card-icon\">\ud83d\udcbb<\/span>\r\n          <h4 class=\"card-title\"><span class=\"highlight\">Community<\/span> IT Centres<\/h4>\r\n          <p class=\"card-desc\">Free access to technology, digital literacy and job-oriented IT skills across <strong>30 centres<\/strong> in <strong>13 districts<\/strong>.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"www-card\">\r\n        <div class=\"card-image\">\r\n          <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1582213782179-e0d53f98f2ca?q=80&w=2070&auto=format&fit=crop\" alt=\"Skill Development\" loading=\"lazy\" \/>\r\n          <span class=\"card-badge\">Livelihood<\/span>\r\n        <\/div>\r\n        <div class=\"card-body\">\r\n          <span class=\"card-icon\">\ud83d\udee0\ufe0f<\/span>\r\n          <h4 class=\"card-title\"><span class=\"highlight\">Skill<\/span> Development<\/h4>\r\n          <p class=\"card-desc\">Training youth through partnerships with <strong>Utkarsh Bangla<\/strong> and <strong>Emami Foundation<\/strong>, focusing on professional and employment-ready skills.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"www-card\">\r\n        <div class=\"card-image\">\r\n          <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1548839140-29a749e1cf4d?q=80&w=2070&auto=format&fit=crop\" alt=\"Water & WASH\" loading=\"lazy\" \/>\r\n          <span class=\"card-badge\">WASH<\/span>\r\n        <\/div>\r\n        <div class=\"card-body\">\r\n          <span class=\"card-icon\">\ud83d\udca7<\/span>\r\n          <h4 class=\"card-title\"><span class=\"highlight\">Water<\/span> &amp; WASH<\/h4>\r\n          <p class=\"card-desc\">Improving access to safe drinking water, sanitation and hygiene through community-level interventions.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"www-center\">\r\n      <a href=\"#\" class=\"www-btn\">Explore Our Programs <span class=\"btn-arrow\">\u2192<\/span><\/a>\r\n    <\/div>\r\n\r\n    <!-- ====== OUR IMPACT ====== -->\r\n    <div class=\"www-divider\"><span class=\"line\"><\/span><span class=\"diamond\"><\/span><span class=\"line\" style=\"background:linear-gradient(270deg,var(--coral),transparent);\"><\/span><\/div>\r\n\r\n    <div class=\"www-section-header\">\r\n      <div class=\"www-tag\">The Difference We Are Making<\/div>\r\n      <h2 class=\"www-heading\">Progress becomes meaningful when it reaches <span class=\"highlight\">people<\/span>.<\/h2>\r\n    <\/div>\r\n\r\n    <div class=\"www-impact-grid\">\r\n      <div class=\"www-impact-item\"><div class=\"impact-number\">89,000+<\/div><div class=\"impact-label\">Lives Impacted<\/div><\/div>\r\n      <div class=\"www-impact-item\"><div class=\"impact-number\">60,000+<\/div><div class=\"impact-label\">Water.org Awareness<\/div><\/div>\r\n      <div class=\"www-impact-item\"><div class=\"impact-number\">20,000+<\/div><div class=\"impact-label\">Digital &amp; WASH Beneficiaries<\/div><\/div>\r\n      <div class=\"www-impact-item\"><div class=\"impact-number\">30<\/div><div class=\"impact-label\">Community IT Centres<\/div><\/div>\r\n      <div class=\"www-impact-item\"><div class=\"impact-number\">13<\/div><div class=\"impact-label\">Districts Covered<\/div><\/div>\r\n      <div class=\"www-impact-item\"><div class=\"impact-number\">1,200+<\/div><div class=\"impact-label\">Villagers Safe Water<\/div><\/div>\r\n    <\/div>\r\n\r\n    <!-- ====== OUR PARTNERS ====== -->\r\n    <div class=\"www-divider\"><span class=\"line\"><\/span><span class=\"diamond\"><\/span><span class=\"line\" style=\"background:linear-gradient(270deg,var(--coral),transparent);\"><\/span><\/div>\r\n\r\n    <div class=\"www-section-header\">\r\n      <div class=\"www-tag\">Stronger Together<\/div>\r\n      <h2 class=\"www-heading\">Partnership makes <span class=\"highlight\">greater<\/span> impact possible.<\/h2>\r\n      <p class=\"www-sub\">We work with organisations, institutions, government initiatives and community stakeholders to extend the reach of our programmes.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"www-partners-grid\">\r\n      <span class=\"www-partner-tag\">\ud83e\udd1d Water.org<\/span>\r\n      <span class=\"www-partner-tag\">\ud83e\udd1d Finish Mondial<\/span>\r\n      <span class=\"www-partner-tag\">\ud83e\udd1d Emami Foundation<\/span>\r\n      <span class=\"www-partner-tag\">\ud83e\udd1d Utkarsh Bangla<\/span>\r\n      <span class=\"www-partner-tag\">\ud83e\udd1d Jana Small Finance Bank<\/span>\r\n      <span class=\"www-partner-tag\">\ud83e\udd1d West Bengal Police<\/span>\r\n      <span class=\"www-partner-tag\">\ud83e\udd1d Hooghly Rural Police<\/span>\r\n    <\/div>\r\n\r\n    <div class=\"www-center\" style=\"margin-top:12px;\">\r\n      <a href=\"#\" class=\"www-btn\" style=\"background:transparent; color:var(--coral); border:1px solid var(--coral);\">Explore Our Partners <span class=\"btn-arrow\">\u2192<\/span><\/a>\r\n    <\/div>\r\n\r\n    <!-- ====== SDG COMMITMENT ====== -->\r\n    <div class=\"www-divider\"><span class=\"line\"><\/span><span class=\"diamond\"><\/span><span class=\"line\" style=\"background:linear-gradient(270deg,var(--coral),transparent);\"><\/span><\/div>\r\n\r\n    <div class=\"www-section-header\">\r\n      <div class=\"www-tag\">Global Goals \u00b7 Local Action<\/div>\r\n      <h2 class=\"www-heading\">Working locally towards <span class=\"highlight\">global<\/span> development goals.<\/h2>\r\n      <p class=\"www-sub\">Our work aligns with four key Sustainable Development Goals:<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"www-sdg-grid\">\r\n      <div class=\"www-sdg-card\">\r\n        <span class=\"sdg-icon\">\ud83c\udfe5<\/span>\r\n        <div class=\"sdg-number\">03<\/div>\r\n        <div class=\"sdg-title\">Good Health &amp; Well-being<\/div>\r\n        <div class=\"sdg-desc\">Healthier communities through safe water, sanitation and hygiene.<\/div>\r\n      <\/div>\r\n      <div class=\"www-sdg-card\">\r\n        <span class=\"sdg-icon\">\ud83d\udca7<\/span>\r\n        <div class=\"sdg-number\">06<\/div>\r\n        <div class=\"sdg-title\">Clean Water &amp; Sanitation<\/div>\r\n        <div class=\"sdg-desc\">Improving access and awareness around safe water and sanitation.<\/div>\r\n      <\/div>\r\n      <div class=\"www-sdg-card\">\r\n        <span class=\"sdg-icon\">\ud83d\udcbc<\/span>\r\n        <div class=\"sdg-number\">08<\/div>\r\n        <div class=\"sdg-title\">Decent Work &amp; Economic Growth<\/div>\r\n        <div class=\"sdg-desc\">Creating opportunities through skills and employment preparation.<\/div>\r\n      <\/div>\r\n      <div class=\"www-sdg-card\">\r\n        <span class=\"sdg-icon\">\ud83e\udd1d<\/span>\r\n        <div class=\"sdg-number\">17<\/div>\r\n        <div class=\"sdg-title\">Partnerships for the Goals<\/div>\r\n        <div class=\"sdg-desc\">Working together to create greater impact.<\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-99a51bd e-con e-atomic-element e-flexbox-base e-bd0ab5b \" data-id=\"99a51bd\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"99a51bd\">\n    \t\t<div class=\"elementor-element elementor-element-7d92258 elementor-widget elementor-widget-html\" data-id=\"7d92258\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     BARGACH \u00b7 LEADERSHIP & GOVERNANCE \u2013 LIGHT COLORFUL\r\n     Leadership team cards with images, hover effects,\r\n     and elegant design.\r\n     ============================================================ -->\r\n<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,380;0,9..144,560;1,9..144,380&family=Inter:wght@300;400;500;600;700&display=swap');\r\n\r\n  .bargach-leadership {\r\n    --ink: #1f2a26;\r\n    --teal: #2a9d8f;\r\n    --teal-2: #1a7a6b;\r\n    --teal-light: #3ab0a0;\r\n    --gold: #d48c3c;\r\n    --gold-2: #e8b86d;\r\n    --coral: #e07a5f;\r\n    --coral-light: #f0a38c;\r\n    --lavender: #9b8ec4;\r\n    --text-dark: #1f2a26;\r\n    --text-body: #3d534a;\r\n    --text-muted: #6a8a7a;\r\n    --text-muted-light: #8a9e93;\r\n    --bg-light: #f8f4ed;\r\n    --bg-card: rgba(255, 255, 255, 0.80);\r\n    --hairline: rgba(26, 122, 107, 0.08);\r\n    --serif: 'Fraunces', Georgia, 'Times New Roman', serif;\r\n    --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\r\n\r\n    position: relative;\r\n    width: 100%;\r\n    padding: clamp(60px, 8vw, 100px) 0;\r\n    background: var(--bg-light);\r\n    color: var(--text-dark);\r\n    font-family: var(--sans);\r\n    overflow: hidden;\r\n  }\r\n  .bargach-leadership *,\r\n  .bargach-leadership *::before,\r\n  .bargach-leadership *::after {\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  \/* ========== BACKGROUND ========== *\/\r\n  .bargach-leadership .ld-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.05) 0%, transparent 50%),\r\n      radial-gradient(ellipse at 90% 80%, rgba(42, 157, 143, 0.04) 0%, transparent 50%),\r\n      radial-gradient(ellipse at 50% 50%, rgba(224, 122, 95, 0.03) 0%, transparent 60%);\r\n    pointer-events: none;\r\n  }\r\n  .bargach-leadership .ld-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: -10%;\r\n    right: -5%;\r\n    background: radial-gradient(circle, rgba(212, 140, 60, 0.04) 0%, rgba(212, 140, 60, 0.01) 40%, transparent 70%);\r\n    filter: blur(60px);\r\n  }\r\n  .bargach-leadership .ld-glow-2 {\r\n    position: absolute;\r\n    z-index: 1;\r\n    pointer-events: none;\r\n    width: 40vw;\r\n    height: 40vw;\r\n    max-width: 500px;\r\n    max-height: 500px;\r\n    bottom: -10%;\r\n    left: -5%;\r\n    background: radial-gradient(circle, rgba(42, 157, 143, 0.04) 0%, rgba(42, 157, 143, 0.01) 50%, transparent 70%);\r\n    filter: blur(60px);\r\n  }\r\n\r\n  \/* ========== CONTAINER ========== *\/\r\n  .bargach-leadership .ld-container {\r\n    position: relative;\r\n    z-index: 2;\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  .bargach-leadership .ld-header {\r\n    margin-bottom: clamp(40px, 5vw, 56px);\r\n    max-width: 720px;\r\n  }\r\n  .bargach-leadership .ld-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 12px;\r\n  }\r\n  .bargach-leadership .ld-tag::before {\r\n    content: \"\";\r\n    width: 26px;\r\n    height: 1px;\r\n    background: var(--coral);\r\n    display: inline-block;\r\n  }\r\n  .bargach-leadership .ld-heading {\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: var(--text-dark);\r\n  }\r\n  .bargach-leadership .ld-heading .highlight {\r\n    background: linear-gradient(135deg, var(--coral), var(--gold));\r\n    -webkit-background-clip: text;\r\n    -webkit-text-fill-color: transparent;\r\n    background-clip: text;\r\n  }\r\n\r\n  \/* ========== 5-COLUMN LEADERSHIP GRID ========== *\/\r\n  .bargach-leadership .ld-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(5, 1fr);\r\n    gap: clamp(16px, 1.8vw, 24px);\r\n  }\r\n  @media (max-width: 1024px) {\r\n    .bargach-leadership .ld-grid {\r\n      grid-template-columns: repeat(3, 1fr);\r\n    }\r\n  }\r\n  @media (max-width: 768px) {\r\n    .bargach-leadership .ld-grid {\r\n      grid-template-columns: repeat(2, 1fr);\r\n    }\r\n  }\r\n  @media (max-width: 480px) {\r\n    .bargach-leadership .ld-grid {\r\n      grid-template-columns: 1fr;\r\n      max-width: 340px;\r\n      margin-left: auto;\r\n      margin-right: auto;\r\n    }\r\n  }\r\n\r\n  \/* ========== LEADERSHIP CARD ========== *\/\r\n  .bargach-leadership .ld-card {\r\n    background: var(--bg-card);\r\n    backdrop-filter: blur(8px);\r\n    -webkit-backdrop-filter: blur(8px);\r\n    border-radius: 20px;\r\n    overflow: hidden;\r\n    border: 1px solid var(--hairline);\r\n    box-shadow: 0 4px 20px rgba(31, 42, 38, 0.04);\r\n    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;\r\n    text-align: center;\r\n  }\r\n  .bargach-leadership .ld-card:hover {\r\n    transform: translateY(-8px);\r\n    box-shadow: 0 16px 50px rgba(31, 42, 38, 0.08);\r\n    border-color: rgba(212, 140, 60, 0.10);\r\n  }\r\n\r\n  \/* Card Image *\/\r\n  .bargach-leadership .ld-card .card-image {\r\n    width: 100%;\r\n    aspect-ratio: 1\/1;\r\n    overflow: hidden;\r\n    position: relative;\r\n    background: #e8e0d6;\r\n  }\r\n  .bargach-leadership .ld-card .card-image img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n    display: block;\r\n    transition: transform 0.6s ease;\r\n  }\r\n  .bargach-leadership .ld-card:hover .card-image img {\r\n    transform: scale(1.05);\r\n  }\r\n\r\n  \/* Placeholder avatar if image missing *\/\r\n  .bargach-leadership .ld-card .card-image .avatar-placeholder {\r\n    width: 100%;\r\n    height: 100%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-size: 56px;\r\n    background: linear-gradient(135deg, var(--coral-light), var(--gold-2));\r\n    color: rgba(255,255,255,0.7);\r\n    font-family: var(--serif);\r\n    font-weight: 560;\r\n  }\r\n\r\n  \/* Card Body *\/\r\n  .bargach-leadership .ld-card .card-body {\r\n    padding: clamp(16px, 1.8vw, 22px) clamp(14px, 1.5vw, 20px) clamp(18px, 2vw, 24px);\r\n  }\r\n  .bargach-leadership .ld-card .card-body .card-name {\r\n    font-family: var(--serif);\r\n    font-weight: 560;\r\n    font-size: clamp(17px, 1.6vw, 22px);\r\n    color: var(--text-dark);\r\n    margin: 0 0 2px;\r\n  }\r\n  .bargach-leadership .ld-card .card-body .card-name .highlight {\r\n    color: var(--coral);\r\n  }\r\n  .bargach-leadership .ld-card .card-body .card-role {\r\n    font-size: clamp(12px, 0.85vw, 14px);\r\n    color: var(--text-muted);\r\n    font-weight: 400;\r\n    margin: 0;\r\n    line-height: 1.4;\r\n  }\r\n  .bargach-leadership .ld-card .card-body .card-role .role-highlight {\r\n    color: var(--coral);\r\n    font-weight: 500;\r\n  }\r\n\r\n  \/* Decorative line under name *\/\r\n  .bargach-leadership .ld-card .card-body .card-line {\r\n    width: 30px;\r\n    height: 2px;\r\n    background: linear-gradient(90deg, var(--coral), var(--gold));\r\n    margin: 8px auto 6px;\r\n    border-radius: 2px;\r\n    opacity: 0.4;\r\n    transition: width 0.3s ease, opacity 0.3s ease;\r\n  }\r\n  .bargach-leadership .ld-card:hover .card-body .card-line {\r\n    width: 50px;\r\n    opacity: 0.8;\r\n  }\r\n\r\n  \/* ========== ANIMATIONS ========== *\/\r\n  @keyframes fadeUp {\r\n    from { opacity: 0; transform: translateY(20px); }\r\n    to { opacity: 1; transform: translateY(0); }\r\n  }\r\n  .bargach-leadership .ld-tag {\r\n    opacity: 0;\r\n    animation: fadeUp 0.6s ease 0.1s forwards;\r\n  }\r\n  .bargach-leadership .ld-heading {\r\n    opacity: 0;\r\n    animation: fadeUp 0.7s ease 0.2s forwards;\r\n  }\r\n  .bargach-leadership .ld-card {\r\n    opacity: 0;\r\n    animation: fadeUp 0.6s ease forwards;\r\n  }\r\n  .bargach-leadership .ld-card:nth-child(1) { animation-delay: 0.15s; }\r\n  .bargach-leadership .ld-card:nth-child(2) { animation-delay: 0.25s; }\r\n  .bargach-leadership .ld-card:nth-child(3) { animation-delay: 0.35s; }\r\n  .bargach-leadership .ld-card:nth-child(4) { animation-delay: 0.45s; }\r\n  .bargach-leadership .ld-card:nth-child(5) { animation-delay: 0.55s; }\r\n\r\n  @media (prefers-reduced-motion: reduce) {\r\n    .bargach-leadership * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }\r\n    .bargach-leadership .ld-tag,\r\n    .bargach-leadership .ld-heading,\r\n    .bargach-leadership .ld-card {\r\n      opacity: 1 !important;\r\n      animation: none !important;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<!-- ============================================================\r\n     LEADERSHIP & GOVERNANCE \u2013 HTML\r\n     ============================================================ -->\r\n<section class=\"bargach-leadership\" aria-label=\"Leadership & Governance\">\r\n\r\n  <!-- Background -->\r\n  <div class=\"ld-bg\" aria-hidden=\"true\"><\/div>\r\n  <div class=\"ld-glow\" aria-hidden=\"true\"><\/div>\r\n  <div class=\"ld-glow-2\" aria-hidden=\"true\"><\/div>\r\n\r\n  <div class=\"ld-container\">\r\n\r\n    <!-- Header -->\r\n    <div class=\"ld-header\">\r\n      <div class=\"ld-tag\">The People Behind the Foundation<\/div>\r\n      <h2 class=\"ld-heading\">Guided by <span class=\"highlight\">commitment<\/span>. Built on <span class=\"highlight\">responsibility<\/span>.<\/h2>\r\n    <\/div>\r\n\r\n    <!-- Leadership Grid -->\r\n    <div class=\"ld-grid\">\r\n\r\n      <!-- 1. Rahul Johri \u2013 Managing Trustee Chairman -->\r\n      <div class=\"ld-card\">\r\n        <div class=\"card-image\">\r\n          <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1507003211169-0a1dd7228f2d?q=80&w=2070&auto=format&fit=crop\" alt=\"Shri Rahul Johri\" loading=\"lazy\" \/>\r\n        <\/div>\r\n        <div class=\"card-body\">\r\n          <h3 class=\"card-name\">Shri <span class=\"highlight\">Rahul Johri<\/span><\/h3>\r\n          <div class=\"card-line\"><\/div>\r\n          <p class=\"card-role\"><span class=\"role-highlight\">Managing Trustee<\/span> \u00b7 Chairman<\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- 2. Anisha Johri \u2013 Trustee -->\r\n      <div class=\"ld-card\">\r\n        <div class=\"card-image\">\r\n          <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1573497019940-1c28c88b4f3e?q=80&w=2070&auto=format&fit=crop\" alt=\"Smt Anisha Johri\" loading=\"lazy\" \/>\r\n        <\/div>\r\n        <div class=\"card-body\">\r\n          <h3 class=\"card-name\">Smt <span class=\"highlight\">Anisha Johri<\/span><\/h3>\r\n          <div class=\"card-line\"><\/div>\r\n          <p class=\"card-role\"><span class=\"role-highlight\">Trustee<\/span><\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- 3. Prasanta Kumar Sahu \u2013 Financial Trustee -->\r\n      <div class=\"ld-card\">\r\n        <div class=\"card-image\">\r\n          <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1472099645785-5658abf4ff4e?q=80&w=2070&auto=format&fit=crop\" alt=\"Shri Prasanta Kumar Sahu\" loading=\"lazy\" \/>\r\n        <\/div>\r\n        <div class=\"card-body\">\r\n          <h3 class=\"card-name\">Shri <span class=\"highlight\">Prasanta Kumar Sahu<\/span><\/h3>\r\n          <div class=\"card-line\"><\/div>\r\n          <p class=\"card-role\"><span class=\"role-highlight\">Financial Trustee<\/span><\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- 4. Ranjan Gangapadhyay \u2013 Chief Business Head -->\r\n      <div class=\"ld-card\">\r\n        <div class=\"card-image\">\r\n          <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1500648767791-00dcc994a43e?q=80&w=2070&auto=format&fit=crop\" alt=\"Shri Ranjan Gangapadhyay\" loading=\"lazy\" \/>\r\n        <\/div>\r\n        <div class=\"card-body\">\r\n          <h3 class=\"card-name\">Shri <span class=\"highlight\">Ranjan Gangapadhyay<\/span><\/h3>\r\n          <div class=\"card-line\"><\/div>\r\n          <p class=\"card-role\"><span class=\"role-highlight\">Chief Business Head<\/span><\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- 5. Gargi Sen \u2013 General Manager -->\r\n      <div class=\"ld-card\">\r\n        <div class=\"card-image\">\r\n          <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1580894732444-8ecded7900cd?q=80&w=2070&auto=format&fit=crop\" alt=\"Smt Gargi Sen\" loading=\"lazy\" \/>\r\n        <\/div>\r\n        <div class=\"card-body\">\r\n          <h3 class=\"card-name\">Smt <span class=\"highlight\">Gargi Sen<\/span><\/h3>\r\n          <div class=\"card-line\"><\/div>\r\n          <p class=\"card-role\"><span class=\"role-highlight\">General Manager<\/span><\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n    <!-- Governance Note -->\r\n    <p style=\"font-size:13px; color:var(--text-muted-light); text-align:center; margin-top:32px; font-weight:300; letter-spacing:0.04em; max-width:640px; margin-left:auto; margin-right:auto; line-height:1.6;\">\r\n      The Foundation is guided by a dedicated leadership team committed to <strong style=\"color:var(--teal-2);\">transparency, accountability<\/strong> and <strong style=\"color:var(--teal-2);\">community-first<\/strong> governance.\r\n    <\/p>\r\n\r\n  <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-8d33566 e-con e-atomic-element e-flexbox-base e-526fc82 \" data-id=\"8d33566\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"8d33566\">\n    \t\t<div class=\"elementor-element elementor-element-6e24980 elementor-widget elementor-widget-html\" data-id=\"6e24980\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     BARGACH \u00b7 ACCOUNTABILITY, LOOKING AHEAD & FINAL CTA\r\n     Light colorful design with cards, images, and clean layout.\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-footer-section {\r\n    --ink: #1f2a26;\r\n    --teal: #2a9d8f;\r\n    --teal-2: #1a7a6b;\r\n    --teal-light: #3ab0a0;\r\n    --gold: #d48c3c;\r\n    --gold-2: #e8b86d;\r\n    --coral: #e07a5f;\r\n    --coral-light: #f0a38c;\r\n    --text-dark: #1f2a26;\r\n    --text-body: #3d534a;\r\n    --text-muted: #6a8a7a;\r\n    --text-muted-light: #8a9e93;\r\n    --bg-light: #f8f4ed;\r\n    --bg-card: rgba(255, 255, 255, 0.80);\r\n    --hairline: rgba(26, 122, 107, 0.08);\r\n    --serif: 'Fraunces', Georgia, 'Times New Roman', serif;\r\n    --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\r\n\r\n    position: relative;\r\n    width: 100%;\r\n    padding: clamp(50px, 6vw, 80px) 0;\r\n    background: var(--bg-light);\r\n    color: var(--text-dark);\r\n    font-family: var(--sans);\r\n    overflow: hidden;\r\n  }\r\n  .bargach-footer-section *,\r\n  .bargach-footer-section *::before,\r\n  .bargach-footer-section *::after { box-sizing: border-box; }\r\n\r\n  .bargach-footer-section .ft-bg {\r\n    position: absolute; inset: 0; z-index: 0;\r\n    background:\r\n      radial-gradient(ellipse at 10% 20%, rgba(212,140,60,0.05) 0%, transparent 50%),\r\n      radial-gradient(ellipse at 90% 80%, rgba(42,157,143,0.04) 0%, transparent 50%);\r\n    pointer-events: none;\r\n  }\r\n  .bargach-footer-section .ft-glow {\r\n    position: absolute; z-index: 1; pointer-events: none;\r\n    width: 50vw; height: 50vw; max-width: 500px;\r\n    top: -10%; right: -5%;\r\n    background: radial-gradient(circle, rgba(212,140,60,0.04) 0%, rgba(212,140,60,0.01) 40%, transparent 70%);\r\n    filter: blur(60px);\r\n  }\r\n\r\n  .bargach-footer-section .ft-container {\r\n    position: relative; z-index: 2;\r\n    max-width: 1100px; margin: 0 auto;\r\n    padding: 0 clamp(22px, 4.5vw, 56px);\r\n  }\r\n\r\n  \/* ========== SECTION HEADER ========== *\/\r\n  .bargach-footer-section .ft-header {\r\n    margin-bottom: clamp(28px, 3.5vw, 44px);\r\n    max-width: 680px;\r\n  }\r\n  .bargach-footer-section .ft-tag {\r\n    display: inline-flex; align-items: center; gap: 10px;\r\n    font-size: 11.5px; font-weight: 600; letter-spacing: 0.18em;\r\n    text-transform: uppercase; color: var(--coral); margin: 0 0 8px;\r\n  }\r\n  .bargach-footer-section .ft-tag::before {\r\n    content: \"\"; width: 26px; height: 1px; background: var(--coral); display: inline-block;\r\n  }\r\n  .bargach-footer-section .ft-heading {\r\n    font-family: var(--serif); font-weight: 380;\r\n    font-size: clamp(28px, 3.5vw, 44px); line-height: 1.08;\r\n    margin: 0; color: var(--text-dark);\r\n  }\r\n  .bargach-footer-section .ft-heading .highlight {\r\n    background: linear-gradient(135deg, var(--coral), var(--gold));\r\n    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;\r\n  }\r\n  .bargach-footer-section .ft-sub {\r\n    font-size: clamp(15px, 1.1vw, 17px); line-height: 1.7;\r\n    color: var(--text-body); font-weight: 300; margin: 10px 0 0;\r\n    max-width: 600px;\r\n  }\r\n  .bargach-footer-section .ft-sub strong { color: var(--teal-2); font-weight: 500; }\r\n\r\n  \/* ========== DIVIDER ========== *\/\r\n  .bargach-footer-section .ft-divider {\r\n    display: flex; align-items: center; gap: 16px;\r\n    margin: clamp(32px, 4vw, 50px) 0 clamp(24px, 3vw, 34px);\r\n  }\r\n  .bargach-footer-section .ft-divider .line {\r\n    flex: 1; height: 1px; max-width: 80px;\r\n    background: linear-gradient(90deg, var(--coral), transparent);\r\n  }\r\n  .bargach-footer-section .ft-divider .diamond {\r\n    width: 8px; height: 8px; background: var(--coral);\r\n    transform: rotate(45deg); flex-shrink: 0; opacity: 0.4;\r\n  }\r\n\r\n  \/* ========== 2-COLUMN CARDS ========== *\/\r\n  .bargach-footer-section .ft-two-col {\r\n    display: grid; grid-template-columns: 1fr 1fr;\r\n    gap: clamp(24px, 3vw, 40px);\r\n    margin-bottom: clamp(30px, 4vw, 50px);\r\n  }\r\n  @media (max-width: 768px) { .bargach-footer-section .ft-two-col { grid-template-columns: 1fr; gap: 20px; } }\r\n\r\n  .bargach-footer-section .ft-card {\r\n    background: var(--bg-card); backdrop-filter: blur(8px);\r\n    -webkit-backdrop-filter: blur(8px);\r\n    border-radius: 18px; overflow: hidden;\r\n    border: 1px solid var(--hairline);\r\n    box-shadow: 0 4px 20px rgba(31,42,38,0.04);\r\n    transition: transform 0.4s ease, box-shadow 0.4s ease;\r\n  }\r\n  .bargach-footer-section .ft-card:hover {\r\n    transform: translateY(-4px);\r\n    box-shadow: 0 12px 40px rgba(31,42,38,0.08);\r\n    border-color: rgba(212,140,60,0.08);\r\n  }\r\n  .bargach-footer-section .ft-card .card-image {\r\n    width: 100%; aspect-ratio: 16\/7; overflow: hidden; position: relative;\r\n  }\r\n  .bargach-footer-section .ft-card .card-image img {\r\n    width: 100%; height: 100%; object-fit: cover; display: block;\r\n    transition: transform 0.6s ease;\r\n  }\r\n  .bargach-footer-section .ft-card:hover .card-image img { transform: scale(1.04); }\r\n  .bargach-footer-section .ft-card .card-image .card-badge {\r\n    position: absolute; top: 10px; left: 12px;\r\n    background: rgba(255,255,255,0.85); backdrop-filter: blur(4px);\r\n    padding: 2px 14px; border-radius: 999px;\r\n    font-size: 9px; font-weight: 600; text-transform: uppercase;\r\n    letter-spacing: 0.06em; color: var(--coral);\r\n    border: 1px solid rgba(224,122,95,0.08);\r\n  }\r\n  .bargach-footer-section .ft-card .card-body {\r\n    padding: clamp(18px, 2.2vw, 26px) clamp(18px, 2.2vw, 26px) clamp(20px, 2.2vw, 28px);\r\n  }\r\n  .bargach-footer-section .ft-card .card-body .card-icon { font-size: 22px; display: block; margin-bottom: 2px; }\r\n  .bargach-footer-section .ft-card .card-body .card-title {\r\n    font-family: var(--serif); font-weight: 560;\r\n    font-size: clamp(18px, 1.8vw, 24px); color: var(--text-dark); margin: 0 0 6px;\r\n  }\r\n  .bargach-footer-section .ft-card .card-body .card-title .highlight { color: var(--coral); }\r\n  .bargach-footer-section .ft-card .card-body .card-desc {\r\n    font-size: clamp(14px, 0.95vw, 15.5px); line-height: 1.7;\r\n    color: var(--text-body); font-weight: 300; margin: 0;\r\n  }\r\n  .bargach-footer-section .ft-card .card-body .card-desc strong { color: var(--teal-2); font-weight: 500; }\r\n\r\n  \/* ========== BUTTON ========== *\/\r\n  .bargach-footer-section .ft-btn {\r\n    display: inline-flex; align-items: center; gap: 8px;\r\n    padding: 12px 28px; border-radius: 999px;\r\n    background: var(--gold); color: var(--bg-light);\r\n    font-size: 14px; font-weight: 600; text-decoration: none;\r\n    border: none; cursor: pointer; font-family: var(--sans);\r\n    transition: all 0.3s ease; margin-top: 12px;\r\n  }\r\n  .bargach-footer-section .ft-btn:hover {\r\n    transform: translateY(-3px);\r\n    box-shadow: 0 8px 30px rgba(212,140,60,0.25);\r\n    background: var(--coral);\r\n  }\r\n  .bargach-footer-section .ft-btn .btn-arrow { display: inline-block; transition: transform 0.3s ease; }\r\n  .bargach-footer-section .ft-btn:hover .btn-arrow { transform: translateX(4px); }\r\n  .bargach-footer-section .ft-btn.outline {\r\n    background: transparent; color: var(--coral);\r\n    border: 1px solid var(--coral);\r\n  }\r\n  .bargach-footer-section .ft-btn.outline:hover {\r\n    background: var(--coral); color: var(--bg-light);\r\n  }\r\n  .bargach-footer-section .ft-center { text-align: center; margin-top: 8px; }\r\n\r\n  \/* ========== FINAL CTA ========== *\/\r\n  .bargach-footer-section .ft-final-cta {\r\n    background: var(--bg-card); backdrop-filter: blur(8px);\r\n    -webkit-backdrop-filter: blur(8px);\r\n    border-radius: 24px; padding: clamp(32px, 4vw, 48px) clamp(24px, 3vw, 40px);\r\n    border: 1px solid var(--hairline);\r\n    text-align: center;\r\n    box-shadow: 0 4px 20px rgba(31,42,38,0.04);\r\n    margin-top: clamp(20px, 2vw, 30px);\r\n  }\r\n  .bargach-footer-section .ft-final-cta .cta-icon { font-size: 32px; display: block; margin-bottom: 6px; }\r\n  .bargach-footer-section .ft-final-cta .cta-title {\r\n    font-family: var(--serif); font-weight: 380;\r\n    font-size: clamp(24px, 2.8vw, 36px); color: var(--text-dark); margin: 0 0 10px;\r\n  }\r\n  .bargach-footer-section .ft-final-cta .cta-title .highlight { color: var(--coral); }\r\n  .bargach-footer-section .ft-final-cta .cta-desc {\r\n    font-size: clamp(15px, 1.1vw, 17px); color: var(--text-body);\r\n    font-weight: 300; max-width: 560px; margin: 0 auto 20px; line-height: 1.6;\r\n  }\r\n  .bargach-footer-section .ft-final-cta .cta-btns {\r\n    display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;\r\n  }\r\n\r\n  \/* ========== ANIMATIONS ========== *\/\r\n  @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }\r\n  .bargach-footer-section .ft-tag { opacity: 0; animation: fadeUp 0.6s ease 0.1s forwards; }\r\n  .bargach-footer-section .ft-heading { opacity: 0; animation: fadeUp 0.7s ease 0.2s forwards; }\r\n  .bargach-footer-section .ft-sub { opacity: 0; animation: fadeUp 0.7s ease 0.3s forwards; }\r\n  .bargach-footer-section .ft-card { opacity: 0; animation: fadeUp 0.6s ease forwards; }\r\n  .bargach-footer-section .ft-card:nth-child(1) { animation-delay: 0.2s; }\r\n  .bargach-footer-section .ft-card:nth-child(2) { animation-delay: 0.3s; }\r\n  .bargach-footer-section .ft-final-cta { opacity: 0; animation: fadeUp 0.7s ease 0.3s forwards; }\r\n\r\n  @media (prefers-reduced-motion: reduce) {\r\n    .bargach-footer-section * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }\r\n    .bargach-footer-section .ft-tag, .bargach-footer-section .ft-heading,\r\n    .bargach-footer-section .ft-sub, .bargach-footer-section .ft-card,\r\n    .bargach-footer-section .ft-final-cta { opacity: 1 !important; animation: none !important; }\r\n  }\r\n<\/style>\r\n\r\n<!-- ============================================================\r\n     ACCOUNTABILITY, LOOKING AHEAD & FINAL CTA \u2013 HTML\r\n     ============================================================ -->\r\n<section class=\"bargach-footer-section\" aria-label=\"Accountability & Looking Ahead\">\r\n\r\n  <div class=\"ft-bg\" aria-hidden=\"true\"><\/div>\r\n  <div class=\"ft-glow\" aria-hidden=\"true\"><\/div>\r\n\r\n  <div class=\"ft-container\">\r\n\r\n    <!-- ====== ACCOUNTABILITY & TRANSPARENCY ====== -->\r\n    <div class=\"ft-header\">\r\n      <div class=\"ft-tag\">Responsible Development<\/div>\r\n      <h2 class=\"ft-heading\">We believe impact should be <span class=\"highlight\">visible<\/span>.<\/h2>\r\n      <p class=\"ft-sub\">Our annual reports document our programmes, achievements, partnerships and stories from the field.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"ft-two-col\">\r\n      <!-- Annual Report Card -->\r\n      <div class=\"ft-card\">\r\n        <div class=\"card-image\">\r\n          <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1434030216411-0b793f4b4173?q=80&w=2070&auto=format&fit=crop\" alt=\"Annual Report\" loading=\"lazy\" \/>\r\n          <span class=\"card-badge\">\ud83d\udcc4 Report<\/span>\r\n        <\/div>\r\n        <div class=\"card-body\">\r\n          <span class=\"card-icon\">\ud83d\udcca<\/span>\r\n          <h4 class=\"card-title\"><span class=\"highlight\">FY 2025\u201326<\/span> Annual Report<\/h4>\r\n          <p class=\"card-desc\">Explore the work and milestones behind our impact.<\/p>\r\n          <a href=\"#\" class=\"ft-btn\">View Annual Report <span class=\"btn-arrow\">\u2192<\/span><\/a>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Looking Ahead Card -->\r\n      <div class=\"ft-card\">\r\n        <div class=\"card-image\">\r\n          <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1504384308090-c894fdcc538d?q=80&w=2070&auto=format&fit=crop\" alt=\"Looking Ahead\" loading=\"lazy\" \/>\r\n          <span class=\"card-badge\">\ud83d\ude80 Forward<\/span>\r\n        <\/div>\r\n        <div class=\"card-body\">\r\n          <span class=\"card-icon\">\ud83c\udf1f<\/span>\r\n          <h4 class=\"card-title\"><span class=\"highlight\">The work<\/span> continues.<\/h4>\r\n          <p class=\"card-desc\">\r\n            More children need learning opportunities.<br>\r\n            More young people need relevant skills.<br>\r\n            More communities need safe water.<br>\r\n            <strong>We will continue working with communities and partners to strengthen these pathways.<\/strong>\r\n          <\/p>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- ====== FINAL CTA ====== -->\r\n    <div class=\"ft-divider\">\r\n      <span class=\"line\"><\/span>\r\n      <span class=\"diamond\"><\/span>\r\n      <span class=\"line\" style=\"background:linear-gradient(270deg,var(--coral),transparent);\"><\/span>\r\n    <\/div>\r\n\r\n    <div class=\"ft-final-cta\">\r\n      <span class=\"cta-icon\">\ud83e\udd1d<\/span>\r\n      <h3 class=\"cta-title\">You can be part of <span class=\"highlight\">what comes next<\/span>.<\/h3>\r\n      <p class=\"cta-desc\">Donate, volunteer, share your skills or partner with us to help extend the reach of community-focused programmes.<\/p>\r\n      <div class=\"cta-btns\">\r\n        <a href=\"#\" class=\"ft-btn\">Donate Now <span class=\"btn-arrow\">\u2192<\/span><\/a>\r\n        <a href=\"#\" class=\"ft-btn outline\">Partner With Us <span class=\"btn-arrow\">\u2192<\/span><\/a>\r\n        <a href=\"#\" class=\"ft-btn outline\" style=\"border-color:var(--text-muted-light); color:var(--text-muted-light);\">Contact Us <span class=\"btn-arrow\">\u2192<\/span><\/a>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Bottom line -->\r\n    <p style=\"font-size:12px; color:var(--text-muted-light); text-align:center; margin-top:24px; font-weight:300; letter-spacing:0.06em;\">\r\n      It is built over time, <strong style=\"color:var(--teal-2);\">together<\/strong>.\r\n    <\/p>\r\n\r\n  <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Who We Are \u00b7 Est. 2020 Building stronger communities, one opportunity at a time. Bargach Foundation is a non-profit organisation working with rural and semi-urban communities to create access to education, digital skills, livelihoods, safe drinking water and sustainable opportunities. Our Programs \u2192 Get Involved \u2192 Where We Began Rooted in the communities we serve. [&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-24","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demo.freshosoft.in\/bargach\/wp-json\/wp\/v2\/pages\/24","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=24"}],"version-history":[{"count":7,"href":"https:\/\/demo.freshosoft.in\/bargach\/wp-json\/wp\/v2\/pages\/24\/revisions"}],"predecessor-version":[{"id":1876,"href":"https:\/\/demo.freshosoft.in\/bargach\/wp-json\/wp\/v2\/pages\/24\/revisions\/1876"}],"wp:attachment":[{"href":"https:\/\/demo.freshosoft.in\/bargach\/wp-json\/wp\/v2\/media?parent=24"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}