About BIFA \u2014 Global Sports Alliance<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\n<style>\n\/* ========= CSS VARIABLES - BIFA+ BRAND GUIDE - ISOLATED ========= *\/\n.about-section-wrapper {\n \/* Isolated CSS Variables - only for this section *\/\n --bifa-deep-navy: #0A1F44;\n --bifa-heritage-gold: #D4AF37;\n --bifa-civic-green: #1D6143;\n --bifa-bright-white: #FFFFFF;\n --bifa-soft-black: #1A1A1A;<\/p>\n<p> \/* Additional colors for better readability *\/\n --bifa-gray-light: #F8F9FA;\n --bifa-gray-medium: #E9ECEF;\n --bifa-gray: #6C757D;\n --bifa-gray-dark: #495057;<\/p>\n<p> \/* Official BIFA+ Fonts *\/\n --bifa-font-heading: 'Montserrat', sans-serif;\n --bifa-font-body: 'Poppins', sans-serif;<\/p>\n<p> \/* Premium shadows and effects *\/\n --bifa-shadow-sm: 0 2px 8px rgba(10, 31, 68, 0.08);\n --bifa-shadow-md: 0 8px 24px rgba(10, 31, 68, 0.12);\n --bifa-shadow-lg: 0 16px 48px rgba(10, 31, 68, 0.16);\n --bifa-shadow-xl: 0 25px 80px rgba(10, 31, 68, 0.15);\n --bifa-shadow-gold: 0 15px 40px rgba(212, 175, 55, 0.3);\n --bifa-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}<\/p>\n<p>\/* ========= RESET - ONLY FOR THIS SECTION ========= *\/\n.about-section-wrapper * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}<\/p>\n<p>\/* RESET ONLY APPLIES TO CONTENT INSIDE WRAPPER *\/\n.about-section-wrapper {\n font-family: var(--bifa-font-body);\n overflow-x: hidden;\n background: var(--bifa-bright-white);\n color: var(--bifa-soft-black);\n line-height: 1.6;\n}<\/p>\n<p>\/* DO NOT AFFECT ANYTHING OUTSIDE THE WRAPPER *\/<\/p>\n<p>\/* ========= MAIN WRAPPER - NO HEADER CONFLICTS ========= *\/\n.about-section-wrapper {\n width: 100vw;\n position: relative;\n left: 50%;\n margin-left: -50vw;\n background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 50%, #ffffff 100%);\n overflow: hidden;\n min-height: 100vh;\n}<\/p>\n<p>\/* Header connection line - gold glow *\/\n.about-section-wrapper::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 2px;\n background: linear-gradient(90deg, \n rgba(212, 175, 55, 0.3) 0%, \n rgba(212, 175, 55, 0.8) 50%, \n rgba(212, 175, 55, 0.3) 100%\n );\n box-shadow: \n 0 0 10px rgba(212, 175, 55, 0.4),\n 0 0 20px rgba(212, 175, 55, 0.2);\n z-index: 100;\n animation: goldPulse 3s ease-in-out infinite;\n}<\/p>\n<p>@keyframes goldPulse {\n 0%, 100% { opacity: 0.6; }\n 50% { opacity: 1; }\n}<\/p>\n<p>\/* Optimized Floating Particles *\/\n.bg-particles {\n position: absolute;\n width: 100%;\n height: 100%;\n overflow: hidden;\n z-index: 2;\n will-change: auto;\n pointer-events: none;\n}<\/p>\n<p>.particle {\n position: absolute;\n width: 4px;\n height: 4px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\n border-radius: 50%;\n animation: float 18s infinite linear;\n box-shadow: 0 0 12px rgba(212, 175, 55, 0.5);\n opacity: 0.4;\n will-change: transform;\n}<\/p>\n<p>@keyframes float {\n 0% {\n transform: translateY(100vh) translateX(0);\n opacity: 0;\n }\n 15% { opacity: 1; }\n 85% { opacity: 1; }\n 100% {\n transform: translateY(-100vh) translateX(30px);\n opacity: 0;\n }\n}<\/p>\n<p>\/* ========= HERO SECTION - NO CONFLICTS ========= *\/\n.hero-section {\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n padding: 80px 0; \/* Add padding instead of relying on container *\/\n background: linear-gradient(180deg, var(--bifa-bright-white) 0%, var(--bifa-gray-light) 100%);\n}<\/p>\n<p>.content-container {\n display: grid;\n grid-template-columns: 1fr 1fr;\n min-height: auto; \/* Remove fixed height *\/\n max-width: none; \/* Remove container limit for full width *\/\n width: 90%; \/* Use percentage instead of 100% *\/\n margin: 0 auto;\n gap: 0;\n position: relative;\n z-index: 10;\n}<\/p>\n<p>\/* ========= LEFT SIDE - CONTENT ========= *\/\n.content-side {\n padding: 80px 60px 60px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n background: rgba(255,255,255,0.98);\n backdrop-filter: blur(10px);\n position: relative;\n}<\/p>\n<p>.content-side::before {\n content: '';\n position: absolute;\n top: 10%;\n right: 0;\n width: 1px;\n height: 80%;\n background: linear-gradient(to bottom, transparent, rgba(212, 175, 55, 0.2), transparent);\n}<\/p>\n<p>\/* ISOLATED MAIN HEADING - NO GLOBAL IMPACT *\/\n.about-section-wrapper .main-heading {\n font-family: var(--bifa-font-heading);\n font-size: clamp(2.5rem, 4vw, 4rem);\n font-weight: 900;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n margin-bottom: 20px;\n line-height: 1.1;\n animation: aboutSlideInLeft 1.2s ease-out;\n letter-spacing: -0.02em;\n position: relative;\n z-index: 1;\n}<\/p>\n<p>\/* ISOLATED SUBTITLE *\/\n.about-section-wrapper .subtitle {\n font-family: var(--bifa-font-heading);\n font-size: clamp(1.1rem, 2vw, 1.4rem);\n color: var(--bifa-deep-navy);\n font-weight: 600;\n margin-bottom: 15px;\n letter-spacing: 0.5px;\n animation: aboutSlideInLeft 1.2s ease-out 0.2s both;\n}<\/p>\n<p>\/* ISOLATED HIGHLIGHT *\/\n.about-section-wrapper .highlight {\n font-weight: 700;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n position: relative;\n}<\/p>\n<p>\/* ISOLATED SLOGAN STYLES - NO GLOBAL IMPACT *\/\n.about-section-wrapper .slogan {\n font-family: var(--bifa-font-heading);\n font-size: clamp(1.2rem, 2.2vw, 1.6rem);\n font-weight: 700;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n margin-bottom: 25px;\n font-style: italic;\n animation: aboutSlideInLeft 1.2s ease-out 0.4s both;\n position: relative;\n z-index: 1;\n display: block;\n width: 100%;\n text-align: left;\n}<\/p>\n<p>\/* ISOLATED ANIMATION - DIFFERENT NAME *\/\n@keyframes aboutSlideInLeft {\n from {\n opacity: 0;\n transform: translateX(-50px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}<\/p>\n<p>\/* Protection - ONLY FOR ABOUT SECTION *\/\n.about-section-wrapper .hero-section .content-side .slogan {\n color: transparent !important;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold)) !important;\n -webkit-background-clip: text !important;\n background-clip: text !important;\n font-weight: 700 !important;\n font-style: italic !important;\n position: relative !important;\n transform: none !important;\n opacity: 1 !important;\n display: block !important;\n width: auto !important;\n height: auto !important;\n}<\/p>\n<p>\/* Fallback for browsers without background-clip support - ISOLATED *\/\n@supports not (background-clip: text) {\n .about-section-wrapper .slogan,\n .about-section-wrapper .hero-section .content-side .slogan {\n color: var(--bifa-heritage-gold) !important;\n background: none !important;\n position: relative !important;\n transform: none !important;\n opacity: 1 !important;\n }<\/p>\n<p> .about-section-wrapper .highlight {\n color: var(--bifa-heritage-gold) !important;\n background: none !important;\n }<\/p>\n<p> .about-section-wrapper .stat-number {\n color: var(--bifa-heritage-gold) !important;\n background: none !important;\n }<\/p>\n<p> .about-section-wrapper .main-heading {\n color: var(--bifa-heritage-gold) !important;\n background: none !important;\n }\n}<\/p>\n<p>.description {\n font-family: var(--bifa-font-body);\n font-size: clamp(1rem, 1.4vw, 1.1rem);\n line-height: 1.8;\n color: var(--bifa-soft-black);\n margin-bottom: 40px;\n animation: slideInLeft 1.2s ease-out 0.6s both;\n font-weight: 400;\n}<\/p>\n<p>.highlight {\n font-weight: 700;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n position: relative;\n}<\/p>\n<p>\/* Fallback for highlight *\/\n@supports not (background-clip: text) {\n .highlight {\n color: var(--bifa-heritage-gold);\n background: none;\n }\n}<\/p>\n<p>\/* Stats Cards *\/\n.stats-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 20px;\n margin-bottom: 40px;\n animation: slideInLeft 1.2s ease-out 0.8s both;\n}<\/p>\n<p>.stat-card {\n background: var(--bifa-bright-white);\n padding: 25px 20px;\n border-radius: 20px;\n text-align: center;\n backdrop-filter: blur(10px);\n border: 2px solid rgba(212, 175, 55, 0.15);\n transition: var(--bifa-transition);\n position: relative;\n overflow: hidden;\n box-shadow: var(--bifa-shadow-sm);\n}<\/p>\n<p>.stat-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 3px;\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent);\n transition: left 0.6s ease;\n}<\/p>\n<p>.stat-card:hover::before {\n left: 100%;\n}<\/p>\n<p>.stat-card:hover {\n transform: translateY(-8px);\n box-shadow: var(--bifa-shadow-gold);\n border-color: rgba(212, 175, 55, 0.3);\n}<\/p>\n<p>.stat-number {\n font-family: var(--bifa-font-heading);\n font-size: 2.5rem;\n font-weight: 900;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n margin-bottom: 8px;\n text-shadow: 0 2px 10px rgba(212, 175, 55, 0.2);\n}<\/p>\n<p>\/* Fallback for stat numbers *\/\n@supports not (background-clip: text) {\n .stat-number {\n color: var(--bifa-heritage-gold);\n background: none;\n }\n}<\/p>\n<p>.stat-label {\n font-family: var(--bifa-font-heading);\n font-size: 0.8rem;\n font-weight: 600;\n letter-spacing: 0.5px;\n text-transform: uppercase;\n color: var(--bifa-deep-navy);\n}<\/p>\n<p>\/* Action Buttons *\/\n.action-buttons {\n display: flex;\n flex-direction: column;\n gap: 15px;\n animation: slideInLeft 1.2s ease-out 1s both;\n}<\/p>\n<p>.cta-button {\n padding: 18px 35px;\n font-family: var(--bifa-font-heading);\n font-size: 0.95rem;\n font-weight: 700;\n text-transform: uppercase;\n border-radius: 50px;\n text-decoration: none;\n position: relative;\n overflow: hidden;\n transition: var(--bifa-transition);\n letter-spacing: 1px;\n color: var(--bifa-bright-white);\n text-align: center;\n border: 2px solid transparent;\n}<\/p>\n<p>.cta-button.primary {\n background: linear-gradient(135deg, var(--bifa-heritage-gold) 0%, var(--bifa-heritage-gold) 100%);\n box-shadow: var(--bifa-shadow-gold);\n color: var(--bifa-deep-navy);\n font-weight: 800;\n}<\/p>\n<p>.cta-button.secondary {\n background: linear-gradient(135deg, var(--bifa-deep-navy) 0%, var(--bifa-deep-navy) 100%);\n color: var(--bifa-bright-white);\n font-weight: 700;\n box-shadow: 0 10px 30px rgba(10, 31, 68, 0.3);\n}<\/p>\n<p>.cta-button::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0;\n height: 0;\n border-radius: 50%;\n background: rgba(255, 255, 255, 0.3);\n transform: translate(-50%, -50%);\n transition: all 0.6s ease;\n}<\/p>\n<p>.cta-button:hover {\n transform: translateY(-3px);\n}<\/p>\n<p>.cta-button:hover::before {\n width: 300px;\n height: 300px;\n}<\/p>\n<p>\/* ========= RIGHT SIDE - VIDEO ========= *\/\n.video-side {\n padding: 80px 60px 60px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n background: rgba(250,251,252,0.5);\n position: relative;\n}<\/p>\n<p>\/* Section Title for Video Side *\/\n.video-section-title {\n font-family: var(--bifa-font-heading);\n font-size: clamp(2rem, 3vw, 2.5rem);\n font-weight: 800;\n color: var(--bifa-deep-navy);\n margin-bottom: 30px;\n text-align: center;\n animation: slideInRight 1.2s ease-out;\n}<\/p>\n<p>.video-section-subtitle {\n font-family: var(--bifa-font-body);\n font-size: clamp(0.9rem, 1.2vw, 1.1rem);\n color: var(--bifa-soft-black);\n text-align: center;\n margin-bottom: 30px;\n animation: slideInRight 1.2s ease-out 0.2s both;\n font-weight: 400;\n}<\/p>\n<p>.video-wrapper {\n position: relative;\n width: 100%;\n padding-bottom: 56.25%;\n border-radius: 25px;\n background: linear-gradient(135deg, #fafbfc 0%, var(--bifa-bright-white) 100%);\n overflow: hidden;\n box-shadow: \n 0 25px 60px rgba(10, 31, 68, 0.1),\n 0 0 0 1px rgba(212, 175, 55, 0.15),\n inset 0 1px 0 rgba(255, 255, 255, 0.2);\n transition: var(--bifa-transition);\n animation: slideInRight 1.2s ease-out 0.4s both;\n}<\/p>\n<p>@keyframes slideInRight {\n from {\n opacity: 0;\n transform: translateX(50px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}<\/p>\n<p>\/* ========= LOADING SCREEN OVERLAY ========= *\/\n.video-loading-overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(135deg, var(--bifa-bright-white) 0%, #fafbfc 100%);\n border-radius: 25px;\n z-index: 100;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: opacity 0.8s ease, visibility 0.8s ease;\n overflow: hidden;\n}<\/p>\n<p>.video-loading-overlay.hidden {\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n}<\/p>\n<p>.loading-iframe {\n width: 100%;\n height: 100%;\n border: none;\n border-radius: 25px;\n background: transparent;\n}<\/p>\n<p>\/* Fallback loading animation if iframe fails *\/\n.fallback-loader {\n display: none;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n background: linear-gradient(135deg, var(--bifa-bright-white) 0%, #fafbfc 100%);\n}<\/p>\n<p>.fallback-loader.active {\n display: flex;\n}<\/p>\n<p>.loader-logo {\n width: 120px;\n height: 120px;\n margin-bottom: 30px;\n animation: logoSpin 2s ease-in-out infinite;\n}<\/p>\n<p>@keyframes logoSpin {\n 0%, 100% {\n transform: scale(1) rotate(0deg);\n }\n 50% {\n transform: scale(1.1) rotate(180deg);\n }\n}<\/p>\n<p>.loader-text {\n font-family: var(--bifa-font-heading);\n font-size: 24px;\n font-weight: 700;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n text-align: center;\n margin-bottom: 20px;\n}<\/p>\n<p>\/* Fallback for loader text *\/\n@supports not (background-clip: text) {\n .loader-text {\n color: var(--bifa-heritage-gold);\n background: none;\n }\n}<\/p>\n<p>.loader-progress {\n width: 200px;\n height: 6px;\n background: rgba(212, 175, 55, 0.2);\n border-radius: 3px;\n overflow: hidden;\n box-shadow: 0 2px 10px rgba(212, 175, 55, 0.1);\n}<\/p>\n<p>.loader-progress-bar {\n width: 0%;\n height: 100%;\n background: linear-gradient(90deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\n border-radius: 3px;\n animation: loadingProgress 3s ease-in-out infinite;\n box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);\n}<\/p>\n<p>@keyframes loadingProgress {\n 0% { width: 0%; }\n 50% { width: 70%; }\n 100% { width: 100%; }\n}<\/p>\n<p>.video-wrapper:hover {\n transform: translateY(-10px);\n box-shadow: \n 0 40px 100px rgba(212, 175, 55, 0.15),\n 0 0 0 2px rgba(212, 175, 55, 0.3),\n inset 0 1px 0 rgba(255, 255, 255, 0.2);\n}<\/p>\n<p>.video-wrapper video {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n}<\/p>\n<p>\/* Enhanced Controls *\/\n.controls {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n background: linear-gradient(to top, rgba(10,31,68,0.8) 0%, rgba(10,31,68,0.4) 50%, transparent 100%);\n padding: 25px 20px 15px;\n opacity: 0;\n visibility: hidden;\n transform: translateY(10px);\n transition: all 0.3s ease;\n z-index: 20;\n}<\/p>\n<p>.video-wrapper:hover .controls {\n opacity: 1;\n visibility: visible;\n transform: translateY(0);\n}<\/p>\n<p>.controls-row {\n display: flex;\n align-items: center;\n gap: 15px;\n margin-bottom: 10px;\n}<\/p>\n<p>.ctrl-btn {\n background: rgba(255, 255, 255, 0.9);\n border: none;\n width: 48px;\n height: 48px;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n backdrop-filter: blur(10px);\n transition: all 0.2s ease;\n position: relative;\n}<\/p>\n<p>.ctrl-btn svg {\n width: 24px;\n height: 24px;\n fill: var(--bifa-deep-navy);\n pointer-events: none;\n}<\/p>\n<p>.ctrl-btn:hover {\n transform: scale(1.1);\n background: rgba(212, 175, 55, 0.9);\n}<\/p>\n<p>.progress-container {\n flex: 1;\n margin: 0 15px;\n}<\/p>\n<p>.progress {\n width: 100%;\n height: 8px;\n background: rgba(255, 255, 255, 0.3);\n border-radius: 4px;\n cursor: pointer;\n overflow: hidden;\n position: relative;\n}<\/p>\n<p>.progress-bar {\n width: 0;\n height: 100%;\n background: linear-gradient(90deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\n transition: width 0.1s linear;\n border-radius: 4px;\n position: relative;\n}<\/p>\n<p>.progress-bar::after {\n content: '';\n position: absolute;\n right: -6px;\n top: 50%;\n transform: translateY(-50%);\n width: 12px;\n height: 12px;\n background: var(--bifa-heritage-gold);\n border-radius: 50%;\n box-shadow: 0 0 10px rgba(212, 175, 55, 0.6);\n}<\/p>\n<p>.time-display {\n color: var(--bifa-bright-white);\n font-size: 14px;\n font-weight: 600;\n font-family: var(--bifa-font-heading);\n text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);\n min-width: 60px;\n text-align: center;\n}<\/p>\n<p>.volume-container {\n display: flex;\n align-items: center;\n gap: 10px;\n}<\/p>\n<p>.volume-slider {\n width: 80px;\n height: 4px;\n background: rgba(255, 255, 255, 0.3);\n border-radius: 2px;\n cursor: pointer;\n position: relative;\n}<\/p>\n<p>.volume-bar {\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\n border-radius: 2px;\n transition: width 0.1s linear;\n}<\/p>\n<p>.fullscreen-btn {\n background: rgba(255, 255, 255, 0.9);\n border: none;\n width: 48px;\n height: 48px;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n backdrop-filter: blur(10px);\n transition: all 0.2s ease;\n}<\/p>\n<p>.fullscreen-btn:hover {\n transform: scale(1.1);\n background: rgba(212, 175, 55, 0.9);\n}<\/p>\n<p>\/* Video Info *\/\n.video-info {\n margin-top: 30px;\n animation: slideInRight 1.2s ease-out 0.6s both;\n}<\/p>\n<p>.video-title {\n font-family: var(--bifa-font-heading);\n font-size: clamp(1.3rem, 2vw, 1.8rem);\n font-weight: 800;\n color: var(--bifa-deep-navy);\n margin-bottom: 15px;\n}<\/p>\n<p>.member-countries {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n}<\/p>\n<p>.country-tag {\n background: var(--bifa-bright-white);\n padding: 10px 18px;\n border-radius: 25px;\n font-family: var(--bifa-font-heading);\n font-size: 0.85rem;\n font-weight: 600;\n color: var(--bifa-deep-navy);\n border: 2px solid rgba(212, 175, 55, 0.3);\n transition: var(--bifa-transition);\n box-shadow: 0 4px 15px rgba(10, 31, 68, 0.05);\n}<\/p>\n<p>.country-tag:hover {\n background: linear-gradient(135deg, var(--bifa-heritage-gold) 0%, var(--bifa-heritage-gold) 100%);\n color: var(--bifa-deep-navy);\n transform: translateY(-3px);\n box-shadow: var(--bifa-shadow-gold);\n border-color: transparent;\n}<\/p>\n<p>@keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>\/* ========= RESPONSIVE DESIGN - DESKTOP CONSISTENT, MOBILE OPTIMIZED ========= *\/<\/p>\n<p>\/* Keep desktop and laptop layouts identical - NO CONFLICTS *\/\n@media (min-width: 769px) {\n .about-section-wrapper .hero-section {\n padding: 80px 0;\n }<\/p>\n<p> .about-section-wrapper .content-container {\n grid-template-columns: 1fr 1fr;\n grid-template-rows: none;\n min-height: auto;\n width: 90%;\n max-width: 1600px;\n }<\/p>\n<p> .about-section-wrapper .content-side,\n .about-section-wrapper .video-side {\n padding: 80px 60px 60px;\n min-height: auto;\n }<\/p>\n<p> .about-section-wrapper .content-side {\n order: 0;\n }<\/p>\n<p> .about-section-wrapper .video-side {\n order: 0;\n }<\/p>\n<p> .about-section-wrapper .content-side::before {\n display: block;\n }<\/p>\n<p> .about-section-wrapper .stats-grid {\n grid-template-columns: repeat(2, 1fr);\n gap: 20px;\n }\n}<\/p>\n<p>\/* Large Desktop - controlled expansion *\/\n@media (min-width: 1400px) {\n .about-section-wrapper .content-container {\n max-width: 1800px;\n width: 85%;\n }<\/p>\n<p> .about-section-wrapper .content-side,\n .about-section-wrapper .video-side {\n padding: 100px 120px 80px;\n }\n}<\/p>\n<p>\/* Ultra-wide screens - prevent over-expansion *\/\n@media (min-width: 2000px) {\n .about-section-wrapper .content-container {\n max-width: 2200px;\n width: 80%;\n }<\/p>\n<p> .about-section-wrapper .content-side,\n .about-section-wrapper .video-side {\n padding: 120px 200px 100px;\n }\n}<\/p>\n<p>\/* MOBILE AND TABLET - SINGLE COLUMN FOR ALL *\/\n@media (max-width: 768px) {\n .about-section-wrapper .hero-section {\n padding: 40px 0;\n min-height: auto;\n }<\/p>\n<p> .about-section-wrapper .content-container {\n grid-template-columns: 1fr !important; \/* FORCE SINGLE COLUMN *\/\n grid-template-rows: auto auto !important;\n min-height: auto !important;\n width: 95% !important;\n max-width: none !important;\n gap: 0 !important;\n }<\/p>\n<p> .about-section-wrapper .content-side,\n .about-section-wrapper .video-side {\n padding: 40px 20px !important;\n min-height: auto !important;\n width: 100% !important;\n }<\/p>\n<p> \/* Content first, video second *\/\n .about-section-wrapper .content-side {\n order: 1 !important;\n }<\/p>\n<p> .about-section-wrapper .video-side {\n order: 2 !important;\n }<\/p>\n<p> .about-section-wrapper .content-side::before {\n display: none !important;\n }<\/p>\n<p> .about-section-wrapper .stats-grid {\n grid-template-columns: repeat(2, 1fr) !important;\n gap: 15px !important;\n }<\/p>\n<p> .about-section-wrapper .action-buttons {\n gap: 12px;\n }<\/p>\n<p> .about-section-wrapper .cta-button {\n padding: 16px 30px;\n font-size: 0.9rem;\n }<\/p>\n<p> .about-section-wrapper .controls-row {\n gap: 10px;\n }<\/p>\n<p> .about-section-wrapper .ctrl-btn {\n width: 42px;\n height: 42px;\n }<\/p>\n<p> .about-section-wrapper .volume-container {\n display: none;\n }\n}<\/p>\n<p>\/* Tablet Layout - only for real tablets *\/\n@media (max-width: 768px) and (min-width: 481px) {\n .content-container {\n grid-template-columns: 1fr;\n grid-template-rows: auto auto;\n min-height: auto;\n }<\/p>\n<p> .content-side,\n .video-side {\n padding: 60px 40px;\n min-height: auto;\n }<\/p>\n<p> \/* Mobile priority - content first *\/\n .content-side {\n order: 1;\n }<\/p>\n<p> .video-side {\n order: 2;\n }<\/p>\n<p> .content-side::before {\n display: none;\n }<\/p>\n<p> .stats-grid {\n grid-template-columns: repeat(4, 1fr);\n gap: 15px;\n }<\/p>\n<p> .hero-section {\n min-height: auto;\n padding: 40px 0;\n }\n}<\/p>\n<p>\/* Mobile Layout *\/\n@media (max-width: 768px) {\n .content-side,\n .video-side {\n padding: 40px 20px;\n }<\/p>\n<p> .stats-grid {\n grid-template-columns: repeat(2, 1fr);\n gap: 15px;\n }<\/p>\n<p> .action-buttons {\n gap: 12px;\n }<\/p>\n<p> .cta-button {\n padding: 16px 30px;\n font-size: 0.9rem;\n }<\/p>\n<p> .controls-row {\n gap: 10px;\n }<\/p>\n<p> .ctrl-btn {\n width: 42px;\n height: 42px;\n }<\/p>\n<p> .volume-container {\n display: none;\n }<\/p>\n<p>}<\/p>\n<p>\/* Small Mobile *\/\n@media (max-width: 480px) {\n .content-side,\n .video-side {\n padding: 30px 15px;\n }<\/p>\n<p> .video-wrapper {\n border-radius: 15px;\n }<\/p>\n<p> .controls {\n padding: 20px 15px 10px;\n }<\/p>\n<p> .member-countries {\n gap: 8px;\n }<\/p>\n<p> .country-tag {\n font-size: 0.75rem;\n padding: 6px 12px;\n }<\/p>\n<p> .stat-card {\n padding: 20px 15px;\n }<\/p>\n<p> .stat-number {\n font-size: 2rem;\n }<\/p>\n<p> .stat-label {\n font-size: 0.7rem;\n }<\/p>\n<p>}<\/p>\n<p>\/* Extra Small Mobile *\/\n@media (max-width: 360px) {\n .stats-grid {\n grid-template-columns: 1fr 1fr;\n gap: 10px;\n }<\/p>\n<p> .stat-card {\n padding: 15px 10px;\n }<\/p>\n<p> .stat-number {\n font-size: 1.8rem;\n }<\/p>\n<p> .country-tag {\n font-size: 0.7rem;\n padding: 5px 10px;\n }\n}<\/p>\n<p>\/* Landscape Desktop\/Laptop - keep side-by-side layout *\/\n@media (min-width: 769px) and (orientation: landscape) {\n .content-container {\n grid-template-columns: 1fr 1fr;\n grid-template-rows: none;\n min-height: 100vh;\n }<\/p>\n<p> .content-side,\n .video-side {\n padding: 80px 60px 60px;\n min-height: auto;\n }\n}<\/p>\n<p>\/* High DPI Displays *\/\n@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {\n .particle {\n transform: translateZ(0);\n }<\/p>\n<p> .video-wrapper {\n will-change: transform;\n }\n}<\/p>\n<p>\/* Reduced Motion *\/\n@media (prefers-reduced-motion: reduce) {\n .particle {\n animation: none;\n }<\/p>\n<p> .main-heading,\n .subtitle,\n .slogan,\n .description,\n .stats-grid,\n .action-buttons,\n .video-section-title,\n .video-section-subtitle,\n .video-wrapper,\n .video-info,\n .see-mission-link {\n animation: none;\n }<\/p>\n<p> .stat-card:hover,\n .cta-button:hover,\n .video-wrapper:hover,\n .country-tag:hover,\n .see-mission-link a:hover {\n transform: none;\n }\n}<\/p>\n<p>\/* Print Styles *\/\n@media print {\n .bg-particles,\n .video-wrapper,\n .controls {\n display: none;\n }<\/p>\n<p> .hero-section {\n min-height: auto;\n background: white;\n }<\/p>\n<p> .content-container {\n grid-template-columns: 1fr;\n gap: 20px;\n }<\/p>\n<p> .content-side,\n .video-side {\n padding: 20px;\n background: white;\n }<\/p>\n<p> .main-heading,\n .slogan,\n .highlight,\n .stat-number {\n color: #D4AF37 !important;\n background: none !important;\n -webkit-print-color-adjust: exact;\n }\n}<\/p>\n<p>\/* ========= ACCESSIBILITY IMPROVEMENTS ========= *\/<\/p>\n<p>\/* Focus Styles *\/\n.cta-button:focus,\n.ctrl-btn:focus,\n.see-mission-link a:focus {\n outline: 3px solid var(--bifa-heritage-gold);\n outline-offset: 2px;\n}<\/p>\n<p>\/* Screen Reader Only *\/\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}<\/p>\n<p>\/* High Contrast Mode Support *\/\n@media (prefers-contrast: high) {\n .main-heading,\n .slogan,\n .highlight,\n .stat-number {\n color: var(--bifa-heritage-gold);\n background: none;\n -webkit-background-clip: initial;\n background-clip: initial;\n }<\/p>\n<p> .stat-card,\n .country-tag,\n .cta-button {\n border-width: 3px;\n }\n}<\/p>\n<p>\/* Dark Mode Support *\/\n@media (prefers-color-scheme: dark) {\n :root {\n --bifa-bright-white: #1a1a1a;\n --bifa-soft-black: #f8f9fa;\n --bifa-gray-light: #2a2a2a;\n --bifa-gray-medium: #3a3a3a;\n }<\/p>\n<p> .about-section-wrapper {\n background: #1a1a1a;\n }<\/p>\n<p> .hero-section {\n background: linear-gradient(180deg, #1a1a1a 0%, #2a2a2a 100%);\n }<\/p>\n<p> .content-side {\n background: rgba(26, 26, 26, 0.98);\n }<\/p>\n<p> .video-side {\n background: rgba(42, 42, 42, 0.5);\n }\n}\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"about-section-wrapper\">\n <\/p>\n<div class=\"bg-particles\"><\/div>\n<p> <\/p>\n<section class=\"hero-section\">\n<div class=\"content-container\">\n <\/p>\n<div class=\"content-side\">\n<h1 class=\"main-heading\">BIFA+ \u0915\u0947 \u092c\u093e\u0930\u0947 \u092e\u0947\u0902<\/h1>\n<p class=\"subtitle\">\u092c\u094d\u0930\u093f\u0915\u094d\u0938 \u0905\u0902\u0924\u0930\u094d\u0930\u093e\u0937\u094d\u091f\u094d\u0930\u0940\u092f \u092b\u0941\u091f\u092c\u0949\u0932 \u0917\u0920\u092c\u0902\u0927\u0928<\/p>\n<p class=\"slogan\">\u201c\u0906\u0924\u094d\u092e\u093e \u0915\u0947 \u0938\u093e\u0925 \u0916\u0947\u0932\u0947\u0902\u0964 \u0926\u0942\u0930\u0926\u0930\u094d\u0936\u093f\u0924\u093e \u0915\u0947 \u0938\u093e\u0925 \u0928\u0947\u0924\u0943\u0924\u094d\u0935 \u0915\u0930\u0947\u0902\u0964\u201d<\/p>\n<p class=\"description\">\n <span class=\"highlight\">\u092c\u0940\u0906\u0908\u090f\u092b\u090f+ (\u092c\u0940\u0906\u0908\u090f\u092b\u090f \u092a\u094d\u0932\u0938)<\/span> is an international sports and cultural initiative<br \/>\n that connects countries of the <span class=\"highlight\">\u0935\u0948\u0936\u094d\u0935\u093f\u0915 \u0926\u0915\u094d\u0937\u093f\u0923<\/span> through football,<br \/>\n education, technology, and people-to-people diplomacy. Founded by <span class=\"highlight\">\u0938\u0932\u0940\u092e \u0939\u0941\u092e\u0948\u0926 \u0905\u0932\u092e\u091c\u093c\u0948\u0928\u0940<\/span><br \/>\n \u0938\u0902\u092f\u0941\u0915\u094d\u0924 \u0905\u0930\u092c \u0905\u092e\u0940\u0930\u093e\u0924 \u0938\u0947, BIFA+ \u090f\u0915 \u0938\u093e\u0925 \u0932\u093e\u0924\u093e \u0939\u0948 <span class=\"highlight\">11 \u0930\u093e\u0937\u094d\u091f\u094d\u0930<\/span> in a visionary<br \/>\n non-profit alliance and professional operational platform designed to host events,<br \/>\n digital services, and youth development programs that shape a more unified and inclusive future.\n <\/p>\n<div class=\"stats-grid\">\n<div class=\"stat-card\">\n<div class=\"stat-number\">11<\/div>\n<div class=\"stat-label\">\u0938\u0926\u0938\u094d\u092f \u0930\u093e\u0937\u094d\u091f\u094d\u0930<\/div>\n<\/p><\/div>\n<div class=\"stat-card\">\n<div class=\"stat-number\">3.8\u092c\u0940<\/div>\n<div class=\"stat-label\">\u091c\u0928\u0938\u0902\u0916\u094d\u092f\u093e \u0938\u0902\u092f\u0941\u0915\u094d\u0924<\/div>\n<\/p><\/div>\n<div class=\"stat-card\">\n<div class=\"stat-number\">2024<\/div>\n<div class=\"stat-label\">\u0938\u094d\u0925\u093e\u092a\u093f\u0924<\/div>\n<\/p><\/div>\n<div class=\"stat-card\">\n<div class=\"stat-number\">8<\/div>\n<div class=\"stat-label\">\u092e\u0941\u0916\u094d\u092f \u0915\u093e\u0930\u094d\u092f\u0915\u094d\u0930\u092e<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"action-buttons\">\n <a href=\"#our-mission\" class=\"cta-button primary\" role=\"button\">\u0939\u092e\u093e\u0930\u093e \u092e\u093f\u0936\u0928 \u091c\u093e\u0928\u0947\u0902<\/a><br \/>\n <a href=\"\/initiatives\" class=\"cta-button secondary\" role=\"button\">\u092a\u0939\u0932\u094b\u0902 \u0915\u093e \u0905\u0928\u094d\u0935\u0947\u0937\u0923 \u0915\u0930\u0947\u0902<\/a>\n <\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"video-side\">\n<h2 class=\"video-section-title\">\u0916\u0947\u0932 \u0915\u0947 \u092e\u093e\u0927\u094d\u092f\u092e \u0938\u0947 \u0935\u0948\u0936\u094d\u0935\u093f\u0915 \u090f\u0915\u0924\u093e<\/h2>\n<p class=\"video-section-subtitle\">BIFA+ \u0915\u0947 \u0935\u093f\u091c\u093c\u0928 \u0915\u093e \u0905\u0928\u0941\u092d\u0935 \u0915\u0930\u0947\u0902 \u091c\u094b 11 \u0926\u0947\u0936\u094b\u0902 \u0914\u0930 3.8 \u092c\u093f\u0932\u093f\u092f\u0928 \u0932\u094b\u0917\u094b\u0902 \u0915\u094b \u091c\u094b\u0921\u093c\u0924\u093e \u0939\u0948<\/p>\n<div class=\"video-wrapper\">\n <\/p>\n<div class=\"video-loading-overlay\" id=\"videoLoadingOverlay\">\n <iframe \n id=\"loadingIframe\"\n class=\"loading-iframe\"\n src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Logo\/Get.html\"\n title=\"BIFA+ \u0932\u094b\u0921\u093f\u0902\u0917 \u0938\u094d\u0915\u094d\u0930\u0940\u0928\"\n onload=\"handleIframeLoad()\"\n onerror=\"handleIframeError()\"><br \/>\n <\/iframe><\/p>\n<p> <\/p>\n<div class=\"fallback-loader\" id=\"fallbackLoader\">\n<div class=\"loader-logo\">\n <svg viewbox=\"0 0 200 200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\n <defs>\n <lineargradient id=\"logoGradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n <stop offset=\"0%\" style=\"stop-color:#D4AF37\"\/>\n <stop offset=\"100%\" style=\"stop-color:#D4AF37\"\/>\n <\/lineargradient>\n <\/defs>\n <circle cx=\"100\" cy=\"100\" r=\"90\" fill=\"url(#logoGradient)\" opacity=\"0.1\"\/>\n <circle cx=\"100\" cy=\"100\" r=\"70\" fill=\"url(#logoGradient)\" opacity=\"0.3\"\/>\n <circle cx=\"100\" cy=\"100\" r=\"50\" fill=\"url(#logoGradient)\"\/>\n <text x=\"100\" y=\"110\" text-anchor=\"middle\" fill=\"white\" font-family=\"Montserrat\" font-size=\"24\" font-weight=\"bold\">BIFA+<\/text>\n <\/svg>\n <\/div>\n<div class=\"loader-text\">BIFA+ \u0905\u0928\u0941\u092d\u0935 \u0932\u094b\u0921 \u0939\u094b \u0930\u0939\u093e \u0939\u0948\u2026<\/div>\n<div class=\"loader-progress\">\n<div class=\"loader-progress-bar\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <video id=\"heroVideo\" autoplay muted loop playsinline preload=\"metadata\" \nposter=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/video_poster.jpg\"\n aria-label=\"BIFA+ \u092a\u094d\u0930\u091a\u093e\u0930 \u0935\u0940\u0921\u093f\u092f\u094b\"><source src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/video.mp4\" type=\"video\/mp4\"><span class=\"sr-only\">\u0906\u092a\u0915\u093e \u092c\u094d\u0930\u093e\u0909\u091c\u093c\u0930 \u092e\u0947\u0902 \u0935\u0940\u0921\u093f\u092f\u094b \u091f\u0948\u0917 \u0938\u092e\u0930\u094d\u0925\u093f\u0924 \u0928\u0939\u0940\u0902 \u0939\u0948\u0964<\/span><\/video><\/p>\n<p> <\/p>\n<div class=\"controls\" id=\"controls\" aria-label=\"\u0935\u0940\u0921\u093f\u092f\u094b \u0928\u093f\u092f\u0902\u0924\u094d\u0930\u0923\">\n<div class=\"controls-row\">\n <button class=\"ctrl-btn\" id=\"playPause\" aria-label=\"\u0935\u0940\u0921\u093f\u092f\u094b \u091a\u0932\u093e\u090f\u0901\/\u0930\u094b\u0915\u0947\u0902\"><br \/>\n <svg viewbox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M8 5v14l11-7z\"\/><\/svg><br \/>\n <\/button><\/p>\n<div class=\"progress-container\">\n<div class=\"progress\" id=\"progress\" role=\"progressbar\" aria-label=\"\u0935\u0940\u0921\u093f\u092f\u094b \u092a\u094d\u0930\u0917\u0924\u093f\">\n<div class=\"progress-bar\" id=\"progressBar\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"time-display\" id=\"timeDisplay\" aria-live=\"polite\">0:00<\/div>\n<div class=\"volume-container\">\n <button class=\"ctrl-btn\" id=\"muteToggle\" aria-label=\"\u0935\u0940\u0921\u093f\u092f\u094b \u092e\u094d\u092f\u0942\u091f\/\u0905\u0928\u092e\u094d\u092f\u0942\u091f \u0915\u0930\u0947\u0902\"><br \/>\n <svg viewbox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M4 9v6h4l5 5V4L8 9H4z\"\/><\/svg><br \/>\n <\/button><\/p>\n<div class=\"volume-slider\" id=\"volumeSlider\" role=\"slider\" aria-label=\"\u0927\u094d\u0935\u0928\u093f \u0928\u093f\u092f\u0902\u0924\u094d\u0930\u0923\">\n<div class=\"volume-bar\" id=\"volumeBar\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <button class=\"fullscreen-btn\" id=\"fullscreenBtn\" aria-label=\"\u0938\u0902\u092a\u0942\u0930\u094d\u0923 \u0938\u094d\u0915\u094d\u0930\u0940\u0928 \u091f\u0949\u0917\u0932 \u0915\u0930\u0947\u0902\"><br \/>\n <svg viewbox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z\"\/><\/svg><br \/>\n <\/button>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"video-info\">\n<h3 class=\"video-title\">\u092b\u0941\u091f\u092c\u0949\u0932 \u0915\u0947 \u092e\u093e\u0927\u094d\u092f\u092e \u0938\u0947 11 \u0930\u093e\u0937\u094d\u091f\u094d\u0930 \u090f\u0915\u091c\u0941\u091f<\/h3>\n<div class=\"member-countries\" role=\"list\" aria-label=\"BIFA+ \u0938\u0926\u0938\u094d\u092f \u0926\u0947\u0936\">\n <span class=\"country-tag\" role=\"listitem\">\ud83c\udde7\ud83c\uddf7 \u092c\u094d\u0930\u093e\u091c\u093c\u0940\u0932<\/span><br \/>\n <span class=\"country-tag\" role=\"listitem\">\ud83c\udde6\ud83c\uddea \u092f\u0942\u090f\u0908<\/span><br \/>\n <span class=\"country-tag\" role=\"listitem\">\ud83c\uddf7\ud83c\uddfa \u0930\u0942\u0938<\/span><br \/>\n <span class=\"country-tag\" role=\"listitem\">\ud83c\udde8\ud83c\uddf3 \u091a\u0940\u0928<\/span><br \/>\n <span class=\"country-tag\" role=\"listitem\">\ud83c\uddee\ud83c\uddf3 \u092d\u093e\u0930\u0924<\/span><br \/>\n <span class=\"country-tag\" role=\"listitem\">\ud83c\uddff\ud83c\udde6 \u0926\u0915\u094d\u0937\u093f\u0923 \u0905\u092b\u094d\u0930\u0940\u0915\u093e<\/span><br \/>\n <span class=\"country-tag\" role=\"listitem\">\ud83c\uddf8\ud83c\udde6 \u0938\u090a\u0926\u0940 \u0905\u0930\u092c<\/span><br \/>\n <span class=\"country-tag\" role=\"listitem\">\ud83c\uddea\ud83c\uddec \u092e\u093f\u0938\u094d\u0930<\/span><br \/>\n <span class=\"country-tag\" role=\"listitem\">\ud83c\uddee\ud83c\uddf7 \u0908\u0930\u093e\u0928<\/span><br \/>\n <span class=\"country-tag\" role=\"listitem\">\ud83c\uddea\ud83c\uddf9 \u0907\u0925\u093f\u092f\u094b\u092a\u093f\u092f\u093e<\/span><br \/>\n <span class=\"country-tag\" role=\"listitem\">\ud83c\uddee\ud83c\udde9 \u0907\u0902\u0921\u094b\u0928\u0947\u0936\u093f\u092f\u093e<\/span>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<\/div>\n<p><script>\n\/\/ Global functions for iframe handling\nfunction handleIframeLoad() {\n console.log('Loading screen iframe loaded successfully');\n}<\/p>\n<p>function handleIframeError() {\n console.log('Loading screen iframe failed, showing fallback');\n const iframe = document.getElementById('loadingIframe');\n const fallback = document.getElementById('fallbackLoader');\n if (iframe) iframe.style.display = 'none';\n if (fallback) fallback.classList.add('active');\n}<\/p>\n<p>document.addEventListener('DOMContentLoaded', () => {\n const video = document.getElementById('heroVideo');\n const playBtn = document.getElementById('playPause');\n const muteBtn = document.getElementById('muteToggle');\n const progress = document.getElementById('progress');\n const progressBar = document.getElementById('progressBar');\n const timeDisplay = document.getElementById('timeDisplay');\n const volumeSlider = document.getElementById('volumeSlider');\n const volumeBar = document.getElementById('volumeBar');\n const fullscreenBtn = document.getElementById('fullscreenBtn');\n const loadingOverlay = document.getElementById('videoLoadingOverlay');<\/p>\n<p> \/\/ Check if elements exist before proceeding\n if (!video || !playBtn || !muteBtn) {\n console.warn('Video elements not found');\n return;\n }<\/p>\n<p> \/\/ Loading screen management\n let videoReady = false;<\/p>\n<p> \/\/ Check if video is ready to play\n const checkVideoReady = () => {\n if (video.readyState >= 3) { \/\/ HAVE_FUTURE_DATA or greater\n videoReady = true;\n hideLoadingScreen();\n }\n };<\/p>\n<p> \/\/ Hide loading screen with smooth animation\n const hideLoadingScreen = () => {\n if (videoReady && loadingOverlay) {\n setTimeout(() => {\n loadingOverlay.classList.add('hidden');\n \/\/ Remove overlay completely after animation\n setTimeout(() => {\n if (loadingOverlay.parentNode) {\n loadingOverlay.style.display = 'none';\n }\n }, 800);\n }, 1500); \/\/ Show loading for minimum 1.5 seconds\n }\n };<\/p>\n<p> \/\/ Video event listeners for loading\n video.addEventListener('loadeddata', checkVideoReady);\n video.addEventListener('canplay', checkVideoReady);\n video.addEventListener('canplaythrough', () => {\n videoReady = true;\n hideLoadingScreen();\n });<\/p>\n<p> \/\/ Fallback: hide loading screen after maximum time\n setTimeout(() => {\n if (loadingOverlay && !loadingOverlay.classList.contains('hidden')) {\n console.log('Hiding loading screen after timeout');\n hideLoadingScreen();\n }\n }, 8000); \/\/ Maximum 8 seconds<\/p>\n<p> \/\/ Play\/Pause Icons\n const setPlayIcon = (paused) => {\n if (playBtn) {\n playBtn.innerHTML = paused\n ? '<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M8 5v14l11-7z\"\/><\/svg>'\n : '<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M6 19h4V5H6zm8 0h4V5h-4z\"\/><\/svg>';\n playBtn.setAttribute('aria-label', paused ? 'Play video' : 'Pause video');\n }\n };<\/p>\n<p> \/\/ Mute\/Unmute Icons\n const setMuteIcon = (muted) => {\n if (muteBtn) {\n muteBtn.innerHTML = muted\n ? '<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z\"\/><\/svg>'\n : '<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M4 9v6h4l5 5V4L8 9H4z\"\/><\/svg>';\n muteBtn.setAttribute('aria-label', muted ? 'Unmute video' : 'Mute video');\n }\n };<\/p>\n<p> \/\/ Format time\n const formatTime = (seconds) => {\n const mins = Math.floor(seconds \/ 60);\n const secs = Math.floor(seconds % 60);\n return `${mins}:${secs.toString().padStart(2, '0')}`;\n };<\/p>\n<p> \/\/ Play\/Pause functionality\n if (playBtn) {\n playBtn.addEventListener('click', () => {\n if (video.paused) {\n video.play().catch(e => console.log('Video play failed:', e));\n } else {\n video.pause();\n }\n setPlayIcon(video.paused);\n });\n }<\/p>\n<p> \/\/ Mute\/Unmute functionality\n if (muteBtn) {\n muteBtn.addEventListener('click', () => {\n video.muted = !video.muted;\n setMuteIcon(video.muted);\n if (volumeBar) {\n volumeBar.style.width = video.muted ? '0%' : (video.volume * 100) + '%';\n }\n });\n }<\/p>\n<p> \/\/ Progress bar update\n video.addEventListener('timeupdate', () => {\n if (video.duration) {\n const progressPercent = (video.currentTime \/ video.duration) * 100;\n if (progressBar) progressBar.style.width = progressPercent + '%';\n if (timeDisplay) timeDisplay.textContent = formatTime(video.currentTime);\n }\n });<\/p>\n<p> \/\/ Progress bar click\n if (progress) {\n progress.addEventListener('click', (e) => {\n const rect = progress.getBoundingClientRect();\n const clickX = e.clientX - rect.left;\n const clickPercent = clickX \/ rect.width;\n if (video.duration) {\n video.currentTime = clickPercent * video.duration;\n }\n });\n }<\/p>\n<p> \/\/ Volume control\n if (volumeSlider) {\n volumeSlider.addEventListener('click', (e) => {\n const rect = volumeSlider.getBoundingClientRect();\n const clickX = e.clientX - rect.left;\n const volume = Math.max(0, Math.min(1, clickX \/ rect.width));\n video.volume = volume;\n if (volumeBar) volumeBar.style.width = (video.volume * 100) + '%';<\/p>\n<p> if (video.volume === 0) {\n video.muted = true;\n } else {\n video.muted = false;\n }\n setMuteIcon(video.muted);\n });\n }<\/p>\n<p> \/\/ Fullscreen functionality\n if (fullscreenBtn) {\n fullscreenBtn.addEventListener('click', () => {\n if (!document.fullscreenElement) {\n video.parentElement.requestFullscreen().catch(e => console.log('Fullscreen failed:', e));\n } else {\n document.exitFullscreen();\n }\n });\n }<\/p>\n<p> \/\/ Initialize icons\n setPlayIcon(video.paused);\n setMuteIcon(video.muted);\n if (volumeBar) volumeBar.style.width = (video.volume * 100) + '%';<\/p>\n<p> \/\/ Create optimized floating particles\n const particlesContainer = document.querySelector('.bg-particles');\n if (particlesContainer) {\n const particleCount = window.innerWidth < 768 ? 8 : 12; \/\/ Fewer particles on mobile\n\n for (let i = 0; i < particleCount; i++) {\n const particle = document.createElement('div');\n particle.className = 'particle';\n particle.style.left = Math.random() * 100 + '%';\n particle.style.animationDelay = Math.random() * 18 + 's';\n particle.style.animationDuration = (15 + Math.random() * 6) + 's';\n \n const size = 3 + Math.random() * 3;\n particle.style.width = size + 'px';\n particle.style.height = size + 'px';\n \n particlesContainer.appendChild(particle);\n }\n }\n\n\n\n \/\/ Keyboard navigation support\n document.addEventListener('keydown', (e) => {\n if (e.target.closest('.video-wrapper')) {\n switch(e.code) {\n case 'Space':\n e.preventDefault();\n if (playBtn) playBtn.click();\n break;\n case 'KeyM':\n e.preventDefault();\n if (muteBtn) muteBtn.click();\n break;\n case 'KeyF':\n e.preventDefault();\n if (fullscreenBtn) fullscreenBtn.click();\n break;\n }\n }\n });<\/p>\n<p> \/\/ Performance optimization: Pause animations when tab is not visible\n document.addEventListener('visibilitychange', () => {\n const particles = document.querySelectorAll('.particle');\n particles.forEach(particle => {\n if (document.hidden) {\n particle.style.animationPlayState = 'paused';\n } else {\n particle.style.animationPlayState = 'running';\n }\n });\n });\n});\n<\/script><br \/>\n<\/body><br \/>\n<\/html>\n<\/div>\n<div>\n<p> <!DOCTYPE html><br \/>\n<html lang=\"en\"><br \/>\n<head><br \/>\n<meta charset=\"UTF-8\"><br \/>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><br \/>\n<title>BIFA+ Mission<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\n<style>\n\/* ========= MISSION SECTION WRAPPER - ISOLATED ========= *\/\n.mission-section-wrapper {\n \/* Isolated CSS Variables - only for this section *\/\n --bifa-deep-navy: #0A1F44;\n --bifa-heritage-gold: #D4AF37;\n --bifa-civic-green: #1D6143;\n --bifa-bright-white: #FFFFFF;\n --bifa-soft-black: #1A1A1A;<\/p>\n<p> \/* Additional colors for better readability *\/\n --bifa-gray-light: #F8F9FA;\n --bifa-gray-medium: #E9ECEF;\n --bifa-gray: #6C757D;\n --bifa-gray-dark: #495057;<\/p>\n<p> \/* Official BIFA+ Fonts *\/\n --bifa-font-heading: 'Montserrat', sans-serif;\n --bifa-font-body: 'Poppins', sans-serif;<\/p>\n<p> \/* Premium shadows and effects *\/\n --bifa-shadow-sm: 0 2px 8px rgba(10, 31, 68, 0.08);\n --bifa-shadow-md: 0 8px 24px rgba(10, 31, 68, 0.12);\n --bifa-shadow-lg: 0 16px 48px rgba(10, 31, 68, 0.16);\n --bifa-shadow-xl: 0 25px 80px rgba(10, 31, 68, 0.15);\n --bifa-shadow-gold: 0 15px 40px rgba(212, 175, 55, 0.3);\n --bifa-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);<\/p>\n<p> width: 100vw;\n position: relative;\n left: 50%;\n margin-left: -50vw;\n background: radial-gradient(ellipse 120% 80% at center top, \n rgba(255, 255, 255, 1) 0%,\n rgba(248, 249, 250, 0.95) 20%,\n rgba(248, 249, 250, 0.8) 40%,\n rgba(248, 249, 250, 0.5) 60%,\n rgba(248, 249, 250, 0.2) 80%,\n transparent 100%\n );\n overflow: hidden;\n}<\/p>\n<p>\/* Header connection line - seamless transition *\/\n.mission-section-wrapper::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: linear-gradient(90deg, \n transparent 0%, \n rgba(212, 175, 55, 0.3) 25%, \n rgba(212, 175, 55, 0.6) 50%, \n rgba(212, 175, 55, 0.3) 75%,\n transparent 100%\n );\n z-index: 100;\n}<\/p>\n<p>\/* ========= RESET - ONLY FOR THIS SECTION ========= *\/\n.mission-section-wrapper * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}<\/p>\n<p>.mission-section-wrapper {\n font-family: var(--bifa-font-body);\n color: var(--bifa-soft-black);\n line-height: 1.6;\n}<\/p>\n<p>\/* ========= MISSION SECTION ========= *\/\n.mission-section-wrapper .mission-section {\n padding: 100px 0;\n background: transparent;\n position: relative;\n z-index: 10;\n}<\/p>\n<p>.mission-section-wrapper .mission-container {\n max-width: 1400px;\n margin: 0 auto;\n padding: 0 60px;\n}<\/p>\n<p>.mission-section-wrapper .section-header {\n text-align: center;\n margin-bottom: 80px;\n animation: missionFadeIn 1.2s ease-out;\n}<\/p>\n<p>@keyframes missionFadeIn {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>.mission-section-wrapper .section-title {\n font-family: var(--bifa-font-heading);\n font-size: clamp(2.5rem, 4vw, 3.5rem);\n font-weight: 900;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n margin-bottom: 20px;\n letter-spacing: -0.02em;\n}<\/p>\n<p>.mission-section-wrapper .section-subtitle {\n font-family: var(--bifa-font-body);\n font-size: clamp(1rem, 1.5vw, 1.2rem);\n color: var(--bifa-soft-black);\n max-width: 800px;\n margin: 0 auto;\n line-height: 1.8;\n font-weight: 400;\n}<\/p>\n<p>\/* Mission Cards *\/\n.mission-section-wrapper .mission-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n gap: 40px;\n margin-bottom: 80px;\n}<\/p>\n<p>.mission-section-wrapper .mission-card {\n background: var(--bifa-bright-white);\n padding: 40px;\n border-radius: 20px;\n box-shadow: var(--bifa-shadow-sm);\n border: 1px solid rgba(212, 175, 55, 0.1);\n transition: var(--bifa-transition);\n position: relative;\n overflow: hidden;\n}<\/p>\n<p>.mission-section-wrapper .mission-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 4px;\n background: linear-gradient(90deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\n transform: translateX(-100%);\n transition: transform 0.6s ease;\n}<\/p>\n<p>.mission-section-wrapper .mission-card:hover::before {\n transform: translateX(0);\n}<\/p>\n<p>.mission-section-wrapper .mission-card:hover {\n transform: translateY(-10px);\n box-shadow: var(--bifa-shadow-gold);\n}<\/p>\n<p>.mission-section-wrapper .mission-icon {\n width: 70px;\n height: 70px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold) 0%, var(--bifa-heritage-gold) 100%);\n border-radius: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 25px;\n font-size: 35px;\n box-shadow: var(--bifa-shadow-gold);\n transition: var(--bifa-transition);\n}<\/p>\n<p>.mission-section-wrapper .mission-icon.has-svg {\n background: transparent;\n box-shadow: none;\n}<\/p>\n<p>.mission-section-wrapper .mission-icon img {\n width: 70px;\n height: 70px;\n transition: var(--bifa-transition);\n}<\/p>\n<p>.mission-section-wrapper .mission-card:hover .mission-icon {\n transform: scale(1.1) rotate(5deg);\n}<\/p>\n<p>.mission-section-wrapper .mission-card:hover .mission-icon.has-svg {\n transform: scale(1.15);\n}<\/p>\n<p>.mission-section-wrapper .mission-card:hover .mission-icon img {\n transform: scale(1.1);\n}<\/p>\n<p>.mission-section-wrapper .mission-card-title {\n font-family: var(--bifa-font-heading);\n font-size: 1.5rem;\n font-weight: 800;\n color: var(--bifa-deep-navy);\n margin-bottom: 15px;\n}<\/p>\n<p>.mission-section-wrapper .mission-card-text {\n font-family: var(--bifa-font-body);\n font-size: 1rem;\n line-height: 1.7;\n color: var(--bifa-soft-black);\n font-weight: 400;\n}<\/p>\n<p>\/* Vision Box *\/\n.mission-section-wrapper .vision-box {\n background: linear-gradient(135deg, rgba(212, 175, 55, 0.08) 0%, rgba(212, 175, 55, 0.05) 100%);\n padding: 80px 60px;\n border-radius: 25px;\n text-align: center;\n position: relative;\n overflow: hidden;\n margin-bottom: 80px;\n border: 2px solid rgba(212, 175, 55, 0.2);\n box-shadow: var(--bifa-shadow-lg);\n}<\/p>\n<p>.mission-section-wrapper .vision-box::before {\n content: '';\n position: absolute;\n top: -50%;\n right: -50%;\n width: 200%;\n height: 200%;\n background: radial-gradient(circle, rgba(212, 175, 55, 0.05) 0%, transparent 70%);\n animation: missionRotate 30s linear infinite;\n}<\/p>\n<p>.mission-section-wrapper .vision-box::after {\n content: '';\n position: absolute;\n bottom: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n background: radial-gradient(circle, rgba(212, 175, 55, 0.05) 0%, transparent 70%);\n animation: missionRotateReverse 25s linear infinite;\n}<\/p>\n<p>@keyframes missionRotate {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}<\/p>\n<p>@keyframes missionRotateReverse {\n from { transform: rotate(360deg); }\n to { transform: rotate(0deg); }\n}<\/p>\n<p>.mission-section-wrapper .vision-title {\n font-family: var(--bifa-font-heading);\n font-size: 3rem;\n font-weight: 900;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n margin-bottom: 30px;\n position: relative;\n z-index: 1;\n}<\/p>\n<p>.mission-section-wrapper .vision-text {\n font-family: var(--bifa-font-body);\n font-size: 1.3rem;\n line-height: 1.9;\n max-width: 900px;\n margin: 0 auto;\n position: relative;\n z-index: 1;\n color: var(--bifa-soft-black);\n font-weight: 400;\n}<\/p>\n<p>\/* Floating particles for consistency *\/\n.mission-section-wrapper .bg-particles {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow: hidden;\n z-index: 1;\n pointer-events: none;\n}<\/p>\n<p>.mission-section-wrapper .particle {\n position: absolute;\n width: 4px;\n height: 4px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\n border-radius: 50%;\n animation: missionFloat 20s infinite linear;\n box-shadow: 0 0 12px rgba(212, 175, 55, 0.3);\n opacity: 0.3;\n}<\/p>\n<p>@keyframes missionFloat {\n 0% {\n transform: translateY(100vh) translateX(0);\n opacity: 0;\n }\n 15% { opacity: 0.3; }\n 85% { opacity: 0.3; }\n 100% {\n transform: translateY(-100vh) translateX(30px);\n opacity: 0;\n }\n}<\/p>\n<p>\/* Fallback for browsers without background-clip support *\/\n@supports not (background-clip: text) {\n .mission-section-wrapper .section-title,\n .mission-section-wrapper .vision-title {\n color: var(--bifa-heritage-gold) !important;\n background: none !important;\n }\n}<\/p>\n<p>\/* ========= RESPONSIVE ========= *\/\n@media (max-width: 1200px) {\n .mission-section-wrapper .mission-container {\n padding: 0 40px;\n }\n}<\/p>\n<p>@media (max-width: 768px) {\n .mission-section-wrapper .mission-container {\n padding: 0 20px;\n }<\/p>\n<p> .mission-section-wrapper .mission-grid {\n grid-template-columns: 1fr;\n }<\/p>\n<p> .mission-section-wrapper .vision-box {\n padding: 40px 20px;\n }<\/p>\n<p> .mission-section-wrapper .vision-title {\n font-size: 2rem;\n }<\/p>\n<p> .mission-section-wrapper .vision-text {\n font-size: 1.1rem;\n }<\/p>\n<p> .mission-section-wrapper .mission-section {\n padding: 60px 0;\n }\n}<\/p>\n<p>@media (max-width: 480px) {\n .mission-section-wrapper .section-title {\n font-size: 2rem;\n }<\/p>\n<p> .mission-section-wrapper .mission-card {\n padding: 30px 20px;\n }<\/p>\n<p> .mission-section-wrapper .mission-grid {\n grid-template-columns: 1fr;\n gap: 30px;\n }\n}\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"mission-section-wrapper\" id=\"vision\">\n <\/p>\n<div class=\"bg-particles\"><\/div>\n<p> <\/p>\n<section id=\"our-mission\" class=\"mission-section\">\n<div class=\"mission-container\">\n<div class=\"section-header\">\n<h2 class=\"section-title\">\u0939\u092e\u093e\u0930\u093e \u0935\u093f\u0936\u0947\u0937 \u0915\u093e\u0930\u094d\u092f<\/h2>\n<p class=\"section-subtitle\">\n Building bridges between nations through the universal language of football,<br \/>\n creating opportunities for youth, and fostering cultural understanding across the Global South.\n <\/p>\n<\/p><\/div>\n<div class=\"mission-grid\">\n<div class=\"mission-card\">\n<div class=\"mission-icon\">\ud83c\udf0d<\/div>\n<h3 class=\"mission-card-title\">\u0935\u0948\u0936\u094d\u0935\u093f\u0915 \u0938\u0939\u092f\u094b\u0917<\/h3>\n<p class=\"mission-card-text\">\n Promote international sports and cultural cooperation among Global South nations<br \/>\n through tournaments, events, and strategic partnerships that transcend borders.\n <\/p>\n<\/p><\/div>\n<div class=\"mission-card\">\n<div class=\"mission-icon\">\u26bd<\/div>\n<h3 class=\"mission-card-title\">\u092f\u0941\u0935\u093e \u0938\u0936\u0915\u094d\u0924\u093f\u0915\u0930\u0923<\/h3>\n<p class=\"mission-card-text\">\n Engage youth, students, and communities via football programs for universities,<br \/>\n schools, academies, and grassroots platforms to develop future leaders.\n <\/p>\n<\/p><\/div>\n<div class=\"mission-card\">\n<div class=\"mission-icon\">\ud83d\udca1<\/div>\n<h3 class=\"mission-card-title\">\u0921\u093f\u091c\u093f\u091f\u0932 \u0928\u0935\u093e\u091a\u093e\u0930<\/h3>\n<p class=\"mission-card-text\">\n Develop digital and physical initiatives in AI-powered sports tech, smart health,<br \/>\n and sports commerce to revolutionize how football is played and experienced.\n <\/p>\n<\/p><\/div>\n<div class=\"mission-card\">\n<div class=\"mission-icon\">\ud83c\udf1f<\/div>\n<h3 class=\"mission-card-title\">\u0935\u093f\u0935\u093f\u0927\u0924\u093e \u0914\u0930 \u0938\u092e\u093e\u0935\u0947\u0936\u0928<\/h3>\n<p class=\"mission-card-text\">\n Champion diversity through beach football, community leagues, university tournaments,<br \/>\n and regional academies that welcome players from all backgrounds.\n <\/p>\n<\/p><\/div>\n<div class=\"mission-card\">\n<div class=\"mission-icon has-svg\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Girl_fas.svg\" alt=\"Women's Empowerment\">\n <\/div>\n<h3 class=\"mission-card-title\">\u092e\u0939\u093f\u0932\u093e \u0938\u0936\u0915\u094d\u0924\u093f\u0915\u0930\u0923<\/h3>\n<p class=\"mission-card-text\">\n Empower women in sports through the dedicated BIFA+ Women program for female<br \/>\n players and leadership roles, creating equal opportunities in football.\n <\/p>\n<\/p><\/div>\n<div class=\"mission-card\">\n<div class=\"mission-icon\">\ud83c\udfd9\ufe0f<\/div>\n<h3 class=\"mission-card-title\">\u0936\u0939\u0930\u094b\u0902 \u0915\u093e \u0928\u0947\u091f\u0935\u0930\u094d\u0915<\/h3>\n<p class=\"mission-card-text\">\n Establish the BIFA+ Cities Network, linking dynamic cities worldwide as hubs<br \/>\n for cooperation, activation, and international mixed-nationality teams.\n <\/p>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"vision-box\">\n<h2 class=\"vision-title\">\u0939\u092e\u093e\u0930\u093e \u0928\u091c\u093c\u0930\u093f\u092f\u093e<\/h2>\n<p class=\"vision-text\">\n To become the leading global platform for youth-driven sports and cultural cooperation<br \/>\n across the Global South, offering a new model of international partnership based on<br \/>\n peace, opportunity, and shared values. We envision a world united through sport \u2013<br \/>\n where football becomes a symbol of peace, cooperation, and cultural exchange.\n <\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<\/div>\n<p><script>\ndocument.addEventListener('DOMContentLoaded', () => {\n \/\/ Create floating particles\n const particlesContainer = document.querySelector('.mission-section-wrapper .bg-particles');\n const particleCount = 8;<\/p>\n<p> for (let i = 0; i < particleCount; i++) {\n const particle = document.createElement('div');\n particle.className = 'particle';\n particle.style.left = Math.random() * 100 + '%';\n particle.style.animationDelay = Math.random() * 20 + 's';\n particle.style.animationDuration = (18 + Math.random() * 6) + 's';\n \n const size = 3 + Math.random() * 2;\n particle.style.width = size + 'px';\n particle.style.height = size + 'px';\n \n particlesContainer.appendChild(particle);\n }\n\n \/\/ Animate elements on scroll\n const observerOptions = {\n threshold: 0.1,\n rootMargin: '0px 0px -100px 0px'\n };\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.style.opacity = '1';\n entry.target.style.transform = 'translateY(0)';\n }\n });\n }, observerOptions);<\/p>\n<p> \/\/ Observe mission cards\n const animatedElements = document.querySelectorAll('.mission-section-wrapper .mission-card');\n animatedElements.forEach(el => {\n el.style.opacity = '0';\n el.style.transform = 'translateY(30px)';\n el.style.transition = 'all 0.6s ease';\n observer.observe(el);\n });\n});\n<\/script><br \/>\n<\/body><br \/>\n<\/html>\n<\/div>\n<div>\n<p> <!DOCTYPE html><br \/>\n<html lang=\"en\"><br \/>\n<head><br \/>\n<meta charset=\"UTF-8\"><br \/>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><br \/>\n<title>BIFA+ Initiatives<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\n<style>\n\/* ========= INITIATIVES SECTION WRAPPER - ISOLATED ========= *\/\n.initiatives-section-wrapper {\n \/* Isolated CSS Variables - only for this section *\/\n --bifa-deep-navy: #0A1F44;\n --bifa-heritage-gold: #D4AF37;\n --bifa-civic-green: #1D6143;\n --bifa-bright-white: #FFFFFF;\n --bifa-soft-black: #1A1A1A;<\/p>\n<p> \/* Additional colors for better readability *\/\n --bifa-gray-light: #F8F9FA;\n --bifa-gray-medium: #E9ECEF;\n --bifa-gray: #6C757D;\n --bifa-gray-dark: #495057;<\/p>\n<p> \/* Official BIFA+ Fonts *\/\n --bifa-font-heading: 'Montserrat', sans-serif;\n --bifa-font-body: 'Poppins', sans-serif;<\/p>\n<p> \/* Premium shadows and effects *\/\n --bifa-shadow-sm: 0 2px 8px rgba(10, 31, 68, 0.08);\n --bifa-shadow-md: 0 8px 24px rgba(10, 31, 68, 0.12);\n --bifa-shadow-lg: 0 16px 48px rgba(10, 31, 68, 0.16);\n --bifa-shadow-xl: 0 25px 80px rgba(10, 31, 68, 0.15);\n --bifa-shadow-gold: 0 15px 40px rgba(212, 175, 55, 0.3);\n --bifa-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);<\/p>\n<p> width: 100vw;\n position: relative;\n left: 50%;\n margin-left: -50vw;\n overflow: hidden;\n}<\/p>\n<p>\/* Header connection line - seamless transition *\/\n.initiatives-section-wrapper::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: linear-gradient(90deg, \n transparent 0%, \n rgba(212, 175, 55, 0.3) 25%, \n rgba(212, 175, 55, 0.6) 50%, \n rgba(212, 175, 55, 0.3) 75%,\n transparent 100%\n );\n z-index: 100;\n}<\/p>\n<p>\/* ========= RESET - ONLY FOR THIS SECTION ========= *\/\n.initiatives-section-wrapper * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}<\/p>\n<p>.initiatives-section-wrapper {\n font-family: var(--bifa-font-body);\n color: var(--bifa-soft-black);\n line-height: 1.6;\n}<\/p>\n<p>\/* Section header animation *\/\n@keyframes missionFadeIn {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>.initiatives-section-wrapper .section-header {\n text-align: center;\n margin-bottom: 80px;\n animation: missionFadeIn 1.2s ease-out;\n}<\/p>\n<p>.initiatives-section-wrapper .section-title {\n font-family: var(--bifa-font-heading);\n font-size: clamp(2.5rem, 4vw, 3.5rem);\n font-weight: 900;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n margin-bottom: 20px;\n letter-spacing: -0.02em;\n}<\/p>\n<p>.initiatives-section-wrapper .section-subtitle {\n font-family: var(--bifa-font-body);\n font-size: clamp(1rem, 1.5vw, 1.2rem);\n color: var(--bifa-soft-black);\n max-width: 800px;\n margin: 0 auto;\n line-height: 1.8;\n font-weight: 400;\n}<\/p>\n<p>\/* Initiatives Section *\/\n.initiatives-section-wrapper .initiatives-section {\n padding: 100px 0;\n background: radial-gradient(ellipse 100% 60% at center, \n rgba(248, 249, 250, 0.8) 0%,\n rgba(248, 249, 250, 0.4) 50%,\n transparent 100%\n );\n position: relative;\n z-index: 10;\n}<\/p>\n<p>.initiatives-section-wrapper .initiatives-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 30px;\n max-width: 1400px;\n margin: 0 auto;\n padding: 0 60px;\n}<\/p>\n<p>.initiatives-section-wrapper .initiative-item {\n background: linear-gradient(135deg, var(--bifa-bright-white) 0%, #fafbfc 100%);\n padding: 35px 25px;\n border-radius: 20px;\n text-align: center;\n box-shadow: var(--bifa-shadow-sm);\n transition: var(--bifa-transition);\n cursor: pointer;\n border: 2px solid transparent;\n}<\/p>\n<p>.initiatives-section-wrapper .initiative-item:hover {\n transform: translateY(-8px);\n box-shadow: var(--bifa-shadow-gold);\n border-color: rgba(212, 175, 55, 0.2);\n}<\/p>\n<p>.initiatives-section-wrapper .initiative-icon {\n width: 60px;\n height: 60px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\n border-radius: 50%;\n margin: 0 auto 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 28px;\n color: var(--bifa-bright-white);\n box-shadow: var(--bifa-shadow-gold);\n transition: var(--bifa-transition);\n}<\/p>\n<p>.initiatives-section-wrapper .initiative-icon.has-svg {\n background: transparent;\n box-shadow: none;\n border-radius: 0;\n}<\/p>\n<p>.initiatives-section-wrapper .initiative-icon img {\n width: 60px;\n height: 60px;\n transition: var(--bifa-transition);\n}<\/p>\n<p>.initiatives-section-wrapper .initiative-item:hover .initiative-icon {\n transform: scale(1.15) rotate(10deg);\n}<\/p>\n<p>.initiatives-section-wrapper .initiative-item:hover .initiative-icon.has-svg {\n transform: scale(1.2);\n}<\/p>\n<p>.initiatives-section-wrapper .initiative-item:hover .initiative-icon img {\n transform: scale(1.1);\n}<\/p>\n<p>.initiatives-section-wrapper .initiative-title {\n font-family: var(--bifa-font-heading);\n font-size: 1.1rem;\n font-weight: 700;\n color: var(--bifa-deep-navy);\n margin-bottom: 10px;\n}<\/p>\n<p>.initiatives-section-wrapper .initiative-desc {\n font-family: var(--bifa-font-body);\n font-size: 0.9rem;\n color: var(--bifa-soft-black);\n line-height: 1.6;\n font-weight: 400;\n}<\/p>\n<p>\/* Floating particles for consistency *\/\n.initiatives-section-wrapper .bg-particles {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow: hidden;\n z-index: 1;\n pointer-events: none;\n}<\/p>\n<p>.initiatives-section-wrapper .particle {\n position: absolute;\n width: 4px;\n height: 4px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\n border-radius: 50%;\n animation: missionFloat 20s infinite linear;\n box-shadow: 0 0 12px rgba(212, 175, 55, 0.3);\n opacity: 0.3;\n}<\/p>\n<p>@keyframes missionFloat {\n 0% {\n transform: translateY(100vh) translateX(0);\n opacity: 0;\n }\n 15% { opacity: 0.3; }\n 85% { opacity: 0.3; }\n 100% {\n transform: translateY(-100vh) translateX(30px);\n opacity: 0;\n }\n}<\/p>\n<p>\/* Fallback for browsers without background-clip support *\/\n@supports not (background-clip: text) {\n .initiatives-section-wrapper .section-title {\n color: var(--bifa-heritage-gold) !important;\n background: none !important;\n }\n}<\/p>\n<p>\/* ========= RESPONSIVE ========= *\/\n@media (max-width: 1200px) {\n .initiatives-section-wrapper .initiatives-grid {\n padding: 0 40px;\n }\n}<\/p>\n<p>@media (max-width: 768px) {\n .initiatives-section-wrapper .initiatives-grid {\n padding: 0 20px;\n }<\/p>\n<p> .initiatives-section-wrapper .initiatives-section {\n padding: 60px 0;\n }\n}<\/p>\n<p>@media (max-width: 480px) {\n .initiatives-section-wrapper .initiatives-grid {\n grid-template-columns: 1fr;\n }<\/p>\n<p> .initiatives-section-wrapper .section-title {\n font-size: 2rem;\n }\n}\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"initiatives-section-wrapper\">\n <\/p>\n<div class=\"bg-particles\"><\/div>\n<p> <\/p>\n<section class=\"initiatives-section\">\n<div class=\"section-header\">\n<h2 class=\"section-title\">\u092e\u0939\u0924\u094d\u0935\u092a\u0942\u0930\u094d\u0923 \u092a\u0939\u0932<\/h2>\n<p class=\"section-subtitle\">\n \u092b\u0941\u091f\u092c\u0949\u0932 \u0915\u0947 \u092e\u093e\u0927\u094d\u092f\u092e \u0938\u0947 \u0930\u093e\u0937\u094d\u091f\u094d\u0930\u094b\u0902 \u0915\u094b \u090f\u0915\u091c\u0941\u091f \u0915\u0930\u0928\u0947 \u0914\u0930 \u0938\u092e\u0941\u0926\u093e\u092f\u094b\u0902 \u0915\u094b \u0938\u0936\u0915\u094d\u0924 \u092c\u0928\u093e\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0921\u093f\u091c\u093c\u093e\u0907\u0928 \u0915\u093f\u090f \u0917\u090f \u0935\u094d\u092f\u093e\u092a\u0915 \u0915\u093e\u0930\u094d\u092f\u0915\u094d\u0930\u092e\n <\/p>\n<\/p><\/div>\n<div class=\"initiatives-grid\">\n<div class=\"initiative-item\">\n<div class=\"initiative-icon\">\ud83c\udfc6<\/div>\n<h3 class=\"initiative-title\">BIFA+ \u0932\u0940\u0917<\/h3>\n<p class=\"initiative-desc\">\u0935\u0948\u0936\u094d\u0935\u093f\u0915 \u0926\u0915\u094d\u0937\u093f\u0923 \u0915\u094b \u091c\u094b\u0921\u093c\u0928\u0947 \u0935\u093e\u0932\u0940 \u0905\u0902\u0924\u0930\u094d\u0930\u093e\u0937\u094d\u091f\u094d\u0930\u0940\u092f \u0915\u094d\u0932\u092c-\u0906\u0927\u093e\u0930\u093f\u0924 \u092b\u0941\u091f\u092c\u0949\u0932 \u0932\u0940\u0917<\/p>\n<\/p><\/div>\n<div class=\"initiative-item\">\n<div class=\"initiative-icon has-svg\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Girl_prof.svg\" alt=\"BIFA+ Women\">\n <\/div>\n<h3 class=\"initiative-title\">BIFA+ \u092e\u0939\u093f\u0932\u093e<\/h3>\n<p class=\"initiative-desc\">\u092e\u0939\u093f\u0932\u093e \u0928\u0947\u0924\u0943\u0924\u094d\u0935 \u0915\u094b \u092c\u0922\u093c\u093e\u0935\u093e \u0926\u0947\u0928\u0947 \u0935\u093e\u0932\u093e \u0938\u092e\u0930\u094d\u092a\u093f\u0924 \u092e\u0939\u093f\u0932\u093e \u092b\u0941\u091f\u092c\u0949\u0932 \u0915\u093e\u0930\u094d\u092f\u0915\u094d\u0930\u092e<\/p>\n<\/p><\/div>\n<div class=\"initiative-item\">\n<div class=\"initiative-icon\">\ud83e\udd16<\/div>\n<h3 class=\"initiative-title\">\u0905\u0915\u093e\u0926\u092e\u0940+ \u090f\u0906\u0908<\/h3>\n<p class=\"initiative-desc\">\u090f\u0906\u0908-\u0938\u0902\u091a\u093e\u0932\u093f\u0924 \u092a\u094d\u0930\u0936\u093f\u0915\u094d\u0937\u0923 \u092a\u094d\u0930\u0923\u093e\u0932\u093f\u092f\u093e\u0901 \u0914\u0930 \u0938\u094d\u092e\u093e\u0930\u094d\u091f \u092a\u094d\u0930\u0926\u0930\u094d\u0936\u0928 \u0935\u093f\u0936\u094d\u0932\u0947\u0937\u0923<\/p>\n<\/p><\/div>\n<div class=\"initiative-item\">\n<div class=\"initiative-icon\">\ud83c\udfae<\/div>\n<h3 class=\"initiative-title\">BIFA+ \u0908\u092b\u0941\u091f\u092c\u0949\u0932<\/h3>\n<p class=\"initiative-desc\">\u0921\u093f\u091c\u093f\u091f\u0932 \u0917\u0947\u092e\u093f\u0902\u0917 \u091f\u0942\u0930\u094d\u0928\u093e\u092e\u0947\u0902\u091f \u0914\u0930 \u0935\u0930\u094d\u091a\u0941\u0905\u0932 \u092b\u0941\u091f\u092c\u0949\u0932 \u0905\u0928\u0941\u092d\u0935<\/p>\n<\/p><\/div>\n<div class=\"initiative-item\">\n<div class=\"initiative-icon\">\ud83c\udf06<\/div>\n<h3 class=\"initiative-title\">\u0936\u0939\u0930\u094b\u0902 \u0915\u093e \u0928\u0947\u091f\u0935\u0930\u094d\u0915<\/h3>\n<p class=\"initiative-desc\">BIFA+ \u0915\u093e\u0930\u094d\u092f\u0915\u094d\u0930\u092e\u094b\u0902 \u0915\u0940 \u092e\u0947\u091c\u092c\u093e\u0928\u0940 \u0915\u0930\u0928\u0947 \u0935\u093e\u0932\u0947 \u0938\u093e\u091d\u0947\u0926\u093e\u0930 \u0936\u0939\u0930\u094b\u0902 \u0915\u093e \u0935\u0948\u0936\u094d\u0935\u093f\u0915 \u0928\u0947\u091f\u0935\u0930\u094d\u0915<\/p>\n<\/p><\/div>\n<div class=\"initiative-item\">\n<div class=\"initiative-icon\">\u2b50<\/div>\n<h3 class=\"initiative-title\">\u092e\u0939\u093e\u092a\u0941\u0930\u0942\u0937\u094b\u0902 \u0915\u0940 \u0930\u093e\u0924<\/h3>\n<p class=\"initiative-desc\">\u092b\u0941\u091f\u092c\u0949\u0932 \u0915\u0947 \u0926\u093f\u0917\u094d\u0917\u091c\u094b\u0902 \u0914\u0930 \u0938\u093e\u0902\u0938\u094d\u0915\u0943\u0924\u093f\u0915 \u0939\u0938\u094d\u0924\u093f\u092f\u094b\u0902 \u0915\u0940 \u092d\u093e\u0917\u0940\u0926\u093e\u0930\u0940 \u0935\u093e\u0932\u0947 \u0930\u093e\u091c\u0928\u092f\u093f\u0915 \u0915\u093e\u0930\u094d\u092f\u0915\u094d\u0930\u092e<\/p>\n<\/p><\/div>\n<div class=\"initiative-item\">\n<div class=\"initiative-icon\">\ud83c\udfd6\ufe0f<\/div>\n<h3 class=\"initiative-title\">\u0938\u092e\u0941\u0926\u094d\u0930 \u0924\u091f \u0914\u0930 \u0938\u092e\u0941\u0926\u093e\u092f<\/h3>\n<p class=\"initiative-desc\">\u091c\u092e\u0940\u0928\u0940 \u0938\u094d\u0924\u0930 \u0915\u0947 \u091f\u0942\u0930\u094d\u0928\u093e\u092e\u0947\u0902\u091f \u0914\u0930 \u0938\u093e\u092e\u0941\u0926\u093e\u092f\u093f\u0915 \u0938\u0939\u092d\u093e\u0917\u093f\u0924\u093e \u0915\u093e\u0930\u094d\u092f\u0915\u094d\u0930\u092e<\/p>\n<\/p><\/div>\n<div class=\"initiative-item\">\n<div class=\"initiative-icon\">\ud83e\udd1d<\/div>\n<h3 class=\"initiative-title\">\u092d\u093e\u0917\u0940\u0926\u093e\u0930\u0940<\/h3>\n<p class=\"initiative-desc\">\u0938\u0930\u0915\u093e\u0930\u094b\u0902, \u0915\u094d\u0932\u092c\u094b\u0902 \u0914\u0930 \u0938\u0902\u0917\u0920\u0928\u094b\u0902 \u0915\u0947 \u0938\u093e\u0925 \u0930\u0923\u0928\u0940\u0924\u093f\u0915 \u0917\u0920\u092c\u0902\u0927\u0928<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<\/div>\n<p><script>\ndocument.addEventListener('DOMContentLoaded', () => {\n \/\/ Create floating particles\n const particlesContainer = document.querySelector('.initiatives-section-wrapper .bg-particles');\n const particleCount = 8;<\/p>\n<p> for (let i = 0; i < particleCount; i++) {\n const particle = document.createElement('div');\n particle.className = 'particle';\n particle.style.left = Math.random() * 100 + '%';\n particle.style.animationDelay = Math.random() * 20 + 's';\n particle.style.animationDuration = (18 + Math.random() * 6) + 's';\n \n const size = 3 + Math.random() * 2;\n particle.style.width = size + 'px';\n particle.style.height = size + 'px';\n \n particlesContainer.appendChild(particle);\n }\n\n \/\/ Animate elements on scroll\n const observerOptions = {\n threshold: 0.1,\n rootMargin: '0px 0px -100px 0px'\n };\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.style.opacity = '1';\n entry.target.style.transform = 'translateY(0)';\n }\n });\n }, observerOptions);<\/p>\n<p> \/\/ Observe initiative items\n const animatedElements = document.querySelectorAll('.initiatives-section-wrapper .initiative-item');\n animatedElements.forEach(el => {\n el.style.opacity = '0';\n el.style.transform = 'translateY(30px)';\n el.style.transition = 'all 0.6s ease';\n observer.observe(el);\n });\n});\n<\/script><br \/>\n<\/body><br \/>\n<\/html>\n<\/div>\n<div>\n<p> <!DOCTYPE html><br \/>\n<html lang=\"en\"><br \/>\n<head><br \/>\n<meta charset=\"UTF-8\"><br \/>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><br \/>\n<title>BIFA+ President Block<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\n<style>\n\/* ========= PRESIDENT SECTION WRAPPER - ISOLATED & SEAMLESS ========= *\/\n.president-section-wrapper {\n \/* Identical CSS Variables - matching mission section exactly *\/\n --bifa-deep-navy: #0A1F44;\n --bifa-heritage-gold: #D4AF37;\n --bifa-civic-green: #1D6143;\n --bifa-bright-white: #FFFFFF;\n --bifa-soft-black: #1A1A1A;<\/p>\n<p> \/* Additional colors for better readability *\/\n --bifa-gray-light: #F8F9FA;\n --bifa-gray-medium: #E9ECEF;\n --bifa-gray: #6C757D;\n --bifa-gray-dark: #495057;<\/p>\n<p> \/* Official BIFA+ Fonts *\/\n --bifa-font-heading: 'Montserrat', sans-serif;\n --bifa-font-body: 'Poppins', sans-serif;<\/p>\n<p> \/* Premium shadows and effects *\/\n --bifa-shadow-sm: 0 2px 8px rgba(10, 31, 68, 0.08);\n --bifa-shadow-md: 0 8px 24px rgba(10, 31, 68, 0.12);\n --bifa-shadow-lg: 0 16px 48px rgba(10, 31, 68, 0.16);\n --bifa-shadow-xl: 0 25px 80px rgba(10, 31, 68, 0.15);\n --bifa-shadow-gold: 0 15px 40px rgba(212, 175, 55, 0.3);\n --bifa-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);<\/p>\n<p> \/* SEAMLESS INTEGRATION - same as mission *\/\n width: 100vw;\n position: relative;\n left: 50%;\n margin-left: -50vw;\n background: radial-gradient(ellipse 120% 80% at center bottom, \n rgba(255, 255, 255, 1) 0%,\n rgba(248, 249, 250, 0.95) 20%,\n rgba(248, 249, 250, 0.8) 40%,\n rgba(248, 249, 250, 0.5) 60%,\n rgba(248, 249, 250, 0.2) 80%,\n transparent 100%\n );\n overflow: hidden;\n}<\/p>\n<p>\/* NO top border - seamless connection to mission section *\/\n.president-section-wrapper::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: transparent;\n z-index: 100;\n}<\/p>\n<p>\/* Bottom connection line for next section *\/\n.president-section-wrapper::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: linear-gradient(90deg, \n transparent 0%, \n rgba(212, 175, 55, 0.3) 25%, \n rgba(212, 175, 55, 0.6) 50%, \n rgba(212, 175, 55, 0.3) 75%,\n transparent 100%\n );\n z-index: 100;\n}<\/p>\n<p>\/* ========= RESET - ONLY FOR THIS SECTION ========= *\/\n.president-section-wrapper * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}<\/p>\n<p>.president-section-wrapper {\n font-family: var(--bifa-font-body);\n color: var(--bifa-soft-black);\n line-height: 1.6;\n}<\/p>\n<p>\/* ========= PRESIDENT SECTION ========= *\/\n.president-section-wrapper .president-section {\n padding: 100px 0;\n background: transparent;\n position: relative;\n z-index: 10;\n}<\/p>\n<p>.president-section-wrapper .president-container {\n width: 100%;\n margin: 0;\n padding: 0 5%;\n text-align: center;\n position: relative;\n z-index: 1;\n}<\/p>\n<p>\/* Section Header *\/\n.president-section-wrapper .section-header {\n text-align: center;\n margin-bottom: 60px;\n animation: presidentFadeIn 1.2s ease-out;\n}<\/p>\n<p>@keyframes presidentFadeIn {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>.president-section-wrapper .section-title {\n font-family: var(--bifa-font-heading);\n font-size: clamp(2.5rem, 4vw, 3.5rem);\n font-weight: 900;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n margin-bottom: 20px;\n letter-spacing: -0.02em;\n}<\/p>\n<p>.president-section-wrapper .section-subtitle {\n font-family: var(--bifa-font-body);\n font-size: clamp(1rem, 1.5vw, 1.2rem);\n color: var(--bifa-soft-black);\n max-width: 800px;\n margin: 0 auto;\n line-height: 1.8;\n font-weight: 400;\n}<\/p>\n<p>\/* President Content - No borders, full width *\/\n.president-section-wrapper .president-content-area {\n width: 100%;\n position: relative;\n z-index: 2;\n background: transparent;\n padding: 0;\n animation: presidentContentFadeIn 1s ease-out 0.3s both;\n}<\/p>\n<p>@keyframes presidentContentFadeIn {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>\/* President Photo *\/\n.president-section-wrapper .president-photo {\n width: 280px;\n height: 350px;\n margin: 0 auto 40px;\n position: relative;\n}<\/p>\n<p>.president-section-wrapper .photo-frame {\n width: 100%;\n height: 100%;\n position: relative;\n overflow: hidden;\n border-radius: 0 45% 0 45%;\n box-shadow: var(--bifa-shadow-xl);\n background: var(--bifa-bright-white);\n transition: var(--bifa-transition);\n}<\/p>\n<p>.president-section-wrapper .photo-frame::before {\n content: '';\n position: absolute;\n top: -5px;\n left: -5px;\n right: -5px;\n bottom: -5px;\n background: linear-gradient(135deg, \n var(--bifa-heritage-gold) 0%, \n var(--bifa-heritage-gold) 25%,\n var(--bifa-deep-navy) 50%,\n var(--bifa-heritage-gold) 75%, \n var(--bifa-heritage-gold) 100%\n );\n border-radius: 0 45% 0 45%;\n z-index: -1;\n animation: presidentGradientRotate 8s linear infinite;\n}<\/p>\n<p>@keyframes presidentGradientRotate {\n 0% { filter: hue-rotate(0deg); }\n 100% { filter: hue-rotate(360deg); }\n}<\/p>\n<p>.president-section-wrapper .photo-frame img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: var(--bifa-transition);\n}<\/p>\n<p>.president-section-wrapper .photo-frame:hover {\n transform: translateY(-5px);\n box-shadow: var(--bifa-shadow-gold);\n}<\/p>\n<p>.president-section-wrapper .photo-frame:hover img {\n transform: scale(1.05);\n}<\/p>\n<p>\/* Title decoration matching mission style *\/\n.president-section-wrapper .title-decoration {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 20px;\n margin-bottom: 25px;\n}<\/p>\n<p>.president-section-wrapper .gold-line {\n width: 80px;\n height: 3px;\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent);\n animation: presidentPulse 2s ease-in-out infinite;\n}<\/p>\n<p>@keyframes presidentPulse {\n 0%, 100% {\n opacity: 0.6;\n transform: scaleX(1);\n }\n 50% {\n opacity: 1;\n transform: scaleX(1.2);\n }\n}<\/p>\n<p>.president-section-wrapper .president-title {\n font-family: var(--bifa-font-heading);\n font-size: 0.9rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 4px;\n color: var(--bifa-heritage-gold);\n}<\/p>\n<p>.president-section-wrapper .president-name {\n font-family: var(--bifa-font-heading);\n font-size: clamp(2rem, 3vw, 2.8rem);\n font-weight: 900;\n color: var(--bifa-deep-navy);\n margin-bottom: 30px;\n line-height: 1.2;\n position: relative;\n transition: var(--bifa-transition);\n}<\/p>\n<p>.president-section-wrapper .president-name::after {\n content: '';\n position: absolute;\n bottom: -10px;\n left: 50%;\n transform: translateX(-50%);\n width: 100px;\n height: 3px;\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent);\n border-radius: 2px;\n animation: presidentLineGrow 1.5s ease-out 1s both;\n}<\/p>\n<p>@keyframes presidentLineGrow {\n from { width: 0; }\n to { width: 100px; }\n}<\/p>\n<p>.president-section-wrapper .president-name:hover {\n color: var(--bifa-heritage-gold);\n transform: translateY(-2px);\n}<\/p>\n<p>.president-section-wrapper .president-description {\n font-family: var(--bifa-font-body);\n font-size: 1.1rem;\n line-height: 1.9;\n color: var(--bifa-soft-black);\n margin-bottom: 40px;\n max-width: 900px;\n margin-left: auto;\n margin-right: auto;\n text-align: left;\n}<\/p>\n<p>.president-section-wrapper .president-description .intro-text {\n font-size: 1.2rem;\n margin-bottom: 40px;\n text-align: center;\n font-weight: 500;\n}<\/p>\n<p>.president-section-wrapper .president-description .highlight {\n background: linear-gradient(135deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n font-weight: 600;\n position: relative;\n}<\/p>\n<p>.president-section-wrapper .president-description .highlight::after {\n content: '';\n position: absolute;\n bottom: -2px;\n left: 0;\n width: 100%;\n height: 2px;\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent);\n opacity: 0.3;\n}<\/p>\n<p>\/* Content sections *\/\n.president-section-wrapper .philosophy-section,\n.president-section-wrapper .vision-section,\n.president-section-wrapper .leadership-section,\n.president-section-wrapper .impact-section {\n margin-bottom: 35px;\n padding: 25px;\n background: rgba(248, 249, 250, 0.5);\n border-radius: 15px;\n border-left: 4px solid var(--bifa-heritage-gold);\n transition: var(--bifa-transition);\n}<\/p>\n<p>.president-section-wrapper .philosophy-section:hover,\n.president-section-wrapper .vision-section:hover,\n.president-section-wrapper .leadership-section:hover,\n.president-section-wrapper .impact-section:hover {\n background: rgba(248, 249, 250, 0.8);\n transform: translateX(5px);\n box-shadow: var(--bifa-shadow-sm);\n}<\/p>\n<p>.president-section-wrapper .section-heading {\n font-family: var(--bifa-font-heading);\n font-size: 1.3rem;\n font-weight: 700;\n color: var(--bifa-deep-navy);\n margin-bottom: 15px;\n position: relative;\n padding-bottom: 8px;\n}<\/p>\n<p>.president-section-wrapper .section-heading::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 60px;\n height: 2px;\n background: var(--bifa-heritage-gold);\n border-radius: 1px;\n}<\/p>\n<p>.president-section-wrapper .quote-text {\n font-family: var(--bifa-font-heading);\n font-size: 1.4rem;\n font-weight: 600;\n color: var(--bifa-heritage-gold);\n font-style: italic;\n text-align: center;\n margin: 20px 0;\n padding: 20px;\n background: rgba(212, 175, 55, 0.05);\n border-radius: 10px;\n position: relative;\n}<\/p>\n<p>.president-section-wrapper .quote-text::before {\n content: '\"';\n position: absolute;\n top: -10px;\n left: 15px;\n font-size: 3rem;\n color: var(--bifa-heritage-gold);\n opacity: 0.3;\n}<\/p>\n<p>.president-section-wrapper .quote-text::after {\n content: '\"';\n position: absolute;\n bottom: -25px;\n right: 15px;\n font-size: 3rem;\n color: var(--bifa-heritage-gold);\n opacity: 0.3;\n}<\/p>\n<p>\/* Action Buttons - matching mission style *\/\n.president-section-wrapper .action-row {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 25px;\n margin-top: 50px;\n}<\/p>\n<p>.president-section-wrapper .btn-elegant {\n padding: 16px 35px;\n text-decoration: none;\n font-size: 1rem;\n font-weight: 600;\n border-radius: 50px;\n display: inline-flex;\n align-items: center;\n gap: 10px;\n transition: var(--bifa-transition);\n position: relative;\n overflow: hidden;\n text-transform: uppercase;\n letter-spacing: 1px;\n font-family: var(--bifa-font-heading);\n}<\/p>\n<p>.president-section-wrapper .btn-primary {\n background: linear-gradient(135deg, var(--bifa-heritage-gold) 0%, var(--bifa-heritage-gold) 100%);\n color: var(--bifa-bright-white);\n box-shadow: var(--bifa-shadow-gold);\n border: 2px solid transparent;\n}<\/p>\n<p>.president-section-wrapper .btn-primary::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(135deg, var(--bifa-deep-navy), var(--bifa-deep-navy));\n opacity: 0;\n transition: opacity 0.4s ease;\n}<\/p>\n<p>.president-section-wrapper .btn-primary:hover::before {\n opacity: 1;\n}<\/p>\n<p>.president-section-wrapper .btn-primary span,\n.president-section-wrapper .btn-primary svg {\n position: relative;\n z-index: 1;\n}<\/p>\n<p>.president-section-wrapper .btn-primary:hover {\n transform: translateY(-3px);\n box-shadow: 0 20px 40px rgba(212, 175, 55, 0.4);\n}<\/p>\n<p>.president-section-wrapper .btn-secondary {\n background: transparent;\n color: var(--bifa-deep-navy);\n border: 2px solid var(--bifa-deep-navy);\n}<\/p>\n<p>.president-section-wrapper .btn-secondary:hover {\n background: var(--bifa-deep-navy);\n color: var(--bifa-bright-white);\n transform: translateY(-3px);\n box-shadow: var(--bifa-shadow-lg);\n}<\/p>\n<p>\/* Floating particles - matching mission *\/\n.president-section-wrapper .bg-particles {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow: hidden;\n z-index: 1;\n pointer-events: none;\n}<\/p>\n<p>.president-section-wrapper .particle {\n position: absolute;\n width: 4px;\n height: 4px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\n border-radius: 50%;\n animation: presidentFloat 20s infinite linear;\n box-shadow: 0 0 12px rgba(212, 175, 55, 0.3);\n opacity: 0.3;\n}<\/p>\n<p>@keyframes presidentFloat {\n 0% {\n transform: translateY(100vh) translateX(0);\n opacity: 0;\n }\n 15% { opacity: 0.3; }\n 85% { opacity: 0.3; }\n 100% {\n transform: translateY(-100vh) translateX(30px);\n opacity: 0;\n }\n}<\/p>\n<p>\/* Fallback for browsers without background-clip support *\/\n@supports not (background-clip: text) {\n .president-section-wrapper .section-title,\n .president-section-wrapper .highlight {\n color: var(--bifa-heritage-gold) !important;\n background: none !important;\n }\n}<\/p>\n<p>\/* ========= RESPONSIVE - MATCHING MISSION ========= *\/\n@media (max-width: 1200px) {\n .president-section-wrapper .president-container {\n padding: 0 4%;\n }\n}<\/p>\n<p>@media (max-width: 768px) {\n .president-section-wrapper .president-container {\n padding: 0 3%;\n }<\/p>\n<p> .president-section-wrapper .president-section {\n padding: 60px 0;\n }<\/p>\n<p> .president-section-wrapper .president-photo {\n width: 240px;\n height: 300px;\n }<\/p>\n<p> .president-section-wrapper .section-title {\n font-size: 2rem;\n }<\/p>\n<p> .president-section-wrapper .president-name {\n font-size: 1.8rem;\n }<\/p>\n<p> .president-section-wrapper .president-description {\n font-size: 1rem;\n }<\/p>\n<p> .president-section-wrapper .president-description .intro-text {\n font-size: 1.1rem;\n }<\/p>\n<p> .president-section-wrapper .section-heading {\n font-size: 1.2rem;\n }<\/p>\n<p> .president-section-wrapper .quote-text {\n font-size: 1.2rem;\n padding: 15px;\n }<\/p>\n<p> .president-section-wrapper .philosophy-section,\n .president-section-wrapper .vision-section,\n .president-section-wrapper .leadership-section,\n .president-section-wrapper .impact-section {\n padding: 20px 15px;\n margin-bottom: 25px;\n }<\/p>\n<p> .president-section-wrapper .action-row {\n flex-direction: column;\n gap: 15px;\n }<\/p>\n<p> .president-section-wrapper .btn-elegant {\n width: 100%;\n justify-content: center;\n }\n}<\/p>\n<p>@media (max-width: 480px) {\n .president-section-wrapper .president-container {\n padding: 0 2%;\n }<\/p>\n<p> .president-section-wrapper .president-photo {\n width: 200px;\n height: 260px;\n }<\/p>\n<p> .president-section-wrapper .president-name {\n font-size: 1.5rem;\n }<\/p>\n<p> .president-section-wrapper .president-description {\n font-size: 0.95rem;\n }<\/p>\n<p> .president-section-wrapper .president-description .intro-text {\n font-size: 1rem;\n }<\/p>\n<p> .president-section-wrapper .section-heading {\n font-size: 1.1rem;\n }<\/p>\n<p> .president-section-wrapper .quote-text {\n font-size: 1.1rem;\n padding: 12px;\n }<\/p>\n<p> .president-section-wrapper .philosophy-section,\n .president-section-wrapper .vision-section,\n .president-section-wrapper .leadership-section,\n .president-section-wrapper .impact-section {\n padding: 15px 12px;\n margin-bottom: 20px;\n }<\/p>\n<p> .president-section-wrapper .btn-elegant {\n padding: 14px 25px;\n font-size: 0.9rem;\n }<\/p>\n<p> .president-section-wrapper .title-decoration {\n gap: 15px;\n }<\/p>\n<p> .president-section-wrapper .gold-line {\n width: 60px;\n }<\/p>\n<p> .president-section-wrapper .president-title {\n font-size: 0.8rem;\n letter-spacing: 3px;\n }\n}\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"president-section-wrapper\" id=\"founder\">\n <\/p>\n<div class=\"bg-particles\"><\/div>\n<p> <\/p>\n<section class=\"president-section\">\n<div class=\"president-container\">\n <\/p>\n<div class=\"section-header\">\n<h2 class=\"section-title\">\u0939\u092e\u093e\u0930\u0947 \u0938\u0902\u0938\u094d\u0925\u093e\u092a\u0915<\/h2>\n<p class=\"section-subtitle\">\n \u0935\u0948\u0936\u094d\u0935\u093f\u0915 \u0926\u0915\u094d\u0937\u093f\u0923 \u092e\u0947\u0902 \u0905\u0902\u0924\u0930\u094d\u0930\u093e\u0937\u094d\u091f\u094d\u0930\u0940\u092f \u0916\u0947\u0932 \u0915\u0942\u091f\u0928\u0940\u0924\u093f \u0914\u0930 \u0938\u093e\u0902\u0938\u094d\u0915\u0943\u0924\u093f\u0915 \u0938\u0939\u092f\u094b\u0917 \u0915\u094b \u0906\u0917\u0947 \u092c\u0922\u093c\u093e\u0928\u0947 \u0935\u093e\u0932\u093e \u0926\u0942\u0930\u0926\u0930\u094d\u0936\u0940 \u0928\u0947\u0924\u0943\u0924\u094d\u0935\u0964\n <\/p>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"president-card\">\n<div class=\"president-card-content\">\n <\/p>\n<div class=\"president-photo\">\n<div class=\"photo-frame\">\n <img decoding=\"async\" src=\"https:\/\/bifa.ai\/wp-content\/themes\/yootheme-child\/assets\/images\/Mr\/main-photo.jpg\" \n alt=\"Dr. Salim Humaid Almazaini\"\n data-no-translation=\"true\"\n data-no-dynamic-translation=\"true\">\n <\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"title-decoration\">\n<div class=\"gold-line\"><\/div>\n<h3 class=\"president-title\">\u0938\u0902\u0938\u094d\u0925\u093e\u092a\u0915 \u090f\u0935\u0902 \u0905\u0927\u094d\u092f\u0915\u094d\u0937<\/h3>\n<div class=\"gold-line\"><\/div>\n<\/p><\/div>\n<h1 class=\"president-name\">\u0921\u0949. \u0938\u0932\u0940\u092e \u0939\u0941\u092e\u0948\u0926 \u0905\u0932\u092e\u091c\u093c\u0948\u0928\u0940<\/h1>\n<div class=\"president-description\">\n<p class=\"intro-text\">\n A <span class=\"highlight\">\u0926\u0942\u0930\u0926\u0930\u094d\u0936\u0940 \u0928\u0947\u0924\u093e<\/span> in modern sports diplomacy and the architect of an international movement that unites youth through football, culture, and education. Based in Dubai, the founder has created what represents one of the most ambitious <span class=\"highlight\">\u0935\u0948\u0936\u094d\u0935\u093f\u0915 \u0926\u0915\u094d\u0937\u093f\u0923 \u0915\u094b \u091c\u094b\u0921\u093c\u0928\u0947 \u0935\u093e\u0932\u0940 \u0938\u093e\u0902\u0938\u094d\u0915\u0943\u0924\u093f\u0915-\u0916\u0947\u0932 \u092a\u0939\u0932<\/span>.\n <\/p>\n<div class=\"philosophy-section\">\n<h4 class=\"section-heading\">Philosophy<\/h4>\n<p class=\"quote-text\">"\u0939\u092e \u0938\u093f\u0930\u094d\u092b\u093c \u0916\u0947\u0932 \u0928\u0939\u0940\u0902 \u0916\u0947\u0932 \u0930\u0939\u0947 \u0939\u0948\u0902\u0964 \u0939\u092e \u092d\u0935\u093f\u0937\u094d\u092f \u0915\u093e \u0928\u093f\u0930\u094d\u092e\u093e\u0923 \u0915\u0930 \u0930\u0939\u0947 \u0939\u0948\u0902\u0964"<\/p>\n<p>This powerful statement encapsulates the belief that football transcends sport\u2014it becomes a <span class=\"highlight\">\u0936\u093e\u0902\u0924\u093f, \u0938\u092e\u091d \u0914\u0930 \u0905\u0902\u0924\u0930\u094d\u0930\u093e\u0937\u094d\u091f\u094d\u0930\u0940\u092f \u0938\u0939\u092f\u094b\u0917 \u0915\u093e \u092e\u093e\u0927\u094d\u092f\u092e<\/span>. The approach transforms the beautiful game into a tool for soft diplomacy and cultural bridge-building.<\/p>\n<\/p><\/div>\n<div class=\"vision-section\">\n<h4 class=\"section-heading\">\u0915\u093e\u0930\u094d\u092f\u0928\u0940\u0924\u093f\u0915 \u0926\u0943\u0937\u094d\u091f\u093f<\/h4>\n<p>Under this leadership, BIFA+ has evolved into a comprehensive international ecosystem that connects youth through multiple channels: <span class=\"highlight\">\u0916\u0947\u0932 \u0909\u0924\u094d\u0915\u0943\u0937\u094d\u091f\u0924\u093e, \u0936\u0948\u0915\u094d\u0937\u093f\u0915 \u0909\u0928\u094d\u0928\u0924\u093f, \u0938\u093e\u0902\u0938\u094d\u0915\u0943\u0924\u093f\u0915 \u0906\u0926\u093e\u0928-\u092a\u094d\u0930\u0926\u093e\u0928 \u0914\u0930 \u0905\u0924\u094d\u092f\u093e\u0927\u0941\u0928\u093f\u0915 \u092a\u094d\u0930\u094c\u0926\u094d\u092f\u094b\u0917\u093f\u0915\u0940 \u090f\u0915\u0940\u0915\u0930\u0923<\/span>\u092f\u0939 \u0917\u0920\u092c\u0902\u0927\u0928 \u0935\u0948\u0936\u094d\u0935\u093f\u0915 \u0926\u0915\u094d\u0937\u093f\u0923 \u0915\u0947 \u0926\u0947\u0936\u094b\u0902 \u0915\u0947 \u092c\u0940\u091a \u0935\u093f\u0915\u093e\u0938, \u0936\u093e\u0902\u0924\u093f \u0914\u0930 \u0938\u093e\u092e\u093e\u091c\u093f\u0915 \u0938\u092e\u093e\u0935\u0947\u0936 \u0915\u094b \u092c\u0922\u093c\u093e\u0935\u093e \u0926\u0947\u0928\u0947 \u0935\u093e\u0932\u0947 \u090f\u0915 \u0938\u094d\u0935\u0924\u0902\u0924\u094d\u0930, \u0935\u093f\u0915\u0947\u0928\u094d\u0926\u094d\u0930\u0940\u0915\u0943\u0924 \u092e\u0902\u091a \u0915\u0947 \u0930\u0942\u092a \u092e\u0947\u0902 \u0915\u093e\u0930\u094d\u092f \u0915\u0930\u0924\u093e \u0939\u0948\u0964<\/p>\n<\/p><\/div>\n<div class=\"leadership-section\">\n<h4 class=\"section-heading\">\u0916\u0947\u0932 \u0915\u0942\u091f\u0928\u0940\u0924\u093f \u092e\u0947\u0902 \u0928\u0935\u093e\u091a\u093e\u0930<\/h4>\n<p>BIFA+ is envisioned as more than a sports organization\u2014it’s a movement that uses football as a <span class=\"highlight\">\u0936\u093e\u0902\u0924\u093f, \u0938\u093e\u0902\u0938\u094d\u0915\u0943\u0924\u093f\u0915 \u0938\u092e\u091d \u0914\u0930 \u092f\u0941\u0935\u093e \u0938\u0936\u0915\u094d\u0924\u093f\u0915\u0930\u0923 \u0915\u094b \u092c\u0922\u093c\u093e\u0935\u093e \u0926\u0947\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0938\u093e\u0930\u094d\u0935\u092d\u094c\u092e\u093f\u0915 \u092d\u093e\u0937\u093e<\/span>. This initiative represents a new model of international cooperation, where sport becomes a catalyst for positive social change and diplomatic engagement.<\/p>\n<\/p><\/div>\n<div class=\"impact-section\">\n<h4 class=\"section-heading\">\u0915\u0932 \u0915\u093e \u0928\u093f\u0930\u094d\u092e\u093e\u0923<\/h4>\n<p>Through BIFA+, a legacy is being created that extends far beyond football pitches. The platform enables young people from diverse backgrounds to connect, learn, and collaborate, fostering the next generation of <span class=\"highlight\">\u0935\u0948\u0936\u094d\u0935\u093f\u0915 \u0928\u093e\u0917\u0930\u093f\u0915 \u091c\u094b \u0938\u092e\u091d\u0924\u0947 \u0939\u0948\u0902 \u0915\u093f \u0938\u0939\u092f\u094b\u0917 \u092a\u094d\u0930\u0924\u093f\u0938\u094d\u092a\u0930\u094d\u0927\u093e \u092a\u0930 \u092d\u093e\u0930\u0940 \u092a\u0921\u093c\u0924\u093e \u0939\u0948<\/span> \u090f\u0915 \u092c\u0947\u0939\u0924\u0930 \u0935\u093f\u0936\u094d\u0935 \u0915\u0947 \u0928\u093f\u0930\u094d\u092e\u093e\u0923 \u092e\u0947\u0902.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<\/div>\n<p><script>\ndocument.addEventListener('DOMContentLoaded', () => {\n \/\/ Create floating particles - matching mission section\n const particlesContainer = document.querySelector('.president-section-wrapper .bg-particles');\n const particleCount = 8;<\/p>\n<p> for (let i = 0; i < particleCount; i++) {\n const particle = document.createElement('div');\n particle.className = 'particle';\n particle.style.left = Math.random() * 100 + '%';\n particle.style.animationDelay = Math.random() * 20 + 's';\n particle.style.animationDuration = (18 + Math.random() * 6) + 's';\n \n const size = 3 + Math.random() * 2;\n particle.style.width = size + 'px';\n particle.style.height = size + 'px';\n \n particlesContainer.appendChild(particle);\n }\n\n \/\/ Animate elements on scroll - matching mission behavior\n const observerOptions = {\n threshold: 0.1,\n rootMargin: '0px 0px -100px 0px'\n };\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.style.opacity = '1';\n entry.target.style.transform = 'translateY(0)';\n }\n });\n }, observerOptions);<\/p>\n<p> \/\/ Observe animated elements\n const animatedElements = document.querySelectorAll('.president-section-wrapper .president-content-area, .president-section-wrapper .section-header');\n animatedElements.forEach(el => {\n observer.observe(el);\n });<\/p>\n<p> \/\/ Button hover effects\n document.querySelectorAll('.president-section-wrapper .btn-elegant').forEach(button => {\n button.addEventListener('mouseenter', (e) => {\n const rect = button.getBoundingClientRect();\n const x = e.clientX - rect.left;\n const y = e.clientY - rect.top;<\/p>\n<p> const ripple = document.createElement('div');\n ripple.style.cssText = `\n position: absolute;\n width: 100px;\n height: 100px;\n background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);\n left: ${x - 50}px;\n top: ${y - 50}px;\n pointer-events: none;\n opacity: 0;\n transition: opacity 0.3s ease;\n border-radius: 50%;\n z-index: 0;\n `;<\/p>\n<p> button.appendChild(ripple);\n setTimeout(() => { ripple.style.opacity = '1'; }, 10);<\/p>\n<p> button.addEventListener('mouseleave', () => {\n ripple.style.opacity = '0';\n setTimeout(() => ripple.remove(), 300);\n }, { once: true });\n });\n });<\/p>\n<p> \/\/ Simple image loading effect\n const presidentImage = document.querySelector('.president-section-wrapper .photo-frame img');\n if (presidentImage) {\n presidentImage.style.opacity = '0';\n presidentImage.style.transition = 'opacity 0.8s ease';<\/p>\n<p> if (presidentImage.complete) {\n presidentImage.style.opacity = '1';\n } else {\n presidentImage.addEventListener('load', function() {\n this.style.opacity = '1';\n });\n }\n }<\/p>\n<p> \/\/ Smooth scroll for anchor links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n const target = document.querySelector(this.getAttribute('href'));\n if (target) {\n target.scrollIntoView({\n behavior: 'smooth',\n block: 'start'\n });\n }\n });\n });\n});\n<\/script><\/p>\n<p><\/body><br \/>\n<\/html>\n<\/div>\n<div>\n <div class=\"bifa-team-section-wrapper\" id=\"core-team\">\n <div class=\"bifa-team-bg-particles\"><\/div>\n <div class=\"bifa-team-pattern-overlay\"><\/div>\n\n <section class=\"bifa-team-section\">\n <div class=\"bifa-team-container\">\n <div class=\"bifa-team-header\">\n <h2 class=\"bifa-team-title\">\u092e\u0942\u0932 \u0938\u092e\u0942\u0939<\/h2>\n <p class=\"bifa-team-subtitle\">\n Meet the dedicated professionals driving BIFA+'s mission to unite the Global South through football, innovation, and cultural exchange.\n <\/p>\n <\/div>\n\n <div class=\"bifa-team-coming-soon\">\n <div class=\"bifa-team-coming-icon\">\ud83d\udc65<\/div>\n\n <h3 class=\"bifa-team-coming-title\">\u0939\u092e\u093e\u0930\u0940 \u091f\u0940\u092e \u092c\u0922\u093c \u0930\u0939\u0940 \u0939\u0948<\/h3>\n\n <p class=\"bifa-team-coming-text\">\n \u0939\u092e \u0935\u0930\u094d\u0924\u092e\u093e\u0928 \u092e\u0947\u0902 \u090f\u0915 \u0935\u093f\u0936\u094d\u0935 \u0938\u094d\u0924\u0930\u0940\u092f \u091f\u0940\u092e \u0915\u093e \u0917\u0920\u0928 \u0915\u0930 \u0930\u0939\u0947 \u0939\u0948\u0902 <span class=\"bifa-highlight\">\u0916\u0947\u0932 \u092a\u0947\u0936\u0947\u0935\u0930, \u092a\u094d\u0930\u094c\u0926\u094d\u092f\u094b\u0917\u093f\u0915\u0940 \u0928\u0935\u092a\u094d\u0930\u0935\u0930\u094d\u0924\u0915 \u0914\u0930 \u0938\u093e\u0902\u0938\u094d\u0915\u0943\u0924\u093f\u0915 \u0930\u093e\u091c\u0926\u0942\u0924<\/span> \u091c\u094b \u0935\u0948\u0936\u094d\u0935\u093f\u0915 \u0926\u0915\u094d\u0937\u093f\u0923 \u092e\u0947\u0902 \u092f\u0941\u0935\u093e \u0916\u0947\u0932\u094b\u0902 \u0915\u094b \u092c\u0926\u0932\u0928\u0947 \u0915\u0947 \u0939\u092e\u093e\u0930\u0947 \u0926\u0943\u0937\u094d\u091f\u093f\u0915\u094b\u0923 \u0915\u094b \u0938\u093e\u091d\u093e \u0915\u0930\u0924\u0947 \u0939\u0948\u0902\u0964\n <\/p>\n\n <p class=\"bifa-team-coming-text\">\n As we prepare for our official launch, we're carefully selecting individuals who bring not just expertise, but also <span class=\"bifa-highlight\">\u091c\u0941\u0928\u0942\u0928, \u0930\u091a\u0928\u093e\u0924\u094d\u092e\u0915\u0924\u093e \u0914\u0930 \u092a\u094d\u0930\u0924\u093f\u092c\u0926\u094d\u0927\u0924\u093e<\/span> \u092b\u0941\u091f\u092c\u0949\u0932 \u0915\u0947 \u092e\u093e\u0927\u094d\u092f\u092e \u0938\u0947 \u092a\u0941\u0932 \u092c\u0928\u093e\u0928\u0947 \u0915\u0947 \u0939\u092e\u093e\u0930\u0947 \u092e\u093f\u0936\u0928 \u0915\u0947 \u0932\u093f\u090f\u0964\n <\/p>\n\n <div class=\"bifa-team-notify-box\">\n <h4 class=\"bifa-team-notify-title\">\u0938\u092c\u0938\u0947 \u092a\u0939\u0932\u0947 \u091c\u093e\u0928\u0947\u0902<\/h4>\n <p class=\"bifa-team-notify-text\">\n Our complete team roster will be unveiled at the official BIFA+ launch.\n Get in touch to learn more about our revolutionary movement.\n <\/p>\n\n <a href=\"https:\/\/bifa.ai\/hi\/contacts\/\" class=\"bifa-team-btn-notify\">\n <span>\u091c\u0941\u0921\u093c\u0947 \u0930\u0939\u094b<\/span>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <\/div>\n\n <script>\n (function() {\n const container = document.querySelector('.bifa-team-bg-particles');\n if (container) {\n for (let i = 0; i < 6; i++) {\n const particle = document.createElement('div');\n particle.className = 'bifa-team-particle';\n particle.style.left = Math.random() * 100 + '%';\n particle.style.animationDelay = Math.random() * 20 + 's';\n particle.style.animationDuration = (18 + Math.random() * 6) + 's';\n container.appendChild(particle);\n }\n }\n })();\n <\/script>\n <\/div>\n<p><br \/>\n\\n <\/p>\n<div class=\"\\\"bg-particles\\\"\"><\\\/div>\\n\\n \\n <\/p>\n<section class=\"\\\"hero-section\\\"\">\\n <\/p>\n<div class=\"\\\"content-container\\\"\">\\n \\n <\/p>\n<div class=\"\\\"content-side\\\"\">\\n <\/p>\n<h1 class=\"\\\"main-heading\\\"\">BIFA+ \u0915\u0947 \u092c\u093e\u0930\u0947 \u092e\u0947\u0902<\\\/h1>\\n <\/p>\n<p class=\"\\\"subtitle\\\"\">\u092c\u094d\u0930\u093f\u0915\u094d\u0938 \u0905\u0902\u0924\u0930\u094d\u0930\u093e\u0937\u094d\u091f\u094d\u0930\u0940\u092f \u092b\u0941\u091f\u092c\u0949\u0932 \u0917\u0920\u092c\u0902\u0927\u0928<\\\/p>\\n <\/p>\n<p class=\"\\\"slogan\\\"\">\\”Play with Spirit. Lead with Vision.\\”<\\\/p>\\n \\n <\/p>\n<p class=\"\\\"description\\\"\">\\n <span class=\"\\\"highlight\\\"\">\u092c\u0940\u0906\u0908\u090f\u092b\u090f+ (\u092c\u0940\u0906\u0908\u090f\u092b\u090f \u092a\u094d\u0932\u0938)<\\\/span> is an international sports and cultural initiative \\n that connects countries of the <span class=\"\\\"highlight\\\"\">\u0935\u0948\u0936\u094d\u0935\u093f\u0915 \u0926\u0915\u094d\u0937\u093f\u0923<\\\/span> through football, \\n education, technology, and people-to-people diplomacy. Founded by <span class=\"\\\"highlight\\\"\">\u0938\u0932\u0940\u092e \u0939\u0941\u092e\u0948\u0926 \u0905\u0932\u092e\u091c\u093c\u0948\u0928\u0940<\\\/span> \\n from the UAE, BIFA+ brings together <span class=\"\\\"highlight\\\"\">11 \u0930\u093e\u0937\u094d\u091f\u094d\u0930<\\\/span> in a visionary \\n non-profit alliance and professional operational platform designed to host events, \\n digital services, and youth development programs that shape a more unified and inclusive future.\\n <\\\/p>\\n\\n <\/p>\n<div class=\"\\\"stats-grid\\\"\">\\n <\/p>\n<div class=\"\\\"stat-card\\\"\">\\n <\/p>\n<div class=\"\\\"stat-number\\\"\">11<\\\/div>\\n <\/p>\n<div class=\"\\\"stat-label\\\"\">\u0938\u0926\u0938\u094d\u092f \u0930\u093e\u0937\u094d\u091f\u094d\u0930<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"stat-card\\\"\">\\n <\/p>\n<div class=\"\\\"stat-number\\\"\">3.8\u092c\u0940<\\\/div>\\n <\/p>\n<div class=\"\\\"stat-label\\\"\">\u091c\u0928\u0938\u0902\u0916\u094d\u092f\u093e \u0938\u0902\u092f\u0941\u0915\u094d\u0924<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"stat-card\\\"\">\\n <\/p>\n<div class=\"\\\"stat-number\\\"\">2024<\\\/div>\\n <\/p>\n<div class=\"\\\"stat-label\\\"\">\u0938\u094d\u0925\u093e\u092a\u093f\u0924<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"stat-card\\\"\">\\n <\/p>\n<div class=\"\\\"stat-number\\\"\">8<\\\/div>\\n <\/p>\n<div class=\"\\\"stat-label\\\"\">\u092e\u0941\u0916\u094d\u092f \u0915\u093e\u0930\u094d\u092f\u0915\u094d\u0930\u092e<\\\/div>\\n <\\\/div>\\n <\\\/div>\\n\\n <\/p>\n<div class=\"\\\"action-buttons\\\"\">\\n <a href=\"\\\"#our-mission\\\"\" class=\"\\\"cta-button\" primary\\\" role=\"\\\"button\\\"\">\u0939\u092e\u093e\u0930\u093e \u092e\u093f\u0936\u0928 \u091c\u093e\u0928\u0947\u0902<\\\/a>\\n <a href=\"\\\"\\\/initiatives\\\"\" class=\"\\\"cta-button\" secondary\\\" role=\"\\\"button\\\"\">\u092a\u0939\u0932\u094b\u0902 \u0915\u093e \u0905\u0928\u094d\u0935\u0947\u0937\u0923 \u0915\u0930\u0947\u0902<\\\/a>\\n <\\\/div>\\n <\\\/div>\\n\\n \\n <\/p>\n<div class=\"\\\"video-side\\\"\">\\n <\/p>\n<h2 class=\"\\\"video-section-title\\\"\">\u0916\u0947\u0932 \u0915\u0947 \u092e\u093e\u0927\u094d\u092f\u092e \u0938\u0947 \u0935\u0948\u0936\u094d\u0935\u093f\u0915 \u090f\u0915\u0924\u093e<\\\/h2>\\n <\/p>\n<p class=\"\\\"video-section-subtitle\\\"\">BIFA+ \u0915\u0947 \u0935\u093f\u091c\u093c\u0928 \u0915\u093e \u0905\u0928\u0941\u092d\u0935 \u0915\u0930\u0947\u0902 \u091c\u094b 11 \u0926\u0947\u0936\u094b\u0902 \u0914\u0930 3.8 \u092c\u093f\u0932\u093f\u092f\u0928 \u0932\u094b\u0917\u094b\u0902 \u0915\u094b \u091c\u094b\u0921\u093c\u0924\u093e \u0939\u0948<\\\/p>\\n \\n <\/p>\n<div class=\"\\\"video-wrapper\\\"\">\\n \\n <\/p>\n<div class=\"\\\"video-loading-overlay\\\"\" id=\"\\\"videoLoadingOverlay\\\"\">\\n <iframe \\n id=\"\\\"loadingIframe\\\"\\n\" class=\"\\\"loading-iframe\\\"\\n\" src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Logo\\\/Get.html\\\"\\n\" title=\"\\\"BIFA+\" loading screen\\\"\\n onload=\"\\\"handleIframeLoad()\\\"\\n\" onerror=\"\\\"handleIframeError()\\\"\">\\n <\\\/iframe>\\n \\n \\n <\/p>\n<div class=\"\\\"fallback-loader\\\"\" id=\"\\\"fallbackLoader\\\"\">\\n <\/p>\n<div class=\"\\\"loader-logo\\\"\">\\n <svg viewbox=\"\\\"0\" 0 200 200\\\" xmlns=\"\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\"\" aria-hidden=\"\\\"true\\\"\">\\n <defs>\\n <lineargradient id=\"\\\"logoGradient\\\"\" x1=\"\\\"0%\\\"\" y1=\"\\\"0%\\\"\" x2=\"\\\"100%\\\"\" y2=\"\\\"100%\\\"\">\\n <stop offset=\"\\\"0%\\\"\" style=\"\\\"stop-color:#D4AF37\\\"\\\/\">\\n <stop offset=\"\\\"100%\\\"\" style=\"\\\"stop-color:#D4AF37\\\"\\\/\">\\n <\\\/linearGradient>\\n <\\\/defs>\\n <circle cx=\"\\\"100\\\"\" cy=\"\\\"100\\\"\" r=\"\\\"90\\\"\" fill=\"\\\"url(#logoGradient)\\\"\" opacity=\"\\\"0.1\\\"\\\/\">\\n <circle cx=\"\\\"100\\\"\" cy=\"\\\"100\\\"\" r=\"\\\"70\\\"\" fill=\"\\\"url(#logoGradient)\\\"\" opacity=\"\\\"0.3\\\"\\\/\">\\n <circle cx=\"\\\"100\\\"\" cy=\"\\\"100\\\"\" r=\"\\\"50\\\"\" fill=\"\\\"url(#logoGradient)\\\"\\\/\">\\n <text x=\"\\\"100\\\"\" y=\"\\\"110\\\"\" text-anchor=\"\\\"middle\\\"\" fill=\"\\\"white\\\"\" font-family=\"\\\"Montserrat\\\"\" font-size=\"\\\"24\\\"\" font-weight=\"\\\"bold\\\"\">BIFA+<\\\/text>\\n <\\\/svg>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"loader-text\\\"\">BIFA+ \u0905\u0928\u0941\u092d\u0935 \u0932\u094b\u0921 \u0939\u094b \u0930\u0939\u093e \u0939\u0948\u2026<\\\/div>\\n <\/p>\n<div class=\"\\\"loader-progress\\\"\">\\n <\/p>\n<div class=\"\\\"loader-progress-bar\\\"\"><\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n\\n <video id=\"\\\"heroVideo\\\"\" autoplay muted loop playsinline preload=\"\\\"metadata\\\"\\n\" poster=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/video_poster.jpg\\\"\\n\" aria-label=\"\\\"BIFA+\" promotional video\\\">\\n<source src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/video.mp4\\\"\" type=\"\\\"video\\\/mp4\\\"\">\\n <span class=\"\\\"sr-only\\\"\">\u0906\u092a\u0915\u093e \u092c\u094d\u0930\u093e\u0909\u091c\u093c\u0930 \u092e\u0947\u0902 \u0935\u0940\u0921\u093f\u092f\u094b \u091f\u0948\u0917 \u0938\u092e\u0930\u094d\u0925\u093f\u0924 \u0928\u0939\u0940\u0902 \u0939\u0948\u0964<\\\/span>\\n <\\\/video>\\n\\n \\n <\/p>\n<div class=\"\\\"controls\\\"\" id=\"\\\"controls\\\"\" aria-label=\"\\\"Video\" controls\\\">\\n <\/p>\n<div class=\"\\\"controls-row\\\"\">\\n <button class=\"\\\"ctrl-btn\\\"\" id=\"\\\"playPause\\\"\" aria-label=\"\\\"Play\\\/Pause\" video\\\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" aria-hidden=\"\\\"true\\\"\"><path d=\"\\\"M8\" 5v14l11-7z\\\"\\><\\\/svg>\\n <\\\/button>\\n \\n <\/p>\n<div class=\"\\\"progress-container\\\"\">\\n <\/p>\n<div class=\"\\\"progress\\\"\" id=\"\\\"progress\\\"\" role=\"\\\"progressbar\\\"\" aria-label=\"\\\"Video\" progress\\\">\\n <\/p>\n<div class=\"\\\"progress-bar\\\"\" id=\"\\\"progressBar\\\"\"><\\\/div>\\n <\\\/div>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"time-display\\\"\" id=\"\\\"timeDisplay\\\"\" aria-live=\"\\\"polite\\\"\">0:00<\\\/div>\\n \\n <\/p>\n<div class=\"\\\"volume-container\\\"\">\\n <button class=\"\\\"ctrl-btn\\\"\" id=\"\\\"muteToggle\\\"\" aria-label=\"\\\"Mute\\\/Unmute\" video\\\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" aria-hidden=\"\\\"true\\\"\"><path d=\"\\\"M4\" 9v6h4l5 5v4l8 9h4z\\\"\\><\\\/svg>\\n <\\\/button>\\n <\/p>\n<div class=\"\\\"volume-slider\\\"\" id=\"\\\"volumeSlider\\\"\" role=\"\\\"slider\\\"\" aria-label=\"\\\"Volume\" control\\\">\\n <\/p>\n<div class=\"\\\"volume-bar\\\"\" id=\"\\\"volumeBar\\\"\"><\\\/div>\\n <\\\/div>\\n <\\\/div>\\n \\n <button class=\"\\\"fullscreen-btn\\\"\" id=\"\\\"fullscreenBtn\\\"\" aria-label=\"\\\"Toggle\" fullscreen\\\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" aria-hidden=\"\\\"true\\\"\"><path d=\"\\\"M7\" 14h5v5h5v-2h7v-3zm-2-4h2v7h3v5h5v5zm12 7h-3v2h5v-5h-2v3zm14 5v2h3v3h2v5h-5z\\\"\\><\\\/svg>\\n <\\\/button>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n\\n \\n <\/p>\n<div class=\"\\\"video-info\\\"\">\\n <\/p>\n<h3 class=\"\\\"video-title\\\"\">\u092b\u0941\u091f\u092c\u0949\u0932 \u0915\u0947 \u092e\u093e\u0927\u094d\u092f\u092e \u0938\u0947 11 \u0930\u093e\u0937\u094d\u091f\u094d\u0930 \u090f\u0915\u091c\u0941\u091f<\\\/h3>\\n <\/p>\n<div class=\"\\\"member-countries\\\"\" role=\"\\\"list\\\"\" aria-label=\"\\\"BIFA+\" member countries\\\">\\n <span class=\"\\\"country-tag\\\"\" role=\"\\\"listitem\\\"\">\\ud83c\\udde7\\ud83c\\uddf7 Brazil<\\\/span>\\n <span class=\"\\\"country-tag\\\"\" role=\"\\\"listitem\\\"\">\\ud83c\\udde6\\ud83c\\uddea UAE<\\\/span>\\n <span class=\"\\\"country-tag\\\"\" role=\"\\\"listitem\\\"\">\\ud83c\\uddf7\\ud83c\\uddfa Russia<\\\/span>\\n <span class=\"\\\"country-tag\\\"\" role=\"\\\"listitem\\\"\">\\ud83c\\udde8\\ud83c\\uddf3 China<\\\/span>\\n <span class=\"\\\"country-tag\\\"\" role=\"\\\"listitem\\\"\">\\ud83c\\uddee\\ud83c\\uddf3 India<\\\/span>\\n <span class=\"\\\"country-tag\\\"\" role=\"\\\"listitem\\\"\">\\ud83c\\uddff\\ud83c\\udde6 South Africa<\\\/span>\\n <span class=\"\\\"country-tag\\\"\" role=\"\\\"listitem\\\"\">\\ud83c\\uddf8\\ud83c\\udde6 Saudi Arabia<\\\/span>\\n <span class=\"\\\"country-tag\\\"\" role=\"\\\"listitem\\\"\">\\ud83c\\uddea\\ud83c\\uddec Egypt<\\\/span>\\n <span class=\"\\\"country-tag\\\"\" role=\"\\\"listitem\\\"\">\\ud83c\\uddee\\ud83c\\uddf7 Iran<\\\/span>\\n <span class=\"\\\"country-tag\\\"\" role=\"\\\"listitem\\\"\">\\ud83c\\uddea\\ud83c\\uddf9 Ethiopia<\\\/span>\\n <span class=\"\\\"country-tag\\\"\" role=\"\\\"listitem\\\"\">\\ud83c\\uddee\\ud83c\\udde9 Indonesia<\\\/span>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n\\n\\n <\\\/section>\\n<\\\/div>\\n\\n<script>\\n\\\/\\\/ Global functions for iframe handling\\nfunction handleIframeLoad() {\\n console.log('Loading screen iframe loaded successfully');\\n}\\n\\nfunction handleIframeError() {\\n console.log('Loading screen iframe failed, showing fallback');\\n const iframe = document.getElementById('loadingIframe');\\n const fallback = document.getElementById('fallbackLoader');\\n if (iframe) iframe.style.display = 'none';\\n if (fallback) fallback.classList.add('active');\\n}\\n\\ndocument.addEventListener('DOMContentLoaded', () => {\\n const video = document.getElementById('heroVideo');\\n const playBtn = document.getElementById('playPause');\\n const muteBtn = document.getElementById('muteToggle');\\n const progress = document.getElementById('progress');\\n const progressBar = document.getElementById('progressBar');\\n const timeDisplay = document.getElementById('timeDisplay');\\n const volumeSlider = document.getElementById('volumeSlider');\\n const volumeBar = document.getElementById('volumeBar');\\n const fullscreenBtn = document.getElementById('fullscreenBtn');\\n const loadingOverlay = document.getElementById('videoLoadingOverlay');\\n\\n \\\/\\\/ Check if elements exist before proceeding\\n if (!video || !playBtn || !muteBtn) {\\n console.warn('Video elements not found');\\n return;\\n }\\n\\n \\\/\\\/ Loading screen management\\n let videoReady = false;\\n\\n \\\/\\\/ Check if video is ready to play\\n const checkVideoReady = () => {\\n if (video.readyState >= 3) { \\\/\\\/ HAVE_FUTURE_DATA or greater\\n videoReady = true;\\n hideLoadingScreen();\\n }\\n };\\n\\n \\\/\\\/ Hide loading screen with smooth animation\\n const hideLoadingScreen = () => {\\n if (videoReady && loadingOverlay) {\\n setTimeout(() => {\\n loadingOverlay.classList.add('hidden');\\n \\\/\\\/ Remove overlay completely after animation\\n setTimeout(() => {\\n if (loadingOverlay.parentNode) {\\n loadingOverlay.style.display = 'none';\\n }\\n }, 800);\\n }, 1500); \\\/\\\/ Show loading for minimum 1.5 seconds\\n }\\n };\\n\\n \\\/\\\/ Video event listeners for loading\\n video.addEventListener('loadeddata', checkVideoReady);\\n video.addEventListener('canplay', checkVideoReady);\\n video.addEventListener('canplaythrough', () => {\\n videoReady = true;\\n hideLoadingScreen();\\n });\\n\\n \\\/\\\/ Fallback: hide loading screen after maximum time\\n setTimeout(() => {\\n if (loadingOverlay && !loadingOverlay.classList.contains('hidden')) {\\n console.log('Hiding loading screen after timeout');\\n hideLoadingScreen();\\n }\\n }, 8000); \\\/\\\/ Maximum 8 seconds\\n\\n \\\/\\\/ Play\\\/Pause Icons\\n const setPlayIcon = (paused) => {\\n if (playBtn) {\\n playBtn.innerHTML = paused\\n ? '<svg viewBox=\\\"0 0 24 24\\\" aria-hidden=\\\"true\\\"><path d=\\\"M8 5v14l11-7z\\\"\\\/><\\\/svg>'\\n : '<svg viewBox=\\\"0 0 24 24\\\" aria-hidden=\\\"true\\\"><path d=\\\"M6 19h4V5H6zm8 0h4V5h-4z\\\"\\\/><\\\/svg>';\\n playBtn.setAttribute('aria-label', paused ? 'Play video' : 'Pause video');\\n }\\n };\\n\\n \\\/\\\/ Mute\\\/Unmute Icons\\n const setMuteIcon = (muted) => {\\n if (muteBtn) {\\n muteBtn.innerHTML = muted\\n ? '<svg viewBox=\\\"0 0 24 24\\\" aria-hidden=\\\"true\\\"><path d=\\\"M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z\\\"\\\/><\\\/svg>'\\n : '<svg viewBox=\\\"0 0 24 24\\\" aria-hidden=\\\"true\\\"><path d=\\\"M4 9v6h4l5 5V4L8 9H4z\\\"\\\/><\\\/svg>';\\n muteBtn.setAttribute('aria-label', muted ? 'Unmute video' : 'Mute video');\\n }\\n };\\n\\n \\\/\\\/ Format time\\n const formatTime = (seconds) => {\\n const mins = Math.floor(seconds \\\/ 60);\\n const secs = Math.floor(seconds % 60);\\n return `${mins}:${secs.toString().padStart(2, '0')}`;\\n };\\n\\n \\\/\\\/ Play\\\/Pause functionality\\n if (playBtn) {\\n playBtn.addEventListener('click', () => {\\n if (video.paused) {\\n video.play().catch(e => console.log('Video play failed:', e));\\n } else {\\n video.pause();\\n }\\n setPlayIcon(video.paused);\\n });\\n }\\n\\n \\\/\\\/ Mute\\\/Unmute functionality\\n if (muteBtn) {\\n muteBtn.addEventListener('click', () => {\\n video.muted = !video.muted;\\n setMuteIcon(video.muted);\\n if (volumeBar) {\\n volumeBar.style.width = video.muted ? '0%' : (video.volume * 100) + '%';\\n }\\n });\\n }\\n\\n \\\/\\\/ Progress bar update\\n video.addEventListener('timeupdate', () => {\\n if (video.duration) {\\n const progressPercent = (video.currentTime \\\/ video.duration) * 100;\\n if (progressBar) progressBar.style.width = progressPercent + '%';\\n if (timeDisplay) timeDisplay.textContent = formatTime(video.currentTime);\\n }\\n });\\n\\n \\\/\\\/ Progress bar click\\n if (progress) {\\n progress.addEventListener('click', (e) => {\\n const rect = progress.getBoundingClientRect();\\n const clickX = e.clientX - rect.left;\\n const clickPercent = clickX \\\/ rect.width;\\n if (video.duration) {\\n video.currentTime = clickPercent * video.duration;\\n }\\n });\\n }\\n\\n \\\/\\\/ Volume control\\n if (volumeSlider) {\\n volumeSlider.addEventListener('click', (e) => {\\n const rect = volumeSlider.getBoundingClientRect();\\n const clickX = e.clientX - rect.left;\\n const volume = Math.max(0, Math.min(1, clickX \\\/ rect.width));\\n video.volume = volume;\\n if (volumeBar) volumeBar.style.width = (video.volume * 100) + '%';\\n \\n if (video.volume === 0) {\\n video.muted = true;\\n } else {\\n video.muted = false;\\n }\\n setMuteIcon(video.muted);\\n });\\n }\\n\\n \\\/\\\/ Fullscreen functionality\\n if (fullscreenBtn) {\\n fullscreenBtn.addEventListener('click', () => {\\n if (!document.fullscreenElement) {\\n video.parentElement.requestFullscreen().catch(e => console.log('Fullscreen failed:', e));\\n } else {\\n document.exitFullscreen();\\n }\\n });\\n }\\n\\n \\\/\\\/ Initialize icons\\n setPlayIcon(video.paused);\\n setMuteIcon(video.muted);\\n if (volumeBar) volumeBar.style.width = (video.volume * 100) + '%';\\n\\n \\\/\\\/ Create optimized floating particles\\n const particlesContainer = document.querySelector('.bg-particles');\\n if (particlesContainer) {\\n const particleCount = window.innerWidth < 768 ? 8 : 12; \\\/\\\/ Fewer particles on mobile\\n\\n for (let i = 0; i < particleCount; i++) {\\n const particle = document.createElement('div');\\n particle.className = 'particle';\\n particle.style.left = Math.random() * 100 + '%';\\n particle.style.animationDelay = Math.random() * 18 + 's';\\n particle.style.animationDuration = (15 + Math.random() * 6) + 's';\\n \\n const size = 3 + Math.random() * 3;\\n particle.style.width = size + 'px';\\n particle.style.height = size + 'px';\\n \\n particlesContainer.appendChild(particle);\\n }\\n }\\n\\n\\n\\n \\\/\\\/ Keyboard navigation support\\n document.addEventListener('keydown', (e) => {\\n if (e.target.closest('.video-wrapper')) {\\n switch(e.code) {\\n case 'Space':\\n e.preventDefault();\\n if (playBtn) playBtn.click();\\n break;\\n case 'KeyM':\\n e.preventDefault();\\n if (muteBtn) muteBtn.click();\\n break;\\n case 'KeyF':\\n e.preventDefault();\\n if (fullscreenBtn) fullscreenBtn.click();\\n break;\\n }\\n }\\n });\\n\\n \\\/\\\/ Performance optimization: Pause animations when tab is not visible\\n document.addEventListener('visibilitychange', () => {\\n const particles = document.querySelectorAll('.particle');\\n particles.forEach(particle => {\\n if (document.hidden) {\\n particle.style.animationPlayState = 'paused';\\n } else {\\n particle.style.animationPlayState = 'running';\\n }\\n });\\n });\\n});\\n<\\\/script>\\n<\\\/body>\\n<\\\/html>\"}},{\"type\":\"html\",\"props\":{\"content\":\"<!DOCTYPE html>\\n<html lang=\\\"en\\\">\\n<head>\\n<meta charset=\\\"UTF-8\\\">\\n<meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\">\\n<title>BIFA+ Mission<\\\/title>\\n<link rel=\\\"preconnect\\\" href=\\\"https:\\\/\\\/fonts.googleapis.com\\\">\\n<link rel=\\\"preconnect\\\" href=\\\"https:\\\/\\\/fonts.gstatic.com\\\" crossorigin>\\n<link href=\\\"https:\\\/\\\/fonts.googleapis.com\\\/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800;900&display=swap\\\" rel=\\\"stylesheet\\\">\\n\\n<\/p>\n<style>\\n\\\/* ========= MISSION SECTION WRAPPER - ISOLATED ========= *\\\/\\n.mission-section-wrapper {\\n \\\/* Isolated CSS Variables - only for this section *\\\/\\n --bifa-deep-navy: #0A1F44;\\n --bifa-heritage-gold: #D4AF37;\\n --bifa-civic-green: #1D6143;\\n --bifa-bright-white: #FFFFFF;\\n --bifa-soft-black: #1A1A1A;\\n \\n \\\/* Additional colors for better readability *\\\/\\n --bifa-gray-light: #F8F9FA;\\n --bifa-gray-medium: #E9ECEF;\\n --bifa-gray: #6C757D;\\n --bifa-gray-dark: #495057;\\n \\n \\\/* Official BIFA+ Fonts *\\\/\\n --bifa-font-heading: 'Montserrat', sans-serif;\\n --bifa-font-body: 'Poppins', sans-serif;\\n \\n \\\/* Premium shadows and effects *\\\/\\n --bifa-shadow-sm: 0 2px 8px rgba(10, 31, 68, 0.08);\\n --bifa-shadow-md: 0 8px 24px rgba(10, 31, 68, 0.12);\\n --bifa-shadow-lg: 0 16px 48px rgba(10, 31, 68, 0.16);\\n --bifa-shadow-xl: 0 25px 80px rgba(10, 31, 68, 0.15);\\n --bifa-shadow-gold: 0 15px 40px rgba(212, 175, 55, 0.3);\\n --bifa-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\\n \\n width: 100vw;\\n position: relative;\\n left: 50%;\\n margin-left: -50vw;\\n background: radial-gradient(ellipse 120% 80% at center top, \\n rgba(255, 255, 255, 1) 0%,\\n rgba(248, 249, 250, 0.95) 20%,\\n rgba(248, 249, 250, 0.8) 40%,\\n rgba(248, 249, 250, 0.5) 60%,\\n rgba(248, 249, 250, 0.2) 80%,\\n transparent 100%\\n );\\n overflow: hidden;\\n}\\n\\n\\\/* Header connection line - seamless transition *\\\/\\n.mission-section-wrapper::before {\\n content: '';\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 1px;\\n background: linear-gradient(90deg, \\n transparent 0%, \\n rgba(212, 175, 55, 0.3) 25%, \\n rgba(212, 175, 55, 0.6) 50%, \\n rgba(212, 175, 55, 0.3) 75%,\\n transparent 100%\\n );\\n z-index: 100;\\n}\\n\\n\\\/* ========= RESET - ONLY FOR THIS SECTION ========= *\\\/\\n.mission-section-wrapper * {\\n margin: 0;\\n padding: 0;\\n box-sizing: border-box;\\n -webkit-font-smoothing: antialiased;\\n -moz-osx-font-smoothing: grayscale;\\n}\\n\\n.mission-section-wrapper {\\n font-family: var(--bifa-font-body);\\n color: var(--bifa-soft-black);\\n line-height: 1.6;\\n}\\n\\n\\\/* ========= MISSION SECTION ========= *\\\/\\n.mission-section-wrapper .mission-section {\\n padding: 100px 0;\\n background: transparent;\\n position: relative;\\n z-index: 10;\\n}\\n\\n.mission-section-wrapper .mission-container {\\n max-width: 1400px;\\n margin: 0 auto;\\n padding: 0 60px;\\n}\\n\\n.mission-section-wrapper .section-header {\\n text-align: center;\\n margin-bottom: 80px;\\n animation: missionFadeIn 1.2s ease-out;\\n}\\n\\n@keyframes missionFadeIn {\\n from {\\n opacity: 0;\\n transform: translateY(30px);\\n }\\n to {\\n opacity: 1;\\n transform: translateY(0);\\n }\\n}\\n\\n.mission-section-wrapper .section-title {\\n font-family: var(--bifa-font-heading);\\n font-size: clamp(2.5rem, 4vw, 3.5rem);\\n font-weight: 900;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n margin-bottom: 20px;\\n letter-spacing: -0.02em;\\n}\\n\\n.mission-section-wrapper .section-subtitle {\\n font-family: var(--bifa-font-body);\\n font-size: clamp(1rem, 1.5vw, 1.2rem);\\n color: var(--bifa-soft-black);\\n max-width: 800px;\\n margin: 0 auto;\\n line-height: 1.8;\\n font-weight: 400;\\n}\\n\\n\\\/* Mission Cards *\\\/\\n.mission-section-wrapper .mission-grid {\\n display: grid;\\n grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\\n gap: 40px;\\n margin-bottom: 80px;\\n}\\n\\n.mission-section-wrapper .mission-card {\\n background: var(--bifa-bright-white);\\n padding: 40px;\\n border-radius: 20px;\\n box-shadow: var(--bifa-shadow-sm);\\n border: 1px solid rgba(212, 175, 55, 0.1);\\n transition: var(--bifa-transition);\\n position: relative;\\n overflow: hidden;\\n}\\n\\n.mission-section-wrapper .mission-card::before {\\n content: '';\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 4px;\\n background: linear-gradient(90deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\\n transform: translateX(-100%);\\n transition: transform 0.6s ease;\\n}\\n\\n.mission-section-wrapper .mission-card:hover::before {\\n transform: translateX(0);\\n}\\n\\n.mission-section-wrapper .mission-card:hover {\\n transform: translateY(-10px);\\n box-shadow: var(--bifa-shadow-gold);\\n}\\n\\n.mission-section-wrapper .mission-icon {\\n width: 70px;\\n height: 70px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold) 0%, var(--bifa-heritage-gold) 100%);\\n border-radius: 20px;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n margin-bottom: 25px;\\n font-size: 35px;\\n box-shadow: var(--bifa-shadow-gold);\\n transition: var(--bifa-transition);\\n}\\n\\n.mission-section-wrapper .mission-icon.has-svg {\\n background: transparent;\\n box-shadow: none;\\n}\\n\\n.mission-section-wrapper .mission-icon img {\\n width: 70px;\\n height: 70px;\\n transition: var(--bifa-transition);\\n}\\n\\n.mission-section-wrapper .mission-card:hover .mission-icon {\\n transform: scale(1.1) rotate(5deg);\\n}\\n\\n.mission-section-wrapper .mission-card:hover .mission-icon.has-svg {\\n transform: scale(1.15);\\n}\\n\\n.mission-section-wrapper .mission-card:hover .mission-icon img {\\n transform: scale(1.1);\\n}\\n\\n.mission-section-wrapper .mission-card-title {\\n font-family: var(--bifa-font-heading);\\n font-size: 1.5rem;\\n font-weight: 800;\\n color: var(--bifa-deep-navy);\\n margin-bottom: 15px;\\n}\\n\\n.mission-section-wrapper .mission-card-text {\\n font-family: var(--bifa-font-body);\\n font-size: 1rem;\\n line-height: 1.7;\\n color: var(--bifa-soft-black);\\n font-weight: 400;\\n}\\n\\n\\\/* Vision Box *\\\/\\n.mission-section-wrapper .vision-box {\\n background: linear-gradient(135deg, rgba(212, 175, 55, 0.08) 0%, rgba(212, 175, 55, 0.05) 100%);\\n padding: 80px 60px;\\n border-radius: 25px;\\n text-align: center;\\n position: relative;\\n overflow: hidden;\\n margin-bottom: 80px;\\n border: 2px solid rgba(212, 175, 55, 0.2);\\n box-shadow: var(--bifa-shadow-lg);\\n}\\n\\n.mission-section-wrapper .vision-box::before {\\n content: '';\\n position: absolute;\\n top: -50%;\\n right: -50%;\\n width: 200%;\\n height: 200%;\\n background: radial-gradient(circle, rgba(212, 175, 55, 0.05) 0%, transparent 70%);\\n animation: missionRotate 30s linear infinite;\\n}\\n\\n.mission-section-wrapper .vision-box::after {\\n content: '';\\n position: absolute;\\n bottom: -50%;\\n left: -50%;\\n width: 200%;\\n height: 200%;\\n background: radial-gradient(circle, rgba(212, 175, 55, 0.05) 0%, transparent 70%);\\n animation: missionRotateReverse 25s linear infinite;\\n}\\n\\n@keyframes missionRotate {\\n from { transform: rotate(0deg); }\\n to { transform: rotate(360deg); }\\n}\\n\\n@keyframes missionRotateReverse {\\n from { transform: rotate(360deg); }\\n to { transform: rotate(0deg); }\\n}\\n\\n.mission-section-wrapper .vision-title {\\n font-family: var(--bifa-font-heading);\\n font-size: 3rem;\\n font-weight: 900;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n margin-bottom: 30px;\\n position: relative;\\n z-index: 1;\\n}\\n\\n.mission-section-wrapper .vision-text {\\n font-family: var(--bifa-font-body);\\n font-size: 1.3rem;\\n line-height: 1.9;\\n max-width: 900px;\\n margin: 0 auto;\\n position: relative;\\n z-index: 1;\\n color: var(--bifa-soft-black);\\n font-weight: 400;\\n}\\n\\n\\\/* Floating particles for consistency *\\\/\\n.mission-section-wrapper .bg-particles {\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n overflow: hidden;\\n z-index: 1;\\n pointer-events: none;\\n}\\n\\n.mission-section-wrapper .particle {\\n position: absolute;\\n width: 4px;\\n height: 4px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\\n border-radius: 50%;\\n animation: missionFloat 20s infinite linear;\\n box-shadow: 0 0 12px rgba(212, 175, 55, 0.3);\\n opacity: 0.3;\\n}\\n\\n@keyframes missionFloat {\\n 0% {\\n transform: translateY(100vh) translateX(0);\\n opacity: 0;\\n }\\n 15% { opacity: 0.3; }\\n 85% { opacity: 0.3; }\\n 100% {\\n transform: translateY(-100vh) translateX(30px);\\n opacity: 0;\\n }\\n}\\n\\n\\\/* Fallback for browsers without background-clip support *\\\/\\n@supports not (background-clip: text) {\\n .mission-section-wrapper .section-title,\\n .mission-section-wrapper .vision-title {\\n color: var(--bifa-heritage-gold) !important;\\n background: none !important;\\n }\\n}\\n\\n\\\/* ========= RESPONSIVE ========= *\\\/\\n@media (max-width: 1200px) {\\n .mission-section-wrapper .mission-container {\\n padding: 0 40px;\\n }\\n}\\n\\n@media (max-width: 768px) {\\n .mission-section-wrapper .mission-container {\\n padding: 0 20px;\\n }\\n \\n .mission-section-wrapper .mission-grid {\\n grid-template-columns: 1fr;\\n }\\n \\n .mission-section-wrapper .vision-box {\\n padding: 40px 20px;\\n }\\n \\n .mission-section-wrapper .vision-title {\\n font-size: 2rem;\\n }\\n \\n .mission-section-wrapper .vision-text {\\n font-size: 1.1rem;\\n }\\n \\n .mission-section-wrapper .mission-section {\\n padding: 60px 0;\\n }\\n}\\n\\n@media (max-width: 480px) {\\n .mission-section-wrapper .section-title {\\n font-size: 2rem;\\n }\\n \\n .mission-section-wrapper .mission-card {\\n padding: 30px 20px;\\n }\\n \\n .mission-section-wrapper .mission-grid {\\n grid-template-columns: 1fr;\\n gap: 30px;\\n }\\n}\\n<\\\/style>\\n<\\\/head>\\n<body>\\n\\n<\/p>\n<div class=\\\"mission-section-wrapper\\\" id=\\\"vision\\\">\\n \\n <\/p>\n<div class=\\\"bg-particles\\\"><\\\/div>\\n\\n \\n <\/p>\n<section id=\\\"our-mission\\\" class=\\\"mission-section\\\">\\n <\/p>\n<div class=\\\"mission-container\\\">\\n <\/p>\n<div class=\\\"section-header\\\">\\n <\/p>\n<h2 class=\\\"section-title\\\">Our Mission<\\\/h2>\\n <\/p>\n<p class=\\\"section-subtitle\\\">\\n Building bridges between nations through the universal language of football, \\n creating opportunities for youth, and fostering cultural understanding across the Global South.\\n <\\\/p>\\n <\\\/div>\\n\\n <\/p>\n<div class=\\\"mission-grid\\\">\\n <\/p>\n<div class=\\\"mission-card\\\">\\n <\/p>\n<div class=\\\"mission-icon\\\">\\ud83c\\udf0d<\\\/div>\\n <\/p>\n<h3 class=\\\"mission-card-title\\\">Global Cooperation<\\\/h3>\\n <\/p>\n<p class=\\\"mission-card-text\\\">\\n Promote international sports and cultural cooperation among Global South nations \\n through tournaments, events, and strategic partnerships that transcend borders.\\n <\\\/p>\\n <\\\/div>\\n\\n <\/p>\n<div class=\\\"mission-card\\\">\\n <\/p>\n<div class=\\\"mission-icon\\\">\\u26bd<\\\/div>\\n <\/p>\n<h3 class=\\\"mission-card-title\\\">Youth Empowerment<\\\/h3>\\n <\/p>\n<p class=\\\"mission-card-text\\\">\\n Engage youth, students, and communities via football programs for universities, \\n schools, academies, and grassroots platforms to develop future leaders.\\n <\\\/p>\\n <\\\/div>\\n\\n <\/p>\n<div class=\\\"mission-card\\\">\\n <\/p>\n<div class=\\\"mission-icon\\\">\\ud83d\\udca1<\\\/div>\\n <\/p>\n<h3 class=\\\"mission-card-title\\\">Digital Innovation<\\\/h3>\\n <\/p>\n<p class=\\\"mission-card-text\\\">\\n Develop digital and physical initiatives in AI-powered sports tech, smart health, \\n and sports commerce to revolutionize how football is played and experienced.\\n <\\\/p>\\n <\\\/div>\\n\\n <\/p>\n<div class=\\\"mission-card\\\">\\n <\/p>\n<div class=\\\"mission-icon\\\">\\ud83c\\udf1f<\\\/div>\\n <\/p>\n<h3 class=\\\"mission-card-title\\\">Diversity & Inclusion<\\\/h3>\\n <\/p>\n<p class=\\\"mission-card-text\\\">\\n Champion diversity through beach football, community leagues, university tournaments, \\n and regional academies that welcome players from all backgrounds.\\n <\\\/p>\\n <\\\/div>\\n\\n <\/p>\n<div class=\\\"mission-card\\\">\\n <\/p>\n<div class=\\\"mission-icon has-svg\\\">\\n <img src=\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Girl_fas.svg\\\" alt=\\\"Women's Empowerment\\\">\\n <\\\/div>\\n <\/p>\n<h3 class=\\\"mission-card-title\\\">Women's Empowerment<\\\/h3>\\n <\/p>\n<p class=\\\"mission-card-text\\\">\\n Empower women in sports through the dedicated BIFA+ Women program for female \\n players and leadership roles, creating equal opportunities in football.\\n <\\\/p>\\n <\\\/div>\\n\\n <\/p>\n<div class=\\\"mission-card\\\">\\n <\/p>\n<div class=\\\"mission-icon\\\">\\ud83c\\udfd9\\ufe0f<\\\/div>\\n <\/p>\n<h3 class=\\\"mission-card-title\\\">Cities Network<\\\/h3>\\n <\/p>\n<p class=\\\"mission-card-text\\\">\\n Establish the BIFA+ Cities Network, linking dynamic cities worldwide as hubs \\n for cooperation, activation, and international mixed-nationality teams.\\n <\\\/p>\\n <\\\/div>\\n <\\\/div>\\n\\n \\n <\/p>\n<div class=\\\"vision-box\\\">\\n <\/p>\n<h2 class=\\\"vision-title\\\">Our Vision<\\\/h2>\\n <\/p>\n<p class=\\\"vision-text\\\">\\n To become the leading global platform for youth-driven sports and cultural cooperation \\n across the Global South, offering a new model of international partnership based on \\n peace, opportunity, and shared values. We envision a world united through sport \\u2013 \\n where football becomes a symbol of peace, cooperation, and cultural exchange.\\n <\\\/p>\\n <\\\/div>\\n <\\\/div>\\n <\\\/section>\\n<\\\/div>\\n\\n<script>\\ndocument.addEventListener('DOMContentLoaded', () => {\\n \\\/\\\/ Create floating particles\\n const particlesContainer = document.querySelector('.mission-section-wrapper .bg-particles');\\n const particleCount = 8;\\n\\n for (let i = 0; i < particleCount; i++) {\\n const particle = document.createElement('div');\\n particle.className = 'particle';\\n particle.style.left = Math.random() * 100 + '%';\\n particle.style.animationDelay = Math.random() * 20 + 's';\\n particle.style.animationDuration = (18 + Math.random() * 6) + 's';\\n \\n const size = 3 + Math.random() * 2;\\n particle.style.width = size + 'px';\\n particle.style.height = size + 'px';\\n \\n particlesContainer.appendChild(particle);\\n }\\n\\n \\\/\\\/ Animate elements on scroll\\n const observerOptions = {\\n threshold: 0.1,\\n rootMargin: '0px 0px -100px 0px'\\n };\\n\\n const observer = new IntersectionObserver((entries) => {\\n entries.forEach(entry => {\\n if (entry.isIntersecting) {\\n entry.target.style.opacity = '1';\\n entry.target.style.transform = 'translateY(0)';\\n }\\n });\\n }, observerOptions);\\n\\n \\\/\\\/ Observe mission cards\\n const animatedElements = document.querySelectorAll('.mission-section-wrapper .mission-card');\\n animatedElements.forEach(el => {\\n el.style.opacity = '0';\\n el.style.transform = 'translateY(30px)';\\n el.style.transition = 'all 0.6s ease';\\n observer.observe(el);\\n });\\n});\\n<\\\/script>\\n<\\\/body>\\n<\\\/html>\"}},{\"type\":\"html\",\"props\":{\"content\":\"<!DOCTYPE html>\\n<html lang=\\\"en\\\">\\n<head>\\n<meta charset=\\\"UTF-8\\\">\\n<meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\">\\n<title>BIFA+ Initiatives<\\\/title>\\n<link rel=\\\"preconnect\\\" href=\\\"https:\\\/\\\/fonts.googleapis.com\\\">\\n<link rel=\\\"preconnect\\\" href=\\\"https:\\\/\\\/fonts.gstatic.com\\\" crossorigin>\\n<link href=\\\"https:\\\/\\\/fonts.googleapis.com\\\/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800;900&display=swap\\\" rel=\\\"stylesheet\\\">\\n\\n<\/p>\n<style>\\n\\\/* ========= INITIATIVES SECTION WRAPPER - ISOLATED ========= *\\\/\\n.initiatives-section-wrapper {\\n \\\/* Isolated CSS Variables - only for this section *\\\/\\n --bifa-deep-navy: #0A1F44;\\n --bifa-heritage-gold: #D4AF37;\\n --bifa-civic-green: #1D6143;\\n --bifa-bright-white: #FFFFFF;\\n --bifa-soft-black: #1A1A1A;\\n \\n \\\/* Additional colors for better readability *\\\/\\n --bifa-gray-light: #F8F9FA;\\n --bifa-gray-medium: #E9ECEF;\\n --bifa-gray: #6C757D;\\n --bifa-gray-dark: #495057;\\n \\n \\\/* Official BIFA+ Fonts *\\\/\\n --bifa-font-heading: 'Montserrat', sans-serif;\\n --bifa-font-body: 'Poppins', sans-serif;\\n \\n \\\/* Premium shadows and effects *\\\/\\n --bifa-shadow-sm: 0 2px 8px rgba(10, 31, 68, 0.08);\\n --bifa-shadow-md: 0 8px 24px rgba(10, 31, 68, 0.12);\\n --bifa-shadow-lg: 0 16px 48px rgba(10, 31, 68, 0.16);\\n --bifa-shadow-xl: 0 25px 80px rgba(10, 31, 68, 0.15);\\n --bifa-shadow-gold: 0 15px 40px rgba(212, 175, 55, 0.3);\\n --bifa-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\\n \\n width: 100vw;\\n position: relative;\\n left: 50%;\\n margin-left: -50vw;\\n overflow: hidden;\\n}\\n\\n\\\/* Header connection line - seamless transition *\\\/\\n.initiatives-section-wrapper::before {\\n content: '';\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 1px;\\n background: linear-gradient(90deg, \\n transparent 0%, \\n rgba(212, 175, 55, 0.3) 25%, \\n rgba(212, 175, 55, 0.6) 50%, \\n rgba(212, 175, 55, 0.3) 75%,\\n transparent 100%\\n );\\n z-index: 100;\\n}\\n\\n\\\/* ========= RESET - ONLY FOR THIS SECTION ========= *\\\/\\n.initiatives-section-wrapper * {\\n margin: 0;\\n padding: 0;\\n box-sizing: border-box;\\n -webkit-font-smoothing: antialiased;\\n -moz-osx-font-smoothing: grayscale;\\n}\\n\\n.initiatives-section-wrapper {\\n font-family: var(--bifa-font-body);\\n color: var(--bifa-soft-black);\\n line-height: 1.6;\\n}\\n\\n\\\/* Section header animation *\\\/\\n@keyframes missionFadeIn {\\n from {\\n opacity: 0;\\n transform: translateY(30px);\\n }\\n to {\\n opacity: 1;\\n transform: translateY(0);\\n }\\n}\\n\\n.initiatives-section-wrapper .section-header {\\n text-align: center;\\n margin-bottom: 80px;\\n animation: missionFadeIn 1.2s ease-out;\\n}\\n\\n.initiatives-section-wrapper .section-title {\\n font-family: var(--bifa-font-heading);\\n font-size: clamp(2.5rem, 4vw, 3.5rem);\\n font-weight: 900;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n margin-bottom: 20px;\\n letter-spacing: -0.02em;\\n}\\n\\n.initiatives-section-wrapper .section-subtitle {\\n font-family: var(--bifa-font-body);\\n font-size: clamp(1rem, 1.5vw, 1.2rem);\\n color: var(--bifa-soft-black);\\n max-width: 800px;\\n margin: 0 auto;\\n line-height: 1.8;\\n font-weight: 400;\\n}\\n\\n\\\/* Initiatives Section *\\\/\\n.initiatives-section-wrapper .initiatives-section {\\n padding: 100px 0;\\n background: radial-gradient(ellipse 100% 60% at center, \\n rgba(248, 249, 250, 0.8) 0%,\\n rgba(248, 249, 250, 0.4) 50%,\\n transparent 100%\\n );\\n position: relative;\\n z-index: 10;\\n}\\n\\n.initiatives-section-wrapper .initiatives-grid {\\n display: grid;\\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\\n gap: 30px;\\n max-width: 1400px;\\n margin: 0 auto;\\n padding: 0 60px;\\n}\\n\\n.initiatives-section-wrapper .initiative-item {\\n background: linear-gradient(135deg, var(--bifa-bright-white) 0%, #fafbfc 100%);\\n padding: 35px 25px;\\n border-radius: 20px;\\n text-align: center;\\n box-shadow: var(--bifa-shadow-sm);\\n transition: var(--bifa-transition);\\n cursor: pointer;\\n border: 2px solid transparent;\\n}\\n\\n.initiatives-section-wrapper .initiative-item:hover {\\n transform: translateY(-8px);\\n box-shadow: var(--bifa-shadow-gold);\\n border-color: rgba(212, 175, 55, 0.2);\\n}\\n\\n.initiatives-section-wrapper .initiative-icon {\\n width: 60px;\\n height: 60px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\\n border-radius: 50%;\\n margin: 0 auto 20px;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n font-size: 28px;\\n color: var(--bifa-bright-white);\\n box-shadow: var(--bifa-shadow-gold);\\n transition: var(--bifa-transition);\\n}\\n\\n.initiatives-section-wrapper .initiative-icon.has-svg {\\n background: transparent;\\n box-shadow: none;\\n border-radius: 0;\\n}\\n\\n.initiatives-section-wrapper .initiative-icon img {\\n width: 60px;\\n height: 60px;\\n transition: var(--bifa-transition);\\n}\\n\\n.initiatives-section-wrapper .initiative-item:hover .initiative-icon {\\n transform: scale(1.15) rotate(10deg);\\n}\\n\\n.initiatives-section-wrapper .initiative-item:hover .initiative-icon.has-svg {\\n transform: scale(1.2);\\n}\\n\\n.initiatives-section-wrapper .initiative-item:hover .initiative-icon img {\\n transform: scale(1.1);\\n}\\n\\n.initiatives-section-wrapper .initiative-title {\\n font-family: var(--bifa-font-heading);\\n font-size: 1.1rem;\\n font-weight: 700;\\n color: var(--bifa-deep-navy);\\n margin-bottom: 10px;\\n}\\n\\n.initiatives-section-wrapper .initiative-desc {\\n font-family: var(--bifa-font-body);\\n font-size: 0.9rem;\\n color: var(--bifa-soft-black);\\n line-height: 1.6;\\n font-weight: 400;\\n}\\n\\n\\\/* Floating particles for consistency *\\\/\\n.initiatives-section-wrapper .bg-particles {\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n overflow: hidden;\\n z-index: 1;\\n pointer-events: none;\\n}\\n\\n.initiatives-section-wrapper .particle {\\n position: absolute;\\n width: 4px;\\n height: 4px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\\n border-radius: 50%;\\n animation: missionFloat 20s infinite linear;\\n box-shadow: 0 0 12px rgba(212, 175, 55, 0.3);\\n opacity: 0.3;\\n}\\n\\n@keyframes missionFloat {\\n 0% {\\n transform: translateY(100vh) translateX(0);\\n opacity: 0;\\n }\\n 15% { opacity: 0.3; }\\n 85% { opacity: 0.3; }\\n 100% {\\n transform: translateY(-100vh) translateX(30px);\\n opacity: 0;\\n }\\n}\\n\\n\\\/* Fallback for browsers without background-clip support *\\\/\\n@supports not (background-clip: text) {\\n .initiatives-section-wrapper .section-title {\\n color: var(--bifa-heritage-gold) !important;\\n background: none !important;\\n }\\n}\\n\\n\\\/* ========= RESPONSIVE ========= *\\\/\\n@media (max-width: 1200px) {\\n .initiatives-section-wrapper .initiatives-grid {\\n padding: 0 40px;\\n }\\n}\\n\\n@media (max-width: 768px) {\\n .initiatives-section-wrapper .initiatives-grid {\\n padding: 0 20px;\\n }\\n \\n .initiatives-section-wrapper .initiatives-section {\\n padding: 60px 0;\\n }\\n}\\n\\n@media (max-width: 480px) {\\n .initiatives-section-wrapper .initiatives-grid {\\n grid-template-columns: 1fr;\\n }\\n \\n .initiatives-section-wrapper .section-title {\\n font-size: 2rem;\\n }\\n}\\n<\\\/style>\\n<\\\/head>\\n<body>\\n\\n<\/p>\n<div class=\\\"initiatives-section-wrapper\\\">\\n \\n <\/p>\n<div class=\\\"bg-particles\\\"><\\\/div>\\n\\n \\n <\/p>\n<section class=\\\"initiatives-section\\\">\\n <\/p>\n<div class=\\\"section-header\\\">\\n <\/p>\n<h2 class=\\\"section-title\\\">Key Initiatives<\\\/h2>\\n <\/p>\n<p class=\\\"section-subtitle\\\">\\n Comprehensive programs designed to unite nations and empower communities through football\\n <\\\/p>\\n <\\\/div>\\n\\n <\/p>\n<div class=\\\"initiatives-grid\\\">\\n <\/p>\n<div class=\\\"initiative-item\\\">\\n <\/p>\n<div class=\\\"initiative-icon\\\">\\ud83c\\udfc6<\\\/div>\\n <\/p>\n<h3 class=\\\"initiative-title\\\">BIFA+ League<\\\/h3>\\n <\/p>\n<p class=\\\"initiative-desc\\\">International club-based football league connecting the Global South<\\\/p>\\n <\\\/div>\\n\\n <\/p>\n<div class=\\\"initiative-item\\\">\\n <\/p>\n<div class=\\\"initiative-icon has-svg\\\">\\n <img src=\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Girl_prof.svg\\\" alt=\\\"BIFA+ Women\\\">\\n <\\\/div>\\n <\/p>\n<h3 class=\\\"initiative-title\\\">BIFA+ Women<\\\/h3>\\n <\/p>\n<p class=\\\"initiative-desc\\\">Dedicated women's football program promoting female leadership<\\\/p>\\n <\\\/div>\\n\\n <\/p>\n<div class=\\\"initiative-item\\\">\\n <\/p>\n<div class=\\\"initiative-icon\\\">\\ud83e\\udd16<\\\/div>\\n <\/p>\n<h3 class=\\\"initiative-title\\\">Academy+ AI<\\\/h3>\\n <\/p>\n<p class=\\\"initiative-desc\\\">AI-powered training systems and smart performance analytics<\\\/p>\\n <\\\/div>\\n\\n <\/p>\n<div class=\\\"initiative-item\\\">\\n <\/p>\n<div class=\\\"initiative-icon\\\">\\ud83c\\udfae<\\\/div>\\n <\/p>\n<h3 class=\\\"initiative-title\\\">BIFA+ eFootball<\\\/h3>\\n <\/p>\n<p class=\\\"initiative-desc\\\">Digital gaming tournaments and virtual football experiences<\\\/p>\\n <\\\/div>\\n\\n <\/p>\n<div class=\\\"initiative-item\\\">\\n <\/p>\n<div class=\\\"initiative-icon\\\">\\ud83c\\udf06<\\\/div>\\n <\/p>\n<h3 class=\\\"initiative-title\\\">Cities Network<\\\/h3>\\n <\/p>\n<p class=\\\"initiative-desc\\\">Global network of partner cities hosting BIFA+ events<\\\/p>\\n <\\\/div>\\n\\n <\/p>\n<div class=\\\"initiative-item\\\">\\n <\/p>\n<div class=\\\"initiative-icon\\\">\\u2b50<\\\/div>\\n <\/p>\n<h3 class=\\\"initiative-title\\\">Legends Night<\\\/h3>\\n <\/p>\n<p class=\\\"initiative-desc\\\">Diplomatic events featuring football legends and cultural icons<\\\/p>\\n <\\\/div>\\n\\n <\/p>\n<div class=\\\"initiative-item\\\">\\n <\/p>\n<div class=\\\"initiative-icon\\\">\\ud83c\\udfd6\\ufe0f<\\\/div>\\n <\/p>\n<h3 class=\\\"initiative-title\\\">Beach & Community<\\\/h3>\\n <\/p>\n<p class=\\\"initiative-desc\\\">Grassroots tournaments and community engagement programs<\\\/p>\\n <\\\/div>\\n\\n <\/p>\n<div class=\\\"initiative-item\\\">\\n <\/p>\n<div class=\\\"initiative-icon\\\">\\ud83e\\udd1d<\\\/div>\\n <\/p>\n<h3 class=\\\"initiative-title\\\">Partnerships<\\\/h3>\\n <\/p>\n<p class=\\\"initiative-desc\\\">Strategic alliances with governments, clubs, and organizations<\\\/p>\\n <\\\/div>\\n <\\\/div>\\n <\\\/section>\\n<\\\/div>\\n\\n<script>\\ndocument.addEventListener('DOMContentLoaded', () => {\\n \\\/\\\/ Create floating particles\\n const particlesContainer = document.querySelector('.initiatives-section-wrapper .bg-particles');\\n const particleCount = 8;\\n\\n for (let i = 0; i < particleCount; i++) {\\n const particle = document.createElement('div');\\n particle.className = 'particle';\\n particle.style.left = Math.random() * 100 + '%';\\n particle.style.animationDelay = Math.random() * 20 + 's';\\n particle.style.animationDuration = (18 + Math.random() * 6) + 's';\\n \\n const size = 3 + Math.random() * 2;\\n particle.style.width = size + 'px';\\n particle.style.height = size + 'px';\\n \\n particlesContainer.appendChild(particle);\\n }\\n\\n \\\/\\\/ Animate elements on scroll\\n const observerOptions = {\\n threshold: 0.1,\\n rootMargin: '0px 0px -100px 0px'\\n };\\n\\n const observer = new IntersectionObserver((entries) => {\\n entries.forEach(entry => {\\n if (entry.isIntersecting) {\\n entry.target.style.opacity = '1';\\n entry.target.style.transform = 'translateY(0)';\\n }\\n });\\n }, observerOptions);\\n\\n \\\/\\\/ Observe initiative items\\n const animatedElements = document.querySelectorAll('.initiatives-section-wrapper .initiative-item');\\n animatedElements.forEach(el => {\\n el.style.opacity = '0';\\n el.style.transform = 'translateY(30px)';\\n el.style.transition = 'all 0.6s ease';\\n observer.observe(el);\\n });\\n});\\n<\\\/script>\\n<\\\/body>\\n<\\\/html>\"}},{\"type\":\"html\",\"props\":{\"content\":\"<!DOCTYPE html>\\n<html lang=\\\"en\\\">\\n<head>\\n<meta charset=\\\"UTF-8\\\">\\n<meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\">\\n<title>BIFA+ President Block<\\\/title>\\n<link rel=\\\"preconnect\\\" href=\\\"https:\\\/\\\/fonts.googleapis.com\\\">\\n<link rel=\\\"preconnect\\\" href=\\\"https:\\\/\\\/fonts.gstatic.com\\\" crossorigin>\\n<link href=\\\"https:\\\/\\\/fonts.googleapis.com\\\/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800;900&display=swap\\\" rel=\\\"stylesheet\\\">\\n\\n<\/p>\n<style>\\n\\\/* ========= PRESIDENT SECTION WRAPPER - ISOLATED & SEAMLESS ========= *\\\/\\n.president-section-wrapper {\\n \\\/* Identical CSS Variables - matching mission section exactly *\\\/\\n --bifa-deep-navy: #0A1F44;\\n --bifa-heritage-gold: #D4AF37;\\n --bifa-civic-green: #1D6143;\\n --bifa-bright-white: #FFFFFF;\\n --bifa-soft-black: #1A1A1A;\\n \\n \\\/* Additional colors for better readability *\\\/\\n --bifa-gray-light: #F8F9FA;\\n --bifa-gray-medium: #E9ECEF;\\n --bifa-gray: #6C757D;\\n --bifa-gray-dark: #495057;\\n \\n \\\/* Official BIFA+ Fonts *\\\/\\n --bifa-font-heading: 'Montserrat', sans-serif;\\n --bifa-font-body: 'Poppins', sans-serif;\\n \\n \\\/* Premium shadows and effects *\\\/\\n --bifa-shadow-sm: 0 2px 8px rgba(10, 31, 68, 0.08);\\n --bifa-shadow-md: 0 8px 24px rgba(10, 31, 68, 0.12);\\n --bifa-shadow-lg: 0 16px 48px rgba(10, 31, 68, 0.16);\\n --bifa-shadow-xl: 0 25px 80px rgba(10, 31, 68, 0.15);\\n --bifa-shadow-gold: 0 15px 40px rgba(212, 175, 55, 0.3);\\n --bifa-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\\n \\n \\\/* SEAMLESS INTEGRATION - same as mission *\\\/\\n width: 100vw;\\n position: relative;\\n left: 50%;\\n margin-left: -50vw;\\n background: radial-gradient(ellipse 120% 80% at center bottom, \\n rgba(255, 255, 255, 1) 0%,\\n rgba(248, 249, 250, 0.95) 20%,\\n rgba(248, 249, 250, 0.8) 40%,\\n rgba(248, 249, 250, 0.5) 60%,\\n rgba(248, 249, 250, 0.2) 80%,\\n transparent 100%\\n );\\n overflow: hidden;\\n}\\n\\n\\\/* NO top border - seamless connection to mission section *\\\/\\n.president-section-wrapper::before {\\n content: '';\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 1px;\\n background: transparent;\\n z-index: 100;\\n}\\n\\n\\\/* Bottom connection line for next section *\\\/\\n.president-section-wrapper::after {\\n content: '';\\n position: absolute;\\n bottom: 0;\\n left: 0;\\n width: 100%;\\n height: 1px;\\n background: linear-gradient(90deg, \\n transparent 0%, \\n rgba(212, 175, 55, 0.3) 25%, \\n rgba(212, 175, 55, 0.6) 50%, \\n rgba(212, 175, 55, 0.3) 75%,\\n transparent 100%\\n );\\n z-index: 100;\\n}\\n\\n\\\/* ========= RESET - ONLY FOR THIS SECTION ========= *\\\/\\n.president-section-wrapper * {\\n margin: 0;\\n padding: 0;\\n box-sizing: border-box;\\n -webkit-font-smoothing: antialiased;\\n -moz-osx-font-smoothing: grayscale;\\n}\\n\\n.president-section-wrapper {\\n font-family: var(--bifa-font-body);\\n color: var(--bifa-soft-black);\\n line-height: 1.6;\\n}\\n\\n\\\/* ========= PRESIDENT SECTION ========= *\\\/\\n.president-section-wrapper .president-section {\\n padding: 100px 0;\\n background: transparent;\\n position: relative;\\n z-index: 10;\\n}\\n\\n.president-section-wrapper .president-container {\\n width: 100%;\\n margin: 0;\\n padding: 0 5%;\\n text-align: center;\\n position: relative;\\n z-index: 1;\\n}\\n\\n\\\/* Section Header *\\\/\\n.president-section-wrapper .section-header {\\n text-align: center;\\n margin-bottom: 60px;\\n animation: presidentFadeIn 1.2s ease-out;\\n}\\n\\n@keyframes presidentFadeIn {\\n from {\\n opacity: 0;\\n transform: translateY(30px);\\n }\\n to {\\n opacity: 1;\\n transform: translateY(0);\\n }\\n}\\n\\n.president-section-wrapper .section-title {\\n font-family: var(--bifa-font-heading);\\n font-size: clamp(2.5rem, 4vw, 3.5rem);\\n font-weight: 900;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n margin-bottom: 20px;\\n letter-spacing: -0.02em;\\n}\\n\\n.president-section-wrapper .section-subtitle {\\n font-family: var(--bifa-font-body);\\n font-size: clamp(1rem, 1.5vw, 1.2rem);\\n color: var(--bifa-soft-black);\\n max-width: 800px;\\n margin: 0 auto;\\n line-height: 1.8;\\n font-weight: 400;\\n}\\n\\n\\\/* President Content - No borders, full width *\\\/\\n.president-section-wrapper .president-content-area {\\n width: 100%;\\n position: relative;\\n z-index: 2;\\n background: transparent;\\n padding: 0;\\n animation: presidentContentFadeIn 1s ease-out 0.3s both;\\n}\\n\\n@keyframes presidentContentFadeIn {\\n from {\\n opacity: 0;\\n transform: translateY(30px);\\n }\\n to {\\n opacity: 1;\\n transform: translateY(0);\\n }\\n}\\n\\n\\\/* President Photo *\\\/\\n.president-section-wrapper .president-photo {\\n width: 280px;\\n height: 350px;\\n margin: 0 auto 40px;\\n position: relative;\\n}\\n\\n.president-section-wrapper .photo-frame {\\n width: 100%;\\n height: 100%;\\n position: relative;\\n overflow: hidden;\\n border-radius: 0 45% 0 45%;\\n box-shadow: var(--bifa-shadow-xl);\\n background: var(--bifa-bright-white);\\n transition: var(--bifa-transition);\\n}\\n\\n.president-section-wrapper .photo-frame::before {\\n content: '';\\n position: absolute;\\n top: -5px;\\n left: -5px;\\n right: -5px;\\n bottom: -5px;\\n background: linear-gradient(135deg, \\n var(--bifa-heritage-gold) 0%, \\n var(--bifa-heritage-gold) 25%,\\n var(--bifa-deep-navy) 50%,\\n var(--bifa-heritage-gold) 75%, \\n var(--bifa-heritage-gold) 100%\\n );\\n border-radius: 0 45% 0 45%;\\n z-index: -1;\\n animation: presidentGradientRotate 8s linear infinite;\\n}\\n\\n@keyframes presidentGradientRotate {\\n 0% { filter: hue-rotate(0deg); }\\n 100% { filter: hue-rotate(360deg); }\\n}\\n\\n.president-section-wrapper .photo-frame img {\\n width: 100%;\\n height: 100%;\\n object-fit: cover;\\n transition: var(--bifa-transition);\\n}\\n\\n.president-section-wrapper .photo-frame:hover {\\n transform: translateY(-5px);\\n box-shadow: var(--bifa-shadow-gold);\\n}\\n\\n.president-section-wrapper .photo-frame:hover img {\\n transform: scale(1.05);\\n}\\n\\n\\\/* Title decoration matching mission style *\\\/\\n.president-section-wrapper .title-decoration {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n gap: 20px;\\n margin-bottom: 25px;\\n}\\n\\n.president-section-wrapper .gold-line {\\n width: 80px;\\n height: 3px;\\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent);\\n animation: presidentPulse 2s ease-in-out infinite;\\n}\\n\\n@keyframes presidentPulse {\\n 0%, 100% {\\n opacity: 0.6;\\n transform: scaleX(1);\\n }\\n 50% {\\n opacity: 1;\\n transform: scaleX(1.2);\\n }\\n}\\n\\n.president-section-wrapper .president-title {\\n font-family: var(--bifa-font-heading);\\n font-size: 0.9rem;\\n font-weight: 700;\\n text-transform: uppercase;\\n letter-spacing: 4px;\\n color: var(--bifa-heritage-gold);\\n}\\n\\n.president-section-wrapper .president-name {\\n font-family: var(--bifa-font-heading);\\n font-size: clamp(2rem, 3vw, 2.8rem);\\n font-weight: 900;\\n color: var(--bifa-deep-navy);\\n margin-bottom: 30px;\\n line-height: 1.2;\\n position: relative;\\n transition: var(--bifa-transition);\\n}\\n\\n.president-section-wrapper .president-name::after {\\n content: '';\\n position: absolute;\\n bottom: -10px;\\n left: 50%;\\n transform: translateX(-50%);\\n width: 100px;\\n height: 3px;\\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent);\\n border-radius: 2px;\\n animation: presidentLineGrow 1.5s ease-out 1s both;\\n}\\n\\n@keyframes presidentLineGrow {\\n from { width: 0; }\\n to { width: 100px; }\\n}\\n\\n.president-section-wrapper .president-name:hover {\\n color: var(--bifa-heritage-gold);\\n transform: translateY(-2px);\\n}\\n\\n.president-section-wrapper .president-description {\\n font-family: var(--bifa-font-body);\\n font-size: 1.1rem;\\n line-height: 1.9;\\n color: var(--bifa-soft-black);\\n margin-bottom: 40px;\\n max-width: 900px;\\n margin-left: auto;\\n margin-right: auto;\\n text-align: left;\\n}\\n\\n.president-section-wrapper .president-description .intro-text {\\n font-size: 1.2rem;\\n margin-bottom: 40px;\\n text-align: center;\\n font-weight: 500;\\n}\\n\\n.president-section-wrapper .president-description .highlight {\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n font-weight: 600;\\n position: relative;\\n}\\n\\n.president-section-wrapper .president-description .highlight::after {\\n content: '';\\n position: absolute;\\n bottom: -2px;\\n left: 0;\\n width: 100%;\\n height: 2px;\\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent);\\n opacity: 0.3;\\n}\\n\\n\\\/* Content sections *\\\/\\n.president-section-wrapper .philosophy-section,\\n.president-section-wrapper .vision-section,\\n.president-section-wrapper .leadership-section,\\n.president-section-wrapper .impact-section {\\n margin-bottom: 35px;\\n padding: 25px;\\n background: rgba(248, 249, 250, 0.5);\\n border-radius: 15px;\\n border-left: 4px solid var(--bifa-heritage-gold);\\n transition: var(--bifa-transition);\\n}\\n\\n.president-section-wrapper .philosophy-section:hover,\\n.president-section-wrapper .vision-section:hover,\\n.president-section-wrapper .leadership-section:hover,\\n.president-section-wrapper .impact-section:hover {\\n background: rgba(248, 249, 250, 0.8);\\n transform: translateX(5px);\\n box-shadow: var(--bifa-shadow-sm);\\n}\\n\\n.president-section-wrapper .section-heading {\\n font-family: var(--bifa-font-heading);\\n font-size: 1.3rem;\\n font-weight: 700;\\n color: var(--bifa-deep-navy);\\n margin-bottom: 15px;\\n position: relative;\\n padding-bottom: 8px;\\n}\\n\\n.president-section-wrapper .section-heading::after {\\n content: '';\\n position: absolute;\\n bottom: 0;\\n left: 0;\\n width: 60px;\\n height: 2px;\\n background: var(--bifa-heritage-gold);\\n border-radius: 1px;\\n}\\n\\n.president-section-wrapper .quote-text {\\n font-family: var(--bifa-font-heading);\\n font-size: 1.4rem;\\n font-weight: 600;\\n color: var(--bifa-heritage-gold);\\n font-style: italic;\\n text-align: center;\\n margin: 20px 0;\\n padding: 20px;\\n background: rgba(212, 175, 55, 0.05);\\n border-radius: 10px;\\n position: relative;\\n}\\n\\n.president-section-wrapper .quote-text::before {\\n content: '\\\"';\\n position: absolute;\\n top: -10px;\\n left: 15px;\\n font-size: 3rem;\\n color: var(--bifa-heritage-gold);\\n opacity: 0.3;\\n}\\n\\n.president-section-wrapper .quote-text::after {\\n content: '\\\"';\\n position: absolute;\\n bottom: -25px;\\n right: 15px;\\n font-size: 3rem;\\n color: var(--bifa-heritage-gold);\\n opacity: 0.3;\\n}\\n\\n\\\/* Action Buttons - matching mission style *\\\/\\n.president-section-wrapper .action-row {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n gap: 25px;\\n margin-top: 50px;\\n}\\n\\n.president-section-wrapper .btn-elegant {\\n padding: 16px 35px;\\n text-decoration: none;\\n font-size: 1rem;\\n font-weight: 600;\\n border-radius: 50px;\\n display: inline-flex;\\n align-items: center;\\n gap: 10px;\\n transition: var(--bifa-transition);\\n position: relative;\\n overflow: hidden;\\n text-transform: uppercase;\\n letter-spacing: 1px;\\n font-family: var(--bifa-font-heading);\\n}\\n\\n.president-section-wrapper .btn-primary {\\n background: linear-gradient(135deg, var(--bifa-heritage-gold) 0%, var(--bifa-heritage-gold) 100%);\\n color: var(--bifa-bright-white);\\n box-shadow: var(--bifa-shadow-gold);\\n border: 2px solid transparent;\\n}\\n\\n.president-section-wrapper .btn-primary::before {\\n content: '';\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n background: linear-gradient(135deg, var(--bifa-deep-navy), var(--bifa-deep-navy));\\n opacity: 0;\\n transition: opacity 0.4s ease;\\n}\\n\\n.president-section-wrapper .btn-primary:hover::before {\\n opacity: 1;\\n}\\n\\n.president-section-wrapper .btn-primary span,\\n.president-section-wrapper .btn-primary svg {\\n position: relative;\\n z-index: 1;\\n}\\n\\n.president-section-wrapper .btn-primary:hover {\\n transform: translateY(-3px);\\n box-shadow: 0 20px 40px rgba(212, 175, 55, 0.4);\\n}\\n\\n.president-section-wrapper .btn-secondary {\\n background: transparent;\\n color: var(--bifa-deep-navy);\\n border: 2px solid var(--bifa-deep-navy);\\n}\\n\\n.president-section-wrapper .btn-secondary:hover {\\n background: var(--bifa-deep-navy);\\n color: var(--bifa-bright-white);\\n transform: translateY(-3px);\\n box-shadow: var(--bifa-shadow-lg);\\n}\\n\\n\\\/* Floating particles - matching mission *\\\/\\n.president-section-wrapper .bg-particles {\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n overflow: hidden;\\n z-index: 1;\\n pointer-events: none;\\n}\\n\\n.president-section-wrapper .particle {\\n position: absolute;\\n width: 4px;\\n height: 4px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\\n border-radius: 50%;\\n animation: presidentFloat 20s infinite linear;\\n box-shadow: 0 0 12px rgba(212, 175, 55, 0.3);\\n opacity: 0.3;\\n}\\n\\n@keyframes presidentFloat {\\n 0% {\\n transform: translateY(100vh) translateX(0);\\n opacity: 0;\\n }\\n 15% { opacity: 0.3; }\\n 85% { opacity: 0.3; }\\n 100% {\\n transform: translateY(-100vh) translateX(30px);\\n opacity: 0;\\n }\\n}\\n\\n\\\/* Fallback for browsers without background-clip support *\\\/\\n@supports not (background-clip: text) {\\n .president-section-wrapper .section-title,\\n .president-section-wrapper .highlight {\\n color: var(--bifa-heritage-gold) !important;\\n background: none !important;\\n }\\n}\\n\\n\\\/* ========= RESPONSIVE - MATCHING MISSION ========= *\\\/\\n@media (max-width: 1200px) {\\n .president-section-wrapper .president-container {\\n padding: 0 4%;\\n }\\n}\\n\\n@media (max-width: 768px) {\\n .president-section-wrapper .president-container {\\n padding: 0 3%;\\n }\\n \\n .president-section-wrapper .president-section {\\n padding: 60px 0;\\n }\\n \\n .president-section-wrapper .president-photo {\\n width: 240px;\\n height: 300px;\\n }\\n \\n .president-section-wrapper .section-title {\\n font-size: 2rem;\\n }\\n \\n .president-section-wrapper .president-name {\\n font-size: 1.8rem;\\n }\\n \\n .president-section-wrapper .president-description {\\n font-size: 1rem;\\n }\\n \\n .president-section-wrapper .president-description .intro-text {\\n font-size: 1.1rem;\\n }\\n \\n .president-section-wrapper .section-heading {\\n font-size: 1.2rem;\\n }\\n \\n .president-section-wrapper .quote-text {\\n font-size: 1.2rem;\\n padding: 15px;\\n }\\n \\n .president-section-wrapper .philosophy-section,\\n .president-section-wrapper .vision-section,\\n .president-section-wrapper .leadership-section,\\n .president-section-wrapper .impact-section {\\n padding: 20px 15px;\\n margin-bottom: 25px;\\n }\\n \\n .president-section-wrapper .action-row {\\n flex-direction: column;\\n gap: 15px;\\n }\\n \\n .president-section-wrapper .btn-elegant {\\n width: 100%;\\n justify-content: center;\\n }\\n}\\n\\n@media (max-width: 480px) {\\n .president-section-wrapper .president-container {\\n padding: 0 2%;\\n }\\n \\n .president-section-wrapper .president-photo {\\n width: 200px;\\n height: 260px;\\n }\\n \\n .president-section-wrapper .president-name {\\n font-size: 1.5rem;\\n }\\n \\n .president-section-wrapper .president-description {\\n font-size: 0.95rem;\\n }\\n \\n .president-section-wrapper .president-description .intro-text {\\n font-size: 1rem;\\n }\\n \\n .president-section-wrapper .section-heading {\\n font-size: 1.1rem;\\n }\\n \\n .president-section-wrapper .quote-text {\\n font-size: 1.1rem;\\n padding: 12px;\\n }\\n \\n .president-section-wrapper .philosophy-section,\\n .president-section-wrapper .vision-section,\\n .president-section-wrapper .leadership-section,\\n .president-section-wrapper .impact-section {\\n padding: 15px 12px;\\n margin-bottom: 20px;\\n }\\n \\n .president-section-wrapper .btn-elegant {\\n padding: 14px 25px;\\n font-size: 0.9rem;\\n }\\n \\n .president-section-wrapper .title-decoration {\\n gap: 15px;\\n }\\n \\n .president-section-wrapper .gold-line {\\n width: 60px;\\n }\\n \\n .president-section-wrapper .president-title {\\n font-size: 0.8rem;\\n letter-spacing: 3px;\\n }\\n}\\n<\\\/style>\\n<\\\/head>\\n<body>\\n\\n<\/p>\n<div class=\\\"president-section-wrapper\\\" id=\\\"founder\\\">\\n \\n <\/p>\n<div class=\\\"bg-particles\\\"><\\\/div>\\n \\n \\n <\/p>\n<section class=\\\"president-section\\\">\\n <\/p>\n<div class=\\\"president-container\\\">\\n \\n <\/p>\n<div class=\\\"section-header\\\">\\n <\/p>\n<h2 class=\\\"section-title\\\">Our Founder<\\\/h2>\\n <\/p>\n<p class=\\\"section-subtitle\\\">\\n Visionary leadership driving international sports diplomacy and cultural cooperation across the Global South.\\n <\\\/p>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\\\"president-card\\\">\\n <\/p>\n<div class=\\\"president-card-content\\\">\\n \\n <\/p>\n<div class=\\\"president-photo\\\">\\n <\/p>\n<div class=\\\"photo-frame\\\">\\n <img src=\\\"https:\\\/\\\/bifa.ai\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Mr\\\/main-photo.jpg\\\" \\n alt=\\\"Dr. Salim Humaid Almazaini\\\"\\n data-no-translation=\\\"true\\\"\\n data-no-dynamic-translation=\\\"true\\\">\\n <\\\/div>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\\\"title-decoration\\\">\\n <\/p>\n<div class=\\\"gold-line\\\"><\\\/div>\\n <\/p>\n<h3 class=\\\"president-title\\\">Founder & President<\\\/h3>\\n <\/p>\n<div class=\\\"gold-line\\\"><\\\/div>\\n <\\\/div>\\n \\n <\/p>\n<h1 class=\\\"president-name\\\">Dr. Salim Humaid Almazaini<\\\/h1>\\n \\n <\/p>\n<div class=\\\"president-description\\\">\\n <\/p>\n<p class=\\\"intro-text\\\">\\n A <span class=\\\"highlight\\\">visionary leader<\\\/span> in modern sports diplomacy and the architect of an international movement that unites youth through football, culture, and education. Based in Dubai, the founder has created what represents one of the most ambitious <span class=\\\"highlight\\\">cultural-sports initiatives connecting the Global South<\\\/span>.\\n <\\\/p>\\n \\n <\/p>\n<div class=\\\"philosophy-section\\\">\\n <\/p>\n<h4 class=\\\"section-heading\\\">Philosophy<\\\/h4>\\n <\/p>\n<p class=\\\"quote-text\\\">\\\"We're not just playing a game. We're building the future.\\\"<\\\/p>\\n <\/p>\n<p>This powerful statement encapsulates the belief that football transcends sport\\u2014it becomes a <span class=\\\"highlight\\\">vehicle for peace, understanding, and international cooperation<\\\/span>. The approach transforms the beautiful game into a tool for soft diplomacy and cultural bridge-building.<\\\/p>\\n <\\\/div>\\n \\n <\/p>\n<div class=\\\"vision-section\\\">\\n <\/p>\n<h4 class=\\\"section-heading\\\">Strategic Vision<\\\/h4>\\n <\/p>\n<p>Under this leadership, BIFA+ has evolved into a comprehensive international ecosystem that connects youth through multiple channels: <span class=\\\"highlight\\\">sports excellence, educational advancement, cultural exchange, and cutting-edge technology integration<\\\/span>. The alliance serves as an independent, decentralized platform fostering development, peace, and social inclusion among countries of the Global South.<\\\/p>\\n <\\\/div>\\n \\n <\/p>\n<div class=\\\"leadership-section\\\">\\n <\/p>\n<h4 class=\\\"section-heading\\\">Innovation in Sports Diplomacy<\\\/h4>\\n <\/p>\n<p>BIFA+ is envisioned as more than a sports organization\\u2014it's a movement that uses football as a <span class=\\\"highlight\\\">universal language to promote peace, cultural understanding, and youth empowerment<\\\/span>. This initiative represents a new model of international cooperation, where sport becomes a catalyst for positive social change and diplomatic engagement.<\\\/p>\\n <\\\/div>\\n \\n <\/p>\n<div class=\\\"impact-section\\\">\\n <\/p>\n<h4 class=\\\"section-heading\\\">Building Tomorrow<\\\/h4>\\n <\/p>\n<p>Through BIFA+, a legacy is being created that extends far beyond football pitches. The platform enables young people from diverse backgrounds to connect, learn, and collaborate, fostering the next generation of <span class=\\\"highlight\\\">global citizens who understand that cooperation trumps competition<\\\/span> in building a better world.<\\\/p>\\n <\\\/div>\\n <\\\/div> \\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/section>\\n<\\\/div>\\n\\n<script>\\ndocument.addEventListener('DOMContentLoaded', () => {\\n \\\/\\\/ Create floating particles - matching mission section\\n const particlesContainer = document.querySelector('.president-section-wrapper .bg-particles');\\n const particleCount = 8;\\n\\n for (let i = 0; i < particleCount; i++) {\\n const particle = document.createElement('div');\\n particle.className = 'particle';\\n particle.style.left = Math.random() * 100 + '%';\\n particle.style.animationDelay = Math.random() * 20 + 's';\\n particle.style.animationDuration = (18 + Math.random() * 6) + 's';\\n \\n const size = 3 + Math.random() * 2;\\n particle.style.width = size + 'px';\\n particle.style.height = size + 'px';\\n \\n particlesContainer.appendChild(particle);\\n }\\n\\n \\\/\\\/ Animate elements on scroll - matching mission behavior\\n const observerOptions = {\\n threshold: 0.1,\\n rootMargin: '0px 0px -100px 0px'\\n };\\n\\n const observer = new IntersectionObserver((entries) => {\\n entries.forEach(entry => {\\n if (entry.isIntersecting) {\\n entry.target.style.opacity = '1';\\n entry.target.style.transform = 'translateY(0)';\\n }\\n });\\n }, observerOptions);\\n\\n \\\/\\\/ Observe animated elements\\n const animatedElements = document.querySelectorAll('.president-section-wrapper .president-content-area, .president-section-wrapper .section-header');\\n animatedElements.forEach(el => {\\n observer.observe(el);\\n });\\n\\n \\\/\\\/ Button hover effects\\n document.querySelectorAll('.president-section-wrapper .btn-elegant').forEach(button => {\\n button.addEventListener('mouseenter', (e) => {\\n const rect = button.getBoundingClientRect();\\n const x = e.clientX - rect.left;\\n const y = e.clientY - rect.top;\\n \\n const ripple = document.createElement('div');\\n ripple.style.cssText = `\\n position: absolute;\\n width: 100px;\\n height: 100px;\\n background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);\\n left: ${x - 50}px;\\n top: ${y - 50}px;\\n pointer-events: none;\\n opacity: 0;\\n transition: opacity 0.3s ease;\\n border-radius: 50%;\\n z-index: 0;\\n `;\\n \\n button.appendChild(ripple);\\n setTimeout(() => { ripple.style.opacity = '1'; }, 10);\\n \\n button.addEventListener('mouseleave', () => {\\n ripple.style.opacity = '0';\\n setTimeout(() => ripple.remove(), 300);\\n }, { once: true });\\n });\\n });\\n\\n \\\/\\\/ Simple image loading effect\\n const presidentImage = document.querySelector('.president-section-wrapper .photo-frame img');\\n if (presidentImage) {\\n presidentImage.style.opacity = '0';\\n presidentImage.style.transition = 'opacity 0.8s ease';\\n \\n if (presidentImage.complete) {\\n presidentImage.style.opacity = '1';\\n } else {\\n presidentImage.addEventListener('load', function() {\\n this.style.opacity = '1';\\n });\\n }\\n }\\n\\n \\\/\\\/ Smooth scroll for anchor links\\n document.querySelectorAll('a[href^=\\\"#\\\"]').forEach(anchor => {\\n anchor.addEventListener('click', function (e) {\\n e.preventDefault();\\n const target = document.querySelector(this.getAttribute('href'));\\n if (target) {\\n target.scrollIntoView({\\n behavior: 'smooth',\\n block: 'start'\\n });\\n }\\n });\\n });\\n});\\n<\\\/script>\\n\\n<\\\/body>\\n<\\\/html>\"}},{\"type\":\"html\",\"props\":{\"content\":\" <div class=\"bifa-team-section-wrapper\" id=\"core-team\">\n <div class=\"bifa-team-bg-particles\"><\/div>\n <div class=\"bifa-team-pattern-overlay\"><\/div>\n\n <section class=\"bifa-team-section\">\n <div class=\"bifa-team-container\">\n <div class=\"bifa-team-header\">\n <h2 class=\"bifa-team-title\">Core Team<\/h2>\n <p class=\"bifa-team-subtitle\">\n Meet the dedicated professionals driving BIFA+'s mission to unite the Global South through football, innovation, and cultural exchange.\n <\/p>\n <\/div>\n\n <div class=\"bifa-team-coming-soon\">\n <div class=\"bifa-team-coming-icon\">\ud83d\udc65<\/div>\n\n <h3 class=\"bifa-team-coming-title\">Our Team is Growing<\/h3>\n\n <p class=\"bifa-team-coming-text\">\n We are currently assembling a world-class team of <span class=\"bifa-highlight\">sports professionals, technology innovators, and cultural ambassadors<\/span> who share our vision of transforming youth sports across the Global South.\n <\/p>\n\n <p class=\"bifa-team-coming-text\">\n As we prepare for our official launch, we're carefully selecting individuals who bring not just expertise, but also <span class=\"bifa-highlight\">passion, creativity, and commitment<\/span> to our mission of building bridges through football.\n <\/p>\n\n <div class=\"bifa-team-notify-box\">\n <h4 class=\"bifa-team-notify-title\">Be the First to Know<\/h4>\n <p class=\"bifa-team-notify-text\">\n Our complete team roster will be unveiled at the official BIFA+ launch.\n Get in touch to learn more about our revolutionary movement.\n <\/p>\n\n <a href=\"https:\/\/bifa.ai\/hi\/contacts\/\" class=\"bifa-team-btn-notify\">\n <span>Stay Connected<\/span>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <\/div>\n\n <script>\n (function() {\n const container = document.querySelector('.bifa-team-bg-particles');\n if (container) {\n for (let i = 0; i < 6; i++) {\n const particle = document.createElement('div');\n particle.className = 'bifa-team-particle';\n particle.style.left = Math.random() * 100 + '%';\n particle.style.animationDelay = Math.random() * 20 + 's';\n particle.style.animationDuration = (18 + Math.random() * 6) + 's';\n container.appendChild(particle);\n }\n }\n })();\n <\/script>\n \"}},{\"type\":\"html\",\"props\":{\"content\":\"\"}}]}]}]}],\"version\":\"4.5.32\"} --><\/p>","protected":false},"excerpt":{"rendered":"<p>About BIFA \u2014 Global Sports Alliance About BIFA+ BRICS International Football Alliance “Play with Spirit. Lead with Vision.” BIFA+ (BIFA Plus) is an international sports and cultural initiative that connects countries of the Global South through football, education, technology, and people-to-people diplomacy. Founded by Salim Humaid Almazaini from the UAE, BIFA+ brings together 11 nations […]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-614","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bifa.ai\/hi\/wp-json\/wp\/v2\/pages\/614","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bifa.ai\/hi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bifa.ai\/hi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bifa.ai\/hi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bifa.ai\/hi\/wp-json\/wp\/v2\/comments?post=614"}],"version-history":[{"count":63,"href":"https:\/\/bifa.ai\/hi\/wp-json\/wp\/v2\/pages\/614\/revisions"}],"predecessor-version":[{"id":1447,"href":"https:\/\/bifa.ai\/hi\/wp-json\/wp\/v2\/pages\/614\/revisions\/1447"}],"wp:attachment":[{"href":"https:\/\/bifa.ai\/hi\/wp-json\/wp\/v2\/media?parent=614"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n
\n
\n
\n
\nAbout BIFA \u2014 Global Sports Alliance<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\n<style>\n\/* ========= CSS VARIABLES - BIFA+ BRAND GUIDE - ISOLATED ========= *\/\n.about-section-wrapper {\n \/* Isolated CSS Variables - only for this section *\/\n --bifa-deep-navy: #0A1F44;\n --bifa-heritage-gold: #D4AF37;\n --bifa-civic-green: #1D6143;\n --bifa-bright-white: #FFFFFF;\n --bifa-soft-black: #1A1A1A;<\/p>\n<p> \/* Additional colors for better readability *\/\n --bifa-gray-light: #F8F9FA;\n --bifa-gray-medium: #E9ECEF;\n --bifa-gray: #6C757D;\n --bifa-gray-dark: #495057;<\/p>\n<p> \/* Official BIFA+ Fonts *\/\n --bifa-font-heading: 'Montserrat', sans-serif;\n --bifa-font-body: 'Poppins', sans-serif;<\/p>\n<p> \/* Premium shadows and effects *\/\n --bifa-shadow-sm: 0 2px 8px rgba(10, 31, 68, 0.08);\n --bifa-shadow-md: 0 8px 24px rgba(10, 31, 68, 0.12);\n --bifa-shadow-lg: 0 16px 48px rgba(10, 31, 68, 0.16);\n --bifa-shadow-xl: 0 25px 80px rgba(10, 31, 68, 0.15);\n --bifa-shadow-gold: 0 15px 40px rgba(212, 175, 55, 0.3);\n --bifa-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}<\/p>\n<p>\/* ========= RESET - ONLY FOR THIS SECTION ========= *\/\n.about-section-wrapper * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}<\/p>\n<p>\/* RESET ONLY APPLIES TO CONTENT INSIDE WRAPPER *\/\n.about-section-wrapper {\n font-family: var(--bifa-font-body);\n overflow-x: hidden;\n background: var(--bifa-bright-white);\n color: var(--bifa-soft-black);\n line-height: 1.6;\n}<\/p>\n<p>\/* DO NOT AFFECT ANYTHING OUTSIDE THE WRAPPER *\/<\/p>\n<p>\/* ========= MAIN WRAPPER - NO HEADER CONFLICTS ========= *\/\n.about-section-wrapper {\n width: 100vw;\n position: relative;\n left: 50%;\n margin-left: -50vw;\n background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 50%, #ffffff 100%);\n overflow: hidden;\n min-height: 100vh;\n}<\/p>\n<p>\/* Header connection line - gold glow *\/\n.about-section-wrapper::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 2px;\n background: linear-gradient(90deg, \n rgba(212, 175, 55, 0.3) 0%, \n rgba(212, 175, 55, 0.8) 50%, \n rgba(212, 175, 55, 0.3) 100%\n );\n box-shadow: \n 0 0 10px rgba(212, 175, 55, 0.4),\n 0 0 20px rgba(212, 175, 55, 0.2);\n z-index: 100;\n animation: goldPulse 3s ease-in-out infinite;\n}<\/p>\n<p>@keyframes goldPulse {\n 0%, 100% { opacity: 0.6; }\n 50% { opacity: 1; }\n}<\/p>\n<p>\/* Optimized Floating Particles *\/\n.bg-particles {\n position: absolute;\n width: 100%;\n height: 100%;\n overflow: hidden;\n z-index: 2;\n will-change: auto;\n pointer-events: none;\n}<\/p>\n<p>.particle {\n position: absolute;\n width: 4px;\n height: 4px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\n border-radius: 50%;\n animation: float 18s infinite linear;\n box-shadow: 0 0 12px rgba(212, 175, 55, 0.5);\n opacity: 0.4;\n will-change: transform;\n}<\/p>\n<p>@keyframes float {\n 0% {\n transform: translateY(100vh) translateX(0);\n opacity: 0;\n }\n 15% { opacity: 1; }\n 85% { opacity: 1; }\n 100% {\n transform: translateY(-100vh) translateX(30px);\n opacity: 0;\n }\n}<\/p>\n<p>\/* ========= HERO SECTION - NO CONFLICTS ========= *\/\n.hero-section {\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n padding: 80px 0; \/* Add padding instead of relying on container *\/\n background: linear-gradient(180deg, var(--bifa-bright-white) 0%, var(--bifa-gray-light) 100%);\n}<\/p>\n<p>.content-container {\n display: grid;\n grid-template-columns: 1fr 1fr;\n min-height: auto; \/* Remove fixed height *\/\n max-width: none; \/* Remove container limit for full width *\/\n width: 90%; \/* Use percentage instead of 100% *\/\n margin: 0 auto;\n gap: 0;\n position: relative;\n z-index: 10;\n}<\/p>\n<p>\/* ========= LEFT SIDE - CONTENT ========= *\/\n.content-side {\n padding: 80px 60px 60px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n background: rgba(255,255,255,0.98);\n backdrop-filter: blur(10px);\n position: relative;\n}<\/p>\n<p>.content-side::before {\n content: '';\n position: absolute;\n top: 10%;\n right: 0;\n width: 1px;\n height: 80%;\n background: linear-gradient(to bottom, transparent, rgba(212, 175, 55, 0.2), transparent);\n}<\/p>\n<p>\/* ISOLATED MAIN HEADING - NO GLOBAL IMPACT *\/\n.about-section-wrapper .main-heading {\n font-family: var(--bifa-font-heading);\n font-size: clamp(2.5rem, 4vw, 4rem);\n font-weight: 900;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n margin-bottom: 20px;\n line-height: 1.1;\n animation: aboutSlideInLeft 1.2s ease-out;\n letter-spacing: -0.02em;\n position: relative;\n z-index: 1;\n}<\/p>\n<p>\/* ISOLATED SUBTITLE *\/\n.about-section-wrapper .subtitle {\n font-family: var(--bifa-font-heading);\n font-size: clamp(1.1rem, 2vw, 1.4rem);\n color: var(--bifa-deep-navy);\n font-weight: 600;\n margin-bottom: 15px;\n letter-spacing: 0.5px;\n animation: aboutSlideInLeft 1.2s ease-out 0.2s both;\n}<\/p>\n<p>\/* ISOLATED HIGHLIGHT *\/\n.about-section-wrapper .highlight {\n font-weight: 700;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n position: relative;\n}<\/p>\n<p>\/* ISOLATED SLOGAN STYLES - NO GLOBAL IMPACT *\/\n.about-section-wrapper .slogan {\n font-family: var(--bifa-font-heading);\n font-size: clamp(1.2rem, 2.2vw, 1.6rem);\n font-weight: 700;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n margin-bottom: 25px;\n font-style: italic;\n animation: aboutSlideInLeft 1.2s ease-out 0.4s both;\n position: relative;\n z-index: 1;\n display: block;\n width: 100%;\n text-align: left;\n}<\/p>\n<p>\/* ISOLATED ANIMATION - DIFFERENT NAME *\/\n@keyframes aboutSlideInLeft {\n from {\n opacity: 0;\n transform: translateX(-50px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}<\/p>\n<p>\/* Protection - ONLY FOR ABOUT SECTION *\/\n.about-section-wrapper .hero-section .content-side .slogan {\n color: transparent !important;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold)) !important;\n -webkit-background-clip: text !important;\n background-clip: text !important;\n font-weight: 700 !important;\n font-style: italic !important;\n position: relative !important;\n transform: none !important;\n opacity: 1 !important;\n display: block !important;\n width: auto !important;\n height: auto !important;\n}<\/p>\n<p>\/* Fallback for browsers without background-clip support - ISOLATED *\/\n@supports not (background-clip: text) {\n .about-section-wrapper .slogan,\n .about-section-wrapper .hero-section .content-side .slogan {\n color: var(--bifa-heritage-gold) !important;\n background: none !important;\n position: relative !important;\n transform: none !important;\n opacity: 1 !important;\n }<\/p>\n<p> .about-section-wrapper .highlight {\n color: var(--bifa-heritage-gold) !important;\n background: none !important;\n }<\/p>\n<p> .about-section-wrapper .stat-number {\n color: var(--bifa-heritage-gold) !important;\n background: none !important;\n }<\/p>\n<p> .about-section-wrapper .main-heading {\n color: var(--bifa-heritage-gold) !important;\n background: none !important;\n }\n}<\/p>\n<p>.description {\n font-family: var(--bifa-font-body);\n font-size: clamp(1rem, 1.4vw, 1.1rem);\n line-height: 1.8;\n color: var(--bifa-soft-black);\n margin-bottom: 40px;\n animation: slideInLeft 1.2s ease-out 0.6s both;\n font-weight: 400;\n}<\/p>\n<p>.highlight {\n font-weight: 700;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n position: relative;\n}<\/p>\n<p>\/* Fallback for highlight *\/\n@supports not (background-clip: text) {\n .highlight {\n color: var(--bifa-heritage-gold);\n background: none;\n }\n}<\/p>\n<p>\/* Stats Cards *\/\n.stats-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 20px;\n margin-bottom: 40px;\n animation: slideInLeft 1.2s ease-out 0.8s both;\n}<\/p>\n<p>.stat-card {\n background: var(--bifa-bright-white);\n padding: 25px 20px;\n border-radius: 20px;\n text-align: center;\n backdrop-filter: blur(10px);\n border: 2px solid rgba(212, 175, 55, 0.15);\n transition: var(--bifa-transition);\n position: relative;\n overflow: hidden;\n box-shadow: var(--bifa-shadow-sm);\n}<\/p>\n<p>.stat-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 3px;\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent);\n transition: left 0.6s ease;\n}<\/p>\n<p>.stat-card:hover::before {\n left: 100%;\n}<\/p>\n<p>.stat-card:hover {\n transform: translateY(-8px);\n box-shadow: var(--bifa-shadow-gold);\n border-color: rgba(212, 175, 55, 0.3);\n}<\/p>\n<p>.stat-number {\n font-family: var(--bifa-font-heading);\n font-size: 2.5rem;\n font-weight: 900;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n margin-bottom: 8px;\n text-shadow: 0 2px 10px rgba(212, 175, 55, 0.2);\n}<\/p>\n<p>\/* Fallback for stat numbers *\/\n@supports not (background-clip: text) {\n .stat-number {\n color: var(--bifa-heritage-gold);\n background: none;\n }\n}<\/p>\n<p>.stat-label {\n font-family: var(--bifa-font-heading);\n font-size: 0.8rem;\n font-weight: 600;\n letter-spacing: 0.5px;\n text-transform: uppercase;\n color: var(--bifa-deep-navy);\n}<\/p>\n<p>\/* Action Buttons *\/\n.action-buttons {\n display: flex;\n flex-direction: column;\n gap: 15px;\n animation: slideInLeft 1.2s ease-out 1s both;\n}<\/p>\n<p>.cta-button {\n padding: 18px 35px;\n font-family: var(--bifa-font-heading);\n font-size: 0.95rem;\n font-weight: 700;\n text-transform: uppercase;\n border-radius: 50px;\n text-decoration: none;\n position: relative;\n overflow: hidden;\n transition: var(--bifa-transition);\n letter-spacing: 1px;\n color: var(--bifa-bright-white);\n text-align: center;\n border: 2px solid transparent;\n}<\/p>\n<p>.cta-button.primary {\n background: linear-gradient(135deg, var(--bifa-heritage-gold) 0%, var(--bifa-heritage-gold) 100%);\n box-shadow: var(--bifa-shadow-gold);\n color: var(--bifa-deep-navy);\n font-weight: 800;\n}<\/p>\n<p>.cta-button.secondary {\n background: linear-gradient(135deg, var(--bifa-deep-navy) 0%, var(--bifa-deep-navy) 100%);\n color: var(--bifa-bright-white);\n font-weight: 700;\n box-shadow: 0 10px 30px rgba(10, 31, 68, 0.3);\n}<\/p>\n<p>.cta-button::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0;\n height: 0;\n border-radius: 50%;\n background: rgba(255, 255, 255, 0.3);\n transform: translate(-50%, -50%);\n transition: all 0.6s ease;\n}<\/p>\n<p>.cta-button:hover {\n transform: translateY(-3px);\n}<\/p>\n<p>.cta-button:hover::before {\n width: 300px;\n height: 300px;\n}<\/p>\n<p>\/* ========= RIGHT SIDE - VIDEO ========= *\/\n.video-side {\n padding: 80px 60px 60px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n background: rgba(250,251,252,0.5);\n position: relative;\n}<\/p>\n<p>\/* Section Title for Video Side *\/\n.video-section-title {\n font-family: var(--bifa-font-heading);\n font-size: clamp(2rem, 3vw, 2.5rem);\n font-weight: 800;\n color: var(--bifa-deep-navy);\n margin-bottom: 30px;\n text-align: center;\n animation: slideInRight 1.2s ease-out;\n}<\/p>\n<p>.video-section-subtitle {\n font-family: var(--bifa-font-body);\n font-size: clamp(0.9rem, 1.2vw, 1.1rem);\n color: var(--bifa-soft-black);\n text-align: center;\n margin-bottom: 30px;\n animation: slideInRight 1.2s ease-out 0.2s both;\n font-weight: 400;\n}<\/p>\n<p>.video-wrapper {\n position: relative;\n width: 100%;\n padding-bottom: 56.25%;\n border-radius: 25px;\n background: linear-gradient(135deg, #fafbfc 0%, var(--bifa-bright-white) 100%);\n overflow: hidden;\n box-shadow: \n 0 25px 60px rgba(10, 31, 68, 0.1),\n 0 0 0 1px rgba(212, 175, 55, 0.15),\n inset 0 1px 0 rgba(255, 255, 255, 0.2);\n transition: var(--bifa-transition);\n animation: slideInRight 1.2s ease-out 0.4s both;\n}<\/p>\n<p>@keyframes slideInRight {\n from {\n opacity: 0;\n transform: translateX(50px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}<\/p>\n<p>\/* ========= LOADING SCREEN OVERLAY ========= *\/\n.video-loading-overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(135deg, var(--bifa-bright-white) 0%, #fafbfc 100%);\n border-radius: 25px;\n z-index: 100;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: opacity 0.8s ease, visibility 0.8s ease;\n overflow: hidden;\n}<\/p>\n<p>.video-loading-overlay.hidden {\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n}<\/p>\n<p>.loading-iframe {\n width: 100%;\n height: 100%;\n border: none;\n border-radius: 25px;\n background: transparent;\n}<\/p>\n<p>\/* Fallback loading animation if iframe fails *\/\n.fallback-loader {\n display: none;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n background: linear-gradient(135deg, var(--bifa-bright-white) 0%, #fafbfc 100%);\n}<\/p>\n<p>.fallback-loader.active {\n display: flex;\n}<\/p>\n<p>.loader-logo {\n width: 120px;\n height: 120px;\n margin-bottom: 30px;\n animation: logoSpin 2s ease-in-out infinite;\n}<\/p>\n<p>@keyframes logoSpin {\n 0%, 100% {\n transform: scale(1) rotate(0deg);\n }\n 50% {\n transform: scale(1.1) rotate(180deg);\n }\n}<\/p>\n<p>.loader-text {\n font-family: var(--bifa-font-heading);\n font-size: 24px;\n font-weight: 700;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n text-align: center;\n margin-bottom: 20px;\n}<\/p>\n<p>\/* Fallback for loader text *\/\n@supports not (background-clip: text) {\n .loader-text {\n color: var(--bifa-heritage-gold);\n background: none;\n }\n}<\/p>\n<p>.loader-progress {\n width: 200px;\n height: 6px;\n background: rgba(212, 175, 55, 0.2);\n border-radius: 3px;\n overflow: hidden;\n box-shadow: 0 2px 10px rgba(212, 175, 55, 0.1);\n}<\/p>\n<p>.loader-progress-bar {\n width: 0%;\n height: 100%;\n background: linear-gradient(90deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\n border-radius: 3px;\n animation: loadingProgress 3s ease-in-out infinite;\n box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);\n}<\/p>\n<p>@keyframes loadingProgress {\n 0% { width: 0%; }\n 50% { width: 70%; }\n 100% { width: 100%; }\n}<\/p>\n<p>.video-wrapper:hover {\n transform: translateY(-10px);\n box-shadow: \n 0 40px 100px rgba(212, 175, 55, 0.15),\n 0 0 0 2px rgba(212, 175, 55, 0.3),\n inset 0 1px 0 rgba(255, 255, 255, 0.2);\n}<\/p>\n<p>.video-wrapper video {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n}<\/p>\n<p>\/* Enhanced Controls *\/\n.controls {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n background: linear-gradient(to top, rgba(10,31,68,0.8) 0%, rgba(10,31,68,0.4) 50%, transparent 100%);\n padding: 25px 20px 15px;\n opacity: 0;\n visibility: hidden;\n transform: translateY(10px);\n transition: all 0.3s ease;\n z-index: 20;\n}<\/p>\n<p>.video-wrapper:hover .controls {\n opacity: 1;\n visibility: visible;\n transform: translateY(0);\n}<\/p>\n<p>.controls-row {\n display: flex;\n align-items: center;\n gap: 15px;\n margin-bottom: 10px;\n}<\/p>\n<p>.ctrl-btn {\n background: rgba(255, 255, 255, 0.9);\n border: none;\n width: 48px;\n height: 48px;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n backdrop-filter: blur(10px);\n transition: all 0.2s ease;\n position: relative;\n}<\/p>\n<p>.ctrl-btn svg {\n width: 24px;\n height: 24px;\n fill: var(--bifa-deep-navy);\n pointer-events: none;\n}<\/p>\n<p>.ctrl-btn:hover {\n transform: scale(1.1);\n background: rgba(212, 175, 55, 0.9);\n}<\/p>\n<p>.progress-container {\n flex: 1;\n margin: 0 15px;\n}<\/p>\n<p>.progress {\n width: 100%;\n height: 8px;\n background: rgba(255, 255, 255, 0.3);\n border-radius: 4px;\n cursor: pointer;\n overflow: hidden;\n position: relative;\n}<\/p>\n<p>.progress-bar {\n width: 0;\n height: 100%;\n background: linear-gradient(90deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\n transition: width 0.1s linear;\n border-radius: 4px;\n position: relative;\n}<\/p>\n<p>.progress-bar::after {\n content: '';\n position: absolute;\n right: -6px;\n top: 50%;\n transform: translateY(-50%);\n width: 12px;\n height: 12px;\n background: var(--bifa-heritage-gold);\n border-radius: 50%;\n box-shadow: 0 0 10px rgba(212, 175, 55, 0.6);\n}<\/p>\n<p>.time-display {\n color: var(--bifa-bright-white);\n font-size: 14px;\n font-weight: 600;\n font-family: var(--bifa-font-heading);\n text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);\n min-width: 60px;\n text-align: center;\n}<\/p>\n<p>.volume-container {\n display: flex;\n align-items: center;\n gap: 10px;\n}<\/p>\n<p>.volume-slider {\n width: 80px;\n height: 4px;\n background: rgba(255, 255, 255, 0.3);\n border-radius: 2px;\n cursor: pointer;\n position: relative;\n}<\/p>\n<p>.volume-bar {\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\n border-radius: 2px;\n transition: width 0.1s linear;\n}<\/p>\n<p>.fullscreen-btn {\n background: rgba(255, 255, 255, 0.9);\n border: none;\n width: 48px;\n height: 48px;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n backdrop-filter: blur(10px);\n transition: all 0.2s ease;\n}<\/p>\n<p>.fullscreen-btn:hover {\n transform: scale(1.1);\n background: rgba(212, 175, 55, 0.9);\n}<\/p>\n<p>\/* Video Info *\/\n.video-info {\n margin-top: 30px;\n animation: slideInRight 1.2s ease-out 0.6s both;\n}<\/p>\n<p>.video-title {\n font-family: var(--bifa-font-heading);\n font-size: clamp(1.3rem, 2vw, 1.8rem);\n font-weight: 800;\n color: var(--bifa-deep-navy);\n margin-bottom: 15px;\n}<\/p>\n<p>.member-countries {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n}<\/p>\n<p>.country-tag {\n background: var(--bifa-bright-white);\n padding: 10px 18px;\n border-radius: 25px;\n font-family: var(--bifa-font-heading);\n font-size: 0.85rem;\n font-weight: 600;\n color: var(--bifa-deep-navy);\n border: 2px solid rgba(212, 175, 55, 0.3);\n transition: var(--bifa-transition);\n box-shadow: 0 4px 15px rgba(10, 31, 68, 0.05);\n}<\/p>\n<p>.country-tag:hover {\n background: linear-gradient(135deg, var(--bifa-heritage-gold) 0%, var(--bifa-heritage-gold) 100%);\n color: var(--bifa-deep-navy);\n transform: translateY(-3px);\n box-shadow: var(--bifa-shadow-gold);\n border-color: transparent;\n}<\/p>\n<p>@keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>\/* ========= RESPONSIVE DESIGN - DESKTOP CONSISTENT, MOBILE OPTIMIZED ========= *\/<\/p>\n<p>\/* Keep desktop and laptop layouts identical - NO CONFLICTS *\/\n@media (min-width: 769px) {\n .about-section-wrapper .hero-section {\n padding: 80px 0;\n }<\/p>\n<p> .about-section-wrapper .content-container {\n grid-template-columns: 1fr 1fr;\n grid-template-rows: none;\n min-height: auto;\n width: 90%;\n max-width: 1600px;\n }<\/p>\n<p> .about-section-wrapper .content-side,\n .about-section-wrapper .video-side {\n padding: 80px 60px 60px;\n min-height: auto;\n }<\/p>\n<p> .about-section-wrapper .content-side {\n order: 0;\n }<\/p>\n<p> .about-section-wrapper .video-side {\n order: 0;\n }<\/p>\n<p> .about-section-wrapper .content-side::before {\n display: block;\n }<\/p>\n<p> .about-section-wrapper .stats-grid {\n grid-template-columns: repeat(2, 1fr);\n gap: 20px;\n }\n}<\/p>\n<p>\/* Large Desktop - controlled expansion *\/\n@media (min-width: 1400px) {\n .about-section-wrapper .content-container {\n max-width: 1800px;\n width: 85%;\n }<\/p>\n<p> .about-section-wrapper .content-side,\n .about-section-wrapper .video-side {\n padding: 100px 120px 80px;\n }\n}<\/p>\n<p>\/* Ultra-wide screens - prevent over-expansion *\/\n@media (min-width: 2000px) {\n .about-section-wrapper .content-container {\n max-width: 2200px;\n width: 80%;\n }<\/p>\n<p> .about-section-wrapper .content-side,\n .about-section-wrapper .video-side {\n padding: 120px 200px 100px;\n }\n}<\/p>\n<p>\/* MOBILE AND TABLET - SINGLE COLUMN FOR ALL *\/\n@media (max-width: 768px) {\n .about-section-wrapper .hero-section {\n padding: 40px 0;\n min-height: auto;\n }<\/p>\n<p> .about-section-wrapper .content-container {\n grid-template-columns: 1fr !important; \/* FORCE SINGLE COLUMN *\/\n grid-template-rows: auto auto !important;\n min-height: auto !important;\n width: 95% !important;\n max-width: none !important;\n gap: 0 !important;\n }<\/p>\n<p> .about-section-wrapper .content-side,\n .about-section-wrapper .video-side {\n padding: 40px 20px !important;\n min-height: auto !important;\n width: 100% !important;\n }<\/p>\n<p> \/* Content first, video second *\/\n .about-section-wrapper .content-side {\n order: 1 !important;\n }<\/p>\n<p> .about-section-wrapper .video-side {\n order: 2 !important;\n }<\/p>\n<p> .about-section-wrapper .content-side::before {\n display: none !important;\n }<\/p>\n<p> .about-section-wrapper .stats-grid {\n grid-template-columns: repeat(2, 1fr) !important;\n gap: 15px !important;\n }<\/p>\n<p> .about-section-wrapper .action-buttons {\n gap: 12px;\n }<\/p>\n<p> .about-section-wrapper .cta-button {\n padding: 16px 30px;\n font-size: 0.9rem;\n }<\/p>\n<p> .about-section-wrapper .controls-row {\n gap: 10px;\n }<\/p>\n<p> .about-section-wrapper .ctrl-btn {\n width: 42px;\n height: 42px;\n }<\/p>\n<p> .about-section-wrapper .volume-container {\n display: none;\n }\n}<\/p>\n<p>\/* Tablet Layout - only for real tablets *\/\n@media (max-width: 768px) and (min-width: 481px) {\n .content-container {\n grid-template-columns: 1fr;\n grid-template-rows: auto auto;\n min-height: auto;\n }<\/p>\n<p> .content-side,\n .video-side {\n padding: 60px 40px;\n min-height: auto;\n }<\/p>\n<p> \/* Mobile priority - content first *\/\n .content-side {\n order: 1;\n }<\/p>\n<p> .video-side {\n order: 2;\n }<\/p>\n<p> .content-side::before {\n display: none;\n }<\/p>\n<p> .stats-grid {\n grid-template-columns: repeat(4, 1fr);\n gap: 15px;\n }<\/p>\n<p> .hero-section {\n min-height: auto;\n padding: 40px 0;\n }\n}<\/p>\n<p>\/* Mobile Layout *\/\n@media (max-width: 768px) {\n .content-side,\n .video-side {\n padding: 40px 20px;\n }<\/p>\n<p> .stats-grid {\n grid-template-columns: repeat(2, 1fr);\n gap: 15px;\n }<\/p>\n<p> .action-buttons {\n gap: 12px;\n }<\/p>\n<p> .cta-button {\n padding: 16px 30px;\n font-size: 0.9rem;\n }<\/p>\n<p> .controls-row {\n gap: 10px;\n }<\/p>\n<p> .ctrl-btn {\n width: 42px;\n height: 42px;\n }<\/p>\n<p> .volume-container {\n display: none;\n }<\/p>\n<p>}<\/p>\n<p>\/* Small Mobile *\/\n@media (max-width: 480px) {\n .content-side,\n .video-side {\n padding: 30px 15px;\n }<\/p>\n<p> .video-wrapper {\n border-radius: 15px;\n }<\/p>\n<p> .controls {\n padding: 20px 15px 10px;\n }<\/p>\n<p> .member-countries {\n gap: 8px;\n }<\/p>\n<p> .country-tag {\n font-size: 0.75rem;\n padding: 6px 12px;\n }<\/p>\n<p> .stat-card {\n padding: 20px 15px;\n }<\/p>\n<p> .stat-number {\n font-size: 2rem;\n }<\/p>\n<p> .stat-label {\n font-size: 0.7rem;\n }<\/p>\n<p>}<\/p>\n<p>\/* Extra Small Mobile *\/\n@media (max-width: 360px) {\n .stats-grid {\n grid-template-columns: 1fr 1fr;\n gap: 10px;\n }<\/p>\n<p> .stat-card {\n padding: 15px 10px;\n }<\/p>\n<p> .stat-number {\n font-size: 1.8rem;\n }<\/p>\n<p> .country-tag {\n font-size: 0.7rem;\n padding: 5px 10px;\n }\n}<\/p>\n<p>\/* Landscape Desktop\/Laptop - keep side-by-side layout *\/\n@media (min-width: 769px) and (orientation: landscape) {\n .content-container {\n grid-template-columns: 1fr 1fr;\n grid-template-rows: none;\n min-height: 100vh;\n }<\/p>\n<p> .content-side,\n .video-side {\n padding: 80px 60px 60px;\n min-height: auto;\n }\n}<\/p>\n<p>\/* High DPI Displays *\/\n@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {\n .particle {\n transform: translateZ(0);\n }<\/p>\n<p> .video-wrapper {\n will-change: transform;\n }\n}<\/p>\n<p>\/* Reduced Motion *\/\n@media (prefers-reduced-motion: reduce) {\n .particle {\n animation: none;\n }<\/p>\n<p> .main-heading,\n .subtitle,\n .slogan,\n .description,\n .stats-grid,\n .action-buttons,\n .video-section-title,\n .video-section-subtitle,\n .video-wrapper,\n .video-info,\n .see-mission-link {\n animation: none;\n }<\/p>\n<p> .stat-card:hover,\n .cta-button:hover,\n .video-wrapper:hover,\n .country-tag:hover,\n .see-mission-link a:hover {\n transform: none;\n }\n}<\/p>\n<p>\/* Print Styles *\/\n@media print {\n .bg-particles,\n .video-wrapper,\n .controls {\n display: none;\n }<\/p>\n<p> .hero-section {\n min-height: auto;\n background: white;\n }<\/p>\n<p> .content-container {\n grid-template-columns: 1fr;\n gap: 20px;\n }<\/p>\n<p> .content-side,\n .video-side {\n padding: 20px;\n background: white;\n }<\/p>\n<p> .main-heading,\n .slogan,\n .highlight,\n .stat-number {\n color: #D4AF37 !important;\n background: none !important;\n -webkit-print-color-adjust: exact;\n }\n}<\/p>\n<p>\/* ========= ACCESSIBILITY IMPROVEMENTS ========= *\/<\/p>\n<p>\/* Focus Styles *\/\n.cta-button:focus,\n.ctrl-btn:focus,\n.see-mission-link a:focus {\n outline: 3px solid var(--bifa-heritage-gold);\n outline-offset: 2px;\n}<\/p>\n<p>\/* Screen Reader Only *\/\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}<\/p>\n<p>\/* High Contrast Mode Support *\/\n@media (prefers-contrast: high) {\n .main-heading,\n .slogan,\n .highlight,\n .stat-number {\n color: var(--bifa-heritage-gold);\n background: none;\n -webkit-background-clip: initial;\n background-clip: initial;\n }<\/p>\n<p> .stat-card,\n .country-tag,\n .cta-button {\n border-width: 3px;\n }\n}<\/p>\n<p>\/* Dark Mode Support *\/\n@media (prefers-color-scheme: dark) {\n :root {\n --bifa-bright-white: #1a1a1a;\n --bifa-soft-black: #f8f9fa;\n --bifa-gray-light: #2a2a2a;\n --bifa-gray-medium: #3a3a3a;\n }<\/p>\n<p> .about-section-wrapper {\n background: #1a1a1a;\n }<\/p>\n<p> .hero-section {\n background: linear-gradient(180deg, #1a1a1a 0%, #2a2a2a 100%);\n }<\/p>\n<p> .content-side {\n background: rgba(26, 26, 26, 0.98);\n }<\/p>\n<p> .video-side {\n background: rgba(42, 42, 42, 0.5);\n }\n}\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"about-section-wrapper\">\n <\/p>\n<div class=\"bg-particles\"><\/div>\n<p> <\/p>\n<section class=\"hero-section\">\n<div class=\"content-container\">\n <\/p>\n<div class=\"content-side\">\n<h1 class=\"main-heading\">BIFA+ \u0915\u0947 \u092c\u093e\u0930\u0947 \u092e\u0947\u0902<\/h1>\n<p class=\"subtitle\">\u092c\u094d\u0930\u093f\u0915\u094d\u0938 \u0905\u0902\u0924\u0930\u094d\u0930\u093e\u0937\u094d\u091f\u094d\u0930\u0940\u092f \u092b\u0941\u091f\u092c\u0949\u0932 \u0917\u0920\u092c\u0902\u0927\u0928<\/p>\n<p class=\"slogan\">\u201c\u0906\u0924\u094d\u092e\u093e \u0915\u0947 \u0938\u093e\u0925 \u0916\u0947\u0932\u0947\u0902\u0964 \u0926\u0942\u0930\u0926\u0930\u094d\u0936\u093f\u0924\u093e \u0915\u0947 \u0938\u093e\u0925 \u0928\u0947\u0924\u0943\u0924\u094d\u0935 \u0915\u0930\u0947\u0902\u0964\u201d<\/p>\n<p class=\"description\">\n <span class=\"highlight\">\u092c\u0940\u0906\u0908\u090f\u092b\u090f+ (\u092c\u0940\u0906\u0908\u090f\u092b\u090f \u092a\u094d\u0932\u0938)<\/span> is an international sports and cultural initiative<br \/>\n that connects countries of the <span class=\"highlight\">\u0935\u0948\u0936\u094d\u0935\u093f\u0915 \u0926\u0915\u094d\u0937\u093f\u0923<\/span> through football,<br \/>\n education, technology, and people-to-people diplomacy. Founded by <span class=\"highlight\">\u0938\u0932\u0940\u092e \u0939\u0941\u092e\u0948\u0926 \u0905\u0932\u092e\u091c\u093c\u0948\u0928\u0940<\/span><br \/>\n \u0938\u0902\u092f\u0941\u0915\u094d\u0924 \u0905\u0930\u092c \u0905\u092e\u0940\u0930\u093e\u0924 \u0938\u0947, BIFA+ \u090f\u0915 \u0938\u093e\u0925 \u0932\u093e\u0924\u093e \u0939\u0948 <span class=\"highlight\">11 \u0930\u093e\u0937\u094d\u091f\u094d\u0930<\/span> in a visionary<br \/>\n non-profit alliance and professional operational platform designed to host events,<br \/>\n digital services, and youth development programs that shape a more unified and inclusive future.\n <\/p>\n<div class=\"stats-grid\">\n<div class=\"stat-card\">\n<div class=\"stat-number\">11<\/div>\n<div class=\"stat-label\">\u0938\u0926\u0938\u094d\u092f \u0930\u093e\u0937\u094d\u091f\u094d\u0930<\/div>\n<\/p><\/div>\n<div class=\"stat-card\">\n<div class=\"stat-number\">3.8\u092c\u0940<\/div>\n<div class=\"stat-label\">\u091c\u0928\u0938\u0902\u0916\u094d\u092f\u093e \u0938\u0902\u092f\u0941\u0915\u094d\u0924<\/div>\n<\/p><\/div>\n<div class=\"stat-card\">\n<div class=\"stat-number\">2024<\/div>\n<div class=\"stat-label\">\u0938\u094d\u0925\u093e\u092a\u093f\u0924<\/div>\n<\/p><\/div>\n<div class=\"stat-card\">\n<div class=\"stat-number\">8<\/div>\n<div class=\"stat-label\">\u092e\u0941\u0916\u094d\u092f \u0915\u093e\u0930\u094d\u092f\u0915\u094d\u0930\u092e<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"action-buttons\">\n <a href=\"#our-mission\" class=\"cta-button primary\" role=\"button\">\u0939\u092e\u093e\u0930\u093e \u092e\u093f\u0936\u0928 \u091c\u093e\u0928\u0947\u0902<\/a><br \/>\n <a href=\"\/initiatives\" class=\"cta-button secondary\" role=\"button\">\u092a\u0939\u0932\u094b\u0902 \u0915\u093e \u0905\u0928\u094d\u0935\u0947\u0937\u0923 \u0915\u0930\u0947\u0902<\/a>\n <\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"video-side\">\n<h2 class=\"video-section-title\">\u0916\u0947\u0932 \u0915\u0947 \u092e\u093e\u0927\u094d\u092f\u092e \u0938\u0947 \u0935\u0948\u0936\u094d\u0935\u093f\u0915 \u090f\u0915\u0924\u093e<\/h2>\n<p class=\"video-section-subtitle\">BIFA+ \u0915\u0947 \u0935\u093f\u091c\u093c\u0928 \u0915\u093e \u0905\u0928\u0941\u092d\u0935 \u0915\u0930\u0947\u0902 \u091c\u094b 11 \u0926\u0947\u0936\u094b\u0902 \u0914\u0930 3.8 \u092c\u093f\u0932\u093f\u092f\u0928 \u0932\u094b\u0917\u094b\u0902 \u0915\u094b \u091c\u094b\u0921\u093c\u0924\u093e \u0939\u0948<\/p>\n<div class=\"video-wrapper\">\n <\/p>\n<div class=\"video-loading-overlay\" id=\"videoLoadingOverlay\">\n <iframe \n id=\"loadingIframe\"\n class=\"loading-iframe\"\n src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Logo\/Get.html\"\n title=\"BIFA+ \u0932\u094b\u0921\u093f\u0902\u0917 \u0938\u094d\u0915\u094d\u0930\u0940\u0928\"\n onload=\"handleIframeLoad()\"\n onerror=\"handleIframeError()\"><br \/>\n <\/iframe><\/p>\n<p> <\/p>\n<div class=\"fallback-loader\" id=\"fallbackLoader\">\n<div class=\"loader-logo\">\n <svg viewbox=\"0 0 200 200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\n <defs>\n <lineargradient id=\"logoGradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n <stop offset=\"0%\" style=\"stop-color:#D4AF37\"\/>\n <stop offset=\"100%\" style=\"stop-color:#D4AF37\"\/>\n <\/lineargradient>\n <\/defs>\n <circle cx=\"100\" cy=\"100\" r=\"90\" fill=\"url(#logoGradient)\" opacity=\"0.1\"\/>\n <circle cx=\"100\" cy=\"100\" r=\"70\" fill=\"url(#logoGradient)\" opacity=\"0.3\"\/>\n <circle cx=\"100\" cy=\"100\" r=\"50\" fill=\"url(#logoGradient)\"\/>\n <text x=\"100\" y=\"110\" text-anchor=\"middle\" fill=\"white\" font-family=\"Montserrat\" font-size=\"24\" font-weight=\"bold\">BIFA+<\/text>\n <\/svg>\n <\/div>\n<div class=\"loader-text\">BIFA+ \u0905\u0928\u0941\u092d\u0935 \u0932\u094b\u0921 \u0939\u094b \u0930\u0939\u093e \u0939\u0948\u2026<\/div>\n<div class=\"loader-progress\">\n<div class=\"loader-progress-bar\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <video id=\"heroVideo\" autoplay muted loop playsinline preload=\"metadata\" \nposter=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/video_poster.jpg\"\n aria-label=\"BIFA+ \u092a\u094d\u0930\u091a\u093e\u0930 \u0935\u0940\u0921\u093f\u092f\u094b\"><source src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/video.mp4\" type=\"video\/mp4\"><span class=\"sr-only\">\u0906\u092a\u0915\u093e \u092c\u094d\u0930\u093e\u0909\u091c\u093c\u0930 \u092e\u0947\u0902 \u0935\u0940\u0921\u093f\u092f\u094b \u091f\u0948\u0917 \u0938\u092e\u0930\u094d\u0925\u093f\u0924 \u0928\u0939\u0940\u0902 \u0939\u0948\u0964<\/span><\/video><\/p>\n<p> <\/p>\n<div class=\"controls\" id=\"controls\" aria-label=\"\u0935\u0940\u0921\u093f\u092f\u094b \u0928\u093f\u092f\u0902\u0924\u094d\u0930\u0923\">\n<div class=\"controls-row\">\n <button class=\"ctrl-btn\" id=\"playPause\" aria-label=\"\u0935\u0940\u0921\u093f\u092f\u094b \u091a\u0932\u093e\u090f\u0901\/\u0930\u094b\u0915\u0947\u0902\"><br \/>\n <svg viewbox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M8 5v14l11-7z\"\/><\/svg><br \/>\n <\/button><\/p>\n<div class=\"progress-container\">\n<div class=\"progress\" id=\"progress\" role=\"progressbar\" aria-label=\"\u0935\u0940\u0921\u093f\u092f\u094b \u092a\u094d\u0930\u0917\u0924\u093f\">\n<div class=\"progress-bar\" id=\"progressBar\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"time-display\" id=\"timeDisplay\" aria-live=\"polite\">0:00<\/div>\n<div class=\"volume-container\">\n <button class=\"ctrl-btn\" id=\"muteToggle\" aria-label=\"\u0935\u0940\u0921\u093f\u092f\u094b \u092e\u094d\u092f\u0942\u091f\/\u0905\u0928\u092e\u094d\u092f\u0942\u091f \u0915\u0930\u0947\u0902\"><br \/>\n <svg viewbox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M4 9v6h4l5 5V4L8 9H4z\"\/><\/svg><br \/>\n <\/button><\/p>\n<div class=\"volume-slider\" id=\"volumeSlider\" role=\"slider\" aria-label=\"\u0927\u094d\u0935\u0928\u093f \u0928\u093f\u092f\u0902\u0924\u094d\u0930\u0923\">\n<div class=\"volume-bar\" id=\"volumeBar\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <button class=\"fullscreen-btn\" id=\"fullscreenBtn\" aria-label=\"\u0938\u0902\u092a\u0942\u0930\u094d\u0923 \u0938\u094d\u0915\u094d\u0930\u0940\u0928 \u091f\u0949\u0917\u0932 \u0915\u0930\u0947\u0902\"><br \/>\n <svg viewbox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z\"\/><\/svg><br \/>\n <\/button>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"video-info\">\n<h3 class=\"video-title\">\u092b\u0941\u091f\u092c\u0949\u0932 \u0915\u0947 \u092e\u093e\u0927\u094d\u092f\u092e \u0938\u0947 11 \u0930\u093e\u0937\u094d\u091f\u094d\u0930 \u090f\u0915\u091c\u0941\u091f<\/h3>\n<div class=\"member-countries\" role=\"list\" aria-label=\"BIFA+ \u0938\u0926\u0938\u094d\u092f \u0926\u0947\u0936\">\n <span class=\"country-tag\" role=\"listitem\">\ud83c\udde7\ud83c\uddf7 \u092c\u094d\u0930\u093e\u091c\u093c\u0940\u0932<\/span><br \/>\n <span class=\"country-tag\" role=\"listitem\">\ud83c\udde6\ud83c\uddea \u092f\u0942\u090f\u0908<\/span><br \/>\n <span class=\"country-tag\" role=\"listitem\">\ud83c\uddf7\ud83c\uddfa \u0930\u0942\u0938<\/span><br \/>\n <span class=\"country-tag\" role=\"listitem\">\ud83c\udde8\ud83c\uddf3 \u091a\u0940\u0928<\/span><br \/>\n <span class=\"country-tag\" role=\"listitem\">\ud83c\uddee\ud83c\uddf3 \u092d\u093e\u0930\u0924<\/span><br \/>\n <span class=\"country-tag\" role=\"listitem\">\ud83c\uddff\ud83c\udde6 \u0926\u0915\u094d\u0937\u093f\u0923 \u0905\u092b\u094d\u0930\u0940\u0915\u093e<\/span><br \/>\n <span class=\"country-tag\" role=\"listitem\">\ud83c\uddf8\ud83c\udde6 \u0938\u090a\u0926\u0940 \u0905\u0930\u092c<\/span><br \/>\n <span class=\"country-tag\" role=\"listitem\">\ud83c\uddea\ud83c\uddec \u092e\u093f\u0938\u094d\u0930<\/span><br \/>\n <span class=\"country-tag\" role=\"listitem\">\ud83c\uddee\ud83c\uddf7 \u0908\u0930\u093e\u0928<\/span><br \/>\n <span class=\"country-tag\" role=\"listitem\">\ud83c\uddea\ud83c\uddf9 \u0907\u0925\u093f\u092f\u094b\u092a\u093f\u092f\u093e<\/span><br \/>\n <span class=\"country-tag\" role=\"listitem\">\ud83c\uddee\ud83c\udde9 \u0907\u0902\u0921\u094b\u0928\u0947\u0936\u093f\u092f\u093e<\/span>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<\/div>\n<p><script>\n\/\/ Global functions for iframe handling\nfunction handleIframeLoad() {\n console.log('Loading screen iframe loaded successfully');\n}<\/p>\n<p>function handleIframeError() {\n console.log('Loading screen iframe failed, showing fallback');\n const iframe = document.getElementById('loadingIframe');\n const fallback = document.getElementById('fallbackLoader');\n if (iframe) iframe.style.display = 'none';\n if (fallback) fallback.classList.add('active');\n}<\/p>\n<p>document.addEventListener('DOMContentLoaded', () => {\n const video = document.getElementById('heroVideo');\n const playBtn = document.getElementById('playPause');\n const muteBtn = document.getElementById('muteToggle');\n const progress = document.getElementById('progress');\n const progressBar = document.getElementById('progressBar');\n const timeDisplay = document.getElementById('timeDisplay');\n const volumeSlider = document.getElementById('volumeSlider');\n const volumeBar = document.getElementById('volumeBar');\n const fullscreenBtn = document.getElementById('fullscreenBtn');\n const loadingOverlay = document.getElementById('videoLoadingOverlay');<\/p>\n<p> \/\/ Check if elements exist before proceeding\n if (!video || !playBtn || !muteBtn) {\n console.warn('Video elements not found');\n return;\n }<\/p>\n<p> \/\/ Loading screen management\n let videoReady = false;<\/p>\n<p> \/\/ Check if video is ready to play\n const checkVideoReady = () => {\n if (video.readyState >= 3) { \/\/ HAVE_FUTURE_DATA or greater\n videoReady = true;\n hideLoadingScreen();\n }\n };<\/p>\n<p> \/\/ Hide loading screen with smooth animation\n const hideLoadingScreen = () => {\n if (videoReady && loadingOverlay) {\n setTimeout(() => {\n loadingOverlay.classList.add('hidden');\n \/\/ Remove overlay completely after animation\n setTimeout(() => {\n if (loadingOverlay.parentNode) {\n loadingOverlay.style.display = 'none';\n }\n }, 800);\n }, 1500); \/\/ Show loading for minimum 1.5 seconds\n }\n };<\/p>\n<p> \/\/ Video event listeners for loading\n video.addEventListener('loadeddata', checkVideoReady);\n video.addEventListener('canplay', checkVideoReady);\n video.addEventListener('canplaythrough', () => {\n videoReady = true;\n hideLoadingScreen();\n });<\/p>\n<p> \/\/ Fallback: hide loading screen after maximum time\n setTimeout(() => {\n if (loadingOverlay && !loadingOverlay.classList.contains('hidden')) {\n console.log('Hiding loading screen after timeout');\n hideLoadingScreen();\n }\n }, 8000); \/\/ Maximum 8 seconds<\/p>\n<p> \/\/ Play\/Pause Icons\n const setPlayIcon = (paused) => {\n if (playBtn) {\n playBtn.innerHTML = paused\n ? '<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M8 5v14l11-7z\"\/><\/svg>'\n : '<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M6 19h4V5H6zm8 0h4V5h-4z\"\/><\/svg>';\n playBtn.setAttribute('aria-label', paused ? 'Play video' : 'Pause video');\n }\n };<\/p>\n<p> \/\/ Mute\/Unmute Icons\n const setMuteIcon = (muted) => {\n if (muteBtn) {\n muteBtn.innerHTML = muted\n ? '<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z\"\/><\/svg>'\n : '<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M4 9v6h4l5 5V4L8 9H4z\"\/><\/svg>';\n muteBtn.setAttribute('aria-label', muted ? 'Unmute video' : 'Mute video');\n }\n };<\/p>\n<p> \/\/ Format time\n const formatTime = (seconds) => {\n const mins = Math.floor(seconds \/ 60);\n const secs = Math.floor(seconds % 60);\n return `${mins}:${secs.toString().padStart(2, '0')}`;\n };<\/p>\n<p> \/\/ Play\/Pause functionality\n if (playBtn) {\n playBtn.addEventListener('click', () => {\n if (video.paused) {\n video.play().catch(e => console.log('Video play failed:', e));\n } else {\n video.pause();\n }\n setPlayIcon(video.paused);\n });\n }<\/p>\n<p> \/\/ Mute\/Unmute functionality\n if (muteBtn) {\n muteBtn.addEventListener('click', () => {\n video.muted = !video.muted;\n setMuteIcon(video.muted);\n if (volumeBar) {\n volumeBar.style.width = video.muted ? '0%' : (video.volume * 100) + '%';\n }\n });\n }<\/p>\n<p> \/\/ Progress bar update\n video.addEventListener('timeupdate', () => {\n if (video.duration) {\n const progressPercent = (video.currentTime \/ video.duration) * 100;\n if (progressBar) progressBar.style.width = progressPercent + '%';\n if (timeDisplay) timeDisplay.textContent = formatTime(video.currentTime);\n }\n });<\/p>\n<p> \/\/ Progress bar click\n if (progress) {\n progress.addEventListener('click', (e) => {\n const rect = progress.getBoundingClientRect();\n const clickX = e.clientX - rect.left;\n const clickPercent = clickX \/ rect.width;\n if (video.duration) {\n video.currentTime = clickPercent * video.duration;\n }\n });\n }<\/p>\n<p> \/\/ Volume control\n if (volumeSlider) {\n volumeSlider.addEventListener('click', (e) => {\n const rect = volumeSlider.getBoundingClientRect();\n const clickX = e.clientX - rect.left;\n const volume = Math.max(0, Math.min(1, clickX \/ rect.width));\n video.volume = volume;\n if (volumeBar) volumeBar.style.width = (video.volume * 100) + '%';<\/p>\n<p> if (video.volume === 0) {\n video.muted = true;\n } else {\n video.muted = false;\n }\n setMuteIcon(video.muted);\n });\n }<\/p>\n<p> \/\/ Fullscreen functionality\n if (fullscreenBtn) {\n fullscreenBtn.addEventListener('click', () => {\n if (!document.fullscreenElement) {\n video.parentElement.requestFullscreen().catch(e => console.log('Fullscreen failed:', e));\n } else {\n document.exitFullscreen();\n }\n });\n }<\/p>\n<p> \/\/ Initialize icons\n setPlayIcon(video.paused);\n setMuteIcon(video.muted);\n if (volumeBar) volumeBar.style.width = (video.volume * 100) + '%';<\/p>\n<p> \/\/ Create optimized floating particles\n const particlesContainer = document.querySelector('.bg-particles');\n if (particlesContainer) {\n const particleCount = window.innerWidth < 768 ? 8 : 12; \/\/ Fewer particles on mobile\n\n for (let i = 0; i < particleCount; i++) {\n const particle = document.createElement('div');\n particle.className = 'particle';\n particle.style.left = Math.random() * 100 + '%';\n particle.style.animationDelay = Math.random() * 18 + 's';\n particle.style.animationDuration = (15 + Math.random() * 6) + 's';\n \n const size = 3 + Math.random() * 3;\n particle.style.width = size + 'px';\n particle.style.height = size + 'px';\n \n particlesContainer.appendChild(particle);\n }\n }\n\n\n\n \/\/ Keyboard navigation support\n document.addEventListener('keydown', (e) => {\n if (e.target.closest('.video-wrapper')) {\n switch(e.code) {\n case 'Space':\n e.preventDefault();\n if (playBtn) playBtn.click();\n break;\n case 'KeyM':\n e.preventDefault();\n if (muteBtn) muteBtn.click();\n break;\n case 'KeyF':\n e.preventDefault();\n if (fullscreenBtn) fullscreenBtn.click();\n break;\n }\n }\n });<\/p>\n<p> \/\/ Performance optimization: Pause animations when tab is not visible\n document.addEventListener('visibilitychange', () => {\n const particles = document.querySelectorAll('.particle');\n particles.forEach(particle => {\n if (document.hidden) {\n particle.style.animationPlayState = 'paused';\n } else {\n particle.style.animationPlayState = 'running';\n }\n });\n });\n});\n<\/script><br \/>\n<\/body><br \/>\n<\/html>\n<\/div>\n<div>\n<p> <!DOCTYPE html><br \/>\n<html lang=\"en\"><br \/>\n<head><br \/>\n<meta charset=\"UTF-8\"><br \/>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><br \/>\n<title>BIFA+ Mission<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\n<style>\n\/* ========= MISSION SECTION WRAPPER - ISOLATED ========= *\/\n.mission-section-wrapper {\n \/* Isolated CSS Variables - only for this section *\/\n --bifa-deep-navy: #0A1F44;\n --bifa-heritage-gold: #D4AF37;\n --bifa-civic-green: #1D6143;\n --bifa-bright-white: #FFFFFF;\n --bifa-soft-black: #1A1A1A;<\/p>\n<p> \/* Additional colors for better readability *\/\n --bifa-gray-light: #F8F9FA;\n --bifa-gray-medium: #E9ECEF;\n --bifa-gray: #6C757D;\n --bifa-gray-dark: #495057;<\/p>\n<p> \/* Official BIFA+ Fonts *\/\n --bifa-font-heading: 'Montserrat', sans-serif;\n --bifa-font-body: 'Poppins', sans-serif;<\/p>\n<p> \/* Premium shadows and effects *\/\n --bifa-shadow-sm: 0 2px 8px rgba(10, 31, 68, 0.08);\n --bifa-shadow-md: 0 8px 24px rgba(10, 31, 68, 0.12);\n --bifa-shadow-lg: 0 16px 48px rgba(10, 31, 68, 0.16);\n --bifa-shadow-xl: 0 25px 80px rgba(10, 31, 68, 0.15);\n --bifa-shadow-gold: 0 15px 40px rgba(212, 175, 55, 0.3);\n --bifa-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);<\/p>\n<p> width: 100vw;\n position: relative;\n left: 50%;\n margin-left: -50vw;\n background: radial-gradient(ellipse 120% 80% at center top, \n rgba(255, 255, 255, 1) 0%,\n rgba(248, 249, 250, 0.95) 20%,\n rgba(248, 249, 250, 0.8) 40%,\n rgba(248, 249, 250, 0.5) 60%,\n rgba(248, 249, 250, 0.2) 80%,\n transparent 100%\n );\n overflow: hidden;\n}<\/p>\n<p>\/* Header connection line - seamless transition *\/\n.mission-section-wrapper::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: linear-gradient(90deg, \n transparent 0%, \n rgba(212, 175, 55, 0.3) 25%, \n rgba(212, 175, 55, 0.6) 50%, \n rgba(212, 175, 55, 0.3) 75%,\n transparent 100%\n );\n z-index: 100;\n}<\/p>\n<p>\/* ========= RESET - ONLY FOR THIS SECTION ========= *\/\n.mission-section-wrapper * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}<\/p>\n<p>.mission-section-wrapper {\n font-family: var(--bifa-font-body);\n color: var(--bifa-soft-black);\n line-height: 1.6;\n}<\/p>\n<p>\/* ========= MISSION SECTION ========= *\/\n.mission-section-wrapper .mission-section {\n padding: 100px 0;\n background: transparent;\n position: relative;\n z-index: 10;\n}<\/p>\n<p>.mission-section-wrapper .mission-container {\n max-width: 1400px;\n margin: 0 auto;\n padding: 0 60px;\n}<\/p>\n<p>.mission-section-wrapper .section-header {\n text-align: center;\n margin-bottom: 80px;\n animation: missionFadeIn 1.2s ease-out;\n}<\/p>\n<p>@keyframes missionFadeIn {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>.mission-section-wrapper .section-title {\n font-family: var(--bifa-font-heading);\n font-size: clamp(2.5rem, 4vw, 3.5rem);\n font-weight: 900;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n margin-bottom: 20px;\n letter-spacing: -0.02em;\n}<\/p>\n<p>.mission-section-wrapper .section-subtitle {\n font-family: var(--bifa-font-body);\n font-size: clamp(1rem, 1.5vw, 1.2rem);\n color: var(--bifa-soft-black);\n max-width: 800px;\n margin: 0 auto;\n line-height: 1.8;\n font-weight: 400;\n}<\/p>\n<p>\/* Mission Cards *\/\n.mission-section-wrapper .mission-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n gap: 40px;\n margin-bottom: 80px;\n}<\/p>\n<p>.mission-section-wrapper .mission-card {\n background: var(--bifa-bright-white);\n padding: 40px;\n border-radius: 20px;\n box-shadow: var(--bifa-shadow-sm);\n border: 1px solid rgba(212, 175, 55, 0.1);\n transition: var(--bifa-transition);\n position: relative;\n overflow: hidden;\n}<\/p>\n<p>.mission-section-wrapper .mission-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 4px;\n background: linear-gradient(90deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\n transform: translateX(-100%);\n transition: transform 0.6s ease;\n}<\/p>\n<p>.mission-section-wrapper .mission-card:hover::before {\n transform: translateX(0);\n}<\/p>\n<p>.mission-section-wrapper .mission-card:hover {\n transform: translateY(-10px);\n box-shadow: var(--bifa-shadow-gold);\n}<\/p>\n<p>.mission-section-wrapper .mission-icon {\n width: 70px;\n height: 70px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold) 0%, var(--bifa-heritage-gold) 100%);\n border-radius: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 25px;\n font-size: 35px;\n box-shadow: var(--bifa-shadow-gold);\n transition: var(--bifa-transition);\n}<\/p>\n<p>.mission-section-wrapper .mission-icon.has-svg {\n background: transparent;\n box-shadow: none;\n}<\/p>\n<p>.mission-section-wrapper .mission-icon img {\n width: 70px;\n height: 70px;\n transition: var(--bifa-transition);\n}<\/p>\n<p>.mission-section-wrapper .mission-card:hover .mission-icon {\n transform: scale(1.1) rotate(5deg);\n}<\/p>\n<p>.mission-section-wrapper .mission-card:hover .mission-icon.has-svg {\n transform: scale(1.15);\n}<\/p>\n<p>.mission-section-wrapper .mission-card:hover .mission-icon img {\n transform: scale(1.1);\n}<\/p>\n<p>.mission-section-wrapper .mission-card-title {\n font-family: var(--bifa-font-heading);\n font-size: 1.5rem;\n font-weight: 800;\n color: var(--bifa-deep-navy);\n margin-bottom: 15px;\n}<\/p>\n<p>.mission-section-wrapper .mission-card-text {\n font-family: var(--bifa-font-body);\n font-size: 1rem;\n line-height: 1.7;\n color: var(--bifa-soft-black);\n font-weight: 400;\n}<\/p>\n<p>\/* Vision Box *\/\n.mission-section-wrapper .vision-box {\n background: linear-gradient(135deg, rgba(212, 175, 55, 0.08) 0%, rgba(212, 175, 55, 0.05) 100%);\n padding: 80px 60px;\n border-radius: 25px;\n text-align: center;\n position: relative;\n overflow: hidden;\n margin-bottom: 80px;\n border: 2px solid rgba(212, 175, 55, 0.2);\n box-shadow: var(--bifa-shadow-lg);\n}<\/p>\n<p>.mission-section-wrapper .vision-box::before {\n content: '';\n position: absolute;\n top: -50%;\n right: -50%;\n width: 200%;\n height: 200%;\n background: radial-gradient(circle, rgba(212, 175, 55, 0.05) 0%, transparent 70%);\n animation: missionRotate 30s linear infinite;\n}<\/p>\n<p>.mission-section-wrapper .vision-box::after {\n content: '';\n position: absolute;\n bottom: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n background: radial-gradient(circle, rgba(212, 175, 55, 0.05) 0%, transparent 70%);\n animation: missionRotateReverse 25s linear infinite;\n}<\/p>\n<p>@keyframes missionRotate {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}<\/p>\n<p>@keyframes missionRotateReverse {\n from { transform: rotate(360deg); }\n to { transform: rotate(0deg); }\n}<\/p>\n<p>.mission-section-wrapper .vision-title {\n font-family: var(--bifa-font-heading);\n font-size: 3rem;\n font-weight: 900;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n margin-bottom: 30px;\n position: relative;\n z-index: 1;\n}<\/p>\n<p>.mission-section-wrapper .vision-text {\n font-family: var(--bifa-font-body);\n font-size: 1.3rem;\n line-height: 1.9;\n max-width: 900px;\n margin: 0 auto;\n position: relative;\n z-index: 1;\n color: var(--bifa-soft-black);\n font-weight: 400;\n}<\/p>\n<p>\/* Floating particles for consistency *\/\n.mission-section-wrapper .bg-particles {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow: hidden;\n z-index: 1;\n pointer-events: none;\n}<\/p>\n<p>.mission-section-wrapper .particle {\n position: absolute;\n width: 4px;\n height: 4px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\n border-radius: 50%;\n animation: missionFloat 20s infinite linear;\n box-shadow: 0 0 12px rgba(212, 175, 55, 0.3);\n opacity: 0.3;\n}<\/p>\n<p>@keyframes missionFloat {\n 0% {\n transform: translateY(100vh) translateX(0);\n opacity: 0;\n }\n 15% { opacity: 0.3; }\n 85% { opacity: 0.3; }\n 100% {\n transform: translateY(-100vh) translateX(30px);\n opacity: 0;\n }\n}<\/p>\n<p>\/* Fallback for browsers without background-clip support *\/\n@supports not (background-clip: text) {\n .mission-section-wrapper .section-title,\n .mission-section-wrapper .vision-title {\n color: var(--bifa-heritage-gold) !important;\n background: none !important;\n }\n}<\/p>\n<p>\/* ========= RESPONSIVE ========= *\/\n@media (max-width: 1200px) {\n .mission-section-wrapper .mission-container {\n padding: 0 40px;\n }\n}<\/p>\n<p>@media (max-width: 768px) {\n .mission-section-wrapper .mission-container {\n padding: 0 20px;\n }<\/p>\n<p> .mission-section-wrapper .mission-grid {\n grid-template-columns: 1fr;\n }<\/p>\n<p> .mission-section-wrapper .vision-box {\n padding: 40px 20px;\n }<\/p>\n<p> .mission-section-wrapper .vision-title {\n font-size: 2rem;\n }<\/p>\n<p> .mission-section-wrapper .vision-text {\n font-size: 1.1rem;\n }<\/p>\n<p> .mission-section-wrapper .mission-section {\n padding: 60px 0;\n }\n}<\/p>\n<p>@media (max-width: 480px) {\n .mission-section-wrapper .section-title {\n font-size: 2rem;\n }<\/p>\n<p> .mission-section-wrapper .mission-card {\n padding: 30px 20px;\n }<\/p>\n<p> .mission-section-wrapper .mission-grid {\n grid-template-columns: 1fr;\n gap: 30px;\n }\n}\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"mission-section-wrapper\" id=\"vision\">\n <\/p>\n<div class=\"bg-particles\"><\/div>\n<p> <\/p>\n<section id=\"our-mission\" class=\"mission-section\">\n<div class=\"mission-container\">\n<div class=\"section-header\">\n<h2 class=\"section-title\">\u0939\u092e\u093e\u0930\u093e \u0935\u093f\u0936\u0947\u0937 \u0915\u093e\u0930\u094d\u092f<\/h2>\n<p class=\"section-subtitle\">\n Building bridges between nations through the universal language of football,<br \/>\n creating opportunities for youth, and fostering cultural understanding across the Global South.\n <\/p>\n<\/p><\/div>\n<div class=\"mission-grid\">\n<div class=\"mission-card\">\n<div class=\"mission-icon\">\ud83c\udf0d<\/div>\n<h3 class=\"mission-card-title\">\u0935\u0948\u0936\u094d\u0935\u093f\u0915 \u0938\u0939\u092f\u094b\u0917<\/h3>\n<p class=\"mission-card-text\">\n Promote international sports and cultural cooperation among Global South nations<br \/>\n through tournaments, events, and strategic partnerships that transcend borders.\n <\/p>\n<\/p><\/div>\n<div class=\"mission-card\">\n<div class=\"mission-icon\">\u26bd<\/div>\n<h3 class=\"mission-card-title\">\u092f\u0941\u0935\u093e \u0938\u0936\u0915\u094d\u0924\u093f\u0915\u0930\u0923<\/h3>\n<p class=\"mission-card-text\">\n Engage youth, students, and communities via football programs for universities,<br \/>\n schools, academies, and grassroots platforms to develop future leaders.\n <\/p>\n<\/p><\/div>\n<div class=\"mission-card\">\n<div class=\"mission-icon\">\ud83d\udca1<\/div>\n<h3 class=\"mission-card-title\">\u0921\u093f\u091c\u093f\u091f\u0932 \u0928\u0935\u093e\u091a\u093e\u0930<\/h3>\n<p class=\"mission-card-text\">\n Develop digital and physical initiatives in AI-powered sports tech, smart health,<br \/>\n and sports commerce to revolutionize how football is played and experienced.\n <\/p>\n<\/p><\/div>\n<div class=\"mission-card\">\n<div class=\"mission-icon\">\ud83c\udf1f<\/div>\n<h3 class=\"mission-card-title\">\u0935\u093f\u0935\u093f\u0927\u0924\u093e \u0914\u0930 \u0938\u092e\u093e\u0935\u0947\u0936\u0928<\/h3>\n<p class=\"mission-card-text\">\n Champion diversity through beach football, community leagues, university tournaments,<br \/>\n and regional academies that welcome players from all backgrounds.\n <\/p>\n<\/p><\/div>\n<div class=\"mission-card\">\n<div class=\"mission-icon has-svg\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Girl_fas.svg\" alt=\"Women's Empowerment\">\n <\/div>\n<h3 class=\"mission-card-title\">\u092e\u0939\u093f\u0932\u093e \u0938\u0936\u0915\u094d\u0924\u093f\u0915\u0930\u0923<\/h3>\n<p class=\"mission-card-text\">\n Empower women in sports through the dedicated BIFA+ Women program for female<br \/>\n players and leadership roles, creating equal opportunities in football.\n <\/p>\n<\/p><\/div>\n<div class=\"mission-card\">\n<div class=\"mission-icon\">\ud83c\udfd9\ufe0f<\/div>\n<h3 class=\"mission-card-title\">\u0936\u0939\u0930\u094b\u0902 \u0915\u093e \u0928\u0947\u091f\u0935\u0930\u094d\u0915<\/h3>\n<p class=\"mission-card-text\">\n Establish the BIFA+ Cities Network, linking dynamic cities worldwide as hubs<br \/>\n for cooperation, activation, and international mixed-nationality teams.\n <\/p>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"vision-box\">\n<h2 class=\"vision-title\">\u0939\u092e\u093e\u0930\u093e \u0928\u091c\u093c\u0930\u093f\u092f\u093e<\/h2>\n<p class=\"vision-text\">\n To become the leading global platform for youth-driven sports and cultural cooperation<br \/>\n across the Global South, offering a new model of international partnership based on<br \/>\n peace, opportunity, and shared values. We envision a world united through sport \u2013<br \/>\n where football becomes a symbol of peace, cooperation, and cultural exchange.\n <\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<\/div>\n<p><script>\ndocument.addEventListener('DOMContentLoaded', () => {\n \/\/ Create floating particles\n const particlesContainer = document.querySelector('.mission-section-wrapper .bg-particles');\n const particleCount = 8;<\/p>\n<p> for (let i = 0; i < particleCount; i++) {\n const particle = document.createElement('div');\n particle.className = 'particle';\n particle.style.left = Math.random() * 100 + '%';\n particle.style.animationDelay = Math.random() * 20 + 's';\n particle.style.animationDuration = (18 + Math.random() * 6) + 's';\n \n const size = 3 + Math.random() * 2;\n particle.style.width = size + 'px';\n particle.style.height = size + 'px';\n \n particlesContainer.appendChild(particle);\n }\n\n \/\/ Animate elements on scroll\n const observerOptions = {\n threshold: 0.1,\n rootMargin: '0px 0px -100px 0px'\n };\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.style.opacity = '1';\n entry.target.style.transform = 'translateY(0)';\n }\n });\n }, observerOptions);<\/p>\n<p> \/\/ Observe mission cards\n const animatedElements = document.querySelectorAll('.mission-section-wrapper .mission-card');\n animatedElements.forEach(el => {\n el.style.opacity = '0';\n el.style.transform = 'translateY(30px)';\n el.style.transition = 'all 0.6s ease';\n observer.observe(el);\n });\n});\n<\/script><br \/>\n<\/body><br \/>\n<\/html>\n<\/div>\n<div>\n<p> <!DOCTYPE html><br \/>\n<html lang=\"en\"><br \/>\n<head><br \/>\n<meta charset=\"UTF-8\"><br \/>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><br \/>\n<title>BIFA+ Initiatives<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\n<style>\n\/* ========= INITIATIVES SECTION WRAPPER - ISOLATED ========= *\/\n.initiatives-section-wrapper {\n \/* Isolated CSS Variables - only for this section *\/\n --bifa-deep-navy: #0A1F44;\n --bifa-heritage-gold: #D4AF37;\n --bifa-civic-green: #1D6143;\n --bifa-bright-white: #FFFFFF;\n --bifa-soft-black: #1A1A1A;<\/p>\n<p> \/* Additional colors for better readability *\/\n --bifa-gray-light: #F8F9FA;\n --bifa-gray-medium: #E9ECEF;\n --bifa-gray: #6C757D;\n --bifa-gray-dark: #495057;<\/p>\n<p> \/* Official BIFA+ Fonts *\/\n --bifa-font-heading: 'Montserrat', sans-serif;\n --bifa-font-body: 'Poppins', sans-serif;<\/p>\n<p> \/* Premium shadows and effects *\/\n --bifa-shadow-sm: 0 2px 8px rgba(10, 31, 68, 0.08);\n --bifa-shadow-md: 0 8px 24px rgba(10, 31, 68, 0.12);\n --bifa-shadow-lg: 0 16px 48px rgba(10, 31, 68, 0.16);\n --bifa-shadow-xl: 0 25px 80px rgba(10, 31, 68, 0.15);\n --bifa-shadow-gold: 0 15px 40px rgba(212, 175, 55, 0.3);\n --bifa-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);<\/p>\n<p> width: 100vw;\n position: relative;\n left: 50%;\n margin-left: -50vw;\n overflow: hidden;\n}<\/p>\n<p>\/* Header connection line - seamless transition *\/\n.initiatives-section-wrapper::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: linear-gradient(90deg, \n transparent 0%, \n rgba(212, 175, 55, 0.3) 25%, \n rgba(212, 175, 55, 0.6) 50%, \n rgba(212, 175, 55, 0.3) 75%,\n transparent 100%\n );\n z-index: 100;\n}<\/p>\n<p>\/* ========= RESET - ONLY FOR THIS SECTION ========= *\/\n.initiatives-section-wrapper * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}<\/p>\n<p>.initiatives-section-wrapper {\n font-family: var(--bifa-font-body);\n color: var(--bifa-soft-black);\n line-height: 1.6;\n}<\/p>\n<p>\/* Section header animation *\/\n@keyframes missionFadeIn {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>.initiatives-section-wrapper .section-header {\n text-align: center;\n margin-bottom: 80px;\n animation: missionFadeIn 1.2s ease-out;\n}<\/p>\n<p>.initiatives-section-wrapper .section-title {\n font-family: var(--bifa-font-heading);\n font-size: clamp(2.5rem, 4vw, 3.5rem);\n font-weight: 900;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n margin-bottom: 20px;\n letter-spacing: -0.02em;\n}<\/p>\n<p>.initiatives-section-wrapper .section-subtitle {\n font-family: var(--bifa-font-body);\n font-size: clamp(1rem, 1.5vw, 1.2rem);\n color: var(--bifa-soft-black);\n max-width: 800px;\n margin: 0 auto;\n line-height: 1.8;\n font-weight: 400;\n}<\/p>\n<p>\/* Initiatives Section *\/\n.initiatives-section-wrapper .initiatives-section {\n padding: 100px 0;\n background: radial-gradient(ellipse 100% 60% at center, \n rgba(248, 249, 250, 0.8) 0%,\n rgba(248, 249, 250, 0.4) 50%,\n transparent 100%\n );\n position: relative;\n z-index: 10;\n}<\/p>\n<p>.initiatives-section-wrapper .initiatives-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 30px;\n max-width: 1400px;\n margin: 0 auto;\n padding: 0 60px;\n}<\/p>\n<p>.initiatives-section-wrapper .initiative-item {\n background: linear-gradient(135deg, var(--bifa-bright-white) 0%, #fafbfc 100%);\n padding: 35px 25px;\n border-radius: 20px;\n text-align: center;\n box-shadow: var(--bifa-shadow-sm);\n transition: var(--bifa-transition);\n cursor: pointer;\n border: 2px solid transparent;\n}<\/p>\n<p>.initiatives-section-wrapper .initiative-item:hover {\n transform: translateY(-8px);\n box-shadow: var(--bifa-shadow-gold);\n border-color: rgba(212, 175, 55, 0.2);\n}<\/p>\n<p>.initiatives-section-wrapper .initiative-icon {\n width: 60px;\n height: 60px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\n border-radius: 50%;\n margin: 0 auto 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 28px;\n color: var(--bifa-bright-white);\n box-shadow: var(--bifa-shadow-gold);\n transition: var(--bifa-transition);\n}<\/p>\n<p>.initiatives-section-wrapper .initiative-icon.has-svg {\n background: transparent;\n box-shadow: none;\n border-radius: 0;\n}<\/p>\n<p>.initiatives-section-wrapper .initiative-icon img {\n width: 60px;\n height: 60px;\n transition: var(--bifa-transition);\n}<\/p>\n<p>.initiatives-section-wrapper .initiative-item:hover .initiative-icon {\n transform: scale(1.15) rotate(10deg);\n}<\/p>\n<p>.initiatives-section-wrapper .initiative-item:hover .initiative-icon.has-svg {\n transform: scale(1.2);\n}<\/p>\n<p>.initiatives-section-wrapper .initiative-item:hover .initiative-icon img {\n transform: scale(1.1);\n}<\/p>\n<p>.initiatives-section-wrapper .initiative-title {\n font-family: var(--bifa-font-heading);\n font-size: 1.1rem;\n font-weight: 700;\n color: var(--bifa-deep-navy);\n margin-bottom: 10px;\n}<\/p>\n<p>.initiatives-section-wrapper .initiative-desc {\n font-family: var(--bifa-font-body);\n font-size: 0.9rem;\n color: var(--bifa-soft-black);\n line-height: 1.6;\n font-weight: 400;\n}<\/p>\n<p>\/* Floating particles for consistency *\/\n.initiatives-section-wrapper .bg-particles {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow: hidden;\n z-index: 1;\n pointer-events: none;\n}<\/p>\n<p>.initiatives-section-wrapper .particle {\n position: absolute;\n width: 4px;\n height: 4px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\n border-radius: 50%;\n animation: missionFloat 20s infinite linear;\n box-shadow: 0 0 12px rgba(212, 175, 55, 0.3);\n opacity: 0.3;\n}<\/p>\n<p>@keyframes missionFloat {\n 0% {\n transform: translateY(100vh) translateX(0);\n opacity: 0;\n }\n 15% { opacity: 0.3; }\n 85% { opacity: 0.3; }\n 100% {\n transform: translateY(-100vh) translateX(30px);\n opacity: 0;\n }\n}<\/p>\n<p>\/* Fallback for browsers without background-clip support *\/\n@supports not (background-clip: text) {\n .initiatives-section-wrapper .section-title {\n color: var(--bifa-heritage-gold) !important;\n background: none !important;\n }\n}<\/p>\n<p>\/* ========= RESPONSIVE ========= *\/\n@media (max-width: 1200px) {\n .initiatives-section-wrapper .initiatives-grid {\n padding: 0 40px;\n }\n}<\/p>\n<p>@media (max-width: 768px) {\n .initiatives-section-wrapper .initiatives-grid {\n padding: 0 20px;\n }<\/p>\n<p> .initiatives-section-wrapper .initiatives-section {\n padding: 60px 0;\n }\n}<\/p>\n<p>@media (max-width: 480px) {\n .initiatives-section-wrapper .initiatives-grid {\n grid-template-columns: 1fr;\n }<\/p>\n<p> .initiatives-section-wrapper .section-title {\n font-size: 2rem;\n }\n}\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"initiatives-section-wrapper\">\n <\/p>\n<div class=\"bg-particles\"><\/div>\n<p> <\/p>\n<section class=\"initiatives-section\">\n<div class=\"section-header\">\n<h2 class=\"section-title\">\u092e\u0939\u0924\u094d\u0935\u092a\u0942\u0930\u094d\u0923 \u092a\u0939\u0932<\/h2>\n<p class=\"section-subtitle\">\n \u092b\u0941\u091f\u092c\u0949\u0932 \u0915\u0947 \u092e\u093e\u0927\u094d\u092f\u092e \u0938\u0947 \u0930\u093e\u0937\u094d\u091f\u094d\u0930\u094b\u0902 \u0915\u094b \u090f\u0915\u091c\u0941\u091f \u0915\u0930\u0928\u0947 \u0914\u0930 \u0938\u092e\u0941\u0926\u093e\u092f\u094b\u0902 \u0915\u094b \u0938\u0936\u0915\u094d\u0924 \u092c\u0928\u093e\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0921\u093f\u091c\u093c\u093e\u0907\u0928 \u0915\u093f\u090f \u0917\u090f \u0935\u094d\u092f\u093e\u092a\u0915 \u0915\u093e\u0930\u094d\u092f\u0915\u094d\u0930\u092e\n <\/p>\n<\/p><\/div>\n<div class=\"initiatives-grid\">\n<div class=\"initiative-item\">\n<div class=\"initiative-icon\">\ud83c\udfc6<\/div>\n<h3 class=\"initiative-title\">BIFA+ \u0932\u0940\u0917<\/h3>\n<p class=\"initiative-desc\">\u0935\u0948\u0936\u094d\u0935\u093f\u0915 \u0926\u0915\u094d\u0937\u093f\u0923 \u0915\u094b \u091c\u094b\u0921\u093c\u0928\u0947 \u0935\u093e\u0932\u0940 \u0905\u0902\u0924\u0930\u094d\u0930\u093e\u0937\u094d\u091f\u094d\u0930\u0940\u092f \u0915\u094d\u0932\u092c-\u0906\u0927\u093e\u0930\u093f\u0924 \u092b\u0941\u091f\u092c\u0949\u0932 \u0932\u0940\u0917<\/p>\n<\/p><\/div>\n<div class=\"initiative-item\">\n<div class=\"initiative-icon has-svg\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Girl_prof.svg\" alt=\"BIFA+ Women\">\n <\/div>\n<h3 class=\"initiative-title\">BIFA+ \u092e\u0939\u093f\u0932\u093e<\/h3>\n<p class=\"initiative-desc\">\u092e\u0939\u093f\u0932\u093e \u0928\u0947\u0924\u0943\u0924\u094d\u0935 \u0915\u094b \u092c\u0922\u093c\u093e\u0935\u093e \u0926\u0947\u0928\u0947 \u0935\u093e\u0932\u093e \u0938\u092e\u0930\u094d\u092a\u093f\u0924 \u092e\u0939\u093f\u0932\u093e \u092b\u0941\u091f\u092c\u0949\u0932 \u0915\u093e\u0930\u094d\u092f\u0915\u094d\u0930\u092e<\/p>\n<\/p><\/div>\n<div class=\"initiative-item\">\n<div class=\"initiative-icon\">\ud83e\udd16<\/div>\n<h3 class=\"initiative-title\">\u0905\u0915\u093e\u0926\u092e\u0940+ \u090f\u0906\u0908<\/h3>\n<p class=\"initiative-desc\">\u090f\u0906\u0908-\u0938\u0902\u091a\u093e\u0932\u093f\u0924 \u092a\u094d\u0930\u0936\u093f\u0915\u094d\u0937\u0923 \u092a\u094d\u0930\u0923\u093e\u0932\u093f\u092f\u093e\u0901 \u0914\u0930 \u0938\u094d\u092e\u093e\u0930\u094d\u091f \u092a\u094d\u0930\u0926\u0930\u094d\u0936\u0928 \u0935\u093f\u0936\u094d\u0932\u0947\u0937\u0923<\/p>\n<\/p><\/div>\n<div class=\"initiative-item\">\n<div class=\"initiative-icon\">\ud83c\udfae<\/div>\n<h3 class=\"initiative-title\">BIFA+ \u0908\u092b\u0941\u091f\u092c\u0949\u0932<\/h3>\n<p class=\"initiative-desc\">\u0921\u093f\u091c\u093f\u091f\u0932 \u0917\u0947\u092e\u093f\u0902\u0917 \u091f\u0942\u0930\u094d\u0928\u093e\u092e\u0947\u0902\u091f \u0914\u0930 \u0935\u0930\u094d\u091a\u0941\u0905\u0932 \u092b\u0941\u091f\u092c\u0949\u0932 \u0905\u0928\u0941\u092d\u0935<\/p>\n<\/p><\/div>\n<div class=\"initiative-item\">\n<div class=\"initiative-icon\">\ud83c\udf06<\/div>\n<h3 class=\"initiative-title\">\u0936\u0939\u0930\u094b\u0902 \u0915\u093e \u0928\u0947\u091f\u0935\u0930\u094d\u0915<\/h3>\n<p class=\"initiative-desc\">BIFA+ \u0915\u093e\u0930\u094d\u092f\u0915\u094d\u0930\u092e\u094b\u0902 \u0915\u0940 \u092e\u0947\u091c\u092c\u093e\u0928\u0940 \u0915\u0930\u0928\u0947 \u0935\u093e\u0932\u0947 \u0938\u093e\u091d\u0947\u0926\u093e\u0930 \u0936\u0939\u0930\u094b\u0902 \u0915\u093e \u0935\u0948\u0936\u094d\u0935\u093f\u0915 \u0928\u0947\u091f\u0935\u0930\u094d\u0915<\/p>\n<\/p><\/div>\n<div class=\"initiative-item\">\n<div class=\"initiative-icon\">\u2b50<\/div>\n<h3 class=\"initiative-title\">\u092e\u0939\u093e\u092a\u0941\u0930\u0942\u0937\u094b\u0902 \u0915\u0940 \u0930\u093e\u0924<\/h3>\n<p class=\"initiative-desc\">\u092b\u0941\u091f\u092c\u0949\u0932 \u0915\u0947 \u0926\u093f\u0917\u094d\u0917\u091c\u094b\u0902 \u0914\u0930 \u0938\u093e\u0902\u0938\u094d\u0915\u0943\u0924\u093f\u0915 \u0939\u0938\u094d\u0924\u093f\u092f\u094b\u0902 \u0915\u0940 \u092d\u093e\u0917\u0940\u0926\u093e\u0930\u0940 \u0935\u093e\u0932\u0947 \u0930\u093e\u091c\u0928\u092f\u093f\u0915 \u0915\u093e\u0930\u094d\u092f\u0915\u094d\u0930\u092e<\/p>\n<\/p><\/div>\n<div class=\"initiative-item\">\n<div class=\"initiative-icon\">\ud83c\udfd6\ufe0f<\/div>\n<h3 class=\"initiative-title\">\u0938\u092e\u0941\u0926\u094d\u0930 \u0924\u091f \u0914\u0930 \u0938\u092e\u0941\u0926\u093e\u092f<\/h3>\n<p class=\"initiative-desc\">\u091c\u092e\u0940\u0928\u0940 \u0938\u094d\u0924\u0930 \u0915\u0947 \u091f\u0942\u0930\u094d\u0928\u093e\u092e\u0947\u0902\u091f \u0914\u0930 \u0938\u093e\u092e\u0941\u0926\u093e\u092f\u093f\u0915 \u0938\u0939\u092d\u093e\u0917\u093f\u0924\u093e \u0915\u093e\u0930\u094d\u092f\u0915\u094d\u0930\u092e<\/p>\n<\/p><\/div>\n<div class=\"initiative-item\">\n<div class=\"initiative-icon\">\ud83e\udd1d<\/div>\n<h3 class=\"initiative-title\">\u092d\u093e\u0917\u0940\u0926\u093e\u0930\u0940<\/h3>\n<p class=\"initiative-desc\">\u0938\u0930\u0915\u093e\u0930\u094b\u0902, \u0915\u094d\u0932\u092c\u094b\u0902 \u0914\u0930 \u0938\u0902\u0917\u0920\u0928\u094b\u0902 \u0915\u0947 \u0938\u093e\u0925 \u0930\u0923\u0928\u0940\u0924\u093f\u0915 \u0917\u0920\u092c\u0902\u0927\u0928<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<\/div>\n<p><script>\ndocument.addEventListener('DOMContentLoaded', () => {\n \/\/ Create floating particles\n const particlesContainer = document.querySelector('.initiatives-section-wrapper .bg-particles');\n const particleCount = 8;<\/p>\n<p> for (let i = 0; i < particleCount; i++) {\n const particle = document.createElement('div');\n particle.className = 'particle';\n particle.style.left = Math.random() * 100 + '%';\n particle.style.animationDelay = Math.random() * 20 + 's';\n particle.style.animationDuration = (18 + Math.random() * 6) + 's';\n \n const size = 3 + Math.random() * 2;\n particle.style.width = size + 'px';\n particle.style.height = size + 'px';\n \n particlesContainer.appendChild(particle);\n }\n\n \/\/ Animate elements on scroll\n const observerOptions = {\n threshold: 0.1,\n rootMargin: '0px 0px -100px 0px'\n };\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.style.opacity = '1';\n entry.target.style.transform = 'translateY(0)';\n }\n });\n }, observerOptions);<\/p>\n<p> \/\/ Observe initiative items\n const animatedElements = document.querySelectorAll('.initiatives-section-wrapper .initiative-item');\n animatedElements.forEach(el => {\n el.style.opacity = '0';\n el.style.transform = 'translateY(30px)';\n el.style.transition = 'all 0.6s ease';\n observer.observe(el);\n });\n});\n<\/script><br \/>\n<\/body><br \/>\n<\/html>\n<\/div>\n<div>\n<p> <!DOCTYPE html><br \/>\n<html lang=\"en\"><br \/>\n<head><br \/>\n<meta charset=\"UTF-8\"><br \/>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><br \/>\n<title>BIFA+ President Block<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\n<style>\n\/* ========= PRESIDENT SECTION WRAPPER - ISOLATED & SEAMLESS ========= *\/\n.president-section-wrapper {\n \/* Identical CSS Variables - matching mission section exactly *\/\n --bifa-deep-navy: #0A1F44;\n --bifa-heritage-gold: #D4AF37;\n --bifa-civic-green: #1D6143;\n --bifa-bright-white: #FFFFFF;\n --bifa-soft-black: #1A1A1A;<\/p>\n<p> \/* Additional colors for better readability *\/\n --bifa-gray-light: #F8F9FA;\n --bifa-gray-medium: #E9ECEF;\n --bifa-gray: #6C757D;\n --bifa-gray-dark: #495057;<\/p>\n<p> \/* Official BIFA+ Fonts *\/\n --bifa-font-heading: 'Montserrat', sans-serif;\n --bifa-font-body: 'Poppins', sans-serif;<\/p>\n<p> \/* Premium shadows and effects *\/\n --bifa-shadow-sm: 0 2px 8px rgba(10, 31, 68, 0.08);\n --bifa-shadow-md: 0 8px 24px rgba(10, 31, 68, 0.12);\n --bifa-shadow-lg: 0 16px 48px rgba(10, 31, 68, 0.16);\n --bifa-shadow-xl: 0 25px 80px rgba(10, 31, 68, 0.15);\n --bifa-shadow-gold: 0 15px 40px rgba(212, 175, 55, 0.3);\n --bifa-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);<\/p>\n<p> \/* SEAMLESS INTEGRATION - same as mission *\/\n width: 100vw;\n position: relative;\n left: 50%;\n margin-left: -50vw;\n background: radial-gradient(ellipse 120% 80% at center bottom, \n rgba(255, 255, 255, 1) 0%,\n rgba(248, 249, 250, 0.95) 20%,\n rgba(248, 249, 250, 0.8) 40%,\n rgba(248, 249, 250, 0.5) 60%,\n rgba(248, 249, 250, 0.2) 80%,\n transparent 100%\n );\n overflow: hidden;\n}<\/p>\n<p>\/* NO top border - seamless connection to mission section *\/\n.president-section-wrapper::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: transparent;\n z-index: 100;\n}<\/p>\n<p>\/* Bottom connection line for next section *\/\n.president-section-wrapper::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: linear-gradient(90deg, \n transparent 0%, \n rgba(212, 175, 55, 0.3) 25%, \n rgba(212, 175, 55, 0.6) 50%, \n rgba(212, 175, 55, 0.3) 75%,\n transparent 100%\n );\n z-index: 100;\n}<\/p>\n<p>\/* ========= RESET - ONLY FOR THIS SECTION ========= *\/\n.president-section-wrapper * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}<\/p>\n<p>.president-section-wrapper {\n font-family: var(--bifa-font-body);\n color: var(--bifa-soft-black);\n line-height: 1.6;\n}<\/p>\n<p>\/* ========= PRESIDENT SECTION ========= *\/\n.president-section-wrapper .president-section {\n padding: 100px 0;\n background: transparent;\n position: relative;\n z-index: 10;\n}<\/p>\n<p>.president-section-wrapper .president-container {\n width: 100%;\n margin: 0;\n padding: 0 5%;\n text-align: center;\n position: relative;\n z-index: 1;\n}<\/p>\n<p>\/* Section Header *\/\n.president-section-wrapper .section-header {\n text-align: center;\n margin-bottom: 60px;\n animation: presidentFadeIn 1.2s ease-out;\n}<\/p>\n<p>@keyframes presidentFadeIn {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>.president-section-wrapper .section-title {\n font-family: var(--bifa-font-heading);\n font-size: clamp(2.5rem, 4vw, 3.5rem);\n font-weight: 900;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n margin-bottom: 20px;\n letter-spacing: -0.02em;\n}<\/p>\n<p>.president-section-wrapper .section-subtitle {\n font-family: var(--bifa-font-body);\n font-size: clamp(1rem, 1.5vw, 1.2rem);\n color: var(--bifa-soft-black);\n max-width: 800px;\n margin: 0 auto;\n line-height: 1.8;\n font-weight: 400;\n}<\/p>\n<p>\/* President Content - No borders, full width *\/\n.president-section-wrapper .president-content-area {\n width: 100%;\n position: relative;\n z-index: 2;\n background: transparent;\n padding: 0;\n animation: presidentContentFadeIn 1s ease-out 0.3s both;\n}<\/p>\n<p>@keyframes presidentContentFadeIn {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>\/* President Photo *\/\n.president-section-wrapper .president-photo {\n width: 280px;\n height: 350px;\n margin: 0 auto 40px;\n position: relative;\n}<\/p>\n<p>.president-section-wrapper .photo-frame {\n width: 100%;\n height: 100%;\n position: relative;\n overflow: hidden;\n border-radius: 0 45% 0 45%;\n box-shadow: var(--bifa-shadow-xl);\n background: var(--bifa-bright-white);\n transition: var(--bifa-transition);\n}<\/p>\n<p>.president-section-wrapper .photo-frame::before {\n content: '';\n position: absolute;\n top: -5px;\n left: -5px;\n right: -5px;\n bottom: -5px;\n background: linear-gradient(135deg, \n var(--bifa-heritage-gold) 0%, \n var(--bifa-heritage-gold) 25%,\n var(--bifa-deep-navy) 50%,\n var(--bifa-heritage-gold) 75%, \n var(--bifa-heritage-gold) 100%\n );\n border-radius: 0 45% 0 45%;\n z-index: -1;\n animation: presidentGradientRotate 8s linear infinite;\n}<\/p>\n<p>@keyframes presidentGradientRotate {\n 0% { filter: hue-rotate(0deg); }\n 100% { filter: hue-rotate(360deg); }\n}<\/p>\n<p>.president-section-wrapper .photo-frame img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: var(--bifa-transition);\n}<\/p>\n<p>.president-section-wrapper .photo-frame:hover {\n transform: translateY(-5px);\n box-shadow: var(--bifa-shadow-gold);\n}<\/p>\n<p>.president-section-wrapper .photo-frame:hover img {\n transform: scale(1.05);\n}<\/p>\n<p>\/* Title decoration matching mission style *\/\n.president-section-wrapper .title-decoration {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 20px;\n margin-bottom: 25px;\n}<\/p>\n<p>.president-section-wrapper .gold-line {\n width: 80px;\n height: 3px;\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent);\n animation: presidentPulse 2s ease-in-out infinite;\n}<\/p>\n<p>@keyframes presidentPulse {\n 0%, 100% {\n opacity: 0.6;\n transform: scaleX(1);\n }\n 50% {\n opacity: 1;\n transform: scaleX(1.2);\n }\n}<\/p>\n<p>.president-section-wrapper .president-title {\n font-family: var(--bifa-font-heading);\n font-size: 0.9rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 4px;\n color: var(--bifa-heritage-gold);\n}<\/p>\n<p>.president-section-wrapper .president-name {\n font-family: var(--bifa-font-heading);\n font-size: clamp(2rem, 3vw, 2.8rem);\n font-weight: 900;\n color: var(--bifa-deep-navy);\n margin-bottom: 30px;\n line-height: 1.2;\n position: relative;\n transition: var(--bifa-transition);\n}<\/p>\n<p>.president-section-wrapper .president-name::after {\n content: '';\n position: absolute;\n bottom: -10px;\n left: 50%;\n transform: translateX(-50%);\n width: 100px;\n height: 3px;\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent);\n border-radius: 2px;\n animation: presidentLineGrow 1.5s ease-out 1s both;\n}<\/p>\n<p>@keyframes presidentLineGrow {\n from { width: 0; }\n to { width: 100px; }\n}<\/p>\n<p>.president-section-wrapper .president-name:hover {\n color: var(--bifa-heritage-gold);\n transform: translateY(-2px);\n}<\/p>\n<p>.president-section-wrapper .president-description {\n font-family: var(--bifa-font-body);\n font-size: 1.1rem;\n line-height: 1.9;\n color: var(--bifa-soft-black);\n margin-bottom: 40px;\n max-width: 900px;\n margin-left: auto;\n margin-right: auto;\n text-align: left;\n}<\/p>\n<p>.president-section-wrapper .president-description .intro-text {\n font-size: 1.2rem;\n margin-bottom: 40px;\n text-align: center;\n font-weight: 500;\n}<\/p>\n<p>.president-section-wrapper .president-description .highlight {\n background: linear-gradient(135deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n font-weight: 600;\n position: relative;\n}<\/p>\n<p>.president-section-wrapper .president-description .highlight::after {\n content: '';\n position: absolute;\n bottom: -2px;\n left: 0;\n width: 100%;\n height: 2px;\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent);\n opacity: 0.3;\n}<\/p>\n<p>\/* Content sections *\/\n.president-section-wrapper .philosophy-section,\n.president-section-wrapper .vision-section,\n.president-section-wrapper .leadership-section,\n.president-section-wrapper .impact-section {\n margin-bottom: 35px;\n padding: 25px;\n background: rgba(248, 249, 250, 0.5);\n border-radius: 15px;\n border-left: 4px solid var(--bifa-heritage-gold);\n transition: var(--bifa-transition);\n}<\/p>\n<p>.president-section-wrapper .philosophy-section:hover,\n.president-section-wrapper .vision-section:hover,\n.president-section-wrapper .leadership-section:hover,\n.president-section-wrapper .impact-section:hover {\n background: rgba(248, 249, 250, 0.8);\n transform: translateX(5px);\n box-shadow: var(--bifa-shadow-sm);\n}<\/p>\n<p>.president-section-wrapper .section-heading {\n font-family: var(--bifa-font-heading);\n font-size: 1.3rem;\n font-weight: 700;\n color: var(--bifa-deep-navy);\n margin-bottom: 15px;\n position: relative;\n padding-bottom: 8px;\n}<\/p>\n<p>.president-section-wrapper .section-heading::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 60px;\n height: 2px;\n background: var(--bifa-heritage-gold);\n border-radius: 1px;\n}<\/p>\n<p>.president-section-wrapper .quote-text {\n font-family: var(--bifa-font-heading);\n font-size: 1.4rem;\n font-weight: 600;\n color: var(--bifa-heritage-gold);\n font-style: italic;\n text-align: center;\n margin: 20px 0;\n padding: 20px;\n background: rgba(212, 175, 55, 0.05);\n border-radius: 10px;\n position: relative;\n}<\/p>\n<p>.president-section-wrapper .quote-text::before {\n content: '\"';\n position: absolute;\n top: -10px;\n left: 15px;\n font-size: 3rem;\n color: var(--bifa-heritage-gold);\n opacity: 0.3;\n}<\/p>\n<p>.president-section-wrapper .quote-text::after {\n content: '\"';\n position: absolute;\n bottom: -25px;\n right: 15px;\n font-size: 3rem;\n color: var(--bifa-heritage-gold);\n opacity: 0.3;\n}<\/p>\n<p>\/* Action Buttons - matching mission style *\/\n.president-section-wrapper .action-row {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 25px;\n margin-top: 50px;\n}<\/p>\n<p>.president-section-wrapper .btn-elegant {\n padding: 16px 35px;\n text-decoration: none;\n font-size: 1rem;\n font-weight: 600;\n border-radius: 50px;\n display: inline-flex;\n align-items: center;\n gap: 10px;\n transition: var(--bifa-transition);\n position: relative;\n overflow: hidden;\n text-transform: uppercase;\n letter-spacing: 1px;\n font-family: var(--bifa-font-heading);\n}<\/p>\n<p>.president-section-wrapper .btn-primary {\n background: linear-gradient(135deg, var(--bifa-heritage-gold) 0%, var(--bifa-heritage-gold) 100%);\n color: var(--bifa-bright-white);\n box-shadow: var(--bifa-shadow-gold);\n border: 2px solid transparent;\n}<\/p>\n<p>.president-section-wrapper .btn-primary::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(135deg, var(--bifa-deep-navy), var(--bifa-deep-navy));\n opacity: 0;\n transition: opacity 0.4s ease;\n}<\/p>\n<p>.president-section-wrapper .btn-primary:hover::before {\n opacity: 1;\n}<\/p>\n<p>.president-section-wrapper .btn-primary span,\n.president-section-wrapper .btn-primary svg {\n position: relative;\n z-index: 1;\n}<\/p>\n<p>.president-section-wrapper .btn-primary:hover {\n transform: translateY(-3px);\n box-shadow: 0 20px 40px rgba(212, 175, 55, 0.4);\n}<\/p>\n<p>.president-section-wrapper .btn-secondary {\n background: transparent;\n color: var(--bifa-deep-navy);\n border: 2px solid var(--bifa-deep-navy);\n}<\/p>\n<p>.president-section-wrapper .btn-secondary:hover {\n background: var(--bifa-deep-navy);\n color: var(--bifa-bright-white);\n transform: translateY(-3px);\n box-shadow: var(--bifa-shadow-lg);\n}<\/p>\n<p>\/* Floating particles - matching mission *\/\n.president-section-wrapper .bg-particles {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow: hidden;\n z-index: 1;\n pointer-events: none;\n}<\/p>\n<p>.president-section-wrapper .particle {\n position: absolute;\n width: 4px;\n height: 4px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\n border-radius: 50%;\n animation: presidentFloat 20s infinite linear;\n box-shadow: 0 0 12px rgba(212, 175, 55, 0.3);\n opacity: 0.3;\n}<\/p>\n<p>@keyframes presidentFloat {\n 0% {\n transform: translateY(100vh) translateX(0);\n opacity: 0;\n }\n 15% { opacity: 0.3; }\n 85% { opacity: 0.3; }\n 100% {\n transform: translateY(-100vh) translateX(30px);\n opacity: 0;\n }\n}<\/p>\n<p>\/* Fallback for browsers without background-clip support *\/\n@supports not (background-clip: text) {\n .president-section-wrapper .section-title,\n .president-section-wrapper .highlight {\n color: var(--bifa-heritage-gold) !important;\n background: none !important;\n }\n}<\/p>\n<p>\/* ========= RESPONSIVE - MATCHING MISSION ========= *\/\n@media (max-width: 1200px) {\n .president-section-wrapper .president-container {\n padding: 0 4%;\n }\n}<\/p>\n<p>@media (max-width: 768px) {\n .president-section-wrapper .president-container {\n padding: 0 3%;\n }<\/p>\n<p> .president-section-wrapper .president-section {\n padding: 60px 0;\n }<\/p>\n<p> .president-section-wrapper .president-photo {\n width: 240px;\n height: 300px;\n }<\/p>\n<p> .president-section-wrapper .section-title {\n font-size: 2rem;\n }<\/p>\n<p> .president-section-wrapper .president-name {\n font-size: 1.8rem;\n }<\/p>\n<p> .president-section-wrapper .president-description {\n font-size: 1rem;\n }<\/p>\n<p> .president-section-wrapper .president-description .intro-text {\n font-size: 1.1rem;\n }<\/p>\n<p> .president-section-wrapper .section-heading {\n font-size: 1.2rem;\n }<\/p>\n<p> .president-section-wrapper .quote-text {\n font-size: 1.2rem;\n padding: 15px;\n }<\/p>\n<p> .president-section-wrapper .philosophy-section,\n .president-section-wrapper .vision-section,\n .president-section-wrapper .leadership-section,\n .president-section-wrapper .impact-section {\n padding: 20px 15px;\n margin-bottom: 25px;\n }<\/p>\n<p> .president-section-wrapper .action-row {\n flex-direction: column;\n gap: 15px;\n }<\/p>\n<p> .president-section-wrapper .btn-elegant {\n width: 100%;\n justify-content: center;\n }\n}<\/p>\n<p>@media (max-width: 480px) {\n .president-section-wrapper .president-container {\n padding: 0 2%;\n }<\/p>\n<p> .president-section-wrapper .president-photo {\n width: 200px;\n height: 260px;\n }<\/p>\n<p> .president-section-wrapper .president-name {\n font-size: 1.5rem;\n }<\/p>\n<p> .president-section-wrapper .president-description {\n font-size: 0.95rem;\n }<\/p>\n<p> .president-section-wrapper .president-description .intro-text {\n font-size: 1rem;\n }<\/p>\n<p> .president-section-wrapper .section-heading {\n font-size: 1.1rem;\n }<\/p>\n<p> .president-section-wrapper .quote-text {\n font-size: 1.1rem;\n padding: 12px;\n }<\/p>\n<p> .president-section-wrapper .philosophy-section,\n .president-section-wrapper .vision-section,\n .president-section-wrapper .leadership-section,\n .president-section-wrapper .impact-section {\n padding: 15px 12px;\n margin-bottom: 20px;\n }<\/p>\n<p> .president-section-wrapper .btn-elegant {\n padding: 14px 25px;\n font-size: 0.9rem;\n }<\/p>\n<p> .president-section-wrapper .title-decoration {\n gap: 15px;\n }<\/p>\n<p> .president-section-wrapper .gold-line {\n width: 60px;\n }<\/p>\n<p> .president-section-wrapper .president-title {\n font-size: 0.8rem;\n letter-spacing: 3px;\n }\n}\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"president-section-wrapper\" id=\"founder\">\n <\/p>\n<div class=\"bg-particles\"><\/div>\n<p> <\/p>\n<section class=\"president-section\">\n<div class=\"president-container\">\n <\/p>\n<div class=\"section-header\">\n<h2 class=\"section-title\">\u0939\u092e\u093e\u0930\u0947 \u0938\u0902\u0938\u094d\u0925\u093e\u092a\u0915<\/h2>\n<p class=\"section-subtitle\">\n \u0935\u0948\u0936\u094d\u0935\u093f\u0915 \u0926\u0915\u094d\u0937\u093f\u0923 \u092e\u0947\u0902 \u0905\u0902\u0924\u0930\u094d\u0930\u093e\u0937\u094d\u091f\u094d\u0930\u0940\u092f \u0916\u0947\u0932 \u0915\u0942\u091f\u0928\u0940\u0924\u093f \u0914\u0930 \u0938\u093e\u0902\u0938\u094d\u0915\u0943\u0924\u093f\u0915 \u0938\u0939\u092f\u094b\u0917 \u0915\u094b \u0906\u0917\u0947 \u092c\u0922\u093c\u093e\u0928\u0947 \u0935\u093e\u0932\u093e \u0926\u0942\u0930\u0926\u0930\u094d\u0936\u0940 \u0928\u0947\u0924\u0943\u0924\u094d\u0935\u0964\n <\/p>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"president-card\">\n<div class=\"president-card-content\">\n <\/p>\n<div class=\"president-photo\">\n<div class=\"photo-frame\">\n <img decoding=\"async\" src=\"https:\/\/bifa.ai\/wp-content\/themes\/yootheme-child\/assets\/images\/Mr\/main-photo.jpg\" \n alt=\"Dr. Salim Humaid Almazaini\"\n data-no-translation=\"true\"\n data-no-dynamic-translation=\"true\">\n <\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"title-decoration\">\n<div class=\"gold-line\"><\/div>\n<h3 class=\"president-title\">\u0938\u0902\u0938\u094d\u0925\u093e\u092a\u0915 \u090f\u0935\u0902 \u0905\u0927\u094d\u092f\u0915\u094d\u0937<\/h3>\n<div class=\"gold-line\"><\/div>\n<\/p><\/div>\n<h1 class=\"president-name\">\u0921\u0949. \u0938\u0932\u0940\u092e \u0939\u0941\u092e\u0948\u0926 \u0905\u0932\u092e\u091c\u093c\u0948\u0928\u0940<\/h1>\n<div class=\"president-description\">\n<p class=\"intro-text\">\n A <span class=\"highlight\">\u0926\u0942\u0930\u0926\u0930\u094d\u0936\u0940 \u0928\u0947\u0924\u093e<\/span> in modern sports diplomacy and the architect of an international movement that unites youth through football, culture, and education. Based in Dubai, the founder has created what represents one of the most ambitious <span class=\"highlight\">\u0935\u0948\u0936\u094d\u0935\u093f\u0915 \u0926\u0915\u094d\u0937\u093f\u0923 \u0915\u094b \u091c\u094b\u0921\u093c\u0928\u0947 \u0935\u093e\u0932\u0940 \u0938\u093e\u0902\u0938\u094d\u0915\u0943\u0924\u093f\u0915-\u0916\u0947\u0932 \u092a\u0939\u0932<\/span>.\n <\/p>\n<div class=\"philosophy-section\">\n<h4 class=\"section-heading\">Philosophy<\/h4>\n<p class=\"quote-text\">"\u0939\u092e \u0938\u093f\u0930\u094d\u092b\u093c \u0916\u0947\u0932 \u0928\u0939\u0940\u0902 \u0916\u0947\u0932 \u0930\u0939\u0947 \u0939\u0948\u0902\u0964 \u0939\u092e \u092d\u0935\u093f\u0937\u094d\u092f \u0915\u093e \u0928\u093f\u0930\u094d\u092e\u093e\u0923 \u0915\u0930 \u0930\u0939\u0947 \u0939\u0948\u0902\u0964"<\/p>\n<p>This powerful statement encapsulates the belief that football transcends sport\u2014it becomes a <span class=\"highlight\">\u0936\u093e\u0902\u0924\u093f, \u0938\u092e\u091d \u0914\u0930 \u0905\u0902\u0924\u0930\u094d\u0930\u093e\u0937\u094d\u091f\u094d\u0930\u0940\u092f \u0938\u0939\u092f\u094b\u0917 \u0915\u093e \u092e\u093e\u0927\u094d\u092f\u092e<\/span>. The approach transforms the beautiful game into a tool for soft diplomacy and cultural bridge-building.<\/p>\n<\/p><\/div>\n<div class=\"vision-section\">\n<h4 class=\"section-heading\">\u0915\u093e\u0930\u094d\u092f\u0928\u0940\u0924\u093f\u0915 \u0926\u0943\u0937\u094d\u091f\u093f<\/h4>\n<p>Under this leadership, BIFA+ has evolved into a comprehensive international ecosystem that connects youth through multiple channels: <span class=\"highlight\">\u0916\u0947\u0932 \u0909\u0924\u094d\u0915\u0943\u0937\u094d\u091f\u0924\u093e, \u0936\u0948\u0915\u094d\u0937\u093f\u0915 \u0909\u0928\u094d\u0928\u0924\u093f, \u0938\u093e\u0902\u0938\u094d\u0915\u0943\u0924\u093f\u0915 \u0906\u0926\u093e\u0928-\u092a\u094d\u0930\u0926\u093e\u0928 \u0914\u0930 \u0905\u0924\u094d\u092f\u093e\u0927\u0941\u0928\u093f\u0915 \u092a\u094d\u0930\u094c\u0926\u094d\u092f\u094b\u0917\u093f\u0915\u0940 \u090f\u0915\u0940\u0915\u0930\u0923<\/span>\u092f\u0939 \u0917\u0920\u092c\u0902\u0927\u0928 \u0935\u0948\u0936\u094d\u0935\u093f\u0915 \u0926\u0915\u094d\u0937\u093f\u0923 \u0915\u0947 \u0926\u0947\u0936\u094b\u0902 \u0915\u0947 \u092c\u0940\u091a \u0935\u093f\u0915\u093e\u0938, \u0936\u093e\u0902\u0924\u093f \u0914\u0930 \u0938\u093e\u092e\u093e\u091c\u093f\u0915 \u0938\u092e\u093e\u0935\u0947\u0936 \u0915\u094b \u092c\u0922\u093c\u093e\u0935\u093e \u0926\u0947\u0928\u0947 \u0935\u093e\u0932\u0947 \u090f\u0915 \u0938\u094d\u0935\u0924\u0902\u0924\u094d\u0930, \u0935\u093f\u0915\u0947\u0928\u094d\u0926\u094d\u0930\u0940\u0915\u0943\u0924 \u092e\u0902\u091a \u0915\u0947 \u0930\u0942\u092a \u092e\u0947\u0902 \u0915\u093e\u0930\u094d\u092f \u0915\u0930\u0924\u093e \u0939\u0948\u0964<\/p>\n<\/p><\/div>\n<div class=\"leadership-section\">\n<h4 class=\"section-heading\">\u0916\u0947\u0932 \u0915\u0942\u091f\u0928\u0940\u0924\u093f \u092e\u0947\u0902 \u0928\u0935\u093e\u091a\u093e\u0930<\/h4>\n<p>BIFA+ is envisioned as more than a sports organization\u2014it’s a movement that uses football as a <span class=\"highlight\">\u0936\u093e\u0902\u0924\u093f, \u0938\u093e\u0902\u0938\u094d\u0915\u0943\u0924\u093f\u0915 \u0938\u092e\u091d \u0914\u0930 \u092f\u0941\u0935\u093e \u0938\u0936\u0915\u094d\u0924\u093f\u0915\u0930\u0923 \u0915\u094b \u092c\u0922\u093c\u093e\u0935\u093e \u0926\u0947\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0938\u093e\u0930\u094d\u0935\u092d\u094c\u092e\u093f\u0915 \u092d\u093e\u0937\u093e<\/span>. This initiative represents a new model of international cooperation, where sport becomes a catalyst for positive social change and diplomatic engagement.<\/p>\n<\/p><\/div>\n<div class=\"impact-section\">\n<h4 class=\"section-heading\">\u0915\u0932 \u0915\u093e \u0928\u093f\u0930\u094d\u092e\u093e\u0923<\/h4>\n<p>Through BIFA+, a legacy is being created that extends far beyond football pitches. The platform enables young people from diverse backgrounds to connect, learn, and collaborate, fostering the next generation of <span class=\"highlight\">\u0935\u0948\u0936\u094d\u0935\u093f\u0915 \u0928\u093e\u0917\u0930\u093f\u0915 \u091c\u094b \u0938\u092e\u091d\u0924\u0947 \u0939\u0948\u0902 \u0915\u093f \u0938\u0939\u092f\u094b\u0917 \u092a\u094d\u0930\u0924\u093f\u0938\u094d\u092a\u0930\u094d\u0927\u093e \u092a\u0930 \u092d\u093e\u0930\u0940 \u092a\u0921\u093c\u0924\u093e \u0939\u0948<\/span> \u090f\u0915 \u092c\u0947\u0939\u0924\u0930 \u0935\u093f\u0936\u094d\u0935 \u0915\u0947 \u0928\u093f\u0930\u094d\u092e\u093e\u0923 \u092e\u0947\u0902.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<\/div>\n<p><script>\ndocument.addEventListener('DOMContentLoaded', () => {\n \/\/ Create floating particles - matching mission section\n const particlesContainer = document.querySelector('.president-section-wrapper .bg-particles');\n const particleCount = 8;<\/p>\n<p> for (let i = 0; i < particleCount; i++) {\n const particle = document.createElement('div');\n particle.className = 'particle';\n particle.style.left = Math.random() * 100 + '%';\n particle.style.animationDelay = Math.random() * 20 + 's';\n particle.style.animationDuration = (18 + Math.random() * 6) + 's';\n \n const size = 3 + Math.random() * 2;\n particle.style.width = size + 'px';\n particle.style.height = size + 'px';\n \n particlesContainer.appendChild(particle);\n }\n\n \/\/ Animate elements on scroll - matching mission behavior\n const observerOptions = {\n threshold: 0.1,\n rootMargin: '0px 0px -100px 0px'\n };\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.style.opacity = '1';\n entry.target.style.transform = 'translateY(0)';\n }\n });\n }, observerOptions);<\/p>\n<p> \/\/ Observe animated elements\n const animatedElements = document.querySelectorAll('.president-section-wrapper .president-content-area, .president-section-wrapper .section-header');\n animatedElements.forEach(el => {\n observer.observe(el);\n });<\/p>\n<p> \/\/ Button hover effects\n document.querySelectorAll('.president-section-wrapper .btn-elegant').forEach(button => {\n button.addEventListener('mouseenter', (e) => {\n const rect = button.getBoundingClientRect();\n const x = e.clientX - rect.left;\n const y = e.clientY - rect.top;<\/p>\n<p> const ripple = document.createElement('div');\n ripple.style.cssText = `\n position: absolute;\n width: 100px;\n height: 100px;\n background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);\n left: ${x - 50}px;\n top: ${y - 50}px;\n pointer-events: none;\n opacity: 0;\n transition: opacity 0.3s ease;\n border-radius: 50%;\n z-index: 0;\n `;<\/p>\n<p> button.appendChild(ripple);\n setTimeout(() => { ripple.style.opacity = '1'; }, 10);<\/p>\n<p> button.addEventListener('mouseleave', () => {\n ripple.style.opacity = '0';\n setTimeout(() => ripple.remove(), 300);\n }, { once: true });\n });\n });<\/p>\n<p> \/\/ Simple image loading effect\n const presidentImage = document.querySelector('.president-section-wrapper .photo-frame img');\n if (presidentImage) {\n presidentImage.style.opacity = '0';\n presidentImage.style.transition = 'opacity 0.8s ease';<\/p>\n<p> if (presidentImage.complete) {\n presidentImage.style.opacity = '1';\n } else {\n presidentImage.addEventListener('load', function() {\n this.style.opacity = '1';\n });\n }\n }<\/p>\n<p> \/\/ Smooth scroll for anchor links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n const target = document.querySelector(this.getAttribute('href'));\n if (target) {\n target.scrollIntoView({\n behavior: 'smooth',\n block: 'start'\n });\n }\n });\n });\n});\n<\/script><\/p>\n<p><\/body><br \/>\n<\/html>\n<\/div>\n<div>\n <div class=\"bifa-team-section-wrapper\" id=\"core-team\">\n <div class=\"bifa-team-bg-particles\"><\/div>\n <div class=\"bifa-team-pattern-overlay\"><\/div>\n\n <section class=\"bifa-team-section\">\n <div class=\"bifa-team-container\">\n <div class=\"bifa-team-header\">\n <h2 class=\"bifa-team-title\">\u092e\u0942\u0932 \u0938\u092e\u0942\u0939<\/h2>\n <p class=\"bifa-team-subtitle\">\n Meet the dedicated professionals driving BIFA+'s mission to unite the Global South through football, innovation, and cultural exchange.\n <\/p>\n <\/div>\n\n <div class=\"bifa-team-coming-soon\">\n <div class=\"bifa-team-coming-icon\">\ud83d\udc65<\/div>\n\n <h3 class=\"bifa-team-coming-title\">\u0939\u092e\u093e\u0930\u0940 \u091f\u0940\u092e \u092c\u0922\u093c \u0930\u0939\u0940 \u0939\u0948<\/h3>\n\n <p class=\"bifa-team-coming-text\">\n \u0939\u092e \u0935\u0930\u094d\u0924\u092e\u093e\u0928 \u092e\u0947\u0902 \u090f\u0915 \u0935\u093f\u0936\u094d\u0935 \u0938\u094d\u0924\u0930\u0940\u092f \u091f\u0940\u092e \u0915\u093e \u0917\u0920\u0928 \u0915\u0930 \u0930\u0939\u0947 \u0939\u0948\u0902 <span class=\"bifa-highlight\">\u0916\u0947\u0932 \u092a\u0947\u0936\u0947\u0935\u0930, \u092a\u094d\u0930\u094c\u0926\u094d\u092f\u094b\u0917\u093f\u0915\u0940 \u0928\u0935\u092a\u094d\u0930\u0935\u0930\u094d\u0924\u0915 \u0914\u0930 \u0938\u093e\u0902\u0938\u094d\u0915\u0943\u0924\u093f\u0915 \u0930\u093e\u091c\u0926\u0942\u0924<\/span> \u091c\u094b \u0935\u0948\u0936\u094d\u0935\u093f\u0915 \u0926\u0915\u094d\u0937\u093f\u0923 \u092e\u0947\u0902 \u092f\u0941\u0935\u093e \u0916\u0947\u0932\u094b\u0902 \u0915\u094b \u092c\u0926\u0932\u0928\u0947 \u0915\u0947 \u0939\u092e\u093e\u0930\u0947 \u0926\u0943\u0937\u094d\u091f\u093f\u0915\u094b\u0923 \u0915\u094b \u0938\u093e\u091d\u093e \u0915\u0930\u0924\u0947 \u0939\u0948\u0902\u0964\n <\/p>\n\n <p class=\"bifa-team-coming-text\">\n As we prepare for our official launch, we're carefully selecting individuals who bring not just expertise, but also <span class=\"bifa-highlight\">\u091c\u0941\u0928\u0942\u0928, \u0930\u091a\u0928\u093e\u0924\u094d\u092e\u0915\u0924\u093e \u0914\u0930 \u092a\u094d\u0930\u0924\u093f\u092c\u0926\u094d\u0927\u0924\u093e<\/span> \u092b\u0941\u091f\u092c\u0949\u0932 \u0915\u0947 \u092e\u093e\u0927\u094d\u092f\u092e \u0938\u0947 \u092a\u0941\u0932 \u092c\u0928\u093e\u0928\u0947 \u0915\u0947 \u0939\u092e\u093e\u0930\u0947 \u092e\u093f\u0936\u0928 \u0915\u0947 \u0932\u093f\u090f\u0964\n <\/p>\n\n <div class=\"bifa-team-notify-box\">\n <h4 class=\"bifa-team-notify-title\">\u0938\u092c\u0938\u0947 \u092a\u0939\u0932\u0947 \u091c\u093e\u0928\u0947\u0902<\/h4>\n <p class=\"bifa-team-notify-text\">\n Our complete team roster will be unveiled at the official BIFA+ launch.\n Get in touch to learn more about our revolutionary movement.\n <\/p>\n\n <a href=\"https:\/\/bifa.ai\/hi\/contacts\/\" class=\"bifa-team-btn-notify\">\n <span>\u091c\u0941\u0921\u093c\u0947 \u0930\u0939\u094b<\/span>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <\/div>\n\n <script>\n (function() {\n const container = document.querySelector('.bifa-team-bg-particles');\n if (container) {\n for (let i = 0; i < 6; i++) {\n const particle = document.createElement('div');\n particle.className = 'bifa-team-particle';\n particle.style.left = Math.random() * 100 + '%';\n particle.style.animationDelay = Math.random() * 20 + 's';\n particle.style.animationDuration = (18 + Math.random() * 6) + 's';\n container.appendChild(particle);\n }\n }\n })();\n <\/script>\n <\/div>\n<p><br \/>\n\\n <\/p>\n<div class=\"\\\"bg-particles\\\"\"><\\\/div>\\n\\n \\n <\/p>\n<section class=\"\\\"hero-section\\\"\">\\n <\/p>\n<div class=\"\\\"content-container\\\"\">\\n \\n <\/p>\n<div class=\"\\\"content-side\\\"\">\\n <\/p>\n<h1 class=\"\\\"main-heading\\\"\">BIFA+ \u0915\u0947 \u092c\u093e\u0930\u0947 \u092e\u0947\u0902<\\\/h1>\\n <\/p>\n<p class=\"\\\"subtitle\\\"\">\u092c\u094d\u0930\u093f\u0915\u094d\u0938 \u0905\u0902\u0924\u0930\u094d\u0930\u093e\u0937\u094d\u091f\u094d\u0930\u0940\u092f \u092b\u0941\u091f\u092c\u0949\u0932 \u0917\u0920\u092c\u0902\u0927\u0928<\\\/p>\\n <\/p>\n<p class=\"\\\"slogan\\\"\">\\”Play with Spirit. Lead with Vision.\\”<\\\/p>\\n \\n <\/p>\n<p class=\"\\\"description\\\"\">\\n <span class=\"\\\"highlight\\\"\">\u092c\u0940\u0906\u0908\u090f\u092b\u090f+ (\u092c\u0940\u0906\u0908\u090f\u092b\u090f \u092a\u094d\u0932\u0938)<\\\/span> is an international sports and cultural initiative \\n that connects countries of the <span class=\"\\\"highlight\\\"\">\u0935\u0948\u0936\u094d\u0935\u093f\u0915 \u0926\u0915\u094d\u0937\u093f\u0923<\\\/span> through football, \\n education, technology, and people-to-people diplomacy. Founded by <span class=\"\\\"highlight\\\"\">\u0938\u0932\u0940\u092e \u0939\u0941\u092e\u0948\u0926 \u0905\u0932\u092e\u091c\u093c\u0948\u0928\u0940<\\\/span> \\n from the UAE, BIFA+ brings together <span class=\"\\\"highlight\\\"\">11 \u0930\u093e\u0937\u094d\u091f\u094d\u0930<\\\/span> in a visionary \\n non-profit alliance and professional operational platform designed to host events, \\n digital services, and youth development programs that shape a more unified and inclusive future.\\n <\\\/p>\\n\\n <\/p>\n<div class=\"\\\"stats-grid\\\"\">\\n <\/p>\n<div class=\"\\\"stat-card\\\"\">\\n <\/p>\n<div class=\"\\\"stat-number\\\"\">11<\\\/div>\\n <\/p>\n<div class=\"\\\"stat-label\\\"\">\u0938\u0926\u0938\u094d\u092f \u0930\u093e\u0937\u094d\u091f\u094d\u0930<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"stat-card\\\"\">\\n <\/p>\n<div class=\"\\\"stat-number\\\"\">3.8\u092c\u0940<\\\/div>\\n <\/p>\n<div class=\"\\\"stat-label\\\"\">\u091c\u0928\u0938\u0902\u0916\u094d\u092f\u093e \u0938\u0902\u092f\u0941\u0915\u094d\u0924<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"stat-card\\\"\">\\n <\/p>\n<div class=\"\\\"stat-number\\\"\">2024<\\\/div>\\n <\/p>\n<div class=\"\\\"stat-label\\\"\">\u0938\u094d\u0925\u093e\u092a\u093f\u0924<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"stat-card\\\"\">\\n <\/p>\n<div class=\"\\\"stat-number\\\"\">8<\\\/div>\\n <\/p>\n<div class=\"\\\"stat-label\\\"\">\u092e\u0941\u0916\u094d\u092f \u0915\u093e\u0930\u094d\u092f\u0915\u094d\u0930\u092e<\\\/div>\\n <\\\/div>\\n <\\\/div>\\n\\n <\/p>\n<div class=\"\\\"action-buttons\\\"\">\\n <a href=\"\\\"#our-mission\\\"\" class=\"\\\"cta-button\" primary\\\" role=\"\\\"button\\\"\">\u0939\u092e\u093e\u0930\u093e \u092e\u093f\u0936\u0928 \u091c\u093e\u0928\u0947\u0902<\\\/a>\\n <a href=\"\\\"\\\/initiatives\\\"\" class=\"\\\"cta-button\" secondary\\\" role=\"\\\"button\\\"\">\u092a\u0939\u0932\u094b\u0902 \u0915\u093e \u0905\u0928\u094d\u0935\u0947\u0937\u0923 \u0915\u0930\u0947\u0902<\\\/a>\\n <\\\/div>\\n <\\\/div>\\n\\n \\n <\/p>\n<div class=\"\\\"video-side\\\"\">\\n <\/p>\n<h2 class=\"\\\"video-section-title\\\"\">\u0916\u0947\u0932 \u0915\u0947 \u092e\u093e\u0927\u094d\u092f\u092e \u0938\u0947 \u0935\u0948\u0936\u094d\u0935\u093f\u0915 \u090f\u0915\u0924\u093e<\\\/h2>\\n <\/p>\n<p class=\"\\\"video-section-subtitle\\\"\">BIFA+ \u0915\u0947 \u0935\u093f\u091c\u093c\u0928 \u0915\u093e \u0905\u0928\u0941\u092d\u0935 \u0915\u0930\u0947\u0902 \u091c\u094b 11 \u0926\u0947\u0936\u094b\u0902 \u0914\u0930 3.8 \u092c\u093f\u0932\u093f\u092f\u0928 \u0932\u094b\u0917\u094b\u0902 \u0915\u094b \u091c\u094b\u0921\u093c\u0924\u093e \u0939\u0948<\\\/p>\\n \\n <\/p>\n<div class=\"\\\"video-wrapper\\\"\">\\n \\n <\/p>\n<div class=\"\\\"video-loading-overlay\\\"\" id=\"\\\"videoLoadingOverlay\\\"\">\\n <iframe \\n id=\"\\\"loadingIframe\\\"\\n\" class=\"\\\"loading-iframe\\\"\\n\" src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Logo\\\/Get.html\\\"\\n\" title=\"\\\"BIFA+\" loading screen\\\"\\n onload=\"\\\"handleIframeLoad()\\\"\\n\" onerror=\"\\\"handleIframeError()\\\"\">\\n <\\\/iframe>\\n \\n \\n <\/p>\n<div class=\"\\\"fallback-loader\\\"\" id=\"\\\"fallbackLoader\\\"\">\\n <\/p>\n<div class=\"\\\"loader-logo\\\"\">\\n <svg viewbox=\"\\\"0\" 0 200 200\\\" xmlns=\"\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\"\" aria-hidden=\"\\\"true\\\"\">\\n <defs>\\n <lineargradient id=\"\\\"logoGradient\\\"\" x1=\"\\\"0%\\\"\" y1=\"\\\"0%\\\"\" x2=\"\\\"100%\\\"\" y2=\"\\\"100%\\\"\">\\n <stop offset=\"\\\"0%\\\"\" style=\"\\\"stop-color:#D4AF37\\\"\\\/\">\\n <stop offset=\"\\\"100%\\\"\" style=\"\\\"stop-color:#D4AF37\\\"\\\/\">\\n <\\\/linearGradient>\\n <\\\/defs>\\n <circle cx=\"\\\"100\\\"\" cy=\"\\\"100\\\"\" r=\"\\\"90\\\"\" fill=\"\\\"url(#logoGradient)\\\"\" opacity=\"\\\"0.1\\\"\\\/\">\\n <circle cx=\"\\\"100\\\"\" cy=\"\\\"100\\\"\" r=\"\\\"70\\\"\" fill=\"\\\"url(#logoGradient)\\\"\" opacity=\"\\\"0.3\\\"\\\/\">\\n <circle cx=\"\\\"100\\\"\" cy=\"\\\"100\\\"\" r=\"\\\"50\\\"\" fill=\"\\\"url(#logoGradient)\\\"\\\/\">\\n <text x=\"\\\"100\\\"\" y=\"\\\"110\\\"\" text-anchor=\"\\\"middle\\\"\" fill=\"\\\"white\\\"\" font-family=\"\\\"Montserrat\\\"\" font-size=\"\\\"24\\\"\" font-weight=\"\\\"bold\\\"\">BIFA+<\\\/text>\\n <\\\/svg>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"loader-text\\\"\">BIFA+ \u0905\u0928\u0941\u092d\u0935 \u0932\u094b\u0921 \u0939\u094b \u0930\u0939\u093e \u0939\u0948\u2026<\\\/div>\\n <\/p>\n<div class=\"\\\"loader-progress\\\"\">\\n <\/p>\n<div class=\"\\\"loader-progress-bar\\\"\"><\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n\\n <video id=\"\\\"heroVideo\\\"\" autoplay muted loop playsinline preload=\"\\\"metadata\\\"\\n\" poster=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/video_poster.jpg\\\"\\n\" aria-label=\"\\\"BIFA+\" promotional video\\\">\\n<source src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/video.mp4\\\"\" type=\"\\\"video\\\/mp4\\\"\">\\n <span class=\"\\\"sr-only\\\"\">\u0906\u092a\u0915\u093e \u092c\u094d\u0930\u093e\u0909\u091c\u093c\u0930 \u092e\u0947\u0902 \u0935\u0940\u0921\u093f\u092f\u094b \u091f\u0948\u0917 \u0938\u092e\u0930\u094d\u0925\u093f\u0924 \u0928\u0939\u0940\u0902 \u0939\u0948\u0964<\\\/span>\\n <\\\/video>\\n\\n \\n <\/p>\n<div class=\"\\\"controls\\\"\" id=\"\\\"controls\\\"\" aria-label=\"\\\"Video\" controls\\\">\\n <\/p>\n<div class=\"\\\"controls-row\\\"\">\\n <button class=\"\\\"ctrl-btn\\\"\" id=\"\\\"playPause\\\"\" aria-label=\"\\\"Play\\\/Pause\" video\\\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" aria-hidden=\"\\\"true\\\"\"><path d=\"\\\"M8\" 5v14l11-7z\\\"\\><\\\/svg>\\n <\\\/button>\\n \\n <\/p>\n<div class=\"\\\"progress-container\\\"\">\\n <\/p>\n<div class=\"\\\"progress\\\"\" id=\"\\\"progress\\\"\" role=\"\\\"progressbar\\\"\" aria-label=\"\\\"Video\" progress\\\">\\n <\/p>\n<div class=\"\\\"progress-bar\\\"\" id=\"\\\"progressBar\\\"\"><\\\/div>\\n <\\\/div>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"time-display\\\"\" id=\"\\\"timeDisplay\\\"\" aria-live=\"\\\"polite\\\"\">0:00<\\\/div>\\n \\n <\/p>\n<div class=\"\\\"volume-container\\\"\">\\n <button class=\"\\\"ctrl-btn\\\"\" id=\"\\\"muteToggle\\\"\" aria-label=\"\\\"Mute\\\/Unmute\" video\\\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" aria-hidden=\"\\\"true\\\"\"><path d=\"\\\"M4\" 9v6h4l5 5v4l8 9h4z\\\"\\><\\\/svg>\\n <\\\/button>\\n <\/p>\n<div class=\"\\\"volume-slider\\\"\" id=\"\\\"volumeSlider\\\"\" role=\"\\\"slider\\\"\" aria-label=\"\\\"Volume\" control\\\">\\n <\/p>\n<div class=\"\\\"volume-bar\\\"\" id=\"\\\"volumeBar\\\"\"><\\\/div>\\n <\\\/div>\\n <\\\/div>\\n \\n <button class=\"\\\"fullscreen-btn\\\"\" id=\"\\\"fullscreenBtn\\\"\" aria-label=\"\\\"Toggle\" fullscreen\\\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" aria-hidden=\"\\\"true\\\"\"><path d=\"\\\"M7\" 14h5v5h5v-2h7v-3zm-2-4h2v7h3v5h5v5zm12 7h-3v2h5v-5h-2v3zm14 5v2h3v3h2v5h-5z\\\"\\><\\\/svg>\\n <\\\/button>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n\\n \\n <\/p>\n<div class=\"\\\"video-info\\\"\">\\n <\/p>\n<h3 class=\"\\\"video-title\\\"\">\u092b\u0941\u091f\u092c\u0949\u0932 \u0915\u0947 \u092e\u093e\u0927\u094d\u092f\u092e \u0938\u0947 11 \u0930\u093e\u0937\u094d\u091f\u094d\u0930 \u090f\u0915\u091c\u0941\u091f<\\\/h3>\\n <\/p>\n<div class=\"\\\"member-countries\\\"\" role=\"\\\"list\\\"\" aria-label=\"\\\"BIFA+\" member countries\\\">\\n <span class=\"\\\"country-tag\\\"\" role=\"\\\"listitem\\\"\">\\ud83c\\udde7\\ud83c\\uddf7 Brazil<\\\/span>\\n <span class=\"\\\"country-tag\\\"\" role=\"\\\"listitem\\\"\">\\ud83c\\udde6\\ud83c\\uddea UAE<\\\/span>\\n <span class=\"\\\"country-tag\\\"\" role=\"\\\"listitem\\\"\">\\ud83c\\uddf7\\ud83c\\uddfa Russia<\\\/span>\\n <span class=\"\\\"country-tag\\\"\" role=\"\\\"listitem\\\"\">\\ud83c\\udde8\\ud83c\\uddf3 China<\\\/span>\\n <span class=\"\\\"country-tag\\\"\" role=\"\\\"listitem\\\"\">\\ud83c\\uddee\\ud83c\\uddf3 India<\\\/span>\\n <span class=\"\\\"country-tag\\\"\" role=\"\\\"listitem\\\"\">\\ud83c\\uddff\\ud83c\\udde6 South Africa<\\\/span>\\n <span class=\"\\\"country-tag\\\"\" role=\"\\\"listitem\\\"\">\\ud83c\\uddf8\\ud83c\\udde6 Saudi Arabia<\\\/span>\\n <span class=\"\\\"country-tag\\\"\" role=\"\\\"listitem\\\"\">\\ud83c\\uddea\\ud83c\\uddec Egypt<\\\/span>\\n <span class=\"\\\"country-tag\\\"\" role=\"\\\"listitem\\\"\">\\ud83c\\uddee\\ud83c\\uddf7 Iran<\\\/span>\\n <span class=\"\\\"country-tag\\\"\" role=\"\\\"listitem\\\"\">\\ud83c\\uddea\\ud83c\\uddf9 Ethiopia<\\\/span>\\n <span class=\"\\\"country-tag\\\"\" role=\"\\\"listitem\\\"\">\\ud83c\\uddee\\ud83c\\udde9 Indonesia<\\\/span>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n\\n\\n <\\\/section>\\n<\\\/div>\\n\\n<script>\\n\\\/\\\/ Global functions for iframe handling\\nfunction handleIframeLoad() {\\n console.log('Loading screen iframe loaded successfully');\\n}\\n\\nfunction handleIframeError() {\\n console.log('Loading screen iframe failed, showing fallback');\\n const iframe = document.getElementById('loadingIframe');\\n const fallback = document.getElementById('fallbackLoader');\\n if (iframe) iframe.style.display = 'none';\\n if (fallback) fallback.classList.add('active');\\n}\\n\\ndocument.addEventListener('DOMContentLoaded', () => {\\n const video = document.getElementById('heroVideo');\\n const playBtn = document.getElementById('playPause');\\n const muteBtn = document.getElementById('muteToggle');\\n const progress = document.getElementById('progress');\\n const progressBar = document.getElementById('progressBar');\\n const timeDisplay = document.getElementById('timeDisplay');\\n const volumeSlider = document.getElementById('volumeSlider');\\n const volumeBar = document.getElementById('volumeBar');\\n const fullscreenBtn = document.getElementById('fullscreenBtn');\\n const loadingOverlay = document.getElementById('videoLoadingOverlay');\\n\\n \\\/\\\/ Check if elements exist before proceeding\\n if (!video || !playBtn || !muteBtn) {\\n console.warn('Video elements not found');\\n return;\\n }\\n\\n \\\/\\\/ Loading screen management\\n let videoReady = false;\\n\\n \\\/\\\/ Check if video is ready to play\\n const checkVideoReady = () => {\\n if (video.readyState >= 3) { \\\/\\\/ HAVE_FUTURE_DATA or greater\\n videoReady = true;\\n hideLoadingScreen();\\n }\\n };\\n\\n \\\/\\\/ Hide loading screen with smooth animation\\n const hideLoadingScreen = () => {\\n if (videoReady && loadingOverlay) {\\n setTimeout(() => {\\n loadingOverlay.classList.add('hidden');\\n \\\/\\\/ Remove overlay completely after animation\\n setTimeout(() => {\\n if (loadingOverlay.parentNode) {\\n loadingOverlay.style.display = 'none';\\n }\\n }, 800);\\n }, 1500); \\\/\\\/ Show loading for minimum 1.5 seconds\\n }\\n };\\n\\n \\\/\\\/ Video event listeners for loading\\n video.addEventListener('loadeddata', checkVideoReady);\\n video.addEventListener('canplay', checkVideoReady);\\n video.addEventListener('canplaythrough', () => {\\n videoReady = true;\\n hideLoadingScreen();\\n });\\n\\n \\\/\\\/ Fallback: hide loading screen after maximum time\\n setTimeout(() => {\\n if (loadingOverlay && !loadingOverlay.classList.contains('hidden')) {\\n console.log('Hiding loading screen after timeout');\\n hideLoadingScreen();\\n }\\n }, 8000); \\\/\\\/ Maximum 8 seconds\\n\\n \\\/\\\/ Play\\\/Pause Icons\\n const setPlayIcon = (paused) => {\\n if (playBtn) {\\n playBtn.innerHTML = paused\\n ? '<svg viewBox=\\\"0 0 24 24\\\" aria-hidden=\\\"true\\\"><path d=\\\"M8 5v14l11-7z\\\"\\\/><\\\/svg>'\\n : '<svg viewBox=\\\"0 0 24 24\\\" aria-hidden=\\\"true\\\"><path d=\\\"M6 19h4V5H6zm8 0h4V5h-4z\\\"\\\/><\\\/svg>';\\n playBtn.setAttribute('aria-label', paused ? 'Play video' : 'Pause video');\\n }\\n };\\n\\n \\\/\\\/ Mute\\\/Unmute Icons\\n const setMuteIcon = (muted) => {\\n if (muteBtn) {\\n muteBtn.innerHTML = muted\\n ? '<svg viewBox=\\\"0 0 24 24\\\" aria-hidden=\\\"true\\\"><path d=\\\"M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z\\\"\\\/><\\\/svg>'\\n : '<svg viewBox=\\\"0 0 24 24\\\" aria-hidden=\\\"true\\\"><path d=\\\"M4 9v6h4l5 5V4L8 9H4z\\\"\\\/><\\\/svg>';\\n muteBtn.setAttribute('aria-label', muted ? 'Unmute video' : 'Mute video');\\n }\\n };\\n\\n \\\/\\\/ Format time\\n const formatTime = (seconds) => {\\n const mins = Math.floor(seconds \\\/ 60);\\n const secs = Math.floor(seconds % 60);\\n return `${mins}:${secs.toString().padStart(2, '0')}`;\\n };\\n\\n \\\/\\\/ Play\\\/Pause functionality\\n if (playBtn) {\\n playBtn.addEventListener('click', () => {\\n if (video.paused) {\\n video.play().catch(e => console.log('Video play failed:', e));\\n } else {\\n video.pause();\\n }\\n setPlayIcon(video.paused);\\n });\\n }\\n\\n \\\/\\\/ Mute\\\/Unmute functionality\\n if (muteBtn) {\\n muteBtn.addEventListener('click', () => {\\n video.muted = !video.muted;\\n setMuteIcon(video.muted);\\n if (volumeBar) {\\n volumeBar.style.width = video.muted ? '0%' : (video.volume * 100) + '%';\\n }\\n });\\n }\\n\\n \\\/\\\/ Progress bar update\\n video.addEventListener('timeupdate', () => {\\n if (video.duration) {\\n const progressPercent = (video.currentTime \\\/ video.duration) * 100;\\n if (progressBar) progressBar.style.width = progressPercent + '%';\\n if (timeDisplay) timeDisplay.textContent = formatTime(video.currentTime);\\n }\\n });\\n\\n \\\/\\\/ Progress bar click\\n if (progress) {\\n progress.addEventListener('click', (e) => {\\n const rect = progress.getBoundingClientRect();\\n const clickX = e.clientX - rect.left;\\n const clickPercent = clickX \\\/ rect.width;\\n if (video.duration) {\\n video.currentTime = clickPercent * video.duration;\\n }\\n });\\n }\\n\\n \\\/\\\/ Volume control\\n if (volumeSlider) {\\n volumeSlider.addEventListener('click', (e) => {\\n const rect = volumeSlider.getBoundingClientRect();\\n const clickX = e.clientX - rect.left;\\n const volume = Math.max(0, Math.min(1, clickX \\\/ rect.width));\\n video.volume = volume;\\n if (volumeBar) volumeBar.style.width = (video.volume * 100) + '%';\\n \\n if (video.volume === 0) {\\n video.muted = true;\\n } else {\\n video.muted = false;\\n }\\n setMuteIcon(video.muted);\\n });\\n }\\n\\n \\\/\\\/ Fullscreen functionality\\n if (fullscreenBtn) {\\n fullscreenBtn.addEventListener('click', () => {\\n if (!document.fullscreenElement) {\\n video.parentElement.requestFullscreen().catch(e => console.log('Fullscreen failed:', e));\\n } else {\\n document.exitFullscreen();\\n }\\n });\\n }\\n\\n \\\/\\\/ Initialize icons\\n setPlayIcon(video.paused);\\n setMuteIcon(video.muted);\\n if (volumeBar) volumeBar.style.width = (video.volume * 100) + '%';\\n\\n \\\/\\\/ Create optimized floating particles\\n const particlesContainer = document.querySelector('.bg-particles');\\n if (particlesContainer) {\\n const particleCount = window.innerWidth < 768 ? 8 : 12; \\\/\\\/ Fewer particles on mobile\\n\\n for (let i = 0; i < particleCount; i++) {\\n const particle = document.createElement('div');\\n particle.className = 'particle';\\n particle.style.left = Math.random() * 100 + '%';\\n particle.style.animationDelay = Math.random() * 18 + 's';\\n particle.style.animationDuration = (15 + Math.random() * 6) + 's';\\n \\n const size = 3 + Math.random() * 3;\\n particle.style.width = size + 'px';\\n particle.style.height = size + 'px';\\n \\n particlesContainer.appendChild(particle);\\n }\\n }\\n\\n\\n\\n \\\/\\\/ Keyboard navigation support\\n document.addEventListener('keydown', (e) => {\\n if (e.target.closest('.video-wrapper')) {\\n switch(e.code) {\\n case 'Space':\\n e.preventDefault();\\n if (playBtn) playBtn.click();\\n break;\\n case 'KeyM':\\n e.preventDefault();\\n if (muteBtn) muteBtn.click();\\n break;\\n case 'KeyF':\\n e.preventDefault();\\n if (fullscreenBtn) fullscreenBtn.click();\\n break;\\n }\\n }\\n });\\n\\n \\\/\\\/ Performance optimization: Pause animations when tab is not visible\\n document.addEventListener('visibilitychange', () => {\\n const particles = document.querySelectorAll('.particle');\\n particles.forEach(particle => {\\n if (document.hidden) {\\n particle.style.animationPlayState = 'paused';\\n } else {\\n particle.style.animationPlayState = 'running';\\n }\\n });\\n });\\n});\\n<\\\/script>\\n<\\\/body>\\n<\\\/html>\"}},{\"type\":\"html\",\"props\":{\"content\":\"<!DOCTYPE html>\\n<html lang=\\\"en\\\">\\n<head>\\n<meta charset=\\\"UTF-8\\\">\\n<meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\">\\n<title>BIFA+ Mission<\\\/title>\\n<link rel=\\\"preconnect\\\" href=\\\"https:\\\/\\\/fonts.googleapis.com\\\">\\n<link rel=\\\"preconnect\\\" href=\\\"https:\\\/\\\/fonts.gstatic.com\\\" crossorigin>\\n<link href=\\\"https:\\\/\\\/fonts.googleapis.com\\\/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800;900&display=swap\\\" rel=\\\"stylesheet\\\">\\n\\n<\/p>\n<style>\\n\\\/* ========= MISSION SECTION WRAPPER - ISOLATED ========= *\\\/\\n.mission-section-wrapper {\\n \\\/* Isolated CSS Variables - only for this section *\\\/\\n --bifa-deep-navy: #0A1F44;\\n --bifa-heritage-gold: #D4AF37;\\n --bifa-civic-green: #1D6143;\\n --bifa-bright-white: #FFFFFF;\\n --bifa-soft-black: #1A1A1A;\\n \\n \\\/* Additional colors for better readability *\\\/\\n --bifa-gray-light: #F8F9FA;\\n --bifa-gray-medium: #E9ECEF;\\n --bifa-gray: #6C757D;\\n --bifa-gray-dark: #495057;\\n \\n \\\/* Official BIFA+ Fonts *\\\/\\n --bifa-font-heading: 'Montserrat', sans-serif;\\n --bifa-font-body: 'Poppins', sans-serif;\\n \\n \\\/* Premium shadows and effects *\\\/\\n --bifa-shadow-sm: 0 2px 8px rgba(10, 31, 68, 0.08);\\n --bifa-shadow-md: 0 8px 24px rgba(10, 31, 68, 0.12);\\n --bifa-shadow-lg: 0 16px 48px rgba(10, 31, 68, 0.16);\\n --bifa-shadow-xl: 0 25px 80px rgba(10, 31, 68, 0.15);\\n --bifa-shadow-gold: 0 15px 40px rgba(212, 175, 55, 0.3);\\n --bifa-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\\n \\n width: 100vw;\\n position: relative;\\n left: 50%;\\n margin-left: -50vw;\\n background: radial-gradient(ellipse 120% 80% at center top, \\n rgba(255, 255, 255, 1) 0%,\\n rgba(248, 249, 250, 0.95) 20%,\\n rgba(248, 249, 250, 0.8) 40%,\\n rgba(248, 249, 250, 0.5) 60%,\\n rgba(248, 249, 250, 0.2) 80%,\\n transparent 100%\\n );\\n overflow: hidden;\\n}\\n\\n\\\/* Header connection line - seamless transition *\\\/\\n.mission-section-wrapper::before {\\n content: '';\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 1px;\\n background: linear-gradient(90deg, \\n transparent 0%, \\n rgba(212, 175, 55, 0.3) 25%, \\n rgba(212, 175, 55, 0.6) 50%, \\n rgba(212, 175, 55, 0.3) 75%,\\n transparent 100%\\n );\\n z-index: 100;\\n}\\n\\n\\\/* ========= RESET - ONLY FOR THIS SECTION ========= *\\\/\\n.mission-section-wrapper * {\\n margin: 0;\\n padding: 0;\\n box-sizing: border-box;\\n -webkit-font-smoothing: antialiased;\\n -moz-osx-font-smoothing: grayscale;\\n}\\n\\n.mission-section-wrapper {\\n font-family: var(--bifa-font-body);\\n color: var(--bifa-soft-black);\\n line-height: 1.6;\\n}\\n\\n\\\/* ========= MISSION SECTION ========= *\\\/\\n.mission-section-wrapper .mission-section {\\n padding: 100px 0;\\n background: transparent;\\n position: relative;\\n z-index: 10;\\n}\\n\\n.mission-section-wrapper .mission-container {\\n max-width: 1400px;\\n margin: 0 auto;\\n padding: 0 60px;\\n}\\n\\n.mission-section-wrapper .section-header {\\n text-align: center;\\n margin-bottom: 80px;\\n animation: missionFadeIn 1.2s ease-out;\\n}\\n\\n@keyframes missionFadeIn {\\n from {\\n opacity: 0;\\n transform: translateY(30px);\\n }\\n to {\\n opacity: 1;\\n transform: translateY(0);\\n }\\n}\\n\\n.mission-section-wrapper .section-title {\\n font-family: var(--bifa-font-heading);\\n font-size: clamp(2.5rem, 4vw, 3.5rem);\\n font-weight: 900;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n margin-bottom: 20px;\\n letter-spacing: -0.02em;\\n}\\n\\n.mission-section-wrapper .section-subtitle {\\n font-family: var(--bifa-font-body);\\n font-size: clamp(1rem, 1.5vw, 1.2rem);\\n color: var(--bifa-soft-black);\\n max-width: 800px;\\n margin: 0 auto;\\n line-height: 1.8;\\n font-weight: 400;\\n}\\n\\n\\\/* Mission Cards *\\\/\\n.mission-section-wrapper .mission-grid {\\n display: grid;\\n grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\\n gap: 40px;\\n margin-bottom: 80px;\\n}\\n\\n.mission-section-wrapper .mission-card {\\n background: var(--bifa-bright-white);\\n padding: 40px;\\n border-radius: 20px;\\n box-shadow: var(--bifa-shadow-sm);\\n border: 1px solid rgba(212, 175, 55, 0.1);\\n transition: var(--bifa-transition);\\n position: relative;\\n overflow: hidden;\\n}\\n\\n.mission-section-wrapper .mission-card::before {\\n content: '';\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 4px;\\n background: linear-gradient(90deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\\n transform: translateX(-100%);\\n transition: transform 0.6s ease;\\n}\\n\\n.mission-section-wrapper .mission-card:hover::before {\\n transform: translateX(0);\\n}\\n\\n.mission-section-wrapper .mission-card:hover {\\n transform: translateY(-10px);\\n box-shadow: var(--bifa-shadow-gold);\\n}\\n\\n.mission-section-wrapper .mission-icon {\\n width: 70px;\\n height: 70px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold) 0%, var(--bifa-heritage-gold) 100%);\\n border-radius: 20px;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n margin-bottom: 25px;\\n font-size: 35px;\\n box-shadow: var(--bifa-shadow-gold);\\n transition: var(--bifa-transition);\\n}\\n\\n.mission-section-wrapper .mission-icon.has-svg {\\n background: transparent;\\n box-shadow: none;\\n}\\n\\n.mission-section-wrapper .mission-icon img {\\n width: 70px;\\n height: 70px;\\n transition: var(--bifa-transition);\\n}\\n\\n.mission-section-wrapper .mission-card:hover .mission-icon {\\n transform: scale(1.1) rotate(5deg);\\n}\\n\\n.mission-section-wrapper .mission-card:hover .mission-icon.has-svg {\\n transform: scale(1.15);\\n}\\n\\n.mission-section-wrapper .mission-card:hover .mission-icon img {\\n transform: scale(1.1);\\n}\\n\\n.mission-section-wrapper .mission-card-title {\\n font-family: var(--bifa-font-heading);\\n font-size: 1.5rem;\\n font-weight: 800;\\n color: var(--bifa-deep-navy);\\n margin-bottom: 15px;\\n}\\n\\n.mission-section-wrapper .mission-card-text {\\n font-family: var(--bifa-font-body);\\n font-size: 1rem;\\n line-height: 1.7;\\n color: var(--bifa-soft-black);\\n font-weight: 400;\\n}\\n\\n\\\/* Vision Box *\\\/\\n.mission-section-wrapper .vision-box {\\n background: linear-gradient(135deg, rgba(212, 175, 55, 0.08) 0%, rgba(212, 175, 55, 0.05) 100%);\\n padding: 80px 60px;\\n border-radius: 25px;\\n text-align: center;\\n position: relative;\\n overflow: hidden;\\n margin-bottom: 80px;\\n border: 2px solid rgba(212, 175, 55, 0.2);\\n box-shadow: var(--bifa-shadow-lg);\\n}\\n\\n.mission-section-wrapper .vision-box::before {\\n content: '';\\n position: absolute;\\n top: -50%;\\n right: -50%;\\n width: 200%;\\n height: 200%;\\n background: radial-gradient(circle, rgba(212, 175, 55, 0.05) 0%, transparent 70%);\\n animation: missionRotate 30s linear infinite;\\n}\\n\\n.mission-section-wrapper .vision-box::after {\\n content: '';\\n position: absolute;\\n bottom: -50%;\\n left: -50%;\\n width: 200%;\\n height: 200%;\\n background: radial-gradient(circle, rgba(212, 175, 55, 0.05) 0%, transparent 70%);\\n animation: missionRotateReverse 25s linear infinite;\\n}\\n\\n@keyframes missionRotate {\\n from { transform: rotate(0deg); }\\n to { transform: rotate(360deg); }\\n}\\n\\n@keyframes missionRotateReverse {\\n from { transform: rotate(360deg); }\\n to { transform: rotate(0deg); }\\n}\\n\\n.mission-section-wrapper .vision-title {\\n font-family: var(--bifa-font-heading);\\n font-size: 3rem;\\n font-weight: 900;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n margin-bottom: 30px;\\n position: relative;\\n z-index: 1;\\n}\\n\\n.mission-section-wrapper .vision-text {\\n font-family: var(--bifa-font-body);\\n font-size: 1.3rem;\\n line-height: 1.9;\\n max-width: 900px;\\n margin: 0 auto;\\n position: relative;\\n z-index: 1;\\n color: var(--bifa-soft-black);\\n font-weight: 400;\\n}\\n\\n\\\/* Floating particles for consistency *\\\/\\n.mission-section-wrapper .bg-particles {\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n overflow: hidden;\\n z-index: 1;\\n pointer-events: none;\\n}\\n\\n.mission-section-wrapper .particle {\\n position: absolute;\\n width: 4px;\\n height: 4px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\\n border-radius: 50%;\\n animation: missionFloat 20s infinite linear;\\n box-shadow: 0 0 12px rgba(212, 175, 55, 0.3);\\n opacity: 0.3;\\n}\\n\\n@keyframes missionFloat {\\n 0% {\\n transform: translateY(100vh) translateX(0);\\n opacity: 0;\\n }\\n 15% { opacity: 0.3; }\\n 85% { opacity: 0.3; }\\n 100% {\\n transform: translateY(-100vh) translateX(30px);\\n opacity: 0;\\n }\\n}\\n\\n\\\/* Fallback for browsers without background-clip support *\\\/\\n@supports not (background-clip: text) {\\n .mission-section-wrapper .section-title,\\n .mission-section-wrapper .vision-title {\\n color: var(--bifa-heritage-gold) !important;\\n background: none !important;\\n }\\n}\\n\\n\\\/* ========= RESPONSIVE ========= *\\\/\\n@media (max-width: 1200px) {\\n .mission-section-wrapper .mission-container {\\n padding: 0 40px;\\n }\\n}\\n\\n@media (max-width: 768px) {\\n .mission-section-wrapper .mission-container {\\n padding: 0 20px;\\n }\\n \\n .mission-section-wrapper .mission-grid {\\n grid-template-columns: 1fr;\\n }\\n \\n .mission-section-wrapper .vision-box {\\n padding: 40px 20px;\\n }\\n \\n .mission-section-wrapper .vision-title {\\n font-size: 2rem;\\n }\\n \\n .mission-section-wrapper .vision-text {\\n font-size: 1.1rem;\\n }\\n \\n .mission-section-wrapper .mission-section {\\n padding: 60px 0;\\n }\\n}\\n\\n@media (max-width: 480px) {\\n .mission-section-wrapper .section-title {\\n font-size: 2rem;\\n }\\n \\n .mission-section-wrapper .mission-card {\\n padding: 30px 20px;\\n }\\n \\n .mission-section-wrapper .mission-grid {\\n grid-template-columns: 1fr;\\n gap: 30px;\\n }\\n}\\n<\\\/style>\\n<\\\/head>\\n<body>\\n\\n<\/p>\n<div class=\\\"mission-section-wrapper\\\" id=\\\"vision\\\">\\n \\n <\/p>\n<div class=\\\"bg-particles\\\"><\\\/div>\\n\\n \\n <\/p>\n<section id=\\\"our-mission\\\" class=\\\"mission-section\\\">\\n <\/p>\n<div class=\\\"mission-container\\\">\\n <\/p>\n<div class=\\\"section-header\\\">\\n <\/p>\n<h2 class=\\\"section-title\\\">Our Mission<\\\/h2>\\n <\/p>\n<p class=\\\"section-subtitle\\\">\\n Building bridges between nations through the universal language of football, \\n creating opportunities for youth, and fostering cultural understanding across the Global South.\\n <\\\/p>\\n <\\\/div>\\n\\n <\/p>\n<div class=\\\"mission-grid\\\">\\n <\/p>\n<div class=\\\"mission-card\\\">\\n <\/p>\n<div class=\\\"mission-icon\\\">\\ud83c\\udf0d<\\\/div>\\n <\/p>\n<h3 class=\\\"mission-card-title\\\">Global Cooperation<\\\/h3>\\n <\/p>\n<p class=\\\"mission-card-text\\\">\\n Promote international sports and cultural cooperation among Global South nations \\n through tournaments, events, and strategic partnerships that transcend borders.\\n <\\\/p>\\n <\\\/div>\\n\\n <\/p>\n<div class=\\\"mission-card\\\">\\n <\/p>\n<div class=\\\"mission-icon\\\">\\u26bd<\\\/div>\\n <\/p>\n<h3 class=\\\"mission-card-title\\\">Youth Empowerment<\\\/h3>\\n <\/p>\n<p class=\\\"mission-card-text\\\">\\n Engage youth, students, and communities via football programs for universities, \\n schools, academies, and grassroots platforms to develop future leaders.\\n <\\\/p>\\n <\\\/div>\\n\\n <\/p>\n<div class=\\\"mission-card\\\">\\n <\/p>\n<div class=\\\"mission-icon\\\">\\ud83d\\udca1<\\\/div>\\n <\/p>\n<h3 class=\\\"mission-card-title\\\">Digital Innovation<\\\/h3>\\n <\/p>\n<p class=\\\"mission-card-text\\\">\\n Develop digital and physical initiatives in AI-powered sports tech, smart health, \\n and sports commerce to revolutionize how football is played and experienced.\\n <\\\/p>\\n <\\\/div>\\n\\n <\/p>\n<div class=\\\"mission-card\\\">\\n <\/p>\n<div class=\\\"mission-icon\\\">\\ud83c\\udf1f<\\\/div>\\n <\/p>\n<h3 class=\\\"mission-card-title\\\">Diversity & Inclusion<\\\/h3>\\n <\/p>\n<p class=\\\"mission-card-text\\\">\\n Champion diversity through beach football, community leagues, university tournaments, \\n and regional academies that welcome players from all backgrounds.\\n <\\\/p>\\n <\\\/div>\\n\\n <\/p>\n<div class=\\\"mission-card\\\">\\n <\/p>\n<div class=\\\"mission-icon has-svg\\\">\\n <img src=\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Girl_fas.svg\\\" alt=\\\"Women's Empowerment\\\">\\n <\\\/div>\\n <\/p>\n<h3 class=\\\"mission-card-title\\\">Women's Empowerment<\\\/h3>\\n <\/p>\n<p class=\\\"mission-card-text\\\">\\n Empower women in sports through the dedicated BIFA+ Women program for female \\n players and leadership roles, creating equal opportunities in football.\\n <\\\/p>\\n <\\\/div>\\n\\n <\/p>\n<div class=\\\"mission-card\\\">\\n <\/p>\n<div class=\\\"mission-icon\\\">\\ud83c\\udfd9\\ufe0f<\\\/div>\\n <\/p>\n<h3 class=\\\"mission-card-title\\\">Cities Network<\\\/h3>\\n <\/p>\n<p class=\\\"mission-card-text\\\">\\n Establish the BIFA+ Cities Network, linking dynamic cities worldwide as hubs \\n for cooperation, activation, and international mixed-nationality teams.\\n <\\\/p>\\n <\\\/div>\\n <\\\/div>\\n\\n \\n <\/p>\n<div class=\\\"vision-box\\\">\\n <\/p>\n<h2 class=\\\"vision-title\\\">Our Vision<\\\/h2>\\n <\/p>\n<p class=\\\"vision-text\\\">\\n To become the leading global platform for youth-driven sports and cultural cooperation \\n across the Global South, offering a new model of international partnership based on \\n peace, opportunity, and shared values. We envision a world united through sport \\u2013 \\n where football becomes a symbol of peace, cooperation, and cultural exchange.\\n <\\\/p>\\n <\\\/div>\\n <\\\/div>\\n <\\\/section>\\n<\\\/div>\\n\\n<script>\\ndocument.addEventListener('DOMContentLoaded', () => {\\n \\\/\\\/ Create floating particles\\n const particlesContainer = document.querySelector('.mission-section-wrapper .bg-particles');\\n const particleCount = 8;\\n\\n for (let i = 0; i < particleCount; i++) {\\n const particle = document.createElement('div');\\n particle.className = 'particle';\\n particle.style.left = Math.random() * 100 + '%';\\n particle.style.animationDelay = Math.random() * 20 + 's';\\n particle.style.animationDuration = (18 + Math.random() * 6) + 's';\\n \\n const size = 3 + Math.random() * 2;\\n particle.style.width = size + 'px';\\n particle.style.height = size + 'px';\\n \\n particlesContainer.appendChild(particle);\\n }\\n\\n \\\/\\\/ Animate elements on scroll\\n const observerOptions = {\\n threshold: 0.1,\\n rootMargin: '0px 0px -100px 0px'\\n };\\n\\n const observer = new IntersectionObserver((entries) => {\\n entries.forEach(entry => {\\n if (entry.isIntersecting) {\\n entry.target.style.opacity = '1';\\n entry.target.style.transform = 'translateY(0)';\\n }\\n });\\n }, observerOptions);\\n\\n \\\/\\\/ Observe mission cards\\n const animatedElements = document.querySelectorAll('.mission-section-wrapper .mission-card');\\n animatedElements.forEach(el => {\\n el.style.opacity = '0';\\n el.style.transform = 'translateY(30px)';\\n el.style.transition = 'all 0.6s ease';\\n observer.observe(el);\\n });\\n});\\n<\\\/script>\\n<\\\/body>\\n<\\\/html>\"}},{\"type\":\"html\",\"props\":{\"content\":\"<!DOCTYPE html>\\n<html lang=\\\"en\\\">\\n<head>\\n<meta charset=\\\"UTF-8\\\">\\n<meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\">\\n<title>BIFA+ Initiatives<\\\/title>\\n<link rel=\\\"preconnect\\\" href=\\\"https:\\\/\\\/fonts.googleapis.com\\\">\\n<link rel=\\\"preconnect\\\" href=\\\"https:\\\/\\\/fonts.gstatic.com\\\" crossorigin>\\n<link href=\\\"https:\\\/\\\/fonts.googleapis.com\\\/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800;900&display=swap\\\" rel=\\\"stylesheet\\\">\\n\\n<\/p>\n<style>\\n\\\/* ========= INITIATIVES SECTION WRAPPER - ISOLATED ========= *\\\/\\n.initiatives-section-wrapper {\\n \\\/* Isolated CSS Variables - only for this section *\\\/\\n --bifa-deep-navy: #0A1F44;\\n --bifa-heritage-gold: #D4AF37;\\n --bifa-civic-green: #1D6143;\\n --bifa-bright-white: #FFFFFF;\\n --bifa-soft-black: #1A1A1A;\\n \\n \\\/* Additional colors for better readability *\\\/\\n --bifa-gray-light: #F8F9FA;\\n --bifa-gray-medium: #E9ECEF;\\n --bifa-gray: #6C757D;\\n --bifa-gray-dark: #495057;\\n \\n \\\/* Official BIFA+ Fonts *\\\/\\n --bifa-font-heading: 'Montserrat', sans-serif;\\n --bifa-font-body: 'Poppins', sans-serif;\\n \\n \\\/* Premium shadows and effects *\\\/\\n --bifa-shadow-sm: 0 2px 8px rgba(10, 31, 68, 0.08);\\n --bifa-shadow-md: 0 8px 24px rgba(10, 31, 68, 0.12);\\n --bifa-shadow-lg: 0 16px 48px rgba(10, 31, 68, 0.16);\\n --bifa-shadow-xl: 0 25px 80px rgba(10, 31, 68, 0.15);\\n --bifa-shadow-gold: 0 15px 40px rgba(212, 175, 55, 0.3);\\n --bifa-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\\n \\n width: 100vw;\\n position: relative;\\n left: 50%;\\n margin-left: -50vw;\\n overflow: hidden;\\n}\\n\\n\\\/* Header connection line - seamless transition *\\\/\\n.initiatives-section-wrapper::before {\\n content: '';\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 1px;\\n background: linear-gradient(90deg, \\n transparent 0%, \\n rgba(212, 175, 55, 0.3) 25%, \\n rgba(212, 175, 55, 0.6) 50%, \\n rgba(212, 175, 55, 0.3) 75%,\\n transparent 100%\\n );\\n z-index: 100;\\n}\\n\\n\\\/* ========= RESET - ONLY FOR THIS SECTION ========= *\\\/\\n.initiatives-section-wrapper * {\\n margin: 0;\\n padding: 0;\\n box-sizing: border-box;\\n -webkit-font-smoothing: antialiased;\\n -moz-osx-font-smoothing: grayscale;\\n}\\n\\n.initiatives-section-wrapper {\\n font-family: var(--bifa-font-body);\\n color: var(--bifa-soft-black);\\n line-height: 1.6;\\n}\\n\\n\\\/* Section header animation *\\\/\\n@keyframes missionFadeIn {\\n from {\\n opacity: 0;\\n transform: translateY(30px);\\n }\\n to {\\n opacity: 1;\\n transform: translateY(0);\\n }\\n}\\n\\n.initiatives-section-wrapper .section-header {\\n text-align: center;\\n margin-bottom: 80px;\\n animation: missionFadeIn 1.2s ease-out;\\n}\\n\\n.initiatives-section-wrapper .section-title {\\n font-family: var(--bifa-font-heading);\\n font-size: clamp(2.5rem, 4vw, 3.5rem);\\n font-weight: 900;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n margin-bottom: 20px;\\n letter-spacing: -0.02em;\\n}\\n\\n.initiatives-section-wrapper .section-subtitle {\\n font-family: var(--bifa-font-body);\\n font-size: clamp(1rem, 1.5vw, 1.2rem);\\n color: var(--bifa-soft-black);\\n max-width: 800px;\\n margin: 0 auto;\\n line-height: 1.8;\\n font-weight: 400;\\n}\\n\\n\\\/* Initiatives Section *\\\/\\n.initiatives-section-wrapper .initiatives-section {\\n padding: 100px 0;\\n background: radial-gradient(ellipse 100% 60% at center, \\n rgba(248, 249, 250, 0.8) 0%,\\n rgba(248, 249, 250, 0.4) 50%,\\n transparent 100%\\n );\\n position: relative;\\n z-index: 10;\\n}\\n\\n.initiatives-section-wrapper .initiatives-grid {\\n display: grid;\\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\\n gap: 30px;\\n max-width: 1400px;\\n margin: 0 auto;\\n padding: 0 60px;\\n}\\n\\n.initiatives-section-wrapper .initiative-item {\\n background: linear-gradient(135deg, var(--bifa-bright-white) 0%, #fafbfc 100%);\\n padding: 35px 25px;\\n border-radius: 20px;\\n text-align: center;\\n box-shadow: var(--bifa-shadow-sm);\\n transition: var(--bifa-transition);\\n cursor: pointer;\\n border: 2px solid transparent;\\n}\\n\\n.initiatives-section-wrapper .initiative-item:hover {\\n transform: translateY(-8px);\\n box-shadow: var(--bifa-shadow-gold);\\n border-color: rgba(212, 175, 55, 0.2);\\n}\\n\\n.initiatives-section-wrapper .initiative-icon {\\n width: 60px;\\n height: 60px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\\n border-radius: 50%;\\n margin: 0 auto 20px;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n font-size: 28px;\\n color: var(--bifa-bright-white);\\n box-shadow: var(--bifa-shadow-gold);\\n transition: var(--bifa-transition);\\n}\\n\\n.initiatives-section-wrapper .initiative-icon.has-svg {\\n background: transparent;\\n box-shadow: none;\\n border-radius: 0;\\n}\\n\\n.initiatives-section-wrapper .initiative-icon img {\\n width: 60px;\\n height: 60px;\\n transition: var(--bifa-transition);\\n}\\n\\n.initiatives-section-wrapper .initiative-item:hover .initiative-icon {\\n transform: scale(1.15) rotate(10deg);\\n}\\n\\n.initiatives-section-wrapper .initiative-item:hover .initiative-icon.has-svg {\\n transform: scale(1.2);\\n}\\n\\n.initiatives-section-wrapper .initiative-item:hover .initiative-icon img {\\n transform: scale(1.1);\\n}\\n\\n.initiatives-section-wrapper .initiative-title {\\n font-family: var(--bifa-font-heading);\\n font-size: 1.1rem;\\n font-weight: 700;\\n color: var(--bifa-deep-navy);\\n margin-bottom: 10px;\\n}\\n\\n.initiatives-section-wrapper .initiative-desc {\\n font-family: var(--bifa-font-body);\\n font-size: 0.9rem;\\n color: var(--bifa-soft-black);\\n line-height: 1.6;\\n font-weight: 400;\\n}\\n\\n\\\/* Floating particles for consistency *\\\/\\n.initiatives-section-wrapper .bg-particles {\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n overflow: hidden;\\n z-index: 1;\\n pointer-events: none;\\n}\\n\\n.initiatives-section-wrapper .particle {\\n position: absolute;\\n width: 4px;\\n height: 4px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\\n border-radius: 50%;\\n animation: missionFloat 20s infinite linear;\\n box-shadow: 0 0 12px rgba(212, 175, 55, 0.3);\\n opacity: 0.3;\\n}\\n\\n@keyframes missionFloat {\\n 0% {\\n transform: translateY(100vh) translateX(0);\\n opacity: 0;\\n }\\n 15% { opacity: 0.3; }\\n 85% { opacity: 0.3; }\\n 100% {\\n transform: translateY(-100vh) translateX(30px);\\n opacity: 0;\\n }\\n}\\n\\n\\\/* Fallback for browsers without background-clip support *\\\/\\n@supports not (background-clip: text) {\\n .initiatives-section-wrapper .section-title {\\n color: var(--bifa-heritage-gold) !important;\\n background: none !important;\\n }\\n}\\n\\n\\\/* ========= RESPONSIVE ========= *\\\/\\n@media (max-width: 1200px) {\\n .initiatives-section-wrapper .initiatives-grid {\\n padding: 0 40px;\\n }\\n}\\n\\n@media (max-width: 768px) {\\n .initiatives-section-wrapper .initiatives-grid {\\n padding: 0 20px;\\n }\\n \\n .initiatives-section-wrapper .initiatives-section {\\n padding: 60px 0;\\n }\\n}\\n\\n@media (max-width: 480px) {\\n .initiatives-section-wrapper .initiatives-grid {\\n grid-template-columns: 1fr;\\n }\\n \\n .initiatives-section-wrapper .section-title {\\n font-size: 2rem;\\n }\\n}\\n<\\\/style>\\n<\\\/head>\\n<body>\\n\\n<\/p>\n<div class=\\\"initiatives-section-wrapper\\\">\\n \\n <\/p>\n<div class=\\\"bg-particles\\\"><\\\/div>\\n\\n \\n <\/p>\n<section class=\\\"initiatives-section\\\">\\n <\/p>\n<div class=\\\"section-header\\\">\\n <\/p>\n<h2 class=\\\"section-title\\\">Key Initiatives<\\\/h2>\\n <\/p>\n<p class=\\\"section-subtitle\\\">\\n Comprehensive programs designed to unite nations and empower communities through football\\n <\\\/p>\\n <\\\/div>\\n\\n <\/p>\n<div class=\\\"initiatives-grid\\\">\\n <\/p>\n<div class=\\\"initiative-item\\\">\\n <\/p>\n<div class=\\\"initiative-icon\\\">\\ud83c\\udfc6<\\\/div>\\n <\/p>\n<h3 class=\\\"initiative-title\\\">BIFA+ League<\\\/h3>\\n <\/p>\n<p class=\\\"initiative-desc\\\">International club-based football league connecting the Global South<\\\/p>\\n <\\\/div>\\n\\n <\/p>\n<div class=\\\"initiative-item\\\">\\n <\/p>\n<div class=\\\"initiative-icon has-svg\\\">\\n <img src=\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Girl_prof.svg\\\" alt=\\\"BIFA+ Women\\\">\\n <\\\/div>\\n <\/p>\n<h3 class=\\\"initiative-title\\\">BIFA+ Women<\\\/h3>\\n <\/p>\n<p class=\\\"initiative-desc\\\">Dedicated women's football program promoting female leadership<\\\/p>\\n <\\\/div>\\n\\n <\/p>\n<div class=\\\"initiative-item\\\">\\n <\/p>\n<div class=\\\"initiative-icon\\\">\\ud83e\\udd16<\\\/div>\\n <\/p>\n<h3 class=\\\"initiative-title\\\">Academy+ AI<\\\/h3>\\n <\/p>\n<p class=\\\"initiative-desc\\\">AI-powered training systems and smart performance analytics<\\\/p>\\n <\\\/div>\\n\\n <\/p>\n<div class=\\\"initiative-item\\\">\\n <\/p>\n<div class=\\\"initiative-icon\\\">\\ud83c\\udfae<\\\/div>\\n <\/p>\n<h3 class=\\\"initiative-title\\\">BIFA+ eFootball<\\\/h3>\\n <\/p>\n<p class=\\\"initiative-desc\\\">Digital gaming tournaments and virtual football experiences<\\\/p>\\n <\\\/div>\\n\\n <\/p>\n<div class=\\\"initiative-item\\\">\\n <\/p>\n<div class=\\\"initiative-icon\\\">\\ud83c\\udf06<\\\/div>\\n <\/p>\n<h3 class=\\\"initiative-title\\\">Cities Network<\\\/h3>\\n <\/p>\n<p class=\\\"initiative-desc\\\">Global network of partner cities hosting BIFA+ events<\\\/p>\\n <\\\/div>\\n\\n <\/p>\n<div class=\\\"initiative-item\\\">\\n <\/p>\n<div class=\\\"initiative-icon\\\">\\u2b50<\\\/div>\\n <\/p>\n<h3 class=\\\"initiative-title\\\">Legends Night<\\\/h3>\\n <\/p>\n<p class=\\\"initiative-desc\\\">Diplomatic events featuring football legends and cultural icons<\\\/p>\\n <\\\/div>\\n\\n <\/p>\n<div class=\\\"initiative-item\\\">\\n <\/p>\n<div class=\\\"initiative-icon\\\">\\ud83c\\udfd6\\ufe0f<\\\/div>\\n <\/p>\n<h3 class=\\\"initiative-title\\\">Beach & Community<\\\/h3>\\n <\/p>\n<p class=\\\"initiative-desc\\\">Grassroots tournaments and community engagement programs<\\\/p>\\n <\\\/div>\\n\\n <\/p>\n<div class=\\\"initiative-item\\\">\\n <\/p>\n<div class=\\\"initiative-icon\\\">\\ud83e\\udd1d<\\\/div>\\n <\/p>\n<h3 class=\\\"initiative-title\\\">Partnerships<\\\/h3>\\n <\/p>\n<p class=\\\"initiative-desc\\\">Strategic alliances with governments, clubs, and organizations<\\\/p>\\n <\\\/div>\\n <\\\/div>\\n <\\\/section>\\n<\\\/div>\\n\\n<script>\\ndocument.addEventListener('DOMContentLoaded', () => {\\n \\\/\\\/ Create floating particles\\n const particlesContainer = document.querySelector('.initiatives-section-wrapper .bg-particles');\\n const particleCount = 8;\\n\\n for (let i = 0; i < particleCount; i++) {\\n const particle = document.createElement('div');\\n particle.className = 'particle';\\n particle.style.left = Math.random() * 100 + '%';\\n particle.style.animationDelay = Math.random() * 20 + 's';\\n particle.style.animationDuration = (18 + Math.random() * 6) + 's';\\n \\n const size = 3 + Math.random() * 2;\\n particle.style.width = size + 'px';\\n particle.style.height = size + 'px';\\n \\n particlesContainer.appendChild(particle);\\n }\\n\\n \\\/\\\/ Animate elements on scroll\\n const observerOptions = {\\n threshold: 0.1,\\n rootMargin: '0px 0px -100px 0px'\\n };\\n\\n const observer = new IntersectionObserver((entries) => {\\n entries.forEach(entry => {\\n if (entry.isIntersecting) {\\n entry.target.style.opacity = '1';\\n entry.target.style.transform = 'translateY(0)';\\n }\\n });\\n }, observerOptions);\\n\\n \\\/\\\/ Observe initiative items\\n const animatedElements = document.querySelectorAll('.initiatives-section-wrapper .initiative-item');\\n animatedElements.forEach(el => {\\n el.style.opacity = '0';\\n el.style.transform = 'translateY(30px)';\\n el.style.transition = 'all 0.6s ease';\\n observer.observe(el);\\n });\\n});\\n<\\\/script>\\n<\\\/body>\\n<\\\/html>\"}},{\"type\":\"html\",\"props\":{\"content\":\"<!DOCTYPE html>\\n<html lang=\\\"en\\\">\\n<head>\\n<meta charset=\\\"UTF-8\\\">\\n<meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\">\\n<title>BIFA+ President Block<\\\/title>\\n<link rel=\\\"preconnect\\\" href=\\\"https:\\\/\\\/fonts.googleapis.com\\\">\\n<link rel=\\\"preconnect\\\" href=\\\"https:\\\/\\\/fonts.gstatic.com\\\" crossorigin>\\n<link href=\\\"https:\\\/\\\/fonts.googleapis.com\\\/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800;900&display=swap\\\" rel=\\\"stylesheet\\\">\\n\\n<\/p>\n<style>\\n\\\/* ========= PRESIDENT SECTION WRAPPER - ISOLATED & SEAMLESS ========= *\\\/\\n.president-section-wrapper {\\n \\\/* Identical CSS Variables - matching mission section exactly *\\\/\\n --bifa-deep-navy: #0A1F44;\\n --bifa-heritage-gold: #D4AF37;\\n --bifa-civic-green: #1D6143;\\n --bifa-bright-white: #FFFFFF;\\n --bifa-soft-black: #1A1A1A;\\n \\n \\\/* Additional colors for better readability *\\\/\\n --bifa-gray-light: #F8F9FA;\\n --bifa-gray-medium: #E9ECEF;\\n --bifa-gray: #6C757D;\\n --bifa-gray-dark: #495057;\\n \\n \\\/* Official BIFA+ Fonts *\\\/\\n --bifa-font-heading: 'Montserrat', sans-serif;\\n --bifa-font-body: 'Poppins', sans-serif;\\n \\n \\\/* Premium shadows and effects *\\\/\\n --bifa-shadow-sm: 0 2px 8px rgba(10, 31, 68, 0.08);\\n --bifa-shadow-md: 0 8px 24px rgba(10, 31, 68, 0.12);\\n --bifa-shadow-lg: 0 16px 48px rgba(10, 31, 68, 0.16);\\n --bifa-shadow-xl: 0 25px 80px rgba(10, 31, 68, 0.15);\\n --bifa-shadow-gold: 0 15px 40px rgba(212, 175, 55, 0.3);\\n --bifa-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\\n \\n \\\/* SEAMLESS INTEGRATION - same as mission *\\\/\\n width: 100vw;\\n position: relative;\\n left: 50%;\\n margin-left: -50vw;\\n background: radial-gradient(ellipse 120% 80% at center bottom, \\n rgba(255, 255, 255, 1) 0%,\\n rgba(248, 249, 250, 0.95) 20%,\\n rgba(248, 249, 250, 0.8) 40%,\\n rgba(248, 249, 250, 0.5) 60%,\\n rgba(248, 249, 250, 0.2) 80%,\\n transparent 100%\\n );\\n overflow: hidden;\\n}\\n\\n\\\/* NO top border - seamless connection to mission section *\\\/\\n.president-section-wrapper::before {\\n content: '';\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 1px;\\n background: transparent;\\n z-index: 100;\\n}\\n\\n\\\/* Bottom connection line for next section *\\\/\\n.president-section-wrapper::after {\\n content: '';\\n position: absolute;\\n bottom: 0;\\n left: 0;\\n width: 100%;\\n height: 1px;\\n background: linear-gradient(90deg, \\n transparent 0%, \\n rgba(212, 175, 55, 0.3) 25%, \\n rgba(212, 175, 55, 0.6) 50%, \\n rgba(212, 175, 55, 0.3) 75%,\\n transparent 100%\\n );\\n z-index: 100;\\n}\\n\\n\\\/* ========= RESET - ONLY FOR THIS SECTION ========= *\\\/\\n.president-section-wrapper * {\\n margin: 0;\\n padding: 0;\\n box-sizing: border-box;\\n -webkit-font-smoothing: antialiased;\\n -moz-osx-font-smoothing: grayscale;\\n}\\n\\n.president-section-wrapper {\\n font-family: var(--bifa-font-body);\\n color: var(--bifa-soft-black);\\n line-height: 1.6;\\n}\\n\\n\\\/* ========= PRESIDENT SECTION ========= *\\\/\\n.president-section-wrapper .president-section {\\n padding: 100px 0;\\n background: transparent;\\n position: relative;\\n z-index: 10;\\n}\\n\\n.president-section-wrapper .president-container {\\n width: 100%;\\n margin: 0;\\n padding: 0 5%;\\n text-align: center;\\n position: relative;\\n z-index: 1;\\n}\\n\\n\\\/* Section Header *\\\/\\n.president-section-wrapper .section-header {\\n text-align: center;\\n margin-bottom: 60px;\\n animation: presidentFadeIn 1.2s ease-out;\\n}\\n\\n@keyframes presidentFadeIn {\\n from {\\n opacity: 0;\\n transform: translateY(30px);\\n }\\n to {\\n opacity: 1;\\n transform: translateY(0);\\n }\\n}\\n\\n.president-section-wrapper .section-title {\\n font-family: var(--bifa-font-heading);\\n font-size: clamp(2.5rem, 4vw, 3.5rem);\\n font-weight: 900;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n margin-bottom: 20px;\\n letter-spacing: -0.02em;\\n}\\n\\n.president-section-wrapper .section-subtitle {\\n font-family: var(--bifa-font-body);\\n font-size: clamp(1rem, 1.5vw, 1.2rem);\\n color: var(--bifa-soft-black);\\n max-width: 800px;\\n margin: 0 auto;\\n line-height: 1.8;\\n font-weight: 400;\\n}\\n\\n\\\/* President Content - No borders, full width *\\\/\\n.president-section-wrapper .president-content-area {\\n width: 100%;\\n position: relative;\\n z-index: 2;\\n background: transparent;\\n padding: 0;\\n animation: presidentContentFadeIn 1s ease-out 0.3s both;\\n}\\n\\n@keyframes presidentContentFadeIn {\\n from {\\n opacity: 0;\\n transform: translateY(30px);\\n }\\n to {\\n opacity: 1;\\n transform: translateY(0);\\n }\\n}\\n\\n\\\/* President Photo *\\\/\\n.president-section-wrapper .president-photo {\\n width: 280px;\\n height: 350px;\\n margin: 0 auto 40px;\\n position: relative;\\n}\\n\\n.president-section-wrapper .photo-frame {\\n width: 100%;\\n height: 100%;\\n position: relative;\\n overflow: hidden;\\n border-radius: 0 45% 0 45%;\\n box-shadow: var(--bifa-shadow-xl);\\n background: var(--bifa-bright-white);\\n transition: var(--bifa-transition);\\n}\\n\\n.president-section-wrapper .photo-frame::before {\\n content: '';\\n position: absolute;\\n top: -5px;\\n left: -5px;\\n right: -5px;\\n bottom: -5px;\\n background: linear-gradient(135deg, \\n var(--bifa-heritage-gold) 0%, \\n var(--bifa-heritage-gold) 25%,\\n var(--bifa-deep-navy) 50%,\\n var(--bifa-heritage-gold) 75%, \\n var(--bifa-heritage-gold) 100%\\n );\\n border-radius: 0 45% 0 45%;\\n z-index: -1;\\n animation: presidentGradientRotate 8s linear infinite;\\n}\\n\\n@keyframes presidentGradientRotate {\\n 0% { filter: hue-rotate(0deg); }\\n 100% { filter: hue-rotate(360deg); }\\n}\\n\\n.president-section-wrapper .photo-frame img {\\n width: 100%;\\n height: 100%;\\n object-fit: cover;\\n transition: var(--bifa-transition);\\n}\\n\\n.president-section-wrapper .photo-frame:hover {\\n transform: translateY(-5px);\\n box-shadow: var(--bifa-shadow-gold);\\n}\\n\\n.president-section-wrapper .photo-frame:hover img {\\n transform: scale(1.05);\\n}\\n\\n\\\/* Title decoration matching mission style *\\\/\\n.president-section-wrapper .title-decoration {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n gap: 20px;\\n margin-bottom: 25px;\\n}\\n\\n.president-section-wrapper .gold-line {\\n width: 80px;\\n height: 3px;\\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent);\\n animation: presidentPulse 2s ease-in-out infinite;\\n}\\n\\n@keyframes presidentPulse {\\n 0%, 100% {\\n opacity: 0.6;\\n transform: scaleX(1);\\n }\\n 50% {\\n opacity: 1;\\n transform: scaleX(1.2);\\n }\\n}\\n\\n.president-section-wrapper .president-title {\\n font-family: var(--bifa-font-heading);\\n font-size: 0.9rem;\\n font-weight: 700;\\n text-transform: uppercase;\\n letter-spacing: 4px;\\n color: var(--bifa-heritage-gold);\\n}\\n\\n.president-section-wrapper .president-name {\\n font-family: var(--bifa-font-heading);\\n font-size: clamp(2rem, 3vw, 2.8rem);\\n font-weight: 900;\\n color: var(--bifa-deep-navy);\\n margin-bottom: 30px;\\n line-height: 1.2;\\n position: relative;\\n transition: var(--bifa-transition);\\n}\\n\\n.president-section-wrapper .president-name::after {\\n content: '';\\n position: absolute;\\n bottom: -10px;\\n left: 50%;\\n transform: translateX(-50%);\\n width: 100px;\\n height: 3px;\\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent);\\n border-radius: 2px;\\n animation: presidentLineGrow 1.5s ease-out 1s both;\\n}\\n\\n@keyframes presidentLineGrow {\\n from { width: 0; }\\n to { width: 100px; }\\n}\\n\\n.president-section-wrapper .president-name:hover {\\n color: var(--bifa-heritage-gold);\\n transform: translateY(-2px);\\n}\\n\\n.president-section-wrapper .president-description {\\n font-family: var(--bifa-font-body);\\n font-size: 1.1rem;\\n line-height: 1.9;\\n color: var(--bifa-soft-black);\\n margin-bottom: 40px;\\n max-width: 900px;\\n margin-left: auto;\\n margin-right: auto;\\n text-align: left;\\n}\\n\\n.president-section-wrapper .president-description .intro-text {\\n font-size: 1.2rem;\\n margin-bottom: 40px;\\n text-align: center;\\n font-weight: 500;\\n}\\n\\n.president-section-wrapper .president-description .highlight {\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n font-weight: 600;\\n position: relative;\\n}\\n\\n.president-section-wrapper .president-description .highlight::after {\\n content: '';\\n position: absolute;\\n bottom: -2px;\\n left: 0;\\n width: 100%;\\n height: 2px;\\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent);\\n opacity: 0.3;\\n}\\n\\n\\\/* Content sections *\\\/\\n.president-section-wrapper .philosophy-section,\\n.president-section-wrapper .vision-section,\\n.president-section-wrapper .leadership-section,\\n.president-section-wrapper .impact-section {\\n margin-bottom: 35px;\\n padding: 25px;\\n background: rgba(248, 249, 250, 0.5);\\n border-radius: 15px;\\n border-left: 4px solid var(--bifa-heritage-gold);\\n transition: var(--bifa-transition);\\n}\\n\\n.president-section-wrapper .philosophy-section:hover,\\n.president-section-wrapper .vision-section:hover,\\n.president-section-wrapper .leadership-section:hover,\\n.president-section-wrapper .impact-section:hover {\\n background: rgba(248, 249, 250, 0.8);\\n transform: translateX(5px);\\n box-shadow: var(--bifa-shadow-sm);\\n}\\n\\n.president-section-wrapper .section-heading {\\n font-family: var(--bifa-font-heading);\\n font-size: 1.3rem;\\n font-weight: 700;\\n color: var(--bifa-deep-navy);\\n margin-bottom: 15px;\\n position: relative;\\n padding-bottom: 8px;\\n}\\n\\n.president-section-wrapper .section-heading::after {\\n content: '';\\n position: absolute;\\n bottom: 0;\\n left: 0;\\n width: 60px;\\n height: 2px;\\n background: var(--bifa-heritage-gold);\\n border-radius: 1px;\\n}\\n\\n.president-section-wrapper .quote-text {\\n font-family: var(--bifa-font-heading);\\n font-size: 1.4rem;\\n font-weight: 600;\\n color: var(--bifa-heritage-gold);\\n font-style: italic;\\n text-align: center;\\n margin: 20px 0;\\n padding: 20px;\\n background: rgba(212, 175, 55, 0.05);\\n border-radius: 10px;\\n position: relative;\\n}\\n\\n.president-section-wrapper .quote-text::before {\\n content: '\\\"';\\n position: absolute;\\n top: -10px;\\n left: 15px;\\n font-size: 3rem;\\n color: var(--bifa-heritage-gold);\\n opacity: 0.3;\\n}\\n\\n.president-section-wrapper .quote-text::after {\\n content: '\\\"';\\n position: absolute;\\n bottom: -25px;\\n right: 15px;\\n font-size: 3rem;\\n color: var(--bifa-heritage-gold);\\n opacity: 0.3;\\n}\\n\\n\\\/* Action Buttons - matching mission style *\\\/\\n.president-section-wrapper .action-row {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n gap: 25px;\\n margin-top: 50px;\\n}\\n\\n.president-section-wrapper .btn-elegant {\\n padding: 16px 35px;\\n text-decoration: none;\\n font-size: 1rem;\\n font-weight: 600;\\n border-radius: 50px;\\n display: inline-flex;\\n align-items: center;\\n gap: 10px;\\n transition: var(--bifa-transition);\\n position: relative;\\n overflow: hidden;\\n text-transform: uppercase;\\n letter-spacing: 1px;\\n font-family: var(--bifa-font-heading);\\n}\\n\\n.president-section-wrapper .btn-primary {\\n background: linear-gradient(135deg, var(--bifa-heritage-gold) 0%, var(--bifa-heritage-gold) 100%);\\n color: var(--bifa-bright-white);\\n box-shadow: var(--bifa-shadow-gold);\\n border: 2px solid transparent;\\n}\\n\\n.president-section-wrapper .btn-primary::before {\\n content: '';\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n background: linear-gradient(135deg, var(--bifa-deep-navy), var(--bifa-deep-navy));\\n opacity: 0;\\n transition: opacity 0.4s ease;\\n}\\n\\n.president-section-wrapper .btn-primary:hover::before {\\n opacity: 1;\\n}\\n\\n.president-section-wrapper .btn-primary span,\\n.president-section-wrapper .btn-primary svg {\\n position: relative;\\n z-index: 1;\\n}\\n\\n.president-section-wrapper .btn-primary:hover {\\n transform: translateY(-3px);\\n box-shadow: 0 20px 40px rgba(212, 175, 55, 0.4);\\n}\\n\\n.president-section-wrapper .btn-secondary {\\n background: transparent;\\n color: var(--bifa-deep-navy);\\n border: 2px solid var(--bifa-deep-navy);\\n}\\n\\n.president-section-wrapper .btn-secondary:hover {\\n background: var(--bifa-deep-navy);\\n color: var(--bifa-bright-white);\\n transform: translateY(-3px);\\n box-shadow: var(--bifa-shadow-lg);\\n}\\n\\n\\\/* Floating particles - matching mission *\\\/\\n.president-section-wrapper .bg-particles {\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n overflow: hidden;\\n z-index: 1;\\n pointer-events: none;\\n}\\n\\n.president-section-wrapper .particle {\\n position: absolute;\\n width: 4px;\\n height: 4px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), var(--bifa-heritage-gold));\\n border-radius: 50%;\\n animation: presidentFloat 20s infinite linear;\\n box-shadow: 0 0 12px rgba(212, 175, 55, 0.3);\\n opacity: 0.3;\\n}\\n\\n@keyframes presidentFloat {\\n 0% {\\n transform: translateY(100vh) translateX(0);\\n opacity: 0;\\n }\\n 15% { opacity: 0.3; }\\n 85% { opacity: 0.3; }\\n 100% {\\n transform: translateY(-100vh) translateX(30px);\\n opacity: 0;\\n }\\n}\\n\\n\\\/* Fallback for browsers without background-clip support *\\\/\\n@supports not (background-clip: text) {\\n .president-section-wrapper .section-title,\\n .president-section-wrapper .highlight {\\n color: var(--bifa-heritage-gold) !important;\\n background: none !important;\\n }\\n}\\n\\n\\\/* ========= RESPONSIVE - MATCHING MISSION ========= *\\\/\\n@media (max-width: 1200px) {\\n .president-section-wrapper .president-container {\\n padding: 0 4%;\\n }\\n}\\n\\n@media (max-width: 768px) {\\n .president-section-wrapper .president-container {\\n padding: 0 3%;\\n }\\n \\n .president-section-wrapper .president-section {\\n padding: 60px 0;\\n }\\n \\n .president-section-wrapper .president-photo {\\n width: 240px;\\n height: 300px;\\n }\\n \\n .president-section-wrapper .section-title {\\n font-size: 2rem;\\n }\\n \\n .president-section-wrapper .president-name {\\n font-size: 1.8rem;\\n }\\n \\n .president-section-wrapper .president-description {\\n font-size: 1rem;\\n }\\n \\n .president-section-wrapper .president-description .intro-text {\\n font-size: 1.1rem;\\n }\\n \\n .president-section-wrapper .section-heading {\\n font-size: 1.2rem;\\n }\\n \\n .president-section-wrapper .quote-text {\\n font-size: 1.2rem;\\n padding: 15px;\\n }\\n \\n .president-section-wrapper .philosophy-section,\\n .president-section-wrapper .vision-section,\\n .president-section-wrapper .leadership-section,\\n .president-section-wrapper .impact-section {\\n padding: 20px 15px;\\n margin-bottom: 25px;\\n }\\n \\n .president-section-wrapper .action-row {\\n flex-direction: column;\\n gap: 15px;\\n }\\n \\n .president-section-wrapper .btn-elegant {\\n width: 100%;\\n justify-content: center;\\n }\\n}\\n\\n@media (max-width: 480px) {\\n .president-section-wrapper .president-container {\\n padding: 0 2%;\\n }\\n \\n .president-section-wrapper .president-photo {\\n width: 200px;\\n height: 260px;\\n }\\n \\n .president-section-wrapper .president-name {\\n font-size: 1.5rem;\\n }\\n \\n .president-section-wrapper .president-description {\\n font-size: 0.95rem;\\n }\\n \\n .president-section-wrapper .president-description .intro-text {\\n font-size: 1rem;\\n }\\n \\n .president-section-wrapper .section-heading {\\n font-size: 1.1rem;\\n }\\n \\n .president-section-wrapper .quote-text {\\n font-size: 1.1rem;\\n padding: 12px;\\n }\\n \\n .president-section-wrapper .philosophy-section,\\n .president-section-wrapper .vision-section,\\n .president-section-wrapper .leadership-section,\\n .president-section-wrapper .impact-section {\\n padding: 15px 12px;\\n margin-bottom: 20px;\\n }\\n \\n .president-section-wrapper .btn-elegant {\\n padding: 14px 25px;\\n font-size: 0.9rem;\\n }\\n \\n .president-section-wrapper .title-decoration {\\n gap: 15px;\\n }\\n \\n .president-section-wrapper .gold-line {\\n width: 60px;\\n }\\n \\n .president-section-wrapper .president-title {\\n font-size: 0.8rem;\\n letter-spacing: 3px;\\n }\\n}\\n<\\\/style>\\n<\\\/head>\\n<body>\\n\\n<\/p>\n<div class=\\\"president-section-wrapper\\\" id=\\\"founder\\\">\\n \\n <\/p>\n<div class=\\\"bg-particles\\\"><\\\/div>\\n \\n \\n <\/p>\n<section class=\\\"president-section\\\">\\n <\/p>\n<div class=\\\"president-container\\\">\\n \\n <\/p>\n<div class=\\\"section-header\\\">\\n <\/p>\n<h2 class=\\\"section-title\\\">Our Founder<\\\/h2>\\n <\/p>\n<p class=\\\"section-subtitle\\\">\\n Visionary leadership driving international sports diplomacy and cultural cooperation across the Global South.\\n <\\\/p>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\\\"president-card\\\">\\n <\/p>\n<div class=\\\"president-card-content\\\">\\n \\n <\/p>\n<div class=\\\"president-photo\\\">\\n <\/p>\n<div class=\\\"photo-frame\\\">\\n <img src=\\\"https:\\\/\\\/bifa.ai\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Mr\\\/main-photo.jpg\\\" \\n alt=\\\"Dr. Salim Humaid Almazaini\\\"\\n data-no-translation=\\\"true\\\"\\n data-no-dynamic-translation=\\\"true\\\">\\n <\\\/div>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\\\"title-decoration\\\">\\n <\/p>\n<div class=\\\"gold-line\\\"><\\\/div>\\n <\/p>\n<h3 class=\\\"president-title\\\">Founder & President<\\\/h3>\\n <\/p>\n<div class=\\\"gold-line\\\"><\\\/div>\\n <\\\/div>\\n \\n <\/p>\n<h1 class=\\\"president-name\\\">Dr. Salim Humaid Almazaini<\\\/h1>\\n \\n <\/p>\n<div class=\\\"president-description\\\">\\n <\/p>\n<p class=\\\"intro-text\\\">\\n A <span class=\\\"highlight\\\">visionary leader<\\\/span> in modern sports diplomacy and the architect of an international movement that unites youth through football, culture, and education. Based in Dubai, the founder has created what represents one of the most ambitious <span class=\\\"highlight\\\">cultural-sports initiatives connecting the Global South<\\\/span>.\\n <\\\/p>\\n \\n <\/p>\n<div class=\\\"philosophy-section\\\">\\n <\/p>\n<h4 class=\\\"section-heading\\\">Philosophy<\\\/h4>\\n <\/p>\n<p class=\\\"quote-text\\\">\\\"We're not just playing a game. We're building the future.\\\"<\\\/p>\\n <\/p>\n<p>This powerful statement encapsulates the belief that football transcends sport\\u2014it becomes a <span class=\\\"highlight\\\">vehicle for peace, understanding, and international cooperation<\\\/span>. The approach transforms the beautiful game into a tool for soft diplomacy and cultural bridge-building.<\\\/p>\\n <\\\/div>\\n \\n <\/p>\n<div class=\\\"vision-section\\\">\\n <\/p>\n<h4 class=\\\"section-heading\\\">Strategic Vision<\\\/h4>\\n <\/p>\n<p>Under this leadership, BIFA+ has evolved into a comprehensive international ecosystem that connects youth through multiple channels: <span class=\\\"highlight\\\">sports excellence, educational advancement, cultural exchange, and cutting-edge technology integration<\\\/span>. The alliance serves as an independent, decentralized platform fostering development, peace, and social inclusion among countries of the Global South.<\\\/p>\\n <\\\/div>\\n \\n <\/p>\n<div class=\\\"leadership-section\\\">\\n <\/p>\n<h4 class=\\\"section-heading\\\">Innovation in Sports Diplomacy<\\\/h4>\\n <\/p>\n<p>BIFA+ is envisioned as more than a sports organization\\u2014it's a movement that uses football as a <span class=\\\"highlight\\\">universal language to promote peace, cultural understanding, and youth empowerment<\\\/span>. This initiative represents a new model of international cooperation, where sport becomes a catalyst for positive social change and diplomatic engagement.<\\\/p>\\n <\\\/div>\\n \\n <\/p>\n<div class=\\\"impact-section\\\">\\n <\/p>\n<h4 class=\\\"section-heading\\\">Building Tomorrow<\\\/h4>\\n <\/p>\n<p>Through BIFA+, a legacy is being created that extends far beyond football pitches. The platform enables young people from diverse backgrounds to connect, learn, and collaborate, fostering the next generation of <span class=\\\"highlight\\\">global citizens who understand that cooperation trumps competition<\\\/span> in building a better world.<\\\/p>\\n <\\\/div>\\n <\\\/div> \\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/section>\\n<\\\/div>\\n\\n<script>\\ndocument.addEventListener('DOMContentLoaded', () => {\\n \\\/\\\/ Create floating particles - matching mission section\\n const particlesContainer = document.querySelector('.president-section-wrapper .bg-particles');\\n const particleCount = 8;\\n\\n for (let i = 0; i < particleCount; i++) {\\n const particle = document.createElement('div');\\n particle.className = 'particle';\\n particle.style.left = Math.random() * 100 + '%';\\n particle.style.animationDelay = Math.random() * 20 + 's';\\n particle.style.animationDuration = (18 + Math.random() * 6) + 's';\\n \\n const size = 3 + Math.random() * 2;\\n particle.style.width = size + 'px';\\n particle.style.height = size + 'px';\\n \\n particlesContainer.appendChild(particle);\\n }\\n\\n \\\/\\\/ Animate elements on scroll - matching mission behavior\\n const observerOptions = {\\n threshold: 0.1,\\n rootMargin: '0px 0px -100px 0px'\\n };\\n\\n const observer = new IntersectionObserver((entries) => {\\n entries.forEach(entry => {\\n if (entry.isIntersecting) {\\n entry.target.style.opacity = '1';\\n entry.target.style.transform = 'translateY(0)';\\n }\\n });\\n }, observerOptions);\\n\\n \\\/\\\/ Observe animated elements\\n const animatedElements = document.querySelectorAll('.president-section-wrapper .president-content-area, .president-section-wrapper .section-header');\\n animatedElements.forEach(el => {\\n observer.observe(el);\\n });\\n\\n \\\/\\\/ Button hover effects\\n document.querySelectorAll('.president-section-wrapper .btn-elegant').forEach(button => {\\n button.addEventListener('mouseenter', (e) => {\\n const rect = button.getBoundingClientRect();\\n const x = e.clientX - rect.left;\\n const y = e.clientY - rect.top;\\n \\n const ripple = document.createElement('div');\\n ripple.style.cssText = `\\n position: absolute;\\n width: 100px;\\n height: 100px;\\n background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);\\n left: ${x - 50}px;\\n top: ${y - 50}px;\\n pointer-events: none;\\n opacity: 0;\\n transition: opacity 0.3s ease;\\n border-radius: 50%;\\n z-index: 0;\\n `;\\n \\n button.appendChild(ripple);\\n setTimeout(() => { ripple.style.opacity = '1'; }, 10);\\n \\n button.addEventListener('mouseleave', () => {\\n ripple.style.opacity = '0';\\n setTimeout(() => ripple.remove(), 300);\\n }, { once: true });\\n });\\n });\\n\\n \\\/\\\/ Simple image loading effect\\n const presidentImage = document.querySelector('.president-section-wrapper .photo-frame img');\\n if (presidentImage) {\\n presidentImage.style.opacity = '0';\\n presidentImage.style.transition = 'opacity 0.8s ease';\\n \\n if (presidentImage.complete) {\\n presidentImage.style.opacity = '1';\\n } else {\\n presidentImage.addEventListener('load', function() {\\n this.style.opacity = '1';\\n });\\n }\\n }\\n\\n \\\/\\\/ Smooth scroll for anchor links\\n document.querySelectorAll('a[href^=\\\"#\\\"]').forEach(anchor => {\\n anchor.addEventListener('click', function (e) {\\n e.preventDefault();\\n const target = document.querySelector(this.getAttribute('href'));\\n if (target) {\\n target.scrollIntoView({\\n behavior: 'smooth',\\n block: 'start'\\n });\\n }\\n });\\n });\\n});\\n<\\\/script>\\n\\n<\\\/body>\\n<\\\/html>\"}},{\"type\":\"html\",\"props\":{\"content\":\" <div class=\"bifa-team-section-wrapper\" id=\"core-team\">\n <div class=\"bifa-team-bg-particles\"><\/div>\n <div class=\"bifa-team-pattern-overlay\"><\/div>\n\n <section class=\"bifa-team-section\">\n <div class=\"bifa-team-container\">\n <div class=\"bifa-team-header\">\n <h2 class=\"bifa-team-title\">Core Team<\/h2>\n <p class=\"bifa-team-subtitle\">\n Meet the dedicated professionals driving BIFA+'s mission to unite the Global South through football, innovation, and cultural exchange.\n <\/p>\n <\/div>\n\n <div class=\"bifa-team-coming-soon\">\n <div class=\"bifa-team-coming-icon\">\ud83d\udc65<\/div>\n\n <h3 class=\"bifa-team-coming-title\">Our Team is Growing<\/h3>\n\n <p class=\"bifa-team-coming-text\">\n We are currently assembling a world-class team of <span class=\"bifa-highlight\">sports professionals, technology innovators, and cultural ambassadors<\/span> who share our vision of transforming youth sports across the Global South.\n <\/p>\n\n <p class=\"bifa-team-coming-text\">\n As we prepare for our official launch, we're carefully selecting individuals who bring not just expertise, but also <span class=\"bifa-highlight\">passion, creativity, and commitment<\/span> to our mission of building bridges through football.\n <\/p>\n\n <div class=\"bifa-team-notify-box\">\n <h4 class=\"bifa-team-notify-title\">Be the First to Know<\/h4>\n <p class=\"bifa-team-notify-text\">\n Our complete team roster will be unveiled at the official BIFA+ launch.\n Get in touch to learn more about our revolutionary movement.\n <\/p>\n\n <a href=\"https:\/\/bifa.ai\/hi\/contacts\/\" class=\"bifa-team-btn-notify\">\n <span>Stay Connected<\/span>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <\/div>\n\n <script>\n (function() {\n const container = document.querySelector('.bifa-team-bg-particles');\n if (container) {\n for (let i = 0; i < 6; i++) {\n const particle = document.createElement('div');\n particle.className = 'bifa-team-particle';\n particle.style.left = Math.random() * 100 + '%';\n particle.style.animationDelay = Math.random() * 20 + 's';\n particle.style.animationDuration = (18 + Math.random() * 6) + 's';\n container.appendChild(particle);\n }\n }\n })();\n <\/script>\n \"}},{\"type\":\"html\",\"props\":{\"content\":\"\"}}]}]}]}],\"version\":\"4.5.32\"} --><\/p>","protected":false},"excerpt":{"rendered":"<p>About BIFA \u2014 Global Sports Alliance About BIFA+ BRICS International Football Alliance “Play with Spirit. Lead with Vision.” BIFA+ (BIFA Plus) is an international sports and cultural initiative that connects countries of the Global South through football, education, technology, and people-to-people diplomacy. Founded by Salim Humaid Almazaini from the UAE, BIFA+ brings together 11 nations […]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-614","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bifa.ai\/hi\/wp-json\/wp\/v2\/pages\/614","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bifa.ai\/hi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bifa.ai\/hi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bifa.ai\/hi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bifa.ai\/hi\/wp-json\/wp\/v2\/comments?post=614"}],"version-history":[{"count":63,"href":"https:\/\/bifa.ai\/hi\/wp-json\/wp\/v2\/pages\/614\/revisions"}],"predecessor-version":[{"id":1447,"href":"https:\/\/bifa.ai\/hi\/wp-json\/wp\/v2\/pages\/614\/revisions\/1447"}],"wp:attachment":[{"href":"https:\/\/bifa.ai\/hi\/wp-json\/wp\/v2\/media?parent=614"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}