{"id":145,"date":"2025-10-21T21:23:30","date_gmt":"2025-10-21T21:23:30","guid":{"rendered":"https:\/\/brave-solomon.64-23-132-27.plesk.page\/?page_id=145"},"modified":"2026-04-03T18:06:19","modified_gmt":"2026-04-03T18:06:19","slug":"elp","status":"publish","type":"page","link":"https:\/\/brave-solomon.64-23-132-27.plesk.page\/","title":{"rendered":"ELP"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"145\" class=\"elementor elementor-145\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-76659a2 e-con-full e-flex e-con e-parent\" data-id=\"76659a2\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ba008a4 elementor-widget elementor-widget-html\" data-id=\"ba008a4\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n    \/* --- BRAND COLORS & VARIABLES --- *\/\n    :root {\n        --teal: #31C0C8;\n        --orange: #f68b36;\n        --navy: #1A2B3C;\n        --bg-light: #EFF3F8;\n    }\n\n    \/* 1. HERO CONTAINER *\/\n    .elp-hero-wow {\n        position: relative;\n        \/* Negative margin pulls the section up to swallow Elementor's default widget gaps *\/\n        margin-top: -30px !important; \n        padding: 90px 20px 80px 20px; \/* Increased top padding to compensate for the pull-up *\/\n        background-color: var(--bg-light);\n        overflow: hidden;\n        font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\n    }\n\n    \/* Inner wrapper to keep content centered and close together on wide screens *\/\n    .elp-hero-inner {\n        max-width: 1250px;\n        margin: 0 auto;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: 50px;\n        position: relative;\n        z-index: 2;\n    }\n\n    \/* 2. ANIMATED AURORA GLOW (For 3D Depth & Color) *\/\n    .elp-hero-bg-orbs {\n        position: absolute;\n        top: 0; left: 0; right: 0; bottom: 0;\n        overflow: hidden;\n        z-index: 0;\n        pointer-events: none;\n    }\n\n    .elp-hero-bg-orb {\n        position: absolute;\n        width: 80vw;\n        height: 80vw;\n        max-width: 800px;\n        max-height: 800px;\n        background: radial-gradient(circle, rgba(49,192,200,0.35) 0%, rgba(49,192,200,0) 65%);\n        top: -20%;\n        right: -10%;\n        border-radius: 50%;\n        filter: blur(60px);\n        animation: floatOrbTeal 18s ease-in-out infinite alternate;\n    }\n\n    .elp-hero-bg-orb-2 {\n        position: absolute;\n        width: 70vw;\n        height: 70vw;\n        max-width: 700px;\n        max-height: 700px;\n        background: radial-gradient(circle, rgba(246,139,54,0.25) 0%, rgba(246,139,54,0) 65%);\n        bottom: -20%;\n        left: -10%;\n        border-radius: 50%;\n        filter: blur(60px);\n        animation: floatOrbOrange 22s ease-in-out infinite alternate-reverse;\n    }\n    \n    .elp-hero-bg-orb-3 {\n        position: absolute;\n        width: 60vw;\n        height: 60vw;\n        max-width: 600px;\n        max-height: 600px;\n        background: radial-gradient(circle, rgba(49,192,200,0.2) 0%, rgba(26,43,60,0) 60%);\n        top: 30%;\n        left: 20%;\n        border-radius: 50%;\n        filter: blur(80px);\n        animation: floatOrbMix 25s ease-in-out infinite alternate;\n    }\n\n    \/* Keyframes for the slow, breathing ambient motion *\/\n    @keyframes floatOrbTeal {\n        0% { transform: translate(0, 0) scale(1); }\n        50% { transform: translate(-10%, 15%) scale(1.1); }\n        100% { transform: translate(-20%, -5%) scale(0.95); }\n    }\n    @keyframes floatOrbOrange {\n        0% { transform: translate(0, 0) scale(1); }\n        50% { transform: translate(15%, -15%) scale(1.2); }\n        100% { transform: translate(5%, -25%) scale(0.9); }\n    }\n    @keyframes floatOrbMix {\n        0% { transform: translate(0, 0) scale(1); }\n        50% { transform: translate(-15%, -15%) scale(1.1); }\n        100% { transform: translate(15%, 15%) scale(1); }\n    }\n\n    \/* 3. LEFT SIDE: CONTENT & ANIMATIONS *\/\n    .elp-hero-content {\n        flex: 1 1 500px;\n        max-width: 600px; \/* Slightly tighter so it balances nicely with the photos *\/\n        z-index: 2;\n        opacity: 0;\n        animation: fadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n    }\n\n    @keyframes fadeUp {\n        from { opacity: 0; transform: translateY(40px); }\n        to { opacity: 1; transform: translateY(0); }\n    }\n\n    .elp-hero-content h1 {\n        font-size: clamp(3rem, 5vw, 4.2rem);\n        font-weight: 800;\n        line-height: 1.1;\n        color: var(--navy);\n        margin-bottom: 25px;\n        letter-spacing: -0.5px;\n    }\n\n    \/* Modern skewed highlight behind the text *\/\n    .elp-hero-content h1 span {\n        color: var(--orange);\n        position: relative;\n        display: inline-block;\n        z-index: 1;\n    }\n    .elp-hero-content h1 span::after {\n        content: '';\n        position: absolute;\n        width: 105%;\n        height: 30%;\n        background: rgba(49, 192, 200, 0.25);\n        bottom: 10%;\n        left: -2.5%;\n        z-index: -1;\n        transform: skewX(-15deg);\n        border-radius: 4px;\n    }\n\n    .elp-hero-desc {\n        font-size: 1.05rem; \/* slightly tweaked for better line breaks *\/\n        line-height: 1.7;\n        color: #4A5A6A;\n        margin-bottom: 20px;\n        text-align: justify;\n    }\n\n    \/* 4. CALL TO ACTION BUTTONS *\/\n    .elp-hero-ctas {\n        display: flex;\n        gap: 15px;\n        margin-top: 35px;\n        flex-wrap: wrap;\n    }\n    \n    .elp-btn-primary, .elp-btn-secondary {\n        padding: 14px 32px;\n        border-radius: 50px;\n        font-weight: 700;\n        font-size: 1rem;\n        text-decoration: none !important;\n        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n    }\n\n    .elp-btn-primary {\n        background: linear-gradient(135deg, var(--orange), #ff7a00);\n        color: white !important;\n        box-shadow: 0 8px 20px rgba(246, 139, 54, 0.3);\n        border: 2px solid transparent;\n    }\n    .elp-btn-primary:hover {\n        transform: translateY(-4px);\n        box-shadow: 0 12px 25px rgba(246, 139, 54, 0.45);\n    }\n\n    .elp-btn-secondary {\n        background: white;\n        color: var(--navy) !important;\n        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);\n        border: 2px solid transparent;\n    }\n    .elp-btn-secondary:hover {\n        transform: translateY(-4px);\n        color: var(--teal) !important;\n        border-color: rgba(49, 192, 200, 0.3);\n        box-shadow: 0 12px 25px rgba(49, 192, 200, 0.15);\n    }\n\n    \/* 5. RIGHT SIDE: THE PHOTO STACK *\/\n    .elp-hero-visual {\n        flex: 1 1 450px;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        position: relative;\n        perspective: 1000px;\n        z-index: 2;\n    }\n\n    .elp-card-stack {\n        position: relative;\n        width: 380px;  \n        height: 480px; \n        cursor: pointer;\n        transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);\n    }\n\n    \/* Scale up the whole stack slightly on hover *\/\n    .elp-card-stack:hover {\n        transform: scale(1.03) translateY(-10px);\n    }\n\n    .elp-stack-card {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        background-color: #fff;\n        padding: 12px 12px 60px 12px; \/* Thick polaroid bottom *\/\n        box-shadow: 0 10px 30px rgba(0,0,0,0.08);\n        border-radius: 12px;\n        transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);\n        transform-origin: center bottom;\n    }\n\n    .elp-stack-card img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        border-radius: 6px;\n        pointer-events: none; \n    }\n\n    \/* Base Stack Positioning *\/\n    .elp-stack-card:nth-child(1) { z-index: 5; transform: rotate(-3deg); } \n    .elp-stack-card:nth-child(2) { z-index: 4; transform: rotate(4deg) translate(8px, 12px); }\n    .elp-stack-card:nth-child(3) { z-index: 3; transform: rotate(-5deg) translate(-10px, 22px); box-shadow: 0 15px 40px rgba(0,0,0,0.15); }\n    .elp-stack-card:nth-child(n+4) { z-index: 1; opacity: 0; transform: scale(0.8) translateY(40px); } \n\n    \/* \u2728 THE WOW FACTOR: Fan out cards smoothly on hover \u2728 *\/\n    .elp-card-stack:hover .elp-stack-card:nth-child(1) { transform: rotate(-8deg) translateX(-25px); }\n    .elp-card-stack:hover .elp-stack-card:nth-child(2) { transform: rotate(8deg) translateX(35px) translateY(10px); }\n    .elp-card-stack:hover .elp-stack-card:nth-child(3) { transform: rotate(-12deg) translateX(-45px) translateY(25px); }\n\n    \/* Animation: Fly Away *\/\n    .elp-stack-card.fly-out {\n        transform: translate(130%, -20%) rotate(35deg) scale(1.1) !important;\n        opacity: 0 !important;\n        box-shadow: 0 30px 60px rgba(0,0,0,0.2);\n    }\n\n    \/* --- MOBILE OPTIMIZATIONS --- *\/\n    @media (max-width: 991px) {\n        .elp-hero-inner {\n            flex-direction: column; \n            text-align: center; \n            gap: 20px;\n        }\n        .elp-hero-wow {\n            padding: 70px 20px 80px 20px; \/* Increased padding to balance the negative margin on mobile *\/\n        }\n        .elp-hero-content { max-width: 100%; }\n        .elp-hero-content h1 { font-size: 2.8rem; }\n        .elp-hero-desc { text-align: left; font-size: 1.05rem; }\n        .elp-hero-ctas { justify-content: center; }\n        \n        .elp-hero-visual { width: 100%; margin-top: 40px; }\n        .elp-card-stack { width: 320px; height: 400px; }\n        \n        \/* Adjust fly out for mobile screens to not break width *\/\n        .elp-stack-card.fly-out {\n            transform: translate(80%, -40%) rotate(45deg) scale(0.8) !important;\n        }\n    }\n\n    @media (max-width: 400px) {\n        .elp-card-stack { width: 280px; height: 350px; }\n        .elp-hero-content h1 { font-size: 2.4rem; }\n        .elp-btn-primary, .elp-btn-secondary { width: 100%; }\n    }\n<\/style>\n\n<div class=\"elp-hero-wow\">\n    \n    <!-- Animated Aurora Glow Effects -->\n    <div class=\"elp-hero-bg-orbs\">\n        <div class=\"elp-hero-bg-orb\"><\/div>\n        <div class=\"elp-hero-bg-orb-2\"><\/div>\n        <div class=\"elp-hero-bg-orb-3\"><\/div>\n    <\/div>\n\n    <!-- Inner Centered Wrapper -->\n    <div class=\"elp-hero-inner\">\n        <!-- Text Content -->\n        <div class=\"elp-hero-content\">\n            <h1>Scholars Today.<br><span>Leaders Tomorrow.<\/span><\/h1>\n            \n            <p class=\"elp-hero-desc\">\n                The Emerging Leaders Program is a Bronx-based workforce readiness program that exposes students to a variety of career options and paths while equipping them with the professional skills needed to help them thrive in the future. Too many young people have the potential to be the leaders of tomorrow, without access to the opportunities and resources they need to achieve their aspirations. Professional skills and strong networks\u2014built on real relationships\u2014are the keys to unlocking a successful future.\n            <\/p>\n            \n            <p class=\"elp-hero-desc\">\n                ELPBx empowers South Bronx scholars through transformative career exposure, mentorship, and professional networking. Students gain skills in leadership, professional communication, critical thinking and decision making, relationship building, teamwork, and presenting in a professional setting. Our program builds the foundation for life-fulfilling careers and prepares the next generation of industry leaders.\n            <\/p>\n\n            <!-- New Actionable Buttons -->\n            <div class=\"elp-hero-ctas\">\n                <a href=\"https:\/\/brave-solomon.64-23-132-27.plesk.page\/index.php\/get-involved\/\" class=\"elp-btn-primary\">Get Involved<\/a>\n                <a href=\"https:\/\/brave-solomon.64-23-132-27.plesk.page\/index.php\/programs\/\" class=\"elp-btn-secondary\">Our Programs<\/a>\n            <\/div>\n        <\/div>\n\n        <!-- 3D Photo Stack -->\n        <div class=\"elp-hero-visual\">\n            <!-- Added ID for the new script targeting -->\n            <div class=\"elp-card-stack\" id=\"elpCardStack\" onclick=\"shuffleStackWow()\">\n                <div class=\"elp-stack-card\"><img decoding=\"async\" src=\"https:\/\/brave-solomon.64-23-132-27.plesk.page\/wp-content\/uploads\/2025\/10\/download-14-scaled.jpg\"><\/div>\n            <div class=\"elp-stack-card\"><img decoding=\"async\" src=\"https:\/\/brave-solomon.64-23-132-27.plesk.page\/wp-content\/uploads\/2025\/10\/download-4.jpg\"><\/div>\n            <div class=\"elp-stack-card\"><img decoding=\"async\" src=\"https:\/\/brave-solomon.64-23-132-27.plesk.page\/wp-content\/uploads\/2025\/10\/download-1.jpg\"><\/div>\n            <div class=\"elp-stack-card\"><img decoding=\"async\" src=\"https:\/\/brave-solomon.64-23-132-27.plesk.page\/wp-content\/uploads\/2025\/10\/download-18-scaled.jpg\"><\/div>\n                <div class=\"elp-stack-card\"><img decoding=\"async\" src=\"https:\/\/brave-solomon.64-23-132-27.plesk.page\/wp-content\/uploads\/2025\/10\/download-3.jpg\"><\/div>\n            <\/div>\n        <\/div>\n    <\/div> <!-- End Inner Wrapper -->\n\n<\/div>\n\n<script>\n    let isAnimatingWow = false;\n    let autoShuffleTimerWow;\n\n    function shuffleStackWow() {\n        if (isAnimatingWow) return;\n        isAnimatingWow = true;\n\n        const stack = document.getElementById('elpCardStack');\n        const cards = stack.getElementsByClassName('elp-stack-card');\n        \n        if (cards.length === 0) return;\n\n        const topCard = cards[0];\n        \n        \/\/ 1. Trigger the majestic fly out animation\n        topCard.classList.add('fly-out');\n\n        \/\/ 2. Wait for it to fly away, then seamlessly pop it behind the stack\n        setTimeout(() => {\n            stack.appendChild(topCard); \n            \/\/ Force a quick browser redraw so it doesn't animate backwards\n            void topCard.offsetWidth; \n            topCard.classList.remove('fly-out');\n            \n            isAnimatingWow = false;\n        }, 600); \/\/ This matches the 0.6s CSS transition\n\n        resetAutoTimerWow();\n    }\n\n    function startAutoShuffleWow() {\n        \/\/ Slowed down slightly to 4 seconds to give users time to enjoy the hover effect\n        autoShuffleTimerWow = setInterval(() => {\n            shuffleStackWow();\n        }, 4000); \n    }\n\n    function resetAutoTimerWow() {\n        clearInterval(autoShuffleTimerWow);\n        startAutoShuffleWow();\n    }\n\n    \/\/ Start the automatic slideshow on page load\n    startAutoShuffleWow();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9035539 e-con-full e-flex e-con e-parent\" data-id=\"9035539\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e9d11d7 elementor-widget elementor-widget-html\" data-id=\"e9d11d7\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n    \/* --- BRAND COLORS & VARIABLES --- *\/\n    :root {\n        --teal: #31C0C8;\n        --orange: #f68b36;\n        --navy: #1A2B3C;\n    }\n\n    \/* 1. MAIN SECTION WRAPPER *\/\n    .elp-growth-section {\n        position: relative;\n        padding: 100px 5%;\n        display: flex;\n        align-items: center;\n        justify-content: flex-end; \/* Pushes content to the right so the image is visible on the left *\/\n        min-height: 80vh;\n        overflow: hidden;\n        font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\n    }\n\n    \/* 2. SLOW-BREATHING BACKGROUND IMAGE *\/\n    .elp-growth-bg {\n        position: absolute;\n        top: -5%; left: -5%; right: -5%; bottom: -5%; \/* Oversized for panning room *\/\n        background-image: url('https:\/\/brave-solomon.64-23-132-27.plesk.page\/wp-content\/uploads\/2025\/10\/download-17-scaled.jpg');\n        background-size: cover;\n        background-position: center left;\n        z-index: 0;\n        animation: slowPan 25s ease-in-out infinite alternate;\n    }\n\n    @keyframes slowPan {\n        0% { transform: scale(1) translate(0, 0); }\n        100% { transform: scale(1.05) translate(-1%, 1%); }\n    }\n\n    \/* 3. PREMIUM OVERLAY (Darker on the right where text lives) *\/\n    .elp-growth-overlay {\n        position: absolute;\n        top: 0; left: 0; right: 0; bottom: 0;\n        background: linear-gradient(90deg, rgba(26, 43, 60, 0.4) 0%, rgba(26, 43, 60, 0.9) 100%);\n        z-index: 1;\n    }\n\n    \/* 4. CONTENT CONTAINER *\/\n    .elp-growth-content {\n        position: relative;\n        z-index: 2;\n        max-width: 650px;\n        width: 100%;\n        animation: slideInRight 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n    }\n\n    @keyframes slideInRight {\n        from { opacity: 0; transform: translateX(50px); }\n        to { opacity: 1; transform: translateX(0); }\n    }\n\n    \/* Title Styling *\/\n    .elp-growth-content h2 {\n        font-size: clamp(2.2rem, 4vw, 3.2rem);\n        font-weight: 800;\n        line-height: 1.15;\n        color: #ffffff;\n        margin-bottom: 40px;\n        letter-spacing: -0.5px;\n    }\n\n    .elp-growth-content h2 span {\n        color: var(--teal);\n        position: relative;\n        display: inline-block;\n    }\n\n    \/* Modern underline under the highlighted text *\/\n    .elp-growth-content h2 span::after {\n        content: '';\n        position: absolute;\n        width: 100%;\n        height: 4px;\n        background: var(--orange);\n        bottom: -5px;\n        left: 0;\n        border-radius: 2px;\n    }\n\n    \/* 5. GLASSMORPHIC PROGRAM CARDS *\/\n    .elp-program-list {\n        display: flex;\n        flex-direction: column;\n        gap: 20px;\n        margin-bottom: 40px;\n    }\n\n    .elp-program-card {\n        background: rgba(255, 255, 255, 0.08); \/* Frosted Glass *\/\n        backdrop-filter: blur(16px);\n        -webkit-backdrop-filter: blur(16px);\n        border: 1px solid rgba(255, 255, 255, 0.15);\n        border-radius: 20px;\n        padding: 25px 30px;\n        display: flex;\n        gap: 25px;\n        align-items: flex-start;\n        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);\n        cursor: default;\n    }\n\n    .elp-program-card:hover {\n        transform: translateX(-10px);\n        background: rgba(255, 255, 255, 0.15);\n        border-color: rgba(255, 255, 255, 0.3);\n        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);\n    }\n\n    \/* Card Icons *\/\n    .elp-program-icon {\n        flex-shrink: 0;\n        width: 55px;\n        height: 55px;\n        background: var(--teal);\n        border-radius: 50%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        color: #fff;\n        box-shadow: 0 6px 15px rgba(49, 192, 200, 0.4);\n        transition: all 0.4s ease;\n    }\n\n    .elp-program-icon svg {\n        width: 24px;\n        height: 24px;\n        fill: currentColor;\n    }\n\n    .elp-program-card:hover .elp-program-icon {\n        background: var(--orange);\n        box-shadow: 0 6px 15px rgba(246, 139, 54, 0.4);\n        transform: scale(1.1) rotate(-5deg);\n    }\n\n    \/* Card Text *\/\n    .elp-program-info h3 {\n        font-size: 1.35rem;\n        font-weight: 700;\n        color: #ffffff;\n        margin: 0 0 8px 0;\n        letter-spacing: 0.3px;\n    }\n\n    .elp-program-info p {\n        font-size: 1rem;\n        line-height: 1.6;\n        color: rgba(255, 255, 255, 0.85);\n        margin: 0;\n    }\n\n    \/* 6. CALL TO ACTION BUTTON *\/\n    .elp-discover-btn {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        padding: 16px 36px;\n        background: linear-gradient(135deg, var(--orange), #ff7a00);\n        color: #ffffff !important;\n        font-weight: 700;\n        font-size: 1rem;\n        text-transform: uppercase;\n        letter-spacing: 1px;\n        border-radius: 50px;\n        text-decoration: none;\n        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);\n        box-shadow: 0 8px 20px rgba(246, 139, 54, 0.3);\n    }\n\n    .elp-discover-btn:hover {\n        transform: translateY(-4px);\n        box-shadow: 0 12px 25px rgba(246, 139, 54, 0.5);\n    }\n\n    \/* --- RESPONSIVE LAYOUT --- *\/\n    @media (max-width: 1024px) {\n        .elp-growth-section {\n            justify-content: center; \/* Center everything on smaller screens *\/\n            padding: 80px 5%;\n        }\n        .elp-growth-overlay {\n            \/* Even gradient overlay when centered *\/\n            background: rgba(26, 43, 60, 0.85);\n        }\n        .elp-growth-content {\n            max-width: 700px;\n        }\n    }\n\n    @media (max-width: 600px) {\n        .elp-program-card {\n            flex-direction: column;\n            gap: 15px;\n            padding: 25px 20px;\n        }\n        .elp-program-card:hover {\n            transform: translateY(-5px); \/* Lift up instead of sliding left on mobile *\/\n        }\n        .elp-growth-content h2 {\n            font-size: 2.2rem;\n            text-align: center;\n        }\n        .elp-growth-content h2 span::after {\n            left: 10%; width: 80%; \/* Center the underline *\/\n        }\n        .elp-discover-btn {\n            width: 100%;\n        }\n    }\n<\/style>\n\n<section class=\"elp-growth-section\">\n    <!-- Animated Background Image -->\n    <div class=\"elp-growth-bg\"><\/div>\n    \n    <!-- Gradient Overlay -->\n    <div class=\"elp-growth-overlay\"><\/div>\n\n    <!-- Right-Aligned Content Wrapper -->\n    <div class=\"elp-growth-content\">\n        \n        <h2>A long-term road to <br><span>Personal & Professional<\/span> Growth<\/h2>\n\n        <div class=\"elp-program-list\">\n            \n            <!-- Program 1 -->\n            <div class=\"elp-program-card\">\n                <div class=\"elp-program-icon\">\n                    <!-- Megaphone SVG -->\n                    <svg viewBox=\"0 0 576 512\">\n                        <path d=\"M576 240c0-23.63-12.95-44.04-32-55.12V32.01C544 23.26 537.02 0 512 0c-7.12 0-14.19 2.38-19.98 7.02l-85.03 68.03C364.28 109.19 310.66 128 256 128H64c-35.35 0-64 28.65-64 64v96c0 35.35 28.65 64 64 64h33.7c-1.39 10.48-2.18 21.14-2.18 32 0 39.77 9.26 77.35 25.56 110.94 5.19 10.69 16.52 17.06 28.4 17.06h74.28c26.05 0 41.69-29.84 25.9-50.56-16.4-21.52-26.15-48.36-26.15-77.44 0-11.11 1.62-21.79 4.41-32H256c54.66 0 108.28 18.81 150.98 52.95l85.03 68.03a32.023 32.023 0 0 0 19.98 7.02c24.92 0 32-22.78 32-32V295.13C563.05 284.04 576 263.63 576 240zm-96 141.42l-33.05-26.44C392.95 311.78 325.12 288 256 288v-96c69.12 0 136.95-23.78 190.95-66.98L480 98.58v282.84z\"\/>\n                    <\/svg>\n                <\/div>\n                <div class=\"elp-program-info\">\n                    <h3>The ELP Core Program<\/h3>\n                    <p>The bread and butter of ELP; after-school programming focused on helping scholars build professional skills. The program culminates with a capstone project where scholars collectively tackle and present a real-world case study.<\/p>\n                <\/div>\n            <\/div>\n\n            <!-- Program 2 -->\n            <div class=\"elp-program-card\">\n                <div class=\"elp-program-icon\">\n                    <!-- Bookmark\/Badge SVG -->\n                    <svg viewBox=\"0 0 384 512\">\n                        <path d=\"M336 0H48C21.49 0 0 21.49 0 48v464l192-112 192 112V48c0-26.51-21.49-48-48-48zm0 428.43l-144-84-144 84V54a6 6 0 0 1 6-6h276c3.314 0 6 2.683 6 5.996V428.43z\"\/>\n                    <\/svg>\n                <\/div>\n                <div class=\"elp-program-info\">\n                    <h3>The Internship Program<\/h3>\n                    <p>An after-school paid internship for high school scholars to hone the skills gained through ELP core programming through real-life exposure in a workplace.<\/p>\n                <\/div>\n            <\/div>\n\n            <!-- Program 3 -->\n            <div class=\"elp-program-card\">\n                <div class=\"elp-program-icon\">\n                    <!-- Chat Bubbles SVG -->\n                    <svg viewBox=\"0 0 576 512\">\n                        <path d=\"M532 386.2c27.5-27.1 44-61.1 44-98.2 0-80-76.5-146.1-176.2-157.9C368.3 72.5 294.3 32 208 32 93.1 32 0 103.6 0 192c0 37 16.5 71 44 98.2-15.3 30.7-37.3 54.5-37.7 54.9-6.3 6.7-8.1 16.5-4.4 25 3.6 8.5 12 14 21.2 14 53.5 0 96.7-20.2 125.2-38.8 9.2 2.1 18.7 3.7 28.4 4.9C208.1 407.6 281.8 448 368 448c20.8 0 40.8-2.4 59.8-6.8C456.3 459.7 499.4 480 553 480c9.2 0 17.5-5.5 21.2-14 3.6-8.5 1.9-18.3-4.4-25-.4-.3-22.5-24.1-37.8-54.8zm-392.8-92.3L122.1 305c-14.1 9.1-28.5 16.3-43.1 21.4 2.7-4.7 5.4-9.7 8-14.8l15.5-31.1L77.7 256C64.2 242.6 48 220.7 48 192c0-60.7 73.3-112 160-112s160 51.3 160 112-73.3 112-160 112c-16.5 0-33-1.9-49-5.6l-19.8-4.5zM498.3 352l-24.7 24.4 15.5 31.1c2.6 5.1 5.3 10.1 8 14.8-14.6-5.1-29-12.3-43.1-21.4l-17.1-11.1-19.9 4.6c-16 3.7-32.5 5.6-49 5.6-54 0-102.2-20.1-131.3-49.7C338 339.5 416 272.9 416 192c0-3.4-.4-6.7-.7-10C479.7 196.5 528 238.8 528 288c0 28.7-16.2 50.6-29.7 64z\"\/>\n                    <\/svg>\n                <\/div>\n                <div class=\"elp-program-info\">\n                    <h3>The Fellows Program<\/h3>\n                    <p>A unique \"pod\" based mentorship program for scholars to build long-lasting relationships with a diverse array of professionals across industries and experience levels, as well as their peers with similar experiences.<\/p>\n                <\/div>\n            <\/div>\n\n        <\/div>\n\n        <a href=\"https:\/\/brave-solomon.64-23-132-27.plesk.page\/index.php\/programs\/\" class=\"elp-discover-btn\">Discover More<\/a>\n\n    <\/div>\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8b999c6 e-con-full e-flex e-con e-parent\" data-id=\"8b999c6\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c3a6116 elementor-widget elementor-widget-html\" data-id=\"c3a6116\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n    \/* --- BRAND COLORS & VARIABLES --- *\/\n    :root {\n        --teal: #31C0C8;\n        --orange: #f68b36;\n        --navy: #1A2B3C;\n        --text-muted: #A9B8C7;\n    }\n\n    \/* 1. MAIN WRAPPER *\/\n    .elp-stats-wow-section {\n        position: relative;\n        padding: 80px 5%;\n        background-color: var(--navy);\n        overflow: hidden;\n        font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\n    }\n\n    \/* 2. AMBIENT GLOW EFFECTS *\/\n    .elp-stats-glow-left {\n        position: absolute;\n        top: -50%;\n        left: -10%;\n        width: 600px;\n        height: 600px;\n        background: radial-gradient(circle, rgba(49,192,200,0.15) 0%, rgba(26,43,60,0) 70%);\n        border-radius: 50%;\n        pointer-events: none;\n        z-index: 0;\n    }\n    \n    .elp-stats-glow-right {\n        position: absolute;\n        bottom: -50%;\n        right: -10%;\n        width: 600px;\n        height: 600px;\n        background: radial-gradient(circle, rgba(246,139,54,0.12) 0%, rgba(26,43,60,0) 70%);\n        border-radius: 50%;\n        pointer-events: none;\n        z-index: 0;\n    }\n\n    \/* 3. GRID LAYOUT *\/\n    .elp-stats-grid {\n        position: relative;\n        z-index: 2;\n        max-width: 1300px;\n        margin: 0 auto;\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n        gap: 30px;\n    }\n\n    \/* 4. INDIVIDUAL STAT CARDS (Glassmorphism) *\/\n    .elp-stat-card {\n        background: rgba(255, 255, 255, 0.03); \/* Ultra-sheer white *\/\n        backdrop-filter: blur(20px);\n        -webkit-backdrop-filter: blur(20px);\n        border: 1px solid rgba(255, 255, 255, 0.08);\n        border-radius: 20px;\n        padding: 40px 25px;\n        text-align: center;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);\n        position: relative;\n        overflow: hidden;\n    }\n\n    \/* Subtle top border highlight on cards *\/\n    .elp-stat-card::before {\n        content: '';\n        position: absolute;\n        top: 0; left: 0; right: 0;\n        height: 3px;\n        background: linear-gradient(90deg, var(--teal), var(--orange));\n        opacity: 0.5;\n        transition: opacity 0.4s ease;\n    }\n\n    .elp-stat-card:hover {\n        transform: translateY(-10px);\n        background: rgba(255, 255, 255, 0.06);\n        border-color: rgba(255, 255, 255, 0.15);\n        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);\n    }\n\n    .elp-stat-card:hover::before {\n        opacity: 1;\n    }\n\n    \/* 5. ICONS (Upgraded to premium stroked line-art) *\/\n    .elp-stat-icon {\n        width: 65px;\n        height: 65px;\n        background: rgba(255, 255, 255, 0.05);\n        border-radius: 50%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        margin-bottom: 20px;\n        color: var(--teal);\n        transition: all 0.4s ease;\n    }\n    \n    .elp-stat-card:hover .elp-stat-icon {\n        background: var(--teal);\n        color: #fff;\n        transform: scale(1.1) rotate(5deg);\n        box-shadow: 0 10px 20px rgba(49, 192, 200, 0.3);\n    }\n\n    .elp-stat-icon svg {\n        width: 32px;\n        height: 32px;\n        fill: none; \/* Changed from solid fill *\/\n        stroke: currentColor; \/* Matches the color property seamlessly *\/\n        stroke-width: 1.5; \/* Delicate, premium thickness *\/\n        stroke-linecap: round;\n        stroke-linejoin: round;\n    }\n\n    \/* 6. TYPOGRAPHY (Numbers & Labels) *\/\n    .elp-stat-number-wrapper {\n        display: flex;\n        align-items: baseline;\n        justify-content: center;\n        margin-bottom: 10px;\n    }\n\n    .elp-stat-number, .elp-stat-plus {\n        font-size: 3.5rem;\n        font-weight: 800;\n        line-height: 1;\n        background: linear-gradient(135deg, var(--teal), var(--orange));\n        -webkit-background-clip: text;\n        -webkit-text-fill-color: transparent;\n        font-family: 'Montserrat', sans-serif;\n    }\n\n    .elp-stat-plus {\n        font-size: 2.5rem; \/* Make the plus sign slightly smaller than the numbers *\/\n        margin-left: 2px;\n    }\n\n    .elp-stat-label {\n        color: var(--text-muted);\n        font-size: 1.05rem;\n        font-weight: 600;\n        text-transform: uppercase;\n        letter-spacing: 1px;\n        line-height: 1.4;\n        margin: 0;\n    }\n\n    \/* --- RESPONSIVE ADJUSTMENTS --- *\/\n    @media (max-width: 1024px) {\n        .elp-stats-grid {\n            grid-template-columns: repeat(2, 1fr);\n        }\n        .elp-stat-number { font-size: 3rem; }\n        .elp-stat-plus { font-size: 2.2rem; }\n    }\n\n    @media (max-width: 600px) {\n        .elp-stats-wow-section { padding: 60px 5%; }\n        .elp-stats-grid {\n            grid-template-columns: 1fr;\n            gap: 20px;\n        }\n        .elp-stat-card {\n            padding: 30px 20px;\n        }\n    }\n<\/style>\n\n<section class=\"elp-stats-wow-section\">\n    <!-- Ambient Light Orbs -->\n    <div class=\"elp-stats-glow-left\"><\/div>\n    <div class=\"elp-stats-glow-right\"><\/div>\n\n    <div class=\"elp-stats-grid\">\n        \n        <!-- Stat 1: Scholars (Graduation Cap) -->\n        <div class=\"elp-stat-card\">\n            <div class=\"elp-stat-icon\">\n                <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M22 10v6M2 10l10-5 10 5-10 5z\"\/>\n                    <path d=\"M6 12v5c3 3 9 3 12 0v-5\"\/>\n                <\/svg>\n            <\/div>\n            <div class=\"elp-stat-number-wrapper\">\n                <span class=\"elp-stat-number elp-counter\" data-target=\"600\">0<\/span>\n                <span class=\"elp-stat-plus\">+<\/span>\n            <\/div>\n            <p class=\"elp-stat-label\">Scholars Enrolled<\/p>\n        <\/div>\n\n        <!-- Stat 2: Mentors (Network \/ Users) -->\n        <div class=\"elp-stat-card\">\n            <div class=\"elp-stat-icon\">\n                <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"\/>\n                    <circle cx=\"9\" cy=\"7\" r=\"4\"\/>\n                    <path d=\"M22 21v-2a4 4 0 0 0-3-3.87\"\/>\n                    <path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/>\n                <\/svg>\n            <\/div>\n            <div class=\"elp-stat-number-wrapper\">\n                <span class=\"elp-stat-number elp-counter\" data-target=\"385\">0<\/span>\n                <span class=\"elp-stat-plus\">+<\/span>\n            <\/div>\n            <p class=\"elp-stat-label\">Industry Mentors<\/p>\n        <\/div>\n\n        <!-- Stat 3: Panelists (Compass \/ Pathways) -->\n        <div class=\"elp-stat-card\">\n            <div class=\"elp-stat-icon\">\n                <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\n                    <polygon points=\"16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76\"\/>\n                <\/svg>\n            <\/div>\n            <div class=\"elp-stat-number-wrapper\">\n                <span class=\"elp-stat-number elp-counter\" data-target=\"100\">0<\/span>\n                <span class=\"elp-stat-plus\">+<\/span>\n            <\/div>\n            <p class=\"elp-stat-label\">Panelists Covering<br>8 Career Pathways<\/p>\n        <\/div>\n\n        <!-- Stat 4: Hours (Stopwatch) -->\n        <div class=\"elp-stat-card\">\n            <div class=\"elp-stat-icon\">\n                <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <circle cx=\"12\" cy=\"13\" r=\"8\"\/>\n                    <path d=\"M12 9v4l2 2\"\/>\n                    <path d=\"M10 2h4\"\/>\n                    <path d=\"M18.4 5.6l-1.4 1.4\"\/>\n                <\/svg>\n            <\/div>\n            <div class=\"elp-stat-number-wrapper\">\n                <span class=\"elp-stat-number elp-counter\" data-target=\"812\">0<\/span>\n                <span class=\"elp-stat-plus\">+<\/span>\n            <\/div>\n            <p class=\"elp-stat-label\">Programming Hours<br>Completed<\/p>\n        <\/div>\n\n    <\/div>\n<\/section>\n\n<script>\n    document.addEventListener('DOMContentLoaded', () => {\n        const counters = document.querySelectorAll('.elp-counter');\n        const speed = 100; \/\/ The lower the slower the count animation\n\n        const animateCounters = () => {\n            counters.forEach(counter => {\n                const updateCount = () => {\n                    const target = +counter.getAttribute('data-target');\n                    const count = +counter.innerText;\n\n                    \/\/ Calculate the increment dynamically based on the target\n                    const inc = target \/ speed;\n\n                    \/\/ If count is less than target, keep adding\n                    if (count < target) {\n                        counter.innerText = Math.ceil(count + inc);\n                        setTimeout(updateCount, 15);\n                    } else {\n                        \/\/ Once reached, force it to the exact target string\n                        counter.innerText = target;\n                    }\n                };\n                updateCount();\n            });\n        };\n\n        \/\/ Use Intersection Observer to only trigger the animation when user scrolls to it\n        const observerOptions = {\n            threshold: 0.5 \/\/ Trigger when 50% of the section is visible\n        };\n\n        const observer = new IntersectionObserver((entries) => {\n            entries.forEach(entry => {\n                if (entry.isIntersecting) {\n                    animateCounters();\n                    observer.unobserve(entry.target); \/\/ Only animate once\n                }\n            });\n        }, observerOptions);\n\n        const statsSection = document.querySelector('.elp-stats-wow-section');\n        if (statsSection) {\n            observer.observe(statsSection);\n        }\n    });\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1b82cb2 e-con-full e-flex e-con e-parent\" data-id=\"1b82cb2\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-521400a elementor-widget elementor-widget-html\" data-id=\"521400a\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n    \/* --- BRAND COLORS & VARIABLES --- *\/\n    :root {\n        --teal: #31C0C8;\n        --orange: #f68b36;\n        --navy: #1A2B3C;\n        --bg-light: #EFF3F8;\n    }\n\n    \/* 1. SECTION WRAPPER *\/\n    .elp-gi-section {\n        padding: 100px 5%;\n        background-color: #ffffff; \/* Clean white to contrast with surrounding sections *\/\n        font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\n        overflow: hidden;\n    }\n\n    .elp-gi-container {\n        max-width: 1250px;\n        margin: 0 auto;\n        display: flex;\n        align-items: center;\n        gap: 80px;\n    }\n\n    \/* 2. IMAGE COLUMN (Left Side) *\/\n    .elp-gi-image-col {\n        flex: 1;\n        position: relative;\n        \/* Slight entrance animation *\/\n        opacity: 0;\n        animation: fadeRight 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n    }\n\n    @keyframes fadeRight {\n        from { opacity: 0; transform: translateX(-40px); }\n        to { opacity: 1; transform: translateX(0); }\n    }\n\n    .elp-gi-image-wrapper {\n        position: relative;\n        z-index: 2;\n        border-radius: 20px;\n        overflow: hidden;\n        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);\n    }\n\n    .elp-gi-image-wrapper img {\n        width: 100%;\n        height: auto;\n        display: block;\n        transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);\n    }\n\n    \/* Offset decorative border *\/\n    .elp-gi-image-col::after {\n        content: '';\n        position: absolute;\n        top: -20px;\n        left: -20px;\n        width: 100%;\n        height: 100%;\n        border: 4px solid var(--orange);\n        border-radius: 20px;\n        z-index: 1;\n        transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);\n    }\n\n    \/* Image Hover Effect *\/\n    .elp-gi-image-col:hover .elp-gi-image-wrapper img {\n        transform: scale(1.05);\n    }\n    .elp-gi-image-col:hover::after {\n        transform: translate(10px, 10px);\n        border-color: var(--teal);\n    }\n\n    \/* 3. CONTENT COLUMN (Right Side) *\/\n    .elp-gi-content-col {\n        flex: 1;\n        opacity: 0;\n        animation: fadeLeft 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n        animation-delay: 0.2s;\n    }\n\n    @keyframes fadeLeft {\n        from { opacity: 0; transform: translateX(40px); }\n        to { opacity: 1; transform: translateX(0); }\n    }\n\n    .elp-gi-content-col h2 {\n        font-size: clamp(2.5rem, 4vw, 3.5rem);\n        font-weight: 800;\n        color: var(--navy);\n        margin-bottom: 40px;\n        line-height: 1.1;\n        letter-spacing: -0.5px;\n    }\n\n    .elp-gi-content-col h2 span {\n        color: var(--orange);\n    }\n\n    \/* Interactive List Items *\/\n    .elp-gi-item {\n        display: flex;\n        gap: 25px;\n        align-items: flex-start;\n        margin-bottom: 25px;\n        padding: 25px;\n        border-radius: 16px;\n        background: transparent;\n        border: 1px solid transparent;\n        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);\n    }\n\n    .elp-gi-item:hover {\n        background: var(--bg-light);\n        border-color: rgba(49, 192, 200, 0.3); \/* Soft teal border *\/\n        transform: translateX(10px);\n        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);\n    }\n\n    \/* Premium Line-Art Icons *\/\n    .elp-gi-icon {\n        flex-shrink: 0;\n        width: 60px;\n        height: 60px;\n        background: rgba(49, 192, 200, 0.1);\n        border-radius: 50%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        color: var(--teal);\n        transition: all 0.4s ease;\n    }\n\n    .elp-gi-item:hover .elp-gi-icon {\n        background: var(--teal);\n        color: #fff;\n        transform: scale(1.1) rotate(-5deg);\n        box-shadow: 0 8px 20px rgba(49, 192, 200, 0.3);\n    }\n\n    .elp-gi-icon svg {\n        width: 28px;\n        height: 28px;\n        fill: none;\n        stroke: currentColor;\n        stroke-width: 1.5;\n        stroke-linecap: round;\n        stroke-linejoin: round;\n    }\n\n    \/* Text Formatting *\/\n    .elp-gi-text h3 {\n        font-size: 1.4rem;\n        font-weight: 700;\n        color: var(--navy);\n        margin: 0 0 10px 0;\n        letter-spacing: 0.2px;\n    }\n\n    .elp-gi-text p {\n        font-size: 1.05rem;\n        line-height: 1.6;\n        color: #4A5A6A;\n        margin: 0;\n    }\n\n    \/* 4. CALL TO ACTION BUTTON *\/\n    .elp-gi-btn {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        padding: 14px 36px;\n        background: linear-gradient(135deg, var(--teal), #25a4ab);\n        color: #ffffff !important;\n        font-weight: 700;\n        font-size: 1rem;\n        text-transform: uppercase;\n        letter-spacing: 1px;\n        border-radius: 50px;\n        text-decoration: none !important;\n        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);\n        box-shadow: 0 8px 20px rgba(49, 192, 200, 0.3);\n        margin-top: 20px;\n        margin-left: 25px; \/* Aligns visually with the text blocks *\/\n    }\n\n    .elp-gi-btn:hover {\n        transform: translateY(-4px);\n        box-shadow: 0 12px 25px rgba(49, 192, 200, 0.5);\n    }\n\n    \/* --- RESPONSIVE LAYOUT --- *\/\n    @media (max-width: 1024px) {\n        .elp-gi-container {\n            flex-direction: column;\n            gap: 60px;\n        }\n        .elp-gi-image-col {\n            width: 100%;\n            max-width: 700px;\n            margin: 0 auto;\n        }\n        .elp-gi-content-col {\n            width: 100%;\n        }\n        .elp-gi-btn {\n            margin-left: 0;\n        }\n        .elp-gi-content-col h2 {\n            text-align: center;\n        }\n        .elp-gi-item {\n            padding: 20px;\n        }\n    }\n\n    @media (max-width: 600px) {\n        .elp-gi-section {\n            padding: 80px 5%;\n        }\n        .elp-gi-item {\n            flex-direction: column;\n            gap: 15px;\n            padding: 20px 15px;\n        }\n        .elp-gi-item:hover {\n            transform: translateY(-5px); \/* Lift up instead of slide right on mobile *\/\n        }\n        .elp-gi-btn {\n            width: 100%;\n        }\n        .elp-gi-image-col::after {\n            top: -10px;\n            left: -10px;\n        }\n    }\n<\/style>\n\n<section class=\"elp-gi-section\">\n    <div class=\"elp-gi-container\">\n        \n        <!-- Left Image Column -->\n        <div class=\"elp-gi-image-col\">\n            <div class=\"elp-gi-image-wrapper\">\n                <img decoding=\"async\" src=\"https:\/\/brave-solomon.64-23-132-27.plesk.page\/wp-content\/uploads\/2026\/01\/20230504_elpbx_127-scaled.jpg\" alt=\"ELP Scholars and Mentors\">\n            <\/div>\n        <\/div>\n\n        <!-- Right Content Column -->\n        <div class=\"elp-gi-content-col\">\n            <h2>Get <span>Involved<\/span><\/h2>\n\n            <!-- Students Card -->\n            <div class=\"elp-gi-item\">\n                <div class=\"elp-gi-icon\">\n                    <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                        <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"\/>\n                        <circle cx=\"12\" cy=\"7\" r=\"4\"\/>\n                    <\/svg>\n                <\/div>\n                <div class=\"elp-gi-text\">\n                    <h3>Students<\/h3>\n                    <p>Our program is for Bronx high school students who are serious about their future. When you join ELP, you don't just get advice\u2014you get a community.<\/p>\n                <\/div>\n            <\/div>\n\n            <!-- Professionals Card -->\n            <div class=\"elp-gi-item\">\n                <div class=\"elp-gi-icon\">\n                    <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                        <rect x=\"2\" y=\"7\" width=\"20\" height=\"14\" rx=\"2\" ry=\"2\"\/>\n                        <path d=\"M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16\"\/>\n                    <\/svg>\n                <\/div>\n                <div class=\"elp-gi-text\">\n                    <h3>Professionals & Supporters<\/h3>\n                    <p>Our work is only possible with the support of dedicated professionals and partners who believe in Bronx talent. This is your chance to make a direct, lasting impact on a student's life.<\/p>\n                <\/div>\n            <\/div>\n\n            <!-- Call to Action Button -->\n            <a href=\"https:\/\/brave-solomon.64-23-132-27.plesk.page\/index.php\/get-involved\/\" class=\"elp-gi-btn\">Learn More<\/a>\n\n        <\/div>\n\n    <\/div>\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a9b7b05 e-con-full e-flex e-con e-parent\" data-id=\"a9b7b05\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a25b0c5 elementor-widget elementor-widget-html\" data-id=\"a25b0c5\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n    \/* --- BRAND COLORS & VARIABLES --- *\/\n    :root {\n        --teal: #31C0C8;\n        --orange: #f68b36;\n        --navy: #1A2B3C;\n        --bg-light: #EFF3F8;\n    }\n\n    \/* 1. SECTION WRAPPER *\/\n    .elp-testi-section {\n        padding: 100px 5%;\n        background-color: var(--bg-light); \/* Soft background to separate from white sections *\/\n        font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\n        overflow: hidden;\n        position: relative;\n    }\n\n    .elp-testi-container {\n        max-width: 1250px;\n        margin: 0 auto;\n        display: flex;\n        align-items: center;\n        gap: 80px;\n    }\n\n    \/* 2. LEFT: FEATURE IMAGE *\/\n    .elp-testi-image-col {\n        flex: 1;\n        position: relative;\n        opacity: 0;\n        animation: fadeRight 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n    }\n\n    @keyframes fadeRight {\n        from { opacity: 0; transform: translateX(-40px); }\n        to { opacity: 1; transform: translateX(0); }\n    }\n\n    .elp-testi-img-wrapper {\n        position: relative;\n        z-index: 2;\n        border-radius: 20px;\n        overflow: hidden;\n        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);\n        aspect-ratio: 4\/5;\n    }\n\n    .elp-testi-img-wrapper img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        display: block;\n        transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);\n    }\n\n    .elp-testi-image-col:hover .elp-testi-img-wrapper img {\n        transform: scale(1.05);\n    }\n\n    \/* Offset decorative border *\/\n    .elp-testi-image-col::after {\n        content: '';\n        position: absolute;\n        top: 20px;\n        left: -20px;\n        width: 100%;\n        height: 100%;\n        border: 4px solid var(--teal);\n        border-radius: 20px;\n        z-index: 1;\n        transition: transform 0.5s ease;\n    }\n\n    .elp-testi-image-col:hover::after {\n        transform: translate(-10px, 10px);\n    }\n\n    \/* Floating Quote Badge *\/\n    .elp-quote-badge {\n        position: absolute;\n        top: -30px;\n        right: -30px;\n        width: 90px;\n        height: 90px;\n        background: rgba(255, 255, 255, 0.9);\n        backdrop-filter: blur(10px);\n        border-radius: 50%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        z-index: 3;\n        box-shadow: 0 15px 30px rgba(0,0,0,0.1);\n        color: var(--orange);\n    }\n\n    .elp-quote-badge svg {\n        width: 40px;\n        height: 40px;\n        fill: currentColor;\n    }\n\n    \/* 3. RIGHT: SLIDER CONTENT *\/\n    .elp-testi-content-col {\n        flex: 1.1;\n        position: relative;\n        opacity: 0;\n        animation: fadeLeft 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n        animation-delay: 0.2s;\n    }\n\n    @keyframes fadeLeft {\n        from { opacity: 0; transform: translateX(40px); }\n        to { opacity: 1; transform: translateX(0); }\n    }\n\n    .elp-testi-header {\n        font-size: clamp(2.5rem, 4vw, 3.5rem);\n        font-weight: 800;\n        color: var(--navy);\n        margin-bottom: 40px;\n        line-height: 1.1;\n        letter-spacing: -0.5px;\n    }\n\n    .elp-testi-header span {\n        color: var(--teal);\n    }\n\n    \/* The Slider Container *\/\n    .elp-slider-wrapper {\n        position: relative;\n        min-height: 350px; \/* Prevents layout jumping *\/\n    }\n\n    .elp-slide {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        opacity: 0;\n        visibility: hidden;\n        transform: translateY(20px);\n        transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);\n    }\n\n    .elp-slide.active {\n        opacity: 1;\n        visibility: visible;\n        transform: translateY(0);\n        position: relative;\n    }\n\n    \/* Quote Text *\/\n    .elp-slide-quote {\n        font-size: 1.25rem;\n        line-height: 1.7;\n        color: var(--navy);\n        font-style: italic;\n        margin-bottom: 35px;\n        position: relative;\n        z-index: 2;\n    }\n\n    \/* Large faint background quote mark *\/\n    .elp-slide-quote::before {\n        content: '\"';\n        position: absolute;\n        top: -40px;\n        left: -20px;\n        font-size: 6rem;\n        font-family: Georgia, serif;\n        color: rgba(49, 192, 200, 0.15);\n        z-index: -1;\n        line-height: 1;\n    }\n\n    \/* Author Info *\/\n    .elp-slide-author {\n        display: flex;\n        align-items: center;\n        gap: 20px;\n    }\n\n    .elp-slide-avatar {\n        width: 75px;\n        height: 75px;\n        border-radius: 50%;\n        object-fit: cover;\n        border: 3px solid var(--orange);\n        padding: 3px;\n        background: #fff;\n    }\n\n    .elp-slide-meta h4 {\n        margin: 0 0 5px 0;\n        font-size: 1.2rem;\n        font-weight: 800;\n        color: var(--navy);\n    }\n\n    .elp-slide-meta span {\n        display: block;\n        font-size: 0.95rem;\n        color: #4A5A6A;\n        font-weight: 500;\n        line-height: 1.4;\n    }\n\n    \/* 4. PROGRESS BAR CONTROLS *\/\n    .elp-slider-controls {\n        display: flex;\n        gap: 15px;\n        margin-top: 40px;\n    }\n\n    .elp-progress-bar {\n        flex: 1;\n        max-width: 100px;\n        height: 6px;\n        background: rgba(26, 43, 60, 0.1);\n        border-radius: 10px;\n        cursor: pointer;\n        position: relative;\n        overflow: hidden;\n    }\n\n    .elp-progress-fill {\n        position: absolute;\n        top: 0;\n        left: 0;\n        height: 100%;\n        width: 0%;\n        background: linear-gradient(90deg, var(--teal), var(--orange));\n        border-radius: 10px;\n    }\n\n    \/* When active, CSS animation fills the bar over 10 seconds *\/\n    .elp-progress-bar.active .elp-progress-fill {\n        animation: fillProgress 10s linear forwards;\n    }\n\n    @keyframes fillProgress {\n        from { width: 0%; }\n        to { width: 100%; }\n    }\n\n    \/* --- RESPONSIVE LAYOUT --- *\/\n    @media (max-width: 1024px) {\n        .elp-testi-container {\n            flex-direction: column;\n            gap: 60px;\n        }\n        .elp-testi-image-col {\n            width: 100%;\n            max-width: 600px;\n            margin: 0 auto;\n        }\n        .elp-testi-content-col {\n            width: 100%;\n        }\n        .elp-testi-header {\n            text-align: center;\n        }\n        .elp-slider-wrapper {\n            min-height: 250px;\n        }\n    }\n\n    @media (max-width: 600px) {\n        .elp-testi-section {\n            padding: 80px 5%;\n        }\n        .elp-slide-quote {\n            font-size: 1.1rem;\n        }\n        .elp-quote-badge {\n            width: 70px;\n            height: 70px;\n            top: -20px;\n            right: -10px;\n        }\n        .elp-quote-badge svg {\n            width: 30px;\n            height: 30px;\n        }\n        .elp-slide-author {\n            flex-direction: column;\n            text-align: center;\n            gap: 15px;\n        }\n        .elp-slider-controls {\n            justify-content: center;\n        }\n    }\n<\/style>\n\n<section class=\"elp-testi-section\">\n    <div class=\"elp-testi-container\">\n        \n        <!-- Left: Feature Image -->\n        <div class=\"elp-testi-image-col\">\n            <div class=\"elp-testi-img-wrapper\">\n                <img decoding=\"async\" src=\"https:\/\/brave-solomon.64-23-132-27.plesk.page\/wp-content\/uploads\/2025\/10\/download-13-scaled.jpg\" alt=\"ELP Scholars Gathering\">\n            <\/div>\n            <!-- Floating Geometric Quote Badge -->\n            <div class=\"elp-quote-badge\">\n                <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M14.017 18L14.017 21L21 21L21 14.017C21 8.991 17.514 5.419 13.565 4.398L12.593 6.643C15.347 7.234 17.766 9.429 17.766 14.017L14.017 14.017L14.017 18ZM3.017 18L3.017 21L10 21L10 14.017C10 8.991 6.514 5.419 2.565 4.398L1.593 6.643C4.347 7.234 6.766 9.429 6.766 14.017L3.017 14.017L3.017 18Z\"\/>\n                <\/svg>\n            <\/div>\n        <\/div>\n\n        <!-- Right: Testimonial Slider -->\n        <div class=\"elp-testi-content-col\">\n            <h2 class=\"elp-testi-header\">What our <span>Partners<\/span> Say<\/h2>\n            \n            <div class=\"elp-slider-wrapper\">\n                \n                <!-- Slide 1: George Gatch -->\n                <div class=\"elp-slide active\" id=\"elp-slide-0\">\n                    <p class=\"elp-slide-quote\">\n                        \"As a founding sponsor of ELP, J.P. Morgan Asset Management has had the opportunity to work with and build meaningful relationships with so many students over the years. Hopefully, they learn a lot from us. But importantly, we learn so much from them. They bring fresh perspectives, new ideas, and grit. The best is yet to come for the ELP scholars and J.P. Morgan is excited to be part of it!\"\n                    <\/p>\n                    <div class=\"elp-slide-author\">\n                        <img decoding=\"async\" src=\"https:\/\/brave-solomon.64-23-132-27.plesk.page\/wp-content\/uploads\/2025\/10\/download.png\" alt=\"George Gatch\" class=\"elp-slide-avatar\">\n                        <div class=\"elp-slide-meta\">\n                            <h4>George Gatch<\/h4>\n                            <span>Chief Executive Officer<br>J.P. Morgan Asset Management<\/span>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Slide 2: Albert Paez -->\n                <div class=\"elp-slide\" id=\"elp-slide-1\">\n                    <p class=\"elp-slide-quote\">\n                        \"I want students to know that ELP does open the door to many opportunities; 'hey you've never done an internship? This is the entryway for you.' If you see through this opportunity you will reap back significantly more in the long term.\"\n                    <\/p>\n                    <div class=\"elp-slide-author\">\n                        <img decoding=\"async\" src=\"https:\/\/brave-solomon.64-23-132-27.plesk.page\/wp-content\/uploads\/2025\/10\/Screenshot-2025-10-23-at-12.21.32-AM.png\" alt=\"Albert Paez\" class=\"elp-slide-avatar\">\n                        <div class=\"elp-slide-meta\">\n                            <h4>Albert Paez<\/h4>\n                            <span>Director of Work-Based Learning<br>Comp Sci High<\/span>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n            <\/div>\n\n            <!-- Progress Bar Controls -->\n            <div class=\"elp-slider-controls\">\n                <div class=\"elp-progress-bar active\" onclick=\"manualSlide(0)\">\n                    <div class=\"elp-progress-fill\"><\/div>\n                <\/div>\n                <div class=\"elp-progress-bar\" onclick=\"manualSlide(1)\">\n                    <div class=\"elp-progress-fill\"><\/div>\n                <\/div>\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n<\/section>\n\n<script>\n    document.addEventListener('DOMContentLoaded', () => {\n        const slides = document.querySelectorAll('.elp-slide');\n        const progressBars = document.querySelectorAll('.elp-progress-bar');\n        let currentSlide = 0;\n        let slideTimer;\n        const slideDuration = 10000; \/\/ 10 seconds per slide matches CSS animation\n\n        \/\/ Function to swap the active slide and reset animations\n        window.manualSlide = function(index) {\n            clearInterval(slideTimer); \/\/ Stop current timer\n\n            \/\/ Remove active classes\n            slides.forEach(slide => slide.classList.remove('active'));\n            progressBars.forEach(bar => {\n                bar.classList.remove('active');\n                \/\/ Force reflow to reset the CSS animation cleanly\n                void bar.offsetWidth; \n            });\n\n            \/\/ Set new active classes\n            currentSlide = index;\n            slides[currentSlide].classList.add('active');\n            progressBars[currentSlide].classList.add('active');\n\n            \/\/ Restart timer\n            startTimer();\n        }\n\n        function startTimer() {\n            slideTimer = setInterval(() => {\n                let nextSlide = (currentSlide + 1) % slides.length;\n                manualSlide(nextSlide);\n            }, slideDuration);\n        }\n\n        \/\/ Start the automatic slider when the page loads\n        startTimer();\n    });\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Scholars Today.Leaders Tomorrow. The Emerging Leaders Program is a Bronx-based workforce readiness program that exposes students to a variety of career options and paths while equipping them with the professional skills needed to help them thrive in the future. Too many young people have the potential to be the leaders of tomorrow, without access to [&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-145","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/brave-solomon.64-23-132-27.plesk.page\/index.php\/wp-json\/wp\/v2\/pages\/145","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/brave-solomon.64-23-132-27.plesk.page\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/brave-solomon.64-23-132-27.plesk.page\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/brave-solomon.64-23-132-27.plesk.page\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/brave-solomon.64-23-132-27.plesk.page\/index.php\/wp-json\/wp\/v2\/comments?post=145"}],"version-history":[{"count":175,"href":"https:\/\/brave-solomon.64-23-132-27.plesk.page\/index.php\/wp-json\/wp\/v2\/pages\/145\/revisions"}],"predecessor-version":[{"id":645,"href":"https:\/\/brave-solomon.64-23-132-27.plesk.page\/index.php\/wp-json\/wp\/v2\/pages\/145\/revisions\/645"}],"wp:attachment":[{"href":"https:\/\/brave-solomon.64-23-132-27.plesk.page\/index.php\/wp-json\/wp\/v2\/media?parent=145"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}