BIFA+ \u2014 Video Section with Enhanced Player<\/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&family=Cairo:wght@300;400;500;600;700;800&family=Tajawal:wght@300;400;500;700;800&display=swap\" rel=\"stylesheet\">\n<style>\n\/* ========= \u0413\u041b\u041e\u0411\u0410\u041b\u042c\u041d\u042b\u0415 \u041f\u0415\u0420\u0415\u041c\u0415\u041d\u041d\u042b\u0415 BIFA+ ========= *\/\n:root {\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 --bifa-font-heading: 'Montserrat', 'Cairo', sans-serif;\n --bifa-font-body: 'Poppins', 'Tajawal', sans-serif;\n --bifa-font-arabic: 'Cairo', 'Tajawal', 'GE SS Text', sans-serif;\n}<\/p>\n<p>* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}<\/p>\n<p>body {\n font-family: var(--bifa-font-body);\n overflow-x: hidden;\n background: var(--bifa-bright-white);\n}<\/p>\n<p>\/* \u041e\u041f\u0422\u0418\u041c\u0418\u0417\u0410\u0426\u0418\u042f: \u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d contain \u0434\u043b\u044f \u0438\u0437\u043e\u043b\u044f\u0446\u0438\u0438 *\/\n.video-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 contain: layout style paint;\n}<\/p>\n<p>.video-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 will-change: opacity;\n}<\/p>\n<p>@keyframes goldPulse {\n 0%, 100% { opacity: 0.6; }\n 50% { opacity: 1; }\n}<\/p>\n<p>.bifa-video-section {\n min-height: 100vh;\n padding: 80px 0;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n}<\/p>\n<p>\/* \u041e\u041f\u0422\u0418\u041c\u0418\u0417\u0410\u0426\u0418\u042f: \u0423\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0447\u0430\u0441\u0442\u0438\u0446 \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d GPU acceleration *\/\n.bg-particles {\n position: absolute;\n width: 100%;\n height: 100%;\n overflow: hidden;\n z-index: 2;\n will-change: auto;\n contain: layout style paint;\n}<\/p>\n<p>.particle {\n position: absolute;\n width: 4px;\n height: 4px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n border-radius: 50%;\n animation: float 15s infinite linear;\n box-shadow: 0 0 8px rgba(212, 175, 55, 0.3);\n opacity: 0.3;\n will-change: transform;\n transform: translateZ(0);\n backface-visibility: hidden;\n}<\/p>\n<p>@keyframes float {\n 0% {\n transform: translateY(100vh) translateX(0) translateZ(0);\n opacity: 0;\n }\n 15% { opacity: 1; }\n 85% { opacity: 1; }\n 100% {\n transform: translateY(-100vh) translateX(50px) translateZ(0);\n opacity: 0;\n }\n}<\/p>\n<p>.video-container {\n max-width: 1400px;\n width: 90%;\n margin: 0 auto;\n position: relative;\n z-index: 10;\n}<\/p>\n<p>.about-header {\n text-align: center;\n margin-bottom: 60px;\n animation: fadeInDown 1.2s ease;\n overflow: visible;\n position: relative;\n}<\/p>\n<p>@keyframes fadeInDown {\n from {\n opacity: 0;\n transform: translateY(-40px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>.about-title {\n font-family: var(--bifa-font-heading);\n font-size: clamp(3rem, 5vw, 4.5rem);\n font-weight: 900;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n margin-bottom: 25px;\n text-transform: uppercase;\n position: relative;\n cursor: pointer;\n transition: all 0.3s ease;\n text-decoration: none;\n display: inline-block;\n will-change: transform;\n}<\/p>\n<p>.about-title::after {\n content: '';\n position: absolute;\n bottom: -10px;\n left: 50%;\n transform: translateX(-50%);\n width: 0;\n height: 3px;\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700);\n transition: width 0.4s ease;\n}<\/p>\n<p>.about-title:hover {\n transform: translateY(-3px);\n}<\/p>\n<p>.about-title:hover::after {\n width: 100%;\n}<\/p>\n<p>.subtitle-container {\n position: relative;\n height: 60px;\n margin-bottom: 20px;\n overflow: visible;\n display: flex;\n align-items: center;\n justify-content: center;\n}<\/p>\n<p>.about-subtitle,\n.about-slogan {\n font-family: var(--bifa-font-body);\n font-size: clamp(1.2rem, 2.5vw, 1.8rem);\n color: var(--bifa-deep-navy);\n font-weight: 600;\n letter-spacing: 2px;\n position: absolute;\n width: 100%;\n left: 0;\n top: 50%;\n transform: translateY(-50%);\n margin: 0;\n text-align: center;\n opacity: 0;\n z-index: 2;\n}<\/p>\n<p>.about-subtitle {\n animation: textRotate 8s ease-in-out infinite;\n}<\/p>\n<p>.about-slogan {\n font-family: var(--bifa-font-heading);\n font-weight: 700;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n animation: textRotate 8s ease-in-out infinite, textGlow 2s ease-in-out infinite;\n animation-delay: 4s, 4s;\n}<\/p>\n<p>@keyframes textRotate {\n 0% {\n opacity: 0;\n transform: translateY(-50%) translateY(20px);\n }\n 10% {\n opacity: 1;\n transform: translateY(-50%) translateY(0);\n }\n 40% {\n opacity: 1;\n transform: translateY(-50%) translateY(0);\n }\n 50% {\n opacity: 0;\n transform: translateY(-50%) translateY(-20px);\n }\n 100% {\n opacity: 0;\n transform: translateY(-50%) translateY(-20px);\n }\n}<\/p>\n<p>@keyframes textGlow {\n 0%, 100% {\n text-shadow: \n 0 0 10px rgba(212, 175, 55, 0.3),\n 0 0 20px rgba(212, 175, 55, 0.2),\n 0 0 30px rgba(212, 175, 55, 0.1);\n filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.2));\n }\n 50% {\n text-shadow: \n 0 0 15px rgba(212, 175, 55, 0.5),\n 0 0 30px rgba(212, 175, 55, 0.4),\n 0 0 45px rgba(212, 175, 55, 0.3),\n 0 0 60px rgba(212, 175, 55, 0.2);\n filter: drop-shadow(0 0 25px rgba(212, 175, 55, 0.3));\n }\n}<\/p>\n<p>.about-slogan::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 400%;\n height: 300%;\n background: radial-gradient(ellipse at center, \n rgba(212, 175, 55, 0.12) 0%, \n rgba(212, 175, 55, 0.08) 20%, \n rgba(212, 175, 55, 0.05) 40%, \n rgba(212, 175, 55, 0.02) 60%,\n transparent 80%\n );\n z-index: -1;\n opacity: 0;\n animation: glowPulse 2s ease-in-out infinite;\n animation-delay: 4s;\n pointer-events: none;\n filter: blur(10px);\n}<\/p>\n<p>@keyframes glowPulse {\n 0%, 100% {\n opacity: 0.5;\n transform: translate(-50%, -50%) scale(0.8);\n }\n 50% {\n opacity: 1;\n transform: translate(-50%, -50%) scale(1.2);\n }\n}<\/p>\n<p>.subtitle-container::before,\n.subtitle-container::after {\n content: '';\n position: absolute;\n width: 50px;\n height: 1px;\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent);\n top: 50%;\n transform: translateY(-50%);\n opacity: 0;\n animation: lineExpand 8s ease-in-out infinite;\n}<\/p>\n<p>.subtitle-container::before {\n left: 10%;\n}<\/p>\n<p>.subtitle-container::after {\n right: 10%;\n}<\/p>\n<p>@keyframes lineExpand {\n 0%, 50%, 100% {\n width: 0;\n opacity: 0;\n }\n 45%, 55% {\n width: 50px;\n opacity: 1;\n }\n}<\/p>\n<p>.about-description {\n max-width: 900px;\n margin: 0 auto;\n font-family: var(--bifa-font-body);\n font-size: clamp(1rem, 1.5vw, 1.2rem);\n line-height: 1.8;\n color: #4a5568;\n font-weight: 400;\n opacity: 0;\n animation: fadeInDescription 1s ease forwards;\n animation-delay: 2s;\n}<\/p>\n<p>@keyframes fadeInDescription {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>.highlight {\n font-weight: 700;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n}<\/p>\n<p>\/* \u041e\u041f\u0422\u0418\u041c\u0418\u0417\u0410\u0426\u0418\u042f: \u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d GPU acceleration *\/\n.video-wrapper {\n position: relative;\n width: 100%;\n padding-bottom: 56.25%;\n border-radius: 25px;\n background: linear-gradient(135deg, var(--bifa-deep-navy) 0%, #162e5a 100%);\n overflow: hidden;\n box-shadow: \n 0 25px 80px rgba(10, 31, 68, 0.15),\n 0 0 0 1px rgba(212, 175, 55, 0.1),\n inset 0 1px 0 rgba(255, 255, 255, 0.1);\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n will-change: transform;\n transform: translateZ(0);\n}<\/p>\n<p>\/* \u041e\u041f\u0422\u0418\u041c\u0418\u0417\u0418\u0420\u041e\u0412\u0410\u041d\u041e: \u0423\u043f\u0440\u043e\u0449\u0435\u043d loading screen *\/\n.video-loading-overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: #f8f9fa !important;\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-container {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: #f8f9fa !important;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n}<\/p>\n<p>.loading-iframe {\n position: absolute;\n border: none;\n background: #f8f9fa !important;\n width: 100vw;\n height: 100vh;\n min-width: 768px;\n min-height: 600px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n transform-origin: center center;\n}<\/p>\n<p>@media (max-width: 768px) {\n .loading-iframe {\n transform: translate(-50%, -50%) scale(0.6);\n }\n}<\/p>\n<p>@media (max-width: 480px) {\n .loading-iframe {\n transform: translate(-50%, -50%) scale(0.45);\n }\n}<\/p>\n<p>.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: #f8f9fa !important;\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), #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n text-align: center;\n margin-bottom: 20px;\n}<\/p>\n<p>.loader-progress {\n width: 200px;\n height: 4px;\n background: rgba(212, 175, 55, 0.2);\n border-radius: 2px;\n overflow: hidden;\n}<\/p>\n<p>.loader-progress-bar {\n width: 0%;\n height: 100%;\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700);\n border-radius: 2px;\n animation: loadingProgress 3s ease-in-out infinite;\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(-5px) translateZ(0);\n box-shadow: \n 0 35px 100px rgba(10, 31, 68, 0.2),\n 0 0 0 1px rgba(212, 175, 55, 0.2),\n inset 0 1px 0 rgba(255, 255, 255, 0.1);\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>\/* ========= VIDEO ERROR OVERLAY ========= *\/\n.video-error-overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(135deg, var(--bifa-deep-navy) 0%, #162e5a 100%);\n display: none;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n z-index: 90;\n border-radius: 25px;\n}<\/p>\n<p>.video-error-overlay.active {\n display: flex;\n}<\/p>\n<p>.error-icon {\n width: 80px;\n height: 80px;\n margin-bottom: 20px;\n opacity: 0.7;\n}<\/p>\n<p>.error-icon svg {\n width: 100%;\n height: 100%;\n fill: var(--bifa-heritage-gold);\n}<\/p>\n<p>.error-message {\n font-family: var(--bifa-font-heading);\n font-size: 1.2rem;\n color: rgba(255, 255, 255, 0.9);\n text-align: center;\n margin-bottom: 20px;\n}<\/p>\n<p>.error-retry-btn {\n padding: 12px 30px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n border: none;\n border-radius: 25px;\n font-family: var(--bifa-font-heading);\n font-size: 0.9rem;\n font-weight: 700;\n color: var(--bifa-deep-navy);\n cursor: pointer;\n transition: transform 0.2s ease, box-shadow 0.2s ease;\n}<\/p>\n<p>.error-retry-btn:hover {\n transform: scale(1.05);\n box-shadow: 0 10px 30px rgba(212, 175, 55, 0.4);\n}<\/p>\n<p>\/* ========= 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.video-wrapper.controls-visible .controls {\n opacity: 1;\n visibility: visible;\n transform: translateY(0);\n}<\/p>\n<p>\/* Touch: \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044b \u043f\u0440\u0438 \u0442\u0430\u043f\u0435 *\/\n.video-wrapper.touch-active .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>\/* \u041e\u041f\u0422\u0418\u041c\u0418\u0417\u0410\u0426\u0418\u042f: \u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d GPU acceleration *\/\n.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 will-change: transform;\n transform: translateZ(0);\n}<\/p>\n<p>\/* \u0424\u043e\u043a\u0443\u0441\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f accessibility *\/\n.ctrl-btn:focus,\n.fullscreen-btn:focus {\n outline: none;\n box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.5);\n}<\/p>\n<p>.ctrl-btn:focus-visible,\n.fullscreen-btn:focus-visible {\n outline: none;\n box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.8);\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) translateZ(0);\n background: var(--bifa-heritage-gold);\n}<\/p>\n<p>.ctrl-btn:active {\n transform: scale(0.95) translateZ(0);\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>\/* \u0411\u0443\u0444\u0435\u0440 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 *\/\n.progress-buffer {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n background: rgba(255, 255, 255, 0.4);\n border-radius: 4px;\n width: 0;\n transition: width 0.3s ease;\n}<\/p>\n<p>.progress-bar {\n width: 0;\n height: 100%;\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700);\n transition: width 0.1s linear;\n border-radius: 4px;\n position: relative;\n z-index: 2;\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: #ffd700;\n border-radius: 50%;\n box-shadow: 0 0 10px rgba(212, 175, 55, 0.6);\n opacity: 0;\n transition: opacity 0.2s ease;\n}<\/p>\n<p>.progress:hover .progress-bar::after,\n.progress.dragging .progress-bar::after {\n opacity: 1;\n}<\/p>\n<p>\/* \u0423\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u043d\u0430\u044f \u0437\u043e\u043d\u0430 \u043a\u043b\u0438\u043a\u0430 \u0434\u043b\u044f progress *\/\n.progress::before {\n content: '';\n position: absolute;\n top: -10px;\n left: 0;\n right: 0;\n bottom: -10px;\n z-index: 1;\n}<\/p>\n<p>.time-display {\n color: 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: 100px;\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), #ffd700);\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 will-change: transform;\n transform: translateZ(0);\n}<\/p>\n<p>.fullscreen-btn svg {\n width: 24px;\n height: 24px;\n fill: var(--bifa-deep-navy);\n pointer-events: none;\n}<\/p>\n<p>.fullscreen-btn:hover {\n transform: scale(1.1) translateZ(0);\n background: var(--bifa-heritage-gold);\n}<\/p>\n<p>\/* ========= KEYBOARD HINT ========= *\/\n.keyboard-hint {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background: rgba(10, 31, 68, 0.9);\n padding: 15px 25px;\n border-radius: 10px;\n font-family: var(--bifa-font-heading);\n font-size: 1rem;\n color: white;\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.3s ease, visibility 0.3s ease;\n pointer-events: none;\n z-index: 50;\n text-align: center;\n}<\/p>\n<p>.keyboard-hint.visible {\n opacity: 1;\n visibility: visible;\n}<\/p>\n<p>.keyboard-hint kbd {\n display: inline-block;\n background: var(--bifa-heritage-gold);\n color: var(--bifa-deep-navy);\n padding: 4px 10px;\n border-radius: 5px;\n font-weight: 700;\n margin: 0 5px;\n}<\/p>\n<p>.video-content {\n margin-top: 60px;\n text-align: center;\n animation: fadeInUp 1.2s ease;\n}<\/p>\n<p>@keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(40px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>.stats-bar {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n gap: 80px;\n margin-bottom: 50px;\n padding: 40px 0;\n background: linear-gradient(135deg, rgba(212, 175, 55, 0.05) 0%, rgba(212, 175, 55, 0.08) 100%);\n border-radius: 20px;\n backdrop-filter: blur(10px);\n position: relative;\n}<\/p>\n<p>.stats-bar::after {\n content: '*As of 2024, based on World Bank\/UN data.';\n position: absolute;\n bottom: 10px;\n left: 50%;\n transform: translateX(-50%);\n font-size: 0.75rem;\n color: #999;\n font-family: var(--bifa-font-body);\n font-style: italic;\n}<\/p>\n<p>.stat-item {\n text-align: center;\n position: relative;\n}<\/p>\n<p>.stat-number {\n font-family: var(--bifa-font-heading);\n font-size: 3rem;\n font-weight: 900;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n margin-bottom: 8px;\n}<\/p>\n<p>.stat-label {\n font-family: var(--bifa-font-heading);\n font-size: 0.9rem;\n font-weight: 600;\n letter-spacing: 1px;\n text-transform: uppercase;\n color: var(--bifa-deep-navy);\n}<\/p>\n<p>.video-slogan {\n max-width: 900px;\n margin: 0 auto 50px;\n padding: 0 20px;\n font-size: clamp(1.1rem, 2vw, 1.4rem);\n line-height: 1.7;\n color: var(--bifa-deep-navy);\n font-family: var(--bifa-font-body);\n}<\/p>\n<p>.slogan-main {\n display: block;\n font-family: var(--bifa-font-heading);\n font-weight: 700;\n font-size: clamp(1.3rem, 2.2vw, 1.6rem);\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n margin-bottom: 15px;\n}<\/p>\n<p>.buttons-container {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n gap: 30px;\n}<\/p>\n<p>\/* \u041a\u041d\u041e\u041f\u041a\u0418: \u0416\u0418\u0420\u041d\u042b\u0419 \u0411\u0415\u041b\u042b\u0419 \u0422\u0415\u041a\u0421\u0422 \u0421 \u041f\u0420\u0418\u041e\u0420\u0418\u0422\u0415\u0422\u041e\u041c *\/\n.cta-button {\n padding: 20px 45px;\n font-family: var(--bifa-font-heading);\n font-size: 1rem;\n font-weight: 900 !important;\n text-transform: uppercase;\n border-radius: 50px;\n text-decoration: none;\n position: relative;\n overflow: hidden;\n transition: all 0.3s ease;\n letter-spacing: 1px;\n color: #FFFFFF !important;\n border: 2px solid transparent;\n text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;\n will-change: transform;\n transform: translateZ(0);\n}<\/p>\n<p>.cta-button.primary {\n background: linear-gradient(135deg, var(--bifa-deep-navy) 0%, #162e5a 100%);\n box-shadow: 0 15px 40px rgba(10, 31, 68, 0.3);\n}<\/p>\n<p>.cta-button.secondary {\n background: linear-gradient(135deg, var(--bifa-civic-green) 0%, #2a8a5e 100%);\n box-shadow: 0 15px 40px rgba(29, 97, 67, 0.3);\n}<\/p>\n<p>.cta-button:hover {\n transform: translateY(-5px) translateZ(0);\n}<\/p>\n<p>\/* \u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u044f \u0431\u0435\u043b\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430 *\/\n.cta-button * {\n color: #FFFFFF !important;\n}<\/p>\n<p>@media (max-width: 768px) {\n .bifa-video-section { padding: 60px 0; }\n .about-title { font-size: 2.5rem; }\n .subtitle-container { height: 50px; }\n .stats-bar { gap: 50px; padding: 30px 0 50px; }\n .stat-number { font-size: 2.2rem; }\n .buttons-container { flex-direction: column; align-items: center; }\n .cta-button { width: 280px; text-align: center; }\n .controls-row { gap: 10px; }\n .ctrl-btn { width: 42px; height: 42px; }\n .ctrl-btn svg { width: 20px; height: 20px; }\n .fullscreen-btn { width: 42px; height: 42px; }\n .fullscreen-btn svg { width: 20px; height: 20px; }\n .volume-slider { width: 60px; }\n .time-display { min-width: 80px; font-size: 12px; }\n}<\/p>\n<p>@media (max-width: 480px) {\n .about-title { font-size: 2rem; }\n .subtitle-container { height: 40px; margin-bottom: 15px; padding: 10px 0; }\n .about-subtitle, .about-slogan { font-size: 1rem; letter-spacing: 1px; }\n .video-wrapper { border-radius: 15px; }\n .cta-button { width: 250px; font-size: 0.9rem; padding: 18px 35px; }\n .controls { padding: 20px 15px 10px; }\n .ctrl-btn { width: 38px; height: 38px; }\n .ctrl-btn svg { width: 18px; height: 18px; }\n .fullscreen-btn { width: 38px; height: 38px; }\n .fullscreen-btn svg { width: 18px; height: 18px; }\n .volume-container { display: none; }\n .stats-bar { padding-bottom: 60px; }\n .time-display { min-width: 70px; }\n}<\/p>\n<p>\/* \u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0434\u043b\u044f iOS\/Safari *\/\n@supports (-webkit-touch-callout: none) {\n .ctrl-btn svg,\n .fullscreen-btn svg {\n transform: translateZ(0);\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n }\n}\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"video-section-wrapper\">\n<div class=\"bg-particles\"><\/div>\n<section class=\"bifa-video-section\">\n<div class=\"video-container\">\n<div class=\"about-header\">\n <a href=\"\/about\" class=\"about-title\">Bem-vindo \u00e0 BIFA+<\/a><\/p>\n<div class=\"subtitle-container\">\n<p class=\"about-subtitle\">Alian\u00e7a Internacional de Futebol do BRICS<\/p>\n<p class=\"about-slogan\">Unindo o Sul Global por meio do futebol, do desenvolvimento da juventude e do interc\u00e2mbio cultural.<\/p>\n<\/p><\/div>\n<p class=\"about-description\">\n Uma alian\u00e7a esportiva e cultural global que conecta os <span class=\"highlight\">Sul Global<\/span> through football,<br \/>\n innovation, and youth empowerment. Founded by Dr. <span class=\"highlight\">Salim Humaid Almazaini<\/span> from the UAE,<br \/>\n BIFA+ creates bridges between nations through <span class=\"highlight\">diplomacia esportiva<\/span>,<br \/>\n <span class=\"highlight\">interc\u00e2mbio cultural<\/span>e <span class=\"highlight\">integra\u00e7\u00e3o de tecnologia<\/span>.\n <\/p>\n<\/p><\/div>\n<div class=\"video-wrapper\" id=\"videoWrapper\" tabindex=\"0\" role=\"application\" aria-label=\"Video player\">\n <\/p>\n<div class=\"video-loading-overlay\" id=\"videoLoadingOverlay\">\n<div class=\"loading-iframe-container\">\n <iframe \n id=\"loadingIframe\"\n class=\"loading-iframe\"\n src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Logo\/Get.html\"\n title=\"Tela de carregamento do BIFA+\"\n loading=\"eager\"><br \/>\n <\/iframe>\n <\/div>\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\">\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:#ffd700\"\/>\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=\"#0A1F44\" font-family=\"Montserrat\" font-size=\"24\" font-weight=\"bold\">BIFA+<\/text>\n <\/svg>\n <\/div>\n<div class=\"loader-text\">Carregando BIFA+ Experience...<\/div>\n<div class=\"loader-progress\">\n<div class=\"loader-progress-bar\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"video-error-overlay\" id=\"videoErrorOverlay\">\n<div class=\"error-icon\">\n <svg viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"\/>\n <\/svg>\n <\/div>\n<div class=\"error-message\">Video failed to load<\/div>\n<p> <button class=\"error-retry-btn\" id=\"errorRetryBtn\">Try Again<\/button>\n <\/div>\n<p> <\/p>\n<div class=\"keyboard-hint\" id=\"keyboardHint\">\n <kbd>Space<\/kbd> Reproduzir\/Pausar\n <\/div>\n<p> <video id=\"heroVideo\" autoplay muted loop playsinline preload=\"metadata\"><source src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/video.mp4\" type=\"video\/mp4\">Seu navegador n\u00e3o suporta a tag de v\u00eddeo.<\/video><\/p>\n<div class=\"controls\" id=\"controls\">\n<div class=\"controls-row\">\n <button class=\"ctrl-btn\" id=\"playPause\" aria-label=\"Play\" aria-pressed=\"false\"><br \/>\n <svg viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M8 5v14l11-7z\"\/><\/svg><br \/>\n <\/button><\/p>\n<div class=\"progress-container\">\n<div class=\"progress\" id=\"progress\" role=\"slider\" aria-label=\"Progresso do v\u00eddeo\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"0\" tabindex=\"0\">\n<div class=\"progress-buffer\" id=\"progressBuffer\"><\/div>\n<div class=\"progress-bar\" id=\"progressBar\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"time-display\" id=\"timeDisplay\">0:00 \/ 0:00<\/div>\n<div class=\"volume-container\">\n <button class=\"ctrl-btn\" id=\"muteToggle\" aria-label=\"Mute\" aria-pressed=\"true\"><br \/>\n <svg viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M4 9v6h4l5 5V4L8 9H4z\"\/><\/svg><br \/>\n <\/button><\/p>\n<div class=\"volume-slider\" id=\"volumeSlider\" role=\"slider\" aria-label=\"Volume\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"100\" tabindex=\"0\">\n<div class=\"volume-bar\" id=\"volumeBar\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <button class=\"fullscreen-btn\" id=\"fullscreenBtn\" aria-label=\"Enter fullscreen\"><br \/>\n <svg viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z\"\/>\n <\/svg><br \/>\n <\/button>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"video-content\">\n<div class=\"stats-bar\">\n<div class=\"stat-item\">\n<div class=\"stat-number\">11+<\/div>\n<div class=\"stat-label\">Na\u00e7\u00f5es do Sul Global<\/div>\n<\/p><\/div>\n<div class=\"stat-item\">\n<div class=\"stat-number\">3.8B<\/div>\n<div class=\"stat-label\">Popula\u00e7\u00e3o Unida<\/div>\n<\/p><\/div>\n<div class=\"stat-item\">\n<div class=\"stat-number\">2024<\/div>\n<div class=\"stat-label\">Ano de funda\u00e7\u00e3o<\/div>\n<\/p><\/div>\n<div class=\"stat-item\">\n<div class=\"stat-number\">\u221e<\/div>\n<div class=\"stat-label\">Potencial futuro<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"video-slogan\">\n <span class=\"slogan-main\">BIFA+: Onde a energia do Sul Global se transforma em di\u00e1logo internacional sobre futebol<\/span><br \/>\n We envision a world united through sport \u2013 where football becomes a symbol of peace, cooperation, and shared values.<br \/>\n Through our comprehensive programs including <strong>BIFA+ Mulheres<\/strong>, <strong>Iniciativas para jovens e universidades<\/strong>,<br \/>\n <strong>Jogos de eFootball<\/strong>e o <strong>Rede de cidades<\/strong>, we’re building bridges between cultures<br \/>\n and creating opportunities for the next generation of global leaders.\n <\/div>\n<div class=\"buttons-container\">\n <a href=\"https:\/\/bifa.ai\/initiatives\/\" class=\"cta-button primary\">Explorar programas<\/a><br \/>\n <a href=\"https:\/\/bifa.ai\/about\/#core-team\" class=\"cta-button secondary\">Conhe\u00e7a a equipe<\/a>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<\/div>\n<p><script>\n(function() {\n 'use strict';<\/p>\n<p> \/\/ ========= DOM ELEMENTS =========\n const video = document.getElementById('heroVideo');\n const videoWrapper = document.getElementById('videoWrapper');\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 progressBuffer = document.getElementById('progressBuffer');\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 const loadingIframe = document.getElementById('loadingIframe');\n const fallbackLoader = document.getElementById('fallbackLoader');\n const errorOverlay = document.getElementById('videoErrorOverlay');\n const errorRetryBtn = document.getElementById('errorRetryBtn');\n const keyboardHint = document.getElementById('keyboardHint');\n const particlesContainer = document.querySelector('.bg-particles');<\/p>\n<p> \/\/ ========= STATE =========\n let videoReady = false;\n let isDraggingProgress = false;\n let isDraggingVolume = false;\n let touchControlsTimeout = null;\n let keyboardHintTimeout = null;\n let isTouchDevice = false;\n let savedVolume = 1;<\/p>\n<p> \/\/ ========= ICONS =========\n const icons = {\n play: '<svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M8 5v14l11-7z\"\/><\/svg>',\n pause: '<svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M6 19h4V5H6zm8 0h4V5h-4z\"\/><\/svg>',\n volumeHigh: '<svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z\"\/><\/svg>',\n volumeLow: '<svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M18.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z\"\/><\/svg>',\n volumeMuted: '<svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><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 fullscreenEnter: '<svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z\"\/><\/svg>',\n fullscreenExit: '<svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z\"\/><\/svg>'\n };<\/p>\n<p> \/\/ ========= UTILITY FUNCTIONS =========\n function formatTime(seconds) {\n if (isNaN(seconds) || !isFinite(seconds)) return '0:00';\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> function clamp(value, min, max) {\n return Math.min(Math.max(value, min), max);\n }<\/p>\n<p> function detectTouchDevice() {\n isTouchDevice = ('ontouchstart' in window) || \n (navigator.maxTouchPoints > 0) || \n (navigator.msMaxTouchPoints > 0);\n return isTouchDevice;\n }<\/p>\n<p> \/\/ ========= LOADING SCREEN =========\n function handleIframeLoad() {\n console.log('Loading screen iframe loaded');\n }<\/p>\n<p> function handleIframeError() {\n console.log('Loading screen iframe failed, showing fallback');\n if (loadingIframe) loadingIframe.style.display = 'none';\n if (fallbackLoader) fallbackLoader.classList.add('active');\n }<\/p>\n<p> function hideLoadingScreen() {\n if (videoReady && loadingOverlay && !loadingOverlay.classList.contains('hidden')) {\n setTimeout(() => {\n loadingOverlay.classList.add('hidden');\n setTimeout(() => {\n if (loadingOverlay.parentNode) {\n loadingOverlay.style.display = 'none';\n }\n }, 800);\n }, 1500);\n }\n }<\/p>\n<p> function checkVideoReady() {\n if (video.readyState >= 3 && !videoReady) {\n videoReady = true;\n hideLoadingScreen();\n }\n }<\/p>\n<p> \/\/ ========= ERROR HANDLING =========\n function showError() {\n if (errorOverlay) {\n errorOverlay.classList.add('active');\n }\n if (loadingOverlay) {\n loadingOverlay.classList.add('hidden');\n }\n }<\/p>\n<p> function hideError() {\n if (errorOverlay) {\n errorOverlay.classList.remove('active');\n }\n }<\/p>\n<p> function retryVideo() {\n hideError();\n if (loadingOverlay) {\n loadingOverlay.classList.remove('hidden');\n loadingOverlay.style.display = 'flex';\n }\n videoReady = false;\n video.load();\n video.play().catch(() => {});\n }<\/p>\n<p> \/\/ ========= PLAY\/PAUSE =========\n function togglePlay() {\n if (video.paused) {\n video.play().catch(err => console.warn('Play failed:', err));\n } else {\n video.pause();\n }\n }<\/p>\n<p> function updatePlayButton() {\n const isPaused = video.paused;\n playBtn.innerHTML = isPaused ? icons.play : icons.pause;\n playBtn.setAttribute('aria-label', isPaused ? 'Play' : 'Pause');\n playBtn.setAttribute('aria-pressed', !isPaused);\n }<\/p>\n<p> \/\/ ========= VOLUME =========\n function updateVolumeIcon() {\n let icon;\n if (video.muted || video.volume === 0) {\n icon = icons.volumeMuted;\n } else if (video.volume < 0.5) {\n icon = icons.volumeLow;\n } else {\n icon = icons.volumeHigh;\n }\n muteBtn.innerHTML = icon;\n muteBtn.setAttribute('aria-label', video.muted ? 'Unmute' : 'Mute');\n muteBtn.setAttribute('aria-pressed', video.muted);\n }\n\n function updateVolumeBar() {\n const vol = video.muted ? 0 : video.volume;\n volumeBar.style.width = (vol * 100) + '%';\n volumeSlider.setAttribute('aria-valuenow', Math.round(vol * 100));\n }\n\n function setVolume(value) {\n video.volume = clamp(value, 0, 1);\n if (value > 0) {\n video.muted = false;\n savedVolume = value;\n }\n updateVolumeIcon();\n updateVolumeBar();\n }<\/p>\n<p> function toggleMute() {\n if (video.muted || video.volume === 0) {\n video.muted = false;\n video.volume = savedVolume > 0 ? savedVolume : 0.5;\n } else {\n savedVolume = video.volume;\n video.muted = true;\n }\n updateVolumeIcon();\n updateVolumeBar();\n }<\/p>\n<p> \/\/ ========= PROGRESS =========\n function updateProgress() {\n if (!isDraggingProgress && video.duration) {\n const percent = (video.currentTime \/ video.duration) * 100;\n progressBar.style.width = percent + '%';\n progress.setAttribute('aria-valuenow', Math.round(percent));\n }\n timeDisplay.textContent = `${formatTime(video.currentTime)} \/ ${formatTime(video.duration)}`;\n }<\/p>\n<p> function updateBuffer() {\n if (video.buffered.length > 0) {\n const bufferedEnd = video.buffered.end(video.buffered.length - 1);\n const duration = video.duration;\n if (duration > 0) {\n progressBuffer.style.width = (bufferedEnd \/ duration * 100) + '%';\n }\n }\n }<\/p>\n<p> function seekTo(percent) {\n if (video.duration) {\n video.currentTime = clamp(percent, 0, 1) * video.duration;\n }\n }<\/p>\n<p> function getProgressPercent(e, element) {\n const rect = element.getBoundingClientRect();\n const clientX = e.touches ? e.touches[0].clientX : e.clientX;\n return clamp((clientX - rect.left) \/ rect.width, 0, 1);\n }<\/p>\n<p> \/\/ ========= FULLSCREEN =========\n function isFullscreen() {\n return !!(document.fullscreenElement || document.webkitFullscreenElement || \n document.mozFullScreenElement || document.msFullscreenElement);\n }<\/p>\n<p> function enterFullscreen() {\n const elem = videoWrapper;\n if (elem.requestFullscreen) {\n elem.requestFullscreen();\n } else if (elem.webkitRequestFullscreen) {\n elem.webkitRequestFullscreen();\n } else if (elem.mozRequestFullScreen) {\n elem.mozRequestFullScreen();\n } else if (elem.msRequestFullscreen) {\n elem.msRequestFullscreen();\n } else if (video.webkitEnterFullscreen) {\n \/\/ iOS Safari fallback\n video.webkitEnterFullscreen();\n }\n }<\/p>\n<p> function exitFullscreen() {\n if (document.exitFullscreen) {\n document.exitFullscreen();\n } else if (document.webkitExitFullscreen) {\n document.webkitExitFullscreen();\n } else if (document.mozCancelFullScreen) {\n document.mozCancelFullScreen();\n } else if (document.msExitFullscreen) {\n document.msExitFullscreen();\n }\n }<\/p>\n<p> function toggleFullscreen() {\n if (isFullscreen()) {\n exitFullscreen();\n } else {\n enterFullscreen();\n }\n }<\/p>\n<p> function updateFullscreenButton() {\n const fs = isFullscreen();\n fullscreenBtn.innerHTML = fs ? icons.fullscreenExit : icons.fullscreenEnter;\n fullscreenBtn.setAttribute('aria-label', fs ? 'Exit fullscreen' : 'Enter fullscreen');\n }<\/p>\n<p> \/\/ ========= KEYBOARD HINT =========\n function showKeyboardHint(text) {\n keyboardHint.innerHTML = text;\n keyboardHint.classList.add('visible');<\/p>\n<p> clearTimeout(keyboardHintTimeout);\n keyboardHintTimeout = setTimeout(() => {\n keyboardHint.classList.remove('visible');\n }, 1000);\n }<\/p>\n<p> \/\/ ========= TOUCH CONTROLS =========\n function showTouchControls() {\n videoWrapper.classList.add('touch-active');\n clearTimeout(touchControlsTimeout);\n touchControlsTimeout = setTimeout(() => {\n if (!video.paused) {\n videoWrapper.classList.remove('touch-active');\n }\n }, 3000);\n }<\/p>\n<p> \/\/ ========= EVENT LISTENERS =========<\/p>\n<p> \/\/ Loading iframe events\n if (loadingIframe) {\n loadingIframe.addEventListener('load', handleIframeLoad);\n loadingIframe.addEventListener('error', handleIframeError);\n }<\/p>\n<p> \/\/ Video events\n video.addEventListener('loadeddata', checkVideoReady);\n video.addEventListener('canplay', checkVideoReady);\n video.addEventListener('canplaythrough', () => {\n videoReady = true;\n hideLoadingScreen();\n });\n video.addEventListener('play', updatePlayButton);\n video.addEventListener('pause', updatePlayButton);\n video.addEventListener('timeupdate', updateProgress);\n video.addEventListener('progress', updateBuffer);\n video.addEventListener('volumechange', () => {\n updateVolumeIcon();\n updateVolumeBar();\n });\n video.addEventListener('error', (e) => {\n console.error('Video error:', e);\n showError();\n });\n video.addEventListener('stalled', () => {\n console.warn('Video stalled');\n });<\/p>\n<p> \/\/ Fallback: \u0441\u043a\u0440\u044b\u0442\u044c loading \u0447\u0435\u0440\u0435\u0437 8 \u0441\u0435\u043a\u0443\u043d\u0434\n setTimeout(() => {\n if (!loadingOverlay.classList.contains('hidden')) {\n videoReady = true;\n hideLoadingScreen();\n }\n }, 8000);<\/p>\n<p> \/\/ Error retry button\n if (errorRetryBtn) {\n errorRetryBtn.addEventListener('click', retryVideo);\n }<\/p>\n<p> \/\/ Play\/Pause button\n playBtn.addEventListener('click', togglePlay);<\/p>\n<p> \/\/ Mute button\n muteBtn.addEventListener('click', toggleMute);<\/p>\n<p> \/\/ Progress bar - Click\n progress.addEventListener('click', (e) => {\n if (!isDraggingProgress) {\n seekTo(getProgressPercent(e, progress));\n }\n });<\/p>\n<p> \/\/ Progress bar - Drag (mouse)\n progress.addEventListener('mousedown', (e) => {\n isDraggingProgress = true;\n progress.classList.add('dragging');\n seekTo(getProgressPercent(e, progress));\n });<\/p>\n<p> document.addEventListener('mousemove', (e) => {\n if (isDraggingProgress) {\n const percent = getProgressPercent(e, progress);\n progressBar.style.width = (percent * 100) + '%';\n seekTo(percent);\n }\n });<\/p>\n<p> document.addEventListener('mouseup', () => {\n if (isDraggingProgress) {\n isDraggingProgress = false;\n progress.classList.remove('dragging');\n }\n });<\/p>\n<p> \/\/ Progress bar - Drag (touch)\n progress.addEventListener('touchstart', (e) => {\n isDraggingProgress = true;\n progress.classList.add('dragging');\n seekTo(getProgressPercent(e, progress));\n }, { passive: true });<\/p>\n<p> progress.addEventListener('touchmove', (e) => {\n if (isDraggingProgress) {\n const percent = getProgressPercent(e, progress);\n progressBar.style.width = (percent * 100) + '%';\n seekTo(percent);\n }\n }, { passive: true });<\/p>\n<p> progress.addEventListener('touchend', () => {\n isDraggingProgress = false;\n progress.classList.remove('dragging');\n });<\/p>\n<p> \/\/ Volume slider - Click\n volumeSlider.addEventListener('click', (e) => {\n if (!isDraggingVolume) {\n setVolume(getProgressPercent(e, volumeSlider));\n }\n });<\/p>\n<p> \/\/ Volume slider - Drag (mouse)\n volumeSlider.addEventListener('mousedown', (e) => {\n isDraggingVolume = true;\n setVolume(getProgressPercent(e, volumeSlider));\n });<\/p>\n<p> document.addEventListener('mousemove', (e) => {\n if (isDraggingVolume) {\n setVolume(getProgressPercent(e, volumeSlider));\n }\n });<\/p>\n<p> document.addEventListener('mouseup', () => {\n isDraggingVolume = false;\n });<\/p>\n<p> \/\/ Volume slider - Drag (touch)\n volumeSlider.addEventListener('touchstart', (e) => {\n isDraggingVolume = true;\n setVolume(getProgressPercent(e, volumeSlider));\n }, { passive: true });<\/p>\n<p> volumeSlider.addEventListener('touchmove', (e) => {\n if (isDraggingVolume) {\n setVolume(getProgressPercent(e, volumeSlider));\n }\n }, { passive: true });<\/p>\n<p> volumeSlider.addEventListener('touchend', () => {\n isDraggingVolume = false;\n });<\/p>\n<p> \/\/ Fullscreen button\n fullscreenBtn.addEventListener('click', toggleFullscreen);<\/p>\n<p> \/\/ Double-click for fullscreen\n videoWrapper.addEventListener('dblclick', (e) => {\n \/\/ \u041d\u0435 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u043d\u0430 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0430\u0445\n if (e.target.closest('.controls')) return;\n toggleFullscreen();\n });<\/p>\n<p> \/\/ Fullscreen change events\n const fullscreenEvents = ['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange', 'MSFullscreenChange'];\n fullscreenEvents.forEach(event => {\n document.addEventListener(event, updateFullscreenButton);\n });<\/p>\n<p> \/\/ Touch: tap to show\/hide controls\n videoWrapper.addEventListener('touchstart', (e) => {\n if (!e.target.closest('.controls') && !e.target.closest('.ctrl-btn') && !e.target.closest('.fullscreen-btn')) {\n showTouchControls();\n }\n }, { passive: true });<\/p>\n<p> \/\/ Click on video to play\/pause (but not on controls)\n videoWrapper.addEventListener('click', (e) => {\n if (!e.target.closest('.controls') && \n !e.target.closest('.ctrl-btn') && \n !e.target.closest('.fullscreen-btn') &&\n !e.target.closest('.video-loading-overlay') &&\n !e.target.closest('.video-error-overlay')) {<\/p>\n<p> \/\/ \u041d\u0430 touch \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 \u043f\u0435\u0440\u0432\u044b\u0439 \u0442\u0430\u043f \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044b\n if (isTouchDevice && !videoWrapper.classList.contains('touch-active')) {\n showTouchControls();\n return;\n }<\/p>\n<p> togglePlay();\n }\n });<\/p>\n<p> \/\/ ========= KEYBOARD CONTROLS =========\n videoWrapper.addEventListener('keydown', (e) => {\n \/\/ \u0418\u0433\u043d\u043e\u0440\u0438\u0440\u0443\u0435\u043c \u0435\u0441\u043b\u0438 \u0444\u043e\u043a\u0443\u0441 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0430\u0445\n if (e.target.tagName === 'BUTTON') return;<\/p>\n<p> switch (e.key) {\n case ' ':\n case 'k':\n e.preventDefault();\n togglePlay();\n showKeyboardHint(video.paused ? '<kbd>Space<\/kbd> Paused' : '<kbd>Space<\/kbd> Playing');\n break;<\/p>\n<p> case 'ArrowLeft':\n e.preventDefault();\n video.currentTime = Math.max(0, video.currentTime - 5);\n showKeyboardHint('<kbd>\u2190<\/kbd> -5s');\n break;<\/p>\n<p> case 'ArrowRight':\n e.preventDefault();\n video.currentTime = Math.min(video.duration, video.currentTime + 5);\n showKeyboardHint('<kbd>\u2192<\/kbd> +5s');\n break;<\/p>\n<p> case 'ArrowUp':\n e.preventDefault();\n setVolume(video.volume + 0.1);\n showKeyboardHint(`<kbd>\u2191<\/kbd> Volume ${Math.round(video.volume * 100)}%`);\n break;<\/p>\n<p> case 'ArrowDown':\n e.preventDefault();\n setVolume(video.volume - 0.1);\n showKeyboardHint(`<kbd>\u2193<\/kbd> Volume ${Math.round(video.volume * 100)}%`);\n break;<\/p>\n<p> case 'm':\n case 'M':\n e.preventDefault();\n toggleMute();\n showKeyboardHint(video.muted ? '<kbd>M<\/kbd> Muted' : '<kbd>M<\/kbd> Unmuted');\n break;<\/p>\n<p> case 'f':\n case 'F':\n e.preventDefault();\n toggleFullscreen();\n break;<\/p>\n<p> case 'Home':\n e.preventDefault();\n video.currentTime = 0;\n showKeyboardHint('<kbd>Home<\/kbd> Start');\n break;<\/p>\n<p> case 'End':\n e.preventDefault();\n video.currentTime = video.duration;\n showKeyboardHint('<kbd>End<\/kbd> End');\n break;<\/p>\n<p> \/\/ \u0426\u0438\u0444\u0440\u044b 0-9 \u0434\u043b\u044f seek \u043a \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0443 \u0432\u0438\u0434\u0435\u043e\n case '0': case '1': case '2': case '3': case '4':\n case '5': case '6': case '7': case '8': case '9':\n e.preventDefault();\n const percent = parseInt(e.key) \/ 10;\n video.currentTime = video.duration * percent;\n showKeyboardHint(`<kbd>${e.key}<\/kbd> ${percent * 100}%`);\n break;\n }\n });<\/p>\n<p> \/\/ Progress bar keyboard\n progress.addEventListener('keydown', (e) => {\n const step = video.duration \/ 100; \/\/ 1%<\/p>\n<p> switch (e.key) {\n case 'ArrowLeft':\n e.preventDefault();\n video.currentTime = Math.max(0, video.currentTime - step * 5);\n break;\n case 'ArrowRight':\n e.preventDefault();\n video.currentTime = Math.min(video.duration, video.currentTime + step * 5);\n break;\n }\n });<\/p>\n<p> \/\/ Volume slider keyboard\n volumeSlider.addEventListener('keydown', (e) => {\n switch (e.key) {\n case 'ArrowLeft':\n case 'ArrowDown':\n e.preventDefault();\n setVolume(video.volume - 0.05);\n break;\n case 'ArrowRight':\n case 'ArrowUp':\n e.preventDefault();\n setVolume(video.volume + 0.05);\n break;\n }\n });<\/p>\n<p> \/\/ ========= PARTICLES =========\n function createParticles() {\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() * 15 + 's';\n particle.style.animationDuration = (12 + 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 \/\/ ========= INIT =========\n function init() {\n detectTouchDevice();\n updatePlayButton();\n updateVolumeIcon();\n updateVolumeBar();\n updateFullscreenButton();\n createParticles();\n \n \/\/ \u041d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\n video.volume = 1;\n savedVolume = 1;\n }\n\n \/\/ \u0417\u0430\u043f\u0443\u0441\u043a \u043f\u0440\u0438 DOM ready\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', init);\n } else {\n init();\n }\n\n \/\/ ========= CLEANUP (\u0434\u043b\u044f SPA) =========\n window.addEventListener('beforeunload', () => {\n fullscreenEvents.forEach(event => {\n document.removeEventListener(event, updateFullscreenButton);\n });\n });<\/p>\n<p>})();\n<\/script><br \/>\n<\/body><br \/>\n<\/html>\n<\/div>\n<div>\n<p> <!DOCTYPE html><br \/>\n<html lang=\"ru\"><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+ News Center – Premium Design<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n\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&family=Cairo:wght@300;400;500;600;700;800&family=Tajawal:wght@300;400;500;700;800&display=swap\" rel=\"stylesheet\">\n<style>\n\/* ========= \u0413\u041b\u041e\u0411\u0410\u041b\u042c\u041d\u042b\u0415 \u041f\u0415\u0420\u0415\u041c\u0415\u041d\u041d\u042b\u0415 BIFA+ ========= *\/\n:root {\n \/* \u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430 BIFA+ *\/\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 --bifa-gray-light: #F8F9FA;\n --bifa-gray: #6C757D;<\/p>\n<p> \/* \u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0448\u0440\u0438\u0444\u0442\u044b BIFA+ *\/\n --bifa-font-heading: 'Montserrat', 'Cairo', sans-serif;\n --bifa-font-body: 'Poppins', 'Tajawal', sans-serif;\n --bifa-font-arabic: 'Cairo', 'Tajawal', 'GE SS Text', sans-serif;<\/p>\n<p> \/* \u041f\u0440\u0435\u043c\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0442\u0435\u043d\u0438 \u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u044b *\/\n --bifa-shadow-premium: 0 25px 80px rgba(10, 31, 68, 0.15);\n --bifa-shadow-hover: 0 35px 100px rgba(10, 31, 68, 0.2);\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 ========= *\/\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}<\/p>\n<p>body {\n font-family: var(--bifa-font-body);\n background: var(--bifa-bright-white);\n overflow-x: hidden;\n color: var(--bifa-soft-black);\n}<\/p>\n<p>\/* ========= NEWS SECTION WRAPPER ========= *\/\n.news-section-wrapper {\n width: 100vw;\n position: relative;\n left: 50%;\n margin-left: -50vw;\n background: transparent;\n overflow: hidden;\n}<\/p>\n<p>\/* ========= MAIN NEWS SECTION ========= *\/\n.bifa-news-section {\n min-height: auto;\n padding: 40px 0 60px 0;\n position: relative;\n background: transparent;\n}<\/p>\n<p>\/* ========= ANIMATED BACKGROUND ========= *\/\n.news-bg-animation {\n position: absolute;\n width: 100%;\n height: 100%;\n overflow: hidden;\n z-index: 1;\n top: 0;\n left: 0;\n}<\/p>\n<p>\/* \u0417\u043e\u043b\u043e\u0442\u044b\u0435 \u0447\u0430\u0441\u0442\u0438\u0446\u044b - \u0442\u0430\u043a\u0438\u0435 \u0436\u0435 \u043a\u0430\u043a \u0432 \u0432\u0438\u0434\u0435\u043e \u0441\u0435\u043a\u0446\u0438\u0438 *\/\n.news-particle {\n position: absolute;\n width: 3px;\n height: 3px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n border-radius: 50%;\n animation: floatNews 20s infinite linear;\n box-shadow: 0 0 6px rgba(212, 175, 55, 0.2);\n opacity: 0.2;\n will-change: transform;\n}<\/p>\n<p>@keyframes floatNews {\n 0% {\n transform: translateY(100vh) translateX(0) rotate(0deg);\n opacity: 0;\n }\n 10% { opacity: 0.3; }\n 90% { opacity: 0.3; }\n 100% {\n transform: translateY(-100vh) translateX(80px) rotate(360deg);\n opacity: 0;\n }\n}<\/p>\n<p>\/* \u041f\u043b\u0430\u0432\u0430\u044e\u0449\u0438\u0435 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0444\u0438\u0433\u0443\u0440\u044b *\/\n.floating-shape {\n position: absolute;\n border-radius: 50%;\n filter: blur(120px);\n animation: morphFloat 25s ease-in-out infinite;\n pointer-events: none;\n opacity: 0.5;\n}<\/p>\n<p>.shape-news-1 {\n width: 400px;\n height: 400px;\n background: radial-gradient(circle at 30% 30%, rgba(212, 175, 55, 0.08), transparent);\n top: -200px;\n right: -200px;\n}<\/p>\n<p>.shape-news-2 {\n width: 350px;\n height: 350px;\n background: radial-gradient(circle at 70% 70%, rgba(10, 31, 68, 0.05), transparent);\n bottom: -175px;\n left: -175px;\n animation-delay: 8s;\n}<\/p>\n<p>.shape-news-3 {\n width: 300px;\n height: 300px;\n background: radial-gradient(circle at 50% 50%, rgba(29, 97, 67, 0.06), transparent);\n top: 40%;\n left: 60%;\n animation-delay: 16s;\n}<\/p>\n<p>@keyframes morphFloat {\n 0%, 100% { \n transform: translate(0, 0) scale(1) rotate(0deg);\n filter: blur(100px);\n }\n 25% { \n transform: translate(100px, -80px) scale(1.2) rotate(90deg);\n filter: blur(120px);\n }\n 50% { \n transform: translate(-80px, 100px) scale(0.8) rotate(180deg);\n filter: blur(80px);\n }\n 75% { \n transform: translate(-120px, -60px) scale(1.1) rotate(270deg);\n filter: blur(110px);\n }\n}<\/p>\n<p>\/* ========= CONTAINER ========= *\/\n.bifa-container {\n max-width: 1400px;\n margin: 0 auto;\n padding: 0 20px;\n position: relative;\n z-index: 10;\n}<\/p>\n<p>\/* ========= SECTION HEADER - Premium Style ========= *\/\n.bifa-section-header {\n text-align: center;\n margin-bottom: 60px;\n animation: fadeInDown 1.2s ease;\n}<\/p>\n<p>.bifa-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), #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n margin-bottom: 15px;\n text-transform: uppercase;\n position: relative;\n display: inline-block;\n cursor: pointer;\n transition: all 0.3s ease;\n}<\/p>\n<p>.bifa-section-title::after {\n content: '';\n position: absolute;\n bottom: -10px;\n left: 50%;\n transform: translateX(-50%);\n width: 0;\n height: 3px;\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700);\n transition: width 0.4s ease;\n}<\/p>\n<p>.bifa-section-title:hover {\n transform: translateY(-3px);\n filter: drop-shadow(0 10px 20px rgba(212, 175, 55, 0.3));\n}<\/p>\n<p>.bifa-section-title:hover::after {\n width: 100%;\n}<\/p>\n<p>\/* \u041f\u043e\u0434\u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441\u0435\u043a\u0446\u0438\u0438 *\/\n.bifa-section-subtitle {\n font-family: var(--bifa-font-heading);\n font-size: clamp(1.1rem, 2vw, 1.5rem);\n color: var(--bifa-deep-navy);\n font-weight: 600;\n letter-spacing: 1.5px;\n margin-bottom: 15px;\n opacity: 0;\n animation: fadeInUp 1.2s ease 0.3s forwards;\n}<\/p>\n<p>.bifa-section-description {\n max-width: 800px;\n margin: 0 auto;\n font-family: var(--bifa-font-body);\n font-size: clamp(0.95rem, 1.3vw, 1.1rem);\n line-height: 1.7;\n color: #4a5568;\n opacity: 0;\n animation: fadeInUp 1.2s ease 0.6s forwards;\n}<\/p>\n<p>\/* ========= LOADING STATE - Premium ========= *\/\n.bifa-loading-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 400px;\n gap: 30px;\n}<\/p>\n<p>.bifa-loader {\n width: 80px;\n height: 80px;\n position: relative;\n}<\/p>\n<p>.bifa-loader-ring {\n position: absolute;\n width: 100%;\n height: 100%;\n border: 3px solid transparent;\n border-radius: 50%;\n animation: loaderSpin 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;\n}<\/p>\n<p>.bifa-loader-ring:nth-child(1) {\n border-top-color: var(--bifa-heritage-gold);\n animation-delay: 0s;\n}<\/p>\n<p>.bifa-loader-ring:nth-child(2) {\n width: 70%;\n height: 70%;\n top: 15%;\n left: 15%;\n border-right-color: var(--bifa-deep-navy);\n animation-delay: 0.2s;\n animation-direction: reverse;\n}<\/p>\n<p>.bifa-loader-ring:nth-child(3) {\n width: 40%;\n height: 40%;\n top: 30%;\n left: 30%;\n border-bottom-color: var(--bifa-civic-green);\n animation-delay: 0.4s;\n}<\/p>\n<p>@keyframes loaderSpin {\n 0% { \n transform: rotate(0deg) scale(1);\n }\n 50% {\n transform: rotate(180deg) scale(1.1);\n }\n 100% { \n transform: rotate(360deg) scale(1);\n }\n}<\/p>\n<p>.loading-text {\n font-family: var(--bifa-font-heading);\n font-size: 1.2rem;\n font-weight: 700;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n animation: textGlow 2s ease-in-out infinite;\n}<\/p>\n<p>\/* ========= HERO NEWS CARD - Premium \u0428\u0418\u0420\u041e\u041a\u0418\u0419 \u0414\u0418\u0417\u0410\u0419\u041d ========= *\/\n.bifa-hero-news {\n margin-bottom: 80px;\n opacity: 0;\n animation: fadeInUp 1.2s ease 0.2s forwards;\n}<\/p>\n<p>.bifa-hero-card {\n background: white;\n backdrop-filter: blur(20px);\n border-radius: 25px;\n overflow: hidden;\n box-shadow: 0 10px 40px rgba(10, 31, 68, 0.08);\n transition: var(--bifa-transition);\n cursor: pointer;\n position: relative;\n border: none;\n}<\/p>\n<p>.bifa-hero-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 3px;\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700, var(--bifa-heritage-gold));\n transform: scaleX(0);\n transition: transform 0.3s ease;\n}<\/p>\n<p>.bifa-hero-card:hover::before {\n transform: scaleX(1);\n}<\/p>\n<p>.bifa-hero-card:hover {\n transform: translateY(-8px);\n box-shadow: 0 20px 60px rgba(10, 31, 68, 0.12);\n}<\/p>\n<p>\/* \u041d\u041e\u0412\u042b\u0419 \u0428\u0418\u0420\u041e\u041a\u0418\u0419 \u0414\u0418\u0417\u0410\u0419\u041d \u0414\u041b\u042f \u0412\u0421\u0415\u0425 \u0423\u0421\u0422\u0420\u041e\u0419\u0421\u0422\u0412 *\/\n.bifa-hero-wrapper {\n display: block;\n min-height: 650px;\n}<\/p>\n<p>.bifa-hero-image {\n position: relative;\n background-size: cover;\n background-position: center;\n overflow: hidden;\n height: 500px;\n width: 100%;\n}<\/p>\n<p>\/* \u0413\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043d\u044b\u0439 \u043e\u0432\u0435\u0440\u043b\u0435\u0439 \u0441 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0435\u0439 *\/\n.bifa-hero-image::before {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(180deg, \n transparent 0%, \n rgba(10, 31, 68, 0.3) 60%,\n rgba(10, 31, 68, 0.8) 100%\n );\n opacity: 0.6;\n transition: opacity 0.3s ease;\n}<\/p>\n<p>.bifa-hero-card:hover .bifa-hero-image::before {\n opacity: 1;\n}<\/p>\n<p>\/* \u0417\u043e\u043b\u043e\u0442\u043e\u0439 \u0430\u043a\u0446\u0435\u043d\u0442 \u043d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 *\/\n.bifa-hero-image::after {\n content: '';\n position: absolute;\n top: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n background: linear-gradient(45deg, \n transparent 30%, \n rgba(212, 175, 55, 0.2) 50%, \n transparent 70%\n );\n transform: rotate(45deg) translateY(-100%);\n transition: transform 0.8s ease;\n}<\/p>\n<p>.bifa-hero-card:hover .bifa-hero-image::after {\n transform: rotate(45deg) translateY(100%);\n}<\/p>\n<p>.bifa-hero-image-overlay {\n position: absolute;\n top: 40px;\n left: 40px;\n display: flex;\n gap: 20px;\n z-index: 2;\n flex-wrap: wrap;\n}<\/p>\n<p>.bifa-hero-badge {\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n color: var(--bifa-deep-navy);\n padding: 12px 28px;\n border-radius: 35px;\n font-family: var(--bifa-font-heading);\n font-weight: 800;\n font-size: 0.95rem;\n text-transform: uppercase;\n letter-spacing: 1.2px;\n box-shadow: 0 10px 25px rgba(212, 175, 55, 0.3);\n transition: all 0.3s ease;\n}<\/p>\n<p>\/* \u041f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0439 \u0431\u0435\u0439\u0434\u0436 \u0434\u043b\u044f \u0441\u0440\u043e\u0447\u043d\u044b\u0445 \u043d\u043e\u0432\u043e\u0441\u0442\u0435\u0439 *\/\n.bifa-hero-badge.urgent {\n background: linear-gradient(135deg, #dc2626, #ef4444);\n color: white;\n box-shadow: 0 10px 25px rgba(220, 38, 38, 0.4);\n animation: pulse-urgent 2s ease-in-out infinite;\n}<\/p>\n<p>@keyframes pulse-urgent {\n 0%, 100% { \n transform: scale(1);\n box-shadow: 0 10px 25px rgba(220, 38, 38, 0.4);\n }\n 50% { \n transform: scale(1.05);\n box-shadow: 0 15px 35px rgba(220, 38, 38, 0.6);\n }\n}<\/p>\n<p>.bifa-hero-badge:hover {\n transform: translateY(-3px);\n box-shadow: 0 15px 35px rgba(212, 175, 55, 0.4);\n}<\/p>\n<p>.bifa-hero-date {\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(10px);\n color: var(--bifa-deep-navy);\n padding: 12px 28px;\n border-radius: 35px;\n font-family: var(--bifa-font-body);\n font-weight: 600;\n font-size: 0.9rem;\n box-shadow: 0 10px 25px rgba(10, 31, 68, 0.1);\n}<\/p>\n<p>.bifa-hero-content {\n padding: 60px 50px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: center;\n background: linear-gradient(135deg, \n rgba(255, 255, 255, 0.8) 0%, \n rgba(248, 249, 250, 0.8) 100%\n );\n}<\/p>\n<p>.bifa-hero-title {\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 line-height: 1.2;\n margin-bottom: 25px;\n position: relative;\n text-align: center;\n}<\/p>\n<p>.bifa-hero-title::after {\n content: '';\n position: absolute;\n bottom: -10px;\n left: 50%;\n transform: translateX(-50%);\n width: 60px;\n height: 3px;\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700);\n border-radius: 2px;\n}<\/p>\n<p>.bifa-hero-excerpt {\n font-family: var(--bifa-font-body);\n font-size: 1.15rem;\n color: #4a5568;\n line-height: 1.8;\n margin-bottom: 35px;\n text-align: center;\n max-width: 900px;\n}<\/p>\n<p>.bifa-hero-footer {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 30px;\n width: 100%;\n}<\/p>\n<p>.bifa-hero-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n background: var(--bifa-deep-navy);\n color: #FFD700;\n padding: 18px 45px;\n border-radius: 50px;\n font-family: var(--bifa-font-heading);\n font-weight: 700;\n font-size: 0.9rem;\n text-decoration: none;\n text-transform: uppercase;\n letter-spacing: 1.5px;\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n box-shadow: 0 4px 15px rgba(10, 31, 68, 0.2);\n position: relative;\n overflow: hidden;\n border: 1.5px solid #FFD700;\n min-width: 180px;\n text-align: center;\n}<\/p>\n<p>.bifa-hero-btn span {\n position: relative;\n z-index: 1;\n background: linear-gradient(135deg, #FFD700, #FFA500);\n -webkit-background-clip: text;\n background-clip: text;\n -webkit-text-fill-color: transparent;\n font-weight: 800;\n text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);\n}<\/p>\n<p>.bifa-hero-btn::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 0;\n height: 100%;\n background: linear-gradient(135deg, #FFD700, #FFA500);\n transition: width 0.4s ease;\n z-index: 0;\n}<\/p>\n<p>.bifa-hero-btn::after {\n content: '';\n position: absolute;\n inset: -2px;\n background: linear-gradient(135deg, #FFD700, #FFA500);\n border-radius: 50px;\n opacity: 0.3;\n filter: blur(10px);\n z-index: -1;\n transition: opacity 0.4s ease;\n}<\/p>\n<p>.bifa-hero-btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);\n border-color: transparent;\n}<\/p>\n<p>.bifa-hero-btn:hover span {\n background: var(--bifa-deep-navy);\n -webkit-background-clip: text;\n background-clip: text;\n -webkit-text-fill-color: transparent;\n text-shadow: none;\n}<\/p>\n<p>.bifa-hero-btn:hover::before {\n width: 100%;\n}<\/p>\n<p>.bifa-hero-btn:hover::after {\n opacity: 0.5;\n}<\/p>\n<p>.bifa-hero-btn:active {\n transform: translateY(0);\n box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);\n}<\/p>\n<p>.bifa-hero-btn svg {\n width: 18px;\n height: 18px;\n transition: transform 0.3s ease;\n stroke: #FFD700;\n position: relative;\n z-index: 1;\n filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.5));\n}<\/p>\n<p>.bifa-hero-btn:hover svg {\n transform: translateX(5px);\n stroke: var(--bifa-deep-navy);\n filter: none;\n}<\/p>\n<p>\/* Stats \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 hero *\/\n.bifa-hero-stats {\n display: flex;\n gap: 40px;\n margin-top: 30px;\n padding-top: 30px;\n border-top: 1px solid rgba(212, 175, 55, 0.2);\n justify-content: center;\n width: 100%;\n}<\/p>\n<p>.hero-stat-item {\n display: flex;\n align-items: center;\n gap: 12px;\n}<\/p>\n<p>.hero-stat-icon {\n width: 40px;\n height: 40px;\n background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(255, 215, 0, 0.1));\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n}<\/p>\n<p>.hero-stat-icon svg {\n width: 20px;\n height: 20px;\n stroke: var(--bifa-heritage-gold);\n stroke-width: 2;\n}<\/p>\n<p>.hero-stat-text {\n font-family: var(--bifa-font-body);\n font-size: 0.9rem;\n color: var(--bifa-gray);\n}<\/p>\n<p>.hero-stat-number {\n font-family: var(--bifa-font-heading);\n font-weight: 700;\n color: var(--bifa-deep-navy);\n}<\/p>\n<p>\/* ========= NEWS CAROUSEL - Premium Style ========= *\/\n.bifa-news-carousel {\n position: relative;\n opacity: 0;\n animation: fadeInUp 1.2s ease 0.4s forwards;\n}<\/p>\n<p>.bifa-carousel-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 40px;\n}<\/p>\n<p>.bifa-carousel-title {\n font-family: var(--bifa-font-heading);\n font-size: 1.8rem;\n font-weight: 800;\n background: linear-gradient(135deg, var(--bifa-deep-navy), #162e5a);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n position: relative;\n}<\/p>\n<p>.bifa-carousel-controls {\n display: flex;\n gap: 20px;\n}<\/p>\n<p>.bifa-carousel-btn {\n width: 48px;\n height: 48px;\n border: 2px solid transparent;\n background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 249, 250, 0.95));\n backdrop-filter: blur(10px);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: var(--bifa-transition);\n box-shadow: 0 10px 30px rgba(10, 31, 68, 0.1);\n position: relative;\n overflow: hidden;\n}<\/p>\n<p>.bifa-carousel-btn::before {\n content: '';\n position: absolute;\n inset: -2px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n border-radius: 50%;\n opacity: 0;\n transition: opacity 0.3s ease;\n z-index: -1;\n}<\/p>\n<p>.bifa-carousel-btn:hover::before {\n opacity: 1;\n}<\/p>\n<p>.bifa-carousel-btn:hover {\n transform: scale(1.1);\n box-shadow: 0 15px 40px rgba(212, 175, 55, 0.3);\n}<\/p>\n<p>.bifa-carousel-btn svg {\n width: 20px;\n height: 20px;\n stroke: var(--bifa-deep-navy);\n stroke-width: 3;\n transition: all 0.3s ease;\n}<\/p>\n<p>.bifa-carousel-btn:hover svg {\n stroke: var(--bifa-deep-navy);\n transform: scale(1.1);\n}<\/p>\n<p>.bifa-carousel-btn:active {\n transform: scale(0.95);\n}<\/p>\n<p>\/* News Cards Container *\/\n.bifa-carousel-wrapper {\n overflow: hidden;\n margin: 0 -15px;\n padding: 10px 0;\n}<\/p>\n<p>.bifa-carousel-track {\n display: flex;\n gap: 30px;\n transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n padding: 10px 15px;\n}<\/p>\n<p>\/* Individual News Card - Premium Style *\/\n.bifa-news-card {\n flex: 0 0 calc(33.333% - 20px);\n background: white;\n backdrop-filter: blur(20px);\n border-radius: 20px;\n overflow: hidden;\n box-shadow: 0 5px 20px rgba(10, 31, 68, 0.06);\n transition: var(--bifa-transition);\n cursor: pointer;\n position: relative;\n border: none;\n}<\/p>\n<p>.bifa-news-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 2px;\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent);\n transform: scaleX(0);\n transition: transform 0.3s ease;\n}<\/p>\n<p>.bifa-news-card:hover::before {\n transform: scaleX(1);\n}<\/p>\n<p>.bifa-news-card:hover {\n transform: translateY(-8px) scale(1.02);\n box-shadow: 0 15px 40px rgba(10, 31, 68, 0.12);\n}<\/p>\n<p>.bifa-news-image {\n position: relative;\n height: 200px;\n background-size: cover;\n background-position: center;\n overflow: hidden;\n}<\/p>\n<p>.bifa-news-image::before {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(180deg, \n transparent 0%, \n transparent 50%, \n rgba(10, 31, 68, 0.9) 100%\n );\n transition: opacity 0.3s ease;\n}<\/p>\n<p>.bifa-news-card:hover .bifa-news-image::before {\n opacity: 0.8;\n}<\/p>\n<p>\/* Shimmer effect on hover *\/\n.bifa-news-image::after {\n content: '';\n position: absolute;\n top: -50%;\n left: -75%;\n width: 50%;\n height: 200%;\n background: linear-gradient(90deg, \n transparent 0%, \n rgba(255, 255, 255, 0.3) 50%, \n transparent 100%\n );\n transform: skewX(-25deg);\n transition: left 0.8s ease;\n}<\/p>\n<p>.bifa-news-card:hover .bifa-news-image::after {\n left: 125%;\n}<\/p>\n<p>.bifa-news-badge {\n position: absolute;\n top: 20px;\n left: 20px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n color: var(--bifa-deep-navy);\n padding: 8px 20px;\n border-radius: 25px;\n font-family: var(--bifa-font-heading);\n font-weight: 800;\n font-size: 0.75rem;\n text-transform: uppercase;\n letter-spacing: 1px;\n z-index: 2;\n box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);\n transition: all 0.3s ease;\n}<\/p>\n<p>\/* \u041f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0439 \u0431\u0435\u0439\u0434\u0436 \u0434\u043b\u044f \u0441\u0440\u043e\u0447\u043d\u044b\u0445 \u043d\u043e\u0432\u043e\u0441\u0442\u0435\u0439 \u0432 \u043a\u0430\u0440\u0443\u0441\u0435\u043b\u0438 *\/\n.bifa-news-badge.urgent {\n background: linear-gradient(135deg, #dc2626, #ef4444);\n color: white;\n box-shadow: 0 8px 20px rgba(220, 38, 38, 0.4);\n animation: pulse-urgent 2s ease-in-out infinite;\n}<\/p>\n<p>.bifa-news-card:hover .bifa-news-badge {\n transform: translateY(-2px);\n box-shadow: 0 12px 30px rgba(212, 175, 55, 0.4);\n}<\/p>\n<p>.bifa-news-content {\n padding: 30px;\n}<\/p>\n<p>.bifa-news-date {\n font-family: var(--bifa-font-body);\n font-size: 0.85rem;\n color: var(--bifa-gray);\n margin-bottom: 12px;\n display: flex;\n align-items: center;\n gap: 8px;\n}<\/p>\n<p>.bifa-news-date::before {\n content: '';\n width: 4px;\n height: 4px;\n background: var(--bifa-heritage-gold);\n border-radius: 50%;\n}<\/p>\n<p>.bifa-news-title {\n font-family: var(--bifa-font-heading);\n font-size: 1.25rem;\n font-weight: 800;\n color: var(--bifa-deep-navy);\n line-height: 1.4;\n margin-bottom: 15px;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n transition: color 0.3s ease;\n}<\/p>\n<p>.bifa-news-card:hover .bifa-news-title {\n background: linear-gradient(135deg, var(--bifa-deep-navy), #162e5a);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n}<\/p>\n<p>.bifa-news-excerpt {\n font-family: var(--bifa-font-body);\n font-size: 0.95rem;\n color: #4a5568;\n line-height: 1.7;\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n margin-bottom: 25px;\n}<\/p>\n<p>.bifa-news-link {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n color: var(--bifa-heritage-gold);\n font-family: var(--bifa-font-heading);\n font-weight: 700;\n font-size: 0.9rem;\n text-decoration: none;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n transition: var(--bifa-transition);\n position: relative;\n}<\/p>\n<p>.bifa-news-link::after {\n content: '';\n position: absolute;\n bottom: -2px;\n left: 0;\n width: 0;\n height: 2px;\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700);\n transition: width 0.3s ease;\n}<\/p>\n<p>.bifa-news-link:hover {\n gap: 15px;\n}<\/p>\n<p>.bifa-news-link:hover::after {\n width: 100%;\n}<\/p>\n<p>.bifa-news-link svg {\n width: 16px;\n height: 16px;\n stroke: currentColor;\n stroke-width: 2;\n transition: transform 0.3s ease;\n}<\/p>\n<p>.bifa-news-link:hover svg {\n transform: translateX(3px);\n}<\/p>\n<p>\/* ========= \u0418\u0421\u041f\u0420\u0410\u0412\u041b\u0415\u041d\u041e: \u041c\u0435\u0442\u043a\u0430 \u0434\u0430\u0442\u044b \u0441\u043e\u0431\u044b\u0442\u0438\u044f - \u0411\u0415\u0417 \u041f\u0415\u0420\u0415\u0421\u0415\u0427\u0415\u041d\u0418\u0419 ========= *\/\n.event-date-label {\n position: absolute;\n bottom: 20px;\n left: 20px;\n background: linear-gradient(135deg, var(--bifa-civic-green), #248a5f);\n color: white;\n padding: 8px 18px;\n border-radius: 25px;\n font-family: var(--bifa-font-heading);\n font-weight: 700;\n font-size: 0.7rem;\n text-transform: uppercase;\n letter-spacing: 0.8px;\n z-index: 2;\n box-shadow: 0 8px 20px rgba(29, 97, 67, 0.4);\n white-space: nowrap;\n transition: all 0.3s ease;\n}<\/p>\n<p>.bifa-news-card:hover .event-date-label {\n transform: translateY(-2px);\n box-shadow: 0 12px 30px rgba(29, 97, 67, 0.5);\n}<\/p>\n<p>\/* ========= ERROR STATE - Premium ========= *\/\n.bifa-error-container {\n display: none;\n text-align: center;\n padding: 80px 20px;\n animation: fadeIn 0.5s ease-out;\n}<\/p>\n<p>.bifa-error-icon {\n width: 100px;\n height: 100px;\n margin: 0 auto 30px;\n background: linear-gradient(135deg, #FF6B6B, #FF4757);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0 20px 50px rgba(255, 71, 87, 0.3);\n animation: errorPulse 2s ease-in-out infinite;\n}<\/p>\n<p>@keyframes errorPulse {\n 0%, 100% {\n transform: scale(1);\n box-shadow: 0 20px 50px rgba(255, 71, 87, 0.3);\n }\n 50% {\n transform: scale(1.05);\n box-shadow: 0 25px 60px rgba(255, 71, 87, 0.4);\n }\n}<\/p>\n<p>.bifa-error-icon svg {\n width: 50px;\n height: 50px;\n stroke: white;\n stroke-width: 3;\n}<\/p>\n<p>.bifa-error-title {\n font-family: var(--bifa-font-heading);\n font-size: 2rem;\n font-weight: 800;\n color: var(--bifa-deep-navy);\n margin-bottom: 20px;\n}<\/p>\n<p>.bifa-error-message {\n font-family: var(--bifa-font-body);\n font-size: 1.15rem;\n color: #4a5568;\n margin-bottom: 40px;\n max-width: 500px;\n margin-left: auto;\n margin-right: auto;\n line-height: 1.7;\n}<\/p>\n<p>.bifa-retry-btn {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n color: var(--bifa-deep-navy);\n padding: 15px 35px;\n border-radius: 50px;\n font-family: var(--bifa-font-heading);\n font-weight: 800;\n font-size: 0.9rem;\n text-decoration: none;\n cursor: pointer;\n border: none;\n text-transform: uppercase;\n letter-spacing: 1px;\n transition: var(--bifa-transition);\n box-shadow: 0 15px 40px rgba(212, 175, 55, 0.3);\n position: relative;\n overflow: hidden;\n}<\/p>\n<p>.bifa-retry-btn::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>.bifa-retry-btn:hover {\n transform: translateY(-3px);\n box-shadow: 0 20px 50px rgba(212, 175, 55, 0.4);\n}<\/p>\n<p>.bifa-retry-btn:hover::before {\n width: 300px;\n height: 300px;\n}<\/p>\n<p>.bifa-retry-btn svg {\n width: 20px;\n height: 20px;\n transition: transform 0.3s ease;\n}<\/p>\n<p>.bifa-retry-btn:hover svg {\n transform: rotate(180deg);\n}<\/p>\n<p>\/* ========= ANIMATIONS ========= *\/\n@keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}<\/p>\n<p>@keyframes fadeInDown {\n from {\n opacity: 0;\n transform: translateY(-40px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>@keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(40px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>@keyframes textGlow {\n 0%, 100% {\n text-shadow: 0 0 5px rgba(212, 175, 55, 0.5);\n }\n 50% {\n text-shadow: 0 0 20px rgba(212, 175, 55, 0.8), 0 0 30px rgba(212, 175, 55, 0.6);\n }\n}<\/p>\n<p>\/* ========= RESPONSIVE ========= *\/\n@media (max-width: 1200px) {\n .bifa-news-card {\n flex: 0 0 calc(50% - 15px);\n }\n}<\/p>\n<p>@media (max-width: 992px) {\n \/* Hero \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0448\u0438\u0440\u043e\u043a\u0438\u043c \u043d\u0430 \u043f\u043b\u0430\u043d\u0448\u0435\u0442\u0430\u0445 *\/\n .bifa-hero-image {\n height: 400px;\n }<\/p>\n<p> .bifa-hero-content {\n padding: 40px;\n }\n}<\/p>\n<p>@media (max-width: 768px) {\n .bifa-news-section {\n padding: 50px 0 60px 0;\n }<\/p>\n<p> .bifa-section-header {\n margin-bottom: 50px;\n }<\/p>\n<p> .bifa-section-title {\n font-size: 1.75rem;\n }<\/p>\n<p> .bifa-news-card {\n flex: 0 0 calc(100% - 20px);\n }<\/p>\n<p> .bifa-carousel-header {\n flex-direction: column;\n gap: 25px;\n align-items: flex-start;\n }<\/p>\n<p> .bifa-hero-content {\n padding: 35px 25px;\n }<\/p>\n<p> .bifa-hero-title {\n font-size: 1.6rem;\n }<\/p>\n<p> .bifa-hero-excerpt {\n font-size: 0.95rem;\n }<\/p>\n<p> .bifa-carousel-controls {\n gap: 15px;\n }<\/p>\n<p> .bifa-hero-content {\n padding: 25px 20px;\n }<\/p>\n<p> .bifa-hero-title {\n font-size: 1.4rem;\n margin-bottom: 15px;\n }<\/p>\n<p> .bifa-hero-excerpt {\n font-size: 0.9rem;\n margin-bottom: 25px;\n }<\/p>\n<p> .hero-stat-item {\n gap: 8px;\n }<\/p>\n<p> .hero-stat-icon {\n width: 35px;\n height: 35px;\n }<\/p>\n<p> .hero-stat-icon svg {\n width: 18px;\n height: 18px;\n }<\/p>\n<p> .hero-stat-text {\n font-size: 0.8rem;\n }<\/p>\n<p> .bifa-carousel-btn {\n width: 44px;\n height: 44px;\n }<\/p>\n<p> \/* \u0418\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 *\/\n .event-date-label {\n font-size: 0.65rem;\n padding: 6px 14px;\n }\n}<\/p>\n<p>@media (max-width: 480px) {\n .bifa-news-section {\n padding: 40px 0 50px 0;\n }<\/p>\n<p> .bifa-section-title {\n font-size: 2rem;\n }<\/p>\n<p> .bifa-section-subtitle {\n font-size: 1.1rem;\n letter-spacing: 1px;\n }<\/p>\n<p> .bifa-hero-image {\n height: 300px;\n }<\/p>\n<p> .bifa-hero-image-overlay {\n top: 20px;\n left: 20px;\n flex-direction: column;\n gap: 10px;\n }<\/p>\n<p> .bifa-hero-badge,\n .bifa-hero-date {\n font-size: 0.7rem;\n padding: 6px 14px;\n letter-spacing: 0.5px;\n }<\/p>\n<p> .bifa-hero-footer {\n flex-direction: column;\n align-items: center;\n gap: 15px;\n width: 100%;\n }<\/p>\n<p> .bifa-hero-btn {\n width: auto;\n max-width: 220px;\n justify-content: center;\n padding: 14px 25px;\n font-size: 0.85rem;\n letter-spacing: 1px;\n }<\/p>\n<p> .bifa-hero-btn::after {\n display: none;\n }<\/p>\n<p> .bifa-hero-btn span {\n text-shadow: none;\n }<\/p>\n<p> .bifa-hero-wrapper {\n min-height: auto;\n }<\/p>\n<p> .bifa-hero-stats {\n margin-top: 20px;\n padding-top: 20px;\n gap: 25px;\n }<\/p>\n<p> .bifa-carousel-btn {\n width: 42px;\n height: 42px;\n }<\/p>\n<p> .bifa-news-content {\n padding: 20px;\n }<\/p>\n<p> .bifa-error-container {\n padding: 60px 20px;\n }<\/p>\n<p> \/* \u0418\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 - \u043c\u0435\u0442\u043a\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0432\u043d\u0438\u0437\u0443 \u0441\u043b\u0435\u0432\u0430 *\/\n .event-date-label {\n font-size: 0.6rem;\n padding: 5px 12px;\n bottom: 15px;\n left: 15px;\n }\n}\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"news-section-wrapper\">\n <\/p>\n<section class=\"bifa-news-section\">\n <\/p>\n<div class=\"news-bg-animation\">\n <\/p>\n<div class=\"floating-shape shape-news-1\"><\/div>\n<div class=\"floating-shape shape-news-2\"><\/div>\n<div class=\"floating-shape shape-news-3\"><\/div>\n<p> \n <\/div>\n<div class=\"bifa-container\">\n <\/p>\n<div class=\"bifa-section-header\">\n<h2 class=\"bifa-section-title\">Centro de Not\u00edcias BIFA+<\/h2>\n<p class=\"bifa-section-subtitle\">Latest Updates & Stories<\/p>\n<p class=\"bifa-section-description\">\n BIFA+ News - onde o jogo une as na\u00e7\u00f5es.\n <\/p>\n<\/p><\/div>\n<p> <\/p>\n<div id=\"bifaLoadingState\" class=\"bifa-loading-container\">\n<div class=\"bifa-loader\">\n<div class=\"bifa-loader-ring\"><\/div>\n<div class=\"bifa-loader-ring\"><\/div>\n<div class=\"bifa-loader-ring\"><\/div>\n<\/p><\/div>\n<p class=\"loading-text\">Loading Latest Stories…<\/p>\n<\/p><\/div>\n<p> <\/p>\n<div id=\"bifaNewsContent\" class=\"bifa-news-content\" style=\"display: none;\">\n <\/p>\n<div id=\"bifaHeroNews\" class=\"bifa-hero-news\">\n \n <\/div>\n<p> <\/p>\n<div class=\"bifa-news-carousel\">\n<div class=\"bifa-carousel-header\">\n<h3 class=\"bifa-carousel-title\">Mais hist\u00f3rias<\/h3>\n<div class=\"bifa-carousel-controls\">\n <button class=\"bifa-carousel-btn\" id=\"bifaPrevBtn\" aria-label=\"Anterior\"><br \/>\n <svg viewbox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M15 18L9 12L15 6\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg><br \/>\n <\/button><br \/>\n <button class=\"bifa-carousel-btn\" id=\"bifaNextBtn\" aria-label=\"Pr\u00f3ximo\"><br \/>\n <svg viewbox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M9 18L15 12L9 6\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg><br \/>\n <\/button>\n <\/div>\n<\/p><\/div>\n<div class=\"bifa-carousel-wrapper\">\n<div id=\"bifaCarouselTrack\" class=\"bifa-carousel-track\">\n \n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div id=\"bifaErrorState\" class=\"bifa-error-container\">\n<div class=\"bifa-error-icon\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M12 9V13M12 17H12.01M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg>\n <\/div>\n<h3 class=\"bifa-error-title\">N\u00e3o \u00e9 poss\u00edvel carregar not\u00edcias<\/h3>\n<p class=\"bifa-error-message\">We’re having trouble fetching the latest stories. Please check your connection and try again.<\/p>\n<p> <button class=\"bifa-retry-btn\" onclick=\"loadBifaNews()\"><br \/>\n <svg width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M1 4V10H7M23 20V14H17M20.49 9C19.62 5.33 16.31 2.5 12.23 2.5C7.09 2.5 2.7 7.17 3.04 12.5C3.38 17.83 8.09 22 13.5 22C17.83 22 21.53 19.19 22.68 15.36M12 8V12L15 15\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg><br \/>\n <span>Repetir<\/span><br \/>\n <\/button>\n <\/div>\n<\/p><\/div>\n<\/section>\n<\/div>\n<p><script>\n\/\/ BIFA+ Premium News Module - \u0423\u043b\u0443\u0447\u0448\u0435\u043d\u043d\u044b\u0439 \u043f\u0430\u0440\u0441\u0438\u043d\u0433 \u0438\u0437 \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430\nconst BifaNews = {\n \/\/ Configuration\n config: {\n apiUrl: 'https:\/\/bifa.ai\/wp-json\/wp\/v2\/bifa_news_events',\n perPage: 20,\n \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0434\u043b\u044f \u043b\u0443\u0447\u0448\u0435\u0433\u043e \u043f\u0430\u0440\u0441\u0438\u043d\u0433\u0430\n newsParams: '_embed&per_page=20&acf_format=standard&orderby=date&order=desc',\n carouselIndex: 0,\n cardsPerView: 3,\n newsData: []\n },<\/p>\n<p> \/\/ Initialize\n init() {\n this.createParticles();\n this.setupEventListeners();\n this.loadNews();\n this.updateCardsPerView();\n window.addEventListener('resize', () => this.updateCardsPerView());\n },<\/p>\n<p> \/\/ Create golden particles\n createParticles() {\n const particlesContainer = document.querySelector('.news-bg-animation');\n const particleCount = 10;<\/p>\n<p> for (let i = 0; i < particleCount; i++) {\n const particle = document.createElement('div');\n particle.className = 'news-particle';\n particle.style.left = Math.random() * 100 + '%';\n particle.style.animationDelay = Math.random() * 18 + 's';\n particle.style.animationDuration = (15 + Math.random() * 8) + '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\n \/\/ Setup event listeners\n setupEventListeners() {\n const prevBtn = document.getElementById('bifaPrevBtn');\n const nextBtn = document.getElementById('bifaNextBtn');\n \n if (prevBtn) prevBtn.addEventListener('click', () => this.navigateCarousel('prev'));\n if (nextBtn) nextBtn.addEventListener('click', () => this.navigateCarousel('next'));<\/p>\n<p> \/\/ Touch swipe \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\n this.setupTouchSwipe();\n },<\/p>\n<p> \/\/ Touch swipe functionality \u0434\u043b\u044f \u043a\u0430\u0440\u0443\u0441\u0435\u043b\u0438\n setupTouchSwipe() {\n const carouselWrapper = document.querySelector('.bifa-carousel-wrapper');\n if (!carouselWrapper) return;<\/p>\n<p> let touchStartX = 0;\n let touchEndX = 0;\n let touchStartY = 0;\n let touchEndY = 0;\n let isSwiping = false;\n const minSwipeDistance = 50; \/\/ \u041c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0441\u0432\u0430\u0439\u043f\u0430 \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445<\/p>\n<p> \/\/ Touch start\n carouselWrapper.addEventListener('touchstart', (e) => {\n touchStartX = e.touches[0].clientX;\n touchStartY = e.touches[0].clientY;\n isSwiping = true;\n }, { passive: true });<\/p>\n<p> \/\/ Touch move - \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u0441\u043a\u0440\u043e\u043b\u043b\u0430 \u043f\u0440\u0438 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u0432\u0430\u0439\u043f\u0435\n carouselWrapper.addEventListener('touchmove', (e) => {\n if (!isSwiping) return;<\/p>\n<p> touchEndX = e.touches[0].clientX;\n touchEndY = e.touches[0].clientY;<\/p>\n<p> const diffX = Math.abs(touchEndX - touchStartX);\n const diffY = Math.abs(touchEndY - touchStartY);<\/p>\n<p> \/\/ \u0415\u0441\u043b\u0438 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0432\u0430\u0439\u043f \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e, \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0441\u043a\u0440\u043e\u043b\u043b\n if (diffX > diffY && diffX > 10) {\n e.preventDefault();\n }\n }, { passive: false });<\/p>\n<p> \/\/ Touch end\n carouselWrapper.addEventListener('touchend', (e) => {\n if (!isSwiping) return;<\/p>\n<p> const diffX = touchEndX - touchStartX;\n const diffY = Math.abs(touchEndY - touchStartY);<\/p>\n<p> \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0447\u0442\u043e \u044d\u0442\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0432\u0430\u0439\u043f (\u0430 \u043d\u0435 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u043a\u0440\u043e\u043b\u043b)\n if (Math.abs(diffX) > diffY && Math.abs(diffX) > minSwipeDistance) {\n if (diffX > 0) {\n \/\/ \u0421\u0432\u0430\u0439\u043f \u0432\u043f\u0440\u0430\u0432\u043e - \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0439 \u0441\u043b\u0430\u0439\u0434\n this.navigateCarousel('prev');\n } else {\n \/\/ \u0421\u0432\u0430\u0439\u043f \u0432\u043b\u0435\u0432\u043e - \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0441\u043b\u0430\u0439\u0434\n this.navigateCarousel('next');\n }\n }<\/p>\n<p> isSwiping = false;\n touchStartX = 0;\n touchEndX = 0;\n touchStartY = 0;\n touchEndY = 0;\n }, { passive: true });\n },<\/p>\n<p> \/\/ Update cards per view based on screen size\n updateCardsPerView() {\n if (window.innerWidth <= 768) {\n this.config.cardsPerView = 1;\n } else if (window.innerWidth <= 1200) {\n this.config.cardsPerView = 2;\n } else {\n this.config.cardsPerView = 3;\n }\n },\n\n \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u0430\u0442\u044b\n formatDate(dateStr) {\n if (!dateStr) return '';\n const date = new Date(dateStr);\n return date.toLocaleDateString('en-US', {\n month: 'long',\n day: 'numeric',\n year: 'numeric'\n });\n },\n\n \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u0443\u0441\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u044f\n getEventStatus(startDate, endDate) {\n if (!startDate) return 'unknown';\n \n const now = new Date();\n const start = new Date(startDate);\n const end = endDate ? new Date(endDate) : start;\n \n now.setHours(0, 0, 0, 0);\n start.setHours(0, 0, 0, 0);\n end.setHours(23, 59, 59, 999);\n \n if (now > end) {\n return 'past';\n } else if (now >= start && now <= end) {\n return 'ongoing';\n } else {\n return 'upcoming';\n }\n },\n\n \/\/ Load news from API - \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u043d\u044b\u0439 \u043f\u0430\u0440\u0441\u0438\u043d\u0433 \u0438\u0437 \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430\n async loadNews() {\n const loadingState = document.getElementById('bifaLoadingState');\n const newsContent = document.getElementById('bifaNewsContent');\n const errorState = document.getElementById('bifaErrorState');\n\n try {\n \/\/ Show loading\n loadingState.style.display = 'flex';\n newsContent.style.display = 'none';\n errorState.style.display = 'none';\n\n \/\/ Fetch all items\n const response = await fetch(`${this.config.apiUrl}?${this.config.newsParams}`);\n \n if (!response.ok) {\n throw new Error('Failed to fetch news');\n }\n\n const allData = await response.json();\n \n \/\/ \u0423\u043b\u0443\u0447\u0448\u0435\u043d\u043d\u0430\u044f \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u044f - \u0431\u0435\u0440\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u043e\u0432\u043e\u0441\u0442\u0438 (\u0431\u0435\u0437 \u0434\u0430\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u0439)\n const newsData = allData.filter(item => {\n \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043a\u0430\u043a \u0438\u0437 \u043f\u0440\u044f\u043c\u044b\u0445 \u043f\u043e\u043b\u0435\u0439, \u0442\u0430\u043a \u0438 \u0438\u0437 meta\n const eventDate = item._bifa_event_date || item.meta?._bifa_event_date || item.acf?._bifa_event_date;\n const itemType = item.bifa_item_type || item.meta?.bifa_item_type || item.acf?.bifa_item_type;<\/p>\n<p> \/\/ \u042d\u0442\u043e \u043d\u043e\u0432\u043e\u0441\u0442\u044c \u0435\u0441\u043b\u0438 \u043d\u0435\u0442 \u0434\u0430\u0442\u044b \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0438\u043b\u0438 \u0442\u0438\u043f \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0430 \u043d\u043e\u0432\u043e\u0441\u0442\u044c\n const isNews = !eventDate || eventDate === '' || (itemType && !itemType.includes(3));<\/p>\n<p> return isNews;\n });<\/p>\n<p> if (newsData.length === 0) {\n throw new Error('No news available');\n }<\/p>\n<p> \/\/ \u0421\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u043f\u043e \u0434\u0430\u0442\u0435 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438\n newsData.sort((a, b) => new Date(b.date) - new Date(a.date));<\/p>\n<p> \/\/ Store news data\n this.config.newsData = newsData;<\/p>\n<p> \/\/ Hide loading, show content\n loadingState.style.display = 'none';\n newsContent.style.display = 'block';<\/p>\n<p> \/\/ Render news\n this.renderHeroNews(newsData[0]);\n this.renderCarousel(newsData.slice(1));<\/p>\n<p> } catch (error) {\n console.error('Error loading news:', error);\n loadingState.style.display = 'none';\n errorState.style.display = 'block';\n }\n },<\/p>\n<p> \/\/ Render hero news - \u0441 \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u043d\u044b\u043c \u043f\u0430\u0440\u0441\u0438\u043d\u0433\u043e\u043c \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u0418\u0421\u041f\u0420\u0410\u0412\u041b\u0415\u041d\u041d\u041e\u0419 \u041a\u041d\u041e\u041f\u041a\u041e\u0419\n renderHeroNews(news) {\n const heroContainer = document.getElementById('bifaHeroNews');\n if (!heroContainer || !news) return;<\/p>\n<p> \/\/ Get featured image\n const media = news._embedded?.['wp:featuredmedia']?.[0];\n const imageUrl = media?.source_url || '\/wp-content\/themes\/yootheme-child\/assets\/images\/news-placeholder-hero.jpg';<\/p>\n<p> \/\/ Format date\n const date = this.formatDate(news.date);<\/p>\n<p> \/\/ Get excerpt\n const excerpt = this.stripHtml(news.excerpt.rendered).substring(0, 350) + '...';<\/p>\n<p> \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c badge \u0438 priority \u0438\u0437 \u0432\u0441\u0435\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0445 \u043c\u0435\u0441\u0442\n const badgeText = news._bifa_badge_text || news.meta?._bifa_badge_text || news.acf?._bifa_badge_text || this.getBadgeText(news);\n const priority = news._bifa_priority || news.meta?._bifa_priority || news.acf?._bifa_priority || 'normal';<\/p>\n<p> \/\/ Render hero \u0441 \u0448\u0438\u0440\u043e\u043a\u0438\u043c \u0434\u0438\u0437\u0430\u0439\u043d\u043e\u043c - \u0418\u0421\u041f\u0420\u0410\u0412\u041b\u0415\u041d\u041d\u0410\u042f \u041a\u041d\u041e\u041f\u041a\u0410\n heroContainer.innerHTML = `<\/p>\n<div class=\"bifa-hero-card\" onclick=\"window.open('${news.link}', '_blank')\">\n<div class=\"bifa-hero-wrapper\">\n<div class=\"bifa-hero-image\" style=\"background-image: url('${imageUrl}')\">\n<div class=\"bifa-hero-image-overlay\">\n <span class=\"bifa-hero-badge ${priority === 'urgent' ? 'urgent' : ''}\">${badgeText}<\/span>\n <span class=\"bifa-hero-date\">${date}<\/span>\n <\/div>\n<\/p><\/div>\n<div class=\"bifa-hero-content\">\n<h2 class=\"bifa-hero-title\">${news.title.rendered}<\/h2>\n<p class=\"bifa-hero-excerpt\">${excerpt}<\/p>\n<div class=\"bifa-hero-footer\">\n <a href=\"\/$%7Bnews.link%7D\" class=\"bifa-hero-btn\" target=\"_blank\">\n <span>READ OUR STORY<\/span>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M5 12H19M19 12L12 5M19 12L12 19\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg>\n <\/a>\n <\/div>\n<div class=\"bifa-hero-stats\">\n<div class=\"hero-stat-item\">\n<div class=\"hero-stat-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z\" stroke=\"currentColor\" fill=\"none\"\/>\n <\/svg>\n <\/div>\n<div class=\"hero-stat-text\">\n <span class=\"hero-stat-number\">${priority === 'urgent' ? 'Breaking' : 'Featured'}<\/span> Story\n <\/div>\n<\/p><\/div>\n<div class=\"hero-stat-item\">\n<div class=\"hero-stat-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M9 11L12 14L22 4M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3\" stroke=\"currentColor\"\/>\n <\/svg>\n <\/div>\n<div class=\"hero-stat-text\">\n <span class=\"hero-stat-number\">Verified<\/span> News\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> `;\n },<\/p>\n<p> \/\/ Create news card \u0441 \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u043d\u044b\u043c \u043f\u0430\u0440\u0441\u0438\u043d\u0433\u043e\u043c\n createNewsCard(news, index) {\n const card = document.createElement('div');\n card.className = 'bifa-news-card';\n card.style.animationDelay = `${index * 0.1}s`;<\/p>\n<p> \/\/ Get data\n const media = news._embedded?.['wp:featuredmedia']?.[0];\n const imageUrl = media?.source_url || `\/wp-content\/themes\/yootheme-child\/assets\/images\/news-placeholder-${(index % 3) + 1}.jpg`;\n const date = this.formatDate(news.date);\n const excerpt = this.stripHtml(news.excerpt.rendered).substring(0, 100) + '...';<\/p>\n<p> \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c badge \u0438 priority\n const badgeText = news._bifa_badge_text || news.meta?._bifa_badge_text || news.acf?._bifa_badge_text || this.getBadgeText(news);\n const priority = news._bifa_priority || news.meta?._bifa_priority || news.acf?._bifa_priority || 'normal';<\/p>\n<p> \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043b\u0438 \u044d\u0442\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0435\u043c\n const eventDate = news._bifa_event_date || news.meta?._bifa_event_date || news.acf?._bifa_event_date;\n const eventEndDate = news._bifa_event_end_date || news.meta?._bifa_event_end_date || news.acf?._bifa_event_end_date;<\/p>\n<p> card.innerHTML = `<\/p>\n<div class=\"bifa-news-image\" style=\"background-image: url('${imageUrl}')\">\n <span class=\"bifa-news-badge ${priority === 'urgent' ? 'urgent' : ''}\">${badgeText}<\/span>\n ${eventDate ? `<span class=\"event-date-label\">Event: ${this.formatDate(eventDate)}<\/span>` : ''}\n <\/div>\n<div class=\"bifa-news-content\">\n<div class=\"bifa-news-date\">${date}<\/div>\n<h4 class=\"bifa-news-title\">${news.title.rendered}<\/h4>\n<p class=\"bifa-news-excerpt\">${excerpt}<\/p>\n<p> <a href=\"\/$%7Bnews.link%7D\" class=\"bifa-news-link\" target=\"_blank\" onclick=\"event.stopPropagation()\">\n <span>Read More<\/span>\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M5 12H19M19 12L12 5M19 12L12 19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg>\n <\/a>\n <\/div>\n<p> `;<\/p>\n<p> \/\/ Add click handler\n card.addEventListener('click', () => {\n window.open(news.link, '_blank');\n });<\/p>\n<p> return card;\n },<\/p>\n<p> \/\/ Render carousel - \u0441 \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u043d\u044b\u043c \u043f\u0430\u0440\u0441\u0438\u043d\u0433\u043e\u043c\n renderCarousel(newsItems) {\n const carouselTrack = document.getElementById('bifaCarouselTrack');\n if (!carouselTrack || !newsItems.length) return;<\/p>\n<p> \/\/ Clear existing content\n carouselTrack.innerHTML = '';<\/p>\n<p> \/\/ Render each news item\n newsItems.forEach((news, index) => {\n const card = this.createNewsCard(news, index);\n carouselTrack.appendChild(card);\n });<\/p>\n<p> \/\/ Reset carousel position\n this.config.carouselIndex = 0;\n this.updateCarouselPosition();\n },<\/p>\n<p> \/\/ Navigate carousel\n navigateCarousel(direction) {\n const track = document.getElementById('bifaCarouselTrack');\n if (!track) return;<\/p>\n<p> const cards = track.querySelectorAll('.bifa-news-card');\n const maxIndex = Math.max(0, cards.length - this.config.cardsPerView);<\/p>\n<p> if (direction === 'prev') {\n this.config.carouselIndex = Math.max(0, this.config.carouselIndex - 1);\n } else {\n this.config.carouselIndex = Math.min(maxIndex, this.config.carouselIndex + 1);\n }<\/p>\n<p> this.updateCarouselPosition();\n },<\/p>\n<p> \/\/ Update carousel position\n updateCarouselPosition() {\n const track = document.getElementById('bifaCarouselTrack');\n if (!track) return;<\/p>\n<p> const cardWidth = 100 \/ this.config.cardsPerView;\n const offset = -(this.config.carouselIndex * cardWidth);<\/p>\n<p> track.style.transform = `translateX(${offset}%)`;\n },<\/p>\n<p> \/\/ Get badge text\n getBadgeText(news) {\n \/\/ \u041f\u0440\u043e\u0431\u0443\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c badge \u0438\u0437 \u0440\u0430\u0437\u043d\u044b\u0445 \u043c\u0435\u0441\u0442\n if (news._bifa_badge_text) {\n return news._bifa_badge_text;\n }<\/p>\n<p> if (news.meta?._bifa_badge_text) {\n return news.meta._bifa_badge_text;\n }<\/p>\n<p> if (news.acf?._bifa_badge_text) {\n return news.acf._bifa_badge_text;\n }<\/p>\n<p> \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044e\n const category = news._embedded?.['wp:term']?.[0]?.[0];\n return category?.name || 'News';\n },<\/p>\n<p> \/\/ Strip HTML\n stripHtml(html) {\n const temp = document.createElement('div');\n temp.innerHTML = html;\n return temp.textContent || temp.innerText || '';\n }\n};<\/p>\n<p>\/\/ Initialize when DOM is ready\ndocument.addEventListener('DOMContentLoaded', () => {\n BifaNews.init();\n});<\/p>\n<p>\/\/ Make loadBifaNews globally available for retry button\nwindow.loadBifaNews = () => BifaNews.loadNews();\n<\/script><\/p>\n<p><\/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, maximum-scale=5.0, user-scalable=yes\"><br \/>\n<title>BIFA+ Interactive World Map<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n<style>\n:root {\n --navy: #0A1F44;\n --gold: #D4AF37;\n --gold-gradient: linear-gradient(135deg, #D4AF37, #ffd700);\n --green: #1D6143;\n --white: #FFF;\n --gray: #6B7280;\n --shadow: 0 2px 10px rgba(10,31,68,0.08);\n --shadow-lg: 0 10px 40px rgba(10,31,68,0.12);\n --trans: all 0.3s cubic-bezier(0.4,0,0.2,1);\n --r: 12px;\n}\n* { \n box-sizing: border-box; \n font-family: 'Poppins', sans-serif; \n -webkit-tap-highlight-color: transparent;\n -webkit-touch-callout: none;\n}\nbody { \n margin: 0; \n padding: 0; \n background: var(--white); \n touch-action: manipulation;\n}\nsvg {\n touch-action: manipulation;\n}\nsvg * {\n pointer-events: none;\n}\nsvg path {\n pointer-events: fill;\n}\n.svg-event-marker,\n.svg-event-marker * {\n pointer-events: all !important;\n cursor: pointer;\n}\n@keyframes float { \n 0%,100% { transform: translate3d(0,0,0); opacity: 1; } \n 50% { transform: translate3d(0,-10px,0); opacity: 0.8; } \n}\n@keyframes pulse { \n 0%,100% { transform: scale(1); } \n 50% { transform: scale(1.1); } \n}\n@keyframes spin { to { transform: rotate(360deg); } }\n@keyframes fadeIn { to { opacity: 1; } }\n@keyframes dashMove { to { stroke-dashoffset: -100; } }\n@keyframes fadeInUp {\n from { opacity: 0; transform: translate3d(0,30px,0); }\n to { opacity: 1; transform: translate3d(0,0,0); }\n}\n@keyframes expandWidth { to { width: 120px; } }\n.brics-map-container {\n position: relative;\n width: 100vw;\n margin-left: calc(-50vw + 50%);\n padding: 60px 0;\n background: var(--white);\n overflow: hidden;\n}\n.brics-map-container::before {\n content: '';\n position: absolute;\n inset: 0;\n background: radial-gradient(circle at 30% 50%, rgba(10,31,68,0.02), transparent 50%),\n radial-gradient(circle at 70% 80%, rgba(212,175,55,0.02), transparent 50%);\n z-index: 0;\n pointer-events: none;\n}\n.particles {\n position: absolute;\n width: 100%;\n height: 100%;\n overflow: hidden;\n z-index: 1;\n pointer-events: none;\n}\n.particle {\n position: absolute;\n width: 4px;\n height: 4px;\n background: linear-gradient(135deg, rgba(212,175,55,0.3), rgba(255,215,0,0.2));\n border-radius: 50%;\n animation: float 15s ease-in-out infinite;\n will-change: transform;\n box-shadow: 0 0 8px rgba(212,175,55,0.2);\n}\n.particle:nth-child(2n) { \n background: linear-gradient(135deg, rgba(10,31,68,0.2), rgba(22,46,90,0.15)); \n animation-duration: 18s; \n}\n.particle:nth-child(3n) { \n background: linear-gradient(135deg, rgba(29,97,67,0.15), rgba(45,139,95,0.1)); \n animation-duration: 20s;\n}\n.content-wrapper {\n position: relative;\n z-index: 2;\n padding: 0 20px;\n max-width: 1400px;\n margin: 0 auto;\n}\n.brics-header {\n text-align: center;\n margin-bottom: 60px;\n}\n.brics-header h2 {\n font-family: 'Montserrat', sans-serif;\n font-weight: 900;\n font-size: clamp(2.5rem, 4vw, 3.5rem);\n background: linear-gradient(135deg, var(--gold), #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n margin: 0 0 20px;\n position: relative;\n display: inline-block;\n text-transform: uppercase;\n letter-spacing: -0.5px;\n line-height: 1.2;\n text-shadow: 0 2px 4px rgba(212, 175, 55, 0.1);\n animation: fadeInUp 1s ease-out 0.3s both;\n}\n.brics-header h2:after {\n content: '';\n position: absolute;\n bottom: -15px;\n left: 50%;\n transform: translateX(-50%);\n width: 0;\n height: 5px;\n background: linear-gradient(90deg, var(--gold), #ffd700);\n border-radius: 3px;\n animation: expandWidth 0.8s ease-out 1s both;\n}\n.brics-subtitle {\n font-family: 'Poppins', sans-serif;\n font-weight: 600;\n font-size: 1.3rem;\n color: var(--gray);\n margin: 30px auto 0;\n letter-spacing: 0.3px;\n line-height: 1.6;\n max-width: 700px;\n animation: fadeInUp 1s ease-out 0.5s both;\n}\n.filter-controls {\n display: flex;\n justify-content: center;\n gap: 20px;\n margin-bottom: 40px;\n flex-wrap: wrap;\n}\n.filter-btn {\n padding: 12px 28px;\n background: var(--white);\n border: 2px solid var(--navy);\n border-radius: 50px;\n font-family: 'Montserrat', sans-serif;\n font-weight: 700;\n font-size: 14px;\n color: var(--navy);\n cursor: pointer;\n transition: var(--trans);\n text-decoration: none;\n display: inline-block;\n text-transform: uppercase;\n letter-spacing: 1px;\n box-shadow: 0 4px 15px rgba(10,31,68,0.1);\n position: relative;\n overflow: hidden;\n touch-action: manipulation;\n}\n.filter-btn:hover {\n transform: translateY(-3px);\n box-shadow: 0 8px 25px rgba(10,31,68,0.2);\n background: var(--navy);\n color: var(--white);\n}\n.filter-btn.active {\n background: var(--navy);\n color: var(--white);\n border-color: var(--navy);\n box-shadow: 0 6px 20px rgba(10,31,68,0.3);\n}\n.filter-btn.active.news {\n background: linear-gradient(135deg, var(--green), #2d8b5f);\n border-color: var(--green);\n box-shadow: 0 6px 20px rgba(29,97,67,0.3);\n}\n.brics-legend {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: 20px;\n margin-bottom: 40px;\n padding: 30px;\n background: linear-gradient(135deg, rgba(248,249,250,0.9) 0%, rgba(240,242,245,0.9) 100%);\n border-radius: 25px;\n box-shadow: 0 5px 30px rgba(10,31,68,0.08);\n backdrop-filter: blur(10px);\n border: 1px solid rgba(212,175,55,0.1);\n}\n.brics-country-tag {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 24px;\n background: var(--white);\n border-radius: 50px;\n box-shadow: 0 4px 15px rgba(10,31,68,0.1);\n transition: var(--trans);\n cursor: pointer;\n position: relative;\n overflow: hidden;\n border: 2px solid transparent;\n touch-action: manipulation;\n}\n.brics-country-tag:hover {\n transform: translateY(-3px) scale(1.02);\n box-shadow: 0 10px 30px rgba(212,175,55,0.3);\n border-color: var(--gold);\n}\n.brics-country-tag.active {\n background: linear-gradient(135deg, var(--navy), #162e5a);\n box-shadow: 0 6px 25px rgba(10,31,68,0.4);\n border-color: var(--gold);\n}\n.brics-country-tag.active .country-name {\n color: var(--white);\n}\n.country-flag {\n width: 32px;\n height: 24px;\n border-radius: 4px;\n background-size: cover;\n background-position: center;\n box-shadow: 0 2px 6px rgba(0,0,0,0.15);\n}\n.country-name {\n font-family: 'Montserrat', sans-serif;\n font-size: 15px;\n font-weight: 700;\n color: var(--navy);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n transition: color 0.3s ease;\n}\n.event-count {\n background: linear-gradient(135deg, var(--gold), #ffd700);\n color: var(--navy);\n font-family: 'Montserrat', sans-serif;\n font-weight: 800;\n font-size: 12px;\n padding: 4px 10px;\n border-radius: 20px;\n margin-left: auto;\n box-shadow: 0 2px 8px rgba(212,175,55,0.3);\n}\n.map-wrapper {\n position: relative;\n width: 100%;\n background: linear-gradient(135deg, #f5f6f8 0%, #e8eaed 100%);\n overflow: hidden;\n min-height: 600px;\n box-shadow: 0 10px 50px rgba(10,31,68,0.15);\n border-radius: 25px;\n margin: 0 20px;\n width: calc(100% - 40px);\n border: 1px solid rgba(212,175,55,0.1);\n}\n.map-zoom-container {\n width: 100%;\n height: 100%;\n position: relative;\n overflow: hidden;\n touch-action: none;\n cursor: grab;\n}\n.map-zoom-container:active {\n cursor: grabbing;\n}\n.map-svg-container {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n z-index: 1;\n padding: 40px;\n transform-origin: center center;\n transition: none;\n will-change: transform;\n}\n.map-svg-container svg {\n width: 100%;\n height: auto;\n max-height: 600px;\n filter: drop-shadow(0 10px 30px rgba(10,31,68,0.08));\n}\n.zoom-controls {\n position: absolute;\n bottom: 20px;\n right: 20px;\n display: flex;\n flex-direction: column;\n gap: 10px;\n z-index: 100;\n}\n.zoom-btn {\n width: 40px;\n height: 40px;\n background: var(--white);\n border: 2px solid var(--navy);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n font-size: 20px;\n font-weight: 800;\n color: var(--navy);\n box-shadow: 0 4px 15px rgba(10,31,68,0.2);\n transition: all 0.3s;\n user-select: none;\n position: relative;\n overflow: hidden;\n touch-action: manipulation;\n}\n.zoom-btn:hover {\n background: var(--navy);\n color: var(--white);\n transform: scale(1.1);\n border-color: var(--gold);\n}\n.zoom-btn:active {\n transform: scale(0.95);\n}\n.zoom-reset {\n font-size: 14px;\n padding: 8px 12px;\n width: auto;\n height: auto;\n border-radius: 25px;\n font-family: 'Montserrat', sans-serif;\n font-weight: 700;\n letter-spacing: 0.5px;\n}\n.map-svg-container svg path {\n fill: #e8eaed;\n stroke: #d1d5db;\n stroke-width: 0.3;\n opacity: 0.4;\n filter: blur(0.8px);\n pointer-events: none;\n transition: none;\n cursor: default;\n}\n.map-svg-container svg path.brics-country {\n fill: var(--gold);\n stroke: var(--white);\n stroke-width: 2;\n opacity: 1;\n filter: drop-shadow(0 0 15px rgba(212,175,55,0.5));\n pointer-events: fill;\n cursor: pointer;\n transition: var(--trans);\n}\n.map-svg-container svg path.brics-country:hover {\n fill: #e6c157;\n stroke-width: 2.5;\n filter: brightness(1.15) drop-shadow(0 0 25px rgba(212,175,55,0.7));\n}\n.map-svg-container svg path.active-country {\n fill: var(--navy) !important;\n stroke: var(--gold);\n stroke-width: 2.5;\n filter: drop-shadow(0 0 25px rgba(10,31,68,0.5));\n}\n.connection-lines {\n pointer-events: none;\n opacity: 0;\n animation: fadeIn 2s ease-out 1s forwards;\n}\n.connection-line {\n stroke: var(--gold);\n stroke-width: 1.5;\n fill: none;\n stroke-dasharray: 5, 5;\n animation: dashMove 20s linear infinite;\n opacity: 0.4;\n}\n.svg-event-marker {\n cursor: pointer;\n position: relative;\n}\n.svg-event-marker:hover circle:not([fill=\"transparent\"]) {\n filter: drop-shadow(0 6px 20px rgba(212,175,55,0.5));\n stroke-width: 4;\n}\n.svg-event-marker circle {\n fill: var(--white);\n stroke: var(--gold);\n stroke-width: 3;\n filter: drop-shadow(0 4px 12px rgba(10,31,68,0.3));\n transition: all 0.3s ease;\n}\n.svg-event-marker.news circle {\n stroke: var(--green);\n}\n.svg-event-marker.urgent circle {\n stroke: #dc2626;\n animation: pulse 1s ease-in-out infinite;\n}\n.svg-event-marker text {\n text-anchor: middle;\n dominant-baseline: middle;\n pointer-events: none;\n user-select: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n}\n.event-popup {\n position: fixed !important;\n background: var(--white);\n border-radius: 25px;\n box-shadow: 0 30px 90px rgba(10,31,68,0.3);\n padding: 24px;\n z-index: 999999 !important;\n max-width: 380px;\n min-width: 320px;\n display: none;\n pointer-events: none !important;\n border: 2px solid var(--gold);\n opacity: 0;\n transition: opacity 0.2s ease-in-out;\n backdrop-filter: blur(10px);\n}\n.event-popup.active {\n display: block !important;\n opacity: 1;\n pointer-events: auto !important;\n}\n.popup-close {\n position: absolute;\n top: 10px;\n right: 10px;\n width: 32px;\n height: 32px;\n background: var(--navy);\n color: var(--white);\n border: none;\n border-radius: 50%;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 18px;\n font-weight: 800;\n transition: all 0.3s;\n z-index: 10;\n box-shadow: 0 4px 12px rgba(10,31,68,0.3);\n touch-action: manipulation;\n}\n.popup-close:hover {\n background: linear-gradient(135deg, #dc2626, #ef4444);\n transform: scale(1.1) rotate(90deg);\n box-shadow: 0 6px 20px rgba(220,38,38,0.4);\n}\n.popup-overlay {\n position: fixed;\n inset: 0;\n background: rgba(0,0,0,0.3);\n z-index: 999998;\n cursor: pointer;\n display: none;\n}\n.popup-overlay.active {\n display: block;\n}\n@media (max-width: 768px) {\n .popup-overlay.active { display: block; }\n .event-popup {\n top: 50% !important;\n left: 50% !important;\n transform: translate(-50%, -50%) !important;\n }\n}\n.country-tooltip {\n position: absolute;\n background: var(--navy);\n color: var(--white);\n font-family: 'Montserrat', sans-serif;\n font-size: 14px;\n font-weight: 600;\n white-space: nowrap;\n padding: 10px 20px;\n border-radius: 25px;\n box-shadow: 0 8px 25px rgba(10,31,68,0.4);\n opacity: 0;\n visibility: hidden;\n transform: translateY(5px);\n transition: all 0.2s;\n pointer-events: none;\n z-index: 10002;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n border: 1px solid rgba(212,175,55,0.2);\n}\n.country-tooltip.show {\n opacity: 1;\n visibility: visible;\n transform: translateY(0);\n}\n.popup-header {\n display: flex;\n gap: 16px;\n margin-bottom: 20px;\n}\n.popup-image-wrapper {\n position: relative;\n width: 110px;\n height: 80px;\n flex-shrink: 0;\n border-radius: 15px;\n overflow: hidden;\n background: linear-gradient(135deg, #f0f2f5 0%, #e5e7eb 100%);\n box-shadow: 0 4px 15px rgba(10,31,68,0.15);\n border: 1px solid rgba(212,175,55,0.1);\n}\n.popup-image-wrapper.no-image {\n background: linear-gradient(135deg, #f0f2f5 0%, #e5e7eb 100%);\n}\n.popup-image {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n}\n.popup-image-placeholder {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 32px;\n background: linear-gradient(135deg, #f8f9fa 0%, #f0f2f5 100%);\n color: #6B7280;\n text-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n.popup-content { \n flex: 1; \n min-height: 80px;\n}\n.popup-title {\n font-family: 'Montserrat', sans-serif;\n font-weight: 800;\n font-size: 18px;\n color: var(--navy);\n margin: 0 0 10px;\n line-height: 1.3;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-transform: uppercase;\n letter-spacing: -0.3px;\n}\n.popup-meta {\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n.popup-meta-item {\n font-family: 'Poppins', sans-serif;\n font-size: 13px;\n color: var(--gray);\n display: flex;\n align-items: center;\n gap: 8px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.3px;\n}\n.popup-excerpt {\n font-family: 'Poppins', sans-serif;\n font-size: 14px;\n color: #475569;\n line-height: 1.6;\n margin: 16px 0 20px;\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n.popup-link {\n background: linear-gradient(135deg, var(--gold), #ffd700);\n color: var(--navy);\n padding: 12px 24px;\n border-radius: 50px;\n text-decoration: none;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n font-family: 'Montserrat', sans-serif;\n font-weight: 800;\n font-size: 14px;\n text-transform: uppercase;\n letter-spacing: 1px;\n transition: all 0.3s;\n box-shadow: 0 4px 15px rgba(212,175,55,0.4);\n position: relative;\n overflow: hidden;\n touch-action: manipulation;\n}\n.popup-link:hover {\n transform: translateY(-3px);\n box-shadow: 0 8px 25px rgba(212,175,55,0.5);\n background: linear-gradient(135deg, #e6c157, #ffd700);\n}\n.loading-overlay {\n position: absolute;\n inset: 0;\n background: rgba(255,255,255,0.95);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10000;\n backdrop-filter: blur(5px);\n border-radius: var(--r);\n}\n.spinner {\n width: 50px;\n height: 50px;\n border: 4px solid #e5e7eb;\n border-top-color: var(--gold);\n border-radius: 50%;\n animation: spin 1s linear infinite;\n margin: 0 auto 20px;\n box-shadow: 0 0 20px rgba(212,175,55,0.2);\n}\n.loading-text {\n font-family: 'Montserrat', sans-serif;\n font-size: 16px;\n color: var(--gray);\n font-weight: 600;\n letter-spacing: 0.5px;\n text-transform: uppercase;\n}\n@media (max-width: 768px) {\n .brics-map-container { padding: 40px 0; }\n .content-wrapper { padding: 0 15px; }\n .brics-header { margin-bottom: 40px; }\n .brics-header h2 { font-size: 2rem; }\n .brics-subtitle { font-size: 1.1rem; }\n .filter-controls { gap: 10px; margin-bottom: 25px; padding: 0 10px; }\n .filter-btn { padding: 10px 20px; font-size: 12px; border-radius: 25px; }\n .brics-legend { gap: 10px; padding: 20px 15px; margin-bottom: 25px; border-radius: 20px; }\n .brics-country-tag { padding: 8px 16px; gap: 10px; border-radius: 25px; }\n .country-flag { width: 24px; height: 18px; }\n .country-name { font-size: 13px; }\n .event-count { font-size: 11px; padding: 3px 8px; border-radius: 15px; }\n .map-wrapper { margin: 0; width: 100%; min-height: 450px; height: 450px; border-radius: 15px; }\n .map-svg-container { padding: 10px; }\n .map-svg-container svg { max-height: none; height: 130%; width: auto; max-width: none; }\n .zoom-controls { bottom: 10px; right: 10px; gap: 8px; }\n .zoom-btn { width: 36px; height: 36px; font-size: 18px; }\n .zoom-reset { font-size: 12px; padding: 6px 10px; border-radius: 20px; }\n .svg-event-marker circle { stroke-width: 2; }\n .svg-event-marker:active circle {\n stroke-width: 4;\n filter: drop-shadow(0 4px 15px rgba(212,175,55,0.5));\n }\n .event-popup { max-width: calc(100vw - 30px) !important; min-width: 280px; padding: 20px; border-radius: 20px; }\n .popup-header { flex-direction: column; gap: 12px; }\n .popup-image-wrapper { width: 100%; height: 160px; border-radius: 12px; }\n .popup-image-placeholder { font-size: 48px; }\n .popup-title { font-size: 16px; }\n .popup-excerpt { font-size: 13px; }\n .popup-link { width: 100%; justify-content: center; padding: 12px 20px; border-radius: 25px; }\n .country-tooltip { font-size: 12px; padding: 8px 16px; border-radius: 20px; }\n .connection-lines { display: none; }\n .particle { width: 3px; height: 3px; }\n}\n@media (max-width: 480px) {\n .brics-map-container { padding: 30px 0; }\n .brics-header { margin-bottom: 35px; }\n .brics-header h2 { font-size: 1.8rem; }\n .brics-subtitle { font-size: 1rem; margin-top: 20px; }\n}\n@media (max-width: 375px) {\n .brics-header h2 { font-size: 1.8rem; }\n .brics-subtitle { font-size: 1rem; }\n .map-wrapper { height: 350px; min-height: 350px; border-radius: 12px; }\n .svg-event-marker text { font-size: 14px; }\n}\n@media (hover: none) and (pointer: coarse) {\n .svg-event-marker {\n transform-origin: center;\n }\n .svg-event-marker:active circle {\n stroke-width: 4;\n filter: drop-shadow(0 6px 20px rgba(212,175,55,0.5));\n }\n}\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"brics-map-container\">\n<div class=\"particles\">\n<div class=\"particle\" style=\"left:10%;animation-delay:0s\"><\/div>\n<div class=\"particle\" style=\"left:30%;animation-delay:2s\"><\/div>\n<div class=\"particle\" style=\"left:50%;animation-delay:4s\"><\/div>\n<div class=\"particle\" style=\"left:70%;animation-delay:6s\"><\/div>\n<div class=\"particle\" style=\"left:90%;animation-delay:8s\"><\/div>\n<\/div>\n<div class=\"content-wrapper\">\n<div class=\"brics-header\">\n<a href=\"https:\/\/bifa.ai\/events-2\/\" style=\"text-decoration: none;\"><\/p>\n<h2>Eventos de transi\u00e7\u00e3o BIFA+<\/h2>\n<p><\/a><\/p>\n<p class=\"brics-subtitle\">Conectando na\u00e7\u00f5es por meio de pontes econ\u00f4micas<\/p>\n<\/div>\n<div class=\"filter-controls\" id=\"filterControls\"><\/div>\n<div class=\"brics-legend\" id=\"legend\"><\/div>\n<div class=\"map-wrapper\">\n<div class=\"map-zoom-container\" id=\"mapZoomContainer\">\n<div class=\"map-svg-container\" id=\"mapContainer\"><\/div>\n<\/div>\n<div class=\"country-tooltip\" id=\"tooltip\"><\/div>\n<div class=\"zoom-controls\" id=\"zoomControls\"><\/div>\n<div class=\"loading-overlay\" id=\"loadingOverlay\">\n<div style=\"text-align:center\">\n<div class=\"spinner\"><\/div>\n<div class=\"loading-text\">Loading BIFA+ content…<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"event-popup\" id=\"eventPopup\"><\/div>\n<div class=\"popup-overlay\" id=\"popupOverlay\"><\/div>\n<\/div>\n<\/div>\n<p><script>\n(function() {\n'use strict';<\/p>\n<p>\/\/ ==================== CONFIGURATION ====================\nconst CONFIG = {\n SVG_PATH: \"\/wp-content\/themes\/yootheme-child\/assets\/images\/world_map.svg\",\n API_ENDPOINT: 'https:\/\/bifa.ai\/wp-json\/wp\/v2\/bifa_news_events?_embed&per_page=100&acf_format=standard',\n IMAGE_PROXY: 'https:\/\/images.weserv.nl\/',\n MIN_ZOOM: 1,\n MAX_ZOOM: 4,\n ZOOM_STEP: 0.3,\n MOBILE_BREAKPOINT: 768,\n DEBOUNCE_DELAY: 250,\n THROTTLE_DELAY: 16,\n POPUP_HOVER_DELAY: 200,\n TOUCH_TAP_THRESHOLD: 300,\n MAX_MARKERS_PER_COUNTRY: 5,\n MARKER_RADIUS_DESKTOP: 30,\n MARKER_RADIUS_MOBILE: 20,\n MARKER_SIZE_DESKTOP: 20,\n MARKER_SIZE_MOBILE: 22\n};<\/p>\n<p>const BRICS_COUNTRIES = {\n 'BR': { name: 'Brazil', lat: -14.235, lng: -51.925, size: 'medium' },\n 'RU': { name: 'Russian Federation', lat: 61.524, lng: 105.318, size: 'large' },\n 'IN': { name: 'India', lat: 20.593, lng: 78.962, size: 'large' },\n 'CN': { name: 'China', lat: 35.861, lng: 104.195, size: 'large' },\n 'ZA': { name: 'South Africa', lat: -30.559, lng: 22.937, size: 'medium' },\n 'SA': { name: 'Saudi Arabia', lat: 23.885, lng: 45.079, size: 'small' },\n 'AE': { name: 'United Arab Emirates', lat: 23.424, lng: 53.847, size: 'small' },\n 'EG': { name: 'Egypt', lat: 26.820, lng: 30.802, size: 'medium' },\n 'IR': { name: 'Iran', lat: 32.427, lng: 53.688, size: 'medium' },\n 'ET': { name: 'Ethiopia', lat: 9.145, lng: 40.489, size: 'small' },\n 'ID': { name: 'Indonesia', lat: -0.789, lng: 113.921, size: 'large' }\n};<\/p>\n<p>const MAX_MARKERS_BY_SIZE = {\n small: 1,\n medium: 3,\n large: 4\n};<\/p>\n<p>const INDONESIA_ID_PATTERNS = ['ID', 'ID0', 'ID1', 'ID2', 'ID3', 'ID4', 'ID5', 'ID6', 'ID7', 'ID8', 'ID9', 'ID_'];<\/p>\n<p>\/\/ ==================== STATE MANAGEMENT ====================\nclass AppState {\n constructor() {\n this.content = [];\n this.filter = 'all';\n this.svg = null;\n this.zoom = 1;\n this.x = 0;\n this.y = 0;\n this.isDragging = false;\n this.startX = 0;\n this.startY = 0;\n this.maxX = 0;\n this.maxY = 0;\n this.markersGroup = null;\n this.activeMarker = null;\n this.isPopupOpen = false;\n this.isPopupHovered = false;\n this.touchStartTime = 0;\n this.lastDistance = 0;\n this.countryCenters = {};\n this.eventListeners = new Map();\n this.isTouchDevice = this._detectTouchDevice();\n this.isMobile = this._detectMobile();\n this.resizeObserver = null;\n this.imageLoadErrors = new WeakMap();\n }<\/p>\n<p> _detectTouchDevice() {\n return ('ontouchstart' in window) || \n (navigator.maxTouchPoints > 0) || \n (navigator.msMaxTouchPoints > 0);\n }<\/p>\n<p> _detectMobile() {\n return window.innerWidth <= CONFIG.MOBILE_BREAKPOINT;\n }\n\n updateMobileState() {\n this.isMobile = this._detectMobile();\n }\n\n reset() {\n this.zoom = 1;\n this.x = 0;\n this.y = 0;\n this.isDragging = false;\n }\n}\n\n\/\/ ==================== UTILITY FUNCTIONS ====================\nclass Utils {\n static $(id) {\n return document.getElementById(id);\n }\n\n static $$(selector, parent = document) {\n return parent.querySelectorAll(selector);\n }\n\n static createElement(html) {\n const template = document.createElement('template');\n template.innerHTML = html.trim();\n return template.content.firstChild;\n }\n\n static debounce(func, wait) {\n let timeout;\n return function executedFunction(...args) {\n const later = () => {\n clearTimeout(timeout);\n func(...args);\n };\n clearTimeout(timeout);\n timeout = setTimeout(later, wait);\n };\n }<\/p>\n<p> static throttle(func, limit) {\n let inThrottle;\n return function(...args) {\n if (!inThrottle) {\n func.apply(this, args);\n inThrottle = true;\n setTimeout(() => inThrottle = false, limit);\n }\n };\n }<\/p>\n<p> static formatDate(dateStr) {\n if (!dateStr) return '';\n const date = new Date(dateStr);\n return date.toLocaleDateString('en-US', { \n month: 'short', \n day: 'numeric', \n year: 'numeric' \n });\n }<\/p>\n<p> static stripHtml(html) {\n const div = document.createElement('div');\n div.innerHTML = html;\n const text = div.textContent || '';\n return text.length > 200 ? text.substring(0, 200) + '...' : text;\n }<\/p>\n<p> static createImageProxy(url) {\n if (!url || window.location.hostname === 'bifa.ai') return url;\n return `${CONFIG.IMAGE_PROXY}?url=${encodeURIComponent(url)}&w=380&h=220&fit=cover&a=attention`;\n }<\/p>\n<p> static isIndonesiaPath(id) {\n return INDONESIA_ID_PATTERNS.some(pattern => \n id === pattern || id.startsWith(pattern)\n );\n }<\/p>\n<p> static clamp(value, min, max) {\n return Math.max(min, Math.min(max, value));\n }\n}<\/p>\n<p>\/\/ ==================== EVENT MANAGER ====================\nclass EventManager {\n constructor() {\n this.listeners = new Map();\n }<\/p>\n<p> add(element, event, handler, options = {}) {\n if (!element) return;<\/p>\n<p> const key = `${event}-${handler.name || 'anonymous'}`;<\/p>\n<p> if (this.listeners.has(element)) {\n const elementListeners = this.listeners.get(element);\n if (elementListeners.has(key)) {\n return;\n }\n elementListeners.set(key, { event, handler, options });\n } else {\n this.listeners.set(element, new Map([[key, { event, handler, options }]]));\n }<\/p>\n<p> element.addEventListener(event, handler, options);\n }<\/p>\n<p> remove(element, event, handler) {\n if (!element) return;<\/p>\n<p> const key = `${event}-${handler.name || 'anonymous'}`;\n const elementListeners = this.listeners.get(element);<\/p>\n<p> if (elementListeners && elementListeners.has(key)) {\n const { event: evt, handler: hdlr, options } = elementListeners.get(key);\n element.removeEventListener(evt, hdlr, options);\n elementListeners.delete(key);<\/p>\n<p> if (elementListeners.size === 0) {\n this.listeners.delete(element);\n }\n }\n }<\/p>\n<p> removeAll(element) {\n if (!element || !this.listeners.has(element)) return;<\/p>\n<p> const elementListeners = this.listeners.get(element);\n elementListeners.forEach(({ event, handler, options }) => {\n element.removeEventListener(event, handler, options);\n });<\/p>\n<p> this.listeners.delete(element);\n }<\/p>\n<p> cleanup() {\n this.listeners.forEach((elementListeners, element) => {\n this.removeAll(element);\n });\n this.listeners.clear();\n }\n}<\/p>\n<p>\/\/ ==================== ZOOM CONTROLLER ====================\nclass ZoomController {\n constructor(state, eventManager) {\n this.state = state;\n this.eventManager = eventManager;\n this.container = null;\n this.mapContainer = null;\n }<\/p>\n<p> init(container, mapContainer) {\n this.container = container;\n this.mapContainer = mapContainer;\n this.setupEventListeners();\n this.renderControls();\n }<\/p>\n<p> setupEventListeners() {\n this.eventManager.add(this.container, 'mousedown', this.handleStart.bind(this));\n this.eventManager.add(this.container, 'mousemove', Utils.throttle(this.handleMove.bind(this), CONFIG.THROTTLE_DELAY));\n this.eventManager.add(this.container, 'mouseup', this.handleEnd.bind(this));\n this.eventManager.add(this.container, 'mouseleave', this.handleEnd.bind(this));\n this.eventManager.add(this.container, 'wheel', this.handleWheel.bind(this), { passive: false });<\/p>\n<p> this.eventManager.add(this.container, 'touchstart', this.handleStart.bind(this), { passive: false });\n this.eventManager.add(this.container, 'touchmove', this.handleTouchMove.bind(this), { passive: false });\n this.eventManager.add(this.container, 'touchend', this.handleTouchEnd.bind(this));\n }<\/p>\n<p> handleStart(e) {\n if (this.state.zoom <= 1) return;\n \n this.state.isDragging = true;\n const point = e.touches ? e.touches[0] : e;\n this.state.startX = point.clientX - this.state.x;\n this.state.startY = point.clientY - this.state.y;\n \n if (e.type === 'touchstart') {\n e.preventDefault();\n }\n }\n\n handleMove(e) {\n if (!this.state.isDragging || this.state.zoom <= 1) return;\n \n const point = e.touches ? e.touches[0] : e;\n this.state.x = point.clientX - this.state.startX;\n this.state.y = point.clientY - this.state.startY;\n \n requestAnimationFrame(() => this.updateTransform());<\/p>\n<p> if (e.type === 'touchmove') {\n e.preventDefault();\n }\n }<\/p>\n<p> handleEnd() {\n this.state.isDragging = false;\n }<\/p>\n<p> handleWheel(e) {\n if (e.ctrlKey || e.metaKey) {\n e.preventDefault();\n const delta = e.deltaY > 0 ? -CONFIG.ZOOM_STEP : CONFIG.ZOOM_STEP;\n this.setZoom(this.state.zoom + delta);\n }\n }<\/p>\n<p> handleTouchMove(e) {\n if (e.touches.length === 2) {\n e.preventDefault();\n const touch1 = e.touches[0];\n const touch2 = e.touches[1];\n const distance = Math.hypot(\n touch2.clientX - touch1.clientX,\n touch2.clientY - touch1.clientY\n );<\/p>\n<p> if (this.state.lastDistance > 0) {\n const scale = distance \/ this.state.lastDistance;\n this.setZoom(this.state.zoom * scale);\n }\n this.state.lastDistance = distance;\n } else {\n this.handleMove(e);\n }\n }<\/p>\n<p> handleTouchEnd(e) {\n if (e.touches.length === 0) {\n this.state.lastDistance = 0;\n this.handleEnd();\n }\n }<\/p>\n<p> setZoom(zoom) {\n this.state.zoom = Utils.clamp(zoom, CONFIG.MIN_ZOOM, CONFIG.MAX_ZOOM);\n this.updateBounds();\n this.updateTransform();\n }<\/p>\n<p> updateBounds() {\n if (!this.state.svg || !this.container) return;<\/p>\n<p> const containerBounds = this.container.getBoundingClientRect();\n const svgBox = this.state.svg.getBBox();<\/p>\n<p> const scaledWidth = svgBox.width * this.state.zoom;\n const scaledHeight = svgBox.height * this.state.zoom;<\/p>\n<p> this.state.maxX = Math.max(0, (scaledWidth - containerBounds.width) \/ 2);\n this.state.maxY = Math.max(0, (scaledHeight - containerBounds.height) \/ 2);\n }<\/p>\n<p> updateTransform() {\n if (!this.mapContainer) return;<\/p>\n<p> this.state.x = Utils.clamp(this.state.x, -this.state.maxX, this.state.maxX);\n this.state.y = Utils.clamp(this.state.y, -this.state.maxY, this.state.maxY);<\/p>\n<p> this.mapContainer.style.transform = \n `translate3d(${this.state.x}px, ${this.state.y}px, 0) scale(${this.state.zoom})`;\n }<\/p>\n<p> zoomIn() {\n this.setZoom(this.state.zoom + CONFIG.ZOOM_STEP);\n }<\/p>\n<p> zoomOut() {\n this.setZoom(this.state.zoom - CONFIG.ZOOM_STEP);\n }<\/p>\n<p> reset() {\n this.state.reset();\n this.updateTransform();\n }<\/p>\n<p> renderControls() {\n const controls = Utils.$('zoomControls');\n controls.innerHTML = `\n <button class=\"zoom-btn\" id=\"zoomInBtn\">+<\/button>\n <button class=\"zoom-btn\" id=\"zoomOutBtn\">\u2212<\/button>\n <button class=\"zoom-btn zoom-reset\" id=\"zoomResetBtn\">Reset<\/button>\n `;<\/p>\n<p> this.eventManager.add(Utils.$('zoomInBtn'), 'click', () => this.zoomIn());\n this.eventManager.add(Utils.$('zoomOutBtn'), 'click', () => this.zoomOut());\n this.eventManager.add(Utils.$('zoomResetBtn'), 'click', () => this.reset());\n }\n}<\/p>\n<p>\/\/ ==================== MAP MANAGER ====================\nclass MapManager {\n constructor(state, eventManager) {\n this.state = state;\n this.eventManager = eventManager;\n this.tooltip = Utils.$('tooltip');\n }<\/p>\n<p> async loadSVG() {\n try {\n const response = await fetch(CONFIG.SVG_PATH);\n if (!response.ok) {\n throw new Error(`${response.status} ${response.statusText}`);\n }<\/p>\n<p> const svgText = await response.text();\n const container = Utils.$('mapContainer');\n container.innerHTML = svgText;<\/p>\n<p> this.state.svg = container.querySelector('svg');\n if (!this.state.svg) {\n throw new Error('SVG element not found');\n }<\/p>\n<p> this.initMap();\n } catch (error) {\n console.error('Error loading SVG:', error);\n Utils.$('mapContainer').innerHTML = \n '<\/p>\n<div style=\"text-align:center;padding:50px;color:#666\">Unable to load map<\/div>\n<p>';\n Utils.$('loadingOverlay').style.display = 'none';\n }\n }<\/p>\n<p> initMap() {\n this.setupSVGDefs();\n this.createMarkersGroup();\n this.processPaths();\n this.createConnectionLines();\n }<\/p>\n<p> setupSVGDefs() {\n const defs = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'defs');\n defs.innerHTML = `\n <linearGradient id=\"brics-gradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n <stop offset=\"0%\" style=\"stop-color:#D4AF37\"\/>\n <stop offset=\"100%\" style=\"stop-color:#b8973f\"\/>\n <\/linearGradient>\n `;\n this.state.svg.insertBefore(defs, this.state.svg.firstChild);\n }<\/p>\n<p> createMarkersGroup() {\n this.state.markersGroup = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'g');\n this.state.markersGroup.setAttribute('id', 'markers-group');\n this.state.svg.appendChild(this.state.markersGroup);\n }<\/p>\n<p> processPaths() {\n const paths = this.state.svg.querySelectorAll('path');<\/p>\n<p> paths.forEach(path => {\n const id = path.id || path.getAttribute('id');\n if (!id) return;<\/p>\n<p> const countryCode = this.identifyCountry(id);<\/p>\n<p> if (countryCode) {\n this.setupBRICSPath(path, countryCode);\n this.calculateCenter(path, countryCode);\n }\n });\n }<\/p>\n<p> identifyCountry(pathId) {\n if (BRICS_COUNTRIES[pathId]) {\n return pathId;\n }<\/p>\n<p> if (Utils.isIndonesiaPath(pathId)) {\n return 'ID';\n }<\/p>\n<p> return null;\n }<\/p>\n<p> setupBRICSPath(path, countryCode) {\n path.classList.add('brics-country');\n path.setAttribute('data-brics', countryCode);\n path.setAttribute('data-country-name', BRICS_COUNTRIES[countryCode].name);<\/p>\n<p> if (!this.state.isTouchDevice) {\n this.eventManager.add(path, 'mouseenter', (e) => this.showTooltip(e));\n this.eventManager.add(path, 'mousemove', (e) => this.updateTooltip(e));\n this.eventManager.add(path, 'mouseleave', () => this.hideTooltip());\n }<\/p>\n<p> this.eventManager.add(path, 'click', (e) => this.toggleCountry(e, countryCode));\n }<\/p>\n<p> calculateCenter(path, countryCode) {\n const bbox = path.getBBox();\n if (!this.state.countryCenters[countryCode]) {\n this.state.countryCenters[countryCode] = {\n x: bbox.x + bbox.width \/ 2,\n y: bbox.y + bbox.height \/ 2\n };\n }\n }<\/p>\n<p> showTooltip(e) {\n const name = e.target.getAttribute('data-country-name');\n if (name) {\n this.tooltip.textContent = name;\n this.tooltip.classList.add('show');\n }\n }<\/p>\n<p> updateTooltip(e) {\n const rect = Utils.$('mapZoomContainer').getBoundingClientRect();\n this.tooltip.style.left = (e.clientX - rect.left) + 'px';\n this.tooltip.style.top = (e.clientY - rect.top - 40) + 'px';\n }<\/p>\n<p> hideTooltip() {\n this.tooltip.classList.remove('show');\n }<\/p>\n<p> toggleCountry(e, countryCode) {\n e.target.classList.toggle('active-country');<\/p>\n<p> const tag = document.querySelector(`[data-country=\"${countryCode}\"]`);\n if (tag) {\n tag.classList.toggle('active');\n }\n }<\/p>\n<p> createConnectionLines() {\n if (this.state.isMobile) return;<\/p>\n<p> const connections = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'g');\n connections.setAttribute('class', 'connection-lines');<\/p>\n<p> const lines = [\n ['BR', 'ZA'], \n ['RU', 'CN'], \n ['CN', 'IN'], \n ['SA', 'AE'], \n ['EG', 'ET'], \n ['IN', 'ID']\n ];<\/p>\n<p> lines.forEach(([from, to]) => {\n const fromCenter = this.state.countryCenters[from];\n const toCenter = this.state.countryCenters[to];<\/p>\n<p> if (fromCenter && toCenter) {\n const line = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'path');\n const midX = (fromCenter.x + toCenter.x) \/ 2;\n const midY = (fromCenter.y + toCenter.y) \/ 2 - 50;<\/p>\n<p> line.setAttribute('d', \n `M ${fromCenter.x} ${fromCenter.y} Q ${midX} ${midY} ${toCenter.x} ${toCenter.y}`\n );\n line.setAttribute('class', 'connection-line');\n connections.appendChild(line);\n }\n });<\/p>\n<p> this.state.svg.insertBefore(connections, this.state.markersGroup);\n }\n}<\/p>\n<p>\/\/ ==================== CONTENT MANAGER ====================\nclass ContentManager {\n constructor(state, eventManager) {\n this.state = state;\n this.eventManager = eventManager;\n }<\/p>\n<p> async loadContent() {\n try {\n const response = await fetch(CONFIG.API_ENDPOINT);\n const posts = await response.json();<\/p>\n<p> this.state.content = posts.map(post => this.parsePost(post));<\/p>\n<p> Utils.$('loadingOverlay').style.display = 'none';\n return this.state.content;\n } catch (error) {\n console.error('Error loading content:', error);\n Utils.$('loadingOverlay').style.display = 'none';\n return [];\n }\n }<\/p>\n<p> getPostUrl(post) {\n if (post.link && post.link !== '' && !post.link.includes('?p=')) {\n return post.link;\n }<\/p>\n<p> if (post.slug) {\n return `https:\/\/bifa.ai\/news-events\/${post.slug}\/`;\n }<\/p>\n<p> if (post.guid && post.guid.rendered && !post.guid.rendered.includes('?p=')) {\n return post.guid.rendered;\n }<\/p>\n<p> if (post.id) {\n return `https:\/\/bifa.ai\/?p=${post.id}`;\n }<\/p>\n<p> console.error('Cannot determine URL for post:', post.id);\n return 'https:\/\/bifa.ai\/';\n }<\/p>\n<p> parsePost(post) {\n const types = post.bifa_item_type || [];\n const classes = post.class_list || [];<\/p>\n<p> const hasEvent = types.some(x => x == 3 || x == 'event') || \n classes.some(c => c.includes('bifa_item_type-event'));\n const hasNews = types.some(x => x == 2 || x == 'news') || \n classes.some(c => c.includes('bifa_item_type-news'));<\/p>\n<p> let image = '';\n if (post._embedded?.['wp:featuredmedia']?.[0]?.source_url) {\n image = Utils.createImageProxy(post._embedded['wp:featuredmedia'][0].source_url);\n }<\/p>\n<p> return {\n id: post.id,\n title: post.title.rendered,\n excerpt: Utils.stripHtml(post.excerpt.rendered),\n link: this.getPostUrl(post),\n type: hasEvent ? 'event' : hasNews ? 'news' : 'unknown',\n date: post._bifa_event_date || post.date,\n location: post._bifa_location,\n priority: post._bifa_priority,\n country: post._bifa_event_country,\n image: image\n };\n }<\/p>\n<p> filterContent(filter) {\n this.state.filter = filter;<\/p>\n<p> let filtered = this.state.content;\n if (filter === 'events') {\n filtered = this.state.content.filter(item => item.type === 'event');\n } else if (filter === 'news') {\n filtered = this.state.content.filter(item => item.type === 'news');\n }<\/p>\n<p> return filtered;\n }<\/p>\n<p> groupByCountry(content) {\n const grouped = {};<\/p>\n<p> content.forEach(item => {\n if (item.country && BRICS_COUNTRIES[item.country]) {\n if (!grouped[item.country]) {\n grouped[item.country] = [];\n }\n grouped[item.country].push(item);\n }\n });<\/p>\n<p> Object.keys(grouped).forEach(country => {\n const countrySize = BRICS_COUNTRIES[country].size;\n const maxMarkers = MAX_MARKERS_BY_SIZE[countrySize];<\/p>\n<p> grouped[country].sort((a, b) => new Date(b.date) - new Date(a.date));<\/p>\n<p> grouped[country] = grouped[country].slice(0, maxMarkers);\n });<\/p>\n<p> return grouped;\n }\n}<\/p>\n<p>\/\/ ==================== MARKER MANAGER ====================\nclass MarkerManager {\n constructor(state, eventManager, popupManager) {\n this.state = state;\n this.eventManager = eventManager;\n this.popupManager = popupManager;\n }<\/p>\n<p> renderMarkers(groupedContent) {\n if (!this.state.markersGroup) return;<\/p>\n<p> this.state.markersGroup.innerHTML = '';<\/p>\n<p> Object.entries(groupedContent).forEach(([country, items]) => {\n const center = this.state.countryCenters[country];\n if (!center) return;<\/p>\n<p> const markerCount = items.length;<\/p>\n<p> let radius;\n if (markerCount === 1) {\n radius = 0;\n } else if (markerCount === 2) {\n radius = this.state.isMobile ? 15 : 20;\n } else if (markerCount === 3) {\n radius = this.state.isMobile ? 20 : 25;\n } else {\n radius = this.state.isMobile ? 25 : 30;\n }<\/p>\n<p> \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043c\u0430\u0440\u043a\u0435\u0440\u044b \u0432 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435: \u0441\u0442\u0430\u0440\u044b\u0435 \u043f\u0435\u0440\u0432\u044b\u043c\u0438, \u043d\u043e\u0432\u044b\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u043c\u0438\n \/\/ \u0412 SVG \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0442\u0441\u044f \u043f\u043e\u0432\u0435\u0440\u0445 \u043f\u0435\u0440\u0432\u044b\u0445\n const reversedItems = [...items].reverse();<\/p>\n<p> reversedItems.forEach((item, reverseIndex) => {\n \/\/ \u0412\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u043d\u0434\u0435\u043a\u0441 \u0434\u043b\u044f \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f\n const index = markerCount - reverseIndex - 1;<\/p>\n<p> let markerX, markerY;<\/p>\n<p> if (markerCount === 1) {\n markerX = center.x;\n markerY = center.y;\n } else {\n const angle = (index * 360 \/ markerCount - 90) * Math.PI \/ 180;\n markerX = center.x + Math.cos(angle) * radius;\n markerY = center.y + Math.sin(angle) * radius;\n }<\/p>\n<p> const marker = this.createMarker(item, markerX, markerY, reverseIndex);\n this.setupMarkerEvents(marker, item);\n this.state.markersGroup.appendChild(marker);\n });\n });\n }<\/p>\n<p> createMarker(item, x, y, zIndex = 0) {\n const markerSize = this.state.isMobile ? \n CONFIG.MARKER_SIZE_MOBILE : \n CONFIG.MARKER_SIZE_DESKTOP;<\/p>\n<p> const g = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'g');\n g.setAttribute('class', `svg-event-marker ${item.type} ${item.priority === 'urgent' ? 'urgent' : ''}`);\n g.setAttribute('transform', `translate(${x},${y})`);\n g.setAttribute('data-item-id', item.id);\n g.setAttribute('data-z-index', zIndex);<\/p>\n<p> const hitArea = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'circle');\n hitArea.setAttribute('r', this.state.isMobile ? '35' : '30');\n hitArea.setAttribute('fill', 'transparent');\n hitArea.setAttribute('class', 'hit-area');<\/p>\n<p> const circle = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'circle');\n circle.setAttribute('r', markerSize);<\/p>\n<p> \/\/ \u0418\u0421\u041f\u0420\u0410\u0412\u041b\u0415\u041d\u0418\u0415 \u0414\u041b\u042f iPhone: \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u044d\u043c\u043e\u0434\u0437\u0438 \u0432\u043c\u0435\u0441\u0442\u043e \u0432\u043d\u0435\u0448\u043d\u0438\u0445 SVG \u0438\u043a\u043e\u043d\u043e\u043a\n const text = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'text');\n text.setAttribute('x', '0');\n text.setAttribute('y', this.state.isMobile ? '6' : '7');\n text.setAttribute('text-anchor', 'middle');\n text.setAttribute('dominant-baseline', 'middle');\n text.setAttribute('font-size', this.state.isMobile ? '16' : '18');\n text.setAttribute('pointer-events', 'none');\n text.setAttribute('user-select', 'none');<\/p>\n<p> \/\/ \u0412\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u044d\u043c\u043e\u0434\u0437\u0438 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u0438\u043f\u0430 \u0438 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u0430\n if (item.priority === 'urgent' && item.type === 'news') {\n text.textContent = '\ud83d\udea8';\n } else if (item.type === 'event') {\n text.textContent = '\ud83d\udcc5';\n } else {\n text.textContent = '\ud83d\udcf0';\n }<\/p>\n<p> g.appendChild(hitArea);\n g.appendChild(circle);\n g.appendChild(text);<\/p>\n<p> return g;\n }<\/p>\n<p> setupMarkerEvents(marker, item) {\n if (this.state.isTouchDevice || this.state.isMobile) {\n this.eventManager.add(marker, 'touchstart', (e) => {\n e.preventDefault();\n e.stopPropagation();\n this.handleMarkerTap(marker, item);\n }, { passive: false });<\/p>\n<p> this.eventManager.add(marker, 'click', (e) => {\n e.preventDefault();\n e.stopPropagation();\n const timeSinceTouch = Date.now() - this.state.touchStartTime;\n if (timeSinceTouch > CONFIG.TOUCH_TAP_THRESHOLD) {\n this.handleMarkerTap(marker, item);\n }\n });\n } else {\n this.eventManager.add(marker, 'mouseenter', (e) => {\n e.stopPropagation();\n this.state.activeMarker = marker;\n this.popupManager.show(item, e);\n });<\/p>\n<p> this.eventManager.add(marker, 'mouseleave', (e) => {\n e.stopPropagation();\n setTimeout(() => {\n if (!this.state.isPopupHovered && this.state.activeMarker === marker) {\n this.popupManager.hide();\n }\n }, CONFIG.POPUP_HOVER_DELAY);\n });<\/p>\n<p> this.eventManager.add(marker, 'click', (e) => {\n e.stopPropagation();\n window.location.href = item.link;\n });\n }\n }<\/p>\n<p> handleMarkerTap(marker, item) {\n if (this.state.activeMarker === marker && this.state.isPopupOpen) {\n this.popupManager.hide();\n return;\n }<\/p>\n<p> this.state.activeMarker = marker;\n this.state.touchStartTime = Date.now();<\/p>\n<p> setTimeout(() => {\n this.popupManager.show(item, { currentTarget: marker });\n }, 10);\n }\n}<\/p>\n<p>\/\/ ==================== POPUP MANAGER ====================\nclass PopupManager {\n constructor(state, eventManager) {\n this.state = state;\n this.eventManager = eventManager;\n this.popup = Utils.$('eventPopup');\n this.overlay = Utils.$('popupOverlay');\n this.setupOverlayEvents();\n }<\/p>\n<p> setupOverlayEvents() {\n if (this.state.isTouchDevice) {\n this.eventManager.add(this.overlay, 'touchstart', (e) => {\n e.preventDefault();\n this.hide();\n });\n }<\/p>\n<p> this.eventManager.add(this.overlay, 'click', () => this.hide());\n }<\/p>\n<p> show(item, event) {\n this.state.isPopupOpen = true;\n this.renderPopup(item);\n this.positionPopup(event);\n this.setupPopupEvents();\n }<\/p>\n<p> renderPopup(item) {\n const imageHtml = item.image ? `<\/p>\n<div class=\"popup-image-wrapper\">\n <img decoding=\"async\" class=\"popup-image\" \n src=\"\/$%7Bitem.image%7D\" \n alt=\"${item.title.replace(\/\"\/g, '"')}\" \n data-image-url=\"${item.image}\">\n <\/div>\n<p> ` : `<\/p>\n<div class=\"popup-image-wrapper no-image\">\n<div class=\"popup-image-placeholder\">${item.type === 'event' ? '\ud83d\udcc5' : '\ud83d\udcf0'}<\/div>\n<\/p><\/div>\n<p> `;<\/p>\n<p> const closeButton = (this.state.isMobile || this.state.isTouchDevice) ? \n '<button class=\"popup-close\" id=\"popupCloseBtn\">\u00d7<\/button>' : '';<\/p>\n<p> this.popup.innerHTML = `\n ${closeButton}<\/p>\n<div class=\"popup-header\">\n ${imageHtml}<\/p>\n<div class=\"popup-content\">\n<h4 class=\"popup-title\">${item.title}<\/h4>\n<div class=\"popup-meta\">\n ${item.date ? `<\/p>\n<div class=\"popup-meta-item\">\ud83d\udcc5 ${Utils.formatDate(item.date)}<\/div>\n<p>` : ''}\n ${item.location ? `<\/p>\n<div class=\"popup-meta-item\">\ud83d\udccd ${item.location}<\/div>\n<p>` : ''}\n ${item.type ? `<\/p>\n<div class=\"popup-meta-item\">${item.type === 'event' ? '\ud83c\udfaf Event' : '\ud83d\udcf0 News'}<\/div>\n<p>` : ''}\n <\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p class=\"popup-excerpt\">${item.excerpt}<\/p>\n<p> <a href=\"\/$%7Bitem.link%7D\" class=\"popup-link\" onclick=\"window.location.href='${item.link}'; return false;\">View Details \u2192<\/a>\n `;<\/p>\n<p> this.popup.classList.add('active');<\/p>\n<p> if (item.image) {\n this.setupImageErrorHandling(this.popup.querySelector('.popup-image'));\n }<\/p>\n<p> if (closeButton) {\n const closeBtn = Utils.$('popupCloseBtn');\n if (closeBtn) {\n this.eventManager.add(closeBtn, 'click', () => this.hide());\n }\n }\n }<\/p>\n<p> setupImageErrorHandling(img) {\n if (!img || this.state.imageLoadErrors.get(img)) return;<\/p>\n<p> const errorHandler = () => {\n if (!this.state.imageLoadErrors.get(img)) {\n this.state.imageLoadErrors.set(img, true);\n const originalUrl = img.dataset.imageUrl || img.src;\n img.src = Utils.createImageProxy(originalUrl);\n }\n };<\/p>\n<p> this.eventManager.add(img, 'error', errorHandler);\n }<\/p>\n<p> positionPopup(event) {\n if (this.state.isMobile || this.state.isTouchDevice) {\n this.overlay.classList.add('active');\n return;\n }<\/p>\n<p> const rect = event.currentTarget.getBoundingClientRect();\n const popupWidth = 380;\n const popupHeight = this.popup.offsetHeight || 300;<\/p>\n<p> let posX = rect.right + 15;\n let posY = rect.top + rect.height \/ 2 - popupHeight \/ 2;<\/p>\n<p> if (posX + popupWidth > window.innerWidth - 20) {\n posX = rect.left - popupWidth - 15;\n }<\/p>\n<p> posY = Utils.clamp(posY, 20, window.innerHeight - popupHeight - 20);<\/p>\n<p> this.popup.style.left = posX + 'px';\n this.popup.style.top = posY + 'px';\n }<\/p>\n<p> setupPopupEvents() {\n if (!this.state.isMobile && !this.state.isTouchDevice) {\n this.eventManager.add(this.popup, 'mouseenter', () => {\n this.state.isPopupHovered = true;\n });<\/p>\n<p> this.eventManager.add(this.popup, 'mouseleave', () => {\n this.state.isPopupHovered = false;\n setTimeout(() => {\n if (!this.state.isPopupHovered) {\n this.hide();\n }\n }, 100);\n });\n }\n }<\/p>\n<p> hide() {\n this.popup.classList.remove('active');\n this.overlay.classList.remove('active');\n this.state.isPopupOpen = false;\n this.state.isPopupHovered = false;\n this.state.activeMarker = null;\n }\n}<\/p>\n<p>\/\/ ==================== UI MANAGER ====================\nclass UIManager {\n constructor(state, eventManager) {\n this.state = state;\n this.eventManager = eventManager;\n }<\/p>\n<p> renderFilters() {\n const container = Utils.$('filterControls');\n const filters = [\n { value: 'all', label: 'All', classes: '' },\n { value: 'events', label: 'Events', classes: '' },\n { value: 'news', label: 'News', classes: 'news' }\n ];<\/p>\n<p> container.innerHTML = filters.map(filter => `\n <button class=\"filter-btn ${filter.classes} ${filter.value === 'all' ? 'active' : ''}\" \n data-filter=\"${filter.value}\">\n ${filter.label}\n <\/button>\n `).join('');<\/p>\n<p> Utils.$$('.filter-btn').forEach(btn => {\n this.eventManager.add(btn, 'click', (e) => {\n this.handleFilterClick(e.target);\n });\n });\n }<\/p>\n<p> handleFilterClick(button) {\n const filter = button.getAttribute('data-filter');<\/p>\n<p> Utils.$$('.filter-btn').forEach(btn => {\n btn.classList.remove('active');\n });\n button.classList.add('active');<\/p>\n<p> app.applyFilter(filter);\n }<\/p>\n<p> renderLegend() {\n const container = Utils.$('legend');<\/p>\n<p> container.innerHTML = Object.entries(BRICS_COUNTRIES).map(([code, data]) => `<\/p>\n<div class=\"brics-country-tag\" data-country=\"${code}\">\n <img decoding=\"async\" class=\"country-flag\" \n src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Flags\/${code.toLowerCase()}.svg\" \n alt=\"${data.name}\" \n loading=\"lazy\">\n <span class=\"country-name\">${data.name}<\/span>\n <span class=\"event-count\" style=\"display:none\">0<\/span>\n <\/div>\n<p> `).join('');<\/p>\n<p> Utils.$$('.brics-country-tag').forEach(tag => {\n this.setupTagEvents(tag);\n });\n }<\/p>\n<p> setupTagEvents(tag) {\n this.eventManager.add(tag, 'click', (e) => {\n const code = e.currentTarget.getAttribute('data-country');\n this.toggleCountryHighlight(code);\n });<\/p>\n<p> if (!this.state.isTouchDevice) {\n this.eventManager.add(tag, 'mouseenter', (e) => {\n const code = e.currentTarget.getAttribute('data-country');\n this.highlightCountryPaths(code, true);\n });<\/p>\n<p> this.eventManager.add(tag, 'mouseleave', (e) => {\n const code = e.currentTarget.getAttribute('data-country');\n this.highlightCountryPaths(code, false);\n });\n }\n }<\/p>\n<p> toggleCountryHighlight(code) {\n const paths = this.getCountryPaths(code);\n paths.forEach(path => path.classList.toggle('active-country'));<\/p>\n<p> const tag = document.querySelector(`[data-country=\"${code}\"]`);\n if (tag) {\n tag.classList.toggle('active');\n }\n }<\/p>\n<p> highlightCountryPaths(code, highlight) {\n const paths = this.getCountryPaths(code);\n paths.forEach(path => {\n path.style.filter = highlight ? 'brightness(1.3)' : '';\n });\n }<\/p>\n<p> getCountryPaths(code) {\n if (code === 'ID') {\n return this.state.svg.querySelectorAll(\n INDONESIA_ID_PATTERNS.map(p => `path[id=\"${p}\"], path[id^=\"${p}\"]`).join(',')\n );\n }\n return this.state.svg.querySelectorAll(`path[data-brics=\"${code}\"]`);\n }<\/p>\n<p> updateCounts(groupedContent) {\n Utils.$$('.brics-country-tag').forEach(tag => {\n const code = tag.getAttribute('data-country');\n const count = groupedContent[code]?.length || 0;\n const counter = tag.querySelector('.event-count');<\/p>\n<p> if (count > 0) {\n counter.textContent = count;\n counter.style.display = 'block';\n } else {\n counter.style.display = 'none';\n }\n });\n }\n}<\/p>\n<p>\/\/ ==================== MAIN APPLICATION ====================\nclass BIFAMapApp {\n constructor() {\n this.state = new AppState();\n this.eventManager = new EventManager();\n this.zoomController = new ZoomController(this.state, this.eventManager);\n this.mapManager = new MapManager(this.state, this.eventManager);\n this.contentManager = new ContentManager(this.state, this.eventManager);\n this.popupManager = new PopupManager(this.state, this.eventManager);\n this.markerManager = new MarkerManager(this.state, this.eventManager, this.popupManager);\n this.uiManager = new UIManager(this.state, this.eventManager);\n }<\/p>\n<p> async init() {\n this.uiManager.renderFilters();\n this.uiManager.renderLegend();<\/p>\n<p> await this.mapManager.loadSVG();<\/p>\n<p> this.zoomController.init(\n Utils.$('mapZoomContainer'),\n Utils.$('mapContainer')\n );<\/p>\n<p> await this.contentManager.loadContent();\n this.updateMap();<\/p>\n<p> this.setupGlobalEvents();\n }<\/p>\n<p> setupGlobalEvents() {\n this.eventManager.add(document, 'click', (e) => {\n if ((this.state.isMobile || this.state.isTouchDevice) && \n this.state.isPopupOpen && \n !e.target.closest('.event-popup') && \n !e.target.closest('.svg-event-marker')) {\n this.popupManager.hide();\n }\n });<\/p>\n<p> this.eventManager.add(document, 'keydown', (e) => {\n if (e.key === 'Escape' && this.state.isPopupOpen) {\n this.popupManager.hide();\n }\n });<\/p>\n<p> this.eventManager.add(window, 'scroll', Utils.debounce(() => {\n if (!this.state.isMobile && !this.state.isTouchDevice && this.state.isPopupOpen) {\n this.popupManager.hide();\n }\n }, 100));<\/p>\n<p> this.eventManager.add(window, 'resize', Utils.debounce(() => {\n this.state.updateMobileState();\n this.zoomController.updateBounds();<\/p>\n<p> if (this.state.isMobile) {\n this.zoomController.reset();\n }\n }, CONFIG.DEBOUNCE_DELAY));\n }<\/p>\n<p> applyFilter(filter) {\n const filtered = this.contentManager.filterContent(filter);\n const grouped = this.contentManager.groupByCountry(filtered);<\/p>\n<p> this.uiManager.updateCounts(grouped);\n this.markerManager.renderMarkers(grouped);\n }<\/p>\n<p> updateMap() {\n const filtered = this.contentManager.filterContent(this.state.filter);\n const grouped = this.contentManager.groupByCountry(filtered);<\/p>\n<p> this.uiManager.updateCounts(grouped);\n this.markerManager.renderMarkers(grouped);\n }<\/p>\n<p> cleanup() {\n this.eventManager.cleanup();\n if (this.state.resizeObserver) {\n this.state.resizeObserver.disconnect();\n }\n }\n}<\/p>\n<p>\/\/ ==================== INITIALIZATION ====================\nlet app;<\/p>\n<p>function initApp() {\n app = new BIFAMapApp();\n app.init();\n}<\/p>\n<p>if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', initApp);\n} else {\n initApp();\n}<\/p>\n<p>window.addEventListener('beforeunload', () => {\n if (app) {\n app.cleanup();\n }\n});<\/p>\n<p>})();\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 Quote Block – Official Branding<\/title><\/p>\n<p> \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@400;500;600;700;800&family=Poppins:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n<style>\n\/* Reset and Base *\/\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}<\/p>\n<p>html {\n overflow-x: hidden;\n overflow-y: auto;\n}<\/p>\n<p>body {\n font-family: 'Montserrat', sans-serif;\n background: #f5f5f5;\n overflow-x: hidden;\n position: relative;\n}<\/p>\n<p>\/* Modern Minimalism Quote Section *\/\n.quote-section-wrapper {\n width: 100vw;\n position: relative;\n left: 50%;\n right: 50%;\n margin-left: -50vw;\n margin-right: -50vw;\n background: #FFFFFF; \/* Official Bright White *\/\n overflow: hidden;\n max-width: 100vw;\n}<\/p>\n<p>.quote-section {\n padding: 100px 0;\n position: relative;\n}<\/p>\n<p>.quote-container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 40px;\n position: relative;\n}<\/p>\n<p>\/* Layout *\/\n.quote-layout {\n display: grid;\n grid-template-columns: 300px 1fr;\n gap: 80px;\n align-items: center;\n}<\/p>\n<p>\/* Left Panel with Bird *\/\n.bird-panel {\n position: relative;\n height: 400px;\n display: flex;\n align-items: center;\n justify-content: center;\n animation: fadeInLeft 1s ease-out;\n}<\/p>\n<p>.bird-circle {\n width: 250px;\n height: 250px;\n border-radius: 50%;\n background: linear-gradient(135deg, rgba(212, 175, 55, 0.05) 0%, rgba(212, 175, 55, 0.08) 100%); \/* Heritage Gold gradient *\/\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n}<\/p>\n<p>.bird-icon {\n width: 150px;\n height: 150px;\n background-image: url('\/wp-content\/themes\/yootheme-child\/assets\/images\/Logo\/bird.svg');\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center;\n opacity: 0.2;\n animation: hover-bird 4s ease-in-out infinite;\n}<\/p>\n<p>@keyframes hover-bird {\n 0%, 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(-10px);\n }\n}<\/p>\n<p>\/* Right Panel with Quote *\/\n.quote-content {\n animation: fadeInRight 1s ease-out;\n}<\/p>\n<p>.quote-text {\n font-family: 'Poppins', sans-serif !important; \/* Poppins \u0434\u043b\u044f \u0446\u0438\u0442\u0430\u0442\u044b *\/\n font-size: 2.5rem;\n font-weight: 300;\n line-height: 1.5;\n color: #0A1F44; \/* Official Deep Navy *\/\n margin-bottom: 40px;\n position: relative;\n}<\/p>\n<p>.quote-text::before {\n content: '\"';\n position: absolute;\n top: -30px;\n left: -50px;\n font-size: 100px;\n color: #D4AF37; \/* Official Heritage Gold *\/\n opacity: 0.3;\n font-family: 'Poppins', sans-serif;\n}<\/p>\n<p>\/* Author Block *\/\n.author-block {\n display: flex;\n align-items: center;\n gap: 20px;\n}<\/p>\n<p>.author-logo {\n width: 60px;\n height: 60px;\n background-image: url('\/wp-content\/themes\/yootheme-child\/assets\/images\/LogoF.svg');\n background-size: contain;\n background-repeat: no-repeat;\n opacity: 0.8;\n}<\/p>\n<p>.author-details {\n border-left: 3px solid #D4AF37; \/* Official Heritage Gold *\/\n padding-left: 20px;\n}<\/p>\n<p>.author-name {\n font-size: 1.3rem;\n font-weight: 700;\n color: #0A1F44; \/* Official Deep Navy *\/\n margin-bottom: 5px;\n font-family: 'Montserrat', sans-serif;\n}<\/p>\n<p>.author-title {\n font-size: 1rem;\n color: #1D6143; \/* Official Civic Green *\/\n font-weight: 500;\n font-family: 'Montserrat', sans-serif;\n}<\/p>\n<p>\/* Animations *\/\n@keyframes fadeInLeft {\n from {\n opacity: 0;\n transform: translateX(-50px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}<\/p>\n<p>@keyframes fadeInRight {\n from {\n opacity: 0;\n transform: translateX(50px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}<\/p>\n<p>\/* Responsive Design *\/\n@media (max-width: 968px) {\n .quote-layout {\n grid-template-columns: 1fr;\n gap: 40px;\n }<\/p>\n<p> .bird-panel {\n height: 200px;\n }<\/p>\n<p> .bird-circle {\n width: 150px;\n height: 150px;\n }<\/p>\n<p> .bird-icon {\n width: 100px;\n height: 100px;\n }<\/p>\n<p> .quote-text {\n font-size: 1.8rem;\n }\n}<\/p>\n<p>@media (max-width: 640px) {\n .quote-section {\n padding: 80px 0;\n }<\/p>\n<p> .quote-text {\n font-size: 1.5rem;\n }<\/p>\n<p> .quote-text::before {\n font-size: 60px;\n left: -30px;\n top: -20px;\n }\n}\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"quote-section-wrapper\">\n<section class=\"quote-section\">\n<div class=\"quote-container\">\n<div class=\"quote-layout\">\n <\/p>\n<div class=\"bird-panel\">\n<div class=\"bird-circle\">\n<div class=\"bird-icon\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"quote-content\">\n<blockquote class=\"quote-text\"><p>\n We’re not just playing a game. We’re building the future.\n <\/p><\/blockquote>\n<div class=\"author-block\">\n<div class=\"author-logo\"><\/div>\n<div class=\"author-details\">\n<div class=\"author-name\"> Dr. Salim Almazaini<\/div>\n<div class=\"author-title\">Founder & President, BIFA & BIFA+<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<\/div>\n<p><script>\n\/\/ Animation on scroll\ndocument.addEventListener('DOMContentLoaded', function() {\n const observerOptions = {\n threshold: 0.3,\n rootMargin: '0px 0px -100px 0px'\n };<\/p>\n<p> const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.style.animationPlayState = 'running';\n observer.unobserve(entry.target);\n }\n });\n }, observerOptions);<\/p>\n<p> \/\/ Observe animated elements\n document.querySelectorAll('.bird-panel, .quote-content').forEach(el => {\n if (el) {\n if (el.style.animation || window.getComputedStyle(el).animation !== 'none') {\n el.style.animationPlayState = 'paused';\n observer.observe(el);\n }\n }\n });<\/p>\n<p> \/\/ Preload images\n function preloadImages() {\n const imageUrls = [\n '\/wp-content\/themes\/yootheme-child\/assets\/images\/Logo\/bird.svg',\n '\/wp-content\/themes\/yootheme-child\/assets\/images\/flag-logo1.svg'\n ];<\/p>\n<p> imageUrls.forEach(url => {\n const img = new Image();\n img.src = url;\n });\n }<\/p>\n<p> preloadImages();\n});\n<\/script><\/p>\n<p><\/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+ BRICS Alliance<\/title><\/p>\n<p> \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&display=swap\" rel=\"stylesheet\">\n<style>\n\/* ========= OFFICIAL BIFA+ BRAND VARIABLES - HIGH PRIORITY ========= *\/\n:root {\n \/* Official BIFA+ Colors from Brand Guide *\/\n --bifa-deep-navy: #0A1F44 !important;\n --bifa-heritage-gold: #D4AF37 !important;\n --bifa-civic-green: #1D6143 !important;\n --bifa-bright-white: #FFFFFF !important;\n --bifa-soft-black: #1A1A1A !important;\n --bifa-gray-light: #F8F9FA !important;\n --bifa-gray: #6C757D !important;<\/p>\n<p> \/* Official BIFA+ Typography from Brand Guide *\/\n --bifa-font-heading: 'Montserrat', sans-serif !important;\n --bifa-font-body: 'Poppins', sans-serif !important;<\/p>\n<p> \/* Premium Effects *\/\n --bifa-shadow-premium: 0 25px 80px rgba(10, 31, 68, 0.15) !important;\n --bifa-shadow-hover: 0 35px 100px rgba(10, 31, 68, 0.2) !important;\n --bifa-shadow-gold: 0 15px 40px rgba(212, 175, 55, 0.3) !important;\n --bifa-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;\n}<\/p>\n<p>\/* ========= YOOTHEME OVERRIDE - CRITICAL STYLES ========= *\/\n.brics-section-wrapper,\n.brics-section-wrapper *,\n.brics-section,\n.brics-section * {\n margin: 0 !important;\n padding: 0 !important;\n box-sizing: border-box !important;\n}<\/p>\n<p>\/* Force official BIFA+ fonts on all elements - OVERRIDE YOOTHEME *\/\n.brics-section-wrapper,\n.brics-section-wrapper *:not(.flag-image):not(.flag-image *) {\n font-family: var(--bifa-font-body) !important;\n}<\/p>\n<p>.brics-section-wrapper h1,\n.brics-section-wrapper h2,\n.brics-section-wrapper h3,\n.brics-section-wrapper h4,\n.brics-section-wrapper h5,\n.brics-section-wrapper h6,\n.brics-section-wrapper .section-title,\n.brics-section-wrapper .flags-title,\n.brics-section-wrapper .content-intro,\n.brics-section-wrapper .stat-number,\n.brics-section-wrapper .stat-label,\n.brics-section-wrapper .flag-name,\n.brics-section-wrapper .cta-text,\n.brics-section-wrapper .btn-text {\n font-family: var(--bifa-font-heading) !important;\n}<\/p>\n<p>\/* ========= SECTION WRAPPER - FULL WIDTH ========= *\/\n.brics-section-wrapper {\n width: 100vw !important;\n position: relative !important;\n left: 50% !important;\n margin-left: -50vw !important;\n background: transparent !important;\n overflow: hidden !important;\n z-index: 1 !important;\n}<\/p>\n<p>\/* ========= BRICS SECTION ========= *\/\n.brics-section {\n padding: 80px 0 !important;\n background: transparent !important;\n position: relative !important;\n overflow: hidden !important;\n width: 100% !important;\n margin: 0 !important;\n}<\/p>\n<p>\/* ========= CONTAINER ========= *\/\n.brics-container {\n max-width: 1400px !important;\n margin: 0 auto !important;\n padding: 0 20px !important;\n position: relative !important;\n z-index: 10 !important;\n width: 100% !important;\n}<\/p>\n<p>\/* ========= SECTION TITLE - OFFICIAL BIFA+ STYLE ========= *\/\n.brics-section .section-title {\n font-family: var(--bifa-font-heading) !important;\n font-size: clamp(2.5rem, 5vw, 4rem) !important;\n font-weight: 900 !important;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700) !important;\n -webkit-background-clip: text !important;\n background-clip: text !important;\n color: transparent !important;\n text-align: center !important;\n margin: 0 0 60px 0 !important;\n position: relative !important;\n animation: fadeInDown 1s ease-out !important;\n text-transform: uppercase !important;\n letter-spacing: 2px !important;\n cursor: pointer !important;\n transition: var(--bifa-transition) !important;\n line-height: 1.2 !important;\n padding: 0 !important;\n}<\/p>\n<p>.brics-section .section-title::after {\n content: '' !important;\n position: absolute !important;\n bottom: -15px !important;\n left: 50% !important;\n transform: translateX(-50%) !important;\n width: 0 !important;\n height: 5px !important;\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700) !important;\n border-radius: 3px !important;\n transition: width 0.4s ease !important;\n}<\/p>\n<p>.brics-section .section-title:hover {\n transform: translateY(-3px) !important;\n filter: drop-shadow(0 10px 20px rgba(212, 175, 55, 0.3)) !important;\n}<\/p>\n<p>.brics-section .section-title:hover::after {\n width: 100px !important;\n}<\/p>\n<p>\/* ========= MAIN IMAGE - OFFICIAL BIFA+ STYLE ========= *\/\n.brics-section .brics-image {\n width: 100% !important;\n max-width: 1200px !important;\n margin: 0 auto 60px auto !important;\n border-radius: 25px !important;\n overflow: hidden !important;\n box-shadow: var(--bifa-shadow-premium) !important;\n animation: fadeInUp 1s ease-out !important;\n position: relative !important;\n transition: var(--bifa-transition) !important;\n padding: 0 !important;\n}<\/p>\n<p>.brics-section .brics-image::before {\n content: '' !important;\n position: absolute !important;\n inset: 0 !important;\n background: linear-gradient(135deg, \n rgba(10, 31, 68, 0.1) 0%, \n transparent 50%, \n rgba(212, 175, 55, 0.1) 100%) !important;\n opacity: 0 !important;\n transition: opacity 0.3s ease !important;\n z-index: 1 !important;\n}<\/p>\n<p>.brics-section .brics-image:hover::before {\n opacity: 1 !important;\n}<\/p>\n<p>.brics-section .brics-image:hover {\n transform: translateY(-5px) !important;\n box-shadow: var(--bifa-shadow-hover) !important;\n}<\/p>\n<p>.brics-section .brics-image img {\n width: 100% !important;\n height: auto !important;\n display: block !important;\n transition: transform 0.3s ease !important;\n margin: 0 !important;\n padding: 0 !important;\n}<\/p>\n<p>.brics-section .brics-image:hover img {\n transform: scale(1.02) !important;\n}<\/p>\n<p>\/* ========= CONTENT SECTION - OFFICIAL BIFA+ STYLE ========= *\/\n.brics-section .brics-content {\n background: rgba(255, 255, 255, 0.95) !important;\n backdrop-filter: blur(20px) !important;\n border-radius: 30px !important;\n padding: 60px !important;\n margin: 0 auto 60px auto !important;\n max-width: 1200px !important;\n animation: fadeInUp 1s ease-out 0.2s both !important;\n box-shadow: var(--bifa-shadow-premium) !important;\n border: 2px solid rgba(212, 175, 55, 0.1) !important;\n position: relative !important;\n overflow: hidden !important;\n width: 100% !important;\n}<\/p>\n<p>.brics-section .brics-content::before {\n content: '' !important;\n position: absolute !important;\n top: 0 !important;\n left: 0 !important;\n right: 0 !important;\n height: 3px !important;\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent) !important;\n animation: contentGlow 4s ease-in-out infinite !important;\n}<\/p>\n<p>@keyframes contentGlow {\n 0%, 100% { opacity: 0.5 !important; }\n 50% { opacity: 1 !important; }\n}<\/p>\n<p>.brics-section .content-intro {\n font-family: var(--bifa-font-heading) !important;\n font-size: clamp(1.3rem, 2.5vw, 1.8rem) !important;\n line-height: 1.7 !important;\n background: linear-gradient(135deg, var(--bifa-deep-navy), #162e5a) !important;\n -webkit-background-clip: text !important;\n background-clip: text !important;\n color: transparent !important;\n font-weight: 700 !important;\n text-align: center !important;\n margin: 0 0 40px 0 !important;\n position: relative !important;\n padding: 0 !important;\n}<\/p>\n<p>.brics-section .content-intro::after {\n content: '' !important;\n position: absolute !important;\n bottom: -10px !important;\n left: 50% !important;\n transform: translateX(-50%) !important;\n width: 60px !important;\n height: 2px !important;\n background: var(--bifa-heritage-gold) !important;\n border-radius: 2px !important;\n}<\/p>\n<p>.brics-section .content-text {\n font-family: var(--bifa-font-body) !important;\n font-size: clamp(1.05rem, 1.5vw, 1.2rem) !important;\n line-height: 1.8 !important;\n color: var(--bifa-gray) !important;\n margin: 0 0 30px 0 !important;\n text-align: justify !important;\n position: relative !important;\n padding: 0 0 0 20px !important;\n}<\/p>\n<p>.brics-section .content-text::before {\n content: '' !important;\n position: absolute !important;\n left: 0 !important;\n top: 0 !important;\n width: 4px !important;\n height: 100% !important;\n background: linear-gradient(180deg, var(--bifa-heritage-gold), transparent) !important;\n border-radius: 2px !important;\n}<\/p>\n<p>\/* ========= STATS CAROUSEL - OFFICIAL BIFA+ STYLE ========= *\/\n.brics-section .stats-carousel-section {\n margin: 50px 0 !important;\n padding: 0 !important;\n width: 100% !important;\n}<\/p>\n<p>.brics-section .stats-carousel-title {\n font-family: var(--bifa-font-heading) !important;\n font-size: clamp(1.5rem, 2.5vw, 2rem) !important;\n font-weight: 800 !important;\n color: var(--bifa-deep-navy) !important;\n text-align: center !important;\n margin: 0 0 40px 0 !important;\n position: relative !important;\n text-transform: uppercase !important;\n letter-spacing: 1px !important;\n padding: 0 !important;\n}<\/p>\n<p>.brics-section .stats-carousel-title::after {\n content: '' !important;\n position: absolute !important;\n bottom: -8px !important;\n left: 50% !important;\n transform: translateX(-50%) !important;\n width: 60px !important;\n height: 2px !important;\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700) !important;\n border-radius: 2px !important;\n}<\/p>\n<p>.brics-section .stats-carousel-container {\n position: relative !important;\n max-width: 1200px !important;\n margin: 0 auto !important;\n overflow: hidden !important;\n padding: 0 !important;\n}<\/p>\n<p>.brics-section .stats-carousel-wrapper {\n position: relative !important;\n padding: 0 70px !important;\n overflow: hidden !important;\n margin: 0 !important;\n}<\/p>\n<p>.brics-section .stats-carousel {\n display: flex !important;\n transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;\n gap: 25px !important;\n will-change: transform !important;\n margin: 0 !important;\n padding: 0 !important;\n}<\/p>\n<p>.brics-section .stats-item {\n flex: 0 0 auto !important;\n text-align: center !important;\n padding: 30px 20px !important;\n background: linear-gradient(135deg, \n rgba(255, 255, 255, 0.95) 0%, \n rgba(248, 249, 250, 0.95) 100%) !important;\n backdrop-filter: blur(10px) !important;\n border-radius: 25px !important;\n transition: var(--bifa-transition) !important;\n cursor: pointer !important;\n box-shadow: var(--bifa-shadow-premium) !important;\n min-width: 200px !important;\n max-width: 220px !important;\n transform: translateY(0) scale(1) !important;\n opacity: 1 !important;\n border: 2px solid rgba(212, 175, 55, 0.1) !important;\n position: relative !important;\n overflow: hidden !important;\n margin: 0 !important;\n}<\/p>\n<p>.brics-section .stats-item::before {\n content: '' !important;\n position: absolute !important;\n top: 0 !important;\n left: 0 !important;\n right: 0 !important;\n height: 3px !important;\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent) !important;\n transform: scaleX(0) !important;\n transition: transform 0.3s ease !important;\n}<\/p>\n<p>.brics-section .stats-item:hover::before {\n transform: scaleX(1) !important;\n}<\/p>\n<p>.brics-section .stats-item:hover {\n transform: translateY(-10px) scale(1.05) !important;\n box-shadow: var(--bifa-shadow-gold) !important;\n border-color: var(--bifa-heritage-gold) !important;\n z-index: 10 !important;\n}<\/p>\n<p>.brics-section .stats-item-clone {\n opacity: 0.7 !important;\n}<\/p>\n<p>.brics-section .stats-icon {\n font-size: 2.5rem !important;\n margin: 0 0 15px 0 !important;\n line-height: 1 !important;\n filter: grayscale(0.3) !important;\n transition: all 0.3s ease !important;\n padding: 0 !important;\n}<\/p>\n<p>.brics-section .stats-item:hover .stats-icon {\n filter: grayscale(0) !important;\n transform: scale(1.1) !important;\n}<\/p>\n<p>.brics-section .stats-number {\n font-family: var(--bifa-font-heading) !important;\n font-size: clamp(2rem, 3vw, 2.8rem) !important;\n font-weight: 900 !important;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700) !important;\n -webkit-background-clip: text !important;\n background-clip: text !important;\n color: transparent !important;\n margin: 0 0 10px 0 !important;\n line-height: 1 !important;\n padding: 0 !important;\n}<\/p>\n<p>.brics-section .stats-label {\n font-family: var(--bifa-font-heading) !important;\n font-size: 0.95rem !important;\n color: var(--bifa-deep-navy) !important;\n font-weight: 700 !important;\n text-transform: uppercase !important;\n letter-spacing: 1px !important;\n margin: 0 0 8px 0 !important;\n padding: 0 !important;\n line-height: 1.3 !important;\n}<\/p>\n<p>.brics-section .stats-description {\n font-family: var(--bifa-font-body) !important;\n font-size: 0.85rem !important;\n color: var(--bifa-gray) !important;\n font-weight: 500 !important;\n margin: 0 !important;\n padding: 0 !important;\n line-height: 1.4 !important;\n font-style: italic !important;\n}<\/p>\n<p>\/* ========= STATS CAROUSEL NAVIGATION - OFFICIAL BIFA+ STYLE ========= *\/\n.brics-section .stats-carousel-button {\n position: absolute !important;\n top: 50% !important;\n transform: translateY(-50%) !important;\n background: rgba(255, 255, 255, 0.95) !important;\n backdrop-filter: blur(10px) !important;\n border: 2px solid rgba(212, 175, 55, 0.2) !important;\n width: 50px !important;\n height: 50px !important;\n border-radius: 50% !important;\n box-shadow: var(--bifa-shadow-premium) !important;\n cursor: pointer !important;\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n transition: var(--bifa-transition) !important;\n z-index: 10 !important;\n opacity: 0.9 !important;\n margin: 0 !important;\n padding: 0 !important;\n}<\/p>\n<p>.brics-section .stats-carousel-button::before {\n content: '' !important;\n position: absolute !important;\n inset: -2px !important;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700) !important;\n border-radius: 50% !important;\n opacity: 0 !important;\n transition: opacity 0.3s ease !important;\n z-index: -1 !important;\n}<\/p>\n<p>.brics-section .stats-carousel-button:hover::before {\n opacity: 1 !important;\n}<\/p>\n<p>.brics-section .stats-carousel-button:hover {\n color: var(--bifa-deep-navy) !important;\n box-shadow: var(--bifa-shadow-gold) !important;\n transform: translateY(-50%) scale(1.1) !important;\n opacity: 1 !important;\n border-color: transparent !important;\n}<\/p>\n<p>.brics-section .stats-carousel-button-prev {\n left: 0 !important;\n}<\/p>\n<p>.brics-section .stats-carousel-button-next {\n right: 0 !important;\n}<\/p>\n<p>.brics-section .stats-carousel-button svg {\n width: 20px !important;\n height: 20px !important;\n fill: var(--bifa-deep-navy) !important;\n transition: transform 0.3s ease !important;\n stroke-width: 3 !important;\n}<\/p>\n<p>.brics-section .stats-carousel-button:hover svg {\n transform: scale(1.2) !important;\n}<\/p>\n<p>.brics-section .stats-carousel-button-prev:hover svg {\n transform: translateX(-2px) scale(1.2) !important;\n}<\/p>\n<p>.brics-section .stats-carousel-button-next:hover svg {\n transform: translateX(2px) scale(1.2) !important;\n}<\/p>\n<p>\/* ========= STATS CAROUSEL INDICATORS - OFFICIAL BIFA+ STYLE ========= *\/\n.brics-section .stats-carousel-indicators {\n display: flex !important;\n justify-content: center !important;\n gap: 10px !important;\n margin: 35px 0 0 0 !important;\n padding: 0 !important;\n}<\/p>\n<p>.brics-section .stats-carousel-indicators .indicator {\n width: 10px !important;\n height: 10px !important;\n border-radius: 50% !important;\n background: rgba(212, 175, 55, 0.3) !important;\n cursor: pointer !important;\n transition: var(--bifa-transition) !important;\n opacity: 0.6 !important;\n border: 2px solid transparent !important;\n margin: 0 !important;\n padding: 0 !important;\n}<\/p>\n<p>.brics-section .stats-carousel-indicators .indicator:hover {\n opacity: 1 !important;\n transform: scale(1.2) !important;\n background: rgba(212, 175, 55, 0.6) !important;\n}<\/p>\n<p>.brics-section .stats-carousel-indicators .indicator.active {\n background: var(--bifa-heritage-gold) !important;\n width: 35px !important;\n border-radius: 5px !important;\n opacity: 1 !important;\n box-shadow: 0 3px 12px rgba(212, 175, 55, 0.4) !important;\n}<\/p>\n<p>\/* ========= FLAGS SECTION - OFFICIAL BIFA+ STYLE ========= *\/\n.brics-section .flags-section {\n margin: 80px 0 0 0 !important;\n position: relative !important;\n padding: 0 0 40px 0 !important;\n width: 100% !important;\n}<\/p>\n<p>.brics-section .flags-title {\n font-family: var(--bifa-font-heading) !important;\n font-size: clamp(1.8rem, 3vw, 2.5rem) !important;\n font-weight: 800 !important;\n color: var(--bifa-deep-navy) !important;\n text-align: center !important;\n margin: 0 0 60px 0 !important;\n animation: fadeInDown 1s ease-out !important;\n position: relative !important;\n text-transform: uppercase !important;\n letter-spacing: 1px !important;\n padding: 0 !important;\n}<\/p>\n<p>.brics-section .flags-title::after {\n content: '' !important;\n position: absolute !important;\n bottom: -10px !important;\n left: 50% !important;\n transform: translateX(-50%) !important;\n width: 80px !important;\n height: 3px !important;\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700) !important;\n border-radius: 2px !important;\n}<\/p>\n<p>\/* ========= FLAGS CAROUSEL - OFFICIAL BIFA+ STYLE ========= *\/\n.brics-section .flags-carousel-container {\n animation: carouselFadeIn 1s ease-out 0.3s both !important;\n position: relative !important;\n max-width: 1200px !important;\n margin: 0 auto !important;\n overflow: hidden !important;\n padding: 0 !important;\n}<\/p>\n<p>@keyframes carouselFadeIn {\n from {\n opacity: 0 !important;\n transform: translateY(30px) !important;\n }\n to {\n opacity: 1 !important;\n transform: translateY(0) !important;\n }\n}<\/p>\n<p>.brics-section .flags-carousel-wrapper {\n position: relative !important;\n padding: 0 70px !important;\n overflow: hidden !important;\n margin: 0 !important;\n}<\/p>\n<p>.brics-section .flags-carousel {\n display: flex !important;\n transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;\n gap: 30px !important;\n will-change: transform !important;\n margin: 0 !important;\n padding: 0 !important;\n}<\/p>\n<p>.brics-section .flag-item {\n flex: 0 0 auto !important;\n text-align: center !important;\n padding: 30px !important;\n background: rgba(255, 255, 255, 0.95) !important;\n backdrop-filter: blur(10px) !important;\n border-radius: 25px !important;\n transition: var(--bifa-transition) !important;\n cursor: pointer !important;\n box-shadow: var(--bifa-shadow-premium) !important;\n min-width: 180px !important;\n transform: translateY(0) scale(1) !important;\n opacity: 1 !important;\n border: 2px solid rgba(212, 175, 55, 0.1) !important;\n position: relative !important;\n overflow: hidden !important;\n margin: 0 !important;\n}<\/p>\n<p>.brics-section .flag-item::before {\n content: '' !important;\n position: absolute !important;\n top: 0 !important;\n left: 0 !important;\n right: 0 !important;\n height: 2px !important;\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent) !important;\n transform: scaleX(0) !important;\n transition: transform 0.3s ease !important;\n}<\/p>\n<p>.brics-section .flag-item:hover::before {\n transform: scaleX(1) !important;\n}<\/p>\n<p>.brics-section .flag-item:hover {\n transform: translateY(-15px) scale(1.05) !important;\n box-shadow: var(--bifa-shadow-gold) !important;\n border-color: var(--bifa-heritage-gold) !important;\n z-index: 10 !important;\n}<\/p>\n<p>.brics-section .flag-item-clone {\n opacity: 0.7 !important;\n}<\/p>\n<p>.brics-section .flag-image {\n width: 100px !important;\n height: 75px !important;\n margin: 0 auto 20px auto !important;\n border-radius: 15px !important;\n overflow: hidden !important;\n box-shadow: 0 8px 20px rgba(10, 31, 68, 0.15) !important;\n transition: var(--bifa-transition) !important;\n position: relative !important;\n padding: 0 !important;\n}<\/p>\n<p>.brics-section .flag-item:hover .flag-image {\n box-shadow: var(--bifa-shadow-gold) !important;\n transform: scale(1.05) translateY(-2px) !important;\n}<\/p>\n<p>.brics-section .flag-image::after {\n content: '' !important;\n position: absolute !important;\n inset: 0 !important;\n background: linear-gradient(135deg, \n rgba(212, 175, 55, 0.1) 0%, \n transparent 50%, \n rgba(10, 31, 68, 0.1) 100%) !important;\n opacity: 0 !important;\n transition: opacity 0.3s ease !important;\n}<\/p>\n<p>.brics-section .flag-item:hover .flag-image::after {\n opacity: 1 !important;\n}<\/p>\n<p>.brics-section .flag-image img {\n width: 100% !important;\n height: 100% !important;\n object-fit: cover !important;\n transition: transform 0.3s ease !important;\n margin: 0 !important;\n padding: 0 !important;\n}<\/p>\n<p>.brics-section .flag-item:hover .flag-image img {\n transform: scale(1.1) !important;\n}<\/p>\n<p>.brics-section .flag-name {\n font-family: var(--bifa-font-heading) !important;\n font-size: 1.1rem !important;\n font-weight: 700 !important;\n color: var(--bifa-deep-navy) !important;\n text-transform: uppercase !important;\n letter-spacing: 1px !important;\n margin: 10px 0 0 0 !important;\n transition: color 0.3s ease !important;\n padding: 0 !important;\n}<\/p>\n<p>.brics-section .flag-item:hover .flag-name {\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700) !important;\n -webkit-background-clip: text !important;\n background-clip: text !important;\n color: transparent !important;\n}<\/p>\n<p>\/* ========= CAROUSEL NAVIGATION - OFFICIAL BIFA+ STYLE ========= *\/\n.brics-section .carousel-button {\n position: absolute !important;\n top: 50% !important;\n transform: translateY(-50%) !important;\n background: rgba(255, 255, 255, 0.95) !important;\n backdrop-filter: blur(10px) !important;\n border: 2px solid rgba(212, 175, 55, 0.2) !important;\n width: 55px !important;\n height: 55px !important;\n border-radius: 50% !important;\n box-shadow: var(--bifa-shadow-premium) !important;\n cursor: pointer !important;\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n transition: var(--bifa-transition) !important;\n z-index: 10 !important;\n opacity: 0.9 !important;\n margin: 0 !important;\n padding: 0 !important;\n}<\/p>\n<p>.brics-section .carousel-button::before {\n content: '' !important;\n position: absolute !important;\n inset: -2px !important;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700) !important;\n border-radius: 50% !important;\n opacity: 0 !important;\n transition: opacity 0.3s ease !important;\n z-index: -1 !important;\n}<\/p>\n<p>.brics-section .carousel-button:hover::before {\n opacity: 1 !important;\n}<\/p>\n<p>.brics-section .carousel-button:hover {\n color: var(--bifa-deep-navy) !important;\n box-shadow: var(--bifa-shadow-gold) !important;\n transform: translateY(-50%) scale(1.1) !important;\n opacity: 1 !important;\n border-color: transparent !important;\n}<\/p>\n<p>.brics-section .carousel-button-prev {\n left: 0 !important;\n}<\/p>\n<p>.brics-section .carousel-button-next {\n right: 0 !important;\n}<\/p>\n<p>.brics-section .carousel-button svg {\n width: 24px !important;\n height: 24px !important;\n fill: var(--bifa-deep-navy) !important;\n transition: transform 0.3s ease !important;\n stroke-width: 3 !important;\n}<\/p>\n<p>.brics-section .carousel-button:hover svg {\n transform: scale(1.2) !important;\n}<\/p>\n<p>.brics-section .carousel-button-prev:hover svg {\n transform: translateX(-2px) scale(1.2) !important;\n}<\/p>\n<p>.brics-section .carousel-button-next:hover svg {\n transform: translateX(2px) scale(1.2) !important;\n}<\/p>\n<p>\/* ========= CAROUSEL INDICATORS - OFFICIAL BIFA+ STYLE ========= *\/\n.brics-section .carousel-indicators {\n display: flex !important;\n justify-content: center !important;\n gap: 12px !important;\n margin: 40px 0 0 0 !important;\n padding: 0 !important;\n}<\/p>\n<p>.brics-section .indicator {\n width: 12px !important;\n height: 12px !important;\n border-radius: 50% !important;\n background: rgba(212, 175, 55, 0.3) !important;\n cursor: pointer !important;\n transition: var(--bifa-transition) !important;\n opacity: 0.6 !important;\n border: 2px solid transparent !important;\n margin: 0 !important;\n padding: 0 !important;\n}<\/p>\n<p>.brics-section .indicator:hover {\n opacity: 1 !important;\n transform: scale(1.2) !important;\n background: rgba(212, 175, 55, 0.6) !important;\n}<\/p>\n<p>.brics-section .indicator.active {\n background: var(--bifa-heritage-gold) !important;\n width: 40px !important;\n border-radius: 6px !important;\n opacity: 1 !important;\n box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4) !important;\n}<\/p>\n<p>\/* ========= CALL TO ACTION - OFFICIAL BIFA+ STYLE ========= *\/\n.brics-section .brics-cta {\n background: linear-gradient(135deg, var(--bifa-deep-navy) 0%, #162e5a 100%) !important;\n color: var(--bifa-bright-white) !important;\n padding: 50px !important;\n border-radius: 30px !important;\n text-align: center !important;\n margin: 60px auto 0 auto !important;\n max-width: 1200px !important;\n box-shadow: var(--bifa-shadow-premium) !important;\n animation: fadeInUp 1s ease-out 0.4s both !important;\n position: relative !important;\n overflow: hidden !important;\n border: 2px solid rgba(212, 175, 55, 0.2) !important;\n width: 100% !important;\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n}<\/p>\n<p>.brics-section .brics-cta::before {\n content: '' !important;\n position: absolute !important;\n top: -50% !important;\n left: -50% !important;\n width: 200% !important;\n height: 200% !important;\n background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%) !important;\n animation: ctaPulse 4s ease-in-out infinite !important;\n}<\/p>\n<p>@keyframes ctaPulse {\n 0%, 100% { \n transform: scale(1) rotate(0deg) !important; \n opacity: 0.5 !important;\n }\n 50% { \n transform: scale(1.1) rotate(180deg) !important; \n opacity: 0.8 !important;\n }\n}<\/p>\n<p>.brics-section .cta-text {\n font-family: var(--bifa-font-heading) !important;\n font-size: clamp(1.3rem, 2.5vw, 1.8rem) !important;\n line-height: 1.7 !important;\n font-weight: 700 !important;\n position: relative !important;\n z-index: 1 !important;\n text-shadow: 2px 2px 4px rgba(0,0,0,0.3) !important;\n margin: 0 !important;\n padding: 0 !important;\n color: var(--bifa-bright-white) !important;\n text-align: center !important;\n width: 100% !important;\n max-width: 100% !important;\n}<\/p>\n<p>\/* ========= LEARN MORE BUTTON - OFFICIAL BIFA+ STYLE ========= *\/\n.brics-section .learn-more-wrapper {\n text-align: center !important;\n margin: 60px 0 0 0 !important;\n animation: fadeInUp 1s ease-out 0.6s both !important;\n padding: 0 !important;\n}<\/p>\n<p>.brics-section .learn-more-btn {\n display: inline-flex !important;\n align-items: center !important;\n gap: 15px !important;\n padding: 20px 45px !important;\n background: rgba(255, 255, 255, 0.95) !important;\n backdrop-filter: blur(10px) !important;\n color: var(--bifa-deep-navy) !important;\n text-decoration: none !important;\n font-family: var(--bifa-font-heading) !important;\n font-size: 1.1rem !important;\n font-weight: 700 !important;\n border-radius: 50px !important;\n box-shadow: var(--bifa-shadow-premium) !important;\n transition: var(--bifa-transition) !important;\n position: relative !important;\n overflow: hidden !important;\n border: 2px solid rgba(212, 175, 55, 0.2) !important;\n text-transform: uppercase !important;\n letter-spacing: 1px !important;\n margin: 0 !important;\n}<\/p>\n<p>.brics-section .learn-more-btn::before {\n content: '' !important;\n position: absolute !important;\n top: 0 !important;\n left: -100% !important;\n width: 100% !important;\n height: 100% !important;\n background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.2), transparent) !important;\n transition: left 0.5s ease !important;\n}<\/p>\n<p>.brics-section .learn-more-btn:hover::before {\n left: 100% !important;\n}<\/p>\n<p>.brics-section .learn-more-btn::after {\n content: '' !important;\n position: absolute !important;\n inset: -2px !important;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700) !important;\n border-radius: 50px !important;\n opacity: 0 !important;\n transition: opacity 0.3s ease !important;\n z-index: -1 !important;\n}<\/p>\n<p>.brics-section .learn-more-btn:hover::after {\n opacity: 0.2 !important;\n}<\/p>\n<p>.brics-section .learn-more-btn:hover {\n transform: translateY(-3px) !important;\n box-shadow: var(--bifa-shadow-gold) !important;\n border-color: var(--bifa-heritage-gold) !important;\n color: var(--bifa-deep-navy) !important;\n}<\/p>\n<p>.brics-section .btn-text {\n position: relative !important;\n z-index: 1 !important;\n margin: 0 !important;\n padding: 0 !important;\n}<\/p>\n<p>.brics-section .btn-arrow {\n transition: transform 0.3s ease !important;\n stroke: currentColor !important;\n position: relative !important;\n z-index: 1 !important;\n}<\/p>\n<p>.brics-section .learn-more-btn:hover .btn-arrow {\n transform: translateX(5px) !important;\n}<\/p>\n<p>\/* ========= ANIMATIONS - OFFICIAL BIFA+ STYLE ========= *\/\n@keyframes fadeInDown {\n from {\n opacity: 0 !important;\n transform: translateY(-50px) !important;\n }\n to {\n opacity: 1 !important;\n transform: translateY(0) !important;\n }\n}<\/p>\n<p>@keyframes fadeInUp {\n from {\n opacity: 0 !important;\n transform: translateY(50px) !important;\n }\n to {\n opacity: 1 !important;\n transform: translateY(0) !important;\n }\n}<\/p>\n<p>\/* ========= RESPONSIVE DESIGN - YOOTHEME COMPATIBLE ========= *\/<\/p>\n<p>\/* Desktop and large screens - ensure centering *\/\n@media (min-width: 1200px) {\n .brics-section .brics-cta {\n text-align: center !important;\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n }<\/p>\n<p> .brics-section .cta-text {\n text-align: center !important;\n width: 100% !important;\n max-width: 100% !important;\n }\n}<\/p>\n<p>\/* Laptop and medium screens - ensure centering *\/\n@media (min-width: 969px) and (max-width: 1199px) {\n .brics-section .brics-cta {\n text-align: center !important;\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n }<\/p>\n<p> .brics-section .cta-text {\n text-align: center !important;\n width: 100% !important;\n max-width: 100% !important;\n }\n}<\/p>\n<p>@media (max-width: 968px) {\n .brics-section {\n padding: 60px 0 !important;\n }<\/p>\n<p> .brics-section .brics-content {\n padding: 40px !important;\n }<\/p>\n<p> .brics-section .stats-grid {\n grid-template-columns: 1fr !important;\n gap: 25px !important;\n }<\/p>\n<p> .brics-section .flags-carousel-wrapper {\n padding: 0 50px !important;\n }<\/p>\n<p> .brics-section .flag-item {\n min-width: 160px !important;\n padding: 25px !important;\n }<\/p>\n<p> .brics-section .flag-image {\n width: 90px !important;\n height: 67px !important;\n }<\/p>\n<p> .brics-section .carousel-button {\n width: 50px !important;\n height: 50px !important;\n }\n}<\/p>\n<p>@media (max-width: 568px) {\n .brics-section {\n padding: 50px 0 !important;\n }<\/p>\n<p> .brics-section .section-title {\n font-size: 2rem !important;\n margin-bottom: 40px !important;\n }<\/p>\n<p> .brics-section .brics-content {\n padding: 30px 20px !important;\n margin-bottom: 40px !important;\n }<\/p>\n<p> .brics-section .content-intro {\n font-size: 1.2rem !important;\n margin-bottom: 30px !important;\n }<\/p>\n<p> .brics-section .content-text {\n font-size: 1rem !important;\n text-align: left !important;\n padding-left: 15px !important;\n }<\/p>\n<p> .brics-section .stat-number {\n font-size: 2.5rem !important;\n }<\/p>\n<p> .brics-section .stat-label {\n font-size: 1rem !important;\n }<\/p>\n<p> .brics-section .flags-carousel-wrapper {\n padding: 0 40px !important;\n }<\/p>\n<p> .brics-section .flags-carousel {\n gap: 20px !important;\n }<\/p>\n<p> .brics-section .flag-item {\n min-width: 140px !important;\n padding: 20px !important;\n }<\/p>\n<p> .brics-section .flag-image {\n width: 70px !important;\n height: 52px !important;\n }<\/p>\n<p> .brics-section .flag-name {\n font-size: 0.9rem !important;\n }<\/p>\n<p> .brics-section .carousel-button {\n width: 45px !important;\n height: 45px !important;\n }<\/p>\n<p> .brics-section .brics-cta {\n padding: 35px 20px !important;\n margin-top: 40px !important;\n text-align: center !important;\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n }<\/p>\n<p> .brics-section .cta-text {\n font-size: 1.2rem !important;\n text-align: center !important;\n width: 100% !important;\n }<\/p>\n<p> .brics-section .learn-more-btn {\n padding: 15px 30px !important;\n font-size: 1rem !important;\n gap: 10px !important;\n }<\/p>\n<p> .brics-section .flags-title {\n font-size: 1.8rem !important;\n margin-bottom: 40px !important;\n }\n}<\/p>\n<p>@media (max-width: 420px) {\n .brics-container {\n padding: 0 15px !important;\n }<\/p>\n<p> .brics-section .section-title {\n font-size: 1.8rem !important;\n }<\/p>\n<p> .brics-section .brics-content {\n padding: 25px 15px !important;\n }<\/p>\n<p> .brics-section .flags-carousel-wrapper {\n padding: 0 35px !important;\n }<\/p>\n<p> .brics-section .flag-item {\n min-width: 120px !important;\n padding: 15px !important;\n }<\/p>\n<p> .brics-section .flag-image {\n width: 60px !important;\n height: 45px !important;\n }<\/p>\n<p> .brics-section .carousel-button {\n width: 40px !important;\n height: 40px !important;\n }<\/p>\n<p> .brics-section .carousel-button svg {\n width: 20px !important;\n height: 20px !important;\n }\n}\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"brics-section-wrapper\">\n <\/p>\n<section class=\"brics-section\">\n<div class=\"brics-container\">\n<h2 class=\"section-title\">BRICS: Uma nova era para o futebol mundial<\/h2>\n<p> <\/p>\n<div class=\"brics-image\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Brics\/brics-alliance.jpg\" alt=\"BRICS Alliance\">\n <\/div>\n<p> <\/p>\n<div class=\"brics-content\">\n<p class=\"content-intro\">\n A uni\u00e3o de gigantes econ\u00f4micos cria uma plataforma \u00fanica para o desenvolvimento do futebol\n <\/p>\n<p class=\"content-text\">\n Fundada em Dubai pelo l\u00edder vision\u00e1rio Salim Humaid Almazaini, a BIFA+ representa uma alian\u00e7a de pa\u00edses com ricas tradi\u00e7\u00f5es futebol\u00edsticas e enorme potencial. Os Emirados \u00c1rabes Unidos servem como sede estrat\u00e9gica, reunindo na\u00e7\u00f5es de todos os continentes. O Brasil contribui com o ber\u00e7o do lend\u00e1rio futebol, a R\u00fassia com a experi\u00eancia de sediar a Copa do Mundo de 2018, enquanto a China e a \u00cdndia oferecem os maiores mercados com bilh\u00f5es de torcedores apaixonados. A \u00c1frica do Sul lidera o desenvolvimento do futebol africano, com os novos membros acrescentando uma for\u00e7a tremenda: Egito e Eti\u00f3pia, da \u00c1frica, Ir\u00e3, do Oriente M\u00e9dio, e Indon\u00e9sia, como o primeiro membro do Sudeste Asi\u00e1tico.\n <\/p>\n<p class=\"content-text\">\n Together, these countries form a powerful football ecosystem capable of competing with traditional<br \/>\n European leagues. The total population of BRICS countries exceeds 3.8 billion people,<br \/>\n creating an unprecedented base for talent development and fan engagement.\n <\/p>\n<p> <\/p>\n<div class=\"stats-carousel-section\">\n<h4 class=\"stats-carousel-title\">BIFA+ em n\u00fameros<\/h4>\n<div class=\"stats-carousel-container\">\n<div class=\"stats-carousel-wrapper\">\n <button class=\"stats-carousel-button stats-carousel-button-prev\" aria-label=\"Estat\u00edsticas anteriores\"><br \/>\n <svg viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"\/>\n <\/svg><br \/>\n <\/button><\/p>\n<div class=\"stats-carousel\" id=\"statsCarousel\">\n<div class=\"stats-item\">\n<div class=\"stats-icon\">\ud83c\udf0d<\/div>\n<div class=\"stats-number\">11+<\/div>\n<div class=\"stats-label\">Na\u00e7\u00f5es do Sul Global<\/div>\n<div class=\"stats-description\">Unidos na diplomacia do futebol<\/div>\n<\/p><\/div>\n<div class=\"stats-item\">\n<div class=\"stats-icon\">\ud83d\udc65<\/div>\n<div class=\"stats-number\">3.8B<\/div>\n<div class=\"stats-label\">Popula\u00e7\u00e3o Unida<\/div>\n<div class=\"stats-description\">Base de f\u00e3s sem precedentes<\/div>\n<\/p><\/div>\n<div class=\"stats-item\">\n<div class=\"stats-icon\">\ud83c\udfc6<\/div>\n<div class=\"stats-number\">2024<\/div>\n<div class=\"stats-label\">Ano de funda\u00e7\u00e3o<\/div>\n<div class=\"stats-description\">In\u00edcio de uma nova era<\/div>\n<\/p><\/div>\n<div class=\"stats-item\">\n<div class=\"stats-icon\">\ud83c\udf0f<\/div>\n<div class=\"stats-number\">4<\/div>\n<div class=\"stats-label\">Continentes Unidos<\/div>\n<div class=\"stats-description\">Presen\u00e7a global no futebol<\/div>\n<\/p><\/div>\n<div class=\"stats-item\">\n<div class=\"stats-icon\">\ud83d\udcac<\/div>\n<div class=\"stats-number\">700+<\/div>\n<div class=\"stats-label\">Idiomas falados<\/div>\n<div class=\"stats-description\">Diversidade cultural<\/div>\n<\/p><\/div>\n<div class=\"stats-item\">\n<div class=\"stats-icon\">\ud83d\udd50<\/div>\n<div class=\"stats-number\">18<\/div>\n<div class=\"stats-label\">Fusos hor\u00e1rios<\/div>\n<div class=\"stats-description\">Futebol 24 horas por dia<\/div>\n<\/p><\/div>\n<div class=\"stats-item\">\n<div class=\"stats-icon\">\u26bd<\/div>\n<div class=\"stats-number\">\u221e<\/div>\n<div class=\"stats-label\">Potencial futuro<\/div>\n<div class=\"stats-description\">Possibilidades ilimitadas<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <button class=\"stats-carousel-button stats-carousel-button-next\" aria-label=\"Pr\u00f3ximas estat\u00edsticas\"><br \/>\n <svg viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M9 18l6-6-6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"\/>\n <\/svg><br \/>\n <\/button>\n <\/div>\n<div class=\"stats-carousel-indicators\" id=\"statsCarouselIndicators\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p class=\"content-text\">\n BIFA will become the first truly global football league, uniting continents and cultures.<br \/>\n Using the economic power and sporting ambitions of BRICS countries, we are creating a platform<br \/>\n where the world’s best players can showcase their skills to billions of viewers.\n <\/p>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"flags-section\">\n<h3 class=\"flags-title\">Pa\u00edses membros da BIFA<\/h3>\n<div class=\"flags-carousel-container\">\n<div class=\"flags-carousel-wrapper\">\n <button class=\"carousel-button carousel-button-prev\" aria-label=\"Anterior\"><br \/>\n <svg viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"\/>\n <\/svg><br \/>\n <\/button><\/p>\n<div class=\"flags-carousel\" id=\"flagsCarousel\">\n<div class=\"flag-item\">\n<div class=\"flag-image\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Flags\/br.svg\" alt=\"Brazil\">\n <\/div>\n<div class=\"flag-name\">Brasil<\/div>\n<\/p><\/div>\n<div class=\"flag-item\">\n<div class=\"flag-image\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Flags\/ru.svg\" alt=\"Russia\">\n <\/div>\n<div class=\"flag-name\">R\u00fassia<\/div>\n<\/p><\/div>\n<div class=\"flag-item\">\n<div class=\"flag-image\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Flags\/in.svg\" alt=\"India\">\n <\/div>\n<div class=\"flag-name\">\u00cdndia<\/div>\n<\/p><\/div>\n<div class=\"flag-item\">\n<div class=\"flag-image\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Flags\/cn.svg\" alt=\"China\">\n <\/div>\n<div class=\"flag-name\">China<\/div>\n<\/p><\/div>\n<div class=\"flag-item\">\n<div class=\"flag-image\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Flags\/za.svg\" alt=\"South Africa\">\n <\/div>\n<div class=\"flag-name\">\u00c1frica do Sul<\/div>\n<\/p><\/div>\n<div class=\"flag-item\">\n<div class=\"flag-image\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Flags\/ae.svg\" alt=\"UAE\">\n <\/div>\n<div class=\"flag-name\">EMIRADOS \u00c1RABES UNIDOS<\/div>\n<\/p><\/div>\n<div class=\"flag-item\">\n<div class=\"flag-image\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Flags\/ir.svg\" alt=\"Iran\">\n <\/div>\n<div class=\"flag-name\">Ir\u00e3<\/div>\n<\/p><\/div>\n<div class=\"flag-item\">\n<div class=\"flag-image\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Flags\/et.svg\" alt=\"Ethiopia\">\n <\/div>\n<div class=\"flag-name\">Eti\u00f3pia<\/div>\n<\/p><\/div>\n<div class=\"flag-item\">\n<div class=\"flag-image\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Flags\/eg.svg\" alt=\"Egypt\">\n <\/div>\n<div class=\"flag-name\">Egito<\/div>\n<\/p><\/div>\n<div class=\"flag-item\">\n<div class=\"flag-image\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Flags\/id.svg\" alt=\"Indonesia\">\n <\/div>\n<div class=\"flag-name\">Indon\u00e9sia<\/div>\n<\/p><\/div>\n<div class=\"flag-item\">\n<div class=\"flag-image\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Flags\/sa.svg\" alt=\"Saudi Arabia\">\n <\/div>\n<div class=\"flag-name\">Ar\u00e1bia Saudita<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <button class=\"carousel-button carousel-button-next\" aria-label=\"Pr\u00f3ximo\"><br \/>\n <svg viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M9 18l6-6-6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"\/>\n <\/svg><br \/>\n <\/button>\n <\/div>\n<div class=\"carousel-indicators\" id=\"carouselIndicators\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"brics-cta\">\n<p class=\"cta-text\">\n Juntos, constru\u00edmos um futuro em que o futebol une continentes e cria novas oportunidades para bilh\u00f5es de pessoas\n <\/p>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"learn-more-wrapper\">\n <a href=\"https:\/\/bifa.ai\/country-members\/\" class=\"learn-more-btn\"><br \/>\n <span class=\"btn-text\">Saiba mais sobre os pa\u00edses membros<\/span><br \/>\n <svg class=\"btn-arrow\" width=\"24\" height=\"24\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M5 12H19M19 12L12 5M19 12L12 19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg><br \/>\n <\/a>\n <\/div>\n<\/p><\/div>\n<\/section>\n<\/div>\n<p><script>\n\/\/ BIFA+ BRICS Carousel System - Optimized Version\ndocument.addEventListener('DOMContentLoaded', function() {\n \/\/ Universal Carousel Class\n class BIFACarousel {\n constructor(config) {\n this.carousel = config.carousel;\n this.prevButton = config.prevButton;\n this.nextButton = config.nextButton;\n this.indicatorsContainer = config.indicatorsContainer;\n this.items = config.items;\n this.itemClass = config.itemClass;\n this.cloneClass = config.cloneClass;\n this.gap = config.gap || 30;\n this.autoPlayDelay = config.autoPlayDelay || 4000;\n this.itemsPerView = config.itemsPerView || 5;\n this.calculateItemsPerView = config.calculateItemsPerView;<\/p>\n<p> this.currentIndex = 0;\n this.autoPlayInterval = null;\n this.isTransitioning = false;\n this.totalItems = this.items.length;<\/p>\n<p> this.init();\n }<\/p>\n<p> init() {\n if (!this.carousel || this.totalItems === 0) return;<\/p>\n<p> this.calculateItemsPerView();\n this.createIndicators();\n this.setupInfiniteScroll();\n this.setupEventListeners();<\/p>\n<p> \/\/ Start autoplay after delay\n setTimeout(() => this.startAutoPlay(), 1000);\n }<\/p>\n<p> setupInfiniteScroll() {\n \/\/ Remove existing clones\n this.carousel.querySelectorAll(`.${this.cloneClass}`).forEach(clone => clone.remove());<\/p>\n<p> \/\/ Create clones for infinite scroll\n for (let i = 0; i < this.itemsPerView; i++) {\n const firstClone = this.items[i].cloneNode(true);\n const lastClone = this.items[this.totalItems - this.itemsPerView + i].cloneNode(true);\n \n firstClone.classList.add(this.cloneClass);\n lastClone.classList.add(this.cloneClass);\n \n this.carousel.appendChild(firstClone);\n this.carousel.insertBefore(lastClone, this.items[0]);\n }\n \n this.currentIndex = this.itemsPerView;\n this.carousel.style.transition = 'none';\n this.updateCarouselPosition();\n \n this.carousel.offsetHeight; \/\/ Force reflow\n this.carousel.style.transition = 'transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94)';\n }\n \n createIndicators() {\n if (!this.indicatorsContainer) return;\n \n this.indicatorsContainer.innerHTML = '';\n const totalPages = Math.ceil(this.totalItems \/ this.itemsPerView);\n \n for (let i = 0; i < totalPages; i++) {\n const indicator = document.createElement('div');\n indicator.className = 'indicator';\n if (i === 0) indicator.classList.add('active');\n indicator.addEventListener('click', () => this.goToPage(i));\n this.indicatorsContainer.appendChild(indicator);\n }\n }<\/p>\n<p> updateCarouselPosition() {\n const allItems = this.carousel.querySelectorAll(`.${this.itemClass}, .${this.cloneClass}`);\n if (allItems.length === 0) return;<\/p>\n<p> const itemWidth = allItems[0].offsetWidth;\n const offset = this.currentIndex * (itemWidth + this.gap);\n this.carousel.style.transform = `translateX(-${offset}px)`;\n }<\/p>\n<p> updateCarousel() {\n if (this.isTransitioning) return;\n this.isTransitioning = true;<\/p>\n<p> this.updateCarouselPosition();\n this.updateIndicators();<\/p>\n<p> this.carousel.addEventListener('transitionend', this.handleTransitionEnd.bind(this), { once: true });\n }<\/p>\n<p> handleTransitionEnd() {\n const totalItemsWithClones = this.carousel.querySelectorAll(`.${this.itemClass}, .${this.cloneClass}`).length;<\/p>\n<p> if (this.currentIndex >= totalItemsWithClones - this.itemsPerView) {\n this.carousel.style.transition = 'none';\n this.currentIndex = this.itemsPerView;\n this.updateCarouselPosition();\n this.carousel.offsetHeight;\n this.carousel.style.transition = 'transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94)';\n } else if (this.currentIndex < this.itemsPerView) {\n this.carousel.style.transition = 'none';\n this.currentIndex = totalItemsWithClones - this.itemsPerView * 2;\n this.updateCarouselPosition();\n this.carousel.offsetHeight;\n this.carousel.style.transition = 'transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94)';\n }\n \n this.isTransitioning = false;\n }\n \n updateIndicators() {\n if (!this.indicatorsContainer) return;\n \n const indicators = this.indicatorsContainer.querySelectorAll('.indicator');\n const realIndex = (this.currentIndex - this.itemsPerView) % this.totalItems;\n const currentPage = Math.floor(realIndex \/ this.itemsPerView);\n \n indicators.forEach((indicator, index) => {\n indicator.classList.toggle('active', index === currentPage);\n });\n }<\/p>\n<p> goToPage(pageIndex) {\n if (this.isTransitioning) return;<\/p>\n<p> const targetIndex = (pageIndex * this.itemsPerView) + this.itemsPerView;\n this.currentIndex = targetIndex;\n this.updateCarousel();\n this.resetAutoPlay();\n }<\/p>\n<p> nextSlide() {\n if (this.isTransitioning) return;\n this.currentIndex += 1;\n this.updateCarousel();\n }<\/p>\n<p> prevSlide() {\n if (this.isTransitioning) return;\n this.currentIndex -= 1;\n this.updateCarousel();\n }<\/p>\n<p> startAutoPlay() {\n this.autoPlayInterval = setInterval(() => this.nextSlide(), this.autoPlayDelay);\n }<\/p>\n<p> stopAutoPlay() {\n clearInterval(this.autoPlayInterval);\n }<\/p>\n<p> resetAutoPlay() {\n this.stopAutoPlay();\n this.startAutoPlay();\n }<\/p>\n<p> setupEventListeners() {\n \/\/ Navigation buttons\n if (this.prevButton) {\n this.prevButton.addEventListener('click', () => {\n this.prevSlide();\n this.resetAutoPlay();\n });\n }<\/p>\n<p> if (this.nextButton) {\n this.nextButton.addEventListener('click', () => {\n this.nextSlide();\n this.resetAutoPlay();\n });\n }<\/p>\n<p> \/\/ Pause on hover\n const container = this.carousel.closest('.flags-carousel-container, .stats-carousel-container');\n if (container) {\n container.addEventListener('mouseenter', () => this.stopAutoPlay());\n container.addEventListener('mouseleave', () => this.startAutoPlay());\n }<\/p>\n<p> \/\/ Touch support\n let touchStartX = 0;\n let touchEndX = 0;<\/p>\n<p> this.carousel.addEventListener('touchstart', (e) => {\n touchStartX = e.changedTouches[0].screenX;\n this.stopAutoPlay();\n });<\/p>\n<p> this.carousel.addEventListener('touchend', (e) => {\n touchEndX = e.changedTouches[0].screenX;\n this.handleSwipe(touchStartX, touchEndX);\n this.startAutoPlay();\n });<\/p>\n<p> \/\/ Responsive handling\n window.addEventListener('resize', () => {\n const oldItemsPerView = this.itemsPerView;\n this.calculateItemsPerView();<\/p>\n<p> if (oldItemsPerView !== this.itemsPerView) {\n this.setupInfiniteScroll();\n this.createIndicators();\n this.updateCarouselPosition();\n }\n });\n }<\/p>\n<p> handleSwipe(startX, endX) {\n const swipeDistance = endX - startX;\n const minSwipeDistance = 50;<\/p>\n<p> if (Math.abs(swipeDistance) > minSwipeDistance) {\n if (swipeDistance < 0) {\n this.nextSlide();\n } else {\n this.prevSlide();\n }\n }\n }\n }\n \n \/\/ Initialize Flags Carousel\n const flagsCarousel = new BIFACarousel({\n carousel: document.getElementById('flagsCarousel'),\n prevButton: document.querySelector('.carousel-button-prev'),\n nextButton: document.querySelector('.carousel-button-next'),\n indicatorsContainer: document.getElementById('carouselIndicators'),\n items: document.querySelectorAll('#flagsCarousel .flag-item'),\n itemClass: 'flag-item',\n cloneClass: 'flag-item-clone',\n gap: 30,\n autoPlayDelay: 4000,\n calculateItemsPerView: function() {\n const width = window.innerWidth;\n if (width < 420) {\n this.itemsPerView = 2;\n } else if (width < 568) {\n this.itemsPerView = 2;\n } else if (width < 768) {\n this.itemsPerView = 3;\n } else if (width < 1024) {\n this.itemsPerView = 4;\n } else {\n this.itemsPerView = 5;\n }\n }\n });\n \n \/\/ Initialize Stats Carousel\n const statsCarousel = new BIFACarousel({\n carousel: document.getElementById('statsCarousel'),\n prevButton: document.querySelector('.stats-carousel-button-prev'),\n nextButton: document.querySelector('.stats-carousel-button-next'),\n indicatorsContainer: document.getElementById('statsCarouselIndicators'),\n items: document.querySelectorAll('#statsCarousel .stats-item'),\n itemClass: 'stats-item',\n cloneClass: 'stats-item-clone',\n gap: 25,\n autoPlayDelay: 3500,\n calculateItemsPerView: function() {\n const width = window.innerWidth;\n if (width < 420) {\n this.itemsPerView = 1;\n } else if (width < 768) {\n this.itemsPerView = 2;\n } else if (width < 1024) {\n this.itemsPerView = 3;\n } else {\n this.itemsPerView = 4;\n }\n }\n });\n \n \/\/ Animate counters when visible\n const animateCounters = () => {\n const counters = document.querySelectorAll('.stats-number');<\/p>\n<p> const observerOptions = {\n threshold: 0.3,\n rootMargin: '0px'\n };<\/p>\n<p> const animateValue = (element, start, end, duration, suffix = '') => {\n let startTimestamp = null;\n const step = (timestamp) => {\n if (!startTimestamp) startTimestamp = timestamp;\n const progress = Math.min((timestamp - startTimestamp) \/ duration, 1);<\/p>\n<p> const easeOutQuart = 1 - Math.pow(1 - progress, 4);<\/p>\n<p> if (end === '\u221e') {\n element.textContent = '\u221e';\n return;\n } else if (end.includes('.')) {\n const current = (start + easeOutQuart * (parseFloat(end) - start)).toFixed(1);\n element.textContent = current + suffix;\n } else if (end.includes('+')) {\n const numEnd = parseInt(end.replace('+', ''));\n element.textContent = Math.floor(easeOutQuart * (numEnd - start) + start) + '+';\n } else {\n element.textContent = Math.floor(easeOutQuart * (end - start) + start) + suffix;\n }<\/p>\n<p> if (progress < 1) {\n window.requestAnimationFrame(step);\n } else {\n element.textContent = end + suffix;\n }\n };\n window.requestAnimationFrame(step);\n };\n \n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting && !entry.target.animated) {\n entry.target.animated = true;\n const finalText = entry.target.textContent;<\/p>\n<p> \/\/ Stats carousel numbers\n if (finalText.includes('11+')) {\n animateValue(entry.target, 0, '11+', 1800);\n } else if (finalText.includes('3.8B')) {\n animateValue(entry.target, 0, '3.8', 2000, 'B');\n } else if (finalText.includes('2024')) {\n animateValue(entry.target, 2020, 2024, 2200);\n } else if (finalText.includes('4') && !finalText.includes('700')) {\n animateValue(entry.target, 0, 4, 1500);\n } else if (finalText.includes('700+')) {\n animateValue(entry.target, 0, '700+', 2500);\n } else if (finalText.includes('18')) {\n animateValue(entry.target, 0, 18, 2000);\n } else if (finalText.includes('\u221e')) {\n animateValue(entry.target, 0, '\u221e', 1000);\n }\n }\n });\n }, observerOptions);<\/p>\n<p> counters.forEach(counter => {\n observer.observe(counter);\n });\n };<\/p>\n<p> \/\/ Start animations\n setTimeout(animateCounters, 500);<\/p>\n<p> \/\/ Smooth scroll for Learn More button\n const learnMoreBtn = document.querySelector('.learn-more-btn');\n if (learnMoreBtn) {\n learnMoreBtn.addEventListener('click', function(e) {\n if (this.getAttribute('href').startsWith('#')) {\n e.preventDefault();\n const targetId = this.getAttribute('href').substring(1);\n const targetElement = document.getElementById(targetId);<\/p>\n<p> if (targetElement) {\n targetElement.scrollIntoView({\n behavior: 'smooth',\n block: 'start'\n });\n } else {\n const flagsSection = document.querySelector('.flags-section');\n if (flagsSection) {\n flagsSection.scrollIntoView({\n behavior: 'smooth',\n block: 'start'\n });\n }\n }\n }\n });\n }\n});\n<\/script><\/p>\n<p><\/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><\/p>\n<p> \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@400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n<style>\n\/* ===== PRESIDENT BLOCK FOR YOOTHEME - OFFICIAL BIFA+ BRAND ===== *\/<\/p>\n<p>\/* CSS Variables - Official BIFA+ Colors *\/\n:root {\n --deep-navy: #0A1F44;\n --heritage-gold: #D4AF37;\n --civic-green: #1D6143;\n --bright-white: #FFFFFF;\n --soft-black: #1A1A1A;\n --text-secondary: #64748b;\n --shadow-sm: 0 2px 10px rgba(10, 31, 68, 0.08);\n --shadow-md: 0 10px 40px rgba(10, 31, 68, 0.12);\n --radius: 12px;\n}<\/p>\n<p>.bifa-president-block {\n position: relative;\n width: 100vw;\n margin-left: calc(-50vw + 50%);\n padding: 40px 0; \/* \u0423\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u043c \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0434\u043b\u044f \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0430 *\/\n background: transparent;\n overflow: hidden;\n}<\/p>\n<p>\/* \u0412\u043e\u0441\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0444\u043e\u043d \u0434\u043b\u044f \u043f\u043b\u0430\u043d\u0448\u0435\u0442\u043e\u0432 \u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 *\/\n@media (max-width: 1024px) {\n .bifa-president-block {\n background: linear-gradient(135deg, #f8f9fa 0%, #f0f2f5 100%);\n padding: 60px 0; \/* \u0412\u043e\u0441\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043e\u0442\u0441\u0442\u0443\u043f\u044b *\/\n }\n}<\/p>\n<p>.bifa-president-block::before {\n content: '';\n position: absolute;\n inset: 0;\n background: none;\n z-index: 0;\n}<\/p>\n<p>\/* \u0412\u043e\u0441\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442 \u0434\u043b\u044f \u043f\u043b\u0430\u043d\u0448\u0435\u0442\u043e\u0432 \u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 *\/\n@media (max-width: 1024px) {\n .bifa-president-block::before {\n background: radial-gradient(circle at 30% 50%, rgba(10, 31, 68, 0.02), transparent 50%),\n radial-gradient(circle at 70% 80%, rgba(212, 175, 55, 0.02), transparent 50%);\n }\n}<\/p>\n<p>\/* \u0427\u0430\u0441\u0442\u0438\u0446\u044b \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0444\u043e\u043d\u0430 *\/\n.president-particles {\n display: none; \/* \u0421\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0434\u043b\u044f \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0430 *\/\n}<\/p>\n<p>\/* \u041f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0447\u0430\u0441\u0442\u0438\u0446\u044b \u0434\u043b\u044f \u043f\u043b\u0430\u043d\u0448\u0435\u0442\u043e\u0432 \u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 *\/\n@media (max-width: 1024px) {\n .president-particles {\n display: block;\n position: absolute;\n width: 100%;\n height: 100%;\n overflow: hidden;\n z-index: 1;\n }\n}<\/p>\n<p>.president-particle {\n position: absolute;\n width: 4px;\n height: 4px;\n background: rgba(212, 175, 55, 0.2);\n border-radius: 50%;\n animation: president-float 15s ease-in-out infinite;\n}<\/p>\n<p>.president-particle:nth-child(2n) { \n background: rgba(10, 31, 68, 0.15); \n animation-duration: 18s; \n}<\/p>\n<p>.president-particle:nth-child(3n) { \n background: rgba(29, 97, 67, 0.1); \n animation-duration: 20s; \n}<\/p>\n<p>@keyframes president-float { \n 0%, 100% { \n transform: translateY(0); \n opacity: 1; \n }\n 50% { \n transform: translateY(-10px); \n opacity: 0.8; \n }\n}<\/p>\n<p>\/* \u041a\u043e\u043d\u0442\u0435\u043d\u0442 \u043e\u0431\u0435\u0440\u0442\u043a\u0430 *\/\n.president-content-wrapper {\n position: relative;\n z-index: 2;\n padding: 0 20px;\n}<\/p>\n<p>\/* Typography for this block - BIFA+ Official Fonts *\/\n.bifa-president-block h1, \n.bifa-president-block h2, \n.bifa-president-block h3 {\n font-family: 'Montserrat', sans-serif !important;\n}<\/p>\n<p>.bifa-president-block p, \n.bifa-president-block span, \n.bifa-president-block a {\n font-family: 'Poppins', sans-serif !important;\n}<\/p>\n<p>\/* President Card Container *\/\n.bifa-president-container {\n max-width: 1200px;\n margin: 0 auto;\n position: relative;\n z-index: 1;\n}<\/p>\n<p>\/* Main Card *\/\n.bifa-president-card {\n background: transparent;\n backdrop-filter: none;\n border-radius: 0;\n padding: 0; \/* \u0423\u0431\u0438\u0440\u0430\u0435\u043c \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0434\u043b\u044f \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0430 *\/\n box-shadow: none;\n border: none;\n position: relative;\n overflow: hidden;\n animation: bifa-fadeInUp 1s ease-out;\n}<\/p>\n<p>\/* \u0412\u043e\u0441\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0443 \u0434\u043b\u044f \u043f\u043b\u0430\u043d\u0448\u0435\u0442\u043e\u0432 \u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 *\/\n@media (max-width: 1024px) {\n .bifa-president-card {\n background: var(--bright-white);\n backdrop-filter: blur(10px);\n border-radius: var(--radius);\n box-shadow: 0 5px 30px rgba(10, 31, 68, 0.1);\n border: 2px solid rgba(212, 175, 55, 0.2);\n }\n}<\/p>\n<p>\/* Rotating background gradient *\/\n.bifa-president-card::before {\n content: '';\n position: absolute;\n top: -50%;\n right: -50%;\n width: 200%;\n height: 200%;\n background: none;\n animation: none;\n pointer-events: none;\n}<\/p>\n<p>\/* \u0412\u043e\u0441\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442 \u0434\u043b\u044f \u043f\u043b\u0430\u043d\u0448\u0435\u0442\u043e\u0432 \u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 *\/\n@media (max-width: 1024px) {\n .bifa-president-card::before {\n background: radial-gradient(circle, rgba(212, 175, 55, 0.03) 0%, transparent 50%);\n animation: bifa-rotate-slow 30s linear infinite;\n }\n}<\/p>\n<p>\/* Card Content Grid *\/\n.bifa-card-content {\n display: grid;\n grid-template-columns: 280px 1fr;\n gap: 60px;\n align-items: center;\n position: relative;\n z-index: 1;\n}<\/p>\n<p>\/* President Photo *\/\n.bifa-president-photo {\n width: 280px;\n height: 280px;\n border-radius: 50%;\n overflow: hidden;\n position: relative;\n border: 5px solid transparent;\n background: linear-gradient(white, white) padding-box,\n linear-gradient(135deg, var(--heritage-gold), #e6c157, var(--heritage-gold)) border-box;\n animation: bifa-fadeInScale 1s ease-out;\n box-shadow: 0 10px 30px rgba(10, 31, 68, 0.15);\n}<\/p>\n<p>.bifa-president-photo img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.6s ease;\n}<\/p>\n<p>.bifa-president-photo:hover img {\n transform: scale(1.1);\n}<\/p>\n<p>\/* President Info Section *\/\n.bifa-president-info {\n animation: bifa-fadeInRight 1s ease-out 0.3s both;\n}<\/p>\n<p>\/* Badge *\/\n.bifa-president-badge {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(212, 175, 55, 0.05) 100%);\n padding: 12px 24px;\n border-radius: 50px;\n margin-bottom: 25px;\n border: 1px solid rgba(212, 175, 55, 0.3);\n}<\/p>\n<p>.bifa-badge-icon {\n width: 24px;\n height: 24px;\n fill: var(--heritage-gold);\n}<\/p>\n<p>.bifa-badge-text {\n font-family: 'Montserrat', sans-serif !important;\n font-size: 0.85rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 2px;\n color: var(--deep-navy);\n}<\/p>\n<p>\/* President Name - \u0417\u041e\u041b\u041e\u0422\u041e\u0419 \u0426\u0412\u0415\u0422 \u0421 \u041f\u0415\u0420\u0415\u041b\u0418\u0412\u041e\u041c *\/\n.bifa-president-name {\n font-size: 2.8rem;\n font-weight: 800;\n background: linear-gradient(135deg, var(--heritage-gold) 0%, #e6c157 25%, #f4d03f 50%, #e6c157 75%, var(--heritage-gold) 100%);\n background-size: 200% 100%;\n background-clip: text;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n margin-bottom: 30px;\n line-height: 1.1;\n font-family: 'Montserrat', sans-serif !important;\n text-transform: uppercase;\n letter-spacing: 1px;\n text-shadow: 0 2px 4px rgba(212, 175, 55, 0.1);\n cursor: pointer;\n transition: all 0.3s ease;\n}<\/p>\n<p>\/* \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043f\u0435\u0440\u0435\u043b\u0438\u0432\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 *\/\n.bifa-president-name:hover {\n animation: bifa-gold-shimmer 2s ease-in-out infinite;\n transform: scale(1.02);\n}<\/p>\n<p>\/* \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0437\u043e\u043b\u043e\u0442\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u043b\u0438\u0432\u0430 *\/\n@keyframes bifa-gold-shimmer {\n 0% {\n background-position: 200% 0;\n }\n 50% {\n background-position: -200% 0;\n }\n 100% {\n background-position: 200% 0;\n }\n}<\/p>\n<p>\/* Description *\/\n.bifa-president-description {\n font-size: 1.15rem;\n line-height: 1.8;\n color: var(--text-secondary);\n margin-bottom: 40px;\n font-family: 'Poppins', sans-serif !important;\n font-weight: 400;\n}<\/p>\n<p>.bifa-president-description .bifa-highlight {\n color: var(--heritage-gold);\n font-weight: 600;\n}<\/p>\n<p>\/* Action Buttons Container *\/\n.bifa-president-actions {\n display: flex;\n align-items: center;\n gap: 25px;\n flex-wrap: wrap;\n}<\/p>\n<p>\/* Buttons - Official BIFA+ Style *\/\n.bifa-btn {\n padding: 14px 32px;\n text-decoration: none;\n font-size: 0.95rem;\n font-weight: 600;\n border-radius: var(--radius);\n display: inline-flex;\n align-items: center;\n gap: 10px;\n transition: all 0.3s ease;\n font-family: 'Montserrat', sans-serif !important;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n text-transform: uppercase;\n letter-spacing: 1px;\n}<\/p>\n<p>.bifa-btn-gold {\n background: var(--heritage-gold);\n color: var(--deep-navy);\n box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);\n border: 2px solid var(--heritage-gold);\n}<\/p>\n<p>.bifa-btn-gold:hover {\n transform: translateY(-2px);\n box-shadow: 0 6px 25px rgba(212, 175, 55, 0.4);\n background: #e6c157;\n color: var(--deep-navy);\n text-decoration: none;\n}<\/p>\n<p>.bifa-btn-outline {\n background: transparent;\n color: var(--deep-navy);\n border: 2px solid var(--deep-navy);\n}<\/p>\n<p>.bifa-btn-outline:hover {\n background: var(--deep-navy);\n color: var(--bright-white);\n transform: translateY(-2px);\n box-shadow: 0 6px 20px rgba(10, 31, 68, 0.25);\n text-decoration: none;\n}<\/p>\n<p>.bifa-btn-icon {\n width: 20px;\n height: 20px;\n transition: transform 0.3s ease;\n}<\/p>\n<p>.bifa-btn:hover .bifa-btn-icon {\n transform: translateX(5px);\n}<\/p>\n<p>\/* BIFA Logo *\/\n.bifa-logo-wrapper {\n position: relative;\n width: 80px;\n height: 80px;\n flex-shrink: 0;\n margin-left: 15px;\n}<\/p>\n<p>.bifa-logo-bg {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 100px;\n height: 100px;\n background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 60%);\n border-radius: 50%;\n animation: bifa-pulse 4s ease-in-out infinite;\n}<\/p>\n<p>.bifa-logo-img {\n width: 80px;\n height: 80px;\n background-image: url('\/wp-content\/themes\/yootheme-child\/assets\/images\/logo_bifa.svg');\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center;\n filter: drop-shadow(0 4px 8px rgba(10, 31, 68, 0.1));\n transition: all 0.4s ease;\n position: relative;\n z-index: 1;\n}<\/p>\n<p>.bifa-logo-wrapper:hover .bifa-logo-img {\n transform: scale(1.1) rotate(5deg);\n filter: drop-shadow(0 6px 15px rgba(212, 175, 55, 0.3));\n}<\/p>\n<p>\/* Decorative Elements *\/\n.bifa-gold-accent {\n display: none; \/* \u0421\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0434\u043b\u044f \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0430 *\/\n}<\/p>\n<p>\/* \u0414\u043b\u044f \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u044b\u0445 \u044d\u043a\u0440\u0430\u043d\u043e\u0432 - \u0443\u0431\u0438\u0440\u0430\u0435\u043c \u0432\u0441\u0435 \u0444\u043e\u043d\u044b \u0438 \u0440\u0430\u043c\u043a\u0438 *\/\n@media (min-width: 1025px) {\n .bifa-president-block {\n background: transparent !important;\n padding: 40px 0;\n }<\/p>\n<p> .bifa-president-block::before {\n display: none;\n }<\/p>\n<p> .bifa-president-card {\n background: transparent !important;\n border: none !important;\n box-shadow: none !important;\n padding: 0 !important;\n }<\/p>\n<p> .president-particles,\n .bifa-gold-accent {\n display: none !important;\n }\n}<\/p>\n<p>\/* \u041f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u043f\u043b\u0430\u043d\u0448\u0435\u0442\u043e\u0432 \u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 *\/\n@media (max-width: 1024px) {\n .bifa-gold-accent {\n display: block;\n position: absolute;\n width: 180px;\n height: 180px;\n background: radial-gradient(circle, rgba(212, 175, 55, 0.12) 0%, transparent 70%);\n border-radius: 50%;\n filter: blur(40px);\n pointer-events: none;\n animation: bifa-float-accent 15s ease-in-out infinite;\n }<\/p>\n<p> .bifa-gold-accent:nth-child(1) {\n top: -80px;\n right: 10%;\n }<\/p>\n<p> .bifa-gold-accent:nth-child(2) {\n bottom: -80px;\n left: 10%;\n animation-delay: 7s;\n }\n}<\/p>\n<p>\/* Animations *\/\n@keyframes bifa-fadeInUp {\n from {\n opacity: 0;\n transform: translateY(40px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>@keyframes bifa-fadeInRight {\n from {\n opacity: 0;\n transform: translateX(40px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}<\/p>\n<p>@keyframes bifa-fadeInScale {\n from {\n opacity: 0;\n transform: scale(0.8);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}<\/p>\n<p>@keyframes bifa-rotate-slow {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}<\/p>\n<p>@keyframes bifa-float-accent {\n 0%, 100% {\n transform: translate(0, 0);\n }\n 50% {\n transform: translate(-20px, 20px);\n }\n}<\/p>\n<p>@keyframes bifa-pulse {\n 0%, 100% {\n transform: translate(-50%, -50%) scale(1);\n opacity: 0.3;\n }\n 50% {\n transform: translate(-50%, -50%) scale(1.05);\n opacity: 0.5;\n }\n}<\/p>\n<p>\/* Responsive Design *\/\n@media (max-width: 1024px) {\n .bifa-president-container {\n padding: 0 30px;\n }<\/p>\n<p> .bifa-president-card {\n padding: 50px 40px;\n background: var(--bright-white);\n backdrop-filter: blur(10px);\n border-radius: var(--radius);\n box-shadow: 0 5px 30px rgba(10, 31, 68, 0.1);\n border: 2px solid rgba(212, 175, 55, 0.2);\n }<\/p>\n<p> .bifa-card-content {\n gap: 50px;\n }\n}<\/p>\n<p>@media (max-width: 868px) {\n .bifa-president-block {\n padding: 60px 0;\n }<\/p>\n<p> .bifa-card-content {\n grid-template-columns: 1fr;\n text-align: center;\n gap: 40px;\n }<\/p>\n<p> .bifa-president-photo {\n margin: 0 auto;\n }<\/p>\n<p> .bifa-president-actions {\n justify-content: center;\n }<\/p>\n<p> .bifa-president-badge {\n margin-left: auto;\n margin-right: auto;\n }\n}<\/p>\n<p>@media (max-width: 640px) {\n .bifa-president-container {\n padding: 0 20px;\n }<\/p>\n<p> .bifa-president-card {\n padding: 40px 30px;\n }<\/p>\n<p> .bifa-president-name {\n font-size: 2.2rem;\n }<\/p>\n<p> .bifa-president-description {\n font-size: 1.05rem;\n }<\/p>\n<p> .bifa-president-actions {\n flex-direction: column;\n width: 100%;\n gap: 15px;\n }<\/p>\n<p> .bifa-btn {\n width: 100%;\n justify-content: center;\n }<\/p>\n<p> .bifa-logo-wrapper {\n margin: 20px auto 0;\n }\n}<\/p>\n<p>@media (max-width: 480px) {\n .bifa-president-block {\n padding: 50px 0;\n }<\/p>\n<p> .bifa-president-card {\n padding: 30px 20px;\n border-radius: var(--radius);\n background: var(--bright-white);\n backdrop-filter: blur(10px);\n box-shadow: 0 5px 30px rgba(10, 31, 68, 0.1);\n border: 2px solid rgba(212, 175, 55, 0.2);\n }<\/p>\n<p> .bifa-president-photo {\n width: 220px;\n height: 220px;\n }<\/p>\n<p> .bifa-president-name {\n font-size: 1.9rem;\n margin-bottom: 20px;\n }<\/p>\n<p> .bifa-president-description {\n font-size: 1rem;\n margin-bottom: 30px;\n }<\/p>\n<p> .bifa-btn {\n padding: 12px 24px;\n font-size: 0.9rem;\n }<\/p>\n<p> .bifa-logo-wrapper {\n width: 70px;\n height: 70px;\n }<\/p>\n<p> .bifa-logo-img {\n width: 70px;\n height: 70px;\n }\n}\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<p><\/p>\n<div class=\"bifa-president-block\">\n <\/p>\n<div class=\"president-particles\">\n<div class=\"president-particle\" style=\"left:10%; top:20%; animation-delay:0s\"><\/div>\n<div class=\"president-particle\" style=\"left:30%; top:60%; animation-delay:2s\"><\/div>\n<div class=\"president-particle\" style=\"left:50%; top:30%; animation-delay:4s\"><\/div>\n<div class=\"president-particle\" style=\"left:70%; top:70%; animation-delay:6s\"><\/div>\n<div class=\"president-particle\" style=\"left:90%; top:40%; animation-delay:8s\"><\/div>\n<div class=\"president-particle\" style=\"left:20%; top:80%; animation-delay:3s\"><\/div>\n<div class=\"president-particle\" style=\"left:80%; top:10%; animation-delay:5s\"><\/div>\n<div class=\"president-particle\" style=\"left:40%; top:90%; animation-delay:7s\"><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"bifa-gold-accent\"><\/div>\n<div class=\"bifa-gold-accent\"><\/div>\n<div class=\"president-content-wrapper\">\n<div class=\"bifa-president-container\">\n<div class=\"bifa-president-card\">\n<div class=\"bifa-card-content\">\n <\/p>\n<div class=\"bifa-president-photo\">\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> <\/p>\n<div class=\"bifa-president-info\">\n<div class=\"bifa-president-badge\">\n <svg class=\"bifa-badge-icon\" viewbox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\/>\n <\/svg><br \/>\n <span class=\"bifa-badge-text\">Fundador e presidente<\/span>\n <\/div>\n<h2 class=\"bifa-president-name\">Dr. Salim Humaid Almazaini<\/h2>\n<div class=\"bifa-president-description\">\n<p>\n Um distinto <span class=\"bifa-highlight\">l\u00edder vision\u00e1rio<\/span> em diplomacia esportiva internacional. Por meio de inova\u00e7\u00e3o estrat\u00e9gica e compromisso inabal\u00e1vel, o Dr. Almazaini transforma o futebol global <span class=\"bifa-highlight\">em uma poderosa ponte para a unidade e a coopera\u00e7\u00e3o<\/span> entre na\u00e7\u00f5es.\n <\/p>\n<\/p><\/div>\n<div class=\"bifa-president-actions\">\n <a href=\"https:\/\/bifa.ai\/about\/#founder\" class=\"bifa-btn bifa-btn-gold\"><br \/>\n <span>Descubra a hist\u00f3ria<\/span><br \/>\n <svg class=\"bifa-btn-icon\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\n <\/svg><br \/>\n <\/a><\/p>\n<p> <a href=\"https:\/\/bifa.ai\/about\/\" class=\"bifa-btn bifa-btn-outline\"><br \/>\n <span>Sobre a BIFA<\/span><br \/>\n <svg class=\"bifa-btn-icon\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\n <path d=\"M12 6v6l4 2\"\/>\n <\/svg><br \/>\n <\/a><\/p>\n<div class=\"bifa-logo-wrapper\">\n<div class=\"bifa-logo-bg\"><\/div>\n<div class=\"bifa-logo-img\" role=\"img\" aria-label=\"Logotipo da BIFA\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n<p><script>\n\/\/ BIFA President Block Interactions\n(function() {\n \/\/ Smooth reveal animation on scroll\n const observerOptions = {\n threshold: 0.2,\n rootMargin: '0px 0px -50px 0px'\n };<\/p>\n<p> const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.style.animationPlayState = 'running';\n observer.unobserve(entry.target);\n }\n });\n }, observerOptions);<\/p>\n<p> \/\/ Observe animated elements\n const animatedElements = document.querySelectorAll('.bifa-president-card, .bifa-president-photo');\n animatedElements.forEach(el => {\n if (el) {\n el.style.animationPlayState = 'paused';\n observer.observe(el);\n }\n });<\/p>\n<p> \/\/ Button hover effects\n const buttons = document.querySelectorAll('.bifa-btn');\n buttons.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.3) 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 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> \/\/ Image loading effect\n const presidentImg = document.querySelector('.bifa-president-photo img');\n if (presidentImg) {\n presidentImg.style.opacity = '0';\n presidentImg.style.transition = 'opacity 0.6s ease';<\/p>\n<p> if (presidentImg.complete) {\n presidentImg.style.opacity = '1';\n } else {\n presidentImg.addEventListener('load', function() {\n this.style.opacity = '1';\n });\n }\n }<\/p>\n<p> \/\/ Preload images\n const imagesToPreload = [\n '\/wp-content\/themes\/yootheme-child\/assets\/images\/logo_bifa.svg',\n '\/wp-content\/themes\/yootheme-child\/assets\/images\/Mr\/main-photo.jpg'\n ];<\/p>\n<p> imagesToPreload.forEach(url => {\n const img = new Image();\n img.src = url;\n });\n})();\n<\/script><\/p>\n<p><\/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+ Premium Gallery Block<\/title>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n \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&family=Cairo:wght@300;400;500;600;700;800&family=Tajawal:wght@300;400;500;700;800&display=swap\" rel=\"stylesheet\">\n<style>\n\/* ========= \u0413\u041b\u041e\u0411\u0410\u041b\u042c\u041d\u042b\u0415 \u041f\u0415\u0420\u0415\u041c\u0415\u041d\u041d\u042b\u0415 BIFA+ ========= *\/\n:root {\n \/* \u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430 BIFA+ *\/\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 --bifa-gray-light: #F8F9FA;\n --bifa-gray: #6C757D;<\/p>\n<p> \/* \u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0448\u0440\u0438\u0444\u0442\u044b BIFA+ *\/\n --bifa-font-heading: 'Montserrat', 'Cairo', sans-serif;\n --bifa-font-body: 'Poppins', 'Tajawal', sans-serif;\n --bifa-font-arabic: 'Cairo', 'Tajawal', 'GE SS Text', sans-serif;<\/p>\n<p> \/* \u041f\u0440\u0435\u043c\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0442\u0435\u043d\u0438 \u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u044b *\/\n --bifa-shadow-premium: 0 25px 80px rgba(10, 31, 68, 0.15);\n --bifa-shadow-hover: 0 35px 100px rgba(10, 31, 68, 0.2);\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 ========= *\/\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}<\/p>\n<p>body {\n font-family: var(--bifa-font-body);\n background: var(--bifa-bright-white);\n overflow-x: hidden;\n color: var(--bifa-soft-black);\n}<\/p>\n<p>\/* ========= GALLERY SECTION WRAPPER ========= *\/\n.bifa-gallery-section-wrapper {\n width: 100vw;\n position: relative;\n left: 50%;\n margin-left: -50vw;\n background: transparent; \/* \u0411\u0435\u0437 \u0444\u043e\u043d\u0430 *\/\n overflow: hidden;\n}<\/p>\n<p>\/* ========= MAIN GALLERY SECTION ========= *\/\n.bifa-gallery-section {\n min-height: auto;\n padding: 60px 0 80px 0;\n position: relative;\n background: transparent;\n}<\/p>\n<p>\/* ========= ANIMATED BACKGROUND ELEMENTS ========= *\/\n.bifa-gallery-bg-animation {\n position: absolute;\n width: 100%;\n height: 100%;\n overflow: hidden;\n z-index: 1;\n top: 0;\n left: 0;\n}<\/p>\n<p>\/* \u0417\u043e\u043b\u043e\u0442\u044b\u0435 \u0447\u0430\u0441\u0442\u0438\u0446\u044b BIFA+ *\/\n.bifa-gallery-particle {\n position: absolute;\n width: 4px;\n height: 4px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n border-radius: 50%;\n animation: floatGallery 18s infinite linear;\n box-shadow: 0 0 8px rgba(212, 175, 55, 0.3);\n opacity: 0.3;\n will-change: transform;\n}<\/p>\n<p>@keyframes floatGallery {\n 0% {\n transform: translateY(100vh) translateX(0) rotate(0deg);\n opacity: 0;\n }\n 10% { opacity: 0.4; }\n 90% { opacity: 0.4; }\n 100% {\n transform: translateY(-100vh) translateX(60px) rotate(360deg);\n opacity: 0;\n }\n}<\/p>\n<p>\/* \u041f\u043b\u0430\u0432\u0430\u044e\u0449\u0438\u0435 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0444\u0438\u0433\u0443\u0440\u044b BIFA+ *\/\n.bifa-floating-shape {\n position: absolute;\n border-radius: 50%;\n filter: blur(100px);\n animation: morphFloatGallery 22s ease-in-out infinite;\n pointer-events: none;\n opacity: 0.4;\n}<\/p>\n<p>.bifa-shape-gallery-1 {\n width: 350px;\n height: 350px;\n background: radial-gradient(circle at 30% 30%, rgba(212, 175, 55, 0.08), transparent);\n top: -175px;\n right: -175px;\n}<\/p>\n<p>.bifa-shape-gallery-2 {\n width: 300px;\n height: 300px;\n background: radial-gradient(circle at 70% 70%, rgba(10, 31, 68, 0.06), transparent);\n bottom: -150px;\n left: -150px;\n animation-delay: 7s;\n}<\/p>\n<p>.bifa-shape-gallery-3 {\n width: 250px;\n height: 250px;\n background: radial-gradient(circle at 50% 50%, rgba(29, 97, 67, 0.07), transparent);\n top: 40%;\n left: 60%;\n animation-delay: 14s;\n}<\/p>\n<p>@keyframes morphFloatGallery {\n 0%, 100% { \n transform: translate(0, 0) scale(1) rotate(0deg);\n filter: blur(100px);\n }\n 25% { \n transform: translate(80px, -60px) scale(1.2) rotate(90deg);\n filter: blur(120px);\n }\n 50% { \n transform: translate(-60px, 80px) scale(0.8) rotate(180deg);\n filter: blur(80px);\n }\n 75% { \n transform: translate(-80px, -40px) scale(1.1) rotate(270deg);\n filter: blur(110px);\n }\n}<\/p>\n<p>\/* ========= CONTAINER ========= *\/\n.bifa-gallery-container {\n max-width: 1400px;\n margin: 0 auto;\n padding: 0 20px;\n position: relative;\n z-index: 10;\n}<\/p>\n<p>\/* ========= SECTION HEADER - Premium Style ========= *\/\n.bifa-gallery-section-header {\n text-align: center;\n margin-bottom: 70px;\n animation: fadeInDown 1.2s ease;\n}<\/p>\n<p>.bifa-gallery-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), #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n margin-bottom: 15px;\n text-transform: uppercase;\n position: relative;\n display: inline-block;\n cursor: pointer;\n transition: all 0.3s ease;\n}<\/p>\n<p>.bifa-gallery-section-title::after {\n content: '';\n position: absolute;\n bottom: -10px;\n left: 50%;\n transform: translateX(-50%);\n width: 0;\n height: 3px;\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700);\n transition: width 0.4s ease;\n}<\/p>\n<p>.bifa-gallery-section-title:hover {\n transform: translateY(-3px);\n filter: drop-shadow(0 10px 20px rgba(212, 175, 55, 0.3));\n}<\/p>\n<p>.bifa-gallery-section-title:hover::after {\n width: 100%;\n}<\/p>\n<p>.bifa-gallery-section-subtitle {\n font-family: var(--bifa-font-heading);\n font-size: clamp(1.1rem, 2vw, 1.5rem);\n color: var(--bifa-deep-navy);\n font-weight: 600;\n letter-spacing: 1.5px;\n margin-bottom: 15px;\n opacity: 0;\n animation: fadeInUp 1.2s ease 0.3s forwards;\n}<\/p>\n<p>.bifa-gallery-section-description {\n max-width: 800px;\n margin: 0 auto;\n font-family: var(--bifa-font-body);\n font-size: clamp(0.95rem, 1.3vw, 1.1rem);\n line-height: 1.7;\n color: #4a5568;\n opacity: 0;\n animation: fadeInUp 1.2s ease 0.6s forwards;\n}<\/p>\n<p>\/* ========= MAIN GALLERY - Premium Design ========= *\/\n.bifa-gallery-main {\n position: relative;\n max-width: 1000px;\n margin: 0 auto 50px;\n border-radius: 25px;\n overflow: hidden;\n box-shadow: var(--bifa-shadow-premium);\n animation: fadeInUp 1.2s ease 0.4s forwards;\n background: white;\n opacity: 0;\n border: 1px solid rgba(212, 175, 55, 0.1);\n}<\/p>\n<p>.bifa-gallery-slider {\n position: relative;\n height: 600px;\n background: var(--bifa-gray-light);\n overflow: hidden;\n}<\/p>\n<p>.bifa-slide {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n transition: opacity 1s ease-in-out;\n}<\/p>\n<p>.bifa-slide.active {\n opacity: 1;\n}<\/p>\n<p>.bifa-slide img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.3s ease;\n}<\/p>\n<p>.bifa-slide:hover img {\n transform: scale(1.05);\n}<\/p>\n<p>.bifa-slide-caption {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n background: linear-gradient(to top, \n rgba(10, 31, 68, 0.95) 0%, \n rgba(10, 31, 68, 0.8) 50%,\n transparent 100%\n );\n padding: 50px 40px;\n color: white;\n}<\/p>\n<p>.bifa-slide-title {\n font-family: var(--bifa-font-heading);\n font-size: 1.8rem;\n font-weight: 800;\n margin-bottom: 12px;\n color: var(--bifa-bright-white);\n text-shadow: 0 2px 4px rgba(0,0,0,0.3);\n}<\/p>\n<p>.bifa-slide-desc {\n font-family: var(--bifa-font-body);\n font-size: 1.1rem;\n color: rgba(255, 255, 255, 0.9);\n line-height: 1.6;\n}<\/p>\n<p>\/* ========= NAVIGATION ARROWS - Premium Style ========= *\/\n.bifa-gallery-nav {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(15px);\n border: 2px solid rgba(212, 175, 55, 0.3);\n width: 55px;\n height: 55px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: var(--bifa-transition);\n z-index: 20;\n box-shadow: 0 8px 25px rgba(10, 31, 68, 0.15);\n}<\/p>\n<p>.bifa-gallery-nav:hover {\n background: var(--bifa-heritage-gold);\n border-color: var(--bifa-heritage-gold);\n transform: translateY(-50%) scale(1.1);\n box-shadow: var(--bifa-shadow-gold);\n}<\/p>\n<p>.bifa-gallery-nav.prev {\n left: 25px;\n}<\/p>\n<p>.bifa-gallery-nav.next {\n right: 25px;\n}<\/p>\n<p>.bifa-gallery-nav::before {\n content: '';\n width: 14px;\n height: 14px;\n border-top: 3px solid var(--bifa-deep-navy);\n border-right: 3px solid var(--bifa-deep-navy);\n transition: border-color 0.3s ease;\n}<\/p>\n<p>.bifa-gallery-nav:hover::before {\n border-color: var(--bifa-bright-white);\n}<\/p>\n<p>.bifa-gallery-nav.prev::before {\n transform: rotate(-135deg);\n margin-left: 4px;\n}<\/p>\n<p>.bifa-gallery-nav.next::before {\n transform: rotate(45deg);\n margin-right: 4px;\n}<\/p>\n<p>\/* ========= DOTS NAVIGATION - Premium Style ========= *\/\n.bifa-gallery-dots {\n position: absolute;\n bottom: 25px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n gap: 12px;\n z-index: 20;\n}<\/p>\n<p>.bifa-dot {\n width: 14px;\n height: 14px;\n border-radius: 50%;\n background: rgba(255, 255, 255, 0.6);\n cursor: pointer;\n transition: var(--bifa-transition);\n border: 2px solid transparent;\n backdrop-filter: blur(10px);\n}<\/p>\n<p>.bifa-dot.active {\n background: var(--bifa-heritage-gold);\n transform: scale(1.3);\n border-color: rgba(255, 255, 255, 0.8);\n box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);\n}<\/p>\n<p>.bifa-dot:hover {\n background: rgba(255, 255, 255, 0.9);\n transform: scale(1.1);\n}<\/p>\n<p>\/* ========= PLAY\/PAUSE CONTROL - Premium Style ========= *\/\n.bifa-gallery-controls {\n position: absolute;\n top: 25px;\n right: 25px;\n z-index: 20;\n}<\/p>\n<p>.bifa-play-pause-btn {\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(15px);\n border: 2px solid rgba(212, 175, 55, 0.3);\n width: 55px;\n height: 55px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: var(--bifa-transition);\n box-shadow: 0 8px 25px rgba(10, 31, 68, 0.15);\n outline: none;\n}<\/p>\n<p>.bifa-play-pause-btn:hover {\n background: var(--bifa-heritage-gold);\n border-color: var(--bifa-heritage-gold);\n transform: scale(1.1);\n box-shadow: var(--bifa-shadow-gold);\n}<\/p>\n<p>.bifa-play-pause-btn::before {\n content: '';\n width: 0;\n height: 0;\n border-left: 16px solid var(--bifa-deep-navy);\n border-top: 12px solid transparent;\n border-bottom: 12px solid transparent;\n margin-left: 3px;\n transition: all 0.3s ease;\n}<\/p>\n<p>.bifa-play-pause-btn:hover::before {\n border-left-color: var(--bifa-bright-white);\n}<\/p>\n<p>.bifa-play-pause-btn.playing::before {\n width: 22px;\n height: 22px;\n border: none;\n background: linear-gradient(to right, \n var(--bifa-deep-navy) 35%, \n transparent 35%, \n transparent 65%, \n var(--bifa-deep-navy) 65%\n );\n margin-left: 0;\n}<\/p>\n<p>.bifa-play-pause-btn.playing:hover::before {\n background: linear-gradient(to right, \n var(--bifa-bright-white) 35%, \n transparent 35%, \n transparent 65%, \n var(--bifa-bright-white) 65%\n );\n}<\/p>\n<p>\/* ========= THUMBNAILS - Premium Grid ========= *\/\n.bifa-gallery-thumbs {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n gap: 20px;\n margin-top: 40px;\n animation: fadeInUp 1.2s ease 0.7s forwards;\n opacity: 0;\n}<\/p>\n<p>.bifa-thumb-item {\n position: relative;\n height: 140px;\n border-radius: 20px;\n overflow: hidden;\n cursor: pointer;\n transition: var(--bifa-transition);\n box-shadow: 0 8px 25px rgba(10, 31, 68, 0.1);\n background: white;\n border: 3px solid transparent;\n}<\/p>\n<p>.bifa-thumb-item:hover {\n transform: translateY(-8px);\n box-shadow: 0 15px 40px rgba(10, 31, 68, 0.2);\n border-color: rgba(212, 175, 55, 0.3);\n}<\/p>\n<p>.bifa-thumb-item.active {\n border-color: var(--bifa-heritage-gold);\n box-shadow: var(--bifa-shadow-gold);\n transform: translateY(-5px);\n}<\/p>\n<p>.bifa-thumb-item img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.3s ease;\n}<\/p>\n<p>.bifa-thumb-item:hover img {\n transform: scale(1.1);\n}<\/p>\n<p>\/* Overlay effect for thumbnails *\/\n.bifa-thumb-item::before {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(135deg, \n transparent 0%, \n rgba(212, 175, 55, 0.1) 100%\n );\n opacity: 0;\n transition: opacity 0.3s ease;\n z-index: 1;\n}<\/p>\n<p>.bifa-thumb-item:hover::before {\n opacity: 1;\n}<\/p>\n<p>.bifa-thumb-item.active::before {\n background: linear-gradient(135deg, \n rgba(212, 175, 55, 0.2) 0%, \n rgba(212, 175, 55, 0.05) 100%\n );\n opacity: 1;\n}<\/p>\n<p>\/* ========= ANIMATIONS ========= *\/\n@keyframes fadeInDown {\n from {\n opacity: 0;\n transform: translateY(-40px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>@keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(40px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>\/* ========= RESPONSIVE ========= *\/\n@media (max-width: 1024px) {\n .bifa-gallery-thumbs {\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n gap: 15px;\n }<\/p>\n<p> .bifa-thumb-item {\n height: 120px;\n }\n}<\/p>\n<p>@media (max-width: 768px) {\n .bifa-gallery-section {\n padding: 50px 0 60px 0;\n }<\/p>\n<p> .bifa-gallery-container {\n padding: 0 15px;\n }<\/p>\n<p> .bifa-gallery-slider {\n height: 400px;\n }<\/p>\n<p> .bifa-slide-caption {\n padding: 30px 25px;\n }<\/p>\n<p> .bifa-slide-title {\n font-size: 1.5rem;\n }<\/p>\n<p> .bifa-gallery-nav {\n width: 45px;\n height: 45px;\n }<\/p>\n<p> .bifa-play-pause-btn {\n width: 45px;\n height: 45px;\n }<\/p>\n<p> .bifa-gallery-thumbs {\n grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n gap: 12px;\n margin-top: 30px;\n }<\/p>\n<p> .bifa-thumb-item {\n height: 100px;\n }\n}<\/p>\n<p>@media (max-width: 480px) {\n .bifa-gallery-section {\n padding: 40px 0 50px 0;\n }<\/p>\n<p> .bifa-gallery-slider {\n height: 300px;\n }<\/p>\n<p> .bifa-gallery-section-title {\n font-size: 2rem;\n }<\/p>\n<p> .bifa-gallery-section-subtitle {\n font-size: 1.1rem;\n letter-spacing: 1px;\n }<\/p>\n<p> .bifa-gallery-nav {\n display: none; \/* \u0421\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0441\u0442\u0440\u0435\u043b\u043a\u0438 \u043d\u0430 \u043e\u0447\u0435\u043d\u044c \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 \u044d\u043a\u0440\u0430\u043d\u0430\u0445 *\/\n }<\/p>\n<p> .bifa-slide-caption {\n padding: 25px 20px;\n }<\/p>\n<p> .bifa-slide-title {\n font-size: 1.3rem;\n }<\/p>\n<p> .bifa-slide-desc {\n font-size: 1rem;\n }<\/p>\n<p> .bifa-gallery-thumbs {\n grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));\n gap: 10px;\n }<\/p>\n<p> .bifa-thumb-item {\n height: 80px;\n }\n}\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"bifa-gallery-section-wrapper\">\n <\/p>\n<section class=\"bifa-gallery-section\">\n <\/p>\n<div class=\"bifa-gallery-bg-animation\">\n <\/p>\n<div class=\"bifa-floating-shape bifa-shape-gallery-1\"><\/div>\n<div class=\"bifa-floating-shape bifa-shape-gallery-2\"><\/div>\n<div class=\"bifa-floating-shape bifa-shape-gallery-3\"><\/div>\n<p> \n <\/div>\n<div class=\"bifa-gallery-container\">\n <\/p>\n<div class=\"bifa-gallery-section-header\">\n<h2 class=\"bifa-gallery-section-title\">Galeria BIFA+<\/h2>\n<p class=\"bifa-gallery-section-subtitle\">Momentos cativantes<\/p>\n<p class=\"bifa-gallery-section-description\">\n Descubra os momentos mais inspiradores dos eventos e atividades da BIFA+ que mostram o poder do futebol na uni\u00e3o de na\u00e7\u00f5es e na constru\u00e7\u00e3o de comunidades.\n <\/p>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"bifa-gallery-main\">\n<div class=\"bifa-gallery-slider\">\n <\/p>\n<div class=\"bifa-slide active\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Moments\/1.jpg?v=2\" alt=\"BIFA+ Victory Moment\"><\/p>\n<div class=\"bifa-slide-caption\">\n<h3 class=\"bifa-slide-title\">Celebra\u00e7\u00e3o da vit\u00f3ria<\/h3>\n<p class=\"bifa-slide-desc\">Emo\u00e7\u00f5es e uni\u00e3o da equipe ap\u00f3s alcan\u00e7ar um sucesso not\u00e1vel no cen\u00e1rio internacional<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"bifa-slide\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Moments\/2.jpg?v=2\" alt=\"BIFA+ Team Spirit\"><\/p>\n<div class=\"bifa-slide-caption\">\n<h3 class=\"bifa-slide-title\">Esp\u00edrito de equipe<\/h3>\n<p class=\"bifa-slide-desc\">Mostrando o incr\u00edvel v\u00ednculo e a uni\u00e3o que definem a comunidade BIFA+<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"bifa-slide\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Moments\/3.jpg?v=2\" alt=\"BIFA+ Young Talents\"><\/p>\n<div class=\"bifa-slide-caption\">\n<h3 class=\"bifa-slide-title\">Futuros campe\u00f5es<\/h3>\n<p class=\"bifa-slide-desc\">Incentivando a pr\u00f3xima gera\u00e7\u00e3o de talentos do futebol nos programas da BIFA+ Academy<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"bifa-slide\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Moments\/4.jpg?v=2\" alt=\"BIFA+ Stadium\"><\/p>\n<div class=\"bifa-slide-caption\">\n<h3 class=\"bifa-slide-title\">Locais de classe mundial<\/h3>\n<p class=\"bifa-slide-desc\">Est\u00e1dios e instala\u00e7\u00f5es modernos que proporcionam experi\u00eancias inesquec\u00edveis no futebol<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"bifa-gallery-nav prev\"><\/div>\n<div class=\"bifa-gallery-nav next\"><\/div>\n<p> <\/p>\n<div class=\"bifa-gallery-dots\">\n <span class=\"bifa-dot active\" data-slide=\"0\"><\/span><br \/>\n <span class=\"bifa-dot\" data-slide=\"1\"><\/span><br \/>\n <span class=\"bifa-dot\" data-slide=\"2\"><\/span><br \/>\n <span class=\"bifa-dot\" data-slide=\"3\"><\/span>\n <\/div>\n<p> <\/p>\n<div class=\"bifa-gallery-controls\">\n <button class=\"bifa-play-pause-btn playing\" aria-label=\"Reproduzir\/Pausar a galeria\"><\/button>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"bifa-gallery-thumbs\">\n<div class=\"bifa-thumb-item active\" data-slide=\"0\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Moments\/1.jpg?v=2\" alt=\"Victory Thumbnail\">\n <\/div>\n<div class=\"bifa-thumb-item\" data-slide=\"1\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Moments\/2.jpg?v=2\" alt=\"Team Spirit Thumbnail\">\n <\/div>\n<div class=\"bifa-thumb-item\" data-slide=\"2\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Moments\/3.jpg?v=2\" alt=\"Young Talents Thumbnail\">\n <\/div>\n<div class=\"bifa-thumb-item\" data-slide=\"3\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Moments\/4.jpg?v=2\" alt=\"Stadium Thumbnail\">\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<\/div>\n<p><script>\n\/\/ BIFA+ Premium Gallery Module\nconst BifaGallery = {\n \/\/ Configuration\n config: {\n currentSlide: 0,\n isPlaying: true,\n slideInterval: null,\n autoplayDelay: 5000\n },<\/p>\n<p> \/\/ Initialize\n init() {\n this.createParticles();\n this.setupEventListeners();\n this.startSlideshow();\n this.preloadImages();\n },<\/p>\n<p> \/\/ Create golden particles\n createParticles() {\n const particlesContainer = document.querySelector('.bifa-gallery-bg-animation');\n const particleCount = 8; \/\/ \u041c\u0435\u043d\u044c\u0448\u0435 \u0447\u0430\u0441\u0442\u0438\u0446 \u0434\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0447\u0438\u0441\u0442\u043e\u0433\u043e \u0432\u0438\u0434\u0430<\/p>\n<p> for (let i = 0; i < particleCount; i++) {\n const particle = document.createElement('div');\n particle.className = 'bifa-gallery-particle';\n particle.style.left = Math.random() * 100 + '%';\n particle.style.animationDelay = Math.random() * 16 + 's';\n particle.style.animationDuration = (14 + Math.random() * 6) + 's';\n \n const size = 4 + Math.random() * 2;\n particle.style.width = size + 'px';\n particle.style.height = size + 'px';\n \n particlesContainer.appendChild(particle);\n }\n },\n\n \/\/ Setup event listeners\n setupEventListeners() {\n const slides = document.querySelectorAll('.bifa-slide');\n const dots = document.querySelectorAll('.bifa-dot');\n const thumbs = document.querySelectorAll('.bifa-thumb-item');\n const prevBtn = document.querySelector('.bifa-gallery-nav.prev');\n const nextBtn = document.querySelector('.bifa-gallery-nav.next');\n const playPauseBtn = document.querySelector('.bifa-play-pause-btn');\n const gallerySlider = document.querySelector('.bifa-gallery-slider');\n\n \/\/ Navigation buttons\n if (prevBtn) {\n prevBtn.addEventListener('click', () => {\n this.prevSlide();\n this.restartAutoplay();\n });\n }<\/p>\n<p> if (nextBtn) {\n nextBtn.addEventListener('click', () => {\n this.nextSlide();\n this.restartAutoplay();\n });\n }<\/p>\n<p> \/\/ Play\/Pause button\n if (playPauseBtn) {\n playPauseBtn.addEventListener('click', () => {\n this.togglePlayPause();\n });\n }<\/p>\n<p> \/\/ Dot navigation\n dots.forEach((dot, index) => {\n dot.addEventListener('click', () => {\n this.showSlide(index);\n this.restartAutoplay();\n });\n });<\/p>\n<p> \/\/ Thumbnail navigation\n thumbs.forEach((thumb, index) => {\n thumb.addEventListener('click', () => {\n this.showSlide(index);\n this.restartAutoplay();\n });\n });<\/p>\n<p> \/\/ Pause on hover\n if (gallerySlider) {\n gallerySlider.addEventListener('mouseenter', () => {\n if (this.config.isPlaying) this.stopSlideshow();\n });<\/p>\n<p> gallerySlider.addEventListener('mouseleave', () => {\n if (!this.config.isPlaying) this.startSlideshow();\n });\n }<\/p>\n<p> \/\/ Touch support\n this.setupTouchNavigation(gallerySlider);<\/p>\n<p> \/\/ Keyboard support\n this.setupKeyboardNavigation();\n },<\/p>\n<p> \/\/ Show specific slide\n showSlide(index) {\n const slides = document.querySelectorAll('.bifa-slide');\n const dots = document.querySelectorAll('.bifa-dot');\n const thumbs = document.querySelectorAll('.bifa-thumb-item');<\/p>\n<p> \/\/ Remove active classes\n slides.forEach(slide => slide.classList.remove('active'));\n dots.forEach(dot => dot.classList.remove('active'));\n thumbs.forEach(thumb => thumb.classList.remove('active'));<\/p>\n<p> \/\/ Add active classes\n if (slides[index]) slides[index].classList.add('active');\n if (dots[index]) dots[index].classList.add('active');\n if (thumbs[index]) thumbs[index].classList.add('active');<\/p>\n<p> this.config.currentSlide = index;\n },<\/p>\n<p> \/\/ Next slide\n nextSlide() {\n const slides = document.querySelectorAll('.bifa-slide');\n const nextIndex = (this.config.currentSlide + 1) % slides.length;\n this.showSlide(nextIndex);\n },<\/p>\n<p> \/\/ Previous slide\n prevSlide() {\n const slides = document.querySelectorAll('.bifa-slide');\n const prevIndex = (this.config.currentSlide - 1 + slides.length) % slides.length;\n this.showSlide(prevIndex);\n },<\/p>\n<p> \/\/ Start slideshow\n startSlideshow() {\n this.config.slideInterval = setInterval(() => {\n this.nextSlide();\n }, this.config.autoplayDelay);\n this.config.isPlaying = true;<\/p>\n<p> const playPauseBtn = document.querySelector('.bifa-play-pause-btn');\n if (playPauseBtn) playPauseBtn.classList.add('playing');\n },<\/p>\n<p> \/\/ Stop slideshow\n stopSlideshow() {\n if (this.config.slideInterval) {\n clearInterval(this.config.slideInterval);\n this.config.slideInterval = null;\n }\n this.config.isPlaying = false;<\/p>\n<p> const playPauseBtn = document.querySelector('.bifa-play-pause-btn');\n if (playPauseBtn) playPauseBtn.classList.remove('playing');\n },<\/p>\n<p> \/\/ Toggle play\/pause\n togglePlayPause() {\n if (this.config.isPlaying) {\n this.stopSlideshow();\n } else {\n this.startSlideshow();\n }\n },<\/p>\n<p> \/\/ Restart autoplay\n restartAutoplay() {\n if (this.config.isPlaying) {\n this.stopSlideshow();\n this.startSlideshow();\n }\n },<\/p>\n<p> \/\/ Setup touch navigation\n setupTouchNavigation(element) {\n if (!element) return;<\/p>\n<p> let touchStartX = 0;\n let touchEndX = 0;<\/p>\n<p> element.addEventListener('touchstart', (e) => {\n touchStartX = e.changedTouches[0].screenX;\n });<\/p>\n<p> element.addEventListener('touchend', (e) => {\n touchEndX = e.changedTouches[0].screenX;\n this.handleSwipe();\n });<\/p>\n<p> this.handleSwipe = () => {\n if (touchEndX < touchStartX - 50) {\n \/\/ Swipe left - next slide\n this.nextSlide();\n this.restartAutoplay();\n }\n if (touchEndX > touchStartX + 50) {\n \/\/ Swipe right - previous slide\n this.prevSlide();\n this.restartAutoplay();\n }\n };\n },<\/p>\n<p> \/\/ Setup keyboard navigation\n setupKeyboardNavigation() {\n document.addEventListener('keydown', (e) => {\n if (e.key === 'ArrowLeft') {\n this.prevSlide();\n this.restartAutoplay();\n } else if (e.key === 'ArrowRight') {\n this.nextSlide();\n this.restartAutoplay();\n } else if (e.key === ' ') {\n e.preventDefault();\n this.togglePlayPause();\n }\n });\n },<\/p>\n<p> \/\/ Preload images\n preloadImages() {\n const imageUrls = [\n '\/wp-content\/themes\/yootheme-child\/assets\/images\/Moments\/1.jpg?v=2',\n '\/wp-content\/themes\/yootheme-child\/assets\/images\/Moments\/2.jpg?v=2',\n '\/wp-content\/themes\/yootheme-child\/assets\/images\/Moments\/3.jpg?v=2',\n '\/wp-content\/themes\/yootheme-child\/assets\/images\/Moments\/4.jpg?v=2'\n ];<\/p>\n<p> imageUrls.forEach(url => {\n const img = new Image();\n img.src = url;\n });\n }\n};<\/p>\n<p>\/\/ Initialize when DOM is ready\ndocument.addEventListener('DOMContentLoaded', () => {\n BifaGallery.init();\n});\n<\/script><\/p>\n<p><\/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+ Premium Academy Block<\/title>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n \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&family=Cairo:wght@300;400;500;600;700;800&family=Tajawal:wght@300;400;500;700;800&display=swap\" rel=\"stylesheet\">\n<style>\n\/* ========= \u0413\u041b\u041e\u0411\u0410\u041b\u042c\u041d\u042b\u0415 \u041f\u0415\u0420\u0415\u041c\u0415\u041d\u041d\u042b\u0415 BIFA+ ========= *\/\n:root {\n \/* \u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430 BIFA+ *\/\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 --bifa-gray-light: #F8F9FA;\n --bifa-gray: #6C757D;<\/p>\n<p> \/* \u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0448\u0440\u0438\u0444\u0442\u044b BIFA+ *\/\n --bifa-font-heading: 'Montserrat', 'Cairo', sans-serif;\n --bifa-font-body: 'Poppins', 'Tajawal', sans-serif;\n --bifa-font-arabic: 'Cairo', 'Tajawal', 'GE SS Text', sans-serif;<\/p>\n<p> \/* \u041f\u0440\u0435\u043c\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0442\u0435\u043d\u0438 \u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u044b *\/\n --bifa-shadow-premium: 0 25px 80px rgba(10, 31, 68, 0.15);\n --bifa-shadow-hover: 0 35px 100px rgba(10, 31, 68, 0.2);\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 ========= *\/\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}<\/p>\n<p>*, *::before, *::after {\n box-sizing: border-box;\n}<\/p>\n<p>html {\n scroll-behavior: smooth;\n}<\/p>\n<p>body {\n font-family: var(--bifa-font-body);\n overflow-x: hidden;\n background: var(--bifa-bright-white);\n text-rendering: optimizeLegibility;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n color: var(--bifa-soft-black);\n}<\/p>\n<p>\/* ========= ACADEMY SECTION WRAPPER ========= *\/\n.bifa-academy-section-wrapper {\n width: 100vw;\n position: relative;\n left: 50%;\n margin-left: -50vw;\n background: transparent; \/* \u0411\u0435\u0437 \u0444\u043e\u043d\u0430 *\/\n overflow: hidden;\n}<\/p>\n<p>\/* ========= MAIN ACADEMY SECTION ========= *\/\n.bifa-academy-section {\n padding: 100px 20px 80px;\n position: relative;\n background: transparent;\n}<\/p>\n<p>\/* ========= ANIMATED BACKGROUND ELEMENTS ========= *\/\n.bifa-academy-bg-animation {\n position: absolute;\n width: 100%;\n height: 100%;\n overflow: hidden;\n z-index: 1;\n top: 0;\n left: 0;\n}<\/p>\n<p>\/* \u0417\u043e\u043b\u043e\u0442\u044b\u0435 \u0447\u0430\u0441\u0442\u0438\u0446\u044b BIFA+ *\/\n.bifa-academy-particle {\n position: absolute;\n width: 3px;\n height: 3px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n border-radius: 50%;\n animation: floatAcademy 20s infinite linear;\n box-shadow: 0 0 6px rgba(212, 175, 55, 0.2);\n opacity: 0.25;\n will-change: transform;\n}<\/p>\n<p>@keyframes floatAcademy {\n 0% {\n transform: translateY(100vh) translateX(0) rotate(0deg);\n opacity: 0;\n }\n 10% { opacity: 0.3; }\n 90% { opacity: 0.3; }\n 100% {\n transform: translateY(-100vh) translateX(70px) rotate(360deg);\n opacity: 0;\n }\n}<\/p>\n<p>\/* \u041f\u043b\u0430\u0432\u0430\u044e\u0449\u0438\u0435 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0444\u0438\u0433\u0443\u0440\u044b BIFA+ *\/\n.bifa-floating-shape {\n position: absolute;\n border-radius: 50%;\n filter: blur(120px);\n animation: morphFloatAcademy 25s ease-in-out infinite;\n pointer-events: none;\n opacity: 0.4;\n}<\/p>\n<p>.bifa-shape-academy-1 {\n width: 400px;\n height: 400px;\n background: radial-gradient(circle at 30% 30%, rgba(212, 175, 55, 0.07), transparent);\n top: -200px;\n right: -200px;\n}<\/p>\n<p>.bifa-shape-academy-2 {\n width: 350px;\n height: 350px;\n background: radial-gradient(circle at 70% 70%, rgba(10, 31, 68, 0.05), transparent);\n bottom: -175px;\n left: -175px;\n animation-delay: 8s;\n}<\/p>\n<p>.bifa-shape-academy-3 {\n width: 300px;\n height: 300px;\n background: radial-gradient(circle at 50% 50%, rgba(29, 97, 67, 0.06), transparent);\n top: 40%;\n left: 60%;\n animation-delay: 16s;\n}<\/p>\n<p>@keyframes morphFloatAcademy {\n 0%, 100% { \n transform: translate(0, 0) scale(1) rotate(0deg);\n filter: blur(120px);\n }\n 25% { \n transform: translate(100px, -80px) scale(1.2) rotate(90deg);\n filter: blur(140px);\n }\n 50% { \n transform: translate(-80px, 100px) scale(0.8) rotate(180deg);\n filter: blur(100px);\n }\n 75% { \n transform: translate(-100px, -60px) scale(1.1) rotate(270deg);\n filter: blur(130px);\n }\n}<\/p>\n<p>\/* ========= CONTAINER ========= *\/\n.bifa-academy-container {\n max-width: 1200px;\n margin: 0 auto;\n position: relative;\n z-index: 10;\n}<\/p>\n<p>\/* ========= SECTION TITLE - Premium Style ========= *\/\n.bifa-section-title-wrapper {\n text-align: center;\n margin-bottom: 80px;\n}<\/p>\n<p>.bifa-academy-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), #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n position: relative;\n animation: fadeInUp 1s ease-out 0.3s both;\n line-height: 1.2;\n margin-bottom: 20px;\n text-transform: uppercase;\n letter-spacing: -0.5px;\n}<\/p>\n<p>.bifa-academy-section-title::after {\n content: '';\n position: absolute;\n bottom: -15px;\n left: 50%;\n transform: translateX(-50%);\n width: 0;\n height: 4px;\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700);\n animation: expandWidth 0.8s ease-out 1s both;\n border-radius: 2px;\n}<\/p>\n<p>\/* ========= VIDEO CONTAINER - Premium Style ========= *\/\n.bifa-academy-video {\n margin-bottom: 60px;\n animation: fadeInUp 1s ease-out 0.5s both;\n}<\/p>\n<p>.bifa-video-wrapper {\n position: relative;\n width: 100%;\n max-width: 900px;\n margin: 0 auto;\n padding-bottom: 50%;\n border-radius: 25px;\n overflow: hidden;\n box-shadow: var(--bifa-shadow-premium);\n background: var(--bifa-gray-light);\n transform: scale(0.95);\n animation: scaleIn 0.8s ease-out 0.5s forwards;\n border: 2px solid rgba(212, 175, 55, 0.1);\n}<\/p>\n<p>.bifa-video-wrapper video {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.3s ease;\n}<\/p>\n<p>.bifa-video-wrapper:hover video {\n transform: scale(1.02);\n}<\/p>\n<p>\/* Video overlay effects *\/\n.bifa-video-wrapper::before {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(135deg, \n transparent 0%, \n rgba(212, 175, 55, 0.1) 100%\n );\n opacity: 0;\n transition: opacity 0.3s ease;\n z-index: 1;\n pointer-events: none;\n}<\/p>\n<p>.bifa-video-wrapper:hover::before {\n opacity: 1;\n}<\/p>\n<p>\/* ========= CONTENT CARD - Premium Style ========= *\/\n.bifa-academy-content {\n background: var(--bifa-bright-white);\n border-radius: 25px;\n padding: 60px 50px;\n box-shadow: var(--bifa-shadow-premium);\n animation: fadeInUp 1s ease-out 0.8s both;\n max-width: 100%;\n overflow: hidden;\n border: 1px solid rgba(212, 175, 55, 0.1);\n backdrop-filter: blur(10px);\n}<\/p>\n<p>.bifa-content-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 60px;\n margin-bottom: 50px;\n}<\/p>\n<p>.bifa-content-block {\n opacity: 0;\n animation: fadeInUp 0.8s ease-out forwards;\n}<\/p>\n<p>.bifa-content-block:nth-child(1) {\n animation-delay: 1s;\n}<\/p>\n<p>.bifa-content-block:nth-child(2) {\n animation-delay: 1.2s;\n}<\/p>\n<p>.bifa-content-block h3 {\n font-family: var(--bifa-font-heading);\n font-size: 1.8rem;\n font-weight: 800;\n color: var(--bifa-deep-navy);\n margin-bottom: 25px;\n position: relative;\n padding-left: 30px;\n line-height: 1.3;\n text-rendering: optimizeLegibility;\n}<\/p>\n<p>.bifa-content-block h3::before {\n content: '';\n position: absolute;\n left: 0;\n top: 50%;\n transform: translateY(-50%);\n width: 5px;\n height: 100%;\n max-height: 40px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n border-radius: 3px;\n box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);\n}<\/p>\n<p>.bifa-content-block p {\n font-family: var(--bifa-font-body);\n font-size: 1.1rem;\n line-height: 1.8;\n color: #4a5568;\n margin-bottom: 25px;\n text-align: left;\n max-width: 100%;\n}<\/p>\n<p>\/* ========= FEATURES LIST - Premium Style ========= *\/\n.bifa-features-list {\n list-style: none;\n margin-top: 30px;\n display: flex;\n flex-direction: column;\n gap: 20px;\n padding: 0;\n}<\/p>\n<p>.bifa-features-list li {\n display: flex;\n align-items: flex-start;\n font-family: var(--bifa-font-body);\n font-size: 1.05rem;\n color: var(--bifa-soft-black);\n line-height: 1.6;\n transition: var(--bifa-transition);\n opacity: 0;\n animation: slideIn 0.5s ease-out forwards;\n padding: 15px;\n background: rgba(248, 249, 250, 0.5);\n border-radius: 15px;\n border: 1px solid rgba(212, 175, 55, 0.1);\n}<\/p>\n<p>.bifa-features-list li:nth-child(1) {\n animation-delay: 1.2s;\n}<\/p>\n<p>.bifa-features-list li:nth-child(2) {\n animation-delay: 1.3s;\n}<\/p>\n<p>.bifa-features-list li:nth-child(3) {\n animation-delay: 1.4s;\n}<\/p>\n<p>.bifa-content-block:nth-child(2) .bifa-features-list li:nth-child(1) {\n animation-delay: 1.4s;\n}<\/p>\n<p>.bifa-content-block:nth-child(2) .bifa-features-list li:nth-child(2) {\n animation-delay: 1.5s;\n}<\/p>\n<p>.bifa-content-block:nth-child(2) .bifa-features-list li:nth-child(3) {\n animation-delay: 1.6s;\n}<\/p>\n<p>.bifa-features-list li:hover {\n color: var(--bifa-deep-navy);\n background: rgba(212, 175, 55, 0.1);\n border-color: rgba(212, 175, 55, 0.3);\n transform: translateX(5px);\n}<\/p>\n<p>.bifa-feature-icon {\n flex-shrink: 0;\n width: 45px;\n height: 45px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n border-radius: 15px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 18px;\n transition: var(--bifa-transition);\n box-shadow: var(--bifa-shadow-gold);\n}<\/p>\n<p>.bifa-feature-icon svg {\n width: 24px;\n height: 24px;\n fill: var(--bifa-deep-navy);\n stroke: var(--bifa-deep-navy);\n stroke-width: 1.5;\n}<\/p>\n<p>.bifa-features-list li:hover .bifa-feature-icon {\n transform: scale(1.1) rotate(5deg);\n box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);\n}<\/p>\n<p>.bifa-feature-text {\n flex: 1;\n padding-top: 10px;\n font-weight: 500;\n}<\/p>\n<p>\/* ========= CALL TO ACTION - Premium Style ========= *\/\n.bifa-academy-cta {\n background: linear-gradient(135deg, var(--bifa-deep-navy), #162e5a);\n color: var(--bifa-bright-white);\n padding: 50px 40px;\n border-radius: 25px;\n text-align: center;\n margin-top: 50px;\n box-shadow: var(--bifa-shadow-premium);\n animation: fadeInUp 1s ease-out 1.4s both;\n position: relative;\n overflow: hidden;\n border: 2px solid rgba(212, 175, 55, 0.2);\n}<\/p>\n<p>.bifa-academy-cta::before {\n content: '';\n position: absolute;\n top: -50%;\n right: -50%;\n width: 100%;\n height: 100%;\n background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 60%);\n animation: float 8s ease-in-out infinite;\n}<\/p>\n<p>.bifa-cta-title {\n font-family: var(--bifa-font-heading);\n font-size: 2rem;\n font-weight: 800;\n margin-bottom: 20px;\n line-height: 1.3;\n position: relative;\n z-index: 1;\n background: linear-gradient(135deg, var(--bifa-bright-white), #f0f0f0);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n}<\/p>\n<p>.bifa-cta-text {\n font-family: var(--bifa-font-body);\n font-size: 1.2rem;\n line-height: 1.6;\n max-width: 800px;\n margin: 0 auto 35px;\n position: relative;\n z-index: 1;\n color: rgba(255, 255, 255, 0.9);\n}<\/p>\n<p>.bifa-cta-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 12px;\n padding: 18px 45px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n color: var(--bifa-deep-navy);\n text-decoration: none;\n border-radius: 50px;\n font-family: var(--bifa-font-heading);\n font-weight: 700;\n font-size: 1.1rem;\n transition: var(--bifa-transition);\n box-shadow: var(--bifa-shadow-gold);\n position: relative;\n overflow: hidden;\n z-index: 1;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}<\/p>\n<p>.bifa-cta-button::before {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);\n transition: left 0.5s ease;\n z-index: -1;\n}<\/p>\n<p>.bifa-cta-button:hover {\n transform: translateY(-3px);\n box-shadow: 0 8px 30px rgba(212, 175, 55, 0.4);\n background: linear-gradient(135deg, #ffd700, var(--bifa-heritage-gold));\n}<\/p>\n<p>.bifa-cta-button:hover::before {\n left: 100%;\n}<\/p>\n<p>\/* ========= ANIMATIONS ========= *\/\n@keyframes slideIn {\n to {\n opacity: 1;\n }\n}<\/p>\n<p>@keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>@keyframes expandWidth {\n from {\n width: 0;\n }\n to {\n width: 120px;\n }\n}<\/p>\n<p>@keyframes scaleIn {\n to {\n transform: scale(1);\n }\n}<\/p>\n<p>@keyframes float {\n 0%, 100% {\n transform: translate(0, 0);\n }\n 50% {\n transform: translate(-20px, 20px);\n }\n}<\/p>\n<p>\/* ========= RESPONSIVE ========= *\/\n@media (max-width: 968px) {\n .bifa-content-grid {\n grid-template-columns: 1fr;\n gap: 50px;\n }<\/p>\n<p> .bifa-video-wrapper {\n padding-bottom: 56.25%;\n }<\/p>\n<p> .bifa-content-block {\n animation-delay: 1s !important;\n }<\/p>\n<p> .bifa-features-list li {\n animation-delay: 0s !important;\n animation: slideIn 0.5s ease-out forwards;\n }\n}<\/p>\n<p>@media (max-width: 768px) {\n .bifa-academy-section {\n padding: 80px 20px 60px;\n }<\/p>\n<p> .bifa-academy-content {\n padding: 40px 30px;\n }<\/p>\n<p> .bifa-content-block h3 {\n font-size: 1.6rem;\n padding-left: 25px;\n }<\/p>\n<p> .bifa-academy-section-title {\n font-size: 2rem;\n }<\/p>\n<p> .bifa-feature-icon {\n width: 40px;\n height: 40px;\n margin-right: 15px;\n }<\/p>\n<p> .bifa-feature-icon svg {\n width: 20px;\n height: 20px;\n }<\/p>\n<p> .bifa-content-grid {\n gap: 40px;\n }<\/p>\n<p> .bifa-academy-cta {\n padding: 40px 30px;\n }<\/p>\n<p> .bifa-cta-title {\n font-size: 1.7rem;\n }<\/p>\n<p> .bifa-cta-text {\n font-size: 1.1rem;\n }\n}<\/p>\n<p>@media (max-width: 480px) {\n .bifa-academy-section {\n padding: 60px 15px 50px;\n }<\/p>\n<p> .bifa-academy-content {\n padding: 30px 20px;\n }<\/p>\n<p> .bifa-academy-section-title {\n font-size: 1.8rem;\n }<\/p>\n<p> .bifa-content-block h3 {\n font-size: 1.4rem;\n padding-left: 20px;\n }<\/p>\n<p> .bifa-content-block p {\n font-size: 1rem;\n }<\/p>\n<p> .bifa-cta-title {\n font-size: 1.5rem;\n }<\/p>\n<p> .bifa-cta-text {\n font-size: 1rem;\n }<\/p>\n<p> .bifa-cta-button {\n padding: 15px 35px;\n font-size: 1rem;\n }<\/p>\n<p> .bifa-feature-icon {\n width: 35px;\n height: 35px;\n margin-right: 12px;\n }<\/p>\n<p> .bifa-feature-icon svg {\n width: 18px;\n height: 18px;\n }<\/p>\n<p> .bifa-features-list li {\n font-size: 0.95rem;\n padding: 12px;\n }<\/p>\n<p> .bifa-features-list {\n gap: 15px;\n }<\/p>\n<p> .bifa-academy-cta {\n padding: 35px 25px;\n }\n}\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"bifa-academy-section-wrapper\">\n <\/p>\n<section class=\"bifa-academy-section\">\n <\/p>\n<div class=\"bifa-academy-bg-animation\">\n <\/p>\n<div class=\"bifa-floating-shape bifa-shape-academy-1\"><\/div>\n<div class=\"bifa-floating-shape bifa-shape-academy-2\"><\/div>\n<div class=\"bifa-floating-shape bifa-shape-academy-3\"><\/div>\n<p> \n <\/div>\n<div class=\"bifa-academy-container\">\n<div class=\"bifa-section-title-wrapper\">\n<h2 class=\"bifa-academy-section-title\">Academia BIFA+: Futuro do Futebol<\/h2>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"bifa-academy-video\">\n<div class=\"bifa-video-wrapper\">\n <video autoplay loop muted playsinline><source src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Futuristic_Classroom_Video_Ready.webm\" type=\"video\/webm\"><source src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Futuristic_Classroom_Video_Ready.mp4\" type=\"video\/mp4\"><\/video>\n <\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"bifa-academy-content\">\n<div class=\"bifa-content-grid\">\n<div class=\"bifa-content-block\">\n<h3>Sistema de treinamento revolucion\u00e1rio<\/h3>\n<p>\n BIFA+ creates a revolutionary system for training footballers, with the ability to analyze every aspect of the game<br \/>\n by both top-tier coaches and artificial intelligence. Our academy uses<br \/>\n machine learning to create individual development programs that take into account the unique characteristics of each player.\n <\/p>\n<ul class=\"bifa-features-list\">\n<li>\n <span class=\"bifa-feature-icon\"><br \/>\n <svg viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\">\n <path d=\"M21 10.12h-6.78l2.74-2.82c-2.73-2.7-7.15-2.8-9.88-.1-2.73 2.71-2.73 7.08 0 9.79 2.73 2.71 7.15 2.71 9.88 0C18.32 15.65 19 14.08 19 12.1h2c0 1.98-.88 4.55-2.64 6.29-3.51 3.48-9.21 3.48-12.72 0-3.5-3.47-3.53-9.11-.02-12.58 3.51-3.47 9.14-3.47 12.65 0L21 3v7.12z\"\/>\n <circle cx=\"12\" cy=\"12\" r=\"3\"\/>\n <\/svg><br \/>\n <\/span><br \/>\n <span class=\"bifa-feature-text\">An\u00e1lise inteligente dos dados do jogo<\/span>\n <\/li>\n<li>\n <span class=\"bifa-feature-icon\"><br \/>\n <svg viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\n <circle cx=\"12\" cy=\"12\" r=\"3\"\/>\n <path d=\"M12 2v3M12 19v3M2 12h3M19 12h3\"\/>\n <\/svg><br \/>\n <\/span><br \/>\n <span class=\"bifa-feature-text\">Programas de treinamento adaptativo<\/span>\n <\/li>\n<li>\n <span class=\"bifa-feature-icon\"><br \/>\n <svg viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\">\n <path d=\"M3.5 18.5L9 13l4 4L20.5 6\"\/>\n <path d=\"M20.5 6h-5M20.5 6v5\"\/>\n <\/svg><br \/>\n <\/span><br \/>\n <span class=\"bifa-feature-text\">Monitoramento cont\u00ednuo do progresso<\/span>\n <\/li>\n<\/ul><\/div>\n<div class=\"bifa-content-block\">\n<h3>An\u00e1lise inteligente para treinadores<\/h3>\n<p>\n The artificial intelligence system processes training and match data in real-time,<br \/>\n providing coaches with detailed information about player progress, tactical patterns and areas for improvement.<br \/>\n Personalized dashboards help make decisions based on objective data.\n <\/p>\n<ul class=\"bifa-features-list\">\n<li>\n <span class=\"bifa-feature-icon\"><br \/>\n <svg viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\">\n <path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\"\/>\n <\/svg><br \/>\n <\/span><br \/>\n <span class=\"bifa-feature-text\">An\u00e1lise de desempenho em tempo real<\/span>\n <\/li>\n<li>\n <span class=\"bifa-feature-icon\"><br \/>\n <svg viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\">\n <circle cx=\"12\" cy=\"8\" r=\"5\"\/>\n <path d=\"M20 21a8 8 0 1 0-16 0\"\/>\n <circle cx=\"8\" cy=\"19\" r=\"1\"\/>\n <circle cx=\"12\" cy=\"19\" r=\"1\"\/>\n <circle cx=\"16\" cy=\"19\" r=\"1\"\/>\n <\/svg><br \/>\n <\/span><br \/>\n <span class=\"bifa-feature-text\">Tomada de decis\u00e3o orientada por dados<\/span>\n <\/li>\n<li>\n <span class=\"bifa-feature-icon\"><br \/>\n <svg viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"14\" rx=\"2\"\/>\n <path d=\"M7 21h10M12 17v4\"\/>\n <path d=\"M8 8h8M8 12h5\"\/>\n <\/svg><br \/>\n <\/span><br \/>\n <span class=\"bifa-feature-text\">Pain\u00e9is de treinamento personalizados<\/span>\n <\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"bifa-academy-cta\">\n<h3 class=\"bifa-cta-title\">Junte-se \u00e0 revolu\u00e7\u00e3o do futebol movida a IA<\/h3>\n<p class=\"bifa-cta-text\">\n Experience the future of football training with BIFA+. Our cutting-edge AI technology<br \/>\n combined with world-class coaching creates unprecedented opportunities for player development.\n <\/p>\n<p> <a href=\"https:\/\/bifa.ai\/academy-ai\/\" class=\"bifa-cta-button\"><br \/>\n <span>Descubra a Academia<\/span><br \/>\n <svg width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M5 12H19M19 12L12 5M19 12L12 19\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg><br \/>\n <\/a>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<\/div>\n<p><script>\n\/\/ BIFA+ Premium Academy Module\nconst BifaAcademy = {\n \/\/ Configuration\n config: {\n particleCount: 10,\n animationDelay: 100\n },<\/p>\n<p> \/\/ Initialize\n init() {\n this.createParticles();\n this.setupVideoOptimization();\n this.setupIntersectionObserver();\n },<\/p>\n<p> \/\/ Create golden particles\n createParticles() {\n const particlesContainer = document.querySelector('.bifa-academy-bg-animation');\n if (!particlesContainer) return;<\/p>\n<p> for (let i = 0; i < this.config.particleCount; i++) {\n const particle = document.createElement('div');\n particle.className = 'bifa-academy-particle';\n particle.style.left = Math.random() * 100 + '%';\n particle.style.animationDelay = Math.random() * 18 + 's';\n particle.style.animationDuration = (16 + Math.random() * 8) + '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\n \/\/ Setup video optimization\n setupVideoOptimization() {\n const video = document.querySelector('.bifa-video-wrapper video');\n if (!video) return;\n\n \/\/ Ensure video plays smoothly\n video.addEventListener('loadstart', () => {\n video.play().catch(e => {\n console.log('Video autoplay prevented:', e);\n });\n });<\/p>\n<p> \/\/ Handle video errors gracefully\n video.addEventListener('error', (e) => {\n console.warn('Video loading error:', e);\n \/\/ Could add fallback image here\n });<\/p>\n<p> \/\/ Optimize performance\n video.addEventListener('loadeddata', () => {\n video.currentTime = 0;\n });\n },<\/p>\n<p> \/\/ Setup intersection observer for animations\n setupIntersectionObserver() {\n if (!window.IntersectionObserver) return;<\/p>\n<p> const observerOptions = {\n threshold: 0.1,\n rootMargin: '50px 0px'\n };<\/p>\n<p> const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('animate-in');\n }\n });\n }, observerOptions);<\/p>\n<p> \/\/ Observe animated elements\n const animatedElements = document.querySelectorAll(\n '.bifa-content-block, .bifa-features-list li, .bifa-academy-cta'\n );<\/p>\n<p> animatedElements.forEach(el => {\n observer.observe(el);\n });\n },<\/p>\n<p> \/\/ Utility method for smooth scrolling to elements\n scrollToSection(targetId) {\n const element = document.getElementById(targetId);\n if (element) {\n element.scrollIntoView({\n behavior: 'smooth',\n block: 'start'\n });\n }\n }\n};<\/p>\n<p>\/\/ Initialize when DOM is ready\ndocument.addEventListener('DOMContentLoaded', () => {\n BifaAcademy.init();\n});<\/p>\n<p>\/\/ Performance optimization - pause animations when not visible\ndocument.addEventListener('visibilitychange', () => {\n const particles = document.querySelectorAll('.bifa-academy-particle');\n const shapes = document.querySelectorAll('.bifa-floating-shape');<\/p>\n<p> if (document.hidden) {\n particles.forEach(p => p.style.animationPlayState = 'paused');\n shapes.forEach(s => s.style.animationPlayState = 'paused');\n } else {\n particles.forEach(p => p.style.animationPlayState = 'running');\n shapes.forEach(s => s.style.animationPlayState = 'running');\n }\n});\n<\/script><\/p>\n<p><\/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+ Featured Stories \/ Ambassadors Block – Dynamic<\/title>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n \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&family=Cairo:wght@300;400;500;600;700;800&family=Tajawal:wght@300;400;500;700;800&display=swap\" rel=\"stylesheet\">\n<style>\n\/* ========= \u0413\u041b\u041e\u0411\u0410\u041b\u042c\u041d\u042b\u0415 \u041f\u0415\u0420\u0415\u041c\u0415\u041d\u041d\u042b\u0415 BIFA+ ========= *\/\n:root {\n \/* \u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430 BIFA+ *\/\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 --bifa-gray-light: #F8F9FA;\n --bifa-gray: #6C757D;<\/p>\n<p> \/* \u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0448\u0440\u0438\u0444\u0442\u044b BIFA+ *\/\n --bifa-font-heading: 'Montserrat', 'Cairo', sans-serif;\n --bifa-font-body: 'Poppins', 'Tajawal', sans-serif;\n --bifa-font-arabic: 'Cairo', 'Tajawal', 'GE SS Text', sans-serif;<\/p>\n<p> \/* \u041f\u0440\u0435\u043c\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0442\u0435\u043d\u0438 \u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u044b *\/\n --bifa-shadow-premium: 0 25px 80px rgba(10, 31, 68, 0.15);\n --bifa-shadow-hover: 0 35px 100px rgba(10, 31, 68, 0.2);\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 ========= *\/\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}<\/p>\n<p>html {\n scroll-behavior: smooth;\n}<\/p>\n<p>body {\n font-family: var(--bifa-font-body);\n overflow-x: hidden;\n background: var(--bifa-bright-white);\n text-rendering: optimizeLegibility;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n color: var(--bifa-soft-black);\n}<\/p>\n<p>\/* ========= LOADING STATE ========= *\/\n.bifa-loading-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 400px;\n gap: 20px;\n}<\/p>\n<p>.bifa-loading-spinner {\n width: 60px;\n height: 60px;\n border: 4px solid rgba(212, 175, 55, 0.1);\n border-top: 4px solid var(--bifa-heritage-gold);\n border-radius: 50%;\n animation: spin 1s linear infinite;\n}<\/p>\n<p>@keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}<\/p>\n<p>.bifa-loading-text {\n font-family: var(--bifa-font-heading);\n font-size: 1.2rem;\n color: var(--bifa-gray);\n animation: pulse 1.5s ease-in-out infinite;\n}<\/p>\n<p>@keyframes pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.5; }\n}<\/p>\n<p>\/* ========= ERROR STATE ========= *\/\n.bifa-error-container {\n background: #fff3cd;\n border: 2px solid #ffc107;\n border-radius: 15px;\n padding: 30px;\n margin: 40px 20px;\n text-align: center;\n}<\/p>\n<p>.bifa-error-icon {\n font-size: 3rem;\n margin-bottom: 20px;\n}<\/p>\n<p>.bifa-error-message {\n font-family: var(--bifa-font-heading);\n font-size: 1.3rem;\n color: #856404;\n margin-bottom: 15px;\n}<\/p>\n<p>.bifa-error-details {\n font-family: var(--bifa-font-body);\n color: #856404;\n margin-bottom: 20px;\n}<\/p>\n<p>.bifa-retry-button {\n display: inline-block;\n padding: 12px 30px;\n background: var(--bifa-heritage-gold);\n color: var(--bifa-deep-navy);\n border: none;\n border-radius: 50px;\n font-family: var(--bifa-font-heading);\n font-weight: 700;\n cursor: pointer;\n transition: var(--bifa-transition);\n}<\/p>\n<p>.bifa-retry-button:hover {\n transform: translateY(-2px);\n box-shadow: var(--bifa-shadow-gold);\n}<\/p>\n<p>\/* ========= EMPTY STATE ========= *\/\n.bifa-empty-container {\n text-align: center;\n padding: 60px 20px;\n}<\/p>\n<p>.bifa-empty-icon {\n font-size: 4rem;\n color: var(--bifa-gray);\n margin-bottom: 20px;\n}<\/p>\n<p>.bifa-empty-message {\n font-family: var(--bifa-font-heading);\n font-size: 1.5rem;\n color: var(--bifa-gray);\n margin-bottom: 10px;\n}<\/p>\n<p>.bifa-empty-submessage {\n font-family: var(--bifa-font-body);\n color: var(--bifa-gray);\n margin-bottom: 30px;\n}<\/p>\n<p>\/* ========= AMBASSADORS SECTION WRAPPER ========= *\/\n.bifa-ambassadors-section-wrapper {\n width: 100vw;\n position: relative;\n left: 50%;\n margin-left: -50vw;\n background: transparent;\n overflow: hidden;\n}<\/p>\n<p>\/* ========= MAIN AMBASSADORS SECTION ========= *\/\n.bifa-ambassadors-section {\n padding: 100px 20px 100px;\n position: relative;\n background: transparent;\n}<\/p>\n<p>\/* ========= ANIMATED BACKGROUND ELEMENTS ========= *\/\n.bifa-ambassadors-bg-animation {\n position: absolute;\n width: 100%;\n height: 100%;\n overflow: hidden;\n z-index: 1;\n top: 0;\n left: 0;\n}<\/p>\n<p>\/* \u0417\u043e\u043b\u043e\u0442\u044b\u0435 \u0447\u0430\u0441\u0442\u0438\u0446\u044b BIFA+ *\/\n.bifa-ambassadors-particle {\n position: absolute;\n width: 3px;\n height: 3px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n border-radius: 50%;\n animation: floatAmbassadors 20s infinite linear;\n box-shadow: 0 0 6px rgba(212, 175, 55, 0.2);\n opacity: 0.25;\n will-change: transform;\n}<\/p>\n<p>@keyframes floatAmbassadors {\n 0% {\n transform: translateY(100vh) translateX(0) rotate(0deg);\n opacity: 0;\n }\n 10% { opacity: 0.3; }\n 90% { opacity: 0.3; }\n 100% {\n transform: translateY(-100vh) translateX(70px) rotate(360deg);\n opacity: 0;\n }\n}<\/p>\n<p>\/* \u041f\u043b\u0430\u0432\u0430\u044e\u0449\u0438\u0435 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0444\u0438\u0433\u0443\u0440\u044b BIFA+ *\/\n.bifa-floating-shape-amb {\n position: absolute;\n border-radius: 50%;\n filter: blur(120px);\n animation: morphFloatAmbassadors 25s ease-in-out infinite;\n pointer-events: none;\n opacity: 0.4;\n}<\/p>\n<p>.bifa-shape-ambassadors-1 {\n width: 400px;\n height: 400px;\n background: radial-gradient(circle at 30% 30%, rgba(212, 175, 55, 0.07), transparent);\n top: -200px;\n right: -200px;\n}<\/p>\n<p>.bifa-shape-ambassadors-2 {\n width: 350px;\n height: 350px;\n background: radial-gradient(circle at 70% 70%, rgba(10, 31, 68, 0.05), transparent);\n bottom: -175px;\n left: -175px;\n animation-delay: 8s;\n}<\/p>\n<p>.bifa-shape-ambassadors-3 {\n width: 300px;\n height: 300px;\n background: radial-gradient(circle at 50% 50%, rgba(29, 97, 67, 0.06), transparent);\n top: 40%;\n left: 60%;\n animation-delay: 16s;\n}<\/p>\n<p>@keyframes morphFloatAmbassadors {\n 0%, 100% { \n transform: translate(0, 0) scale(1) rotate(0deg);\n filter: blur(120px);\n }\n 25% { \n transform: translate(100px, -80px) scale(1.2) rotate(90deg);\n filter: blur(140px);\n }\n 50% { \n transform: translate(-80px, 100px) scale(0.8) rotate(180deg);\n filter: blur(100px);\n }\n 75% { \n transform: translate(-100px, -60px) scale(1.1) rotate(270deg);\n filter: blur(130px);\n }\n}<\/p>\n<p>\/* ========= CONTAINER ========= *\/\n.bifa-ambassadors-container {\n max-width: 1200px;\n margin: 0 auto;\n position: relative;\n z-index: 10;\n}<\/p>\n<p>\/* ========= SECTION TITLE - Premium Style ========= *\/\n.bifa-ambassadors-title-wrapper {\n text-align: center;\n margin-bottom: 80px;\n}<\/p>\n<p>.bifa-ambassadors-section-title {\n font-family: var(--bifa-font-heading) !important;\n font-size: clamp(2.5rem, 4vw, 3.5rem);\n font-weight: 900 !important;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent !important;\n position: relative;\n animation: fadeInUp 1s ease-out 0.3s both;\n line-height: 1.2;\n margin-bottom: 20px;\n text-transform: uppercase;\n letter-spacing: -0.5px;\n text-shadow: 0 2px 4px rgba(212, 175, 55, 0.1);\n}<\/p>\n<p>.bifa-ambassadors-section-title::after {\n content: '';\n position: absolute;\n bottom: -15px;\n left: 50%;\n transform: translateX(-50%);\n width: 0;\n height: 4px;\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700);\n animation: expandWidth 0.8s ease-out 1s both;\n border-radius: 2px;\n}<\/p>\n<p>.bifa-ambassadors-subtitle {\n font-family: var(--bifa-font-body) !important;\n font-size: 1.3rem;\n font-weight: 600 !important;\n color: var(--bifa-gray) !important;\n margin-top: 30px;\n animation: fadeInUp 1s ease-out 0.5s both;\n line-height: 1.6;\n max-width: 700px;\n margin-left: auto;\n margin-right: auto;\n}<\/p>\n<p>\/* ========= JOIN US BUTTONS SECTION ========= *\/\n.bifa-join-buttons-section {\n text-align: center;\n margin: 60px auto;\n padding: 40px 20px;\n background: linear-gradient(135deg, rgba(212, 175, 55, 0.05), transparent);\n border-radius: 20px;\n animation: fadeInUp 1s ease-out 0.7s both;\n max-width: 100%;\n}<\/p>\n<p>.bifa-join-buttons-container {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 20px;\n flex-wrap: wrap;\n margin: 30px auto 0;\n max-width: 100%;\n}<\/p>\n<p>.bifa-join-button {\n all: initial;\n font-family: 'Montserrat', sans-serif !important;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n padding: 18px 35px !important;\n background: linear-gradient(135deg, #0A1F44, #162e5a) !important;\n color: #FFFFFF !important;\n text-decoration: none !important;\n border-radius: 50px;\n font-weight: 700 !important;\n font-size: 1rem !important;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n box-shadow: 0 15px 40px rgba(10, 31, 68, 0.2), \n 0 5px 15px rgba(10, 31, 68, 0.15);\n position: relative;\n overflow: hidden;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n border: 2px solid transparent !important;\n cursor: pointer !important;\n white-space: nowrap;\n text-align: center;\n box-sizing: border-box;\n}<\/p>\n<p>.bifa-join-button:hover {\n transform: translateY(-3px) scale(1.02);\n box-shadow: 0 20px 50px rgba(10, 31, 68, 0.3), \n 0 10px 20px rgba(10, 31, 68, 0.2);\n background: linear-gradient(135deg, #162e5a, #0A1F44) !important;\n border-color: rgba(212, 175, 55, 0.3) !important;\n}<\/p>\n<p>.bifa-join-button::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0;\n height: 0;\n background: radial-gradient(circle, rgba(212, 175, 55, 0.3), transparent);\n transition: all 0.5s ease;\n transform: translate(-50%, -50%);\n}<\/p>\n<p>.bifa-join-button:hover::before {\n width: 100%;\n height: 100%;\n}<\/p>\n<p>.bifa-join-button svg {\n width: 18px;\n height: 18px;\n fill: currentColor;\n flex-shrink: 0;\n}<\/p>\n<p>\/* ========= AMBASSADORS GRID ========= *\/\n.bifa-ambassadors-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 40px;\n margin-bottom: 60px;\n position: relative;\n transition: max-height 0.6s ease-out;\n}<\/p>\n<p>\/* Hide cards beyond the first 3 by default *\/\n.bifa-ambassador-card:nth-child(n+4) {\n display: none;\n opacity: 0;\n}<\/p>\n<p>\/* Show all cards when expanded *\/\n.bifa-ambassadors-grid.expanded .bifa-ambassador-card:nth-child(n+4) {\n display: block;\n animation: fadeInUp 0.8s ease-out forwards;\n}<\/p>\n<p>\/* Stagger animations for expanded cards *\/\n.bifa-ambassadors-grid.expanded .bifa-ambassador-card:nth-child(4) {\n animation-delay: 0.1s;\n}<\/p>\n<p>.bifa-ambassadors-grid.expanded .bifa-ambassador-card:nth-child(5) {\n animation-delay: 0.2s;\n}<\/p>\n<p>.bifa-ambassadors-grid.expanded .bifa-ambassador-card:nth-child(6) {\n animation-delay: 0.3s;\n}<\/p>\n<p>\/* ========= AMBASSADOR CARD - Premium Style ========= *\/\n.bifa-ambassador-card {\n background: var(--bifa-bright-white) !important;\n border-radius: 25px;\n overflow: hidden;\n box-shadow: var(--bifa-shadow-premium);\n transition: var(--bifa-transition);\n animation: fadeInUp 1s ease-out both;\n border: 1px solid rgba(212, 175, 55, 0.1);\n position: relative;\n cursor: pointer;\n text-decoration: none;\n color: inherit;\n display: block;\n}<\/p>\n<p>.bifa-ambassador-card:nth-child(1) {\n animation-delay: 0.8s;\n}<\/p>\n<p>.bifa-ambassador-card:nth-child(2) {\n animation-delay: 1s;\n}<\/p>\n<p>.bifa-ambassador-card:nth-child(3) {\n animation-delay: 1.2s;\n}<\/p>\n<p>.bifa-ambassador-card:hover {\n transform: translateY(-10px);\n box-shadow: var(--bifa-shadow-hover);\n border-color: rgba(212, 175, 55, 0.3);\n}<\/p>\n<p>\/* Ambassador Image Container *\/\n.bifa-ambassador-image {\n position: relative;\n width: 100%;\n height: 300px;\n overflow: hidden;\n background: linear-gradient(135deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);\n background-size: 200% 100%;\n}<\/p>\n<p>.bifa-ambassador-image.loading {\n animation: loading 2s infinite linear;\n}<\/p>\n<p>.bifa-ambassador-image img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n transition: transform 0.5s ease;\n}<\/p>\n<p>.bifa-ambassador-card:hover .bifa-ambassador-image img {\n transform: scale(1.1);\n}<\/p>\n<p>\/* No image placeholder *\/\n.bifa-ambassador-no-image {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(10, 31, 68, 0.05));\n}<\/p>\n<p>.bifa-ambassador-no-image svg {\n width: 80px;\n height: 80px;\n color: var(--bifa-gray);\n opacity: 0.5;\n}<\/p>\n<p>\/* Gold Overlay Effect *\/\n.bifa-ambassador-image::after {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(180deg, \n transparent 50%, \n rgba(10, 31, 68, 0.7) 100%\n );\n opacity: 0;\n transition: opacity 0.3s ease;\n}<\/p>\n<p>.bifa-ambassador-card:hover .bifa-ambassador-image::after {\n opacity: 1;\n}<\/p>\n<p>\/* Country Flag *\/\n.bifa-ambassador-country {\n position: absolute;\n top: 20px;\n left: 20px;\n font-size: 32px;\n z-index: 2;\n background: rgba(255, 255, 255, 0.9);\n width: 48px;\n height: 48px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}<\/p>\n<p>\/* Ambassador Content *\/\n.bifa-ambassador-content {\n padding: 35px 30px;\n position: relative;\n}<\/p>\n<p>.bifa-ambassador-name {\n font-family: var(--bifa-font-heading) !important;\n font-size: 1.5rem;\n font-weight: 900 !important;\n color: var(--bifa-deep-navy) !important;\n margin-bottom: 8px;\n line-height: 1.2;\n transition: color 0.3s ease;\n}<\/p>\n<p>.bifa-ambassador-card:hover .bifa-ambassador-name {\n color: var(--bifa-heritage-gold) !important;\n}<\/p>\n<p>.bifa-ambassador-role {\n font-family: var(--bifa-font-body) !important;\n font-size: 1rem;\n font-weight: 700 !important;\n color: var(--bifa-heritage-gold) !important;\n margin-bottom: 8px;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}<\/p>\n<p>.bifa-ambassador-organization {\n font-family: var(--bifa-font-body) !important;\n font-size: 0.95rem;\n font-weight: 500 !important;\n color: var(--bifa-gray) !important;\n margin-bottom: 20px;\n}<\/p>\n<p>.bifa-ambassador-quote {\n font-family: var(--bifa-font-body) !important;\n font-size: 1.05rem;\n font-weight: 500 !important;\n line-height: 1.7;\n color: #4a5568 !important;\n font-style: italic;\n position: relative;\n padding-left: 25px;\n}<\/p>\n<p>.bifa-ambassador-quote::before {\n content: '\"';\n position: absolute;\n left: 0;\n top: -5px;\n font-size: 2.5rem;\n color: var(--bifa-heritage-gold);\n font-family: var(--bifa-font-heading);\n font-weight: 800;\n opacity: 0.3;\n}<\/p>\n<p>\/* Gold Badge for Special Ambassadors *\/\n.bifa-ambassador-badge {\n position: absolute;\n top: 20px;\n right: 20px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n color: var(--bifa-deep-navy);\n padding: 8px 16px;\n border-radius: 50px;\n font-family: var(--bifa-font-heading);\n font-size: 0.75rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n box-shadow: var(--bifa-shadow-gold);\n z-index: 2;\n}<\/p>\n<p>\/* Featured badge style *\/\n.bifa-ambassador-badge.featured {\n background: linear-gradient(135deg, #ff6b6b, #ff4757);\n color: white;\n}<\/p>\n<p>\/* ========= VIEW ALL BUTTON ========= *\/\n.bifa-ambassadors-cta {\n text-align: center;\n margin-top: 60px;\n animation: fadeInUp 1s ease-out 1.2s both;\n}<\/p>\n<p>.bifa-view-all-button {\n all: initial;\n font-family: 'Montserrat', sans-serif !important;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 12px;\n padding: 20px 50px !important;\n background: linear-gradient(135deg, #0A1F44, #162e5a) !important;\n color: #FFFFFF !important;\n text-decoration: none !important;\n border-radius: 50px;\n font-weight: 800 !important;\n font-size: 1.15rem !important;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n box-shadow: 0 25px 60px rgba(10, 31, 68, 0.3), \n 0 10px 20px rgba(10, 31, 68, 0.2),\n inset 0 -2px 4px rgba(0, 0, 0, 0.1);\n position: relative;\n overflow: hidden;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n border: 2px solid rgba(212, 175, 55, 0.2) !important;\n cursor: pointer !important;\n}<\/p>\n<p>.bifa-view-all-button:hover {\n transform: translateY(-3px);\n box-shadow: 0 30px 80px rgba(10, 31, 68, 0.4), \n 0 15px 30px rgba(10, 31, 68, 0.3);\n background: linear-gradient(135deg, #162e5a, var(--bifa-deep-navy)) !important;\n}<\/p>\n<p>.bifa-button-text {\n font-weight: 700 !important;\n color: #FFFFFF !important;\n}<\/p>\n<p>.bifa-ambassador-count {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n color: var(--bifa-deep-navy) !important;\n width: 32px;\n height: 32px;\n border-radius: 50%;\n font-size: 1rem !important;\n font-weight: 900 !important;\n margin-left: 10px;\n}<\/p>\n<p>\/* ========= ANIMATIONS ========= *\/\n@keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>@keyframes expandWidth {\n from {\n width: 0;\n }\n to {\n width: 120px;\n }\n}<\/p>\n<p>@keyframes loading {\n 0% {\n background-position: 200% 0;\n }\n 100% {\n background-position: -200% 0;\n }\n}<\/p>\n<p>\/* ========= RESPONSIVE ========= *\/\n@media (max-width: 1024px) {\n .bifa-ambassadors-grid {\n grid-template-columns: repeat(2, 1fr);\n gap: 35px;\n }<\/p>\n<p> .bifa-ambassador-card:nth-child(n+3) {\n display: none;\n opacity: 0;\n }<\/p>\n<p> .bifa-ambassadors-grid.expanded .bifa-ambassador-card:nth-child(n+3) {\n display: block;\n animation: fadeInUp 0.8s ease-out forwards;\n }\n}<\/p>\n<p>@media (max-width: 768px) {\n .bifa-ambassadors-section {\n padding: 80px 15px 60px;\n }<\/p>\n<p> .bifa-ambassadors-container {\n padding: 0 10px;\n }<\/p>\n<p> .bifa-ambassadors-grid {\n grid-template-columns: 1fr;\n gap: 30px;\n }<\/p>\n<p> .bifa-ambassador-card:nth-child(n+2) {\n display: none;\n opacity: 0;\n }<\/p>\n<p> .bifa-ambassadors-grid.expanded .bifa-ambassador-card:nth-child(n+2) {\n display: block;\n animation: fadeInUp 0.8s ease-out forwards;\n }<\/p>\n<p> .bifa-ambassador-image {\n height: 250px;\n }<\/p>\n<p> \/* \u041c\u043e\u0431\u0438\u043b\u044c\u043d\u0430\u044f \u0446\u0435\u043d\u0442\u0440\u043e\u0432\u043a\u0430 \u043a\u043d\u043e\u043f\u043e\u043a Join Us *\/\n .bifa-join-buttons-section {\n padding: 30px 10px;\n margin: 40px 0;\n }<\/p>\n<p> .bifa-join-buttons-container {\n flex-direction: column;\n align-items: center;\n gap: 15px;\n width: 100%;\n padding: 0;\n }<\/p>\n<p> .bifa-join-button {\n width: 90%;\n max-width: 320px;\n padding: 16px 25px !important;\n font-size: 0.95rem !important;\n justify-content: center;\n text-align: center;\n }<\/p>\n<p> \/* \u0426\u0435\u043d\u0442\u0440\u043e\u0432\u043a\u0430 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432 *\/\n .bifa-ambassadors-title-wrapper {\n padding: 0 10px;\n margin-bottom: 60px;\n }<\/p>\n<p> .bifa-ambassadors-section-title {\n font-size: 2.2rem;\n }<\/p>\n<p> .bifa-ambassadors-subtitle {\n font-size: 1.15rem;\n padding: 0 10px;\n }<\/p>\n<p> \/* \u041a\u043d\u043e\u043f\u043a\u0430 View All *\/\n .bifa-ambassadors-cta {\n padding: 0 10px;\n }<\/p>\n<p> .bifa-view-all-button {\n padding: 18px 35px !important;\n font-size: 1rem !important;\n width: auto;\n max-width: 90%;\n }\n}<\/p>\n<p>@media (max-width: 480px) {\n .bifa-ambassadors-section {\n padding: 60px 10px 50px;\n }<\/p>\n<p> .bifa-ambassadors-section-title {\n font-size: 1.8rem;\n letter-spacing: 0;\n }<\/p>\n<p> .bifa-ambassadors-subtitle {\n font-size: 1rem;\n padding: 0 5px;\n }<\/p>\n<p> .bifa-ambassador-content {\n padding: 25px 20px;\n }<\/p>\n<p> \/* \u0415\u0449\u0451 \u0431\u043e\u043b\u0435\u0435 \u043a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u044b\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 \u0434\u043b\u044f \u043c\u0430\u043b\u044b\u0445 \u044d\u043a\u0440\u0430\u043d\u043e\u0432 *\/\n .bifa-join-buttons-section {\n padding: 25px 5px;\n margin: 30px 0;\n }<\/p>\n<p> .bifa-join-button {\n width: 95%;\n max-width: 280px;\n font-size: 0.85rem !important;\n padding: 14px 20px !important;\n letter-spacing: 0.3px;\n }<\/p>\n<p> .bifa-join-button svg {\n width: 16px;\n height: 16px;\n }<\/p>\n<p> \/* View All button \u043d\u0430 \u043c\u0430\u043b\u044b\u0445 \u044d\u043a\u0440\u0430\u043d\u0430\u0445 *\/\n .bifa-view-all-button {\n padding: 16px 30px !important;\n font-size: 0.95rem !important;\n }<\/p>\n<p> .bifa-ambassador-count {\n width: 28px;\n height: 28px;\n font-size: 0.9rem !important;\n }\n}<\/p>\n<p>\/* \u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u043e\u0447\u0435\u043d\u044c \u043c\u0430\u043b\u044b\u0445 \u044d\u043a\u0440\u0430\u043d\u043e\u0432 *\/\n@media (max-width: 380px) {\n .bifa-ambassadors-section-title {\n font-size: 1.6rem;\n }<\/p>\n<p> .bifa-join-button {\n width: 98%;\n font-size: 0.8rem !important;\n padding: 12px 18px !important;\n gap: 8px;\n }<\/p>\n<p> \/* \u0423\u0431\u0438\u0440\u0430\u0435\u043c \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u043a\u0440\u043e\u043b\u043b *\/\n .bifa-ambassadors-section-wrapper {\n overflow-x: hidden;\n }\n}\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"bifa-ambassadors-section-wrapper\">\n <\/p>\n<section class=\"bifa-ambassadors-section\">\n <\/p>\n<div class=\"bifa-ambassadors-bg-animation\">\n <\/p>\n<div class=\"bifa-floating-shape-amb bifa-shape-ambassadors-1\"><\/div>\n<div class=\"bifa-floating-shape-amb bifa-shape-ambassadors-2\"><\/div>\n<div class=\"bifa-floating-shape-amb bifa-shape-ambassadors-3\"><\/div>\n<p> \n <\/div>\n<div class=\"bifa-ambassadors-container\">\n<div class=\"bifa-ambassadors-title-wrapper\">\n<h2 class=\"bifa-ambassadors-section-title\">Fa\u00e7a parte da BIFA<\/h2>\n<p class=\"bifa-ambassadors-subtitle\">\n Whether you’re a student, coach, or fan, there’s a role for you in building football’s future.\n <\/p>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"bifa-join-buttons-section\">\n<div class=\"bifa-join-buttons-container\">\n <a href=\"https:\/\/bifa.ai\/join\/#volunteers\" class=\"bifa-join-button\"><br \/>\n <svg viewbox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"\/>\n <\/svg><br \/>\n Candidatar-se como volunt\u00e1rio<br \/>\n <\/a><br \/>\n <a href=\"https:\/\/bifa.ai\/join\/#representatives\" class=\"bifa-join-button\"><br \/>\n <svg viewbox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z\"\/>\n <\/svg><br \/>\n Candidatar-se como Representante<br \/>\n <\/a><br \/>\n <a href=\"https:\/\/bifa.ai\/join\/#ambassadors\" class=\"bifa-join-button\"><br \/>\n <svg viewbox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\/>\n <\/svg><br \/>\n Candidatar-se como Embaixador<br \/>\n <\/a>\n <\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"bifa-ambassadors-grid\" id=\"bifa-ambassadors-grid\">\n <\/p>\n<div class=\"bifa-loading-container\" id=\"bifa-loading\" style=\"grid-column: 1\/-1;\">\n<div class=\"bifa-loading-spinner\"><\/div>\n<p class=\"bifa-loading-text\">Loading ambassadors…<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"bifa-ambassadors-cta\" id=\"bifa-cta\" style=\"display: none;\">\n <button class=\"bifa-view-all-button\" id=\"bifa-view-all-button\" type=\"button\"><br \/>\n <span class=\"bifa-button-text\">Ver todos os embaixadores<\/span><br \/>\n <span class=\"bifa-ambassador-count\">0<\/span><br \/>\n <svg width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"#FFFFFF\" stroke-width=\"2.5\">\n <path d=\"M5 12H19M19 12L12 5M19 12L12 19\" stroke=\"#FFFFFF\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg><br \/>\n <\/button>\n <\/div>\n<\/p><\/div>\n<\/section>\n<\/div>\n<p><script>\n\/\/ BIFA+ Dynamic Ambassadors Module with REST API Integration - PRODUCTION VERSION\n(function() {\n 'use strict';<\/p>\n<p> \/\/ Configuration\n const CONFIG = {\n apiUrl: '\/wp-json\/bifa\/v1\/ambassadors',\n particleCount: 12,\n visibleCardsDesktop: 3,\n visibleCardsTablet: 2,\n visibleCardsMobile: 1,\n isExpanded: false\n };<\/p>\n<p> \/\/ Country flags mapping\n const FLAGS = {\n 'BR': '\ud83c\udde7\ud83c\uddf7',\n 'RU': '\ud83c\uddf7\ud83c\uddfa',\n 'IN': '\ud83c\uddee\ud83c\uddf3',\n 'CN': '\ud83c\udde8\ud83c\uddf3',\n 'ZA': '\ud83c\uddff\ud83c\udde6',\n 'SA': '\ud83c\uddf8\ud83c\udde6',\n 'AE': '\ud83c\udde6\ud83c\uddea',\n 'EG': '\ud83c\uddea\ud83c\uddec',\n 'IR': '\ud83c\uddee\ud83c\uddf7',\n 'ET': '\ud83c\uddea\ud83c\uddf9',\n 'ID': '\ud83c\uddee\ud83c\udde9',\n 'AR': '\ud83c\udde6\ud83c\uddf7'\n };<\/p>\n<p> \/\/ State\n let ambassadors = [];\n let visibleCards = CONFIG.visibleCardsDesktop;<\/p>\n<p> \/\/ Initialize\n function init() {\n \/\/ Create particles\n createParticles();<\/p>\n<p> \/\/ Determine visible cards based on screen size\n updateVisibleCards();<\/p>\n<p> \/\/ Load ambassadors data\n loadAmbassadors();<\/p>\n<p> \/\/ Setup event listeners\n setupEventListeners();<\/p>\n<p> \/\/ Setup resize handler\n window.addEventListener('resize', debounce(updateVisibleCards, 250));\n }<\/p>\n<p> \/\/ Create golden particles\n function createParticles() {\n const particlesContainer = document.querySelector('.bifa-ambassadors-bg-animation');\n if (!particlesContainer) return;<\/p>\n<p> for (let i = 0; i < CONFIG.particleCount; i++) {\n const particle = document.createElement('div');\n particle.className = 'bifa-ambassadors-particle';\n particle.style.left = Math.random() * 100 + '%';\n particle.style.animationDelay = Math.random() * 20 + 's';\n particle.style.animationDuration = (18 + Math.random() * 10) + '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 \n \/\/ Update visible cards based on screen size\n function updateVisibleCards() {\n const width = window.innerWidth;\n if (width <= 768) {\n visibleCards = CONFIG.visibleCardsMobile;\n } else if (width <= 1024) {\n visibleCards = CONFIG.visibleCardsTablet;\n } else {\n visibleCards = CONFIG.visibleCardsDesktop;\n }\n }\n \n \/\/ Load ambassadors from REST API\n async function loadAmbassadors() {\n const grid = document.getElementById('bifa-ambassadors-grid');\n const loadingContainer = document.getElementById('bifa-loading');\n \n try {\n const apiUrl = `${window.location.protocol}\/\/${window.location.host}${CONFIG.apiUrl}`;\n const response = await fetch(apiUrl);\n \n if (!response.ok) {\n throw new Error(`API Error: ${response.status} ${response.statusText}`);\n }\n \n ambassadors = await response.json();\n \n \/\/ Remove loading state\n if (loadingContainer) {\n loadingContainer.remove();\n }\n \n \/\/ Check if we have ambassadors\n if (ambassadors.length === 0) {\n showEmptyState(grid);\n return;\n }\n \n \/\/ Sort ambassadors by order\n ambassadors.sort((a, b) => {\n const orderA = parseInt(a.order) || 999;\n const orderB = parseInt(b.order) || 999;\n return orderA - orderB;\n });<\/p>\n<p> \/\/ Render ambassadors\n renderAmbassadors(grid);<\/p>\n<p> \/\/ Setup view all button\n setupViewAllButton();<\/p>\n<p> } catch (error) {\n console.error('BIFA Ambassadors: Error loading data:', error);<\/p>\n<p> \/\/ Remove loading state\n if (loadingContainer) {\n loadingContainer.remove();\n }<\/p>\n<p> \/\/ Show error state\n showErrorState(grid, error);\n }\n }<\/p>\n<p> \/\/ Render ambassadors cards\n function renderAmbassadors(grid) {\n \/\/ Clear grid\n grid.innerHTML = '';<\/p>\n<p> \/\/ Render each ambassador\n ambassadors.forEach((ambassador, index) => {\n const card = createAmbassadorCard(ambassador, index);\n grid.appendChild(card);\n });\n }<\/p>\n<p> \/\/ Create ambassador card element - PRODUCTION VERSION\n function createAmbassadorCard(ambassador, index) {\n const card = document.createElement('a');\n card.className = 'bifa-ambassador-card';\n card.href = ambassador.link || `\/ambassadors\/${ambassador.slug || ambassador.id}\/`;\n card.setAttribute('data-id', ambassador.id);<\/p>\n<p> \/\/ Add animation delay\n card.style.animationDelay = `${0.8 + (index * 0.2)}s`;<\/p>\n<p> \/\/ Select best available image\n let imageUrl = null;<\/p>\n<p> \/\/ Priority: avatar -> featured_image -> portrait -> thumbnail\n if (ambassador.avatar && ambassador.avatar.length > 0 && ambassador.avatar !== 'false') {\n imageUrl = ambassador.avatar;\n } else if (ambassador.featured_image && ambassador.featured_image.length > 0 && ambassador.featured_image !== 'false') {\n imageUrl = ambassador.featured_image;\n } else if (ambassador.portrait && ambassador.portrait.length > 0 && ambassador.portrait !== 'false') {\n imageUrl = ambassador.portrait;\n } else if (ambassador.thumbnail && ambassador.thumbnail.length > 0 && ambassador.thumbnail !== 'false') {\n imageUrl = ambassador.thumbnail;\n }<\/p>\n<p> \/\/ Create image container\n const imageContainer = document.createElement('div');\n imageContainer.className = 'bifa-ambassador-image';<\/p>\n<p> if (imageUrl && imageUrl !== 'false' && imageUrl !== false) {\n \/\/ Create img element programmatically\n const img = document.createElement('img');\n img.src = imageUrl;\n img.alt = ambassador.title || '';\n img.loading = 'lazy';<\/p>\n<p> \/\/ Add error event listener for fallback\n img.addEventListener('error', function() {\n \/\/ Replace with placeholder on error\n imageContainer.innerHTML = `<\/p>\n<div class=\"bifa-ambassador-no-image\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\">\n <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"><\/path>\n <circle cx=\"12\" cy=\"7\" r=\"4\"><\/circle>\n <\/svg>\n <\/div>\n<p> `;\n });<\/p>\n<p> imageContainer.appendChild(img);\n } else {\n imageContainer.innerHTML = `<\/p>\n<div class=\"bifa-ambassador-no-image\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\">\n <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"><\/path>\n <circle cx=\"12\" cy=\"7\" r=\"4\"><\/circle>\n <\/svg>\n <\/div>\n<p> `;\n }<\/p>\n<p> \/\/ Add country flag\n let countryHtml = '';\n if (ambassador.country && FLAGS[ambassador.country]) {\n countryHtml = `<\/p>\n<div class=\"bifa-ambassador-country\">\n ${FLAGS[ambassador.country]}\n <\/div>\n<p> `;\n }<\/p>\n<p> \/\/ Add badge\n let badgeHtml = '';\n if (ambassador.badge) {\n badgeHtml = `<\/p>\n<div class=\"bifa-ambassador-badge ${ambassador.featured ? 'featured' : ''}\">\n ${escapeHtml(ambassador.badge)}\n <\/div>\n<p> `;\n } else if (ambassador.featured) {\n badgeHtml = `<\/p>\n<div class=\"bifa-ambassador-badge featured\">\n Featured\n <\/div>\n<p> `;\n }<\/p>\n<p> \/\/ Build other content with innerHTML\n const contentHtml = `\n ${badgeHtml}\n ${countryHtml}<\/p>\n<div class=\"bifa-ambassador-content\">\n<h3 class=\"bifa-ambassador-name\">${escapeHtml(ambassador.title)}<\/h3>\n<p> ${ambassador.role ? `<\/p>\n<p class=\"bifa-ambassador-role\">${escapeHtml(ambassador.role)}<\/p>\n<p>` : ''}\n ${ambassador.organization ? `<\/p>\n<p class=\"bifa-ambassador-organization\">${escapeHtml(ambassador.organization)}<\/p>\n<p>` : ''}\n ${ambassador.quote ? `<\/p>\n<p class=\"bifa-ambassador-quote\">${escapeHtml(ambassador.quote)}<\/p>\n<p>` : ''}\n ${!ambassador.quote && ambassador.bio_short ? `<\/p>\n<p class=\"bifa-ambassador-quote\">${escapeHtml(ambassador.bio_short)}<\/p>\n<p>` : ''}\n <\/p><\/div>\n<p> `;<\/p>\n<p> \/\/ Set initial HTML (without image)\n card.innerHTML = contentHtml;<\/p>\n<p> \/\/ Insert image container at the correct position\n const contentDiv = card.querySelector('.bifa-ambassador-content');\n card.insertBefore(imageContainer, contentDiv);<\/p>\n<p> return card;\n }<\/p>\n<p> \/\/ Setup view all button\n function setupViewAllButton() {\n const ctaSection = document.getElementById('bifa-cta');\n const button = document.getElementById('bifa-view-all-button');\n const countBadge = button.querySelector('.bifa-ambassador-count');<\/p>\n<p> \/\/ Calculate hidden cards\n const hiddenCards = ambassadors.length - visibleCards;<\/p>\n<p> \/\/ Show\/hide button based on card count\n if (hiddenCards > 0) {\n ctaSection.style.display = 'block';\n countBadge.textContent = hiddenCards;\n } else {\n ctaSection.style.display = 'none';\n }\n }<\/p>\n<p> \/\/ Setup event listeners\n function setupEventListeners() {\n const button = document.getElementById('bifa-view-all-button');\n if (button) {\n button.addEventListener('click', toggleAllAmbassadors);\n }\n }<\/p>\n<p> \/\/ Toggle expand\/collapse\n function toggleAllAmbassadors() {\n const grid = document.getElementById('bifa-ambassadors-grid');\n const button = document.getElementById('bifa-view-all-button');\n const buttonText = button.querySelector('.bifa-button-text');\n const countBadge = button.querySelector('.bifa-ambassador-count');<\/p>\n<p> CONFIG.isExpanded = !CONFIG.isExpanded;<\/p>\n<p> if (CONFIG.isExpanded) {\n \/\/ Expand\n grid.classList.add('expanded');\n button.classList.add('expanded');\n buttonText.textContent = 'Show Less';\n countBadge.style.display = 'none';<\/p>\n<p> \/\/ Smooth scroll to newly visible cards\n setTimeout(() => {\n const fourthCard = document.querySelector('.bifa-ambassador-card:nth-child(4)');\n if (fourthCard) {\n const rect = fourthCard.getBoundingClientRect();\n const scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n const targetY = rect.top + scrollTop - 100;<\/p>\n<p> window.scrollTo({\n top: targetY,\n behavior: 'smooth'\n });\n }\n }, 100);\n } else {\n \/\/ Collapse\n grid.classList.remove('expanded');\n button.classList.remove('expanded');\n buttonText.textContent = 'View All Ambassadors';\n countBadge.style.display = 'inline-flex';<\/p>\n<p> \/\/ Update count\n const hiddenCards = ambassadors.length - visibleCards;\n countBadge.textContent = hiddenCards;<\/p>\n<p> \/\/ Scroll back to top of section\n const section = document.querySelector('.bifa-ambassadors-section');\n section.scrollIntoView({ behavior: 'smooth', block: 'start' });\n }\n }<\/p>\n<p> \/\/ Show empty state\n function showEmptyState(grid) {\n grid.innerHTML = `<\/p>\n<div class=\"bifa-empty-container\" style=\"grid-column: 1\/-1;\">\n<div class=\"bifa-empty-icon\">\ud83d\udc65<\/div>\n<h3 class=\"bifa-empty-message\">No Ambassadors Yet<\/h3>\n<p class=\"bifa-empty-submessage\">We're currently recruiting ambassadors for BIFA programs.<\/p>\n<\/p><\/div>\n<p> `;\n }<\/p>\n<p> \/\/ Show error state\n function showErrorState(grid, error) {\n grid.innerHTML = `<\/p>\n<div class=\"bifa-error-container\" style=\"grid-column: 1\/-1;\">\n<div class=\"bifa-error-icon\">\u26a0\ufe0f<\/div>\n<h3 class=\"bifa-error-message\">Unable to Load Ambassadors<\/h3>\n<p class=\"bifa-error-details\">${error.message}<\/p>\n<p> <button class=\"bifa-retry-button\" onclick=\"location.reload()\">\n Retry\n <\/button>\n <\/div>\n<p> `;\n }<\/p>\n<p> \/\/ Utility: Escape HTML\n function escapeHtml(text) {\n if (!text) return '';\n const map = {\n '&': '&',\n '<': '<',\n '>': '>',\n '\"': '"',\n \"'\": '''\n };\n return text.replace(\/[&<>\"']\/g, m => map[m]);\n }<\/p>\n<p> \/\/ Utility: Debounce\n function debounce(func, wait) {\n let timeout;\n return function executedFunction(...args) {\n const later = () => {\n clearTimeout(timeout);\n func(...args);\n };\n clearTimeout(timeout);\n timeout = setTimeout(later, wait);\n };\n }<\/p>\n<p> \/\/ Initialize when DOM is ready\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', init);\n } else {\n init();\n }<\/p>\n<p>})();\n<\/script><\/p>\n<p><\/body><br \/>\n<\/html>\n<\/div>\n<div>\n<p> <!DOCTYPE html><br \/>\n<html lang=\"ru\"><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+ – Partners & Sponsors<\/title><\/p>\n<p> \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&family=Cairo:wght@300;400;500;600;700;800&family=Tajawal:wght@300;400;500;700;800&display=swap\" rel=\"stylesheet\">\n<style>\n \/* ========= \u0413\u041b\u041e\u0411\u0410\u041b\u042c\u041d\u042b\u0415 \u041f\u0415\u0420\u0415\u041c\u0415\u041d\u041d\u042b\u0415 BIFA+ ========= *\/\n :root {\n \/* \u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430 BIFA+ *\/\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> \/* \u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0448\u0440\u0438\u0444\u0442\u044b BIFA+ *\/\n --bifa-font-heading: 'Montserrat', 'Cairo', sans-serif;\n --bifa-font-body: 'Poppins', 'Tajawal', sans-serif;\n --bifa-font-arabic: 'Cairo', 'Tajawal', 'GE SS Text', sans-serif;\n }<\/p>\n<p> \/* ========= RESET ========= *\/\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }<\/p>\n<p> body {\n font-family: var(--bifa-font-body);\n overflow-x: hidden;\n background: var(--bifa-bright-white);\n }<\/p>\n<p> \/* ========= \u0410\u041d\u0418\u041c\u0410\u0426\u0418\u0418 ========= *\/\n @keyframes goldPulse {\n 0%, 100% { opacity: 0.6; }\n 50% { opacity: 1; }\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(50px);\n opacity: 0;\n }\n }<\/p>\n<p> @keyframes fadeInDown {\n from {\n opacity: 0;\n transform: translateY(-40px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }<\/p>\n<p> @keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(40px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }<\/p>\n<p> @keyframes partners-pulse {\n 0%, 100% { \n filter: brightness(1.1) drop-shadow(0 0 10px rgba(212, 175, 55, 0.4)); \n transform: scale(1);\n }\n 50% { \n filter: brightness(1.3) drop-shadow(0 0 20px rgba(212, 175, 55, 0.6)); \n transform: scale(1.02);\n }\n }<\/p>\n<p> @keyframes partners-twinkle {\n 0%, 100% { \n opacity: 0.3; \n transform: scale(1); \n }\n 50% { \n opacity: 1; \n transform: scale(1.5); \n }\n }<\/p>\n<p> @keyframes partners-float-neon {\n 0%, 100% {\n transform: translate(0, 0) scale(1);\n }\n 33% {\n transform: translate(50px, -80px) scale(1.1);\n }\n 66% {\n transform: translate(-50px, 50px) scale(0.9);\n }\n }<\/p>\n<p> @keyframes partners-rotate-slow {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }<\/p>\n<p> @keyframes textRotate {\n 0% {\n opacity: 0;\n transform: translateY(-50%) translateY(20px);\n }\n 10% {\n opacity: 1;\n transform: translateY(-50%) translateY(0);\n }\n 40% {\n opacity: 1;\n transform: translateY(-50%) translateY(0);\n }\n 50% {\n opacity: 0;\n transform: translateY(-50%) translateY(-20px);\n }\n 100% {\n opacity: 0;\n transform: translateY(-50%) translateY(-20px);\n }\n }<\/p>\n<p> @keyframes textGlow {\n 0%, 100% {\n text-shadow: \n 0 0 10px rgba(212, 175, 55, 0.3),\n 0 0 20px rgba(212, 175, 55, 0.2),\n 0 0 30px rgba(212, 175, 55, 0.1);\n filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.2));\n }\n 50% {\n text-shadow: \n 0 0 15px rgba(212, 175, 55, 0.5),\n 0 0 30px rgba(212, 175, 55, 0.4),\n 0 0 45px rgba(212, 175, 55, 0.3),\n 0 0 60px rgba(212, 175, 55, 0.2);\n filter: drop-shadow(0 0 25px rgba(212, 175, 55, 0.3));\n }\n }<\/p>\n<p> \/* ========= \u041e\u0421\u041d\u041e\u0412\u041d\u041e\u0419 \u041a\u041e\u041d\u0422\u0415\u0419\u041d\u0415\u0420 ========= *\/\n .partners-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 }<\/p>\n<p> \/* \u0421\u0432\u044f\u0437\u0443\u044e\u0449\u0430\u044f \u043b\u0438\u043d\u0438\u044f \u0441 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0441\u0435\u043a\u0446\u0438\u0435\u0439 *\/\n .partners-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> .bifa-partners-container {\n position: relative;\n padding: 80px 0;\n background: transparent;\n overflow: hidden;\n }<\/p>\n<p> .bifa-partners-container::before {\n content: '';\n position: absolute;\n inset: 0;\n background: radial-gradient(circle at 30% 50%, rgba(212, 175, 55, 0.03), transparent 50%),\n radial-gradient(circle at 70% 80%, rgba(10, 31, 68, 0.03), transparent 50%);\n z-index: 0;\n }<\/p>\n<p> \/* ========= \u0427\u0410\u0421\u0422\u0418\u0426\u042b \u0418 \u0414\u0415\u041a\u041e\u0420\u0410\u0422\u0418\u0412\u041d\u042b\u0415 \u042d\u041b\u0415\u041c\u0415\u041d\u0422\u042b ========= *\/\n .bg-particles {\n position: absolute;\n width: 100%;\n height: 100%;\n overflow: hidden;\n z-index: 2;\n }<\/p>\n<p> .particle {\n position: absolute;\n width: 4px;\n height: 4px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n border-radius: 50%;\n animation: float 15s infinite linear;\n box-shadow: 0 0 8px rgba(212, 175, 55, 0.3);\n opacity: 0.3;\n }<\/p>\n<p> .neon-elements {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow: hidden;\n z-index: 0;\n pointer-events: none;\n }<\/p>\n<p> .neon-circle {\n position: absolute;\n border-radius: 50%;\n filter: blur(40px);\n animation: partners-float-neon 20s ease-in-out infinite;\n }<\/p>\n<p> .neon-circle:nth-child(1) {\n width: 300px;\n height: 300px;\n background: rgba(212, 175, 55, 0.08);\n top: -150px;\n left: -150px;\n animation: partners-float-neon 18s ease-in-out infinite;\n }<\/p>\n<p> .neon-circle:nth-child(2) {\n width: 400px;\n height: 400px;\n background: rgba(10, 31, 68, 0.06);\n bottom: -200px;\n right: -200px;\n animation: partners-float-neon 25s ease-in-out infinite;\n animation-delay: 5s;\n }<\/p>\n<p> .neon-circle:nth-child(3) {\n width: 250px;\n height: 250px;\n background: rgba(29, 97, 67, 0.05);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n animation: partners-float-neon 30s ease-in-out infinite;\n animation-delay: 10s;\n }<\/p>\n<p> .glow-dot {\n position: absolute;\n width: 4px;\n height: 4px;\n background: rgba(212, 175, 55, 0.8);\n border-radius: 50%;\n box-shadow: 0 0 10px rgba(212, 175, 55, 0.8);\n animation: partners-twinkle 3s ease-in-out infinite;\n }<\/p>\n<p> .glow-dot:nth-child(6) {\n top: 15%;\n right: 10%;\n animation-delay: 0s;\n }<\/p>\n<p> .glow-dot:nth-child(7) {\n bottom: 25%;\n left: 8%;\n animation-delay: 1.5s;\n }<\/p>\n<p> .glow-dot:nth-child(8) {\n top: 70%;\n right: 30%;\n animation-delay: 2.5s;\n }<\/p>\n<p> \/* ========= \u041a\u041e\u041d\u0422\u0415\u041d\u0422 ========= *\/\n .content-wrapper {\n position: relative;\n z-index: 2;\n max-width: 1400px;\n margin: 0 auto;\n padding: 0 40px;\n }<\/p>\n<p> \/* ========= \u0417\u0410\u0413\u041e\u041b\u041e\u0412\u041e\u041a \u0421\u0415\u041a\u0426\u0418\u0418 ========= *\/\n .section-header {\n text-align: center;\n margin-bottom: 60px;\n position: relative;\n z-index: 1;\n animation: fadeInDown 1.2s ease;\n }<\/p>\n<p> .partners-title {\n font-family: var(--bifa-font-heading);\n font-size: clamp(3rem, 5vw, 4.5rem);\n font-weight: 900;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n margin-bottom: 25px;\n text-transform: uppercase;\n position: relative;\n cursor: pointer;\n transition: all 0.3s ease;\n text-decoration: none;\n display: inline-block;\n }<\/p>\n<p> .partners-title::after {\n content: '';\n position: absolute;\n bottom: -10px;\n left: 50%;\n transform: translateX(-50%);\n width: 0;\n height: 3px;\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700);\n transition: width 0.4s ease;\n }<\/p>\n<p> .partners-title:hover {\n transform: translateY(-3px);\n }<\/p>\n<p> .partners-title:hover::after {\n width: 100%;\n }<\/p>\n<p> \/* \u041a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441\u043c\u0435\u043d\u044b \u0442\u0435\u043a\u0441\u0442\u043e\u0432 *\/\n .subtitle-container {\n position: relative;\n height: 60px;\n margin-bottom: 20px;\n overflow: visible;\n display: flex;\n align-items: center;\n justify-content: center;\n }<\/p>\n<p> .partners-subtitle,\n .partners-slogan {\n font-family: var(--bifa-font-body);\n font-size: clamp(1.2rem, 2.5vw, 1.8rem);\n color: var(--bifa-deep-navy);\n font-weight: 600;\n letter-spacing: 2px;\n position: absolute;\n width: 100%;\n left: 0;\n top: 50%;\n transform: translateY(-50%);\n margin: 0;\n text-align: center;\n opacity: 0;\n z-index: 2;\n }<\/p>\n<p> .partners-subtitle {\n animation: textRotate 8s ease-in-out infinite;\n }<\/p>\n<p> .partners-slogan {\n font-family: var(--bifa-font-heading);\n font-weight: 700;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n animation: textRotate 8s ease-in-out infinite, textGlow 2s ease-in-out infinite;\n animation-delay: 4s, 4s;\n }<\/p>\n<p> .partners-description {\n max-width: 900px;\n margin: 0 auto;\n font-family: var(--bifa-font-body);\n font-size: clamp(1rem, 1.5vw, 1.2rem);\n line-height: 1.8;\n color: #4a5568;\n font-weight: 400;\n opacity: 0;\n animation: fadeInUp 1s ease forwards;\n animation-delay: 2s;\n }<\/p>\n<p> .highlight {\n font-weight: 700;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n }<\/p>\n<p> \/* ========= \u041a\u0410\u0422\u0415\u0413\u041e\u0420\u0418\u0418 \u041f\u0410\u0420\u0422\u041d\u0415\u0420\u041e\u0412 ========= *\/\n .partner-categories {\n margin-bottom: 50px;\n position: relative;\n z-index: 1;\n animation: fadeInUp 1s ease-out 0.2s both;\n }<\/p>\n<p> .category-tabs {\n display: flex;\n justify-content: center;\n gap: 20px;\n flex-wrap: wrap;\n }<\/p>\n<p> .category-tab {\n padding: 14px 35px;\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(10px);\n border: 2px solid rgba(212, 175, 55, 0.2);\n border-radius: 50px;\n font-weight: 600;\n color: var(--bifa-deep-navy);\n cursor: pointer;\n transition: all 0.3s ease;\n font-size: 1rem;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n font-family: var(--bifa-font-heading);\n box-shadow: 0 2px 10px rgba(212, 175, 55, 0.08);\n position: relative;\n overflow: hidden;\n }<\/p>\n<p> .category-tab::before {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.3), transparent);\n transition: left 0.5s ease;\n }<\/p>\n<p> .category-tab:hover::before {\n left: 100%;\n }<\/p>\n<p> .category-tab:hover {\n transform: translateY(-3px);\n box-shadow: 0 10px 30px rgba(212, 175, 55, 0.2);\n border-color: var(--bifa-heritage-gold);\n background: rgba(255, 255, 255, 1);\n }<\/p>\n<p> .category-tab.active {\n background: linear-gradient(135deg, var(--bifa-heritage-gold) 0%, #ffd700 100%);\n color: var(--bifa-deep-navy);\n border-color: transparent;\n box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);\n font-weight: 800;\n }<\/p>\n<p> \/* ========= \u0421\u0415\u0422\u041a\u0410 \u041f\u0410\u0420\u0422\u041d\u0415\u0420\u041e\u0412 ========= *\/\n .partners-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 30px;\n margin-bottom: 60px;\n position: relative;\n z-index: 1;\n animation: fadeInUp 1s ease-out 0.4s both;\n }<\/p>\n<p> .partner-card {\n background: rgba(255, 255, 255, 0.98);\n backdrop-filter: blur(10px);\n border-radius: 20px;\n overflow: hidden;\n box-shadow: 0 2px 10px rgba(212, 175, 55, 0.08);\n cursor: pointer;\n transition: all 0.3s ease;\n position: relative;\n border: 2px solid rgba(212, 175, 55, 0.1);\n height: 250px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px 30px;\n }<\/p>\n<p> .partner-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: radial-gradient(circle at center, rgba(212, 175, 55, 0.05) 0%, transparent 70%);\n opacity: 0;\n transition: opacity 0.4s ease;\n }<\/p>\n<p> .partner-card:hover {\n transform: translateY(-10px);\n box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15);\n border-color: rgba(212, 175, 55, 0.3);\n }<\/p>\n<p> .partner-card:hover::before {\n opacity: 1;\n }<\/p>\n<p> .partner-tier-badge {\n position: absolute;\n top: 15px;\n right: 15px;\n padding: 5px 12px;\n border-radius: 20px;\n font-size: 10px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n font-family: var(--bifa-font-heading);\n backdrop-filter: blur(10px);\n z-index: 2;\n }<\/p>\n<p> .tier-platinum {\n background: linear-gradient(135deg, #e5e7eb 0%, #9ca3af 100%);\n color: #1f2937;\n box-shadow: 0 2px 10px rgba(156, 163, 175, 0.4);\n }<\/p>\n<p> .tier-gold {\n background: linear-gradient(135deg, var(--bifa-heritage-gold) 0%, #ffd700 100%);\n color: var(--bifa-deep-navy);\n box-shadow: 0 2px 10px rgba(212, 175, 55, 0.4);\n }<\/p>\n<p> .tier-silver {\n background: linear-gradient(135deg, #d1d5db 0%, #e5e7eb 100%);\n color: #374151;\n box-shadow: 0 2px 10px rgba(209, 213, 219, 0.4);\n }<\/p>\n<p> .tier-media {\n background: linear-gradient(135deg, var(--bifa-deep-navy) 0%, #162e5a 100%);\n color: white;\n box-shadow: 0 2px 10px rgba(10, 31, 68, 0.4);\n }\n .tier-strategic {\n background: linear-gradient(135deg, var(--bifa-deep-navy) 0%, #162e5a 100%);\n color: white;\n box-shadow: 0 2px 10px rgba(10, 31, 68, 0.4);\n }\n .tier-institutional {\n background: linear-gradient(135deg, var(--bifa-deep-navy) 0%, #162e5a 100%);\n color: white;\n box-shadow: 0 2px 10px rgba(10, 31, 68, 0.4);\n }<\/p>\n<p> .partner-logo {\n width: 100%;\n max-width: 200px;\n height: 100px;\n object-fit: contain;\n filter: grayscale(100%);\n opacity: 0.7;\n transition: all 0.3s ease;\n position: relative;\n z-index: 1;\n }<\/p>\n<p> .partner-card:hover .partner-logo {\n filter: grayscale(0%);\n opacity: 1;\n transform: scale(1.05);\n }<\/p>\n<p> .partner-info {\n text-align: center;\n margin-top: 20px;\n position: relative;\n z-index: 1;\n }<\/p>\n<p> .partner-name {\n font-weight: 700;\n color: var(--bifa-deep-navy);\n font-size: 1.2rem;\n margin-bottom: 5px;\n transition: color 0.3s ease;\n font-family: var(--bifa-font-heading);\n }<\/p>\n<p> .partner-card:hover .partner-name {\n color: var(--bifa-heritage-gold);\n }<\/p>\n<p> .partner-description {\n font-size: 0.9rem;\n color: #64748b;\n line-height: 1.4;\n font-family: var(--bifa-font-body);\n }<\/p>\n<p> \/* ========= CTA \u0421\u0415\u041a\u0426\u0418\u042f ========= *\/\n .partners-cta {\n text-align: center;\n padding: 60px 40px;\n background: linear-gradient(135deg, rgba(212, 175, 55, 0.05) 0%, rgba(212, 175, 55, 0.08) 100%);\n backdrop-filter: blur(10px);\n border-radius: 25px;\n position: relative;\n z-index: 1;\n overflow: hidden;\n animation: fadeInUp 1s ease-out 0.6s both;\n border: 2px solid rgba(212, 175, 55, 0.2);\n box-shadow: 0 2px 10px rgba(212, 175, 55, 0.08);\n }<\/p>\n<p> .partners-cta::before {\n content: '';\n position: absolute;\n top: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n background: radial-gradient(circle, rgba(212, 175, 55, 0.05) 0%, transparent 50%);\n animation: partners-rotate-slow 20s linear infinite;\n }<\/p>\n<p> .cta-title {\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), #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n margin-bottom: 20px;\n position: relative;\n z-index: 1;\n }<\/p>\n<p> .cta-description {\n font-size: 1.2rem;\n color: var(--bifa-deep-navy);\n margin-bottom: 30px;\n line-height: 1.6;\n position: relative;\n z-index: 1;\n font-family: var(--bifa-font-body);\n }<\/p>\n<p> .cta-button {\n display: inline-block;\n padding: 18px 50px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold) 0%, #ffd700 100%);\n color: var(--bifa-deep-navy);\n text-decoration: none;\n border-radius: 50px;\n font-weight: 700;\n font-size: 1.1rem;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n font-family: var(--bifa-font-heading);\n transition: all 0.3s ease;\n box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);\n position: relative;\n z-index: 1;\n overflow: hidden;\n }<\/p>\n<p> .cta-button::before {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);\n transition: left 0.5s ease;\n }<\/p>\n<p> .cta-button:hover::before {\n left: 100%;\n }<\/p>\n<p> .cta-button:hover {\n transform: translateY(-3px);\n box-shadow: 0 15px 40px rgba(212, 175, 55, 0.4);\n }<\/p>\n<p> \/* ========= \u0421\u041e\u0421\u0422\u041e\u042f\u041d\u0418\u0415 \u0417\u0410\u0413\u0420\u0423\u0417\u041a\u0418 ========= *\/\n .loading-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 80px 20px;\n text-align: center;\n }<\/p>\n<p> .loading-content {\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(10px);\n border-radius: 20px;\n padding: 40px 30px;\n border: 2px solid rgba(212, 175, 55, 0.2);\n box-shadow: 0 2px 10px rgba(212, 175, 55, 0.08);\n position: relative;\n overflow: hidden;\n }<\/p>\n<p> .loading-icon {\n font-size: 48px;\n margin-bottom: 20px;\n animation: partners-pulse 2s ease-in-out infinite;\n }<\/p>\n<p> .loading-title {\n font-size: 1.8rem;\n font-weight: 700;\n color: var(--bifa-deep-navy);\n margin-bottom: 10px;\n font-family: var(--bifa-font-heading);\n }<\/p>\n<p> .loading-subtitle {\n font-size: 1rem;\n color: #64748b;\n font-family: var(--bifa-font-body);\n }<\/p>\n<p> \/* ========= RESPONSIVE DESIGN ========= *\/\n @media (max-width: 1024px) {\n .content-wrapper {\n padding: 0 30px;\n }<\/p>\n<p> .partners-grid {\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 25px;\n }<\/p>\n<p> .partners-title {\n font-size: 3rem;\n }\n }<\/p>\n<p> @media (max-width: 768px) {\n .content-wrapper {\n padding: 0 20px;\n }<\/p>\n<p> .partners-title {\n font-size: 2.5rem;\n }<\/p>\n<p> .subtitle-container {\n height: 50px;\n }<\/p>\n<p> .partners-subtitle,\n .partners-slogan {\n font-size: 1.2rem;\n }<\/p>\n<p> .partners-grid {\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 20px;\n }<\/p>\n<p> .partner-card {\n height: 220px;\n padding: 30px 20px;\n }<\/p>\n<p> .cta-title {\n font-size: 2rem;\n }<\/p>\n<p> .cta-button {\n padding: 15px 40px;\n font-size: 1rem;\n }<\/p>\n<p> .category-tab {\n padding: 12px 25px;\n font-size: 0.9rem;\n }\n }<\/p>\n<p> @media (max-width: 480px) {\n .partners-grid {\n grid-template-columns: 1fr;\n }<\/p>\n<p> .partners-title {\n font-size: 2rem;\n }<\/p>\n<p> .subtitle-container {\n height: 30px;\n margin-bottom: 15px;\n padding: 10px 0;\n }<\/p>\n<p> .partners-subtitle,\n .partners-slogan {\n font-size: 1rem;\n letter-spacing: 1px;\n }\n }\n <\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"partners-section-wrapper\">\n <\/p>\n<div class=\"bg-particles\"><\/div>\n<p> <\/p>\n<section class=\"bifa-partners-container\">\n <\/p>\n<div class=\"neon-elements\">\n<div class=\"neon-circle\"><\/div>\n<div class=\"neon-circle\"><\/div>\n<div class=\"neon-circle\"><\/div>\n<div class=\"glow-dot\"><\/div>\n<div class=\"glow-dot\"><\/div>\n<div class=\"glow-dot\"><\/div>\n<\/p><\/div>\n<div class=\"content-wrapper\">\n <\/p>\n<div class=\"section-header\">\n<div class=\"partners-title\">Partners & Sponsors<\/div>\n<div class=\"subtitle-container\">\n<p class=\"partners-subtitle\">Juntos, criamos o futuro da coopera\u00e7\u00e3o do Sul Global<\/p>\n<p class=\"partners-slogan\">Jogar com esp\u00edrito. Liderar com vis\u00e3o.<\/p>\n<\/p><\/div>\n<p class=\"partners-description\">\n Uma rede global de <span class=\"highlight\">parceiros estrat\u00e9gicos<\/span> e<br \/>\n <span class=\"highlight\">patrocinadores inovadores<\/span> supporting BIFA+’s mission to unite the<br \/>\n <span class=\"highlight\">Sul Global<\/span> por meio de futebol, interc\u00e2mbio cultural e<br \/>\n <span class=\"highlight\">diplomacia esportiva<\/span>. From technology innovators to media giants,<br \/>\n our partners share our vision of creating bridges between nations and empowering the next generation.\n <\/p>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"partner-categories\">\n<div class=\"category-tabs\">\n <button class=\"category-tab active\" onclick=\"filterPartners('all')\">Todos os parceiros<\/button><br \/>\n <button class=\"category-tab\" onclick=\"filterPartners('platinum')\">Platina<\/button><br \/>\n <button class=\"category-tab\" onclick=\"filterPartners('gold')\">Ouro<\/button><br \/>\n <button class=\"category-tab\" onclick=\"filterPartners('silver')\">Prata<\/button><br \/>\n <button class=\"category-tab\" onclick=\"filterPartners('media')\">Parceiros de m\u00eddia<\/button><br \/>\n <button class=\"category-tab\" onclick=\"filterPartners('strategic')\">Parceiros estrat\u00e9gicos<\/button><br \/>\n <button class=\"category-tab\" onclick=\"filterPartners('institutional')\">Parceiros institucionais<\/button>\n <\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"partners-grid\" id=\"partnersGrid\">\n<div class=\"loading-container\">\n<div class=\"loading-content\">\n<div class=\"loading-icon\">\u2728<\/div>\n<h3 class=\"loading-title\">Construindo juntos<\/h3>\n<p class=\"loading-subtitle\"> A BIFA colabora com governos, clubes e inovadores para desenvolver o futebol no Sul Global. Os parceiros oficiais ser\u00e3o anunciados em breve.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"partners-cta\">\n<h3 class=\"cta-title\">Participe do Movimento Global BIFA+<\/h3>\n<p class=\"cta-description\">Seja nosso parceiro para criar um novo futuro para a coopera\u00e7\u00e3o esportiva internacional e a unidade do Sul Global<\/p>\n<p> <a href=\"https:\/\/bifa.ai\/partners\/\" class=\"cta-button\">Seja nosso parceiro<\/a>\n <\/div>\n<\/p><\/div>\n<\/section><\/div>\n<p> <script>\n \/\/ Partner data will be loaded from API\n let partnersData = [];<\/p>\n<p> \/\/ Function to load partners from backend\n async function loadPartners() {\n try {\n const response = await fetch('\/wp-json\/bifa\/v1\/partners');\n if (!response.ok) {\n throw new Error('Failed to load partners');\n }\n const data = await response.json();\n partnersData = data;\n displayPartners('all');\n } catch (error) {\n console.error('Error loading partners:', error);\n showError();\n }\n }<\/p>\n<p> \/\/ Function to display partners\n function displayPartners(filterType = 'all') {\n const grid = document.getElementById('partnersGrid');\n grid.innerHTML = '';<\/p>\n<p> \/\/ Filter partners\n const filteredPartners = filterType === 'all' \n ? partnersData \n : partnersData.filter(partner => partner.type === filterType);<\/p>\n<p> \/\/ Sort by order\n filteredPartners.sort((a, b) => a.order - b.order);<\/p>\n<p> if (filteredPartners.length === 0) {\n grid.innerHTML = `<\/p>\n<div class=\"loading-container\" style=\"grid-column: 1 \/ -1;\">\n<div class=\"loading-content\">\n<div class=\"loading-icon\">\ud83e\udd1d<\/div>\n<h3 class=\"loading-title\">Building Together<\/h3>\n<p class=\"loading-subtitle\">BIFA collaborates with governments, clubs, and innovators to grow football across the Global South. Official partners will be announced soon<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<p> `;\n return;\n }<\/p>\n<p> \/\/ Create partner cards\n filteredPartners.forEach(partner => {\n const card = createPartnerCard(partner);\n grid.appendChild(card);\n });<\/p>\n<p> \/\/ Add animation delay to cards\n const cards = grid.querySelectorAll('.partner-card');\n cards.forEach((card, index) => {\n card.style.animationDelay = `${index * 0.1}s`;\n });\n }<\/p>\n<p> \/\/ Function to create partner card\n function createPartnerCard(partner) {\n const card = document.createElement('div');\n card.className = 'partner-card';\n card.style.animation = 'fadeInUp 0.6s ease-out both';<\/p>\n<p> \/\/ Tier badge\n const tierBadge = document.createElement('div');\n tierBadge.className = `partner-tier-badge tier-${partner.type}`;\n tierBadge.textContent = partner.type;<\/p>\n<p> \/\/ Logo\n const logo = document.createElement('img');\n logo.className = 'partner-logo';\n logo.src = partner.logo_url;\n logo.alt = partner.name;\n logo.loading = 'lazy';<\/p>\n<p> \/\/ Info container\n const info = document.createElement('div');\n info.className = 'partner-info';<\/p>\n<p> const name = document.createElement('h3');\n name.className = 'partner-name';\n name.textContent = partner.name;<\/p>\n<p> const description = document.createElement('p');\n description.className = 'partner-description';\n description.textContent = partner.description || '';<\/p>\n<p> info.appendChild(name);\n if (partner.description) {\n info.appendChild(description);\n }<\/p>\n<p> \/\/ Assemble card\n card.appendChild(tierBadge);\n card.appendChild(logo);\n card.appendChild(info);<\/p>\n<p> \/\/ Add click handler\n if (partner.website) {\n card.style.cursor = 'pointer';\n card.onclick = () => window.open(partner.website, '_blank');\n }<\/p>\n<p> return card;\n }<\/p>\n<p> \/\/ Function to filter partners\n function filterPartners(type) {\n \/\/ Update active tab\n document.querySelectorAll('.category-tab').forEach(tab => {\n tab.classList.remove('active');\n });\n event.target.classList.add('active');<\/p>\n<p> \/\/ Display filtered partners\n displayPartners(type);\n }<\/p>\n<p> \/\/ Function to show error state\n function showError() {\n const grid = document.getElementById('partnersGrid');\n grid.innerHTML = `<\/p>\n<div class=\"loading-container\" style=\"grid-column: 1 \/ -1;\">\n<div class=\"loading-content\">\n<div class=\"loading-icon\">\u26a0\ufe0f<\/div>\n<h3 class=\"loading-title\">Loading Error<\/h3>\n<p class=\"loading-subtitle\">Please refresh the page<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<p> `;\n }<\/p>\n<p> \/\/ Initialize on page load\n document.addEventListener('DOMContentLoaded', function() {\n loadPartners();<\/p>\n<p> \/\/ Create optimized floating particles (reduced count for performance)\n const particlesContainer = document.querySelector('.bg-particles');\n const particleCount = 15; \/\/ Reduced for better performance<\/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() * 15 + 's';\n particle.style.animationDuration = (12 + Math.random() * 6) + 's';\n \n const size = 3 + Math.random() * 3; \/\/ Smaller particles\n particle.style.width = size + 'px';\n particle.style.height = size + 'px';\n \n particlesContainer.appendChild(particle);\n }\n });\n <\/script><br \/>\n<\/body><br \/>\n<\/html>\n<\/div>\n<p><br \/>\n\\n <\/p>\n<div class=\"\\\"video-loading-overlay\\\"\" id=\"\\\"videoLoadingOverlay\\\"\">\\n <\/p>\n<div class=\"\\\"loading-iframe-container\\\"\">\\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>\\n <\\\/iframe>\\n <\\\/div>\\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\\\"\">\\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:#ffd700\\\"\\\/\">\\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=\"\\\"#0A1F44\\\"\" font-family=\"\\\"Montserrat\\\"\" font-size=\"\\\"24\\\"\" font-weight=\"\\\"bold\\\"\">BIFA+<\\\/text>\\n <\\\/svg>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"loader-text\\\"\">Loading BIFA+ Experience...<\\\/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 \\n <\/p>\n<div class=\"\\\"video-error-overlay\\\"\" id=\"\\\"videoErrorOverlay\\\"\">\\n <\/p>\n<div class=\"\\\"error-icon\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" xmlns=\"\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\"\">\\n <path d=\"\\\"M12\" 2c6.48 2 6.48 12s4.48 10 10-4.48 10-10s17.52 12 2zm1 15h-2v-2h2v2zm0-4h-2v7h2v6z\\\"\\>\\n <\\\/svg>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"error-message\\\"\">Video failed to load<\\\/div>\\n <button class=\"\\\"error-retry-btn\\\"\" id=\"\\\"errorRetryBtn\\\"\">Try Again<\\\/button>\\n <\\\/div>\\n\\n \\n <\/p>\n<div class=\"\\\"keyboard-hint\\\"\" id=\"\\\"keyboardHint\\\"\">\\n <kbd>Space<\\\/kbd> Play\\\/Pause\\n <\\\/div>\\n\\n <video id=\"\\\"heroVideo\\\"\" autoplay muted loop playsinline preload=\"\\\"metadata\\\"\">\\n<source src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/video.mp4\\\"\" type=\"\\\"video\\\/mp4\\\"\">\\n Your browser does not support the video tag.\\n <\\\/video>\\n\\n <\/p>\n<div class=\"\\\"controls\\\"\" id=\"\\\"controls\\\"\">\\n <\/p>\n<div class=\"\\\"controls-row\\\"\">\\n <button class=\"\\\"ctrl-btn\\\"\" id=\"\\\"playPause\\\"\" aria-label=\"\\\"Play\\\"\" aria-pressed=\"\\\"false\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" xmlns=\"\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\"\"><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=\"\\\"slider\\\"\" aria-label=\"\\\"Video\" progress\\\" aria-valuemin=\"\\\"0\\\"\" aria-valuemax=\"\\\"100\\\"\" aria-valuenow=\"\\\"0\\\"\" tabindex=\"\\\"0\\\"\">\\n <\/p>\n<div class=\"\\\"progress-buffer\\\"\" id=\"\\\"progressBuffer\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"progress-bar\\\"\" id=\"\\\"progressBar\\\"\"><\\\/div>\\n <\\\/div>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"time-display\\\"\" id=\"\\\"timeDisplay\\\"\">0:00 \\\/ 0:00<\\\/div>\\n \\n <\/p>\n<div class=\"\\\"volume-container\\\"\">\\n <button class=\"\\\"ctrl-btn\\\"\" id=\"\\\"muteToggle\\\"\" aria-label=\"\\\"Mute\\\"\" aria-pressed=\"\\\"true\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" xmlns=\"\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\"\"><path d=\"\\\"M4\" 9v6h4l5 5v4l8 9h4z\\\"\\><\\\/svg>\\n <\\\/button>\\n <\/p>\n<div class=\"\\\"volume-slider\\\"\" id=\"\\\"volumeSlider\\\"\" role=\"\\\"slider\\\"\" aria-label=\"\\\"Volume\\\"\" aria-valuemin=\"\\\"0\\\"\" aria-valuemax=\"\\\"100\\\"\" aria-valuenow=\"\\\"100\\\"\" tabindex=\"\\\"0\\\"\">\\n <\/p>\n<div class=\"\\\"volume-bar\\\"\" id=\"\\\"volumeBar\\\"\"><\\\/div>\\n <\\\/div>\\n <\\\/div>\\n \\n <button class=\"\\\"fullscreen-btn\\\"\" id=\"\\\"fullscreenBtn\\\"\" aria-label=\"\\\"Enter\" fullscreen\\\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" xmlns=\"\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\"\">\\n <path d=\"\\\"M7\" 14h5v5h5v-2h7v-3zm-2-4h2v7h3v5h5v5zm12 7h-3v2h5v-5h-2v3zm14 5v2h3v3h2v5h-5z\\\"\\>\\n <\\\/svg>\\n <\\\/button>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n\\n <\/p>\n<div class=\"\\\"video-content\\\"\">\\n <\/p>\n<div class=\"\\\"stats-bar\\\"\">\\n <\/p>\n<div class=\"\\\"stat-item\\\"\">\\n <\/p>\n<div class=\"\\\"stat-number\\\"\">11+<\\\/div>\\n <\/p>\n<div class=\"\\\"stat-label\\\"\">Na\u00e7\u00f5es do Sul Global<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"stat-item\\\"\">\\n <\/p>\n<div class=\"\\\"stat-number\\\"\">3.8B<\\\/div>\\n <\/p>\n<div class=\"\\\"stat-label\\\"\">Popula\u00e7\u00e3o Unida<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"stat-item\\\"\">\\n <\/p>\n<div class=\"\\\"stat-number\\\"\">2024<\\\/div>\\n <\/p>\n<div class=\"\\\"stat-label\\\"\">Ano de funda\u00e7\u00e3o<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"stat-item\\\"\">\\n <\/p>\n<div class=\"\\\"stat-number\\\"\">\\u221e<\\\/div>\\n <\/p>\n<div class=\"\\\"stat-label\\\"\">Potencial futuro<\\\/div>\\n <\\\/div>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"video-slogan\\\"\">\\n <span class=\"\\\"slogan-main\\\"\">BIFA+: Onde a energia do Sul Global se transforma em di\u00e1logo internacional sobre futebol<\\\/span>\\n We envision a world united through sport \\u2013 where football becomes a symbol of peace, cooperation, and shared values. \\n Through our comprehensive programs including <strong>BIFA+ Mulheres<\\\/strong>, <strong>Youth & University initiatives<\\\/strong>, \\n <strong>Jogos de eFootball<\\\/strong>e o <strong>Rede de cidades<\\\/strong>, we're building bridges between cultures \\n and creating opportunities for the next generation of global leaders.\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"buttons-container\\\"\">\\n <a href=\"\\\"https:\\\/\\\/bifa.ai\\\/initiatives\\\/\\\"\" class=\"\\\"cta-button\" primary\\\">Explorar programas<\\\/a>\\n <a href=\"\\\"https:\\\/\\\/bifa.ai\\\/about\\\/#core-team\\\"\" class=\"\\\"cta-button\" secondary\\\">Conhe\u00e7a a equipe<\\\/a>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/section>\\n<\\\/div>\\n\\n<script>\\n(function() {\\n 'use strict';\\n\\n \\\/\\\/ ========= DOM ELEMENTS =========\\n const video = document.getElementById('heroVideo');\\n const videoWrapper = document.getElementById('videoWrapper');\\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 progressBuffer = document.getElementById('progressBuffer');\\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 const loadingIframe = document.getElementById('loadingIframe');\\n const fallbackLoader = document.getElementById('fallbackLoader');\\n const errorOverlay = document.getElementById('videoErrorOverlay');\\n const errorRetryBtn = document.getElementById('errorRetryBtn');\\n const keyboardHint = document.getElementById('keyboardHint');\\n const particlesContainer = document.querySelector('.bg-particles');\\n\\n \\\/\\\/ ========= STATE =========\\n let videoReady = false;\\n let isDraggingProgress = false;\\n let isDraggingVolume = false;\\n let touchControlsTimeout = null;\\n let keyboardHintTimeout = null;\\n let isTouchDevice = false;\\n let savedVolume = 1;\\n\\n \\\/\\\/ ========= ICONS =========\\n const icons = {\\n play: '<svg viewbox=\"\\\"0\" 0 24 24\\\" xmlns=\"\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\"\"><path d=\"\\\"M8\" 5v14l11-7z\\\"\\><\\\/svg>',\\n pause: '<svg viewbox=\"\\\"0\" 0 24 24\\\" xmlns=\"\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\"\"><path d=\"\\\"M6\" 19h4v5h6zm8 0h4v5h-4z\\\"\\><\\\/svg>',\\n volumeHigh: '<svg viewbox=\"\\\"0\" 0 24 24\\\" xmlns=\"\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\"\"><path d=\"\\\"M3\" 9v6h4l5 5v4l7 9h3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zm14 3.23v2.06c2.89.86 5 3.54 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z\\\"\\><\\\/svg>',\\n volumeLow: '<svg viewbox=\"\\\"0\" 0 24 24\\\" xmlns=\"\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\"\"><path d=\"\\\"M18.5\" 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zm5 9v6h4l5 5v4l9 9h5z\\\"\\><\\\/svg>',\\n volumeMuted: '<svg viewbox=\"\\\"0\" 0 24 24\\\" xmlns=\"\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\"\"><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 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 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 19.73l-9-9l4.27 3zm12 4l9.91 6.09 12 8.18v4z\\\"\\><\\\/svg>',\\n fullscreenEnter: '<svg viewbox=\"\\\"0\" 0 24 24\\\" xmlns=\"\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\"\"><path d=\"\\\"M7\" 14h5v5h5v-2h7v-3zm-2-4h2v7h3v5h5v5zm12 7h-3v2h5v-5h-2v3zm14 5v2h3v3h2v5h-5z\\\"\\><\\\/svg>',\\n fullscreenExit: '<svg viewbox=\"\\\"0\" 0 24 24\\\" xmlns=\"\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\"\"><path d=\"\\\"M5\" 16h3v3h2v-5h5v2zm3-8h5v2h5v5h8v3zm6 11h2v-3h3v-2h-5v5zm2-11v5h-2v5h5v8h-3z\\\"\\><\\\/svg>'\\n };\\n\\n \\\/\\\/ ========= UTILITY FUNCTIONS =========\\n function formatTime(seconds) {\\n if (isNaN(seconds) || !isFinite(seconds)) return '0:00';\\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 function clamp(value, min, max) {\\n return Math.min(Math.max(value, min), max);\\n }\\n\\n function detectTouchDevice() {\\n isTouchDevice = ('ontouchstart' in window) || \\n (navigator.maxTouchPoints > 0) || \\n (navigator.msMaxTouchPoints > 0);\\n return isTouchDevice;\\n }\\n\\n \\\/\\\/ ========= LOADING SCREEN =========\\n function handleIframeLoad() {\\n console.log('Loading screen iframe loaded');\\n }\\n\\n function handleIframeError() {\\n console.log('Loading screen iframe failed, showing fallback');\\n if (loadingIframe) loadingIframe.style.display = 'none';\\n if (fallbackLoader) fallbackLoader.classList.add('active');\\n }\\n\\n function hideLoadingScreen() {\\n if (videoReady && loadingOverlay && !loadingOverlay.classList.contains('hidden')) {\\n setTimeout(() => {\\n loadingOverlay.classList.add('hidden');\\n setTimeout(() => {\\n if (loadingOverlay.parentNode) {\\n loadingOverlay.style.display = 'none';\\n }\\n }, 800);\\n }, 1500);\\n }\\n }\\n\\n function checkVideoReady() {\\n if (video.readyState >= 3 && !videoReady) {\\n videoReady = true;\\n hideLoadingScreen();\\n }\\n }\\n\\n \\\/\\\/ ========= ERROR HANDLING =========\\n function showError() {\\n if (errorOverlay) {\\n errorOverlay.classList.add('active');\\n }\\n if (loadingOverlay) {\\n loadingOverlay.classList.add('hidden');\\n }\\n }\\n\\n function hideError() {\\n if (errorOverlay) {\\n errorOverlay.classList.remove('active');\\n }\\n }\\n\\n function retryVideo() {\\n hideError();\\n if (loadingOverlay) {\\n loadingOverlay.classList.remove('hidden');\\n loadingOverlay.style.display = 'flex';\\n }\\n videoReady = false;\\n video.load();\\n video.play().catch(() => {});\\n }\\n\\n \\\/\\\/ ========= PLAY\\\/PAUSE =========\\n function togglePlay() {\\n if (video.paused) {\\n video.play().catch(err => console.warn('Play failed:', err));\\n } else {\\n video.pause();\\n }\\n }\\n\\n function updatePlayButton() {\\n const isPaused = video.paused;\\n playBtn.innerHTML = isPaused ? icons.play : icons.pause;\\n playBtn.setAttribute('aria-label', isPaused ? 'Play' : 'Pause');\\n playBtn.setAttribute('aria-pressed', !isPaused);\\n }\\n\\n \\\/\\\/ ========= VOLUME =========\\n function updateVolumeIcon() {\\n let icon;\\n if (video.muted || video.volume === 0) {\\n icon = icons.volumeMuted;\\n } else if (video.volume < 0.5) {\\n icon = icons.volumeLow;\\n } else {\\n icon = icons.volumeHigh;\\n }\\n muteBtn.innerHTML = icon;\\n muteBtn.setAttribute('aria-label', video.muted ? 'Unmute' : 'Mute');\\n muteBtn.setAttribute('aria-pressed', video.muted);\\n }\\n\\n function updateVolumeBar() {\\n const vol = video.muted ? 0 : video.volume;\\n volumeBar.style.width = (vol * 100) + '%';\\n volumeSlider.setAttribute('aria-valuenow', Math.round(vol * 100));\\n }\\n\\n function setVolume(value) {\\n video.volume = clamp(value, 0, 1);\\n if (value > 0) {\\n video.muted = false;\\n savedVolume = value;\\n }\\n updateVolumeIcon();\\n updateVolumeBar();\\n }\\n\\n function toggleMute() {\\n if (video.muted || video.volume === 0) {\\n video.muted = false;\\n video.volume = savedVolume > 0 ? savedVolume : 0.5;\\n } else {\\n savedVolume = video.volume;\\n video.muted = true;\\n }\\n updateVolumeIcon();\\n updateVolumeBar();\\n }\\n\\n \\\/\\\/ ========= PROGRESS =========\\n function updateProgress() {\\n if (!isDraggingProgress && video.duration) {\\n const percent = (video.currentTime \\\/ video.duration) * 100;\\n progressBar.style.width = percent + '%';\\n progress.setAttribute('aria-valuenow', Math.round(percent));\\n }\\n timeDisplay.textContent = `${formatTime(video.currentTime)} \\\/ ${formatTime(video.duration)}`;\\n }\\n\\n function updateBuffer() {\\n if (video.buffered.length > 0) {\\n const bufferedEnd = video.buffered.end(video.buffered.length - 1);\\n const duration = video.duration;\\n if (duration > 0) {\\n progressBuffer.style.width = (bufferedEnd \\\/ duration * 100) + '%';\\n }\\n }\\n }\\n\\n function seekTo(percent) {\\n if (video.duration) {\\n video.currentTime = clamp(percent, 0, 1) * video.duration;\\n }\\n }\\n\\n function getProgressPercent(e, element) {\\n const rect = element.getBoundingClientRect();\\n const clientX = e.touches ? e.touches[0].clientX : e.clientX;\\n return clamp((clientX - rect.left) \\\/ rect.width, 0, 1);\\n }\\n\\n \\\/\\\/ ========= FULLSCREEN =========\\n function isFullscreen() {\\n return !!(document.fullscreenElement || document.webkitFullscreenElement || \\n document.mozFullScreenElement || document.msFullscreenElement);\\n }\\n\\n function enterFullscreen() {\\n const elem = videoWrapper;\\n if (elem.requestFullscreen) {\\n elem.requestFullscreen();\\n } else if (elem.webkitRequestFullscreen) {\\n elem.webkitRequestFullscreen();\\n } else if (elem.mozRequestFullScreen) {\\n elem.mozRequestFullScreen();\\n } else if (elem.msRequestFullscreen) {\\n elem.msRequestFullscreen();\\n } else if (video.webkitEnterFullscreen) {\\n \\\/\\\/ iOS Safari fallback\\n video.webkitEnterFullscreen();\\n }\\n }\\n\\n function exitFullscreen() {\\n if (document.exitFullscreen) {\\n document.exitFullscreen();\\n } else if (document.webkitExitFullscreen) {\\n document.webkitExitFullscreen();\\n } else if (document.mozCancelFullScreen) {\\n document.mozCancelFullScreen();\\n } else if (document.msExitFullscreen) {\\n document.msExitFullscreen();\\n }\\n }\\n\\n function toggleFullscreen() {\\n if (isFullscreen()) {\\n exitFullscreen();\\n } else {\\n enterFullscreen();\\n }\\n }\\n\\n function updateFullscreenButton() {\\n const fs = isFullscreen();\\n fullscreenBtn.innerHTML = fs ? icons.fullscreenExit : icons.fullscreenEnter;\\n fullscreenBtn.setAttribute('aria-label', fs ? 'Exit fullscreen' : 'Enter fullscreen');\\n }\\n\\n \\\/\\\/ ========= KEYBOARD HINT =========\\n function showKeyboardHint(text) {\\n keyboardHint.innerHTML = text;\\n keyboardHint.classList.add('visible');\\n \\n clearTimeout(keyboardHintTimeout);\\n keyboardHintTimeout = setTimeout(() => {\\n keyboardHint.classList.remove('visible');\\n }, 1000);\\n }\\n\\n \\\/\\\/ ========= TOUCH CONTROLS =========\\n function showTouchControls() {\\n videoWrapper.classList.add('touch-active');\\n clearTimeout(touchControlsTimeout);\\n touchControlsTimeout = setTimeout(() => {\\n if (!video.paused) {\\n videoWrapper.classList.remove('touch-active');\\n }\\n }, 3000);\\n }\\n\\n \\\/\\\/ ========= EVENT LISTENERS =========\\n \\n \\\/\\\/ Loading iframe events\\n if (loadingIframe) {\\n loadingIframe.addEventListener('load', handleIframeLoad);\\n loadingIframe.addEventListener('error', handleIframeError);\\n }\\n\\n \\\/\\\/ Video events\\n video.addEventListener('loadeddata', checkVideoReady);\\n video.addEventListener('canplay', checkVideoReady);\\n video.addEventListener('canplaythrough', () => {\\n videoReady = true;\\n hideLoadingScreen();\\n });\\n video.addEventListener('play', updatePlayButton);\\n video.addEventListener('pause', updatePlayButton);\\n video.addEventListener('timeupdate', updateProgress);\\n video.addEventListener('progress', updateBuffer);\\n video.addEventListener('volumechange', () => {\\n updateVolumeIcon();\\n updateVolumeBar();\\n });\\n video.addEventListener('error', (e) => {\\n console.error('Video error:', e);\\n showError();\\n });\\n video.addEventListener('stalled', () => {\\n console.warn('Video stalled');\\n });\\n\\n \\\/\\\/ Fallback: \\u0441\\u043a\\u0440\\u044b\\u0442\\u044c loading \\u0447\\u0435\\u0440\\u0435\\u0437 8 \\u0441\\u0435\\u043a\\u0443\\u043d\\u0434\\n setTimeout(() => {\\n if (!loadingOverlay.classList.contains('hidden')) {\\n videoReady = true;\\n hideLoadingScreen();\\n }\\n }, 8000);\\n\\n \\\/\\\/ Error retry button\\n if (errorRetryBtn) {\\n errorRetryBtn.addEventListener('click', retryVideo);\\n }\\n\\n \\\/\\\/ Play\\\/Pause button\\n playBtn.addEventListener('click', togglePlay);\\n\\n \\\/\\\/ Mute button\\n muteBtn.addEventListener('click', toggleMute);\\n\\n \\\/\\\/ Progress bar - Click\\n progress.addEventListener('click', (e) => {\\n if (!isDraggingProgress) {\\n seekTo(getProgressPercent(e, progress));\\n }\\n });\\n\\n \\\/\\\/ Progress bar - Drag (mouse)\\n progress.addEventListener('mousedown', (e) => {\\n isDraggingProgress = true;\\n progress.classList.add('dragging');\\n seekTo(getProgressPercent(e, progress));\\n });\\n\\n document.addEventListener('mousemove', (e) => {\\n if (isDraggingProgress) {\\n const percent = getProgressPercent(e, progress);\\n progressBar.style.width = (percent * 100) + '%';\\n seekTo(percent);\\n }\\n });\\n\\n document.addEventListener('mouseup', () => {\\n if (isDraggingProgress) {\\n isDraggingProgress = false;\\n progress.classList.remove('dragging');\\n }\\n });\\n\\n \\\/\\\/ Progress bar - Drag (touch)\\n progress.addEventListener('touchstart', (e) => {\\n isDraggingProgress = true;\\n progress.classList.add('dragging');\\n seekTo(getProgressPercent(e, progress));\\n }, { passive: true });\\n\\n progress.addEventListener('touchmove', (e) => {\\n if (isDraggingProgress) {\\n const percent = getProgressPercent(e, progress);\\n progressBar.style.width = (percent * 100) + '%';\\n seekTo(percent);\\n }\\n }, { passive: true });\\n\\n progress.addEventListener('touchend', () => {\\n isDraggingProgress = false;\\n progress.classList.remove('dragging');\\n });\\n\\n \\\/\\\/ Volume slider - Click\\n volumeSlider.addEventListener('click', (e) => {\\n if (!isDraggingVolume) {\\n setVolume(getProgressPercent(e, volumeSlider));\\n }\\n });\\n\\n \\\/\\\/ Volume slider - Drag (mouse)\\n volumeSlider.addEventListener('mousedown', (e) => {\\n isDraggingVolume = true;\\n setVolume(getProgressPercent(e, volumeSlider));\\n });\\n\\n document.addEventListener('mousemove', (e) => {\\n if (isDraggingVolume) {\\n setVolume(getProgressPercent(e, volumeSlider));\\n }\\n });\\n\\n document.addEventListener('mouseup', () => {\\n isDraggingVolume = false;\\n });\\n\\n \\\/\\\/ Volume slider - Drag (touch)\\n volumeSlider.addEventListener('touchstart', (e) => {\\n isDraggingVolume = true;\\n setVolume(getProgressPercent(e, volumeSlider));\\n }, { passive: true });\\n\\n volumeSlider.addEventListener('touchmove', (e) => {\\n if (isDraggingVolume) {\\n setVolume(getProgressPercent(e, volumeSlider));\\n }\\n }, { passive: true });\\n\\n volumeSlider.addEventListener('touchend', () => {\\n isDraggingVolume = false;\\n });\\n\\n \\\/\\\/ Fullscreen button\\n fullscreenBtn.addEventListener('click', toggleFullscreen);\\n\\n \\\/\\\/ Double-click for fullscreen\\n videoWrapper.addEventListener('dblclick', (e) => {\\n \\\/\\\/ \\u041d\\u0435 \\u0441\\u0440\\u0430\\u0431\\u0430\\u0442\\u044b\\u0432\\u0430\\u0435\\u0442 \\u043d\\u0430 \\u043a\\u043e\\u043d\\u0442\\u0440\\u043e\\u043b\\u0430\\u0445\\n if (e.target.closest('.controls')) return;\\n toggleFullscreen();\\n });\\n\\n \\\/\\\/ Fullscreen change events\\n const fullscreenEvents = ['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange', 'MSFullscreenChange'];\\n fullscreenEvents.forEach(event => {\\n document.addEventListener(event, updateFullscreenButton);\\n });\\n\\n \\\/\\\/ Touch: tap to show\\\/hide controls\\n videoWrapper.addEventListener('touchstart', (e) => {\\n if (!e.target.closest('.controls') && !e.target.closest('.ctrl-btn') && !e.target.closest('.fullscreen-btn')) {\\n showTouchControls();\\n }\\n }, { passive: true });\\n\\n \\\/\\\/ Click on video to play\\\/pause (but not on controls)\\n videoWrapper.addEventListener('click', (e) => {\\n if (!e.target.closest('.controls') && \\n !e.target.closest('.ctrl-btn') && \\n !e.target.closest('.fullscreen-btn') &&\\n !e.target.closest('.video-loading-overlay') &&\\n !e.target.closest('.video-error-overlay')) {\\n \\n \\\/\\\/ \\u041d\\u0430 touch \\u0443\\u0441\\u0442\\u0440\\u043e\\u0439\\u0441\\u0442\\u0432\\u0430\\u0445 \\u043f\\u0435\\u0440\\u0432\\u044b\\u0439 \\u0442\\u0430\\u043f \\u043f\\u043e\\u043a\\u0430\\u0437\\u044b\\u0432\\u0430\\u0435\\u0442 \\u043a\\u043e\\u043d\\u0442\\u0440\\u043e\\u043b\\u044b\\n if (isTouchDevice && !videoWrapper.classList.contains('touch-active')) {\\n showTouchControls();\\n return;\\n }\\n \\n togglePlay();\\n }\\n });\\n\\n \\\/\\\/ ========= KEYBOARD CONTROLS =========\\n videoWrapper.addEventListener('keydown', (e) => {\\n \\\/\\\/ \\u0418\\u0433\\u043d\\u043e\\u0440\\u0438\\u0440\\u0443\\u0435\\u043c \\u0435\\u0441\\u043b\\u0438 \\u0444\\u043e\\u043a\\u0443\\u0441 \\u043d\\u0430 \\u043a\\u043d\\u043e\\u043f\\u043a\\u0430\\u0445\\n if (e.target.tagName === 'BUTTON') return;\\n\\n switch (e.key) {\\n case ' ':\\n case 'k':\\n e.preventDefault();\\n togglePlay();\\n showKeyboardHint(video.paused ? '<kbd>Space<\\\/kbd> Paused' : '<kbd>Space<\\\/kbd> Playing');\\n break;\\n \\n case 'ArrowLeft':\\n e.preventDefault();\\n video.currentTime = Math.max(0, video.currentTime - 5);\\n showKeyboardHint('<kbd>\\u2190<\\\/kbd> -5s');\\n break;\\n \\n case 'ArrowRight':\\n e.preventDefault();\\n video.currentTime = Math.min(video.duration, video.currentTime + 5);\\n showKeyboardHint('<kbd>\\u2192<\\\/kbd> +5s');\\n break;\\n \\n case 'ArrowUp':\\n e.preventDefault();\\n setVolume(video.volume + 0.1);\\n showKeyboardHint(`<kbd>\\u2191<\\\/kbd> Volume ${Math.round(video.volume * 100)}%`);\\n break;\\n \\n case 'ArrowDown':\\n e.preventDefault();\\n setVolume(video.volume - 0.1);\\n showKeyboardHint(`<kbd>\\u2193<\\\/kbd> Volume ${Math.round(video.volume * 100)}%`);\\n break;\\n \\n case 'm':\\n case 'M':\\n e.preventDefault();\\n toggleMute();\\n showKeyboardHint(video.muted ? '<kbd>M<\\\/kbd> Muted' : '<kbd>M<\\\/kbd> Unmuted');\\n break;\\n \\n case 'f':\\n case 'F':\\n e.preventDefault();\\n toggleFullscreen();\\n break;\\n \\n case 'Home':\\n e.preventDefault();\\n video.currentTime = 0;\\n showKeyboardHint('<kbd>Home<\\\/kbd> Start');\\n break;\\n \\n case 'End':\\n e.preventDefault();\\n video.currentTime = video.duration;\\n showKeyboardHint('<kbd>End<\\\/kbd> End');\\n break;\\n \\n \\\/\\\/ \\u0426\\u0438\\u0444\\u0440\\u044b 0-9 \\u0434\\u043b\\u044f seek \\u043a \\u043f\\u0440\\u043e\\u0446\\u0435\\u043d\\u0442\\u0443 \\u0432\\u0438\\u0434\\u0435\\u043e\\n case '0': case '1': case '2': case '3': case '4':\\n case '5': case '6': case '7': case '8': case '9':\\n e.preventDefault();\\n const percent = parseInt(e.key) \\\/ 10;\\n video.currentTime = video.duration * percent;\\n showKeyboardHint(`<kbd>${e.key}<\\\/kbd> ${percent * 100}%`);\\n break;\\n }\\n });\\n\\n \\\/\\\/ Progress bar keyboard\\n progress.addEventListener('keydown', (e) => {\\n const step = video.duration \\\/ 100; \\\/\\\/ 1%\\n \\n switch (e.key) {\\n case 'ArrowLeft':\\n e.preventDefault();\\n video.currentTime = Math.max(0, video.currentTime - step * 5);\\n break;\\n case 'ArrowRight':\\n e.preventDefault();\\n video.currentTime = Math.min(video.duration, video.currentTime + step * 5);\\n break;\\n }\\n });\\n\\n \\\/\\\/ Volume slider keyboard\\n volumeSlider.addEventListener('keydown', (e) => {\\n switch (e.key) {\\n case 'ArrowLeft':\\n case 'ArrowDown':\\n e.preventDefault();\\n setVolume(video.volume - 0.05);\\n break;\\n case 'ArrowRight':\\n case 'ArrowUp':\\n e.preventDefault();\\n setVolume(video.volume + 0.05);\\n break;\\n }\\n });\\n\\n \\\/\\\/ ========= PARTICLES =========\\n function createParticles() {\\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() * 15 + 's';\\n particle.style.animationDuration = (12 + 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 \\\/\\\/ ========= INIT =========\\n function init() {\\n detectTouchDevice();\\n updatePlayButton();\\n updateVolumeIcon();\\n updateVolumeBar();\\n updateFullscreenButton();\\n createParticles();\\n \\n \\\/\\\/ \\u041d\\u0430\\u0447\\u0430\\u043b\\u044c\\u043d\\u043e\\u0435 \\u0441\\u043e\\u0441\\u0442\\u043e\\u044f\\u043d\\u0438\\u0435\\n video.volume = 1;\\n savedVolume = 1;\\n }\\n\\n \\\/\\\/ \\u0417\\u0430\\u043f\\u0443\\u0441\\u043a \\u043f\\u0440\\u0438 DOM ready\\n if (document.readyState === 'loading') {\\n document.addEventListener('DOMContentLoaded', init);\\n } else {\\n init();\\n }\\n\\n \\\/\\\/ ========= CLEANUP (\\u0434\\u043b\\u044f SPA) =========\\n window.addEventListener('beforeunload', () => {\\n fullscreenEvents.forEach(event => {\\n document.removeEventListener(event, updateFullscreenButton);\\n });\\n });\\n\\n})();\\n<\\\/script>\\n<\\\/body>\\n<\\\/html>\"}},{\"type\":\"html\",\"props\":{\"content\":\"<!DOCTYPE html>\\n<html lang=\"\\\"ru\\\"\">\\n<head>\\n<meta charset=\"\\\"UTF-8\\\"\">\\n<meta name=\"\\\"viewport\\\"\" content=\"\\\"width=device-width,\" initial-scale=\"1.0\\\"\">\\n<title>BIFA+ News Center - Premium Design<\\\/title>\\n<link rel=\"\\\"preconnect\\\"\" href=\"\\\"https:\\\/\\\/fonts.googleapis.com\\\"\">\\n<link rel=\"\\\"preconnect\\\"\" href=\"\\\"https:\\\/\\\/fonts.gstatic.com\\\"\" crossorigin>\\n\\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&family=Cairo:wght@300;400;500;600;700;800&family=Tajawal:wght@300;400;500;700;800&display=swap\\\"\" rel=\"\\\"stylesheet\\\"\">\\n\\n<\/p>\n<style>\\n\\\/* ========= \\u0413\\u041b\\u041e\\u0411\\u0410\\u041b\\u042c\\u041d\\u042b\\u0415 \\u041f\\u0415\\u0420\\u0415\\u041c\\u0415\\u041d\\u041d\\u042b\\u0415 BIFA+ ========= *\\\/\\n:root {\\n \\\/* \\u041e\\u0444\\u0438\\u0446\\u0438\\u0430\\u043b\\u044c\\u043d\\u044b\\u0435 \\u0446\\u0432\\u0435\\u0442\\u0430 BIFA+ *\\\/\\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 --bifa-gray-light: #F8F9FA;\\n --bifa-gray: #6C757D;\\n \\n \\\/* \\u041e\\u0444\\u0438\\u0446\\u0438\\u0430\\u043b\\u044c\\u043d\\u044b\\u0435 \\u0448\\u0440\\u0438\\u0444\\u0442\\u044b BIFA+ *\\\/\\n --bifa-font-heading: 'Montserrat', 'Cairo', sans-serif;\\n --bifa-font-body: 'Poppins', 'Tajawal', sans-serif;\\n --bifa-font-arabic: 'Cairo', 'Tajawal', 'GE SS Text', sans-serif;\\n \\n \\\/* \\u041f\\u0440\\u0435\\u043c\\u0438\\u0430\\u043b\\u044c\\u043d\\u044b\\u0435 \\u0442\\u0435\\u043d\\u0438 \\u0438 \\u044d\\u0444\\u0444\\u0435\\u043a\\u0442\\u044b *\\\/\\n --bifa-shadow-premium: 0 25px 80px rgba(10, 31, 68, 0.15);\\n --bifa-shadow-hover: 0 35px 100px rgba(10, 31, 68, 0.2);\\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\\n\\\/* ========= RESET ========= *\\\/\\n* {\\n margin: 0;\\n padding: 0;\\n box-sizing: border-box;\\n}\\n\\nbody {\\n font-family: var(--bifa-font-body);\\n background: var(--bifa-bright-white);\\n overflow-x: hidden;\\n color: var(--bifa-soft-black);\\n}\\n\\n\\\/* ========= NEWS SECTION WRAPPER ========= *\\\/\\n.news-section-wrapper {\\n width: 100vw;\\n position: relative;\\n left: 50%;\\n margin-left: -50vw;\\n background: transparent;\\n overflow: hidden;\\n}\\n\\n\\\/* ========= MAIN NEWS SECTION ========= *\\\/\\n.bifa-news-section {\\n min-height: auto;\\n padding: 40px 0 60px 0;\\n position: relative;\\n background: transparent;\\n}\\n\\n\\\/* ========= ANIMATED BACKGROUND ========= *\\\/\\n.news-bg-animation {\\n position: absolute;\\n width: 100%;\\n height: 100%;\\n overflow: hidden;\\n z-index: 1;\\n top: 0;\\n left: 0;\\n}\\n\\n\\\/* \\u0417\\u043e\\u043b\\u043e\\u0442\\u044b\\u0435 \\u0447\\u0430\\u0441\\u0442\\u0438\\u0446\\u044b - \\u0442\\u0430\\u043a\\u0438\\u0435 \\u0436\\u0435 \\u043a\\u0430\\u043a \\u0432 \\u0432\\u0438\\u0434\\u0435\\u043e \\u0441\\u0435\\u043a\\u0446\\u0438\\u0438 *\\\/\\n.news-particle {\\n position: absolute;\\n width: 3px;\\n height: 3px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n border-radius: 50%;\\n animation: floatNews 20s infinite linear;\\n box-shadow: 0 0 6px rgba(212, 175, 55, 0.2);\\n opacity: 0.2;\\n will-change: transform;\\n}\\n\\n@keyframes floatNews {\\n 0% {\\n transform: translateY(100vh) translateX(0) rotate(0deg);\\n opacity: 0;\\n }\\n 10% { opacity: 0.3; }\\n 90% { opacity: 0.3; }\\n 100% {\\n transform: translateY(-100vh) translateX(80px) rotate(360deg);\\n opacity: 0;\\n }\\n}\\n\\n\\\/* \\u041f\\u043b\\u0430\\u0432\\u0430\\u044e\\u0449\\u0438\\u0435 \\u0433\\u0435\\u043e\\u043c\\u0435\\u0442\\u0440\\u0438\\u0447\\u0435\\u0441\\u043a\\u0438\\u0435 \\u0444\\u0438\\u0433\\u0443\\u0440\\u044b *\\\/\\n.floating-shape {\\n position: absolute;\\n border-radius: 50%;\\n filter: blur(120px);\\n animation: morphFloat 25s ease-in-out infinite;\\n pointer-events: none;\\n opacity: 0.5;\\n}\\n\\n.shape-news-1 {\\n width: 400px;\\n height: 400px;\\n background: radial-gradient(circle at 30% 30%, rgba(212, 175, 55, 0.08), transparent);\\n top: -200px;\\n right: -200px;\\n}\\n\\n.shape-news-2 {\\n width: 350px;\\n height: 350px;\\n background: radial-gradient(circle at 70% 70%, rgba(10, 31, 68, 0.05), transparent);\\n bottom: -175px;\\n left: -175px;\\n animation-delay: 8s;\\n}\\n\\n.shape-news-3 {\\n width: 300px;\\n height: 300px;\\n background: radial-gradient(circle at 50% 50%, rgba(29, 97, 67, 0.06), transparent);\\n top: 40%;\\n left: 60%;\\n animation-delay: 16s;\\n}\\n\\n@keyframes morphFloat {\\n 0%, 100% { \\n transform: translate(0, 0) scale(1) rotate(0deg);\\n filter: blur(100px);\\n }\\n 25% { \\n transform: translate(100px, -80px) scale(1.2) rotate(90deg);\\n filter: blur(120px);\\n }\\n 50% { \\n transform: translate(-80px, 100px) scale(0.8) rotate(180deg);\\n filter: blur(80px);\\n }\\n 75% { \\n transform: translate(-120px, -60px) scale(1.1) rotate(270deg);\\n filter: blur(110px);\\n }\\n}\\n\\n\\\/* ========= CONTAINER ========= *\\\/\\n.bifa-container {\\n max-width: 1400px;\\n margin: 0 auto;\\n padding: 0 20px;\\n position: relative;\\n z-index: 10;\\n}\\n\\n\\\/* ========= SECTION HEADER - Premium Style ========= *\\\/\\n.bifa-section-header {\\n text-align: center;\\n margin-bottom: 60px;\\n animation: fadeInDown 1.2s ease;\\n}\\n\\n.bifa-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), #ffd700);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n margin-bottom: 15px;\\n text-transform: uppercase;\\n position: relative;\\n display: inline-block;\\n cursor: pointer;\\n transition: all 0.3s ease;\\n}\\n\\n.bifa-section-title::after {\\n content: '';\\n position: absolute;\\n bottom: -10px;\\n left: 50%;\\n transform: translateX(-50%);\\n width: 0;\\n height: 3px;\\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700);\\n transition: width 0.4s ease;\\n}\\n\\n.bifa-section-title:hover {\\n transform: translateY(-3px);\\n filter: drop-shadow(0 10px 20px rgba(212, 175, 55, 0.3));\\n}\\n\\n.bifa-section-title:hover::after {\\n width: 100%;\\n}\\n\\n\\\/* \\u041f\\u043e\\u0434\\u0437\\u0430\\u0433\\u043e\\u043b\\u043e\\u0432\\u043e\\u043a \\u0441\\u0435\\u043a\\u0446\\u0438\\u0438 *\\\/\\n.bifa-section-subtitle {\\n font-family: var(--bifa-font-heading);\\n font-size: clamp(1.1rem, 2vw, 1.5rem);\\n color: var(--bifa-deep-navy);\\n font-weight: 600;\\n letter-spacing: 1.5px;\\n margin-bottom: 15px;\\n opacity: 0;\\n animation: fadeInUp 1.2s ease 0.3s forwards;\\n}\\n\\n.bifa-section-description {\\n max-width: 800px;\\n margin: 0 auto;\\n font-family: var(--bifa-font-body);\\n font-size: clamp(0.95rem, 1.3vw, 1.1rem);\\n line-height: 1.7;\\n color: #4a5568;\\n opacity: 0;\\n animation: fadeInUp 1.2s ease 0.6s forwards;\\n}\\n\\n\\\/* ========= LOADING STATE - Premium ========= *\\\/\\n.bifa-loading-container {\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n justify-content: center;\\n min-height: 400px;\\n gap: 30px;\\n}\\n\\n.bifa-loader {\\n width: 80px;\\n height: 80px;\\n position: relative;\\n}\\n\\n.bifa-loader-ring {\\n position: absolute;\\n width: 100%;\\n height: 100%;\\n border: 3px solid transparent;\\n border-radius: 50%;\\n animation: loaderSpin 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;\\n}\\n\\n.bifa-loader-ring:nth-child(1) {\\n border-top-color: var(--bifa-heritage-gold);\\n animation-delay: 0s;\\n}\\n\\n.bifa-loader-ring:nth-child(2) {\\n width: 70%;\\n height: 70%;\\n top: 15%;\\n left: 15%;\\n border-right-color: var(--bifa-deep-navy);\\n animation-delay: 0.2s;\\n animation-direction: reverse;\\n}\\n\\n.bifa-loader-ring:nth-child(3) {\\n width: 40%;\\n height: 40%;\\n top: 30%;\\n left: 30%;\\n border-bottom-color: var(--bifa-civic-green);\\n animation-delay: 0.4s;\\n}\\n\\n@keyframes loaderSpin {\\n 0% { \\n transform: rotate(0deg) scale(1);\\n }\\n 50% {\\n transform: rotate(180deg) scale(1.1);\\n }\\n 100% { \\n transform: rotate(360deg) scale(1);\\n }\\n}\\n\\n.loading-text {\\n font-family: var(--bifa-font-heading);\\n font-size: 1.2rem;\\n font-weight: 700;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n animation: textGlow 2s ease-in-out infinite;\\n}\\n\\n\\\/* ========= HERO NEWS CARD - Premium \\u0428\\u0418\\u0420\\u041e\\u041a\\u0418\\u0419 \\u0414\\u0418\\u0417\\u0410\\u0419\\u041d ========= *\\\/\\n.bifa-hero-news {\\n margin-bottom: 80px;\\n opacity: 0;\\n animation: fadeInUp 1.2s ease 0.2s forwards;\\n}\\n\\n.bifa-hero-card {\\n background: white;\\n backdrop-filter: blur(20px);\\n border-radius: 25px;\\n overflow: hidden;\\n box-shadow: 0 10px 40px rgba(10, 31, 68, 0.08);\\n transition: var(--bifa-transition);\\n cursor: pointer;\\n position: relative;\\n border: none;\\n}\\n\\n.bifa-hero-card::before {\\n content: '';\\n position: absolute;\\n top: 0;\\n left: 0;\\n right: 0;\\n height: 3px;\\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700, var(--bifa-heritage-gold));\\n transform: scaleX(0);\\n transition: transform 0.3s ease;\\n}\\n\\n.bifa-hero-card:hover::before {\\n transform: scaleX(1);\\n}\\n\\n.bifa-hero-card:hover {\\n transform: translateY(-8px);\\n box-shadow: 0 20px 60px rgba(10, 31, 68, 0.12);\\n}\\n\\n\\\/* \\u041d\\u041e\\u0412\\u042b\\u0419 \\u0428\\u0418\\u0420\\u041e\\u041a\\u0418\\u0419 \\u0414\\u0418\\u0417\\u0410\\u0419\\u041d \\u0414\\u041b\\u042f \\u0412\\u0421\\u0415\\u0425 \\u0423\\u0421\\u0422\\u0420\\u041e\\u0419\\u0421\\u0422\\u0412 *\\\/\\n.bifa-hero-wrapper {\\n display: block;\\n min-height: 650px;\\n}\\n\\n.bifa-hero-image {\\n position: relative;\\n background-size: cover;\\n background-position: center;\\n overflow: hidden;\\n height: 500px;\\n width: 100%;\\n}\\n\\n\\\/* \\u0413\\u0440\\u0430\\u0434\\u0438\\u0435\\u043d\\u0442\\u043d\\u044b\\u0439 \\u043e\\u0432\\u0435\\u0440\\u043b\\u0435\\u0439 \\u0441 \\u0430\\u043d\\u0438\\u043c\\u0430\\u0446\\u0438\\u0435\\u0439 *\\\/\\n.bifa-hero-image::before {\\n content: '';\\n position: absolute;\\n inset: 0;\\n background: linear-gradient(180deg, \\n transparent 0%, \\n rgba(10, 31, 68, 0.3) 60%,\\n rgba(10, 31, 68, 0.8) 100%\\n );\\n opacity: 0.6;\\n transition: opacity 0.3s ease;\\n}\\n\\n.bifa-hero-card:hover .bifa-hero-image::before {\\n opacity: 1;\\n}\\n\\n\\\/* \\u0417\\u043e\\u043b\\u043e\\u0442\\u043e\\u0439 \\u0430\\u043a\\u0446\\u0435\\u043d\\u0442 \\u043d\\u0430 \\u0438\\u0437\\u043e\\u0431\\u0440\\u0430\\u0436\\u0435\\u043d\\u0438\\u0438 *\\\/\\n.bifa-hero-image::after {\\n content: '';\\n position: absolute;\\n top: -50%;\\n left: -50%;\\n width: 200%;\\n height: 200%;\\n background: linear-gradient(45deg, \\n transparent 30%, \\n rgba(212, 175, 55, 0.2) 50%, \\n transparent 70%\\n );\\n transform: rotate(45deg) translateY(-100%);\\n transition: transform 0.8s ease;\\n}\\n\\n.bifa-hero-card:hover .bifa-hero-image::after {\\n transform: rotate(45deg) translateY(100%);\\n}\\n\\n.bifa-hero-image-overlay {\\n position: absolute;\\n top: 40px;\\n left: 40px;\\n display: flex;\\n gap: 20px;\\n z-index: 2;\\n flex-wrap: wrap;\\n}\\n\\n.bifa-hero-badge {\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n color: var(--bifa-deep-navy);\\n padding: 12px 28px;\\n border-radius: 35px;\\n font-family: var(--bifa-font-heading);\\n font-weight: 800;\\n font-size: 0.95rem;\\n text-transform: uppercase;\\n letter-spacing: 1.2px;\\n box-shadow: 0 10px 25px rgba(212, 175, 55, 0.3);\\n transition: all 0.3s ease;\\n}\\n\\n\\\/* \\u041f\\u0440\\u0438\\u043e\\u0440\\u0438\\u0442\\u0435\\u0442\\u043d\\u044b\\u0439 \\u0431\\u0435\\u0439\\u0434\\u0436 \\u0434\\u043b\\u044f \\u0441\\u0440\\u043e\\u0447\\u043d\\u044b\\u0445 \\u043d\\u043e\\u0432\\u043e\\u0441\\u0442\\u0435\\u0439 *\\\/\\n.bifa-hero-badge.urgent {\\n background: linear-gradient(135deg, #dc2626, #ef4444);\\n color: white;\\n box-shadow: 0 10px 25px rgba(220, 38, 38, 0.4);\\n animation: pulse-urgent 2s ease-in-out infinite;\\n}\\n\\n@keyframes pulse-urgent {\\n 0%, 100% { \\n transform: scale(1);\\n box-shadow: 0 10px 25px rgba(220, 38, 38, 0.4);\\n }\\n 50% { \\n transform: scale(1.05);\\n box-shadow: 0 15px 35px rgba(220, 38, 38, 0.6);\\n }\\n}\\n\\n.bifa-hero-badge:hover {\\n transform: translateY(-3px);\\n box-shadow: 0 15px 35px rgba(212, 175, 55, 0.4);\\n}\\n\\n.bifa-hero-date {\\n background: rgba(255, 255, 255, 0.95);\\n backdrop-filter: blur(10px);\\n color: var(--bifa-deep-navy);\\n padding: 12px 28px;\\n border-radius: 35px;\\n font-family: var(--bifa-font-body);\\n font-weight: 600;\\n font-size: 0.9rem;\\n box-shadow: 0 10px 25px rgba(10, 31, 68, 0.1);\\n}\\n\\n.bifa-hero-content {\\n padding: 60px 50px;\\n display: flex;\\n flex-direction: column;\\n justify-content: center;\\n align-items: center;\\n text-align: center;\\n background: linear-gradient(135deg, \\n rgba(255, 255, 255, 0.8) 0%, \\n rgba(248, 249, 250, 0.8) 100%\\n );\\n}\\n\\n.bifa-hero-title {\\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 line-height: 1.2;\\n margin-bottom: 25px;\\n position: relative;\\n text-align: center;\\n}\\n\\n.bifa-hero-title::after {\\n content: '';\\n position: absolute;\\n bottom: -10px;\\n left: 50%;\\n transform: translateX(-50%);\\n width: 60px;\\n height: 3px;\\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700);\\n border-radius: 2px;\\n}\\n\\n.bifa-hero-excerpt {\\n font-family: var(--bifa-font-body);\\n font-size: 1.15rem;\\n color: #4a5568;\\n line-height: 1.8;\\n margin-bottom: 35px;\\n text-align: center;\\n max-width: 900px;\\n}\\n\\n.bifa-hero-footer {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n gap: 30px;\\n width: 100%;\\n}\\n\\n.bifa-hero-btn {\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n gap: 10px;\\n background: var(--bifa-deep-navy);\\n color: #FFD700;\\n padding: 18px 45px;\\n border-radius: 50px;\\n font-family: var(--bifa-font-heading);\\n font-weight: 700;\\n font-size: 0.9rem;\\n text-decoration: none;\\n text-transform: uppercase;\\n letter-spacing: 1.5px;\\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\\n box-shadow: 0 4px 15px rgba(10, 31, 68, 0.2);\\n position: relative;\\n overflow: hidden;\\n border: 1.5px solid #FFD700;\\n min-width: 180px;\\n text-align: center;\\n}\\n\\n.bifa-hero-btn span {\\n position: relative;\\n z-index: 1;\\n background: linear-gradient(135deg, #FFD700, #FFA500);\\n -webkit-background-clip: text;\\n background-clip: text;\\n -webkit-text-fill-color: transparent;\\n font-weight: 800;\\n text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);\\n}\\n\\n.bifa-hero-btn::before {\\n content: '';\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 0;\\n height: 100%;\\n background: linear-gradient(135deg, #FFD700, #FFA500);\\n transition: width 0.4s ease;\\n z-index: 0;\\n}\\n\\n.bifa-hero-btn::after {\\n content: '';\\n position: absolute;\\n inset: -2px;\\n background: linear-gradient(135deg, #FFD700, #FFA500);\\n border-radius: 50px;\\n opacity: 0.3;\\n filter: blur(10px);\\n z-index: -1;\\n transition: opacity 0.4s ease;\\n}\\n\\n.bifa-hero-btn:hover {\\n transform: translateY(-2px);\\n box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);\\n border-color: transparent;\\n}\\n\\n.bifa-hero-btn:hover span {\\n background: var(--bifa-deep-navy);\\n -webkit-background-clip: text;\\n background-clip: text;\\n -webkit-text-fill-color: transparent;\\n text-shadow: none;\\n}\\n\\n.bifa-hero-btn:hover::before {\\n width: 100%;\\n}\\n\\n.bifa-hero-btn:hover::after {\\n opacity: 0.5;\\n}\\n\\n.bifa-hero-btn:active {\\n transform: translateY(0);\\n box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);\\n}\\n\\n.bifa-hero-btn svg {\\n width: 18px;\\n height: 18px;\\n transition: transform 0.3s ease;\\n stroke: #FFD700;\\n position: relative;\\n z-index: 1;\\n filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.5));\\n}\\n\\n.bifa-hero-btn:hover svg {\\n transform: translateX(5px);\\n stroke: var(--bifa-deep-navy);\\n filter: none;\\n}\\n\\n\\\/* Stats \\u044d\\u043b\\u0435\\u043c\\u0435\\u043d\\u0442 \\u0432 hero *\\\/\\n.bifa-hero-stats {\\n display: flex;\\n gap: 40px;\\n margin-top: 30px;\\n padding-top: 30px;\\n border-top: 1px solid rgba(212, 175, 55, 0.2);\\n justify-content: center;\\n width: 100%;\\n}\\n\\n.hero-stat-item {\\n display: flex;\\n align-items: center;\\n gap: 12px;\\n}\\n\\n.hero-stat-icon {\\n width: 40px;\\n height: 40px;\\n background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(255, 215, 0, 0.1));\\n border-radius: 50%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.hero-stat-icon svg {\\n width: 20px;\\n height: 20px;\\n stroke: var(--bifa-heritage-gold);\\n stroke-width: 2;\\n}\\n\\n.hero-stat-text {\\n font-family: var(--bifa-font-body);\\n font-size: 0.9rem;\\n color: var(--bifa-gray);\\n}\\n\\n.hero-stat-number {\\n font-family: var(--bifa-font-heading);\\n font-weight: 700;\\n color: var(--bifa-deep-navy);\\n}\\n\\n\\\/* ========= NEWS CAROUSEL - Premium Style ========= *\\\/\\n.bifa-news-carousel {\\n position: relative;\\n opacity: 0;\\n animation: fadeInUp 1.2s ease 0.4s forwards;\\n}\\n\\n.bifa-carousel-header {\\n display: flex;\\n justify-content: space-between;\\n align-items: center;\\n margin-bottom: 40px;\\n}\\n\\n.bifa-carousel-title {\\n font-family: var(--bifa-font-heading);\\n font-size: 1.8rem;\\n font-weight: 800;\\n background: linear-gradient(135deg, var(--bifa-deep-navy), #162e5a);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n position: relative;\\n}\\n\\n.bifa-carousel-controls {\\n display: flex;\\n gap: 20px;\\n}\\n\\n.bifa-carousel-btn {\\n width: 48px;\\n height: 48px;\\n border: 2px solid transparent;\\n background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 249, 250, 0.95));\\n backdrop-filter: blur(10px);\\n border-radius: 50%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n cursor: pointer;\\n transition: var(--bifa-transition);\\n box-shadow: 0 10px 30px rgba(10, 31, 68, 0.1);\\n position: relative;\\n overflow: hidden;\\n}\\n\\n.bifa-carousel-btn::before {\\n content: '';\\n position: absolute;\\n inset: -2px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n border-radius: 50%;\\n opacity: 0;\\n transition: opacity 0.3s ease;\\n z-index: -1;\\n}\\n\\n.bifa-carousel-btn:hover::before {\\n opacity: 1;\\n}\\n\\n.bifa-carousel-btn:hover {\\n transform: scale(1.1);\\n box-shadow: 0 15px 40px rgba(212, 175, 55, 0.3);\\n}\\n\\n.bifa-carousel-btn svg {\\n width: 20px;\\n height: 20px;\\n stroke: var(--bifa-deep-navy);\\n stroke-width: 3;\\n transition: all 0.3s ease;\\n}\\n\\n.bifa-carousel-btn:hover svg {\\n stroke: var(--bifa-deep-navy);\\n transform: scale(1.1);\\n}\\n\\n.bifa-carousel-btn:active {\\n transform: scale(0.95);\\n}\\n\\n\\\/* News Cards Container *\\\/\\n.bifa-carousel-wrapper {\\n overflow: hidden;\\n margin: 0 -15px;\\n padding: 10px 0;\\n}\\n\\n.bifa-carousel-track {\\n display: flex;\\n gap: 30px;\\n transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);\\n padding: 10px 15px;\\n}\\n\\n\\\/* Individual News Card - Premium Style *\\\/\\n.bifa-news-card {\\n flex: 0 0 calc(33.333% - 20px);\\n background: white;\\n backdrop-filter: blur(20px);\\n border-radius: 20px;\\n overflow: hidden;\\n box-shadow: 0 5px 20px rgba(10, 31, 68, 0.06);\\n transition: var(--bifa-transition);\\n cursor: pointer;\\n position: relative;\\n border: none;\\n}\\n\\n.bifa-news-card::before {\\n content: '';\\n position: absolute;\\n top: 0;\\n left: 0;\\n right: 0;\\n height: 2px;\\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent);\\n transform: scaleX(0);\\n transition: transform 0.3s ease;\\n}\\n\\n.bifa-news-card:hover::before {\\n transform: scaleX(1);\\n}\\n\\n.bifa-news-card:hover {\\n transform: translateY(-8px) scale(1.02);\\n box-shadow: 0 15px 40px rgba(10, 31, 68, 0.12);\\n}\\n\\n.bifa-news-image {\\n position: relative;\\n height: 200px;\\n background-size: cover;\\n background-position: center;\\n overflow: hidden;\\n}\\n\\n.bifa-news-image::before {\\n content: '';\\n position: absolute;\\n inset: 0;\\n background: linear-gradient(180deg, \\n transparent 0%, \\n transparent 50%, \\n rgba(10, 31, 68, 0.9) 100%\\n );\\n transition: opacity 0.3s ease;\\n}\\n\\n.bifa-news-card:hover .bifa-news-image::before {\\n opacity: 0.8;\\n}\\n\\n\\\/* Shimmer effect on hover *\\\/\\n.bifa-news-image::after {\\n content: '';\\n position: absolute;\\n top: -50%;\\n left: -75%;\\n width: 50%;\\n height: 200%;\\n background: linear-gradient(90deg, \\n transparent 0%, \\n rgba(255, 255, 255, 0.3) 50%, \\n transparent 100%\\n );\\n transform: skewX(-25deg);\\n transition: left 0.8s ease;\\n}\\n\\n.bifa-news-card:hover .bifa-news-image::after {\\n left: 125%;\\n}\\n\\n.bifa-news-badge {\\n position: absolute;\\n top: 20px;\\n left: 20px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n color: var(--bifa-deep-navy);\\n padding: 8px 20px;\\n border-radius: 25px;\\n font-family: var(--bifa-font-heading);\\n font-weight: 800;\\n font-size: 0.75rem;\\n text-transform: uppercase;\\n letter-spacing: 1px;\\n z-index: 2;\\n box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);\\n transition: all 0.3s ease;\\n}\\n\\n\\\/* \\u041f\\u0440\\u0438\\u043e\\u0440\\u0438\\u0442\\u0435\\u0442\\u043d\\u044b\\u0439 \\u0431\\u0435\\u0439\\u0434\\u0436 \\u0434\\u043b\\u044f \\u0441\\u0440\\u043e\\u0447\\u043d\\u044b\\u0445 \\u043d\\u043e\\u0432\\u043e\\u0441\\u0442\\u0435\\u0439 \\u0432 \\u043a\\u0430\\u0440\\u0443\\u0441\\u0435\\u043b\\u0438 *\\\/\\n.bifa-news-badge.urgent {\\n background: linear-gradient(135deg, #dc2626, #ef4444);\\n color: white;\\n box-shadow: 0 8px 20px rgba(220, 38, 38, 0.4);\\n animation: pulse-urgent 2s ease-in-out infinite;\\n}\\n\\n.bifa-news-card:hover .bifa-news-badge {\\n transform: translateY(-2px);\\n box-shadow: 0 12px 30px rgba(212, 175, 55, 0.4);\\n}\\n\\n.bifa-news-content {\\n padding: 30px;\\n}\\n\\n.bifa-news-date {\\n font-family: var(--bifa-font-body);\\n font-size: 0.85rem;\\n color: var(--bifa-gray);\\n margin-bottom: 12px;\\n display: flex;\\n align-items: center;\\n gap: 8px;\\n}\\n\\n.bifa-news-date::before {\\n content: '';\\n width: 4px;\\n height: 4px;\\n background: var(--bifa-heritage-gold);\\n border-radius: 50%;\\n}\\n\\n.bifa-news-title {\\n font-family: var(--bifa-font-heading);\\n font-size: 1.25rem;\\n font-weight: 800;\\n color: var(--bifa-deep-navy);\\n line-height: 1.4;\\n margin-bottom: 15px;\\n display: -webkit-box;\\n -webkit-line-clamp: 2;\\n -webkit-box-orient: vertical;\\n overflow: hidden;\\n transition: color 0.3s ease;\\n}\\n\\n.bifa-news-card:hover .bifa-news-title {\\n background: linear-gradient(135deg, var(--bifa-deep-navy), #162e5a);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n}\\n\\n.bifa-news-excerpt {\\n font-family: var(--bifa-font-body);\\n font-size: 0.95rem;\\n color: #4a5568;\\n line-height: 1.7;\\n display: -webkit-box;\\n -webkit-line-clamp: 3;\\n -webkit-box-orient: vertical;\\n overflow: hidden;\\n margin-bottom: 25px;\\n}\\n\\n.bifa-news-link {\\n display: inline-flex;\\n align-items: center;\\n gap: 10px;\\n color: var(--bifa-heritage-gold);\\n font-family: var(--bifa-font-heading);\\n font-weight: 700;\\n font-size: 0.9rem;\\n text-decoration: none;\\n text-transform: uppercase;\\n letter-spacing: 0.5px;\\n transition: var(--bifa-transition);\\n position: relative;\\n}\\n\\n.bifa-news-link::after {\\n content: '';\\n position: absolute;\\n bottom: -2px;\\n left: 0;\\n width: 0;\\n height: 2px;\\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700);\\n transition: width 0.3s ease;\\n}\\n\\n.bifa-news-link:hover {\\n gap: 15px;\\n}\\n\\n.bifa-news-link:hover::after {\\n width: 100%;\\n}\\n\\n.bifa-news-link svg {\\n width: 16px;\\n height: 16px;\\n stroke: currentColor;\\n stroke-width: 2;\\n transition: transform 0.3s ease;\\n}\\n\\n.bifa-news-link:hover svg {\\n transform: translateX(3px);\\n}\\n\\n\\\/* ========= \\u0418\\u0421\\u041f\\u0420\\u0410\\u0412\\u041b\\u0415\\u041d\\u041e: \\u041c\\u0435\\u0442\\u043a\\u0430 \\u0434\\u0430\\u0442\\u044b \\u0441\\u043e\\u0431\\u044b\\u0442\\u0438\\u044f - \\u0411\\u0415\\u0417 \\u041f\\u0415\\u0420\\u0415\\u0421\\u0415\\u0427\\u0415\\u041d\\u0418\\u0419 ========= *\\\/\\n.event-date-label {\\n position: absolute;\\n bottom: 20px;\\n left: 20px;\\n background: linear-gradient(135deg, var(--bifa-civic-green), #248a5f);\\n color: white;\\n padding: 8px 18px;\\n border-radius: 25px;\\n font-family: var(--bifa-font-heading);\\n font-weight: 700;\\n font-size: 0.7rem;\\n text-transform: uppercase;\\n letter-spacing: 0.8px;\\n z-index: 2;\\n box-shadow: 0 8px 20px rgba(29, 97, 67, 0.4);\\n white-space: nowrap;\\n transition: all 0.3s ease;\\n}\\n\\n.bifa-news-card:hover .event-date-label {\\n transform: translateY(-2px);\\n box-shadow: 0 12px 30px rgba(29, 97, 67, 0.5);\\n}\\n\\n\\\/* ========= ERROR STATE - Premium ========= *\\\/\\n.bifa-error-container {\\n display: none;\\n text-align: center;\\n padding: 80px 20px;\\n animation: fadeIn 0.5s ease-out;\\n}\\n\\n.bifa-error-icon {\\n width: 100px;\\n height: 100px;\\n margin: 0 auto 30px;\\n background: linear-gradient(135deg, #FF6B6B, #FF4757);\\n border-radius: 50%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n box-shadow: 0 20px 50px rgba(255, 71, 87, 0.3);\\n animation: errorPulse 2s ease-in-out infinite;\\n}\\n\\n@keyframes errorPulse {\\n 0%, 100% {\\n transform: scale(1);\\n box-shadow: 0 20px 50px rgba(255, 71, 87, 0.3);\\n }\\n 50% {\\n transform: scale(1.05);\\n box-shadow: 0 25px 60px rgba(255, 71, 87, 0.4);\\n }\\n}\\n\\n.bifa-error-icon svg {\\n width: 50px;\\n height: 50px;\\n stroke: white;\\n stroke-width: 3;\\n}\\n\\n.bifa-error-title {\\n font-family: var(--bifa-font-heading);\\n font-size: 2rem;\\n font-weight: 800;\\n color: var(--bifa-deep-navy);\\n margin-bottom: 20px;\\n}\\n\\n.bifa-error-message {\\n font-family: var(--bifa-font-body);\\n font-size: 1.15rem;\\n color: #4a5568;\\n margin-bottom: 40px;\\n max-width: 500px;\\n margin-left: auto;\\n margin-right: auto;\\n line-height: 1.7;\\n}\\n\\n.bifa-retry-btn {\\n display: inline-flex;\\n align-items: center;\\n gap: 10px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n color: var(--bifa-deep-navy);\\n padding: 15px 35px;\\n border-radius: 50px;\\n font-family: var(--bifa-font-heading);\\n font-weight: 800;\\n font-size: 0.9rem;\\n text-decoration: none;\\n cursor: pointer;\\n border: none;\\n text-transform: uppercase;\\n letter-spacing: 1px;\\n transition: var(--bifa-transition);\\n box-shadow: 0 15px 40px rgba(212, 175, 55, 0.3);\\n position: relative;\\n overflow: hidden;\\n}\\n\\n.bifa-retry-btn::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}\\n\\n.bifa-retry-btn:hover {\\n transform: translateY(-3px);\\n box-shadow: 0 20px 50px rgba(212, 175, 55, 0.4);\\n}\\n\\n.bifa-retry-btn:hover::before {\\n width: 300px;\\n height: 300px;\\n}\\n\\n.bifa-retry-btn svg {\\n width: 20px;\\n height: 20px;\\n transition: transform 0.3s ease;\\n}\\n\\n.bifa-retry-btn:hover svg {\\n transform: rotate(180deg);\\n}\\n\\n\\\/* ========= ANIMATIONS ========= *\\\/\\n@keyframes fadeIn {\\n from { opacity: 0; }\\n to { opacity: 1; }\\n}\\n\\n@keyframes fadeInDown {\\n from {\\n opacity: 0;\\n transform: translateY(-40px);\\n }\\n to {\\n opacity: 1;\\n transform: translateY(0);\\n }\\n}\\n\\n@keyframes fadeInUp {\\n from {\\n opacity: 0;\\n transform: translateY(40px);\\n }\\n to {\\n opacity: 1;\\n transform: translateY(0);\\n }\\n}\\n\\n@keyframes textGlow {\\n 0%, 100% {\\n text-shadow: 0 0 5px rgba(212, 175, 55, 0.5);\\n }\\n 50% {\\n text-shadow: 0 0 20px rgba(212, 175, 55, 0.8), 0 0 30px rgba(212, 175, 55, 0.6);\\n }\\n}\\n\\n\\\/* ========= RESPONSIVE ========= *\\\/\\n@media (max-width: 1200px) {\\n .bifa-news-card {\\n flex: 0 0 calc(50% - 15px);\\n }\\n}\\n\\n@media (max-width: 992px) {\\n \\\/* Hero \\u043e\\u0441\\u0442\\u0430\\u0435\\u0442\\u0441\\u044f \\u0448\\u0438\\u0440\\u043e\\u043a\\u0438\\u043c \\u043d\\u0430 \\u043f\\u043b\\u0430\\u043d\\u0448\\u0435\\u0442\\u0430\\u0445 *\\\/\\n .bifa-hero-image {\\n height: 400px;\\n }\\n \\n .bifa-hero-content {\\n padding: 40px;\\n }\\n}\\n\\n@media (max-width: 768px) {\\n .bifa-news-section {\\n padding: 50px 0 60px 0;\\n }\\n \\n .bifa-section-header {\\n margin-bottom: 50px;\\n }\\n \\n .bifa-section-title {\\n font-size: 1.75rem;\\n }\\n \\n .bifa-news-card {\\n flex: 0 0 calc(100% - 20px);\\n }\\n \\n .bifa-carousel-header {\\n flex-direction: column;\\n gap: 25px;\\n align-items: flex-start;\\n }\\n \\n .bifa-hero-content {\\n padding: 35px 25px;\\n }\\n \\n .bifa-hero-title {\\n font-size: 1.6rem;\\n }\\n \\n .bifa-hero-excerpt {\\n font-size: 0.95rem;\\n }\\n \\n .bifa-carousel-controls {\\n gap: 15px;\\n }\\n \\n .bifa-hero-content {\\n padding: 25px 20px;\\n }\\n \\n .bifa-hero-title {\\n font-size: 1.4rem;\\n margin-bottom: 15px;\\n }\\n \\n .bifa-hero-excerpt {\\n font-size: 0.9rem;\\n margin-bottom: 25px;\\n }\\n \\n .hero-stat-item {\\n gap: 8px;\\n }\\n \\n .hero-stat-icon {\\n width: 35px;\\n height: 35px;\\n }\\n \\n .hero-stat-icon svg {\\n width: 18px;\\n height: 18px;\\n }\\n \\n .hero-stat-text {\\n font-size: 0.8rem;\\n }\\n \\n .bifa-carousel-btn {\\n width: 44px;\\n height: 44px;\\n }\\n \\n \\\/* \\u0418\\u0441\\u043f\\u0440\\u0430\\u0432\\u043b\\u0435\\u043d\\u0438\\u0435 \\u0434\\u043b\\u044f \\u043c\\u043e\\u0431\\u0438\\u043b\\u044c\\u043d\\u044b\\u0445 *\\\/\\n .event-date-label {\\n font-size: 0.65rem;\\n padding: 6px 14px;\\n }\\n}\\n\\n@media (max-width: 480px) {\\n .bifa-news-section {\\n padding: 40px 0 50px 0;\\n }\\n \\n .bifa-section-title {\\n font-size: 2rem;\\n }\\n \\n .bifa-section-subtitle {\\n font-size: 1.1rem;\\n letter-spacing: 1px;\\n }\\n \\n .bifa-hero-image {\\n height: 300px;\\n }\\n \\n .bifa-hero-image-overlay {\\n top: 20px;\\n left: 20px;\\n flex-direction: column;\\n gap: 10px;\\n }\\n \\n .bifa-hero-badge,\\n .bifa-hero-date {\\n font-size: 0.7rem;\\n padding: 6px 14px;\\n letter-spacing: 0.5px;\\n }\\n \\n .bifa-hero-footer {\\n flex-direction: column;\\n align-items: center;\\n gap: 15px;\\n width: 100%;\\n }\\n \\n .bifa-hero-btn {\\n width: auto;\\n max-width: 220px;\\n justify-content: center;\\n padding: 14px 25px;\\n font-size: 0.85rem;\\n letter-spacing: 1px;\\n }\\n \\n .bifa-hero-btn::after {\\n display: none;\\n }\\n \\n .bifa-hero-btn span {\\n text-shadow: none;\\n }\\n \\n \\n .bifa-hero-wrapper {\\n min-height: auto;\\n }\\n \\n .bifa-hero-stats {\\n margin-top: 20px;\\n padding-top: 20px;\\n gap: 25px;\\n }\\n \\n .bifa-carousel-btn {\\n width: 42px;\\n height: 42px;\\n }\\n \\n .bifa-news-content {\\n padding: 20px;\\n }\\n \\n .bifa-error-container {\\n padding: 60px 20px;\\n }\\n \\n \\\/* \\u0418\\u0441\\u043f\\u0440\\u0430\\u0432\\u043b\\u0435\\u043d\\u0438\\u0435 \\u0434\\u043b\\u044f \\u043c\\u043e\\u0431\\u0438\\u043b\\u044c\\u043d\\u044b\\u0445 - \\u043c\\u0435\\u0442\\u043a\\u0430 \\u0441\\u043e\\u0431\\u044b\\u0442\\u0438\\u044f \\u0432\\u043d\\u0438\\u0437\\u0443 \\u0441\\u043b\\u0435\\u0432\\u0430 *\\\/\\n .event-date-label {\\n font-size: 0.6rem;\\n padding: 5px 12px;\\n bottom: 15px;\\n left: 15px;\\n }\\n}\\n<\\\/style>\\n<\\\/head>\\n<body>\\n\\n<\/p>\n<div class=\"\\\"news-section-wrapper\\\"\">\\n \\n <\/p>\n<section class=\"\\\"bifa-news-section\\\"\">\\n \\n <\/p>\n<div class=\"\\\"news-bg-animation\\\"\">\\n \\n <\/p>\n<div class=\"\\\"floating-shape\" shape-news-1\\\"><\\\/div>\\n <\/p>\n<div class=\"\\\"floating-shape\" shape-news-2\\\"><\\\/div>\\n <\/p>\n<div class=\"\\\"floating-shape\" shape-news-3\\\"><\\\/div>\\n \\n <\\\/div>\\n\\n <\/p>\n<div class=\"\\\"bifa-container\\\"\">\\n \\n <\/p>\n<div class=\"\\\"bifa-section-header\\\"\">\\n <\/p>\n<h2 class=\"\\\"bifa-section-title\\\"\">BIFA+ News Center<\\\/h2>\\n <\/p>\n<p class=\"\\\"bifa-section-subtitle\\\"\">Latest Updates & Stories<\\\/p>\\n <\/p>\n<p class=\"\\\"bifa-section-description\\\"\">\\n BIFA+ News \\u2014 where the game unites nations.\\n <\\\/p>\\n <\\\/div>\\n\\n \\n <\/p>\n<div id=\"\\\"bifaLoadingState\\\"\" class=\"\\\"bifa-loading-container\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-loader\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-loader-ring\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-loader-ring\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-loader-ring\\\"\"><\\\/div>\\n <\\\/div>\\n <\/p>\n<p class=\"\\\"loading-text\\\"\">Loading Latest Stories...<\\\/p>\\n <\\\/div>\\n\\n \\n <\/p>\n<div id=\"\\\"bifaNewsContent\\\"\" class=\"\\\"bifa-news-content\\\"\" style=\"\\\"display:\" none;\\\">\\n \\n <\/p>\n<div id=\"\\\"bifaHeroNews\\\"\" class=\"\\\"bifa-hero-news\\\"\">\\n \\n <\\\/div>\\n\\n \\n <\/p>\n<div class=\"\\\"bifa-news-carousel\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-carousel-header\\\"\">\\n <\/p>\n<h3 class=\"\\\"bifa-carousel-title\\\"\">More Stories<\\\/h3>\\n <\/p>\n<div class=\"\\\"bifa-carousel-controls\\\"\">\\n <button class=\"\\\"bifa-carousel-btn\\\"\" id=\"\\\"bifaPrevBtn\\\"\" aria-label=\"\\\"Previous\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M15\" 18l9 12l15 6\\\" stroke=\"\\\"currentColor\\\"\" stroke-linecap=\"\\\"round\\\"\" stroke-linejoin=\"\\\"round\\\"\\\/\">\\n <\\\/svg>\\n <\\\/button>\\n <button class=\"\\\"bifa-carousel-btn\\\"\" id=\"\\\"bifaNextBtn\\\"\" aria-label=\"\\\"Next\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M9\" 18l15 12l9 6\\\" stroke=\"\\\"currentColor\\\"\" stroke-linecap=\"\\\"round\\\"\" stroke-linejoin=\"\\\"round\\\"\\\/\">\\n <\\\/svg>\\n <\\\/button>\\n <\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-carousel-wrapper\\\"\">\\n <\/p>\n<div id=\"\\\"bifaCarouselTrack\\\"\" class=\"\\\"bifa-carousel-track\\\"\">\\n \\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n\\n \\n <\/p>\n<div id=\"\\\"bifaErrorState\\\"\" class=\"\\\"bifa-error-container\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-error-icon\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M12\" 9v13m12 17h12.01m21 12c21 16.9706 21 12 21c7.02944 3 12c3 7.02944 3c16.9706 12z\\\" stroke =\"\\\"currentColor\\\"\" stroke-linecap =\"\\\"round\\\"\" stroke-linejoin =\"\\\"round\\\"\\\/\">\\n <\\\/svg>\\n <\\\/div>\\n <\/p>\n<h3 class=\"\\\"bifa-error-title\\\"\">Unable to Load News<\\\/h3>\\n <\/p>\n<p class=\"\\\"bifa-error-message\\\"\">We're having trouble fetching the latest stories. Please check your connection and try again.<\\\/p>\\n <button class=\"\\\"bifa-retry-btn\\\"\" onclick=\"\\\"loadBifaNews()\\\"\">\\n <svg width=\"\\\"20\\\"\" height=\"\\\"20\\\"\" viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M1\" 4v10h7m23 20v14h17m20.49 9c19.62 5.33 16.31 2.5 12.23 2.5c7.09 2.7 7.17 3.04 12.5c3.38 17.83 8.09 22 13.5 22c17.83 21.53 19.19 22.68 15.36m12 8v12l15 15\\\" stroke =\"\\\"currentColor\\\"\" stroke-width =\"\\\"2\\\"\" stroke-linecap=\"\\\"round\\\"\" stroke-linejoin=\"\\\"round\\\"\\\/\">\\n <\\\/svg>\\n <span>Retry<\\\/span>\\n <\\\/button>\\n <\\\/div>\\n <\\\/div>\\n <\\\/section>\\n<\\\/div>\\n\\n<script>\\n\\\/\\\/ BIFA+ Premium News Module - \\u0423\\u043b\\u0443\\u0447\\u0448\\u0435\\u043d\\u043d\\u044b\\u0439 \\u043f\\u0430\\u0440\\u0441\\u0438\\u043d\\u0433 \\u0438\\u0437 \\u0432\\u0442\\u043e\\u0440\\u043e\\u0433\\u043e \\u0444\\u0430\\u0439\\u043b\\u0430\\nconst BifaNews = {\\n \\\/\\\/ Configuration\\n config: {\\n apiUrl: 'https:\\\/\\\/bifa.ai\\\/wp-json\\\/wp\\\/v2\\\/bifa_news_events',\\n perPage: 20,\\n \\\/\\\/ \\u041e\\u0431\\u043d\\u043e\\u0432\\u043b\\u0435\\u043d\\u043d\\u044b\\u0435 \\u043f\\u0430\\u0440\\u0430\\u043c\\u0435\\u0442\\u0440\\u044b \\u0434\\u043b\\u044f \\u043b\\u0443\\u0447\\u0448\\u0435\\u0433\\u043e \\u043f\\u0430\\u0440\\u0441\\u0438\\u043d\\u0433\\u0430\\n newsParams: '_embed&per_page=20&acf_format=standard&orderby=date&order=desc',\\n carouselIndex: 0,\\n cardsPerView: 3,\\n newsData: []\\n },\\n\\n \\\/\\\/ Initialize\\n init() {\\n this.createParticles();\\n this.setupEventListeners();\\n this.loadNews();\\n this.updateCardsPerView();\\n window.addEventListener('resize', () => this.updateCardsPerView());\\n },\\n\\n \\\/\\\/ Create golden particles\\n createParticles() {\\n const particlesContainer = document.querySelector('.news-bg-animation');\\n const particleCount = 10;\\n\\n for (let i = 0; i < particleCount; i++) {\\n const particle = document.createElement('div');\\n particle.className = 'news-particle';\\n particle.style.left = Math.random() * 100 + '%';\\n particle.style.animationDelay = Math.random() * 18 + 's';\\n particle.style.animationDuration = (15 + Math.random() * 8) + '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\\n \\\/\\\/ Setup event listeners\\n setupEventListeners() {\\n const prevBtn = document.getElementById('bifaPrevBtn');\\n const nextBtn = document.getElementById('bifaNextBtn');\\n \\n if (prevBtn) prevBtn.addEventListener('click', () => this.navigateCarousel('prev'));\\n if (nextBtn) nextBtn.addEventListener('click', () => this.navigateCarousel('next'));\\n \\n \\\/\\\/ Touch swipe \\u0434\\u043b\\u044f \\u043c\\u043e\\u0431\\u0438\\u043b\\u044c\\u043d\\u044b\\u0445 \\u0443\\u0441\\u0442\\u0440\\u043e\\u0439\\u0441\\u0442\\u0432\\n this.setupTouchSwipe();\\n },\\n\\n \\\/\\\/ Touch swipe functionality \\u0434\\u043b\\u044f \\u043a\\u0430\\u0440\\u0443\\u0441\\u0435\\u043b\\u0438\\n setupTouchSwipe() {\\n const carouselWrapper = document.querySelector('.bifa-carousel-wrapper');\\n if (!carouselWrapper) return;\\n\\n let touchStartX = 0;\\n let touchEndX = 0;\\n let touchStartY = 0;\\n let touchEndY = 0;\\n let isSwiping = false;\\n const minSwipeDistance = 50; \\\/\\\/ \\u041c\\u0438\\u043d\\u0438\\u043c\\u0430\\u043b\\u044c\\u043d\\u043e\\u0435 \\u0440\\u0430\\u0441\\u0441\\u0442\\u043e\\u044f\\u043d\\u0438\\u0435 \\u0441\\u0432\\u0430\\u0439\\u043f\\u0430 \\u0432 \\u043f\\u0438\\u043a\\u0441\\u0435\\u043b\\u044f\\u0445\\n\\n \\\/\\\/ Touch start\\n carouselWrapper.addEventListener('touchstart', (e) => {\\n touchStartX = e.touches[0].clientX;\\n touchStartY = e.touches[0].clientY;\\n isSwiping = true;\\n }, { passive: true });\\n\\n \\\/\\\/ Touch move - \\u0434\\u043b\\u044f \\u043f\\u0440\\u0435\\u0434\\u043e\\u0442\\u0432\\u0440\\u0430\\u0449\\u0435\\u043d\\u0438\\u044f \\u0441\\u043a\\u0440\\u043e\\u043b\\u043b\\u0430 \\u043f\\u0440\\u0438 \\u0433\\u043e\\u0440\\u0438\\u0437\\u043e\\u043d\\u0442\\u0430\\u043b\\u044c\\u043d\\u043e\\u043c \\u0441\\u0432\\u0430\\u0439\\u043f\\u0435\\n carouselWrapper.addEventListener('touchmove', (e) => {\\n if (!isSwiping) return;\\n \\n touchEndX = e.touches[0].clientX;\\n touchEndY = e.touches[0].clientY;\\n \\n const diffX = Math.abs(touchEndX - touchStartX);\\n const diffY = Math.abs(touchEndY - touchStartY);\\n \\n \\\/\\\/ \\u0415\\u0441\\u043b\\u0438 \\u0433\\u043e\\u0440\\u0438\\u0437\\u043e\\u043d\\u0442\\u0430\\u043b\\u044c\\u043d\\u044b\\u0439 \\u0441\\u0432\\u0430\\u0439\\u043f \\u0431\\u043e\\u043b\\u044c\\u0448\\u0435 \\u0432\\u0435\\u0440\\u0442\\u0438\\u043a\\u0430\\u043b\\u044c\\u043d\\u043e\\u0433\\u043e, \\u043f\\u0440\\u0435\\u0434\\u043e\\u0442\\u0432\\u0440\\u0430\\u0449\\u0430\\u0435\\u043c \\u0441\\u043a\\u0440\\u043e\\u043b\\u043b\\n if (diffX > diffY && diffX > 10) {\\n e.preventDefault();\\n }\\n }, { passive: false });\\n\\n \\\/\\\/ Touch end\\n carouselWrapper.addEventListener('touchend', (e) => {\\n if (!isSwiping) return;\\n \\n const diffX = touchEndX - touchStartX;\\n const diffY = Math.abs(touchEndY - touchStartY);\\n \\n \\\/\\\/ \\u041f\\u0440\\u043e\\u0432\\u0435\\u0440\\u044f\\u0435\\u043c \\u0447\\u0442\\u043e \\u044d\\u0442\\u043e \\u0433\\u043e\\u0440\\u0438\\u0437\\u043e\\u043d\\u0442\\u0430\\u043b\\u044c\\u043d\\u044b\\u0439 \\u0441\\u0432\\u0430\\u0439\\u043f (\\u0430 \\u043d\\u0435 \\u0432\\u0435\\u0440\\u0442\\u0438\\u043a\\u0430\\u043b\\u044c\\u043d\\u044b\\u0439 \\u0441\\u043a\\u0440\\u043e\\u043b\\u043b)\\n if (Math.abs(diffX) > diffY && Math.abs(diffX) > minSwipeDistance) {\\n if (diffX > 0) {\\n \\\/\\\/ \\u0421\\u0432\\u0430\\u0439\\u043f \\u0432\\u043f\\u0440\\u0430\\u0432\\u043e - \\u043f\\u0440\\u0435\\u0434\\u044b\\u0434\\u0443\\u0449\\u0438\\u0439 \\u0441\\u043b\\u0430\\u0439\\u0434\\n this.navigateCarousel('prev');\\n } else {\\n \\\/\\\/ \\u0421\\u0432\\u0430\\u0439\\u043f \\u0432\\u043b\\u0435\\u0432\\u043e - \\u0441\\u043b\\u0435\\u0434\\u0443\\u044e\\u0449\\u0438\\u0439 \\u0441\\u043b\\u0430\\u0439\\u0434\\n this.navigateCarousel('next');\\n }\\n }\\n \\n isSwiping = false;\\n touchStartX = 0;\\n touchEndX = 0;\\n touchStartY = 0;\\n touchEndY = 0;\\n }, { passive: true });\\n },\\n\\n \\\/\\\/ Update cards per view based on screen size\\n updateCardsPerView() {\\n if (window.innerWidth <= 768) {\\n this.config.cardsPerView = 1;\\n } else if (window.innerWidth <= 1200) {\\n this.config.cardsPerView = 2;\\n } else {\\n this.config.cardsPerView = 3;\\n }\\n },\\n\\n \\\/\\\/ \\u0424\\u0443\\u043d\\u043a\\u0446\\u0438\\u044f \\u0434\\u043b\\u044f \\u0444\\u043e\\u0440\\u043c\\u0430\\u0442\\u0438\\u0440\\u043e\\u0432\\u0430\\u043d\\u0438\\u044f \\u0434\\u0430\\u0442\\u044b\\n formatDate(dateStr) {\\n if (!dateStr) return '';\\n const date = new Date(dateStr);\\n return date.toLocaleDateString('en-US', {\\n month: 'long',\\n day: 'numeric',\\n year: 'numeric'\\n });\\n },\\n\\n \\\/\\\/ \\u0424\\u0443\\u043d\\u043a\\u0446\\u0438\\u044f \\u0434\\u043b\\u044f \\u043e\\u043f\\u0440\\u0435\\u0434\\u0435\\u043b\\u0435\\u043d\\u0438\\u044f \\u0441\\u0442\\u0430\\u0442\\u0443\\u0441\\u0430 \\u0441\\u043e\\u0431\\u044b\\u0442\\u0438\\u044f\\n getEventStatus(startDate, endDate) {\\n if (!startDate) return 'unknown';\\n \\n const now = new Date();\\n const start = new Date(startDate);\\n const end = endDate ? new Date(endDate) : start;\\n \\n now.setHours(0, 0, 0, 0);\\n start.setHours(0, 0, 0, 0);\\n end.setHours(23, 59, 59, 999);\\n \\n if (now > end) {\\n return 'past';\\n } else if (now >= start && now <= end) {\\n return 'ongoing';\\n } else {\\n return 'upcoming';\\n }\\n },\\n\\n \\\/\\\/ Load news from API - \\u0443\\u043b\\u0443\\u0447\\u0448\\u0435\\u043d\\u043d\\u044b\\u0439 \\u043f\\u0430\\u0440\\u0441\\u0438\\u043d\\u0433 \\u0438\\u0437 \\u0432\\u0442\\u043e\\u0440\\u043e\\u0433\\u043e \\u0444\\u0430\\u0439\\u043b\\u0430\\n async loadNews() {\\n const loadingState = document.getElementById('bifaLoadingState');\\n const newsContent = document.getElementById('bifaNewsContent');\\n const errorState = document.getElementById('bifaErrorState');\\n\\n try {\\n \\\/\\\/ Show loading\\n loadingState.style.display = 'flex';\\n newsContent.style.display = 'none';\\n errorState.style.display = 'none';\\n\\n \\\/\\\/ Fetch all items\\n const response = await fetch(`${this.config.apiUrl}?${this.config.newsParams}`);\\n \\n if (!response.ok) {\\n throw new Error('Failed to fetch news');\\n }\\n\\n const allData = await response.json();\\n \\n \\\/\\\/ \\u0423\\u043b\\u0443\\u0447\\u0448\\u0435\\u043d\\u043d\\u0430\\u044f \\u0444\\u0438\\u043b\\u044c\\u0442\\u0440\\u0430\\u0446\\u0438\\u044f - \\u0431\\u0435\\u0440\\u0435\\u043c \\u0442\\u043e\\u043b\\u044c\\u043a\\u043e \\u043d\\u043e\\u0432\\u043e\\u0441\\u0442\\u0438 (\\u0431\\u0435\\u0437 \\u0434\\u0430\\u0442 \\u0441\\u043e\\u0431\\u044b\\u0442\\u0438\\u0439)\\n const newsData = allData.filter(item => {\\n \\\/\\\/ \\u041f\\u043e\\u043b\\u0443\\u0447\\u0430\\u0435\\u043c \\u0434\\u0430\\u043d\\u043d\\u044b\\u0435 \\u0441\\u043e\\u0431\\u044b\\u0442\\u0438\\u0439 \\u043a\\u0430\\u043a \\u0438\\u0437 \\u043f\\u0440\\u044f\\u043c\\u044b\\u0445 \\u043f\\u043e\\u043b\\u0435\\u0439, \\u0442\\u0430\\u043a \\u0438 \\u0438\\u0437 meta\\n const eventDate = item._bifa_event_date || item.meta?._bifa_event_date || item.acf?._bifa_event_date;\\n const itemType = item.bifa_item_type || item.meta?.bifa_item_type || item.acf?.bifa_item_type;\\n \\n \\\/\\\/ \\u042d\\u0442\\u043e \\u043d\\u043e\\u0432\\u043e\\u0441\\u0442\\u044c \\u0435\\u0441\\u043b\\u0438 \\u043d\\u0435\\u0442 \\u0434\\u0430\\u0442\\u044b \\u0441\\u043e\\u0431\\u044b\\u0442\\u0438\\u044f \\u0438\\u043b\\u0438 \\u0442\\u0438\\u043f \\u0443\\u043a\\u0430\\u0437\\u044b\\u0432\\u0430\\u0435\\u0442 \\u043d\\u0430 \\u043d\\u043e\\u0432\\u043e\\u0441\\u0442\\u044c\\n const isNews = !eventDate || eventDate === '' || (itemType && !itemType.includes(3));\\n \\n return isNews;\\n });\\n\\n if (newsData.length === 0) {\\n throw new Error('No news available');\\n }\\n\\n \\\/\\\/ \\u0421\\u043e\\u0440\\u0442\\u0438\\u0440\\u0443\\u0435\\u043c \\u043f\\u043e \\u0434\\u0430\\u0442\\u0435 \\u043f\\u0443\\u0431\\u043b\\u0438\\u043a\\u0430\\u0446\\u0438\\u0438\\n newsData.sort((a, b) => new Date(b.date) - new Date(a.date));\\n\\n \\\/\\\/ Store news data\\n this.config.newsData = newsData;\\n\\n \\\/\\\/ Hide loading, show content\\n loadingState.style.display = 'none';\\n newsContent.style.display = 'block';\\n\\n \\\/\\\/ Render news\\n this.renderHeroNews(newsData[0]);\\n this.renderCarousel(newsData.slice(1));\\n\\n } catch (error) {\\n console.error('Error loading news:', error);\\n loadingState.style.display = 'none';\\n errorState.style.display = 'block';\\n }\\n },\\n\\n \\\/\\\/ Render hero news - \\u0441 \\u0443\\u043b\\u0443\\u0447\\u0448\\u0435\\u043d\\u043d\\u044b\\u043c \\u043f\\u0430\\u0440\\u0441\\u0438\\u043d\\u0433\\u043e\\u043c \\u0434\\u0430\\u043d\\u043d\\u044b\\u0445 \\u0438 \\u0418\\u0421\\u041f\\u0420\\u0410\\u0412\\u041b\\u0415\\u041d\\u041d\\u041e\\u0419 \\u041a\\u041d\\u041e\\u041f\\u041a\\u041e\\u0419\\n renderHeroNews(news) {\\n const heroContainer = document.getElementById('bifaHeroNews');\\n if (!heroContainer || !news) return;\\n\\n \\\/\\\/ Get featured image\\n const media = news._embedded?.['wp:featuredmedia']?.[0];\\n const imageUrl = media?.source_url || '\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/news-placeholder-hero.jpg';\\n\\n \\\/\\\/ Format date\\n const date = this.formatDate(news.date);\\n\\n \\\/\\\/ Get excerpt\\n const excerpt = this.stripHtml(news.excerpt.rendered).substring(0, 350) + '...';\\n\\n \\\/\\\/ \\u041f\\u043e\\u043b\\u0443\\u0447\\u0430\\u0435\\u043c badge \\u0438 priority \\u0438\\u0437 \\u0432\\u0441\\u0435\\u0445 \\u0432\\u043e\\u0437\\u043c\\u043e\\u0436\\u043d\\u044b\\u0445 \\u043c\\u0435\\u0441\\u0442\\n const badgeText = news._bifa_badge_text || news.meta?._bifa_badge_text || news.acf?._bifa_badge_text || this.getBadgeText(news);\\n const priority = news._bifa_priority || news.meta?._bifa_priority || news.acf?._bifa_priority || 'normal';\\n\\n \\\/\\\/ Render hero \\u0441 \\u0448\\u0438\\u0440\\u043e\\u043a\\u0438\\u043c \\u0434\\u0438\\u0437\\u0430\\u0439\\u043d\\u043e\\u043c - \\u0418\\u0421\\u041f\\u0420\\u0410\\u0412\\u041b\\u0415\\u041d\\u041d\\u0410\\u042f \\u041a\\u041d\\u041e\\u041f\\u041a\\u0410\\n heroContainer.innerHTML = `\\n <\/p>\n<div class=\"\\\"bifa-hero-card\\\"\" onclick=\"\\\"window.open('${news.link}',\" '_blank')\\\">\\n <\/p>\n<div class=\"\\\"bifa-hero-wrapper\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-hero-image\\\"\" style=\"\\\"background-image:\" url('${imageurl}')\\\">\\n <\/p>\n<div class=\"\\\"bifa-hero-image-overlay\\\"\">\\n <span class=\"\\\"bifa-hero-badge\" ${priority =\"==\" 'urgent' ? : ''}\\\">${badgeText}<\\\/span>\\n <span class=\"\\\"bifa-hero-date\\\"\">${date}<\\\/span>\\n <\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-hero-content\\\"\">\\n <\/p>\n<h2 class=\"\\\"bifa-hero-title\\\"\">${news.title.rendered}<\\\/h2>\\n <\/p>\n<p class=\"\\\"bifa-hero-excerpt\\\"\">${excerpt}<\\\/p>\\n <\/p>\n<div class=\"\\\"bifa-hero-footer\\\"\">\\n <a href=\"\\\"${news.link}\\\"\" class=\"\\\"bifa-hero-btn\\\"\" target=\"\\\"_blank\\\"\">\\n <span>READ OUR STORY<\\\/span>\\n <svg width=\"\\\"20\\\"\" height=\"\\\"20\\\"\" viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M5\" 12h19m19 12l12 5m19 19\\\" stroke =\"\\\"currentColor\\\"\" stroke-width=\"\\\"2.5\\\"\" stroke-linecap=\"\\\"round\\\"\" stroke-linejoin=\"\\\"round\\\"\\\/\">\\n <\\\/svg>\\n <\\\/a>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-hero-stats\\\"\">\\n <\/p>\n<div class=\"\\\"hero-stat-item\\\"\">\\n <\/p>\n<div class=\"\\\"hero-stat-icon\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M12\" 2l15.09 8.26l22 9.27l17 14.14l18.18 21.02l12 17.77l5.82 21.02l7 14.14l2 9.27l8.91 8.26l12 2z\\\" stroke=\"\\\"currentColor\\\"\" fill=\"\\\"none\\\"\\\/\">\\n <\\\/svg>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"hero-stat-text\\\"\">\\n <span class=\"\\\"hero-stat-number\\\"\">${priority === 'urgent' ? 'Breaking' : 'Featured'}<\\\/span> Story\\n <\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"hero-stat-item\\\"\">\\n <\/p>\n<div class=\"\\\"hero-stat-icon\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M9\" 11l12 14l22 4m21 12c21 16.9706 21 12 21c7.02944 3 12c3 7.02944 3\\\" stroke =\"\\\"currentColor\\\"\\\/\">\\n <\\\/svg>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"hero-stat-text\\\"\">\\n <span class=\"\\\"hero-stat-number\\\"\">Verified<\\\/span> News\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n `;\\n },\\n\\n \\\/\\\/ Create news card \\u0441 \\u0443\\u043b\\u0443\\u0447\\u0448\\u0435\\u043d\\u043d\\u044b\\u043c \\u043f\\u0430\\u0440\\u0441\\u0438\\u043d\\u0433\\u043e\\u043c\\n createNewsCard(news, index) {\\n const card = document.createElement('div');\\n card.className = 'bifa-news-card';\\n card.style.animationDelay = `${index * 0.1}s`;\\n\\n \\\/\\\/ Get data\\n const media = news._embedded?.['wp:featuredmedia']?.[0];\\n const imageUrl = media?.source_url || `\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/news-placeholder-${(index % 3) + 1}.jpg`;\\n const date = this.formatDate(news.date);\\n const excerpt = this.stripHtml(news.excerpt.rendered).substring(0, 100) + '...';\\n \\n \\\/\\\/ \\u041f\\u043e\\u043b\\u0443\\u0447\\u0430\\u0435\\u043c badge \\u0438 priority\\n const badgeText = news._bifa_badge_text || news.meta?._bifa_badge_text || news.acf?._bifa_badge_text || this.getBadgeText(news);\\n const priority = news._bifa_priority || news.meta?._bifa_priority || news.acf?._bifa_priority || 'normal';\\n \\n \\\/\\\/ \\u041f\\u0440\\u043e\\u0432\\u0435\\u0440\\u044f\\u0435\\u043c, \\u044f\\u0432\\u043b\\u044f\\u0435\\u0442\\u0441\\u044f \\u043b\\u0438 \\u044d\\u0442\\u043e \\u0441\\u043e\\u0431\\u044b\\u0442\\u0438\\u0435\\u043c\\n const eventDate = news._bifa_event_date || news.meta?._bifa_event_date || news.acf?._bifa_event_date;\\n const eventEndDate = news._bifa_event_end_date || news.meta?._bifa_event_end_date || news.acf?._bifa_event_end_date;\\n \\n card.innerHTML = `\\n <\/p>\n<div class=\"\\\"bifa-news-image\\\"\" style=\"\\\"background-image:\" url('${imageurl}')\\\">\\n <span class=\"\\\"bifa-news-badge\" ${priority =\"==\" 'urgent' ? : ''}\\\">${badgeText}<\\\/span>\\n ${eventDate ? `<span class=\"\\\"event-date-label\\\"\">Event: ${this.formatDate(eventDate)}<\\\/span>` : ''}\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-news-content\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-news-date\\\"\">${date}<\\\/div>\\n <\/p>\n<h4 class=\"\\\"bifa-news-title\\\"\">${news.title.rendered}<\\\/h4>\\n <\/p>\n<p class=\"\\\"bifa-news-excerpt\\\"\">${excerpt}<\\\/p>\\n <a href=\"\\\"${news.link}\\\"\" class=\"\\\"bifa-news-link\\\"\" target=\"\\\"_blank\\\"\" onclick=\"\\\"event.stopPropagation()\\\"\">\\n <span>Read More<\\\/span>\\n <svg width=\"\\\"16\\\"\" height=\"\\\"16\\\"\" viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M5\" 12h19m19 12l12 5m19 19\\\" stroke =\"\\\"currentColor\\\"\" stroke-width=\"\\\"2\\\"\" stroke-linecap=\"\\\"round\\\"\" stroke-linejoin=\"\\\"round\\\"\\\/\">\\n <\\\/svg>\\n <\\\/a>\\n <\\\/div>\\n `;\\n\\n \\\/\\\/ Add click handler\\n card.addEventListener('click', () => {\\n window.open(news.link, '_blank');\\n });\\n\\n return card;\\n },\\n\\n \\\/\\\/ Render carousel - \\u0441 \\u0443\\u043b\\u0443\\u0447\\u0448\\u0435\\u043d\\u043d\\u044b\\u043c \\u043f\\u0430\\u0440\\u0441\\u0438\\u043d\\u0433\\u043e\\u043c\\n renderCarousel(newsItems) {\\n const carouselTrack = document.getElementById('bifaCarouselTrack');\\n if (!carouselTrack || !newsItems.length) return;\\n\\n \\\/\\\/ Clear existing content\\n carouselTrack.innerHTML = '';\\n\\n \\\/\\\/ Render each news item\\n newsItems.forEach((news, index) => {\\n const card = this.createNewsCard(news, index);\\n carouselTrack.appendChild(card);\\n });\\n\\n \\\/\\\/ Reset carousel position\\n this.config.carouselIndex = 0;\\n this.updateCarouselPosition();\\n },\\n\\n \\\/\\\/ Navigate carousel\\n navigateCarousel(direction) {\\n const track = document.getElementById('bifaCarouselTrack');\\n if (!track) return;\\n\\n const cards = track.querySelectorAll('.bifa-news-card');\\n const maxIndex = Math.max(0, cards.length - this.config.cardsPerView);\\n\\n if (direction === 'prev') {\\n this.config.carouselIndex = Math.max(0, this.config.carouselIndex - 1);\\n } else {\\n this.config.carouselIndex = Math.min(maxIndex, this.config.carouselIndex + 1);\\n }\\n\\n this.updateCarouselPosition();\\n },\\n\\n \\\/\\\/ Update carousel position\\n updateCarouselPosition() {\\n const track = document.getElementById('bifaCarouselTrack');\\n if (!track) return;\\n\\n const cardWidth = 100 \\\/ this.config.cardsPerView;\\n const offset = -(this.config.carouselIndex * cardWidth);\\n \\n track.style.transform = `translateX(${offset}%)`;\\n },\\n\\n \\\/\\\/ Get badge text\\n getBadgeText(news) {\\n \\\/\\\/ \\u041f\\u0440\\u043e\\u0431\\u0443\\u0435\\u043c \\u043f\\u043e\\u043b\\u0443\\u0447\\u0438\\u0442\\u044c badge \\u0438\\u0437 \\u0440\\u0430\\u0437\\u043d\\u044b\\u0445 \\u043c\\u0435\\u0441\\u0442\\n if (news._bifa_badge_text) {\\n return news._bifa_badge_text;\\n }\\n \\n if (news.meta?._bifa_badge_text) {\\n return news.meta._bifa_badge_text;\\n }\\n \\n if (news.acf?._bifa_badge_text) {\\n return news.acf._bifa_badge_text;\\n }\\n \\n \\\/\\\/ \\u041f\\u043e\\u043b\\u0443\\u0447\\u0430\\u0435\\u043c \\u043a\\u0430\\u0442\\u0435\\u0433\\u043e\\u0440\\u0438\\u044e\\n const category = news._embedded?.['wp:term']?.[0]?.[0];\\n return category?.name || 'News';\\n },\\n\\n \\\/\\\/ Strip HTML\\n stripHtml(html) {\\n const temp = document.createElement('div');\\n temp.innerHTML = html;\\n return temp.textContent || temp.innerText || '';\\n }\\n};\\n\\n\\\/\\\/ Initialize when DOM is ready\\ndocument.addEventListener('DOMContentLoaded', () => {\\n BifaNews.init();\\n});\\n\\n\\\/\\\/ Make loadBifaNews globally available for retry button\\nwindow.loadBifaNews = () => BifaNews.loadNews();\\n<\\\/script>\\n\\n<\\\/body>\\n<\\\/html>\"}},{\"type\":\"html\",\"props\":{\"content\":\"\"}},{\"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,\" maximum-scale=\"5.0,\" user-scalable=\"yes\\\"\">\\n<title>BIFA+ Interactive World Map<\\\/title>\\n<link href=\"\\\"https:\\\/\\\/fonts.googleapis.com\\\/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700&display=swap\\\"\" rel=\"\\\"stylesheet\\\"\">\\n<\/p>\n<style>\\n:root {\\n --navy: #0A1F44;\\n --gold: #D4AF37;\\n --gold-gradient: linear-gradient(135deg, #D4AF37, #ffd700);\\n --green: #1D6143;\\n --white: #FFF;\\n --gray: #6B7280;\\n --shadow: 0 2px 10px rgba(10,31,68,0.08);\\n --shadow-lg: 0 10px 40px rgba(10,31,68,0.12);\\n --trans: all 0.3s cubic-bezier(0.4,0,0.2,1);\\n --r: 12px;\\n}\\n* { \\n box-sizing: border-box; \\n font-family: 'Poppins', sans-serif; \\n -webkit-tap-highlight-color: transparent;\\n -webkit-touch-callout: none;\\n}\\nbody { \\n margin: 0; \\n padding: 0; \\n background: var(--white); \\n touch-action: manipulation;\\n}\\nsvg {\\n touch-action: manipulation;\\n}\\nsvg * {\\n pointer-events: none;\\n}\\nsvg path {\\n pointer-events: fill;\\n}\\n.svg-event-marker,\\n.svg-event-marker * {\\n pointer-events: all !important;\\n cursor: pointer;\\n}\\n@keyframes float { \\n 0%,100% { transform: translate3d(0,0,0); opacity: 1; } \\n 50% { transform: translate3d(0,-10px,0); opacity: 0.8; } \\n}\\n@keyframes pulse { \\n 0%,100% { transform: scale(1); } \\n 50% { transform: scale(1.1); } \\n}\\n@keyframes spin { to { transform: rotate(360deg); } }\\n@keyframes fadeIn { to { opacity: 1; } }\\n@keyframes dashMove { to { stroke-dashoffset: -100; } }\\n@keyframes fadeInUp {\\n from { opacity: 0; transform: translate3d(0,30px,0); }\\n to { opacity: 1; transform: translate3d(0,0,0); }\\n}\\n@keyframes expandWidth { to { width: 120px; } }\\n.brics-map-container {\\n position: relative;\\n width: 100vw;\\n margin-left: calc(-50vw + 50%);\\n padding: 60px 0;\\n background: var(--white);\\n overflow: hidden;\\n}\\n.brics-map-container::before {\\n content: '';\\n position: absolute;\\n inset: 0;\\n background: radial-gradient(circle at 30% 50%, rgba(10,31,68,0.02), transparent 50%),\\n radial-gradient(circle at 70% 80%, rgba(212,175,55,0.02), transparent 50%);\\n z-index: 0;\\n pointer-events: none;\\n}\\n.particles {\\n position: absolute;\\n width: 100%;\\n height: 100%;\\n overflow: hidden;\\n z-index: 1;\\n pointer-events: none;\\n}\\n.particle {\\n position: absolute;\\n width: 4px;\\n height: 4px;\\n background: linear-gradient(135deg, rgba(212,175,55,0.3), rgba(255,215,0,0.2));\\n border-radius: 50%;\\n animation: float 15s ease-in-out infinite;\\n will-change: transform;\\n box-shadow: 0 0 8px rgba(212,175,55,0.2);\\n}\\n.particle:nth-child(2n) { \\n background: linear-gradient(135deg, rgba(10,31,68,0.2), rgba(22,46,90,0.15)); \\n animation-duration: 18s; \\n}\\n.particle:nth-child(3n) { \\n background: linear-gradient(135deg, rgba(29,97,67,0.15), rgba(45,139,95,0.1)); \\n animation-duration: 20s;\\n}\\n.content-wrapper {\\n position: relative;\\n z-index: 2;\\n padding: 0 20px;\\n max-width: 1400px;\\n margin: 0 auto;\\n}\\n.brics-header {\\n text-align: center;\\n margin-bottom: 60px;\\n}\\n.brics-header h2 {\\n font-family: 'Montserrat', sans-serif;\\n font-weight: 900;\\n font-size: clamp(2.5rem, 4vw, 3.5rem);\\n background: linear-gradient(135deg, var(--gold), #ffd700);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n margin: 0 0 20px;\\n position: relative;\\n display: inline-block;\\n text-transform: uppercase;\\n letter-spacing: -0.5px;\\n line-height: 1.2;\\n text-shadow: 0 2px 4px rgba(212, 175, 55, 0.1);\\n animation: fadeInUp 1s ease-out 0.3s both;\\n}\\n.brics-header h2:after {\\n content: '';\\n position: absolute;\\n bottom: -15px;\\n left: 50%;\\n transform: translateX(-50%);\\n width: 0;\\n height: 5px;\\n background: linear-gradient(90deg, var(--gold), #ffd700);\\n border-radius: 3px;\\n animation: expandWidth 0.8s ease-out 1s both;\\n}\\n.brics-subtitle {\\n font-family: 'Poppins', sans-serif;\\n font-weight: 600;\\n font-size: 1.3rem;\\n color: var(--gray);\\n margin: 30px auto 0;\\n letter-spacing: 0.3px;\\n line-height: 1.6;\\n max-width: 700px;\\n animation: fadeInUp 1s ease-out 0.5s both;\\n}\\n.filter-controls {\\n display: flex;\\n justify-content: center;\\n gap: 20px;\\n margin-bottom: 40px;\\n flex-wrap: wrap;\\n}\\n.filter-btn {\\n padding: 12px 28px;\\n background: var(--white);\\n border: 2px solid var(--navy);\\n border-radius: 50px;\\n font-family: 'Montserrat', sans-serif;\\n font-weight: 700;\\n font-size: 14px;\\n color: var(--navy);\\n cursor: pointer;\\n transition: var(--trans);\\n text-decoration: none;\\n display: inline-block;\\n text-transform: uppercase;\\n letter-spacing: 1px;\\n box-shadow: 0 4px 15px rgba(10,31,68,0.1);\\n position: relative;\\n overflow: hidden;\\n touch-action: manipulation;\\n}\\n.filter-btn:hover {\\n transform: translateY(-3px);\\n box-shadow: 0 8px 25px rgba(10,31,68,0.2);\\n background: var(--navy);\\n color: var(--white);\\n}\\n.filter-btn.active {\\n background: var(--navy);\\n color: var(--white);\\n border-color: var(--navy);\\n box-shadow: 0 6px 20px rgba(10,31,68,0.3);\\n}\\n.filter-btn.active.news {\\n background: linear-gradient(135deg, var(--green), #2d8b5f);\\n border-color: var(--green);\\n box-shadow: 0 6px 20px rgba(29,97,67,0.3);\\n}\\n.brics-legend {\\n display: flex;\\n flex-wrap: wrap;\\n justify-content: center;\\n gap: 20px;\\n margin-bottom: 40px;\\n padding: 30px;\\n background: linear-gradient(135deg, rgba(248,249,250,0.9) 0%, rgba(240,242,245,0.9) 100%);\\n border-radius: 25px;\\n box-shadow: 0 5px 30px rgba(10,31,68,0.08);\\n backdrop-filter: blur(10px);\\n border: 1px solid rgba(212,175,55,0.1);\\n}\\n.brics-country-tag {\\n display: flex;\\n align-items: center;\\n gap: 12px;\\n padding: 12px 24px;\\n background: var(--white);\\n border-radius: 50px;\\n box-shadow: 0 4px 15px rgba(10,31,68,0.1);\\n transition: var(--trans);\\n cursor: pointer;\\n position: relative;\\n overflow: hidden;\\n border: 2px solid transparent;\\n touch-action: manipulation;\\n}\\n.brics-country-tag:hover {\\n transform: translateY(-3px) scale(1.02);\\n box-shadow: 0 10px 30px rgba(212,175,55,0.3);\\n border-color: var(--gold);\\n}\\n.brics-country-tag.active {\\n background: linear-gradient(135deg, var(--navy), #162e5a);\\n box-shadow: 0 6px 25px rgba(10,31,68,0.4);\\n border-color: var(--gold);\\n}\\n.brics-country-tag.active .country-name {\\n color: var(--white);\\n}\\n.country-flag {\\n width: 32px;\\n height: 24px;\\n border-radius: 4px;\\n background-size: cover;\\n background-position: center;\\n box-shadow: 0 2px 6px rgba(0,0,0,0.15);\\n}\\n.country-name {\\n font-family: 'Montserrat', sans-serif;\\n font-size: 15px;\\n font-weight: 700;\\n color: var(--navy);\\n text-transform: uppercase;\\n letter-spacing: 0.5px;\\n transition: color 0.3s ease;\\n}\\n.event-count {\\n background: linear-gradient(135deg, var(--gold), #ffd700);\\n color: var(--navy);\\n font-family: 'Montserrat', sans-serif;\\n font-weight: 800;\\n font-size: 12px;\\n padding: 4px 10px;\\n border-radius: 20px;\\n margin-left: auto;\\n box-shadow: 0 2px 8px rgba(212,175,55,0.3);\\n}\\n.map-wrapper {\\n position: relative;\\n width: 100%;\\n background: linear-gradient(135deg, #f5f6f8 0%, #e8eaed 100%);\\n overflow: hidden;\\n min-height: 600px;\\n box-shadow: 0 10px 50px rgba(10,31,68,0.15);\\n border-radius: 25px;\\n margin: 0 20px;\\n width: calc(100% - 40px);\\n border: 1px solid rgba(212,175,55,0.1);\\n}\\n.map-zoom-container {\\n width: 100%;\\n height: 100%;\\n position: relative;\\n overflow: hidden;\\n touch-action: none;\\n cursor: grab;\\n}\\n.map-zoom-container:active {\\n cursor: grabbing;\\n}\\n.map-svg-container {\\n width: 100%;\\n height: 100%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n position: relative;\\n z-index: 1;\\n padding: 40px;\\n transform-origin: center center;\\n transition: none;\\n will-change: transform;\\n}\\n.map-svg-container svg {\\n width: 100%;\\n height: auto;\\n max-height: 600px;\\n filter: drop-shadow(0 10px 30px rgba(10,31,68,0.08));\\n}\\n.zoom-controls {\\n position: absolute;\\n bottom: 20px;\\n right: 20px;\\n display: flex;\\n flex-direction: column;\\n gap: 10px;\\n z-index: 100;\\n}\\n.zoom-btn {\\n width: 40px;\\n height: 40px;\\n background: var(--white);\\n border: 2px solid var(--navy);\\n border-radius: 50%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n cursor: pointer;\\n font-size: 20px;\\n font-weight: 800;\\n color: var(--navy);\\n box-shadow: 0 4px 15px rgba(10,31,68,0.2);\\n transition: all 0.3s;\\n user-select: none;\\n position: relative;\\n overflow: hidden;\\n touch-action: manipulation;\\n}\\n.zoom-btn:hover {\\n background: var(--navy);\\n color: var(--white);\\n transform: scale(1.1);\\n border-color: var(--gold);\\n}\\n.zoom-btn:active {\\n transform: scale(0.95);\\n}\\n.zoom-reset {\\n font-size: 14px;\\n padding: 8px 12px;\\n width: auto;\\n height: auto;\\n border-radius: 25px;\\n font-family: 'Montserrat', sans-serif;\\n font-weight: 700;\\n letter-spacing: 0.5px;\\n}\\n.map-svg-container svg path {\\n fill: #e8eaed;\\n stroke: #d1d5db;\\n stroke-width: 0.3;\\n opacity: 0.4;\\n filter: blur(0.8px);\\n pointer-events: none;\\n transition: none;\\n cursor: default;\\n}\\n.map-svg-container svg path.brics-country {\\n fill: var(--gold);\\n stroke: var(--white);\\n stroke-width: 2;\\n opacity: 1;\\n filter: drop-shadow(0 0 15px rgba(212,175,55,0.5));\\n pointer-events: fill;\\n cursor: pointer;\\n transition: var(--trans);\\n}\\n.map-svg-container svg path.brics-country:hover {\\n fill: #e6c157;\\n stroke-width: 2.5;\\n filter: brightness(1.15) drop-shadow(0 0 25px rgba(212,175,55,0.7));\\n}\\n.map-svg-container svg path.active-country {\\n fill: var(--navy) !important;\\n stroke: var(--gold);\\n stroke-width: 2.5;\\n filter: drop-shadow(0 0 25px rgba(10,31,68,0.5));\\n}\\n.connection-lines {\\n pointer-events: none;\\n opacity: 0;\\n animation: fadeIn 2s ease-out 1s forwards;\\n}\\n.connection-line {\\n stroke: var(--gold);\\n stroke-width: 1.5;\\n fill: none;\\n stroke-dasharray: 5, 5;\\n animation: dashMove 20s linear infinite;\\n opacity: 0.4;\\n}\\n.svg-event-marker {\\n cursor: pointer;\\n position: relative;\\n}\\n.svg-event-marker:hover circle:not([fill=\\\"transparent\\\"]) {\\n filter: drop-shadow(0 6px 20px rgba(212,175,55,0.5));\\n stroke-width: 4;\\n}\\n.svg-event-marker circle {\\n fill: var(--white);\\n stroke: var(--gold);\\n stroke-width: 3;\\n filter: drop-shadow(0 4px 12px rgba(10,31,68,0.3));\\n transition: all 0.3s ease;\\n}\\n.svg-event-marker.news circle {\\n stroke: var(--green);\\n}\\n.svg-event-marker.urgent circle {\\n stroke: #dc2626;\\n animation: pulse 1s ease-in-out infinite;\\n}\\n.svg-event-marker text {\\n text-anchor: middle;\\n dominant-baseline: middle;\\n pointer-events: none;\\n user-select: none;\\n -webkit-user-select: none;\\n -moz-user-select: none;\\n -ms-user-select: none;\\n}\\n.event-popup {\\n position: fixed !important;\\n background: var(--white);\\n border-radius: 25px;\\n box-shadow: 0 30px 90px rgba(10,31,68,0.3);\\n padding: 24px;\\n z-index: 999999 !important;\\n max-width: 380px;\\n min-width: 320px;\\n display: none;\\n pointer-events: none !important;\\n border: 2px solid var(--gold);\\n opacity: 0;\\n transition: opacity 0.2s ease-in-out;\\n backdrop-filter: blur(10px);\\n}\\n.event-popup.active {\\n display: block !important;\\n opacity: 1;\\n pointer-events: auto !important;\\n}\\n.popup-close {\\n position: absolute;\\n top: 10px;\\n right: 10px;\\n width: 32px;\\n height: 32px;\\n background: var(--navy);\\n color: var(--white);\\n border: none;\\n border-radius: 50%;\\n cursor: pointer;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n font-size: 18px;\\n font-weight: 800;\\n transition: all 0.3s;\\n z-index: 10;\\n box-shadow: 0 4px 12px rgba(10,31,68,0.3);\\n touch-action: manipulation;\\n}\\n.popup-close:hover {\\n background: linear-gradient(135deg, #dc2626, #ef4444);\\n transform: scale(1.1) rotate(90deg);\\n box-shadow: 0 6px 20px rgba(220,38,38,0.4);\\n}\\n.popup-overlay {\\n position: fixed;\\n inset: 0;\\n background: rgba(0,0,0,0.3);\\n z-index: 999998;\\n cursor: pointer;\\n display: none;\\n}\\n.popup-overlay.active {\\n display: block;\\n}\\n@media (max-width: 768px) {\\n .popup-overlay.active { display: block; }\\n .event-popup {\\n top: 50% !important;\\n left: 50% !important;\\n transform: translate(-50%, -50%) !important;\\n }\\n}\\n.country-tooltip {\\n position: absolute;\\n background: var(--navy);\\n color: var(--white);\\n font-family: 'Montserrat', sans-serif;\\n font-size: 14px;\\n font-weight: 600;\\n white-space: nowrap;\\n padding: 10px 20px;\\n border-radius: 25px;\\n box-shadow: 0 8px 25px rgba(10,31,68,0.4);\\n opacity: 0;\\n visibility: hidden;\\n transform: translateY(5px);\\n transition: all 0.2s;\\n pointer-events: none;\\n z-index: 10002;\\n text-transform: uppercase;\\n letter-spacing: 0.5px;\\n border: 1px solid rgba(212,175,55,0.2);\\n}\\n.country-tooltip.show {\\n opacity: 1;\\n visibility: visible;\\n transform: translateY(0);\\n}\\n.popup-header {\\n display: flex;\\n gap: 16px;\\n margin-bottom: 20px;\\n}\\n.popup-image-wrapper {\\n position: relative;\\n width: 110px;\\n height: 80px;\\n flex-shrink: 0;\\n border-radius: 15px;\\n overflow: hidden;\\n background: linear-gradient(135deg, #f0f2f5 0%, #e5e7eb 100%);\\n box-shadow: 0 4px 15px rgba(10,31,68,0.15);\\n border: 1px solid rgba(212,175,55,0.1);\\n}\\n.popup-image-wrapper.no-image {\\n background: linear-gradient(135deg, #f0f2f5 0%, #e5e7eb 100%);\\n}\\n.popup-image {\\n width: 100%;\\n height: 100%;\\n object-fit: cover;\\n display: block;\\n}\\n.popup-image-placeholder {\\n position: absolute;\\n inset: 0;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n font-size: 32px;\\n background: linear-gradient(135deg, #f8f9fa 0%, #f0f2f5 100%);\\n color: #6B7280;\\n text-shadow: 0 2px 4px rgba(0,0,0,0.1);\\n}\\n.popup-content { \\n flex: 1; \\n min-height: 80px;\\n}\\n.popup-title {\\n font-family: 'Montserrat', sans-serif;\\n font-weight: 800;\\n font-size: 18px;\\n color: var(--navy);\\n margin: 0 0 10px;\\n line-height: 1.3;\\n display: -webkit-box;\\n -webkit-line-clamp: 2;\\n -webkit-box-orient: vertical;\\n overflow: hidden;\\n text-transform: uppercase;\\n letter-spacing: -0.3px;\\n}\\n.popup-meta {\\n display: flex;\\n flex-direction: column;\\n gap: 6px;\\n}\\n.popup-meta-item {\\n font-family: 'Poppins', sans-serif;\\n font-size: 13px;\\n color: var(--gray);\\n display: flex;\\n align-items: center;\\n gap: 8px;\\n font-weight: 600;\\n text-transform: uppercase;\\n letter-spacing: 0.3px;\\n}\\n.popup-excerpt {\\n font-family: 'Poppins', sans-serif;\\n font-size: 14px;\\n color: #475569;\\n line-height: 1.6;\\n margin: 16px 0 20px;\\n display: -webkit-box;\\n -webkit-line-clamp: 3;\\n -webkit-box-orient: vertical;\\n overflow: hidden;\\n}\\n.popup-link {\\n background: linear-gradient(135deg, var(--gold), #ffd700);\\n color: var(--navy);\\n padding: 12px 24px;\\n border-radius: 50px;\\n text-decoration: none;\\n display: inline-flex;\\n align-items: center;\\n gap: 8px;\\n font-family: 'Montserrat', sans-serif;\\n font-weight: 800;\\n font-size: 14px;\\n text-transform: uppercase;\\n letter-spacing: 1px;\\n transition: all 0.3s;\\n box-shadow: 0 4px 15px rgba(212,175,55,0.4);\\n position: relative;\\n overflow: hidden;\\n touch-action: manipulation;\\n}\\n.popup-link:hover {\\n transform: translateY(-3px);\\n box-shadow: 0 8px 25px rgba(212,175,55,0.5);\\n background: linear-gradient(135deg, #e6c157, #ffd700);\\n}\\n.loading-overlay {\\n position: absolute;\\n inset: 0;\\n background: rgba(255,255,255,0.95);\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n z-index: 10000;\\n backdrop-filter: blur(5px);\\n border-radius: var(--r);\\n}\\n.spinner {\\n width: 50px;\\n height: 50px;\\n border: 4px solid #e5e7eb;\\n border-top-color: var(--gold);\\n border-radius: 50%;\\n animation: spin 1s linear infinite;\\n margin: 0 auto 20px;\\n box-shadow: 0 0 20px rgba(212,175,55,0.2);\\n}\\n.loading-text {\\n font-family: 'Montserrat', sans-serif;\\n font-size: 16px;\\n color: var(--gray);\\n font-weight: 600;\\n letter-spacing: 0.5px;\\n text-transform: uppercase;\\n}\\n@media (max-width: 768px) {\\n .brics-map-container { padding: 40px 0; }\\n .content-wrapper { padding: 0 15px; }\\n .brics-header { margin-bottom: 40px; }\\n .brics-header h2 { font-size: 2rem; }\\n .brics-subtitle { font-size: 1.1rem; }\\n .filter-controls { gap: 10px; margin-bottom: 25px; padding: 0 10px; }\\n .filter-btn { padding: 10px 20px; font-size: 12px; border-radius: 25px; }\\n .brics-legend { gap: 10px; padding: 20px 15px; margin-bottom: 25px; border-radius: 20px; }\\n .brics-country-tag { padding: 8px 16px; gap: 10px; border-radius: 25px; }\\n .country-flag { width: 24px; height: 18px; }\\n .country-name { font-size: 13px; }\\n .event-count { font-size: 11px; padding: 3px 8px; border-radius: 15px; }\\n .map-wrapper { margin: 0; width: 100%; min-height: 450px; height: 450px; border-radius: 15px; }\\n .map-svg-container { padding: 10px; }\\n .map-svg-container svg { max-height: none; height: 130%; width: auto; max-width: none; }\\n .zoom-controls { bottom: 10px; right: 10px; gap: 8px; }\\n .zoom-btn { width: 36px; height: 36px; font-size: 18px; }\\n .zoom-reset { font-size: 12px; padding: 6px 10px; border-radius: 20px; }\\n .svg-event-marker circle { stroke-width: 2; }\\n .svg-event-marker:active circle {\\n stroke-width: 4;\\n filter: drop-shadow(0 4px 15px rgba(212,175,55,0.5));\\n }\\n .event-popup { max-width: calc(100vw - 30px) !important; min-width: 280px; padding: 20px; border-radius: 20px; }\\n .popup-header { flex-direction: column; gap: 12px; }\\n .popup-image-wrapper { width: 100%; height: 160px; border-radius: 12px; }\\n .popup-image-placeholder { font-size: 48px; }\\n .popup-title { font-size: 16px; }\\n .popup-excerpt { font-size: 13px; }\\n .popup-link { width: 100%; justify-content: center; padding: 12px 20px; border-radius: 25px; }\\n .country-tooltip { font-size: 12px; padding: 8px 16px; border-radius: 20px; }\\n .connection-lines { display: none; }\\n .particle { width: 3px; height: 3px; }\\n}\\n@media (max-width: 480px) {\\n .brics-map-container { padding: 30px 0; }\\n .brics-header { margin-bottom: 35px; }\\n .brics-header h2 { font-size: 1.8rem; }\\n .brics-subtitle { font-size: 1rem; margin-top: 20px; }\\n}\\n@media (max-width: 375px) {\\n .brics-header h2 { font-size: 1.8rem; }\\n .brics-subtitle { font-size: 1rem; }\\n .map-wrapper { height: 350px; min-height: 350px; border-radius: 12px; }\\n .svg-event-marker text { font-size: 14px; }\\n}\\n@media (hover: none) and (pointer: coarse) {\\n .svg-event-marker {\\n transform-origin: center;\\n }\\n .svg-event-marker:active circle {\\n stroke-width: 4;\\n filter: drop-shadow(0 6px 20px rgba(212,175,55,0.5));\\n }\\n}\\n<\\\/style>\\n<\\\/head>\\n<body>\\n<\/p>\n<div class=\"\\\"brics-map-container\\\"\">\\n<\/p>\n<div class=\"\\\"particles\\\"\">\\n<\/p>\n<div class=\"\\\"particle\\\"\" style=\"\\\"left:10%;animation-delay:0s\\\"\"><\\\/div>\\n<\/p>\n<div class=\"\\\"particle\\\"\" style=\"\\\"left:30%;animation-delay:2s\\\"\"><\\\/div>\\n<\/p>\n<div class=\"\\\"particle\\\"\" style=\"\\\"left:50%;animation-delay:4s\\\"\"><\\\/div>\\n<\/p>\n<div class=\"\\\"particle\\\"\" style=\"\\\"left:70%;animation-delay:6s\\\"\"><\\\/div>\\n<\/p>\n<div class=\"\\\"particle\\\"\" style=\"\\\"left:90%;animation-delay:8s\\\"\"><\\\/div>\\n<\\\/div>\\n<\/p>\n<div class=\"\\\"content-wrapper\\\"\">\\n<\/p>\n<div class=\"\\\"brics-header\\\"\">\\n<a href=\"\\\"https:\\\/\\\/bifa.ai\\\/events-2\\\/\\\"\" style=\"\\\"text-decoration:\" none;\\\">\\n<\/p>\n<h2>BIFA+ Bridging Events<\\\/h2>\\n<\\\/a>\\n<\/p>\n<p class=\"\\\"brics-subtitle\\\"\">Connecting Nations Through Economic Bridges<\\\/p>\\n<\\\/div>\\n<\/p>\n<div class=\"\\\"filter-controls\\\"\" id=\"\\\"filterControls\\\"\"><\\\/div>\\n<\/p>\n<div class=\"\\\"brics-legend\\\"\" id=\"\\\"legend\\\"\"><\\\/div>\\n<\/p>\n<div class=\"\\\"map-wrapper\\\"\">\\n<\/p>\n<div class=\"\\\"map-zoom-container\\\"\" id=\"\\\"mapZoomContainer\\\"\">\\n<\/p>\n<div class=\"\\\"map-svg-container\\\"\" id=\"\\\"mapContainer\\\"\"><\\\/div>\\n<\\\/div>\\n<\/p>\n<div class=\"\\\"country-tooltip\\\"\" id=\"\\\"tooltip\\\"\"><\\\/div>\\n<\/p>\n<div class=\"\\\"zoom-controls\\\"\" id=\"\\\"zoomControls\\\"\"><\\\/div>\\n<\/p>\n<div class=\"\\\"loading-overlay\\\"\" id=\"\\\"loadingOverlay\\\"\">\\n<\/p>\n<div style=\"\\\"text-align:center\\\"\">\\n<\/p>\n<div class=\"\\\"spinner\\\"\"><\\\/div>\\n<\/p>\n<div class=\"\\\"loading-text\\\"\">Loading BIFA+ content...<\\\/div>\\n<\\\/div>\\n<\\\/div>\\n<\\\/div>\\n<\/p>\n<div class=\"\\\"event-popup\\\"\" id=\"\\\"eventPopup\\\"\"><\\\/div>\\n<\/p>\n<div class=\"\\\"popup-overlay\\\"\" id=\"\\\"popupOverlay\\\"\"><\\\/div>\\n<\\\/div>\\n<\\\/div>\\n<script>\\n(function() {\\n'use strict';\\n\\n\\\/\\\/ ==================== CONFIGURATION ====================\\nconst CONFIG = {\\n SVG_PATH: \\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/world_map.svg\\\",\\n API_ENDPOINT: 'https:\\\/\\\/bifa.ai\\\/wp-json\\\/wp\\\/v2\\\/bifa_news_events?_embed&per_page=100&acf_format=standard',\\n IMAGE_PROXY: 'https:\\\/\\\/images.weserv.nl\\\/',\\n MIN_ZOOM: 1,\\n MAX_ZOOM: 4,\\n ZOOM_STEP: 0.3,\\n MOBILE_BREAKPOINT: 768,\\n DEBOUNCE_DELAY: 250,\\n THROTTLE_DELAY: 16,\\n POPUP_HOVER_DELAY: 200,\\n TOUCH_TAP_THRESHOLD: 300,\\n MAX_MARKERS_PER_COUNTRY: 5,\\n MARKER_RADIUS_DESKTOP: 30,\\n MARKER_RADIUS_MOBILE: 20,\\n MARKER_SIZE_DESKTOP: 20,\\n MARKER_SIZE_MOBILE: 22\\n};\\n\\nconst BRICS_COUNTRIES = {\\n 'BR': { name: 'Brazil', lat: -14.235, lng: -51.925, size: 'medium' },\\n 'RU': { name: 'Russian Federation', lat: 61.524, lng: 105.318, size: 'large' },\\n 'IN': { name: 'India', lat: 20.593, lng: 78.962, size: 'large' },\\n 'CN': { name: 'China', lat: 35.861, lng: 104.195, size: 'large' },\\n 'ZA': { name: 'South Africa', lat: -30.559, lng: 22.937, size: 'medium' },\\n 'SA': { name: 'Saudi Arabia', lat: 23.885, lng: 45.079, size: 'small' },\\n 'AE': { name: 'United Arab Emirates', lat: 23.424, lng: 53.847, size: 'small' },\\n 'EG': { name: 'Egypt', lat: 26.820, lng: 30.802, size: 'medium' },\\n 'IR': { name: 'Iran', lat: 32.427, lng: 53.688, size: 'medium' },\\n 'ET': { name: 'Ethiopia', lat: 9.145, lng: 40.489, size: 'small' },\\n 'ID': { name: 'Indonesia', lat: -0.789, lng: 113.921, size: 'large' }\\n};\\n\\nconst MAX_MARKERS_BY_SIZE = {\\n small: 1,\\n medium: 3,\\n large: 4\\n};\\n\\nconst INDONESIA_ID_PATTERNS = ['ID', 'ID0', 'ID1', 'ID2', 'ID3', 'ID4', 'ID5', 'ID6', 'ID7', 'ID8', 'ID9', 'ID_'];\\n\\n\\\/\\\/ ==================== STATE MANAGEMENT ====================\\nclass AppState {\\n constructor() {\\n this.content = [];\\n this.filter = 'all';\\n this.svg = null;\\n this.zoom = 1;\\n this.x = 0;\\n this.y = 0;\\n this.isDragging = false;\\n this.startX = 0;\\n this.startY = 0;\\n this.maxX = 0;\\n this.maxY = 0;\\n this.markersGroup = null;\\n this.activeMarker = null;\\n this.isPopupOpen = false;\\n this.isPopupHovered = false;\\n this.touchStartTime = 0;\\n this.lastDistance = 0;\\n this.countryCenters = {};\\n this.eventListeners = new Map();\\n this.isTouchDevice = this._detectTouchDevice();\\n this.isMobile = this._detectMobile();\\n this.resizeObserver = null;\\n this.imageLoadErrors = new WeakMap();\\n }\\n\\n _detectTouchDevice() {\\n return ('ontouchstart' in window) || \\n (navigator.maxTouchPoints > 0) || \\n (navigator.msMaxTouchPoints > 0);\\n }\\n\\n _detectMobile() {\\n return window.innerWidth <= CONFIG.MOBILE_BREAKPOINT;\\n }\\n\\n updateMobileState() {\\n this.isMobile = this._detectMobile();\\n }\\n\\n reset() {\\n this.zoom = 1;\\n this.x = 0;\\n this.y = 0;\\n this.isDragging = false;\\n }\\n}\\n\\n\\\/\\\/ ==================== UTILITY FUNCTIONS ====================\\nclass Utils {\\n static $(id) {\\n return document.getElementById(id);\\n }\\n\\n static $$(selector, parent = document) {\\n return parent.querySelectorAll(selector);\\n }\\n\\n static createElement(html) {\\n const template = document.createElement('template');\\n template.innerHTML = html.trim();\\n return template.content.firstChild;\\n }\\n\\n static debounce(func, wait) {\\n let timeout;\\n return function executedFunction(...args) {\\n const later = () => {\\n clearTimeout(timeout);\\n func(...args);\\n };\\n clearTimeout(timeout);\\n timeout = setTimeout(later, wait);\\n };\\n }\\n\\n static throttle(func, limit) {\\n let inThrottle;\\n return function(...args) {\\n if (!inThrottle) {\\n func.apply(this, args);\\n inThrottle = true;\\n setTimeout(() => inThrottle = false, limit);\\n }\\n };\\n }\\n\\n static formatDate(dateStr) {\\n if (!dateStr) return '';\\n const date = new Date(dateStr);\\n return date.toLocaleDateString('en-US', { \\n month: 'short', \\n day: 'numeric', \\n year: 'numeric' \\n });\\n }\\n\\n static stripHtml(html) {\\n const div = document.createElement('div');\\n div.innerHTML = html;\\n const text = div.textContent || '';\\n return text.length > 200 ? text.substring(0, 200) + '...' : text;\\n }\\n\\n static createImageProxy(url) {\\n if (!url || window.location.hostname === 'bifa.ai') return url;\\n return `${CONFIG.IMAGE_PROXY}?url=${encodeURIComponent(url)}&w=380&h=220&fit=cover&a=attention`;\\n }\\n\\n static isIndonesiaPath(id) {\\n return INDONESIA_ID_PATTERNS.some(pattern => \\n id === pattern || id.startsWith(pattern)\\n );\\n }\\n\\n static clamp(value, min, max) {\\n return Math.max(min, Math.min(max, value));\\n }\\n}\\n\\n\\\/\\\/ ==================== EVENT MANAGER ====================\\nclass EventManager {\\n constructor() {\\n this.listeners = new Map();\\n }\\n\\n add(element, event, handler, options = {}) {\\n if (!element) return;\\n \\n const key = `${event}-${handler.name || 'anonymous'}`;\\n \\n if (this.listeners.has(element)) {\\n const elementListeners = this.listeners.get(element);\\n if (elementListeners.has(key)) {\\n return;\\n }\\n elementListeners.set(key, { event, handler, options });\\n } else {\\n this.listeners.set(element, new Map([[key, { event, handler, options }]]));\\n }\\n \\n element.addEventListener(event, handler, options);\\n }\\n\\n remove(element, event, handler) {\\n if (!element) return;\\n \\n const key = `${event}-${handler.name || 'anonymous'}`;\\n const elementListeners = this.listeners.get(element);\\n \\n if (elementListeners && elementListeners.has(key)) {\\n const { event: evt, handler: hdlr, options } = elementListeners.get(key);\\n element.removeEventListener(evt, hdlr, options);\\n elementListeners.delete(key);\\n \\n if (elementListeners.size === 0) {\\n this.listeners.delete(element);\\n }\\n }\\n }\\n\\n removeAll(element) {\\n if (!element || !this.listeners.has(element)) return;\\n \\n const elementListeners = this.listeners.get(element);\\n elementListeners.forEach(({ event, handler, options }) => {\\n element.removeEventListener(event, handler, options);\\n });\\n \\n this.listeners.delete(element);\\n }\\n\\n cleanup() {\\n this.listeners.forEach((elementListeners, element) => {\\n this.removeAll(element);\\n });\\n this.listeners.clear();\\n }\\n}\\n\\n\\\/\\\/ ==================== ZOOM CONTROLLER ====================\\nclass ZoomController {\\n constructor(state, eventManager) {\\n this.state = state;\\n this.eventManager = eventManager;\\n this.container = null;\\n this.mapContainer = null;\\n }\\n\\n init(container, mapContainer) {\\n this.container = container;\\n this.mapContainer = mapContainer;\\n this.setupEventListeners();\\n this.renderControls();\\n }\\n\\n setupEventListeners() {\\n this.eventManager.add(this.container, 'mousedown', this.handleStart.bind(this));\\n this.eventManager.add(this.container, 'mousemove', Utils.throttle(this.handleMove.bind(this), CONFIG.THROTTLE_DELAY));\\n this.eventManager.add(this.container, 'mouseup', this.handleEnd.bind(this));\\n this.eventManager.add(this.container, 'mouseleave', this.handleEnd.bind(this));\\n this.eventManager.add(this.container, 'wheel', this.handleWheel.bind(this), { passive: false });\\n\\n this.eventManager.add(this.container, 'touchstart', this.handleStart.bind(this), { passive: false });\\n this.eventManager.add(this.container, 'touchmove', this.handleTouchMove.bind(this), { passive: false });\\n this.eventManager.add(this.container, 'touchend', this.handleTouchEnd.bind(this));\\n }\\n\\n handleStart(e) {\\n if (this.state.zoom <= 1) return;\\n \\n this.state.isDragging = true;\\n const point = e.touches ? e.touches[0] : e;\\n this.state.startX = point.clientX - this.state.x;\\n this.state.startY = point.clientY - this.state.y;\\n \\n if (e.type === 'touchstart') {\\n e.preventDefault();\\n }\\n }\\n\\n handleMove(e) {\\n if (!this.state.isDragging || this.state.zoom <= 1) return;\\n \\n const point = e.touches ? e.touches[0] : e;\\n this.state.x = point.clientX - this.state.startX;\\n this.state.y = point.clientY - this.state.startY;\\n \\n requestAnimationFrame(() => this.updateTransform());\\n \\n if (e.type === 'touchmove') {\\n e.preventDefault();\\n }\\n }\\n\\n handleEnd() {\\n this.state.isDragging = false;\\n }\\n\\n handleWheel(e) {\\n if (e.ctrlKey || e.metaKey) {\\n e.preventDefault();\\n const delta = e.deltaY > 0 ? -CONFIG.ZOOM_STEP : CONFIG.ZOOM_STEP;\\n this.setZoom(this.state.zoom + delta);\\n }\\n }\\n\\n handleTouchMove(e) {\\n if (e.touches.length === 2) {\\n e.preventDefault();\\n const touch1 = e.touches[0];\\n const touch2 = e.touches[1];\\n const distance = Math.hypot(\\n touch2.clientX - touch1.clientX,\\n touch2.clientY - touch1.clientY\\n );\\n \\n if (this.state.lastDistance > 0) {\\n const scale = distance \\\/ this.state.lastDistance;\\n this.setZoom(this.state.zoom * scale);\\n }\\n this.state.lastDistance = distance;\\n } else {\\n this.handleMove(e);\\n }\\n }\\n\\n handleTouchEnd(e) {\\n if (e.touches.length === 0) {\\n this.state.lastDistance = 0;\\n this.handleEnd();\\n }\\n }\\n\\n setZoom(zoom) {\\n this.state.zoom = Utils.clamp(zoom, CONFIG.MIN_ZOOM, CONFIG.MAX_ZOOM);\\n this.updateBounds();\\n this.updateTransform();\\n }\\n\\n updateBounds() {\\n if (!this.state.svg || !this.container) return;\\n \\n const containerBounds = this.container.getBoundingClientRect();\\n const svgBox = this.state.svg.getBBox();\\n \\n const scaledWidth = svgBox.width * this.state.zoom;\\n const scaledHeight = svgBox.height * this.state.zoom;\\n \\n this.state.maxX = Math.max(0, (scaledWidth - containerBounds.width) \\\/ 2);\\n this.state.maxY = Math.max(0, (scaledHeight - containerBounds.height) \\\/ 2);\\n }\\n\\n updateTransform() {\\n if (!this.mapContainer) return;\\n \\n this.state.x = Utils.clamp(this.state.x, -this.state.maxX, this.state.maxX);\\n this.state.y = Utils.clamp(this.state.y, -this.state.maxY, this.state.maxY);\\n \\n this.mapContainer.style.transform = \\n `translate3d(${this.state.x}px, ${this.state.y}px, 0) scale(${this.state.zoom})`;\\n }\\n\\n zoomIn() {\\n this.setZoom(this.state.zoom + CONFIG.ZOOM_STEP);\\n }\\n\\n zoomOut() {\\n this.setZoom(this.state.zoom - CONFIG.ZOOM_STEP);\\n }\\n\\n reset() {\\n this.state.reset();\\n this.updateTransform();\\n }\\n\\n renderControls() {\\n const controls = Utils.$('zoomControls');\\n controls.innerHTML = `\\n <button class=\"\\\"zoom-btn\\\"\" id=\"\\\"zoomInBtn\\\"\">+<\\\/button>\\n <button class=\"\\\"zoom-btn\\\"\" id=\"\\\"zoomOutBtn\\\"\">\\u2212<\\\/button>\\n <button class=\"\\\"zoom-btn\" zoom-reset\\\" id=\"\\\"zoomResetBtn\\\"\">Reset<\\\/button>\\n `;\\n \\n this.eventManager.add(Utils.$('zoomInBtn'), 'click', () => this.zoomIn());\\n this.eventManager.add(Utils.$('zoomOutBtn'), 'click', () => this.zoomOut());\\n this.eventManager.add(Utils.$('zoomResetBtn'), 'click', () => this.reset());\\n }\\n}\\n\\n\\\/\\\/ ==================== MAP MANAGER ====================\\nclass MapManager {\\n constructor(state, eventManager) {\\n this.state = state;\\n this.eventManager = eventManager;\\n this.tooltip = Utils.$('tooltip');\\n }\\n\\n async loadSVG() {\\n try {\\n const response = await fetch(CONFIG.SVG_PATH);\\n if (!response.ok) {\\n throw new Error(`${response.status} ${response.statusText}`);\\n }\\n \\n const svgText = await response.text();\\n const container = Utils.$('mapContainer');\\n container.innerHTML = svgText;\\n \\n this.state.svg = container.querySelector('svg');\\n if (!this.state.svg) {\\n throw new Error('SVG element not found');\\n }\\n \\n this.initMap();\\n } catch (error) {\\n console.error('Error loading SVG:', error);\\n Utils.$('mapContainer').innerHTML = \\n '<\/p>\n<div style=\"\\\"text-align:center;padding:50px;color:#666\\\"\">Unable to load map<\\\/div>';\\n Utils.$('loadingOverlay').style.display = 'none';\\n }\\n }\\n\\n initMap() {\\n this.setupSVGDefs();\\n this.createMarkersGroup();\\n this.processPaths();\\n this.createConnectionLines();\\n }\\n\\n setupSVGDefs() {\\n const defs = document.createElementNS('http:\\\/\\\/www.w3.org\\\/2000\\\/svg', 'defs');\\n defs.innerHTML = `\\n <lineargradient id=\"\\\"brics-gradient\\\"\" x1=\"\\\"0%\\\"\" y1=\"\\\"0%\\\"\" x2=\"\\\"100%\\\"\" y2=\"\\\"100%\\\"\">\\n <stop offset=\"\\\"0%\\\"\" style=\"\\\"stop-color:#D4AF37\\\"\\\/\">\\n <stop offset=\"\\\"100%\\\"\" style=\"\\\"stop-color:#b8973f\\\"\\\/\">\\n <\\\/linearGradient>\\n `;\\n this.state.svg.insertBefore(defs, this.state.svg.firstChild);\\n }\\n\\n createMarkersGroup() {\\n this.state.markersGroup = document.createElementNS('http:\\\/\\\/www.w3.org\\\/2000\\\/svg', 'g');\\n this.state.markersGroup.setAttribute('id', 'markers-group');\\n this.state.svg.appendChild(this.state.markersGroup);\\n }\\n\\n processPaths() {\\n const paths = this.state.svg.querySelectorAll('path');\\n \\n paths.forEach(path => {\\n const id = path.id || path.getAttribute('id');\\n if (!id) return;\\n \\n const countryCode = this.identifyCountry(id);\\n \\n if (countryCode) {\\n this.setupBRICSPath(path, countryCode);\\n this.calculateCenter(path, countryCode);\\n }\\n });\\n }\\n\\n identifyCountry(pathId) {\\n if (BRICS_COUNTRIES[pathId]) {\\n return pathId;\\n }\\n \\n if (Utils.isIndonesiaPath(pathId)) {\\n return 'ID';\\n }\\n \\n return null;\\n }\\n\\n setupBRICSPath(path, countryCode) {\\n path.classList.add('brics-country');\\n path.setAttribute('data-brics', countryCode);\\n path.setAttribute('data-country-name', BRICS_COUNTRIES[countryCode].name);\\n \\n if (!this.state.isTouchDevice) {\\n this.eventManager.add(path, 'mouseenter', (e) => this.showTooltip(e));\\n this.eventManager.add(path, 'mousemove', (e) => this.updateTooltip(e));\\n this.eventManager.add(path, 'mouseleave', () => this.hideTooltip());\\n }\\n \\n this.eventManager.add(path, 'click', (e) => this.toggleCountry(e, countryCode));\\n }\\n\\n calculateCenter(path, countryCode) {\\n const bbox = path.getBBox();\\n if (!this.state.countryCenters[countryCode]) {\\n this.state.countryCenters[countryCode] = {\\n x: bbox.x + bbox.width \\\/ 2,\\n y: bbox.y + bbox.height \\\/ 2\\n };\\n }\\n }\\n\\n showTooltip(e) {\\n const name = e.target.getAttribute('data-country-name');\\n if (name) {\\n this.tooltip.textContent = name;\\n this.tooltip.classList.add('show');\\n }\\n }\\n\\n updateTooltip(e) {\\n const rect = Utils.$('mapZoomContainer').getBoundingClientRect();\\n this.tooltip.style.left = (e.clientX - rect.left) + 'px';\\n this.tooltip.style.top = (e.clientY - rect.top - 40) + 'px';\\n }\\n\\n hideTooltip() {\\n this.tooltip.classList.remove('show');\\n }\\n\\n toggleCountry(e, countryCode) {\\n e.target.classList.toggle('active-country');\\n \\n const tag = document.querySelector(`[data-country=\\\"${countryCode}\\\"]`);\\n if (tag) {\\n tag.classList.toggle('active');\\n }\\n }\\n\\n createConnectionLines() {\\n if (this.state.isMobile) return;\\n \\n const connections = document.createElementNS('http:\\\/\\\/www.w3.org\\\/2000\\\/svg', 'g');\\n connections.setAttribute('class', 'connection-lines');\\n \\n const lines = [\\n ['BR', 'ZA'], \\n ['RU', 'CN'], \\n ['CN', 'IN'], \\n ['SA', 'AE'], \\n ['EG', 'ET'], \\n ['IN', 'ID']\\n ];\\n \\n lines.forEach(([from, to]) => {\\n const fromCenter = this.state.countryCenters[from];\\n const toCenter = this.state.countryCenters[to];\\n \\n if (fromCenter && toCenter) {\\n const line = document.createElementNS('http:\\\/\\\/www.w3.org\\\/2000\\\/svg', 'path');\\n const midX = (fromCenter.x + toCenter.x) \\\/ 2;\\n const midY = (fromCenter.y + toCenter.y) \\\/ 2 - 50;\\n \\n line.setAttribute('d', \\n `M ${fromCenter.x} ${fromCenter.y} Q ${midX} ${midY} ${toCenter.x} ${toCenter.y}`\\n );\\n line.setAttribute('class', 'connection-line');\\n connections.appendChild(line);\\n }\\n });\\n \\n this.state.svg.insertBefore(connections, this.state.markersGroup);\\n }\\n}\\n\\n\\\/\\\/ ==================== CONTENT MANAGER ====================\\nclass ContentManager {\\n constructor(state, eventManager) {\\n this.state = state;\\n this.eventManager = eventManager;\\n }\\n\\n async loadContent() {\\n try {\\n const response = await fetch(CONFIG.API_ENDPOINT);\\n const posts = await response.json();\\n \\n this.state.content = posts.map(post => this.parsePost(post));\\n \\n Utils.$('loadingOverlay').style.display = 'none';\\n return this.state.content;\\n } catch (error) {\\n console.error('Error loading content:', error);\\n Utils.$('loadingOverlay').style.display = 'none';\\n return [];\\n }\\n }\\n\\n getPostUrl(post) {\\n if (post.link && post.link !== '' && !post.link.includes('?p=')) {\\n return post.link;\\n }\\n \\n if (post.slug) {\\n return `https:\\\/\\\/bifa.ai\\\/news-events\\\/${post.slug}\\\/`;\\n }\\n \\n if (post.guid && post.guid.rendered && !post.guid.rendered.includes('?p=')) {\\n return post.guid.rendered;\\n }\\n \\n if (post.id) {\\n return `https:\\\/\\\/bifa.ai\\\/?p=${post.id}`;\\n }\\n \\n console.error('Cannot determine URL for post:', post.id);\\n return 'https:\\\/\\\/bifa.ai\\\/';\\n }\\n\\n parsePost(post) {\\n const types = post.bifa_item_type || [];\\n const classes = post.class_list || [];\\n \\n const hasEvent = types.some(x => x == 3 || x == 'event') || \\n classes.some(c => c.includes('bifa_item_type-event'));\\n const hasNews = types.some(x => x == 2 || x == 'news') || \\n classes.some(c => c.includes('bifa_item_type-news'));\\n \\n let image = '';\\n if (post._embedded?.['wp:featuredmedia']?.[0]?.source_url) {\\n image = Utils.createImageProxy(post._embedded['wp:featuredmedia'][0].source_url);\\n }\\n \\n return {\\n id: post.id,\\n title: post.title.rendered,\\n excerpt: Utils.stripHtml(post.excerpt.rendered),\\n link: this.getPostUrl(post),\\n type: hasEvent ? 'event' : hasNews ? 'news' : 'unknown',\\n date: post._bifa_event_date || post.date,\\n location: post._bifa_location,\\n priority: post._bifa_priority,\\n country: post._bifa_event_country,\\n image: image\\n };\\n }\\n\\n filterContent(filter) {\\n this.state.filter = filter;\\n \\n let filtered = this.state.content;\\n if (filter === 'events') {\\n filtered = this.state.content.filter(item => item.type === 'event');\\n } else if (filter === 'news') {\\n filtered = this.state.content.filter(item => item.type === 'news');\\n }\\n \\n return filtered;\\n }\\n\\n groupByCountry(content) {\\n const grouped = {};\\n \\n content.forEach(item => {\\n if (item.country && BRICS_COUNTRIES[item.country]) {\\n if (!grouped[item.country]) {\\n grouped[item.country] = [];\\n }\\n grouped[item.country].push(item);\\n }\\n });\\n \\n Object.keys(grouped).forEach(country => {\\n const countrySize = BRICS_COUNTRIES[country].size;\\n const maxMarkers = MAX_MARKERS_BY_SIZE[countrySize];\\n \\n grouped[country].sort((a, b) => new Date(b.date) - new Date(a.date));\\n \\n grouped[country] = grouped[country].slice(0, maxMarkers);\\n });\\n \\n return grouped;\\n }\\n}\\n\\n\\\/\\\/ ==================== MARKER MANAGER ====================\\nclass MarkerManager {\\n constructor(state, eventManager, popupManager) {\\n this.state = state;\\n this.eventManager = eventManager;\\n this.popupManager = popupManager;\\n }\\n\\n renderMarkers(groupedContent) {\\n if (!this.state.markersGroup) return;\\n \\n this.state.markersGroup.innerHTML = '';\\n \\n Object.entries(groupedContent).forEach(([country, items]) => {\\n const center = this.state.countryCenters[country];\\n if (!center) return;\\n \\n const markerCount = items.length;\\n \\n let radius;\\n if (markerCount === 1) {\\n radius = 0;\\n } else if (markerCount === 2) {\\n radius = this.state.isMobile ? 15 : 20;\\n } else if (markerCount === 3) {\\n radius = this.state.isMobile ? 20 : 25;\\n } else {\\n radius = this.state.isMobile ? 25 : 30;\\n }\\n \\n \\\/\\\/ \\u0414\\u043e\\u0431\\u0430\\u0432\\u043b\\u044f\\u0435\\u043c \\u043c\\u0430\\u0440\\u043a\\u0435\\u0440\\u044b \\u0432 \\u043e\\u0431\\u0440\\u0430\\u0442\\u043d\\u043e\\u043c \\u043f\\u043e\\u0440\\u044f\\u0434\\u043a\\u0435: \\u0441\\u0442\\u0430\\u0440\\u044b\\u0435 \\u043f\\u0435\\u0440\\u0432\\u044b\\u043c\\u0438, \\u043d\\u043e\\u0432\\u044b\\u0435 \\u043f\\u043e\\u0441\\u043b\\u0435\\u0434\\u043d\\u0438\\u043c\\u0438\\n \\\/\\\/ \\u0412 SVG \\u043f\\u043e\\u0441\\u043b\\u0435\\u0434\\u043d\\u0438\\u0435 \\u044d\\u043b\\u0435\\u043c\\u0435\\u043d\\u0442\\u044b \\u043e\\u0442\\u043e\\u0431\\u0440\\u0430\\u0436\\u0430\\u044e\\u0442\\u0441\\u044f \\u043f\\u043e\\u0432\\u0435\\u0440\\u0445 \\u043f\\u0435\\u0440\\u0432\\u044b\\u0445\\n const reversedItems = [...items].reverse();\\n \\n reversedItems.forEach((item, reverseIndex) => {\\n \\\/\\\/ \\u0412\\u044b\\u0447\\u0438\\u0441\\u043b\\u044f\\u0435\\u043c \\u043e\\u0440\\u0438\\u0433\\u0438\\u043d\\u0430\\u043b\\u044c\\u043d\\u044b\\u0439 \\u0438\\u043d\\u0434\\u0435\\u043a\\u0441 \\u0434\\u043b\\u044f \\u043f\\u0440\\u0430\\u0432\\u0438\\u043b\\u044c\\u043d\\u043e\\u0433\\u043e \\u043f\\u043e\\u0437\\u0438\\u0446\\u0438\\u043e\\u043d\\u0438\\u0440\\u043e\\u0432\\u0430\\u043d\\u0438\\u044f\\n const index = markerCount - reverseIndex - 1;\\n \\n let markerX, markerY;\\n \\n if (markerCount === 1) {\\n markerX = center.x;\\n markerY = center.y;\\n } else {\\n const angle = (index * 360 \\\/ markerCount - 90) * Math.PI \\\/ 180;\\n markerX = center.x + Math.cos(angle) * radius;\\n markerY = center.y + Math.sin(angle) * radius;\\n }\\n \\n const marker = this.createMarker(item, markerX, markerY, reverseIndex);\\n this.setupMarkerEvents(marker, item);\\n this.state.markersGroup.appendChild(marker);\\n });\\n });\\n }\\n\\n createMarker(item, x, y, zIndex = 0) {\\n const markerSize = this.state.isMobile ? \\n CONFIG.MARKER_SIZE_MOBILE : \\n CONFIG.MARKER_SIZE_DESKTOP;\\n \\n const g = document.createElementNS('http:\\\/\\\/www.w3.org\\\/2000\\\/svg', 'g');\\n g.setAttribute('class', `svg-event-marker ${item.type} ${item.priority === 'urgent' ? 'urgent' : ''}`);\\n g.setAttribute('transform', `translate(${x},${y})`);\\n g.setAttribute('data-item-id', item.id);\\n g.setAttribute('data-z-index', zIndex);\\n \\n const hitArea = document.createElementNS('http:\\\/\\\/www.w3.org\\\/2000\\\/svg', 'circle');\\n hitArea.setAttribute('r', this.state.isMobile ? '35' : '30');\\n hitArea.setAttribute('fill', 'transparent');\\n hitArea.setAttribute('class', 'hit-area');\\n \\n const circle = document.createElementNS('http:\\\/\\\/www.w3.org\\\/2000\\\/svg', 'circle');\\n circle.setAttribute('r', markerSize);\\n \\n \\\/\\\/ \\u0418\\u0421\\u041f\\u0420\\u0410\\u0412\\u041b\\u0415\\u041d\\u0418\\u0415 \\u0414\\u041b\\u042f iPhone: \\u0418\\u0441\\u043f\\u043e\\u043b\\u044c\\u0437\\u0443\\u0435\\u043c \\u044d\\u043c\\u043e\\u0434\\u0437\\u0438 \\u0432\\u043c\\u0435\\u0441\\u0442\\u043e \\u0432\\u043d\\u0435\\u0448\\u043d\\u0438\\u0445 SVG \\u0438\\u043a\\u043e\\u043d\\u043e\\u043a\\n const text = document.createElementNS('http:\\\/\\\/www.w3.org\\\/2000\\\/svg', 'text');\\n text.setAttribute('x', '0');\\n text.setAttribute('y', this.state.isMobile ? '6' : '7');\\n text.setAttribute('text-anchor', 'middle');\\n text.setAttribute('dominant-baseline', 'middle');\\n text.setAttribute('font-size', this.state.isMobile ? '16' : '18');\\n text.setAttribute('pointer-events', 'none');\\n text.setAttribute('user-select', 'none');\\n \\n \\\/\\\/ \\u0412\\u044b\\u0431\\u0438\\u0440\\u0430\\u0435\\u043c \\u044d\\u043c\\u043e\\u0434\\u0437\\u0438 \\u0432 \\u0437\\u0430\\u0432\\u0438\\u0441\\u0438\\u043c\\u043e\\u0441\\u0442\\u0438 \\u043e\\u0442 \\u0442\\u0438\\u043f\\u0430 \\u0438 \\u043f\\u0440\\u0438\\u043e\\u0440\\u0438\\u0442\\u0435\\u0442\\u0430\\n if (item.priority === 'urgent' && item.type === 'news') {\\n text.textContent = '\\ud83d\\udea8';\\n } else if (item.type === 'event') {\\n text.textContent = '\\ud83d\\udcc5';\\n } else {\\n text.textContent = '\\ud83d\\udcf0';\\n }\\n \\n g.appendChild(hitArea);\\n g.appendChild(circle);\\n g.appendChild(text);\\n \\n return g;\\n }\\n\\n setupMarkerEvents(marker, item) {\\n if (this.state.isTouchDevice || this.state.isMobile) {\\n this.eventManager.add(marker, 'touchstart', (e) => {\\n e.preventDefault();\\n e.stopPropagation();\\n this.handleMarkerTap(marker, item);\\n }, { passive: false });\\n \\n this.eventManager.add(marker, 'click', (e) => {\\n e.preventDefault();\\n e.stopPropagation();\\n const timeSinceTouch = Date.now() - this.state.touchStartTime;\\n if (timeSinceTouch > CONFIG.TOUCH_TAP_THRESHOLD) {\\n this.handleMarkerTap(marker, item);\\n }\\n });\\n } else {\\n this.eventManager.add(marker, 'mouseenter', (e) => {\\n e.stopPropagation();\\n this.state.activeMarker = marker;\\n this.popupManager.show(item, e);\\n });\\n \\n this.eventManager.add(marker, 'mouseleave', (e) => {\\n e.stopPropagation();\\n setTimeout(() => {\\n if (!this.state.isPopupHovered && this.state.activeMarker === marker) {\\n this.popupManager.hide();\\n }\\n }, CONFIG.POPUP_HOVER_DELAY);\\n });\\n \\n this.eventManager.add(marker, 'click', (e) => {\\n e.stopPropagation();\\n window.location.href = item.link;\\n });\\n }\\n }\\n\\n handleMarkerTap(marker, item) {\\n if (this.state.activeMarker === marker && this.state.isPopupOpen) {\\n this.popupManager.hide();\\n return;\\n }\\n \\n this.state.activeMarker = marker;\\n this.state.touchStartTime = Date.now();\\n \\n setTimeout(() => {\\n this.popupManager.show(item, { currentTarget: marker });\\n }, 10);\\n }\\n}\\n\\n\\\/\\\/ ==================== POPUP MANAGER ====================\\nclass PopupManager {\\n constructor(state, eventManager) {\\n this.state = state;\\n this.eventManager = eventManager;\\n this.popup = Utils.$('eventPopup');\\n this.overlay = Utils.$('popupOverlay');\\n this.setupOverlayEvents();\\n }\\n\\n setupOverlayEvents() {\\n if (this.state.isTouchDevice) {\\n this.eventManager.add(this.overlay, 'touchstart', (e) => {\\n e.preventDefault();\\n this.hide();\\n });\\n }\\n \\n this.eventManager.add(this.overlay, 'click', () => this.hide());\\n }\\n\\n show(item, event) {\\n this.state.isPopupOpen = true;\\n this.renderPopup(item);\\n this.positionPopup(event);\\n this.setupPopupEvents();\\n }\\n\\n renderPopup(item) {\\n const imageHtml = item.image ? `\\n <\/p>\n<div class=\"\\\"popup-image-wrapper\\\"\">\\n <img class=\"\\\"popup-image\\\"\" \\n src=\"\\\"${item.image}\\\"\" alt =\"\\\"${item.title.replace(\\\/\\\"\\\/g,\" '"')}\\\" data-image-url =\"\\\"${item.image}\\\"\">\\n <\\\/div>\\n ` : `\\n <\/p>\n<div class=\"\\\"popup-image-wrapper\" no-image\\\">\\n <\/p>\n<div class=\"\\\"popup-image-placeholder\\\"\">${item.type === 'event' ? '\\ud83d\\udcc5' : '\\ud83d\\udcf0'}<\\\/div>\\n <\\\/div>\\n `;\\n \\n const closeButton = (this.state.isMobile || this.state.isTouchDevice) ? \\n '<button class=\"\\\"popup-close\\\"\" id=\"\\\"popupCloseBtn\\\"\">\\u00d7<\\\/button>' : '';\\n \\n this.popup.innerHTML = `\\n ${closeButton}\\n <\/p>\n<div class=\"\\\"popup-header\\\"\">\\n ${imageHtml}\\n <\/p>\n<div class=\"\\\"popup-content\\\"\">\\n <\/p>\n<h4 class=\"\\\"popup-title\\\"\">${item.title}<\\\/h4>\\n <\/p>\n<div class=\"\\\"popup-meta\\\"\">\\n ${item.date ? `<\/p>\n<div class=\"\\\"popup-meta-item\\\"\">\\ud83d\\udcc5 ${Utils.formatDate(item.date)}<\\\/div>` : ''}\\n ${item.location ? `<\/p>\n<div class=\"\\\"popup-meta-item\\\"\">\\ud83d\\udccd ${item.location}<\\\/div>` : ''}\\n ${item.type ? `<\/p>\n<div class=\"\\\"popup-meta-item\\\"\">${item.type === 'event' ? '\\ud83c\\udfaf Event' : '\\ud83d\\udcf0 News'}<\\\/div>` : ''}\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\/p>\n<p class=\"\\\"popup-excerpt\\\"\">${item.excerpt}<\\\/p>\\n <a href=\"\\\"${item.link}\\\"\" class=\"\\\"popup-link\\\"\" onclick=\"\\\"window.location.href='${item.link}';\" return false;\\\">View Details \\u2192<\\\/a>\\n `;\\n \\n this.popup.classList.add('active');\\n \\n if (item.image) {\\n this.setupImageErrorHandling(this.popup.querySelector('.popup-image'));\\n }\\n \\n if (closeButton) {\\n const closeBtn = Utils.$('popupCloseBtn');\\n if (closeBtn) {\\n this.eventManager.add(closeBtn, 'click', () => this.hide());\\n }\\n }\\n }\\n\\n setupImageErrorHandling(img) {\\n if (!img || this.state.imageLoadErrors.get(img)) return;\\n \\n const errorHandler = () => {\\n if (!this.state.imageLoadErrors.get(img)) {\\n this.state.imageLoadErrors.set(img, true);\\n const originalUrl = img.dataset.imageUrl || img.src;\\n img.src = Utils.createImageProxy(originalUrl);\\n }\\n };\\n \\n this.eventManager.add(img, 'error', errorHandler);\\n }\\n\\n positionPopup(event) {\\n if (this.state.isMobile || this.state.isTouchDevice) {\\n this.overlay.classList.add('active');\\n return;\\n }\\n \\n const rect = event.currentTarget.getBoundingClientRect();\\n const popupWidth = 380;\\n const popupHeight = this.popup.offsetHeight || 300;\\n \\n let posX = rect.right + 15;\\n let posY = rect.top + rect.height \\\/ 2 - popupHeight \\\/ 2;\\n \\n if (posX + popupWidth > window.innerWidth - 20) {\\n posX = rect.left - popupWidth - 15;\\n }\\n \\n posY = Utils.clamp(posY, 20, window.innerHeight - popupHeight - 20);\\n \\n this.popup.style.left = posX + 'px';\\n this.popup.style.top = posY + 'px';\\n }\\n\\n setupPopupEvents() {\\n if (!this.state.isMobile && !this.state.isTouchDevice) {\\n this.eventManager.add(this.popup, 'mouseenter', () => {\\n this.state.isPopupHovered = true;\\n });\\n \\n this.eventManager.add(this.popup, 'mouseleave', () => {\\n this.state.isPopupHovered = false;\\n setTimeout(() => {\\n if (!this.state.isPopupHovered) {\\n this.hide();\\n }\\n }, 100);\\n });\\n }\\n }\\n\\n hide() {\\n this.popup.classList.remove('active');\\n this.overlay.classList.remove('active');\\n this.state.isPopupOpen = false;\\n this.state.isPopupHovered = false;\\n this.state.activeMarker = null;\\n }\\n}\\n\\n\\\/\\\/ ==================== UI MANAGER ====================\\nclass UIManager {\\n constructor(state, eventManager) {\\n this.state = state;\\n this.eventManager = eventManager;\\n }\\n\\n renderFilters() {\\n const container = Utils.$('filterControls');\\n const filters = [\\n { value: 'all', label: 'All', classes: '' },\\n { value: 'events', label: 'Events', classes: '' },\\n { value: 'news', label: 'News', classes: 'news' }\\n ];\\n \\n container.innerHTML = filters.map(filter => `\\n <button class=\"\\\"filter-btn\" ${filter.classes} ${filter.value =\"==\" 'all' ? 'active' : ''}\\\" \\n data-filter=\"\\\"${filter.value}\\\"\">\\n ${filter.label}\\n <\\\/button>\\n `).join('');\\n \\n Utils.$$('.filter-btn').forEach(btn => {\\n this.eventManager.add(btn, 'click', (e) => {\\n this.handleFilterClick(e.target);\\n });\\n });\\n }\\n\\n handleFilterClick(button) {\\n const filter = button.getAttribute('data-filter');\\n \\n Utils.$$('.filter-btn').forEach(btn => {\\n btn.classList.remove('active');\\n });\\n button.classList.add('active');\\n \\n app.applyFilter(filter);\\n }\\n\\n renderLegend() {\\n const container = Utils.$('legend');\\n \\n container.innerHTML = Object.entries(BRICS_COUNTRIES).map(([code, data]) => `\\n <\/p>\n<div class=\"\\\"brics-country-tag\\\"\" data-country=\"\\\"${code}\\\"\">\\n <img class=\"\\\"country-flag\\\"\" \\n src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Flags\\\/${code.toLowerCase()}.svg\\\"\" alt =\"\\\"${data.name}\\\"\" loading=\"\\\"lazy\\\"\">\\n <span class=\"\\\"country-name\\\"\">${data.name}<\\\/span>\\n <span class=\"\\\"event-count\\\"\" style=\"\\\"display:none\\\"\">0<\\\/span>\\n <\\\/div>\\n `).join('');\\n \\n Utils.$$('.brics-country-tag').forEach(tag => {\\n this.setupTagEvents(tag);\\n });\\n }\\n\\n setupTagEvents(tag) {\\n this.eventManager.add(tag, 'click', (e) => {\\n const code = e.currentTarget.getAttribute('data-country');\\n this.toggleCountryHighlight(code);\\n });\\n \\n if (!this.state.isTouchDevice) {\\n this.eventManager.add(tag, 'mouseenter', (e) => {\\n const code = e.currentTarget.getAttribute('data-country');\\n this.highlightCountryPaths(code, true);\\n });\\n \\n this.eventManager.add(tag, 'mouseleave', (e) => {\\n const code = e.currentTarget.getAttribute('data-country');\\n this.highlightCountryPaths(code, false);\\n });\\n }\\n }\\n\\n toggleCountryHighlight(code) {\\n const paths = this.getCountryPaths(code);\\n paths.forEach(path => path.classList.toggle('active-country'));\\n \\n const tag = document.querySelector(`[data-country=\\\"${code}\\\"]`);\\n if (tag) {\\n tag.classList.toggle('active');\\n }\\n }\\n\\n highlightCountryPaths(code, highlight) {\\n const paths = this.getCountryPaths(code);\\n paths.forEach(path => {\\n path.style.filter = highlight ? 'brightness(1.3)' : '';\\n });\\n }\\n\\n getCountryPaths(code) {\\n if (code === 'ID') {\\n return this.state.svg.querySelectorAll(\\n INDONESIA_ID_PATTERNS.map(p => `path[id=\\\"${p}\\\"], path[id^=\\\"${p}\\\"]`).join(',')\\n );\\n }\\n return this.state.svg.querySelectorAll(`path[data-brics=\\\"${code}\\\"]`);\\n }\\n\\n updateCounts(groupedContent) {\\n Utils.$$('.brics-country-tag').forEach(tag => {\\n const code = tag.getAttribute('data-country');\\n const count = groupedContent[code]?.length || 0;\\n const counter = tag.querySelector('.event-count');\\n \\n if (count > 0) {\\n counter.textContent = count;\\n counter.style.display = 'block';\\n } else {\\n counter.style.display = 'none';\\n }\\n });\\n }\\n}\\n\\n\\\/\\\/ ==================== MAIN APPLICATION ====================\\nclass BIFAMapApp {\\n constructor() {\\n this.state = new AppState();\\n this.eventManager = new EventManager();\\n this.zoomController = new ZoomController(this.state, this.eventManager);\\n this.mapManager = new MapManager(this.state, this.eventManager);\\n this.contentManager = new ContentManager(this.state, this.eventManager);\\n this.popupManager = new PopupManager(this.state, this.eventManager);\\n this.markerManager = new MarkerManager(this.state, this.eventManager, this.popupManager);\\n this.uiManager = new UIManager(this.state, this.eventManager);\\n }\\n\\n async init() {\\n this.uiManager.renderFilters();\\n this.uiManager.renderLegend();\\n \\n await this.mapManager.loadSVG();\\n \\n this.zoomController.init(\\n Utils.$('mapZoomContainer'),\\n Utils.$('mapContainer')\\n );\\n \\n await this.contentManager.loadContent();\\n this.updateMap();\\n \\n this.setupGlobalEvents();\\n }\\n\\n setupGlobalEvents() {\\n this.eventManager.add(document, 'click', (e) => {\\n if ((this.state.isMobile || this.state.isTouchDevice) && \\n this.state.isPopupOpen && \\n !e.target.closest('.event-popup') && \\n !e.target.closest('.svg-event-marker')) {\\n this.popupManager.hide();\\n }\\n });\\n \\n this.eventManager.add(document, 'keydown', (e) => {\\n if (e.key === 'Escape' && this.state.isPopupOpen) {\\n this.popupManager.hide();\\n }\\n });\\n \\n this.eventManager.add(window, 'scroll', Utils.debounce(() => {\\n if (!this.state.isMobile && !this.state.isTouchDevice && this.state.isPopupOpen) {\\n this.popupManager.hide();\\n }\\n }, 100));\\n \\n this.eventManager.add(window, 'resize', Utils.debounce(() => {\\n this.state.updateMobileState();\\n this.zoomController.updateBounds();\\n \\n if (this.state.isMobile) {\\n this.zoomController.reset();\\n }\\n }, CONFIG.DEBOUNCE_DELAY));\\n }\\n\\n applyFilter(filter) {\\n const filtered = this.contentManager.filterContent(filter);\\n const grouped = this.contentManager.groupByCountry(filtered);\\n \\n this.uiManager.updateCounts(grouped);\\n this.markerManager.renderMarkers(grouped);\\n }\\n\\n updateMap() {\\n const filtered = this.contentManager.filterContent(this.state.filter);\\n const grouped = this.contentManager.groupByCountry(filtered);\\n \\n this.uiManager.updateCounts(grouped);\\n this.markerManager.renderMarkers(grouped);\\n }\\n\\n cleanup() {\\n this.eventManager.cleanup();\\n if (this.state.resizeObserver) {\\n this.state.resizeObserver.disconnect();\\n }\\n }\\n}\\n\\n\\\/\\\/ ==================== INITIALIZATION ====================\\nlet app;\\n\\nfunction initApp() {\\n app = new BIFAMapApp();\\n app.init();\\n}\\n\\nif (document.readyState === 'loading') {\\n document.addEventListener('DOMContentLoaded', initApp);\\n} else {\\n initApp();\\n}\\n\\nwindow.addEventListener('beforeunload', () => {\\n if (app) {\\n app.cleanup();\\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 Quote Block - Official Branding<\\\/title>\\n\\n \\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@400;500;600;700;800&family=Poppins:wght@300;400;500;600;700&display=swap\\\"\" rel=\"\\\"stylesheet\\\"\">\\n\\n<\/p>\n<style>\\n\\\/* Reset and Base *\\\/\\n* {\\n margin: 0;\\n padding: 0;\\n box-sizing: border-box;\\n}\\n\\nhtml {\\n overflow-x: hidden;\\n overflow-y: auto;\\n}\\n\\nbody {\\n font-family: 'Montserrat', sans-serif;\\n background: #f5f5f5;\\n overflow-x: hidden;\\n position: relative;\\n}\\n\\n\\\/* Modern Minimalism Quote Section *\\\/\\n.quote-section-wrapper {\\n width: 100vw;\\n position: relative;\\n left: 50%;\\n right: 50%;\\n margin-left: -50vw;\\n margin-right: -50vw;\\n background: #FFFFFF; \\\/* Official Bright White *\\\/\\n overflow: hidden;\\n max-width: 100vw;\\n}\\n\\n.quote-section {\\n padding: 100px 0;\\n position: relative;\\n}\\n\\n.quote-container {\\n max-width: 1200px;\\n margin: 0 auto;\\n padding: 0 40px;\\n position: relative;\\n}\\n\\n\\\/* Layout *\\\/\\n.quote-layout {\\n display: grid;\\n grid-template-columns: 300px 1fr;\\n gap: 80px;\\n align-items: center;\\n}\\n\\n\\\/* Left Panel with Bird *\\\/\\n.bird-panel {\\n position: relative;\\n height: 400px;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n animation: fadeInLeft 1s ease-out;\\n}\\n\\n.bird-circle {\\n width: 250px;\\n height: 250px;\\n border-radius: 50%;\\n background: linear-gradient(135deg, rgba(212, 175, 55, 0.05) 0%, rgba(212, 175, 55, 0.08) 100%); \\\/* Heritage Gold gradient *\\\/\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n position: relative;\\n}\\n\\n.bird-icon {\\n width: 150px;\\n height: 150px;\\n background-image: url('\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Logo\\\/bird.svg');\\n background-size: contain;\\n background-repeat: no-repeat;\\n background-position: center;\\n opacity: 0.2;\\n animation: hover-bird 4s ease-in-out infinite;\\n}\\n\\n@keyframes hover-bird {\\n 0%, 100% {\\n transform: translateY(0);\\n }\\n 50% {\\n transform: translateY(-10px);\\n }\\n}\\n\\n\\\/* Right Panel with Quote *\\\/\\n.quote-content {\\n animation: fadeInRight 1s ease-out;\\n}\\n\\n.quote-text {\\n font-family: 'Poppins', sans-serif !important; \\\/* Poppins \\u0434\\u043b\\u044f \\u0446\\u0438\\u0442\\u0430\\u0442\\u044b *\\\/\\n font-size: 2.5rem;\\n font-weight: 300;\\n line-height: 1.5;\\n color: #0A1F44; \\\/* Official Deep Navy *\\\/\\n margin-bottom: 40px;\\n position: relative;\\n}\\n\\n.quote-text::before {\\n content: '\\\"';\\n position: absolute;\\n top: -30px;\\n left: -50px;\\n font-size: 100px;\\n color: #D4AF37; \\\/* Official Heritage Gold *\\\/\\n opacity: 0.3;\\n font-family: 'Poppins', sans-serif;\\n}\\n\\n\\\/* Author Block *\\\/\\n.author-block {\\n display: flex;\\n align-items: center;\\n gap: 20px;\\n}\\n\\n.author-logo {\\n width: 60px;\\n height: 60px;\\n background-image: url('\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/LogoF.svg');\\n background-size: contain;\\n background-repeat: no-repeat;\\n opacity: 0.8;\\n}\\n\\n.author-details {\\n border-left: 3px solid #D4AF37; \\\/* Official Heritage Gold *\\\/\\n padding-left: 20px;\\n}\\n\\n.author-name {\\n font-size: 1.3rem;\\n font-weight: 700;\\n color: #0A1F44; \\\/* Official Deep Navy *\\\/\\n margin-bottom: 5px;\\n font-family: 'Montserrat', sans-serif;\\n}\\n\\n.author-title {\\n font-size: 1rem;\\n color: #1D6143; \\\/* Official Civic Green *\\\/\\n font-weight: 500;\\n font-family: 'Montserrat', sans-serif;\\n}\\n\\n\\\/* Animations *\\\/\\n@keyframes fadeInLeft {\\n from {\\n opacity: 0;\\n transform: translateX(-50px);\\n }\\n to {\\n opacity: 1;\\n transform: translateX(0);\\n }\\n}\\n\\n@keyframes fadeInRight {\\n from {\\n opacity: 0;\\n transform: translateX(50px);\\n }\\n to {\\n opacity: 1;\\n transform: translateX(0);\\n }\\n}\\n\\n\\\/* Responsive Design *\\\/\\n@media (max-width: 968px) {\\n .quote-layout {\\n grid-template-columns: 1fr;\\n gap: 40px;\\n }\\n \\n .bird-panel {\\n height: 200px;\\n }\\n \\n .bird-circle {\\n width: 150px;\\n height: 150px;\\n }\\n \\n .bird-icon {\\n width: 100px;\\n height: 100px;\\n }\\n \\n .quote-text {\\n font-size: 1.8rem;\\n }\\n}\\n\\n@media (max-width: 640px) {\\n .quote-section {\\n padding: 80px 0;\\n }\\n \\n .quote-text {\\n font-size: 1.5rem;\\n }\\n \\n .quote-text::before {\\n font-size: 60px;\\n left: -30px;\\n top: -20px;\\n }\\n}\\n<\\\/style>\\n<\\\/head>\\n<body>\\n\\n<\/p>\n<div class=\"\\\"quote-section-wrapper\\\"\">\\n <\/p>\n<section class=\"\\\"quote-section\\\"\">\\n <\/p>\n<div class=\"\\\"quote-container\\\"\">\\n <\/p>\n<div class=\"\\\"quote-layout\\\"\">\\n \\n <\/p>\n<div class=\"\\\"bird-panel\\\"\">\\n <\/p>\n<div class=\"\\\"bird-circle\\\"\">\\n <\/p>\n<div class=\"\\\"bird-icon\\\"\"><\\\/div>\\n <\\\/div>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"quote-content\\\"\">\\n <\/p>\n<blockquote class=\"\\\"quote-text\\\"\"><p>\\n We're not just playing a game. We're building the future.\\n <\\\/blockquote>\\n \\n <\/p>\n<div class=\"\\\"author-block\\\"\">\\n <\/p>\n<div class=\"\\\"author-logo\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"author-details\\\"\">\\n <\/p>\n<div class=\"\\\"author-name\\\"\"> Dr. Salim Almazaini<\\\/div>\\n <\/p>\n<div class=\"\\\"author-title\\\"\">Founder & President, BIFA & BIFA+<\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/section>\\n<\\\/div>\\n\\n<script>\\n\\\/\\\/ Animation on scroll\\ndocument.addEventListener('DOMContentLoaded', function() {\\n const observerOptions = {\\n threshold: 0.3,\\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.animationPlayState = 'running';\\n observer.unobserve(entry.target);\\n }\\n });\\n }, observerOptions);\\n\\n \\\/\\\/ Observe animated elements\\n document.querySelectorAll('.bird-panel, .quote-content').forEach(el => {\\n if (el) {\\n if (el.style.animation || window.getComputedStyle(el).animation !== 'none') {\\n el.style.animationPlayState = 'paused';\\n observer.observe(el);\\n }\\n }\\n });\\n\\n \\\/\\\/ Preload images\\n function preloadImages() {\\n const imageUrls = [\\n '\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Logo\\\/bird.svg',\\n '\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/flag-logo1.svg'\\n ];\\n \\n imageUrls.forEach(url => {\\n const img = new Image();\\n img.src = url;\\n });\\n }\\n \\n preloadImages();\\n});\\n<\\\/script>\\n\\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+ BRICS Alliance<\\\/title>\\n\\n \\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&display=swap\\\"\" rel=\"\\\"stylesheet\\\"\">\\n\\n<\/p>\n<style>\\n\\\/* ========= OFFICIAL BIFA+ BRAND VARIABLES - HIGH PRIORITY ========= *\\\/\\n:root {\\n \\\/* Official BIFA+ Colors from Brand Guide *\\\/\\n --bifa-deep-navy: #0A1F44 !important;\\n --bifa-heritage-gold: #D4AF37 !important;\\n --bifa-civic-green: #1D6143 !important;\\n --bifa-bright-white: #FFFFFF !important;\\n --bifa-soft-black: #1A1A1A !important;\\n --bifa-gray-light: #F8F9FA !important;\\n --bifa-gray: #6C757D !important;\\n \\n \\\/* Official BIFA+ Typography from Brand Guide *\\\/\\n --bifa-font-heading: 'Montserrat', sans-serif !important;\\n --bifa-font-body: 'Poppins', sans-serif !important;\\n \\n \\\/* Premium Effects *\\\/\\n --bifa-shadow-premium: 0 25px 80px rgba(10, 31, 68, 0.15) !important;\\n --bifa-shadow-hover: 0 35px 100px rgba(10, 31, 68, 0.2) !important;\\n --bifa-shadow-gold: 0 15px 40px rgba(212, 175, 55, 0.3) !important;\\n --bifa-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;\\n}\\n\\n\\\/* ========= YOOTHEME OVERRIDE - CRITICAL STYLES ========= *\\\/\\n.brics-section-wrapper,\\n.brics-section-wrapper *,\\n.brics-section,\\n.brics-section * {\\n margin: 0 !important;\\n padding: 0 !important;\\n box-sizing: border-box !important;\\n}\\n\\n\\\/* Force official BIFA+ fonts on all elements - OVERRIDE YOOTHEME *\\\/\\n.brics-section-wrapper,\\n.brics-section-wrapper *:not(.flag-image):not(.flag-image *) {\\n font-family: var(--bifa-font-body) !important;\\n}\\n\\n.brics-section-wrapper h1,\\n.brics-section-wrapper h2,\\n.brics-section-wrapper h3,\\n.brics-section-wrapper h4,\\n.brics-section-wrapper h5,\\n.brics-section-wrapper h6,\\n.brics-section-wrapper .section-title,\\n.brics-section-wrapper .flags-title,\\n.brics-section-wrapper .content-intro,\\n.brics-section-wrapper .stat-number,\\n.brics-section-wrapper .stat-label,\\n.brics-section-wrapper .flag-name,\\n.brics-section-wrapper .cta-text,\\n.brics-section-wrapper .btn-text {\\n font-family: var(--bifa-font-heading) !important;\\n}\\n\\n\\\/* ========= SECTION WRAPPER - FULL WIDTH ========= *\\\/\\n.brics-section-wrapper {\\n width: 100vw !important;\\n position: relative !important;\\n left: 50% !important;\\n margin-left: -50vw !important;\\n background: transparent !important;\\n overflow: hidden !important;\\n z-index: 1 !important;\\n}\\n\\n\\\/* ========= BRICS SECTION ========= *\\\/\\n.brics-section {\\n padding: 80px 0 !important;\\n background: transparent !important;\\n position: relative !important;\\n overflow: hidden !important;\\n width: 100% !important;\\n margin: 0 !important;\\n}\\n\\n\\\/* ========= CONTAINER ========= *\\\/\\n.brics-container {\\n max-width: 1400px !important;\\n margin: 0 auto !important;\\n padding: 0 20px !important;\\n position: relative !important;\\n z-index: 10 !important;\\n width: 100% !important;\\n}\\n\\n\\\/* ========= SECTION TITLE - OFFICIAL BIFA+ STYLE ========= *\\\/\\n.brics-section .section-title {\\n font-family: var(--bifa-font-heading) !important;\\n font-size: clamp(2.5rem, 5vw, 4rem) !important;\\n font-weight: 900 !important;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700) !important;\\n -webkit-background-clip: text !important;\\n background-clip: text !important;\\n color: transparent !important;\\n text-align: center !important;\\n margin: 0 0 60px 0 !important;\\n position: relative !important;\\n animation: fadeInDown 1s ease-out !important;\\n text-transform: uppercase !important;\\n letter-spacing: 2px !important;\\n cursor: pointer !important;\\n transition: var(--bifa-transition) !important;\\n line-height: 1.2 !important;\\n padding: 0 !important;\\n}\\n\\n.brics-section .section-title::after {\\n content: '' !important;\\n position: absolute !important;\\n bottom: -15px !important;\\n left: 50% !important;\\n transform: translateX(-50%) !important;\\n width: 0 !important;\\n height: 5px !important;\\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700) !important;\\n border-radius: 3px !important;\\n transition: width 0.4s ease !important;\\n}\\n\\n.brics-section .section-title:hover {\\n transform: translateY(-3px) !important;\\n filter: drop-shadow(0 10px 20px rgba(212, 175, 55, 0.3)) !important;\\n}\\n\\n.brics-section .section-title:hover::after {\\n width: 100px !important;\\n}\\n\\n\\\/* ========= MAIN IMAGE - OFFICIAL BIFA+ STYLE ========= *\\\/\\n.brics-section .brics-image {\\n width: 100% !important;\\n max-width: 1200px !important;\\n margin: 0 auto 60px auto !important;\\n border-radius: 25px !important;\\n overflow: hidden !important;\\n box-shadow: var(--bifa-shadow-premium) !important;\\n animation: fadeInUp 1s ease-out !important;\\n position: relative !important;\\n transition: var(--bifa-transition) !important;\\n padding: 0 !important;\\n}\\n\\n.brics-section .brics-image::before {\\n content: '' !important;\\n position: absolute !important;\\n inset: 0 !important;\\n background: linear-gradient(135deg, \\n rgba(10, 31, 68, 0.1) 0%, \\n transparent 50%, \\n rgba(212, 175, 55, 0.1) 100%) !important;\\n opacity: 0 !important;\\n transition: opacity 0.3s ease !important;\\n z-index: 1 !important;\\n}\\n\\n.brics-section .brics-image:hover::before {\\n opacity: 1 !important;\\n}\\n\\n.brics-section .brics-image:hover {\\n transform: translateY(-5px) !important;\\n box-shadow: var(--bifa-shadow-hover) !important;\\n}\\n\\n.brics-section .brics-image img {\\n width: 100% !important;\\n height: auto !important;\\n display: block !important;\\n transition: transform 0.3s ease !important;\\n margin: 0 !important;\\n padding: 0 !important;\\n}\\n\\n.brics-section .brics-image:hover img {\\n transform: scale(1.02) !important;\\n}\\n\\n\\\/* ========= CONTENT SECTION - OFFICIAL BIFA+ STYLE ========= *\\\/\\n.brics-section .brics-content {\\n background: rgba(255, 255, 255, 0.95) !important;\\n backdrop-filter: blur(20px) !important;\\n border-radius: 30px !important;\\n padding: 60px !important;\\n margin: 0 auto 60px auto !important;\\n max-width: 1200px !important;\\n animation: fadeInUp 1s ease-out 0.2s both !important;\\n box-shadow: var(--bifa-shadow-premium) !important;\\n border: 2px solid rgba(212, 175, 55, 0.1) !important;\\n position: relative !important;\\n overflow: hidden !important;\\n width: 100% !important;\\n}\\n\\n.brics-section .brics-content::before {\\n content: '' !important;\\n position: absolute !important;\\n top: 0 !important;\\n left: 0 !important;\\n right: 0 !important;\\n height: 3px !important;\\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent) !important;\\n animation: contentGlow 4s ease-in-out infinite !important;\\n}\\n\\n@keyframes contentGlow {\\n 0%, 100% { opacity: 0.5 !important; }\\n 50% { opacity: 1 !important; }\\n}\\n\\n.brics-section .content-intro {\\n font-family: var(--bifa-font-heading) !important;\\n font-size: clamp(1.3rem, 2.5vw, 1.8rem) !important;\\n line-height: 1.7 !important;\\n background: linear-gradient(135deg, var(--bifa-deep-navy), #162e5a) !important;\\n -webkit-background-clip: text !important;\\n background-clip: text !important;\\n color: transparent !important;\\n font-weight: 700 !important;\\n text-align: center !important;\\n margin: 0 0 40px 0 !important;\\n position: relative !important;\\n padding: 0 !important;\\n}\\n\\n.brics-section .content-intro::after {\\n content: '' !important;\\n position: absolute !important;\\n bottom: -10px !important;\\n left: 50% !important;\\n transform: translateX(-50%) !important;\\n width: 60px !important;\\n height: 2px !important;\\n background: var(--bifa-heritage-gold) !important;\\n border-radius: 2px !important;\\n}\\n\\n.brics-section .content-text {\\n font-family: var(--bifa-font-body) !important;\\n font-size: clamp(1.05rem, 1.5vw, 1.2rem) !important;\\n line-height: 1.8 !important;\\n color: var(--bifa-gray) !important;\\n margin: 0 0 30px 0 !important;\\n text-align: justify !important;\\n position: relative !important;\\n padding: 0 0 0 20px !important;\\n}\\n\\n.brics-section .content-text::before {\\n content: '' !important;\\n position: absolute !important;\\n left: 0 !important;\\n top: 0 !important;\\n width: 4px !important;\\n height: 100% !important;\\n background: linear-gradient(180deg, var(--bifa-heritage-gold), transparent) !important;\\n border-radius: 2px !important;\\n}\\n\\n\\\/* ========= STATS CAROUSEL - OFFICIAL BIFA+ STYLE ========= *\\\/\\n.brics-section .stats-carousel-section {\\n margin: 50px 0 !important;\\n padding: 0 !important;\\n width: 100% !important;\\n}\\n\\n.brics-section .stats-carousel-title {\\n font-family: var(--bifa-font-heading) !important;\\n font-size: clamp(1.5rem, 2.5vw, 2rem) !important;\\n font-weight: 800 !important;\\n color: var(--bifa-deep-navy) !important;\\n text-align: center !important;\\n margin: 0 0 40px 0 !important;\\n position: relative !important;\\n text-transform: uppercase !important;\\n letter-spacing: 1px !important;\\n padding: 0 !important;\\n}\\n\\n.brics-section .stats-carousel-title::after {\\n content: '' !important;\\n position: absolute !important;\\n bottom: -8px !important;\\n left: 50% !important;\\n transform: translateX(-50%) !important;\\n width: 60px !important;\\n height: 2px !important;\\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700) !important;\\n border-radius: 2px !important;\\n}\\n\\n.brics-section .stats-carousel-container {\\n position: relative !important;\\n max-width: 1200px !important;\\n margin: 0 auto !important;\\n overflow: hidden !important;\\n padding: 0 !important;\\n}\\n\\n.brics-section .stats-carousel-wrapper {\\n position: relative !important;\\n padding: 0 70px !important;\\n overflow: hidden !important;\\n margin: 0 !important;\\n}\\n\\n.brics-section .stats-carousel {\\n display: flex !important;\\n transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;\\n gap: 25px !important;\\n will-change: transform !important;\\n margin: 0 !important;\\n padding: 0 !important;\\n}\\n\\n.brics-section .stats-item {\\n flex: 0 0 auto !important;\\n text-align: center !important;\\n padding: 30px 20px !important;\\n background: linear-gradient(135deg, \\n rgba(255, 255, 255, 0.95) 0%, \\n rgba(248, 249, 250, 0.95) 100%) !important;\\n backdrop-filter: blur(10px) !important;\\n border-radius: 25px !important;\\n transition: var(--bifa-transition) !important;\\n cursor: pointer !important;\\n box-shadow: var(--bifa-shadow-premium) !important;\\n min-width: 200px !important;\\n max-width: 220px !important;\\n transform: translateY(0) scale(1) !important;\\n opacity: 1 !important;\\n border: 2px solid rgba(212, 175, 55, 0.1) !important;\\n position: relative !important;\\n overflow: hidden !important;\\n margin: 0 !important;\\n}\\n\\n.brics-section .stats-item::before {\\n content: '' !important;\\n position: absolute !important;\\n top: 0 !important;\\n left: 0 !important;\\n right: 0 !important;\\n height: 3px !important;\\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent) !important;\\n transform: scaleX(0) !important;\\n transition: transform 0.3s ease !important;\\n}\\n\\n.brics-section .stats-item:hover::before {\\n transform: scaleX(1) !important;\\n}\\n\\n.brics-section .stats-item:hover {\\n transform: translateY(-10px) scale(1.05) !important;\\n box-shadow: var(--bifa-shadow-gold) !important;\\n border-color: var(--bifa-heritage-gold) !important;\\n z-index: 10 !important;\\n}\\n\\n.brics-section .stats-item-clone {\\n opacity: 0.7 !important;\\n}\\n\\n.brics-section .stats-icon {\\n font-size: 2.5rem !important;\\n margin: 0 0 15px 0 !important;\\n line-height: 1 !important;\\n filter: grayscale(0.3) !important;\\n transition: all 0.3s ease !important;\\n padding: 0 !important;\\n}\\n\\n.brics-section .stats-item:hover .stats-icon {\\n filter: grayscale(0) !important;\\n transform: scale(1.1) !important;\\n}\\n\\n.brics-section .stats-number {\\n font-family: var(--bifa-font-heading) !important;\\n font-size: clamp(2rem, 3vw, 2.8rem) !important;\\n font-weight: 900 !important;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700) !important;\\n -webkit-background-clip: text !important;\\n background-clip: text !important;\\n color: transparent !important;\\n margin: 0 0 10px 0 !important;\\n line-height: 1 !important;\\n padding: 0 !important;\\n}\\n\\n.brics-section .stats-label {\\n font-family: var(--bifa-font-heading) !important;\\n font-size: 0.95rem !important;\\n color: var(--bifa-deep-navy) !important;\\n font-weight: 700 !important;\\n text-transform: uppercase !important;\\n letter-spacing: 1px !important;\\n margin: 0 0 8px 0 !important;\\n padding: 0 !important;\\n line-height: 1.3 !important;\\n}\\n\\n.brics-section .stats-description {\\n font-family: var(--bifa-font-body) !important;\\n font-size: 0.85rem !important;\\n color: var(--bifa-gray) !important;\\n font-weight: 500 !important;\\n margin: 0 !important;\\n padding: 0 !important;\\n line-height: 1.4 !important;\\n font-style: italic !important;\\n}\\n\\n\\\/* ========= STATS CAROUSEL NAVIGATION - OFFICIAL BIFA+ STYLE ========= *\\\/\\n.brics-section .stats-carousel-button {\\n position: absolute !important;\\n top: 50% !important;\\n transform: translateY(-50%) !important;\\n background: rgba(255, 255, 255, 0.95) !important;\\n backdrop-filter: blur(10px) !important;\\n border: 2px solid rgba(212, 175, 55, 0.2) !important;\\n width: 50px !important;\\n height: 50px !important;\\n border-radius: 50% !important;\\n box-shadow: var(--bifa-shadow-premium) !important;\\n cursor: pointer !important;\\n display: flex !important;\\n align-items: center !important;\\n justify-content: center !important;\\n transition: var(--bifa-transition) !important;\\n z-index: 10 !important;\\n opacity: 0.9 !important;\\n margin: 0 !important;\\n padding: 0 !important;\\n}\\n\\n.brics-section .stats-carousel-button::before {\\n content: '' !important;\\n position: absolute !important;\\n inset: -2px !important;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700) !important;\\n border-radius: 50% !important;\\n opacity: 0 !important;\\n transition: opacity 0.3s ease !important;\\n z-index: -1 !important;\\n}\\n\\n.brics-section .stats-carousel-button:hover::before {\\n opacity: 1 !important;\\n}\\n\\n.brics-section .stats-carousel-button:hover {\\n color: var(--bifa-deep-navy) !important;\\n box-shadow: var(--bifa-shadow-gold) !important;\\n transform: translateY(-50%) scale(1.1) !important;\\n opacity: 1 !important;\\n border-color: transparent !important;\\n}\\n\\n.brics-section .stats-carousel-button-prev {\\n left: 0 !important;\\n}\\n\\n.brics-section .stats-carousel-button-next {\\n right: 0 !important;\\n}\\n\\n.brics-section .stats-carousel-button svg {\\n width: 20px !important;\\n height: 20px !important;\\n fill: var(--bifa-deep-navy) !important;\\n transition: transform 0.3s ease !important;\\n stroke-width: 3 !important;\\n}\\n\\n.brics-section .stats-carousel-button:hover svg {\\n transform: scale(1.2) !important;\\n}\\n\\n.brics-section .stats-carousel-button-prev:hover svg {\\n transform: translateX(-2px) scale(1.2) !important;\\n}\\n\\n.brics-section .stats-carousel-button-next:hover svg {\\n transform: translateX(2px) scale(1.2) !important;\\n}\\n\\n\\\/* ========= STATS CAROUSEL INDICATORS - OFFICIAL BIFA+ STYLE ========= *\\\/\\n.brics-section .stats-carousel-indicators {\\n display: flex !important;\\n justify-content: center !important;\\n gap: 10px !important;\\n margin: 35px 0 0 0 !important;\\n padding: 0 !important;\\n}\\n\\n.brics-section .stats-carousel-indicators .indicator {\\n width: 10px !important;\\n height: 10px !important;\\n border-radius: 50% !important;\\n background: rgba(212, 175, 55, 0.3) !important;\\n cursor: pointer !important;\\n transition: var(--bifa-transition) !important;\\n opacity: 0.6 !important;\\n border: 2px solid transparent !important;\\n margin: 0 !important;\\n padding: 0 !important;\\n}\\n\\n.brics-section .stats-carousel-indicators .indicator:hover {\\n opacity: 1 !important;\\n transform: scale(1.2) !important;\\n background: rgba(212, 175, 55, 0.6) !important;\\n}\\n\\n.brics-section .stats-carousel-indicators .indicator.active {\\n background: var(--bifa-heritage-gold) !important;\\n width: 35px !important;\\n border-radius: 5px !important;\\n opacity: 1 !important;\\n box-shadow: 0 3px 12px rgba(212, 175, 55, 0.4) !important;\\n}\\n\\n\\\/* ========= FLAGS SECTION - OFFICIAL BIFA+ STYLE ========= *\\\/\\n.brics-section .flags-section {\\n margin: 80px 0 0 0 !important;\\n position: relative !important;\\n padding: 0 0 40px 0 !important;\\n width: 100% !important;\\n}\\n\\n.brics-section .flags-title {\\n font-family: var(--bifa-font-heading) !important;\\n font-size: clamp(1.8rem, 3vw, 2.5rem) !important;\\n font-weight: 800 !important;\\n color: var(--bifa-deep-navy) !important;\\n text-align: center !important;\\n margin: 0 0 60px 0 !important;\\n animation: fadeInDown 1s ease-out !important;\\n position: relative !important;\\n text-transform: uppercase !important;\\n letter-spacing: 1px !important;\\n padding: 0 !important;\\n}\\n\\n.brics-section .flags-title::after {\\n content: '' !important;\\n position: absolute !important;\\n bottom: -10px !important;\\n left: 50% !important;\\n transform: translateX(-50%) !important;\\n width: 80px !important;\\n height: 3px !important;\\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700) !important;\\n border-radius: 2px !important;\\n}\\n\\n\\\/* ========= FLAGS CAROUSEL - OFFICIAL BIFA+ STYLE ========= *\\\/\\n.brics-section .flags-carousel-container {\\n animation: carouselFadeIn 1s ease-out 0.3s both !important;\\n position: relative !important;\\n max-width: 1200px !important;\\n margin: 0 auto !important;\\n overflow: hidden !important;\\n padding: 0 !important;\\n}\\n\\n@keyframes carouselFadeIn {\\n from {\\n opacity: 0 !important;\\n transform: translateY(30px) !important;\\n }\\n to {\\n opacity: 1 !important;\\n transform: translateY(0) !important;\\n }\\n}\\n\\n.brics-section .flags-carousel-wrapper {\\n position: relative !important;\\n padding: 0 70px !important;\\n overflow: hidden !important;\\n margin: 0 !important;\\n}\\n\\n.brics-section .flags-carousel {\\n display: flex !important;\\n transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;\\n gap: 30px !important;\\n will-change: transform !important;\\n margin: 0 !important;\\n padding: 0 !important;\\n}\\n\\n.brics-section .flag-item {\\n flex: 0 0 auto !important;\\n text-align: center !important;\\n padding: 30px !important;\\n background: rgba(255, 255, 255, 0.95) !important;\\n backdrop-filter: blur(10px) !important;\\n border-radius: 25px !important;\\n transition: var(--bifa-transition) !important;\\n cursor: pointer !important;\\n box-shadow: var(--bifa-shadow-premium) !important;\\n min-width: 180px !important;\\n transform: translateY(0) scale(1) !important;\\n opacity: 1 !important;\\n border: 2px solid rgba(212, 175, 55, 0.1) !important;\\n position: relative !important;\\n overflow: hidden !important;\\n margin: 0 !important;\\n}\\n\\n.brics-section .flag-item::before {\\n content: '' !important;\\n position: absolute !important;\\n top: 0 !important;\\n left: 0 !important;\\n right: 0 !important;\\n height: 2px !important;\\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent) !important;\\n transform: scaleX(0) !important;\\n transition: transform 0.3s ease !important;\\n}\\n\\n.brics-section .flag-item:hover::before {\\n transform: scaleX(1) !important;\\n}\\n\\n.brics-section .flag-item:hover {\\n transform: translateY(-15px) scale(1.05) !important;\\n box-shadow: var(--bifa-shadow-gold) !important;\\n border-color: var(--bifa-heritage-gold) !important;\\n z-index: 10 !important;\\n}\\n\\n.brics-section .flag-item-clone {\\n opacity: 0.7 !important;\\n}\\n\\n.brics-section .flag-image {\\n width: 100px !important;\\n height: 75px !important;\\n margin: 0 auto 20px auto !important;\\n border-radius: 15px !important;\\n overflow: hidden !important;\\n box-shadow: 0 8px 20px rgba(10, 31, 68, 0.15) !important;\\n transition: var(--bifa-transition) !important;\\n position: relative !important;\\n padding: 0 !important;\\n}\\n\\n.brics-section .flag-item:hover .flag-image {\\n box-shadow: var(--bifa-shadow-gold) !important;\\n transform: scale(1.05) translateY(-2px) !important;\\n}\\n\\n.brics-section .flag-image::after {\\n content: '' !important;\\n position: absolute !important;\\n inset: 0 !important;\\n background: linear-gradient(135deg, \\n rgba(212, 175, 55, 0.1) 0%, \\n transparent 50%, \\n rgba(10, 31, 68, 0.1) 100%) !important;\\n opacity: 0 !important;\\n transition: opacity 0.3s ease !important;\\n}\\n\\n.brics-section .flag-item:hover .flag-image::after {\\n opacity: 1 !important;\\n}\\n\\n.brics-section .flag-image img {\\n width: 100% !important;\\n height: 100% !important;\\n object-fit: cover !important;\\n transition: transform 0.3s ease !important;\\n margin: 0 !important;\\n padding: 0 !important;\\n}\\n\\n.brics-section .flag-item:hover .flag-image img {\\n transform: scale(1.1) !important;\\n}\\n\\n.brics-section .flag-name {\\n font-family: var(--bifa-font-heading) !important;\\n font-size: 1.1rem !important;\\n font-weight: 700 !important;\\n color: var(--bifa-deep-navy) !important;\\n text-transform: uppercase !important;\\n letter-spacing: 1px !important;\\n margin: 10px 0 0 0 !important;\\n transition: color 0.3s ease !important;\\n padding: 0 !important;\\n}\\n\\n.brics-section .flag-item:hover .flag-name {\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700) !important;\\n -webkit-background-clip: text !important;\\n background-clip: text !important;\\n color: transparent !important;\\n}\\n\\n\\\/* ========= CAROUSEL NAVIGATION - OFFICIAL BIFA+ STYLE ========= *\\\/\\n.brics-section .carousel-button {\\n position: absolute !important;\\n top: 50% !important;\\n transform: translateY(-50%) !important;\\n background: rgba(255, 255, 255, 0.95) !important;\\n backdrop-filter: blur(10px) !important;\\n border: 2px solid rgba(212, 175, 55, 0.2) !important;\\n width: 55px !important;\\n height: 55px !important;\\n border-radius: 50% !important;\\n box-shadow: var(--bifa-shadow-premium) !important;\\n cursor: pointer !important;\\n display: flex !important;\\n align-items: center !important;\\n justify-content: center !important;\\n transition: var(--bifa-transition) !important;\\n z-index: 10 !important;\\n opacity: 0.9 !important;\\n margin: 0 !important;\\n padding: 0 !important;\\n}\\n\\n.brics-section .carousel-button::before {\\n content: '' !important;\\n position: absolute !important;\\n inset: -2px !important;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700) !important;\\n border-radius: 50% !important;\\n opacity: 0 !important;\\n transition: opacity 0.3s ease !important;\\n z-index: -1 !important;\\n}\\n\\n.brics-section .carousel-button:hover::before {\\n opacity: 1 !important;\\n}\\n\\n.brics-section .carousel-button:hover {\\n color: var(--bifa-deep-navy) !important;\\n box-shadow: var(--bifa-shadow-gold) !important;\\n transform: translateY(-50%) scale(1.1) !important;\\n opacity: 1 !important;\\n border-color: transparent !important;\\n}\\n\\n.brics-section .carousel-button-prev {\\n left: 0 !important;\\n}\\n\\n.brics-section .carousel-button-next {\\n right: 0 !important;\\n}\\n\\n.brics-section .carousel-button svg {\\n width: 24px !important;\\n height: 24px !important;\\n fill: var(--bifa-deep-navy) !important;\\n transition: transform 0.3s ease !important;\\n stroke-width: 3 !important;\\n}\\n\\n.brics-section .carousel-button:hover svg {\\n transform: scale(1.2) !important;\\n}\\n\\n.brics-section .carousel-button-prev:hover svg {\\n transform: translateX(-2px) scale(1.2) !important;\\n}\\n\\n.brics-section .carousel-button-next:hover svg {\\n transform: translateX(2px) scale(1.2) !important;\\n}\\n\\n\\\/* ========= CAROUSEL INDICATORS - OFFICIAL BIFA+ STYLE ========= *\\\/\\n.brics-section .carousel-indicators {\\n display: flex !important;\\n justify-content: center !important;\\n gap: 12px !important;\\n margin: 40px 0 0 0 !important;\\n padding: 0 !important;\\n}\\n\\n.brics-section .indicator {\\n width: 12px !important;\\n height: 12px !important;\\n border-radius: 50% !important;\\n background: rgba(212, 175, 55, 0.3) !important;\\n cursor: pointer !important;\\n transition: var(--bifa-transition) !important;\\n opacity: 0.6 !important;\\n border: 2px solid transparent !important;\\n margin: 0 !important;\\n padding: 0 !important;\\n}\\n\\n.brics-section .indicator:hover {\\n opacity: 1 !important;\\n transform: scale(1.2) !important;\\n background: rgba(212, 175, 55, 0.6) !important;\\n}\\n\\n.brics-section .indicator.active {\\n background: var(--bifa-heritage-gold) !important;\\n width: 40px !important;\\n border-radius: 6px !important;\\n opacity: 1 !important;\\n box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4) !important;\\n}\\n\\n\\\/* ========= CALL TO ACTION - OFFICIAL BIFA+ STYLE ========= *\\\/\\n.brics-section .brics-cta {\\n background: linear-gradient(135deg, var(--bifa-deep-navy) 0%, #162e5a 100%) !important;\\n color: var(--bifa-bright-white) !important;\\n padding: 50px !important;\\n border-radius: 30px !important;\\n text-align: center !important;\\n margin: 60px auto 0 auto !important;\\n max-width: 1200px !important;\\n box-shadow: var(--bifa-shadow-premium) !important;\\n animation: fadeInUp 1s ease-out 0.4s both !important;\\n position: relative !important;\\n overflow: hidden !important;\\n border: 2px solid rgba(212, 175, 55, 0.2) !important;\\n width: 100% !important;\\n display: flex !important;\\n align-items: center !important;\\n justify-content: center !important;\\n}\\n\\n.brics-section .brics-cta::before {\\n content: '' !important;\\n position: absolute !important;\\n top: -50% !important;\\n left: -50% !important;\\n width: 200% !important;\\n height: 200% !important;\\n background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%) !important;\\n animation: ctaPulse 4s ease-in-out infinite !important;\\n}\\n\\n@keyframes ctaPulse {\\n 0%, 100% { \\n transform: scale(1) rotate(0deg) !important; \\n opacity: 0.5 !important;\\n }\\n 50% { \\n transform: scale(1.1) rotate(180deg) !important; \\n opacity: 0.8 !important;\\n }\\n}\\n\\n.brics-section .cta-text {\\n font-family: var(--bifa-font-heading) !important;\\n font-size: clamp(1.3rem, 2.5vw, 1.8rem) !important;\\n line-height: 1.7 !important;\\n font-weight: 700 !important;\\n position: relative !important;\\n z-index: 1 !important;\\n text-shadow: 2px 2px 4px rgba(0,0,0,0.3) !important;\\n margin: 0 !important;\\n padding: 0 !important;\\n color: var(--bifa-bright-white) !important;\\n text-align: center !important;\\n width: 100% !important;\\n max-width: 100% !important;\\n}\\n\\n\\\/* ========= LEARN MORE BUTTON - OFFICIAL BIFA+ STYLE ========= *\\\/\\n.brics-section .learn-more-wrapper {\\n text-align: center !important;\\n margin: 60px 0 0 0 !important;\\n animation: fadeInUp 1s ease-out 0.6s both !important;\\n padding: 0 !important;\\n}\\n\\n.brics-section .learn-more-btn {\\n display: inline-flex !important;\\n align-items: center !important;\\n gap: 15px !important;\\n padding: 20px 45px !important;\\n background: rgba(255, 255, 255, 0.95) !important;\\n backdrop-filter: blur(10px) !important;\\n color: var(--bifa-deep-navy) !important;\\n text-decoration: none !important;\\n font-family: var(--bifa-font-heading) !important;\\n font-size: 1.1rem !important;\\n font-weight: 700 !important;\\n border-radius: 50px !important;\\n box-shadow: var(--bifa-shadow-premium) !important;\\n transition: var(--bifa-transition) !important;\\n position: relative !important;\\n overflow: hidden !important;\\n border: 2px solid rgba(212, 175, 55, 0.2) !important;\\n text-transform: uppercase !important;\\n letter-spacing: 1px !important;\\n margin: 0 !important;\\n}\\n\\n.brics-section .learn-more-btn::before {\\n content: '' !important;\\n position: absolute !important;\\n top: 0 !important;\\n left: -100% !important;\\n width: 100% !important;\\n height: 100% !important;\\n background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.2), transparent) !important;\\n transition: left 0.5s ease !important;\\n}\\n\\n.brics-section .learn-more-btn:hover::before {\\n left: 100% !important;\\n}\\n\\n.brics-section .learn-more-btn::after {\\n content: '' !important;\\n position: absolute !important;\\n inset: -2px !important;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700) !important;\\n border-radius: 50px !important;\\n opacity: 0 !important;\\n transition: opacity 0.3s ease !important;\\n z-index: -1 !important;\\n}\\n\\n.brics-section .learn-more-btn:hover::after {\\n opacity: 0.2 !important;\\n}\\n\\n.brics-section .learn-more-btn:hover {\\n transform: translateY(-3px) !important;\\n box-shadow: var(--bifa-shadow-gold) !important;\\n border-color: var(--bifa-heritage-gold) !important;\\n color: var(--bifa-deep-navy) !important;\\n}\\n\\n.brics-section .btn-text {\\n position: relative !important;\\n z-index: 1 !important;\\n margin: 0 !important;\\n padding: 0 !important;\\n}\\n\\n.brics-section .btn-arrow {\\n transition: transform 0.3s ease !important;\\n stroke: currentColor !important;\\n position: relative !important;\\n z-index: 1 !important;\\n}\\n\\n.brics-section .learn-more-btn:hover .btn-arrow {\\n transform: translateX(5px) !important;\\n}\\n\\n\\\/* ========= ANIMATIONS - OFFICIAL BIFA+ STYLE ========= *\\\/\\n@keyframes fadeInDown {\\n from {\\n opacity: 0 !important;\\n transform: translateY(-50px) !important;\\n }\\n to {\\n opacity: 1 !important;\\n transform: translateY(0) !important;\\n }\\n}\\n\\n@keyframes fadeInUp {\\n from {\\n opacity: 0 !important;\\n transform: translateY(50px) !important;\\n }\\n to {\\n opacity: 1 !important;\\n transform: translateY(0) !important;\\n }\\n}\\n\\n\\\/* ========= RESPONSIVE DESIGN - YOOTHEME COMPATIBLE ========= *\\\/\\n\\n\\\/* Desktop and large screens - ensure centering *\\\/\\n@media (min-width: 1200px) {\\n .brics-section .brics-cta {\\n text-align: center !important;\\n display: flex !important;\\n align-items: center !important;\\n justify-content: center !important;\\n }\\n \\n .brics-section .cta-text {\\n text-align: center !important;\\n width: 100% !important;\\n max-width: 100% !important;\\n }\\n}\\n\\n\\\/* Laptop and medium screens - ensure centering *\\\/\\n@media (min-width: 969px) and (max-width: 1199px) {\\n .brics-section .brics-cta {\\n text-align: center !important;\\n display: flex !important;\\n align-items: center !important;\\n justify-content: center !important;\\n }\\n \\n .brics-section .cta-text {\\n text-align: center !important;\\n width: 100% !important;\\n max-width: 100% !important;\\n }\\n}\\n\\n@media (max-width: 968px) {\\n .brics-section {\\n padding: 60px 0 !important;\\n }\\n \\n .brics-section .brics-content {\\n padding: 40px !important;\\n }\\n \\n .brics-section .stats-grid {\\n grid-template-columns: 1fr !important;\\n gap: 25px !important;\\n }\\n \\n .brics-section .flags-carousel-wrapper {\\n padding: 0 50px !important;\\n }\\n \\n .brics-section .flag-item {\\n min-width: 160px !important;\\n padding: 25px !important;\\n }\\n \\n .brics-section .flag-image {\\n width: 90px !important;\\n height: 67px !important;\\n }\\n \\n .brics-section .carousel-button {\\n width: 50px !important;\\n height: 50px !important;\\n }\\n}\\n\\n@media (max-width: 568px) {\\n .brics-section {\\n padding: 50px 0 !important;\\n }\\n \\n .brics-section .section-title {\\n font-size: 2rem !important;\\n margin-bottom: 40px !important;\\n }\\n \\n .brics-section .brics-content {\\n padding: 30px 20px !important;\\n margin-bottom: 40px !important;\\n }\\n \\n .brics-section .content-intro {\\n font-size: 1.2rem !important;\\n margin-bottom: 30px !important;\\n }\\n \\n .brics-section .content-text {\\n font-size: 1rem !important;\\n text-align: left !important;\\n padding-left: 15px !important;\\n }\\n \\n .brics-section .stat-number {\\n font-size: 2.5rem !important;\\n }\\n \\n .brics-section .stat-label {\\n font-size: 1rem !important;\\n }\\n \\n .brics-section .flags-carousel-wrapper {\\n padding: 0 40px !important;\\n }\\n \\n .brics-section .flags-carousel {\\n gap: 20px !important;\\n }\\n \\n .brics-section .flag-item {\\n min-width: 140px !important;\\n padding: 20px !important;\\n }\\n \\n .brics-section .flag-image {\\n width: 70px !important;\\n height: 52px !important;\\n }\\n \\n .brics-section .flag-name {\\n font-size: 0.9rem !important;\\n }\\n \\n .brics-section .carousel-button {\\n width: 45px !important;\\n height: 45px !important;\\n }\\n \\n .brics-section .brics-cta {\\n padding: 35px 20px !important;\\n margin-top: 40px !important;\\n text-align: center !important;\\n display: flex !important;\\n align-items: center !important;\\n justify-content: center !important;\\n }\\n \\n .brics-section .cta-text {\\n font-size: 1.2rem !important;\\n text-align: center !important;\\n width: 100% !important;\\n }\\n \\n .brics-section .learn-more-btn {\\n padding: 15px 30px !important;\\n font-size: 1rem !important;\\n gap: 10px !important;\\n }\\n \\n .brics-section .flags-title {\\n font-size: 1.8rem !important;\\n margin-bottom: 40px !important;\\n }\\n}\\n\\n@media (max-width: 420px) {\\n .brics-container {\\n padding: 0 15px !important;\\n }\\n \\n .brics-section .section-title {\\n font-size: 1.8rem !important;\\n }\\n \\n .brics-section .brics-content {\\n padding: 25px 15px !important;\\n }\\n \\n .brics-section .flags-carousel-wrapper {\\n padding: 0 35px !important;\\n }\\n \\n .brics-section .flag-item {\\n min-width: 120px !important;\\n padding: 15px !important;\\n }\\n \\n .brics-section .flag-image {\\n width: 60px !important;\\n height: 45px !important;\\n }\\n \\n .brics-section .carousel-button {\\n width: 40px !important;\\n height: 40px !important;\\n }\\n \\n .brics-section .carousel-button svg {\\n width: 20px !important;\\n height: 20px !important;\\n }\\n}\\n<\\\/style>\\n<\\\/head>\\n<body>\\n\\n<\/p>\n<div class=\"\\\"brics-section-wrapper\\\"\">\\n \\n <\/p>\n<section class=\"\\\"brics-section\\\"\">\\n <\/p>\n<div class=\"\\\"brics-container\\\"\">\\n <\/p>\n<h2 class=\"\\\"section-title\\\"\">BRICS: A New Era of World Football<\\\/h2>\\n \\n \\n <\/p>\n<div class=\"\\\"brics-image\\\"\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Brics\\\/brics-alliance.jpg\\\"\" alt=\"\\\"BRICS\" alliance\\\">\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"brics-content\\\"\">\\n <\/p>\n<p class=\"\\\"content-intro\\\"\">\\n The union of economic giants creates a unique platform for football development\\n <\\\/p>\\n \\n <\/p>\n<p class=\"\\\"content-text\\\"\">\\n Founded in Dubai by visionary leader Salim Humaid Almazaini, BIFA+ represents an alliance of countries with rich football traditions and enormous potential. The UAE serves as the strategic headquarters, bringing together nations across continents. Brazil contributes the birthplace of legendary football, Russia the experience of hosting the 2018 World Cup, while China and India offer the largest markets with billions of passionate fans. South Africa leads African football development, with newest members adding tremendous strength: Egypt and Ethiopia from Africa, Iran from the Middle East, and Indonesia as the first Southeast Asian member.\\n <\\\/p>\\n \\n <\/p>\n<p class=\"\\\"content-text\\\"\">\\n Together, these countries form a powerful football ecosystem capable of competing with traditional \\n European leagues. The total population of BRICS countries exceeds 3.8 billion people, \\n creating an unprecedented base for talent development and fan engagement.\\n <\\\/p>\\n \\n \\n <\/p>\n<div class=\"\\\"stats-carousel-section\\\"\">\\n <\/p>\n<h4 class=\"\\\"stats-carousel-title\\\"\">BIFA+ by the Numbers<\\\/h4>\\n <\/p>\n<div class=\"\\\"stats-carousel-container\\\"\">\\n <\/p>\n<div class=\"\\\"stats-carousel-wrapper\\\"\">\\n <button class=\"\\\"stats-carousel-button\" stats-carousel-button-prev\\\" aria-label=\"\\\"Previous\" stats\\\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" xmlns=\"\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\"\">\\n <path d=\"\\\"M15\" 18l-6-6 6-6\\\" stroke=\"\\\"currentColor\\\"\" stroke-width=\"\\\"2\\\"\" stroke-linecap=\"\\\"round\\\"\" stroke-linejoin=\"\\\"round\\\"\" fill=\"\\\"none\\\"\\\/\">\\n <\\\/svg>\\n <\\\/button>\\n \\n <\/p>\n<div class=\"\\\"stats-carousel\\\"\" id=\"\\\"statsCarousel\\\"\">\\n <\/p>\n<div class=\"\\\"stats-item\\\"\">\\n <\/p>\n<div class=\"\\\"stats-icon\\\"\">\\ud83c\\udf0d<\\\/div>\\n <\/p>\n<div class=\"\\\"stats-number\\\"\">11+<\\\/div>\\n <\/p>\n<div class=\"\\\"stats-label\\\"\">Global South Nations<\\\/div>\\n <\/p>\n<div class=\"\\\"stats-description\\\"\">United in football diplomacy<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"stats-item\\\"\">\\n <\/p>\n<div class=\"\\\"stats-icon\\\"\">\\ud83d\\udc65<\\\/div>\\n <\/p>\n<div class=\"\\\"stats-number\\\"\">3.8B<\\\/div>\\n <\/p>\n<div class=\"\\\"stats-label\\\"\">Population United<\\\/div>\\n <\/p>\n<div class=\"\\\"stats-description\\\"\">Unprecedented fan base<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"stats-item\\\"\">\\n <\/p>\n<div class=\"\\\"stats-icon\\\"\">\\ud83c\\udfc6<\\\/div>\\n <\/p>\n<div class=\"\\\"stats-number\\\"\">2024<\\\/div>\\n <\/p>\n<div class=\"\\\"stats-label\\\"\">Year Founded<\\\/div>\\n <\/p>\n<div class=\"\\\"stats-description\\\"\">Beginning of new era<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"stats-item\\\"\">\\n <\/p>\n<div class=\"\\\"stats-icon\\\"\">\\ud83c\\udf0f<\\\/div>\\n <\/p>\n<div class=\"\\\"stats-number\\\"\">4<\\\/div>\\n <\/p>\n<div class=\"\\\"stats-label\\\"\">Continents United<\\\/div>\\n <\/p>\n<div class=\"\\\"stats-description\\\"\">Global football presence<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"stats-item\\\"\">\\n <\/p>\n<div class=\"\\\"stats-icon\\\"\">\\ud83d\\udcac<\\\/div>\\n <\/p>\n<div class=\"\\\"stats-number\\\"\">700+<\\\/div>\\n <\/p>\n<div class=\"\\\"stats-label\\\"\">Languages Spoken<\\\/div>\\n <\/p>\n<div class=\"\\\"stats-description\\\"\">Cultural diversity<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"stats-item\\\"\">\\n <\/p>\n<div class=\"\\\"stats-icon\\\"\">\\ud83d\\udd50<\\\/div>\\n <\/p>\n<div class=\"\\\"stats-number\\\"\">18<\\\/div>\\n <\/p>\n<div class=\"\\\"stats-label\\\"\">Time Zones<\\\/div>\\n <\/p>\n<div class=\"\\\"stats-description\\\"\">Round-the-clock football<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"stats-item\\\"\">\\n <\/p>\n<div class=\"\\\"stats-icon\\\"\">\\u26bd<\\\/div>\\n <\/p>\n<div class=\"\\\"stats-number\\\"\">\\u221e<\\\/div>\\n <\/p>\n<div class=\"\\\"stats-label\\\"\">Future Potential<\\\/div>\\n <\/p>\n<div class=\"\\\"stats-description\\\"\">Limitless possibilities<\\\/div>\\n <\\\/div>\\n <\\\/div>\\n \\n <button class=\"\\\"stats-carousel-button\" stats-carousel-button-next\\\" aria-label=\"\\\"Next\" stats\\\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" xmlns=\"\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\"\">\\n <path d=\"\\\"M9\" 18l6-6-6-6\\\" stroke=\"\\\"currentColor\\\"\" stroke-width=\"\\\"2\\\"\" stroke-linecap=\"\\\"round\\\"\" stroke-linejoin=\"\\\"round\\\"\" fill=\"\\\"none\\\"\\\/\">\\n <\\\/svg>\\n <\\\/button>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"stats-carousel-indicators\\\"\" id=\"\\\"statsCarouselIndicators\\\"\"><\\\/div>\\n <\\\/div>\\n <\\\/div>\\n \\n <\/p>\n<p class=\"\\\"content-text\\\"\">\\n BIFA will become the first truly global football league, uniting continents and cultures. \\n Using the economic power and sporting ambitions of BRICS countries, we are creating a platform \\n where the world's best players can showcase their skills to billions of viewers.\\n <\\\/p>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"flags-section\\\"\">\\n <\/p>\n<h3 class=\"\\\"flags-title\\\"\">BIFA Member Countries<\\\/h3>\\n <\/p>\n<div class=\"\\\"flags-carousel-container\\\"\">\\n <\/p>\n<div class=\"\\\"flags-carousel-wrapper\\\"\">\\n <button class=\"\\\"carousel-button\" carousel-button-prev\\\" aria-label=\"\\\"Previous\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" xmlns=\"\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\"\">\\n <path d=\"\\\"M15\" 18l-6-6 6-6\\\" stroke=\"\\\"currentColor\\\"\" stroke-width=\"\\\"2\\\"\" stroke-linecap=\"\\\"round\\\"\" stroke-linejoin=\"\\\"round\\\"\" fill=\"\\\"none\\\"\\\/\">\\n <\\\/svg>\\n <\\\/button>\\n \\n <\/p>\n<div class=\"\\\"flags-carousel\\\"\" id=\"\\\"flagsCarousel\\\"\">\\n <\/p>\n<div class=\"\\\"flag-item\\\"\">\\n <\/p>\n<div class=\"\\\"flag-image\\\"\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Flags\\\/br.svg\\\"\" alt=\"\\\"Brazil\\\"\">\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"flag-name\\\"\">Brazil<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"flag-item\\\"\">\\n <\/p>\n<div class=\"\\\"flag-image\\\"\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Flags\\\/ru.svg\\\"\" alt=\"\\\"Russia\\\"\">\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"flag-name\\\"\">Russia<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"flag-item\\\"\">\\n <\/p>\n<div class=\"\\\"flag-image\\\"\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Flags\\\/in.svg\\\"\" alt=\"\\\"India\\\"\">\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"flag-name\\\"\">India<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"flag-item\\\"\">\\n <\/p>\n<div class=\"\\\"flag-image\\\"\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Flags\\\/cn.svg\\\"\" alt=\"\\\"China\\\"\">\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"flag-name\\\"\">China<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"flag-item\\\"\">\\n <\/p>\n<div class=\"\\\"flag-image\\\"\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Flags\\\/za.svg\\\"\" alt=\"\\\"South\" africa\\\">\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"flag-name\\\"\">South Africa<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"flag-item\\\"\">\\n <\/p>\n<div class=\"\\\"flag-image\\\"\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Flags\\\/ae.svg\\\"\" alt=\"\\\"UAE\\\"\">\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"flag-name\\\"\">UAE<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"flag-item\\\"\">\\n <\/p>\n<div class=\"\\\"flag-image\\\"\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Flags\\\/ir.svg\\\"\" alt=\"\\\"Iran\\\"\">\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"flag-name\\\"\">Iran<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"flag-item\\\"\">\\n <\/p>\n<div class=\"\\\"flag-image\\\"\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Flags\\\/et.svg\\\"\" alt=\"\\\"Ethiopia\\\"\">\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"flag-name\\\"\">Ethiopia<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"flag-item\\\"\">\\n <\/p>\n<div class=\"\\\"flag-image\\\"\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Flags\\\/eg.svg\\\"\" alt=\"\\\"Egypt\\\"\">\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"flag-name\\\"\">Egypt<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"flag-item\\\"\">\\n <\/p>\n<div class=\"\\\"flag-image\\\"\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Flags\\\/id.svg\\\"\" alt=\"\\\"Indonesia\\\"\">\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"flag-name\\\"\">Indonesia<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"flag-item\\\"\">\\n <\/p>\n<div class=\"\\\"flag-image\\\"\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Flags\\\/sa.svg\\\"\" alt=\"\\\"Saudi\" arabia\\\">\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"flag-name\\\"\">Saudi Arabia<\\\/div>\\n <\\\/div>\\n <\\\/div>\\n \\n <button class=\"\\\"carousel-button\" carousel-button-next\\\" aria-label=\"\\\"Next\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" xmlns=\"\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\"\">\\n <path d=\"\\\"M9\" 18l6-6-6-6\\\" stroke=\"\\\"currentColor\\\"\" stroke-width=\"\\\"2\\\"\" stroke-linecap=\"\\\"round\\\"\" stroke-linejoin=\"\\\"round\\\"\" fill=\"\\\"none\\\"\\\/\">\\n <\\\/svg>\\n <\\\/button>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"carousel-indicators\\\"\" id=\"\\\"carouselIndicators\\\"\"><\\\/div>\\n <\\\/div>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"brics-cta\\\"\">\\n <\/p>\n<p class=\"\\\"cta-text\\\"\">\\n Together we build a future where football unites continents and creates new opportunities for billions of people\\n <\\\/p>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"learn-more-wrapper\\\"\">\\n <a href=\"\\\"https:\\\/\\\/bifa.ai\\\/country-members\\\/\\\"\" class=\"\\\"learn-more-btn\\\"\">\\n <span class=\"\\\"btn-text\\\"\">Learn more about member countries<\\\/span>\\n <svg class=\"\\\"btn-arrow\\\"\" width=\"\\\"24\\\"\" height=\"\\\"24\\\"\" viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\" xmlns=\"\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\"\">\\n <path d=\"\\\"M5\" 12h19m19 12l12 5m19 19\\\" stroke =\"\\\"currentColor\\\"\" stroke-width=\"\\\"2\\\"\" stroke-linecap=\"\\\"round\\\"\" stroke-linejoin=\"\\\"round\\\"\\\/\">\\n <\\\/svg>\\n <\\\/a>\\n <\\\/div>\\n <\\\/div>\\n <\\\/section>\\n<\\\/div>\\n\\n<script>\\n\\\/\\\/ BIFA+ BRICS Carousel System - Optimized Version\\ndocument.addEventListener('DOMContentLoaded', function() {\\n \\\/\\\/ Universal Carousel Class\\n class BIFACarousel {\\n constructor(config) {\\n this.carousel = config.carousel;\\n this.prevButton = config.prevButton;\\n this.nextButton = config.nextButton;\\n this.indicatorsContainer = config.indicatorsContainer;\\n this.items = config.items;\\n this.itemClass = config.itemClass;\\n this.cloneClass = config.cloneClass;\\n this.gap = config.gap || 30;\\n this.autoPlayDelay = config.autoPlayDelay || 4000;\\n this.itemsPerView = config.itemsPerView || 5;\\n this.calculateItemsPerView = config.calculateItemsPerView;\\n \\n this.currentIndex = 0;\\n this.autoPlayInterval = null;\\n this.isTransitioning = false;\\n this.totalItems = this.items.length;\\n \\n this.init();\\n }\\n \\n init() {\\n if (!this.carousel || this.totalItems === 0) return;\\n \\n this.calculateItemsPerView();\\n this.createIndicators();\\n this.setupInfiniteScroll();\\n this.setupEventListeners();\\n \\n \\\/\\\/ Start autoplay after delay\\n setTimeout(() => this.startAutoPlay(), 1000);\\n }\\n \\n setupInfiniteScroll() {\\n \\\/\\\/ Remove existing clones\\n this.carousel.querySelectorAll(`.${this.cloneClass}`).forEach(clone => clone.remove());\\n \\n \\\/\\\/ Create clones for infinite scroll\\n for (let i = 0; i < this.itemsPerView; i++) {\\n const firstClone = this.items[i].cloneNode(true);\\n const lastClone = this.items[this.totalItems - this.itemsPerView + i].cloneNode(true);\\n \\n firstClone.classList.add(this.cloneClass);\\n lastClone.classList.add(this.cloneClass);\\n \\n this.carousel.appendChild(firstClone);\\n this.carousel.insertBefore(lastClone, this.items[0]);\\n }\\n \\n this.currentIndex = this.itemsPerView;\\n this.carousel.style.transition = 'none';\\n this.updateCarouselPosition();\\n \\n this.carousel.offsetHeight; \\\/\\\/ Force reflow\\n this.carousel.style.transition = 'transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94)';\\n }\\n \\n createIndicators() {\\n if (!this.indicatorsContainer) return;\\n \\n this.indicatorsContainer.innerHTML = '';\\n const totalPages = Math.ceil(this.totalItems \\\/ this.itemsPerView);\\n \\n for (let i = 0; i < totalPages; i++) {\\n const indicator = document.createElement('div');\\n indicator.className = 'indicator';\\n if (i === 0) indicator.classList.add('active');\\n indicator.addEventListener('click', () => this.goToPage(i));\\n this.indicatorsContainer.appendChild(indicator);\\n }\\n }\\n \\n updateCarouselPosition() {\\n const allItems = this.carousel.querySelectorAll(`.${this.itemClass}, .${this.cloneClass}`);\\n if (allItems.length === 0) return;\\n \\n const itemWidth = allItems[0].offsetWidth;\\n const offset = this.currentIndex * (itemWidth + this.gap);\\n this.carousel.style.transform = `translateX(-${offset}px)`;\\n }\\n \\n updateCarousel() {\\n if (this.isTransitioning) return;\\n this.isTransitioning = true;\\n \\n this.updateCarouselPosition();\\n this.updateIndicators();\\n \\n this.carousel.addEventListener('transitionend', this.handleTransitionEnd.bind(this), { once: true });\\n }\\n \\n handleTransitionEnd() {\\n const totalItemsWithClones = this.carousel.querySelectorAll(`.${this.itemClass}, .${this.cloneClass}`).length;\\n \\n if (this.currentIndex >= totalItemsWithClones - this.itemsPerView) {\\n this.carousel.style.transition = 'none';\\n this.currentIndex = this.itemsPerView;\\n this.updateCarouselPosition();\\n this.carousel.offsetHeight;\\n this.carousel.style.transition = 'transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94)';\\n } else if (this.currentIndex < this.itemsPerView) {\\n this.carousel.style.transition = 'none';\\n this.currentIndex = totalItemsWithClones - this.itemsPerView * 2;\\n this.updateCarouselPosition();\\n this.carousel.offsetHeight;\\n this.carousel.style.transition = 'transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94)';\\n }\\n \\n this.isTransitioning = false;\\n }\\n \\n updateIndicators() {\\n if (!this.indicatorsContainer) return;\\n \\n const indicators = this.indicatorsContainer.querySelectorAll('.indicator');\\n const realIndex = (this.currentIndex - this.itemsPerView) % this.totalItems;\\n const currentPage = Math.floor(realIndex \\\/ this.itemsPerView);\\n \\n indicators.forEach((indicator, index) => {\\n indicator.classList.toggle('active', index === currentPage);\\n });\\n }\\n \\n goToPage(pageIndex) {\\n if (this.isTransitioning) return;\\n \\n const targetIndex = (pageIndex * this.itemsPerView) + this.itemsPerView;\\n this.currentIndex = targetIndex;\\n this.updateCarousel();\\n this.resetAutoPlay();\\n }\\n \\n nextSlide() {\\n if (this.isTransitioning) return;\\n this.currentIndex += 1;\\n this.updateCarousel();\\n }\\n \\n prevSlide() {\\n if (this.isTransitioning) return;\\n this.currentIndex -= 1;\\n this.updateCarousel();\\n }\\n \\n startAutoPlay() {\\n this.autoPlayInterval = setInterval(() => this.nextSlide(), this.autoPlayDelay);\\n }\\n \\n stopAutoPlay() {\\n clearInterval(this.autoPlayInterval);\\n }\\n \\n resetAutoPlay() {\\n this.stopAutoPlay();\\n this.startAutoPlay();\\n }\\n \\n setupEventListeners() {\\n \\\/\\\/ Navigation buttons\\n if (this.prevButton) {\\n this.prevButton.addEventListener('click', () => {\\n this.prevSlide();\\n this.resetAutoPlay();\\n });\\n }\\n \\n if (this.nextButton) {\\n this.nextButton.addEventListener('click', () => {\\n this.nextSlide();\\n this.resetAutoPlay();\\n });\\n }\\n \\n \\\/\\\/ Pause on hover\\n const container = this.carousel.closest('.flags-carousel-container, .stats-carousel-container');\\n if (container) {\\n container.addEventListener('mouseenter', () => this.stopAutoPlay());\\n container.addEventListener('mouseleave', () => this.startAutoPlay());\\n }\\n \\n \\\/\\\/ Touch support\\n let touchStartX = 0;\\n let touchEndX = 0;\\n \\n this.carousel.addEventListener('touchstart', (e) => {\\n touchStartX = e.changedTouches[0].screenX;\\n this.stopAutoPlay();\\n });\\n \\n this.carousel.addEventListener('touchend', (e) => {\\n touchEndX = e.changedTouches[0].screenX;\\n this.handleSwipe(touchStartX, touchEndX);\\n this.startAutoPlay();\\n });\\n \\n \\\/\\\/ Responsive handling\\n window.addEventListener('resize', () => {\\n const oldItemsPerView = this.itemsPerView;\\n this.calculateItemsPerView();\\n \\n if (oldItemsPerView !== this.itemsPerView) {\\n this.setupInfiniteScroll();\\n this.createIndicators();\\n this.updateCarouselPosition();\\n }\\n });\\n }\\n \\n handleSwipe(startX, endX) {\\n const swipeDistance = endX - startX;\\n const minSwipeDistance = 50;\\n \\n if (Math.abs(swipeDistance) > minSwipeDistance) {\\n if (swipeDistance < 0) {\\n this.nextSlide();\\n } else {\\n this.prevSlide();\\n }\\n }\\n }\\n }\\n \\n \\\/\\\/ Initialize Flags Carousel\\n const flagsCarousel = new BIFACarousel({\\n carousel: document.getElementById('flagsCarousel'),\\n prevButton: document.querySelector('.carousel-button-prev'),\\n nextButton: document.querySelector('.carousel-button-next'),\\n indicatorsContainer: document.getElementById('carouselIndicators'),\\n items: document.querySelectorAll('#flagsCarousel .flag-item'),\\n itemClass: 'flag-item',\\n cloneClass: 'flag-item-clone',\\n gap: 30,\\n autoPlayDelay: 4000,\\n calculateItemsPerView: function() {\\n const width = window.innerWidth;\\n if (width < 420) {\\n this.itemsPerView = 2;\\n } else if (width < 568) {\\n this.itemsPerView = 2;\\n } else if (width < 768) {\\n this.itemsPerView = 3;\\n } else if (width < 1024) {\\n this.itemsPerView = 4;\\n } else {\\n this.itemsPerView = 5;\\n }\\n }\\n });\\n \\n \\\/\\\/ Initialize Stats Carousel\\n const statsCarousel = new BIFACarousel({\\n carousel: document.getElementById('statsCarousel'),\\n prevButton: document.querySelector('.stats-carousel-button-prev'),\\n nextButton: document.querySelector('.stats-carousel-button-next'),\\n indicatorsContainer: document.getElementById('statsCarouselIndicators'),\\n items: document.querySelectorAll('#statsCarousel .stats-item'),\\n itemClass: 'stats-item',\\n cloneClass: 'stats-item-clone',\\n gap: 25,\\n autoPlayDelay: 3500,\\n calculateItemsPerView: function() {\\n const width = window.innerWidth;\\n if (width < 420) {\\n this.itemsPerView = 1;\\n } else if (width < 768) {\\n this.itemsPerView = 2;\\n } else if (width < 1024) {\\n this.itemsPerView = 3;\\n } else {\\n this.itemsPerView = 4;\\n }\\n }\\n });\\n \\n \\\/\\\/ Animate counters when visible\\n const animateCounters = () => {\\n const counters = document.querySelectorAll('.stats-number');\\n \\n const observerOptions = {\\n threshold: 0.3,\\n rootMargin: '0px'\\n };\\n \\n const animateValue = (element, start, end, duration, suffix = '') => {\\n let startTimestamp = null;\\n const step = (timestamp) => {\\n if (!startTimestamp) startTimestamp = timestamp;\\n const progress = Math.min((timestamp - startTimestamp) \\\/ duration, 1);\\n \\n const easeOutQuart = 1 - Math.pow(1 - progress, 4);\\n \\n if (end === '\\u221e') {\\n element.textContent = '\\u221e';\\n return;\\n } else if (end.includes('.')) {\\n const current = (start + easeOutQuart * (parseFloat(end) - start)).toFixed(1);\\n element.textContent = current + suffix;\\n } else if (end.includes('+')) {\\n const numEnd = parseInt(end.replace('+', ''));\\n element.textContent = Math.floor(easeOutQuart * (numEnd - start) + start) + '+';\\n } else {\\n element.textContent = Math.floor(easeOutQuart * (end - start) + start) + suffix;\\n }\\n \\n if (progress < 1) {\\n window.requestAnimationFrame(step);\\n } else {\\n element.textContent = end + suffix;\\n }\\n };\\n window.requestAnimationFrame(step);\\n };\\n \\n const observer = new IntersectionObserver((entries) => {\\n entries.forEach(entry => {\\n if (entry.isIntersecting && !entry.target.animated) {\\n entry.target.animated = true;\\n const finalText = entry.target.textContent;\\n \\n \\\/\\\/ Stats carousel numbers\\n if (finalText.includes('11+')) {\\n animateValue(entry.target, 0, '11+', 1800);\\n } else if (finalText.includes('3.8B')) {\\n animateValue(entry.target, 0, '3.8', 2000, 'B');\\n } else if (finalText.includes('2024')) {\\n animateValue(entry.target, 2020, 2024, 2200);\\n } else if (finalText.includes('4') && !finalText.includes('700')) {\\n animateValue(entry.target, 0, 4, 1500);\\n } else if (finalText.includes('700+')) {\\n animateValue(entry.target, 0, '700+', 2500);\\n } else if (finalText.includes('18')) {\\n animateValue(entry.target, 0, 18, 2000);\\n } else if (finalText.includes('\\u221e')) {\\n animateValue(entry.target, 0, '\\u221e', 1000);\\n }\\n }\\n });\\n }, observerOptions);\\n \\n counters.forEach(counter => {\\n observer.observe(counter);\\n });\\n };\\n \\n \\\/\\\/ Start animations\\n setTimeout(animateCounters, 500);\\n \\n \\\/\\\/ Smooth scroll for Learn More button\\n const learnMoreBtn = document.querySelector('.learn-more-btn');\\n if (learnMoreBtn) {\\n learnMoreBtn.addEventListener('click', function(e) {\\n if (this.getAttribute('href').startsWith('#')) {\\n e.preventDefault();\\n const targetId = this.getAttribute('href').substring(1);\\n const targetElement = document.getElementById(targetId);\\n \\n if (targetElement) {\\n targetElement.scrollIntoView({\\n behavior: 'smooth',\\n block: 'start'\\n });\\n } else {\\n const flagsSection = document.querySelector('.flags-section');\\n if (flagsSection) {\\n flagsSection.scrollIntoView({\\n behavior: 'smooth',\\n block: 'start'\\n });\\n }\\n }\\n }\\n });\\n }\\n});\\n<\\\/script>\\n\\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\\n \\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@400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700&display=swap\\\"\" rel=\"\\\"stylesheet\\\"\">\\n\\n<\/p>\n<style>\\n\\\/* ===== PRESIDENT BLOCK FOR YOOTHEME - OFFICIAL BIFA+ BRAND ===== *\\\/\\n\\n\\\/* CSS Variables - Official BIFA+ Colors *\\\/\\n:root {\\n --deep-navy: #0A1F44;\\n --heritage-gold: #D4AF37;\\n --civic-green: #1D6143;\\n --bright-white: #FFFFFF;\\n --soft-black: #1A1A1A;\\n --text-secondary: #64748b;\\n --shadow-sm: 0 2px 10px rgba(10, 31, 68, 0.08);\\n --shadow-md: 0 10px 40px rgba(10, 31, 68, 0.12);\\n --radius: 12px;\\n}\\n\\n.bifa-president-block {\\n position: relative;\\n width: 100vw;\\n margin-left: calc(-50vw + 50%);\\n padding: 40px 0; \\\/* \\u0423\\u043c\\u0435\\u043d\\u044c\\u0448\\u0430\\u0435\\u043c \\u043e\\u0442\\u0441\\u0442\\u0443\\u043f\\u044b \\u0434\\u043b\\u044f \\u0434\\u0435\\u0441\\u043a\\u0442\\u043e\\u043f\\u0430 *\\\/\\n background: transparent;\\n overflow: hidden;\\n}\\n\\n\\\/* \\u0412\\u043e\\u0441\\u0441\\u0442\\u0430\\u043d\\u0430\\u0432\\u043b\\u0438\\u0432\\u0430\\u0435\\u043c \\u0444\\u043e\\u043d \\u0434\\u043b\\u044f \\u043f\\u043b\\u0430\\u043d\\u0448\\u0435\\u0442\\u043e\\u0432 \\u0438 \\u043c\\u043e\\u0431\\u0438\\u043b\\u044c\\u043d\\u044b\\u0445 *\\\/\\n@media (max-width: 1024px) {\\n .bifa-president-block {\\n background: linear-gradient(135deg, #f8f9fa 0%, #f0f2f5 100%);\\n padding: 60px 0; \\\/* \\u0412\\u043e\\u0441\\u0441\\u0442\\u0430\\u043d\\u0430\\u0432\\u043b\\u0438\\u0432\\u0430\\u0435\\u043c \\u043e\\u0442\\u0441\\u0442\\u0443\\u043f\\u044b *\\\/\\n }\\n}\\n\\n.bifa-president-block::before {\\n content: '';\\n position: absolute;\\n inset: 0;\\n background: none;\\n z-index: 0;\\n}\\n\\n\\\/* \\u0412\\u043e\\u0441\\u0441\\u0442\\u0430\\u043d\\u0430\\u0432\\u043b\\u0438\\u0432\\u0430\\u0435\\u043c \\u0433\\u0440\\u0430\\u0434\\u0438\\u0435\\u043d\\u0442 \\u0434\\u043b\\u044f \\u043f\\u043b\\u0430\\u043d\\u0448\\u0435\\u0442\\u043e\\u0432 \\u0438 \\u043c\\u043e\\u0431\\u0438\\u043b\\u044c\\u043d\\u044b\\u0445 *\\\/\\n@media (max-width: 1024px) {\\n .bifa-president-block::before {\\n background: radial-gradient(circle at 30% 50%, rgba(10, 31, 68, 0.02), transparent 50%),\\n radial-gradient(circle at 70% 80%, rgba(212, 175, 55, 0.02), transparent 50%);\\n }\\n}\\n\\n\\\/* \\u0427\\u0430\\u0441\\u0442\\u0438\\u0446\\u044b \\u0434\\u043b\\u044f \\u0430\\u043d\\u0438\\u043c\\u0430\\u0446\\u0438\\u0438 \\u0444\\u043e\\u043d\\u0430 *\\\/\\n.president-particles {\\n display: none; \\\/* \\u0421\\u043a\\u0440\\u044b\\u0432\\u0430\\u0435\\u043c \\u0434\\u043b\\u044f \\u0434\\u0435\\u0441\\u043a\\u0442\\u043e\\u043f\\u0430 *\\\/\\n}\\n\\n\\\/* \\u041f\\u043e\\u043a\\u0430\\u0437\\u044b\\u0432\\u0430\\u0435\\u043c \\u0447\\u0430\\u0441\\u0442\\u0438\\u0446\\u044b \\u0434\\u043b\\u044f \\u043f\\u043b\\u0430\\u043d\\u0448\\u0435\\u0442\\u043e\\u0432 \\u0438 \\u043c\\u043e\\u0431\\u0438\\u043b\\u044c\\u043d\\u044b\\u0445 *\\\/\\n@media (max-width: 1024px) {\\n .president-particles {\\n display: block;\\n position: absolute;\\n width: 100%;\\n height: 100%;\\n overflow: hidden;\\n z-index: 1;\\n }\\n}\\n\\n.president-particle {\\n position: absolute;\\n width: 4px;\\n height: 4px;\\n background: rgba(212, 175, 55, 0.2);\\n border-radius: 50%;\\n animation: president-float 15s ease-in-out infinite;\\n}\\n\\n.president-particle:nth-child(2n) { \\n background: rgba(10, 31, 68, 0.15); \\n animation-duration: 18s; \\n}\\n\\n.president-particle:nth-child(3n) { \\n background: rgba(29, 97, 67, 0.1); \\n animation-duration: 20s; \\n}\\n\\n@keyframes president-float { \\n 0%, 100% { \\n transform: translateY(0); \\n opacity: 1; \\n }\\n 50% { \\n transform: translateY(-10px); \\n opacity: 0.8; \\n }\\n}\\n\\n\\\/* \\u041a\\u043e\\u043d\\u0442\\u0435\\u043d\\u0442 \\u043e\\u0431\\u0435\\u0440\\u0442\\u043a\\u0430 *\\\/\\n.president-content-wrapper {\\n position: relative;\\n z-index: 2;\\n padding: 0 20px;\\n}\\n\\n\\\/* Typography for this block - BIFA+ Official Fonts *\\\/\\n.bifa-president-block h1, \\n.bifa-president-block h2, \\n.bifa-president-block h3 {\\n font-family: 'Montserrat', sans-serif !important;\\n}\\n\\n.bifa-president-block p, \\n.bifa-president-block span, \\n.bifa-president-block a {\\n font-family: 'Poppins', sans-serif !important;\\n}\\n\\n\\\/* President Card Container *\\\/\\n.bifa-president-container {\\n max-width: 1200px;\\n margin: 0 auto;\\n position: relative;\\n z-index: 1;\\n}\\n\\n\\\/* Main Card *\\\/\\n.bifa-president-card {\\n background: transparent;\\n backdrop-filter: none;\\n border-radius: 0;\\n padding: 0; \\\/* \\u0423\\u0431\\u0438\\u0440\\u0430\\u0435\\u043c \\u0432\\u043d\\u0443\\u0442\\u0440\\u0435\\u043d\\u043d\\u0438\\u0435 \\u043e\\u0442\\u0441\\u0442\\u0443\\u043f\\u044b \\u0434\\u043b\\u044f \\u0434\\u0435\\u0441\\u043a\\u0442\\u043e\\u043f\\u0430 *\\\/\\n box-shadow: none;\\n border: none;\\n position: relative;\\n overflow: hidden;\\n animation: bifa-fadeInUp 1s ease-out;\\n}\\n\\n\\\/* \\u0412\\u043e\\u0441\\u0441\\u0442\\u0430\\u043d\\u0430\\u0432\\u043b\\u0438\\u0432\\u0430\\u0435\\u043c \\u043a\\u0430\\u0440\\u0442\\u043e\\u0447\\u043a\\u0443 \\u0434\\u043b\\u044f \\u043f\\u043b\\u0430\\u043d\\u0448\\u0435\\u0442\\u043e\\u0432 \\u0438 \\u043c\\u043e\\u0431\\u0438\\u043b\\u044c\\u043d\\u044b\\u0445 *\\\/\\n@media (max-width: 1024px) {\\n .bifa-president-card {\\n background: var(--bright-white);\\n backdrop-filter: blur(10px);\\n border-radius: var(--radius);\\n box-shadow: 0 5px 30px rgba(10, 31, 68, 0.1);\\n border: 2px solid rgba(212, 175, 55, 0.2);\\n }\\n}\\n\\n\\\/* Rotating background gradient *\\\/\\n.bifa-president-card::before {\\n content: '';\\n position: absolute;\\n top: -50%;\\n right: -50%;\\n width: 200%;\\n height: 200%;\\n background: none;\\n animation: none;\\n pointer-events: none;\\n}\\n\\n\\\/* \\u0412\\u043e\\u0441\\u0441\\u0442\\u0430\\u043d\\u0430\\u0432\\u043b\\u0438\\u0432\\u0430\\u0435\\u043c \\u0433\\u0440\\u0430\\u0434\\u0438\\u0435\\u043d\\u0442 \\u0434\\u043b\\u044f \\u043f\\u043b\\u0430\\u043d\\u0448\\u0435\\u0442\\u043e\\u0432 \\u0438 \\u043c\\u043e\\u0431\\u0438\\u043b\\u044c\\u043d\\u044b\\u0445 *\\\/\\n@media (max-width: 1024px) {\\n .bifa-president-card::before {\\n background: radial-gradient(circle, rgba(212, 175, 55, 0.03) 0%, transparent 50%);\\n animation: bifa-rotate-slow 30s linear infinite;\\n }\\n}\\n\\n\\\/* Card Content Grid *\\\/\\n.bifa-card-content {\\n display: grid;\\n grid-template-columns: 280px 1fr;\\n gap: 60px;\\n align-items: center;\\n position: relative;\\n z-index: 1;\\n}\\n\\n\\\/* President Photo *\\\/\\n.bifa-president-photo {\\n width: 280px;\\n height: 280px;\\n border-radius: 50%;\\n overflow: hidden;\\n position: relative;\\n border: 5px solid transparent;\\n background: linear-gradient(white, white) padding-box,\\n linear-gradient(135deg, var(--heritage-gold), #e6c157, var(--heritage-gold)) border-box;\\n animation: bifa-fadeInScale 1s ease-out;\\n box-shadow: 0 10px 30px rgba(10, 31, 68, 0.15);\\n}\\n\\n.bifa-president-photo img {\\n width: 100%;\\n height: 100%;\\n object-fit: cover;\\n transition: transform 0.6s ease;\\n}\\n\\n.bifa-president-photo:hover img {\\n transform: scale(1.1);\\n}\\n\\n\\\/* President Info Section *\\\/\\n.bifa-president-info {\\n animation: bifa-fadeInRight 1s ease-out 0.3s both;\\n}\\n\\n\\\/* Badge *\\\/\\n.bifa-president-badge {\\n display: inline-flex;\\n align-items: center;\\n gap: 10px;\\n background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(212, 175, 55, 0.05) 100%);\\n padding: 12px 24px;\\n border-radius: 50px;\\n margin-bottom: 25px;\\n border: 1px solid rgba(212, 175, 55, 0.3);\\n}\\n\\n.bifa-badge-icon {\\n width: 24px;\\n height: 24px;\\n fill: var(--heritage-gold);\\n}\\n\\n.bifa-badge-text {\\n font-family: 'Montserrat', sans-serif !important;\\n font-size: 0.85rem;\\n font-weight: 700;\\n text-transform: uppercase;\\n letter-spacing: 2px;\\n color: var(--deep-navy);\\n}\\n\\n\\\/* President Name - \\u0417\\u041e\\u041b\\u041e\\u0422\\u041e\\u0419 \\u0426\\u0412\\u0415\\u0422 \\u0421 \\u041f\\u0415\\u0420\\u0415\\u041b\\u0418\\u0412\\u041e\\u041c *\\\/\\n.bifa-president-name {\\n font-size: 2.8rem;\\n font-weight: 800;\\n background: linear-gradient(135deg, var(--heritage-gold) 0%, #e6c157 25%, #f4d03f 50%, #e6c157 75%, var(--heritage-gold) 100%);\\n background-size: 200% 100%;\\n background-clip: text;\\n -webkit-background-clip: text;\\n -webkit-text-fill-color: transparent;\\n margin-bottom: 30px;\\n line-height: 1.1;\\n font-family: 'Montserrat', sans-serif !important;\\n text-transform: uppercase;\\n letter-spacing: 1px;\\n text-shadow: 0 2px 4px rgba(212, 175, 55, 0.1);\\n cursor: pointer;\\n transition: all 0.3s ease;\\n}\\n\\n\\\/* \\u0410\\u043d\\u0438\\u043c\\u0430\\u0446\\u0438\\u044f \\u043f\\u0435\\u0440\\u0435\\u043b\\u0438\\u0432\\u0430 \\u0442\\u043e\\u043b\\u044c\\u043a\\u043e \\u043f\\u0440\\u0438 \\u043d\\u0430\\u0432\\u0435\\u0434\\u0435\\u043d\\u0438\\u0438 *\\\/\\n.bifa-president-name:hover {\\n animation: bifa-gold-shimmer 2s ease-in-out infinite;\\n transform: scale(1.02);\\n}\\n\\n\\\/* \\u0410\\u043d\\u0438\\u043c\\u0430\\u0446\\u0438\\u044f \\u0437\\u043e\\u043b\\u043e\\u0442\\u043e\\u0433\\u043e \\u043f\\u0435\\u0440\\u0435\\u043b\\u0438\\u0432\\u0430 *\\\/\\n@keyframes bifa-gold-shimmer {\\n 0% {\\n background-position: 200% 0;\\n }\\n 50% {\\n background-position: -200% 0;\\n }\\n 100% {\\n background-position: 200% 0;\\n }\\n}\\n\\n\\\/* Description *\\\/\\n.bifa-president-description {\\n font-size: 1.15rem;\\n line-height: 1.8;\\n color: var(--text-secondary);\\n margin-bottom: 40px;\\n font-family: 'Poppins', sans-serif !important;\\n font-weight: 400;\\n}\\n\\n.bifa-president-description .bifa-highlight {\\n color: var(--heritage-gold);\\n font-weight: 600;\\n}\\n\\n\\\/* Action Buttons Container *\\\/\\n.bifa-president-actions {\\n display: flex;\\n align-items: center;\\n gap: 25px;\\n flex-wrap: wrap;\\n}\\n\\n\\\/* Buttons - Official BIFA+ Style *\\\/\\n.bifa-btn {\\n padding: 14px 32px;\\n text-decoration: none;\\n font-size: 0.95rem;\\n font-weight: 600;\\n border-radius: var(--radius);\\n display: inline-flex;\\n align-items: center;\\n gap: 10px;\\n transition: all 0.3s ease;\\n font-family: 'Montserrat', sans-serif !important;\\n cursor: pointer;\\n position: relative;\\n overflow: hidden;\\n text-transform: uppercase;\\n letter-spacing: 1px;\\n}\\n\\n.bifa-btn-gold {\\n background: var(--heritage-gold);\\n color: var(--deep-navy);\\n box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);\\n border: 2px solid var(--heritage-gold);\\n}\\n\\n.bifa-btn-gold:hover {\\n transform: translateY(-2px);\\n box-shadow: 0 6px 25px rgba(212, 175, 55, 0.4);\\n background: #e6c157;\\n color: var(--deep-navy);\\n text-decoration: none;\\n}\\n\\n.bifa-btn-outline {\\n background: transparent;\\n color: var(--deep-navy);\\n border: 2px solid var(--deep-navy);\\n}\\n\\n.bifa-btn-outline:hover {\\n background: var(--deep-navy);\\n color: var(--bright-white);\\n transform: translateY(-2px);\\n box-shadow: 0 6px 20px rgba(10, 31, 68, 0.25);\\n text-decoration: none;\\n}\\n\\n.bifa-btn-icon {\\n width: 20px;\\n height: 20px;\\n transition: transform 0.3s ease;\\n}\\n\\n.bifa-btn:hover .bifa-btn-icon {\\n transform: translateX(5px);\\n}\\n\\n\\\/* BIFA Logo *\\\/\\n.bifa-logo-wrapper {\\n position: relative;\\n width: 80px;\\n height: 80px;\\n flex-shrink: 0;\\n margin-left: 15px;\\n}\\n\\n.bifa-logo-bg {\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n transform: translate(-50%, -50%);\\n width: 100px;\\n height: 100px;\\n background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 60%);\\n border-radius: 50%;\\n animation: bifa-pulse 4s ease-in-out infinite;\\n}\\n\\n.bifa-logo-img {\\n width: 80px;\\n height: 80px;\\n background-image: url('\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/logo_bifa.svg');\\n background-size: contain;\\n background-repeat: no-repeat;\\n background-position: center;\\n filter: drop-shadow(0 4px 8px rgba(10, 31, 68, 0.1));\\n transition: all 0.4s ease;\\n position: relative;\\n z-index: 1;\\n}\\n\\n.bifa-logo-wrapper:hover .bifa-logo-img {\\n transform: scale(1.1) rotate(5deg);\\n filter: drop-shadow(0 6px 15px rgba(212, 175, 55, 0.3));\\n}\\n\\n\\\/* Decorative Elements *\\\/\\n.bifa-gold-accent {\\n display: none; \\\/* \\u0421\\u043a\\u0440\\u044b\\u0432\\u0430\\u0435\\u043c \\u0434\\u043b\\u044f \\u0434\\u0435\\u0441\\u043a\\u0442\\u043e\\u043f\\u0430 *\\\/\\n}\\n\\n\\\/* \\u0414\\u043b\\u044f \\u0434\\u0435\\u0441\\u043a\\u0442\\u043e\\u043f\\u043d\\u044b\\u0445 \\u044d\\u043a\\u0440\\u0430\\u043d\\u043e\\u0432 - \\u0443\\u0431\\u0438\\u0440\\u0430\\u0435\\u043c \\u0432\\u0441\\u0435 \\u0444\\u043e\\u043d\\u044b \\u0438 \\u0440\\u0430\\u043c\\u043a\\u0438 *\\\/\\n@media (min-width: 1025px) {\\n .bifa-president-block {\\n background: transparent !important;\\n padding: 40px 0;\\n }\\n \\n .bifa-president-block::before {\\n display: none;\\n }\\n \\n .bifa-president-card {\\n background: transparent !important;\\n border: none !important;\\n box-shadow: none !important;\\n padding: 0 !important;\\n }\\n \\n .president-particles,\\n .bifa-gold-accent {\\n display: none !important;\\n }\\n}\\n\\n\\\/* \\u041f\\u043e\\u043a\\u0430\\u0437\\u044b\\u0432\\u0430\\u0435\\u043c \\u0434\\u0435\\u043a\\u043e\\u0440\\u0430\\u0442\\u0438\\u0432\\u043d\\u044b\\u0435 \\u044d\\u043b\\u0435\\u043c\\u0435\\u043d\\u0442\\u044b \\u0434\\u043b\\u044f \\u043f\\u043b\\u0430\\u043d\\u0448\\u0435\\u0442\\u043e\\u0432 \\u0438 \\u043c\\u043e\\u0431\\u0438\\u043b\\u044c\\u043d\\u044b\\u0445 *\\\/\\n@media (max-width: 1024px) {\\n .bifa-gold-accent {\\n display: block;\\n position: absolute;\\n width: 180px;\\n height: 180px;\\n background: radial-gradient(circle, rgba(212, 175, 55, 0.12) 0%, transparent 70%);\\n border-radius: 50%;\\n filter: blur(40px);\\n pointer-events: none;\\n animation: bifa-float-accent 15s ease-in-out infinite;\\n }\\n\\n .bifa-gold-accent:nth-child(1) {\\n top: -80px;\\n right: 10%;\\n }\\n\\n .bifa-gold-accent:nth-child(2) {\\n bottom: -80px;\\n left: 10%;\\n animation-delay: 7s;\\n }\\n}\\n\\n\\\/* Animations *\\\/\\n@keyframes bifa-fadeInUp {\\n from {\\n opacity: 0;\\n transform: translateY(40px);\\n }\\n to {\\n opacity: 1;\\n transform: translateY(0);\\n }\\n}\\n\\n@keyframes bifa-fadeInRight {\\n from {\\n opacity: 0;\\n transform: translateX(40px);\\n }\\n to {\\n opacity: 1;\\n transform: translateX(0);\\n }\\n}\\n\\n@keyframes bifa-fadeInScale {\\n from {\\n opacity: 0;\\n transform: scale(0.8);\\n }\\n to {\\n opacity: 1;\\n transform: scale(1);\\n }\\n}\\n\\n@keyframes bifa-rotate-slow {\\n from { transform: rotate(0deg); }\\n to { transform: rotate(360deg); }\\n}\\n\\n@keyframes bifa-float-accent {\\n 0%, 100% {\\n transform: translate(0, 0);\\n }\\n 50% {\\n transform: translate(-20px, 20px);\\n }\\n}\\n\\n@keyframes bifa-pulse {\\n 0%, 100% {\\n transform: translate(-50%, -50%) scale(1);\\n opacity: 0.3;\\n }\\n 50% {\\n transform: translate(-50%, -50%) scale(1.05);\\n opacity: 0.5;\\n }\\n}\\n\\n\\\/* Responsive Design *\\\/\\n@media (max-width: 1024px) {\\n .bifa-president-container {\\n padding: 0 30px;\\n }\\n \\n .bifa-president-card {\\n padding: 50px 40px;\\n background: var(--bright-white);\\n backdrop-filter: blur(10px);\\n border-radius: var(--radius);\\n box-shadow: 0 5px 30px rgba(10, 31, 68, 0.1);\\n border: 2px solid rgba(212, 175, 55, 0.2);\\n }\\n \\n .bifa-card-content {\\n gap: 50px;\\n }\\n}\\n\\n@media (max-width: 868px) {\\n .bifa-president-block {\\n padding: 60px 0;\\n }\\n \\n .bifa-card-content {\\n grid-template-columns: 1fr;\\n text-align: center;\\n gap: 40px;\\n }\\n \\n .bifa-president-photo {\\n margin: 0 auto;\\n }\\n \\n .bifa-president-actions {\\n justify-content: center;\\n }\\n \\n .bifa-president-badge {\\n margin-left: auto;\\n margin-right: auto;\\n }\\n}\\n\\n@media (max-width: 640px) {\\n .bifa-president-container {\\n padding: 0 20px;\\n }\\n \\n .bifa-president-card {\\n padding: 40px 30px;\\n }\\n \\n .bifa-president-name {\\n font-size: 2.2rem;\\n }\\n \\n .bifa-president-description {\\n font-size: 1.05rem;\\n }\\n \\n .bifa-president-actions {\\n flex-direction: column;\\n width: 100%;\\n gap: 15px;\\n }\\n \\n .bifa-btn {\\n width: 100%;\\n justify-content: center;\\n }\\n \\n .bifa-logo-wrapper {\\n margin: 20px auto 0;\\n }\\n}\\n\\n@media (max-width: 480px) {\\n .bifa-president-block {\\n padding: 50px 0;\\n }\\n \\n .bifa-president-card {\\n padding: 30px 20px;\\n border-radius: var(--radius);\\n background: var(--bright-white);\\n backdrop-filter: blur(10px);\\n box-shadow: 0 5px 30px rgba(10, 31, 68, 0.1);\\n border: 2px solid rgba(212, 175, 55, 0.2);\\n }\\n \\n .bifa-president-photo {\\n width: 220px;\\n height: 220px;\\n }\\n \\n .bifa-president-name {\\n font-size: 1.9rem;\\n margin-bottom: 20px;\\n }\\n \\n .bifa-president-description {\\n font-size: 1rem;\\n margin-bottom: 30px;\\n }\\n \\n .bifa-btn {\\n padding: 12px 24px;\\n font-size: 0.9rem;\\n }\\n \\n .bifa-logo-wrapper {\\n width: 70px;\\n height: 70px;\\n }\\n \\n .bifa-logo-img {\\n width: 70px;\\n height: 70px;\\n }\\n}\\n<\\\/style>\\n<\\\/head>\\n<body>\\n\\n\\n<\/p>\n<div class=\"\\\"bifa-president-block\\\"\">\\n \\n <\/p>\n<div class=\"\\\"president-particles\\\"\">\\n <\/p>\n<div class=\"\\\"president-particle\\\"\" style=\"\\\"left:10%;\" top:20%; animation-delay:0s\\\"><\\\/div>\\n <\/p>\n<div class=\"\\\"president-particle\\\"\" style=\"\\\"left:30%;\" top:60%; animation-delay:2s\\\"><\\\/div>\\n <\/p>\n<div class=\"\\\"president-particle\\\"\" style=\"\\\"left:50%;\" top:30%; animation-delay:4s\\\"><\\\/div>\\n <\/p>\n<div class=\"\\\"president-particle\\\"\" style=\"\\\"left:70%;\" top:70%; animation-delay:6s\\\"><\\\/div>\\n <\/p>\n<div class=\"\\\"president-particle\\\"\" style=\"\\\"left:90%;\" top:40%; animation-delay:8s\\\"><\\\/div>\\n <\/p>\n<div class=\"\\\"president-particle\\\"\" style=\"\\\"left:20%;\" top:80%; animation-delay:3s\\\"><\\\/div>\\n <\/p>\n<div class=\"\\\"president-particle\\\"\" style=\"\\\"left:80%;\" top:10%; animation-delay:5s\\\"><\\\/div>\\n <\/p>\n<div class=\"\\\"president-particle\\\"\" style=\"\\\"left:40%;\" top:90%; animation-delay:7s\\\"><\\\/div>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"bifa-gold-accent\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-gold-accent\\\"\"><\\\/div>\\n \\n <\/p>\n<div class=\"\\\"president-content-wrapper\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-president-container\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-president-card\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-card-content\\\"\">\\n \\n <\/p>\n<div class=\"\\\"bifa-president-photo\\\"\">\\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 \\n \\n <\/p>\n<div class=\"\\\"bifa-president-info\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-president-badge\\\"\">\\n <svg class=\"\\\"bifa-badge-icon\\\"\" viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"currentColor\\\"\">\\n <path d=\"\\\"M12\" 2l3.09 6.26l22 9.27l-5 4.87 1.18 6.88l12 17.77l-6.18 3.25l7 14.14 2 9.27l6.91-1.01l12 2z\\\"\\>\\n <\\\/svg>\\n <span class=\"\\\"bifa-badge-text\\\"\">Founder & President<\\\/span>\\n <\\\/div>\\n \\n <\/p>\n<h2 class=\"\\\"bifa-president-name\\\"\">Dr. Salim Humaid Almazaini<\\\/h2>\\n \\n <\/p>\n<div class=\"\\\"bifa-president-description\\\"\">\\n <\/p>\n<p>\\n A distinguished <span class=\"\\\"bifa-highlight\\\"\">visionary leader<\\\/span> in international sports diplomacy. Through strategic innovation and unwavering commitment, Dr. Almazaini transforms global football <span class=\"\\\"bifa-highlight\\\"\">into a powerful bridge for unity and cooperation<\\\/span> between nations.\\n <\\\/p>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"bifa-president-actions\\\"\">\\n <a href=\"\\\"https:\\\/\\\/bifa.ai\\\/about\\\/#founder\\\"\" class=\"\\\"bifa-btn\" bifa-btn-gold\\\">\\n <span>Discover Story<\\\/span>\\n <svg class=\"\\\"bifa-btn-icon\\\"\" viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\" stroke=\"\\\"currentColor\\\"\" stroke-width=\"\\\"2\\\"\" stroke-linecap=\"\\\"round\\\"\" stroke-linejoin=\"\\\"round\\\"\">\\n <path d=\"\\\"M5\" 12h14m12 5l7 7-7 7\\\"\\>\\n <\\\/svg>\\n <\\\/a>\\n \\n <a href=\"\\\"https:\\\/\\\/bifa.ai\\\/about\\\/\\\"\" class=\"\\\"bifa-btn\" bifa-btn-outline\\\">\\n <span>About BIFA<\\\/span>\\n <svg class=\"\\\"bifa-btn-icon\\\"\" viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\" stroke=\"\\\"currentColor\\\"\" stroke-width=\"\\\"2\\\"\" stroke-linecap=\"\\\"round\\\"\" stroke-linejoin=\"\\\"round\\\"\">\\n <circle cx=\"\\\"12\\\"\" cy=\"\\\"12\\\"\" r=\"\\\"10\\\"\\\/\">\\n <path d=\"\\\"M12\" 6v6l4 2\\\"\\>\\n <\\\/svg>\\n <\\\/a>\\n \\n <\/p>\n<div class=\"\\\"bifa-logo-wrapper\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-logo-bg\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-logo-img\\\"\" role=\"\\\"img\\\"\" aria-label=\"\\\"BIFA\" logo\\\"><\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n<\\\/div>\\n\\n<script>\\n\\\/\\\/ BIFA President Block Interactions\\n(function() {\\n \\\/\\\/ Smooth reveal animation on scroll\\n const observerOptions = {\\n threshold: 0.2,\\n rootMargin: '0px 0px -50px 0px'\\n };\\n\\n const observer = new IntersectionObserver((entries) => {\\n entries.forEach(entry => {\\n if (entry.isIntersecting) {\\n entry.target.style.animationPlayState = 'running';\\n observer.unobserve(entry.target);\\n }\\n });\\n }, observerOptions);\\n\\n \\\/\\\/ Observe animated elements\\n const animatedElements = document.querySelectorAll('.bifa-president-card, .bifa-president-photo');\\n animatedElements.forEach(el => {\\n if (el) {\\n el.style.animationPlayState = 'paused';\\n observer.observe(el);\\n }\\n });\\n\\n \\\/\\\/ Button hover effects\\n const buttons = document.querySelectorAll('.bifa-btn');\\n buttons.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.3) 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 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 \\\/\\\/ Image loading effect\\n const presidentImg = document.querySelector('.bifa-president-photo img');\\n if (presidentImg) {\\n presidentImg.style.opacity = '0';\\n presidentImg.style.transition = 'opacity 0.6s ease';\\n \\n if (presidentImg.complete) {\\n presidentImg.style.opacity = '1';\\n } else {\\n presidentImg.addEventListener('load', function() {\\n this.style.opacity = '1';\\n });\\n }\\n }\\n\\n \\\/\\\/ Preload images\\n const imagesToPreload = [\\n '\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/logo_bifa.svg',\\n '\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Mr\\\/main-photo.jpg'\\n ];\\n \\n imagesToPreload.forEach(url => {\\n const img = new Image();\\n img.src = url;\\n });\\n})();\\n<\\\/script>\\n\\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+ Premium Gallery Block<\\\/title>\\n <link rel=\"\\\"preconnect\\\"\" href=\"\\\"https:\\\/\\\/fonts.googleapis.com\\\"\">\\n <link rel=\"\\\"preconnect\\\"\" href=\"\\\"https:\\\/\\\/fonts.gstatic.com\\\"\" crossorigin>\\n \\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&family=Cairo:wght@300;400;500;600;700;800&family=Tajawal:wght@300;400;500;700;800&display=swap\\\"\" rel=\"\\\"stylesheet\\\"\">\\n\\n<\/p>\n<style>\\n\\\/* ========= \\u0413\\u041b\\u041e\\u0411\\u0410\\u041b\\u042c\\u041d\\u042b\\u0415 \\u041f\\u0415\\u0420\\u0415\\u041c\\u0415\\u041d\\u041d\\u042b\\u0415 BIFA+ ========= *\\\/\\n:root {\\n \\\/* \\u041e\\u0444\\u0438\\u0446\\u0438\\u0430\\u043b\\u044c\\u043d\\u044b\\u0435 \\u0446\\u0432\\u0435\\u0442\\u0430 BIFA+ *\\\/\\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 --bifa-gray-light: #F8F9FA;\\n --bifa-gray: #6C757D;\\n \\n \\\/* \\u041e\\u0444\\u0438\\u0446\\u0438\\u0430\\u043b\\u044c\\u043d\\u044b\\u0435 \\u0448\\u0440\\u0438\\u0444\\u0442\\u044b BIFA+ *\\\/\\n --bifa-font-heading: 'Montserrat', 'Cairo', sans-serif;\\n --bifa-font-body: 'Poppins', 'Tajawal', sans-serif;\\n --bifa-font-arabic: 'Cairo', 'Tajawal', 'GE SS Text', sans-serif;\\n \\n \\\/* \\u041f\\u0440\\u0435\\u043c\\u0438\\u0430\\u043b\\u044c\\u043d\\u044b\\u0435 \\u0442\\u0435\\u043d\\u0438 \\u0438 \\u044d\\u0444\\u0444\\u0435\\u043a\\u0442\\u044b *\\\/\\n --bifa-shadow-premium: 0 25px 80px rgba(10, 31, 68, 0.15);\\n --bifa-shadow-hover: 0 35px 100px rgba(10, 31, 68, 0.2);\\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\\n\\\/* ========= RESET ========= *\\\/\\n* {\\n margin: 0;\\n padding: 0;\\n box-sizing: border-box;\\n}\\n\\nbody {\\n font-family: var(--bifa-font-body);\\n background: var(--bifa-bright-white);\\n overflow-x: hidden;\\n color: var(--bifa-soft-black);\\n}\\n\\n\\\/* ========= GALLERY SECTION WRAPPER ========= *\\\/\\n.bifa-gallery-section-wrapper {\\n width: 100vw;\\n position: relative;\\n left: 50%;\\n margin-left: -50vw;\\n background: transparent; \\\/* \\u0411\\u0435\\u0437 \\u0444\\u043e\\u043d\\u0430 *\\\/\\n overflow: hidden;\\n}\\n\\n\\\/* ========= MAIN GALLERY SECTION ========= *\\\/\\n.bifa-gallery-section {\\n min-height: auto;\\n padding: 60px 0 80px 0;\\n position: relative;\\n background: transparent;\\n}\\n\\n\\\/* ========= ANIMATED BACKGROUND ELEMENTS ========= *\\\/\\n.bifa-gallery-bg-animation {\\n position: absolute;\\n width: 100%;\\n height: 100%;\\n overflow: hidden;\\n z-index: 1;\\n top: 0;\\n left: 0;\\n}\\n\\n\\\/* \\u0417\\u043e\\u043b\\u043e\\u0442\\u044b\\u0435 \\u0447\\u0430\\u0441\\u0442\\u0438\\u0446\\u044b BIFA+ *\\\/\\n.bifa-gallery-particle {\\n position: absolute;\\n width: 4px;\\n height: 4px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n border-radius: 50%;\\n animation: floatGallery 18s infinite linear;\\n box-shadow: 0 0 8px rgba(212, 175, 55, 0.3);\\n opacity: 0.3;\\n will-change: transform;\\n}\\n\\n@keyframes floatGallery {\\n 0% {\\n transform: translateY(100vh) translateX(0) rotate(0deg);\\n opacity: 0;\\n }\\n 10% { opacity: 0.4; }\\n 90% { opacity: 0.4; }\\n 100% {\\n transform: translateY(-100vh) translateX(60px) rotate(360deg);\\n opacity: 0;\\n }\\n}\\n\\n\\\/* \\u041f\\u043b\\u0430\\u0432\\u0430\\u044e\\u0449\\u0438\\u0435 \\u0433\\u0435\\u043e\\u043c\\u0435\\u0442\\u0440\\u0438\\u0447\\u0435\\u0441\\u043a\\u0438\\u0435 \\u0444\\u0438\\u0433\\u0443\\u0440\\u044b BIFA+ *\\\/\\n.bifa-floating-shape {\\n position: absolute;\\n border-radius: 50%;\\n filter: blur(100px);\\n animation: morphFloatGallery 22s ease-in-out infinite;\\n pointer-events: none;\\n opacity: 0.4;\\n}\\n\\n.bifa-shape-gallery-1 {\\n width: 350px;\\n height: 350px;\\n background: radial-gradient(circle at 30% 30%, rgba(212, 175, 55, 0.08), transparent);\\n top: -175px;\\n right: -175px;\\n}\\n\\n.bifa-shape-gallery-2 {\\n width: 300px;\\n height: 300px;\\n background: radial-gradient(circle at 70% 70%, rgba(10, 31, 68, 0.06), transparent);\\n bottom: -150px;\\n left: -150px;\\n animation-delay: 7s;\\n}\\n\\n.bifa-shape-gallery-3 {\\n width: 250px;\\n height: 250px;\\n background: radial-gradient(circle at 50% 50%, rgba(29, 97, 67, 0.07), transparent);\\n top: 40%;\\n left: 60%;\\n animation-delay: 14s;\\n}\\n\\n@keyframes morphFloatGallery {\\n 0%, 100% { \\n transform: translate(0, 0) scale(1) rotate(0deg);\\n filter: blur(100px);\\n }\\n 25% { \\n transform: translate(80px, -60px) scale(1.2) rotate(90deg);\\n filter: blur(120px);\\n }\\n 50% { \\n transform: translate(-60px, 80px) scale(0.8) rotate(180deg);\\n filter: blur(80px);\\n }\\n 75% { \\n transform: translate(-80px, -40px) scale(1.1) rotate(270deg);\\n filter: blur(110px);\\n }\\n}\\n\\n\\\/* ========= CONTAINER ========= *\\\/\\n.bifa-gallery-container {\\n max-width: 1400px;\\n margin: 0 auto;\\n padding: 0 20px;\\n position: relative;\\n z-index: 10;\\n}\\n\\n\\\/* ========= SECTION HEADER - Premium Style ========= *\\\/\\n.bifa-gallery-section-header {\\n text-align: center;\\n margin-bottom: 70px;\\n animation: fadeInDown 1.2s ease;\\n}\\n\\n.bifa-gallery-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), #ffd700);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n margin-bottom: 15px;\\n text-transform: uppercase;\\n position: relative;\\n display: inline-block;\\n cursor: pointer;\\n transition: all 0.3s ease;\\n}\\n\\n.bifa-gallery-section-title::after {\\n content: '';\\n position: absolute;\\n bottom: -10px;\\n left: 50%;\\n transform: translateX(-50%);\\n width: 0;\\n height: 3px;\\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700);\\n transition: width 0.4s ease;\\n}\\n\\n.bifa-gallery-section-title:hover {\\n transform: translateY(-3px);\\n filter: drop-shadow(0 10px 20px rgba(212, 175, 55, 0.3));\\n}\\n\\n.bifa-gallery-section-title:hover::after {\\n width: 100%;\\n}\\n\\n.bifa-gallery-section-subtitle {\\n font-family: var(--bifa-font-heading);\\n font-size: clamp(1.1rem, 2vw, 1.5rem);\\n color: var(--bifa-deep-navy);\\n font-weight: 600;\\n letter-spacing: 1.5px;\\n margin-bottom: 15px;\\n opacity: 0;\\n animation: fadeInUp 1.2s ease 0.3s forwards;\\n}\\n\\n.bifa-gallery-section-description {\\n max-width: 800px;\\n margin: 0 auto;\\n font-family: var(--bifa-font-body);\\n font-size: clamp(0.95rem, 1.3vw, 1.1rem);\\n line-height: 1.7;\\n color: #4a5568;\\n opacity: 0;\\n animation: fadeInUp 1.2s ease 0.6s forwards;\\n}\\n\\n\\\/* ========= MAIN GALLERY - Premium Design ========= *\\\/\\n.bifa-gallery-main {\\n position: relative;\\n max-width: 1000px;\\n margin: 0 auto 50px;\\n border-radius: 25px;\\n overflow: hidden;\\n box-shadow: var(--bifa-shadow-premium);\\n animation: fadeInUp 1.2s ease 0.4s forwards;\\n background: white;\\n opacity: 0;\\n border: 1px solid rgba(212, 175, 55, 0.1);\\n}\\n\\n.bifa-gallery-slider {\\n position: relative;\\n height: 600px;\\n background: var(--bifa-gray-light);\\n overflow: hidden;\\n}\\n\\n.bifa-slide {\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n opacity: 0;\\n transition: opacity 1s ease-in-out;\\n}\\n\\n.bifa-slide.active {\\n opacity: 1;\\n}\\n\\n.bifa-slide img {\\n width: 100%;\\n height: 100%;\\n object-fit: cover;\\n transition: transform 0.3s ease;\\n}\\n\\n.bifa-slide:hover img {\\n transform: scale(1.05);\\n}\\n\\n.bifa-slide-caption {\\n position: absolute;\\n bottom: 0;\\n left: 0;\\n right: 0;\\n background: linear-gradient(to top, \\n rgba(10, 31, 68, 0.95) 0%, \\n rgba(10, 31, 68, 0.8) 50%,\\n transparent 100%\\n );\\n padding: 50px 40px;\\n color: white;\\n}\\n\\n.bifa-slide-title {\\n font-family: var(--bifa-font-heading);\\n font-size: 1.8rem;\\n font-weight: 800;\\n margin-bottom: 12px;\\n color: var(--bifa-bright-white);\\n text-shadow: 0 2px 4px rgba(0,0,0,0.3);\\n}\\n\\n.bifa-slide-desc {\\n font-family: var(--bifa-font-body);\\n font-size: 1.1rem;\\n color: rgba(255, 255, 255, 0.9);\\n line-height: 1.6;\\n}\\n\\n\\\/* ========= NAVIGATION ARROWS - Premium Style ========= *\\\/\\n.bifa-gallery-nav {\\n position: absolute;\\n top: 50%;\\n transform: translateY(-50%);\\n background: rgba(255, 255, 255, 0.95);\\n backdrop-filter: blur(15px);\\n border: 2px solid rgba(212, 175, 55, 0.3);\\n width: 55px;\\n height: 55px;\\n border-radius: 50%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n cursor: pointer;\\n transition: var(--bifa-transition);\\n z-index: 20;\\n box-shadow: 0 8px 25px rgba(10, 31, 68, 0.15);\\n}\\n\\n.bifa-gallery-nav:hover {\\n background: var(--bifa-heritage-gold);\\n border-color: var(--bifa-heritage-gold);\\n transform: translateY(-50%) scale(1.1);\\n box-shadow: var(--bifa-shadow-gold);\\n}\\n\\n.bifa-gallery-nav.prev {\\n left: 25px;\\n}\\n\\n.bifa-gallery-nav.next {\\n right: 25px;\\n}\\n\\n.bifa-gallery-nav::before {\\n content: '';\\n width: 14px;\\n height: 14px;\\n border-top: 3px solid var(--bifa-deep-navy);\\n border-right: 3px solid var(--bifa-deep-navy);\\n transition: border-color 0.3s ease;\\n}\\n\\n.bifa-gallery-nav:hover::before {\\n border-color: var(--bifa-bright-white);\\n}\\n\\n.bifa-gallery-nav.prev::before {\\n transform: rotate(-135deg);\\n margin-left: 4px;\\n}\\n\\n.bifa-gallery-nav.next::before {\\n transform: rotate(45deg);\\n margin-right: 4px;\\n}\\n\\n\\\/* ========= DOTS NAVIGATION - Premium Style ========= *\\\/\\n.bifa-gallery-dots {\\n position: absolute;\\n bottom: 25px;\\n left: 50%;\\n transform: translateX(-50%);\\n display: flex;\\n gap: 12px;\\n z-index: 20;\\n}\\n\\n.bifa-dot {\\n width: 14px;\\n height: 14px;\\n border-radius: 50%;\\n background: rgba(255, 255, 255, 0.6);\\n cursor: pointer;\\n transition: var(--bifa-transition);\\n border: 2px solid transparent;\\n backdrop-filter: blur(10px);\\n}\\n\\n.bifa-dot.active {\\n background: var(--bifa-heritage-gold);\\n transform: scale(1.3);\\n border-color: rgba(255, 255, 255, 0.8);\\n box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);\\n}\\n\\n.bifa-dot:hover {\\n background: rgba(255, 255, 255, 0.9);\\n transform: scale(1.1);\\n}\\n\\n\\\/* ========= PLAY\\\/PAUSE CONTROL - Premium Style ========= *\\\/\\n.bifa-gallery-controls {\\n position: absolute;\\n top: 25px;\\n right: 25px;\\n z-index: 20;\\n}\\n\\n.bifa-play-pause-btn {\\n background: rgba(255, 255, 255, 0.95);\\n backdrop-filter: blur(15px);\\n border: 2px solid rgba(212, 175, 55, 0.3);\\n width: 55px;\\n height: 55px;\\n border-radius: 50%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n cursor: pointer;\\n transition: var(--bifa-transition);\\n box-shadow: 0 8px 25px rgba(10, 31, 68, 0.15);\\n outline: none;\\n}\\n\\n.bifa-play-pause-btn:hover {\\n background: var(--bifa-heritage-gold);\\n border-color: var(--bifa-heritage-gold);\\n transform: scale(1.1);\\n box-shadow: var(--bifa-shadow-gold);\\n}\\n\\n.bifa-play-pause-btn::before {\\n content: '';\\n width: 0;\\n height: 0;\\n border-left: 16px solid var(--bifa-deep-navy);\\n border-top: 12px solid transparent;\\n border-bottom: 12px solid transparent;\\n margin-left: 3px;\\n transition: all 0.3s ease;\\n}\\n\\n.bifa-play-pause-btn:hover::before {\\n border-left-color: var(--bifa-bright-white);\\n}\\n\\n.bifa-play-pause-btn.playing::before {\\n width: 22px;\\n height: 22px;\\n border: none;\\n background: linear-gradient(to right, \\n var(--bifa-deep-navy) 35%, \\n transparent 35%, \\n transparent 65%, \\n var(--bifa-deep-navy) 65%\\n );\\n margin-left: 0;\\n}\\n\\n.bifa-play-pause-btn.playing:hover::before {\\n background: linear-gradient(to right, \\n var(--bifa-bright-white) 35%, \\n transparent 35%, \\n transparent 65%, \\n var(--bifa-bright-white) 65%\\n );\\n}\\n\\n\\\/* ========= THUMBNAILS - Premium Grid ========= *\\\/\\n.bifa-gallery-thumbs {\\n display: grid;\\n grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\\n gap: 20px;\\n margin-top: 40px;\\n animation: fadeInUp 1.2s ease 0.7s forwards;\\n opacity: 0;\\n}\\n\\n.bifa-thumb-item {\\n position: relative;\\n height: 140px;\\n border-radius: 20px;\\n overflow: hidden;\\n cursor: pointer;\\n transition: var(--bifa-transition);\\n box-shadow: 0 8px 25px rgba(10, 31, 68, 0.1);\\n background: white;\\n border: 3px solid transparent;\\n}\\n\\n.bifa-thumb-item:hover {\\n transform: translateY(-8px);\\n box-shadow: 0 15px 40px rgba(10, 31, 68, 0.2);\\n border-color: rgba(212, 175, 55, 0.3);\\n}\\n\\n.bifa-thumb-item.active {\\n border-color: var(--bifa-heritage-gold);\\n box-shadow: var(--bifa-shadow-gold);\\n transform: translateY(-5px);\\n}\\n\\n.bifa-thumb-item img {\\n width: 100%;\\n height: 100%;\\n object-fit: cover;\\n transition: transform 0.3s ease;\\n}\\n\\n.bifa-thumb-item:hover img {\\n transform: scale(1.1);\\n}\\n\\n\\\/* Overlay effect for thumbnails *\\\/\\n.bifa-thumb-item::before {\\n content: '';\\n position: absolute;\\n inset: 0;\\n background: linear-gradient(135deg, \\n transparent 0%, \\n rgba(212, 175, 55, 0.1) 100%\\n );\\n opacity: 0;\\n transition: opacity 0.3s ease;\\n z-index: 1;\\n}\\n\\n.bifa-thumb-item:hover::before {\\n opacity: 1;\\n}\\n\\n.bifa-thumb-item.active::before {\\n background: linear-gradient(135deg, \\n rgba(212, 175, 55, 0.2) 0%, \\n rgba(212, 175, 55, 0.05) 100%\\n );\\n opacity: 1;\\n}\\n\\n\\\/* ========= ANIMATIONS ========= *\\\/\\n@keyframes fadeInDown {\\n from {\\n opacity: 0;\\n transform: translateY(-40px);\\n }\\n to {\\n opacity: 1;\\n transform: translateY(0);\\n }\\n}\\n\\n@keyframes fadeInUp {\\n from {\\n opacity: 0;\\n transform: translateY(40px);\\n }\\n to {\\n opacity: 1;\\n transform: translateY(0);\\n }\\n}\\n\\n\\\/* ========= RESPONSIVE ========= *\\\/\\n@media (max-width: 1024px) {\\n .bifa-gallery-thumbs {\\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\\n gap: 15px;\\n }\\n \\n .bifa-thumb-item {\\n height: 120px;\\n }\\n}\\n\\n@media (max-width: 768px) {\\n .bifa-gallery-section {\\n padding: 50px 0 60px 0;\\n }\\n \\n .bifa-gallery-container {\\n padding: 0 15px;\\n }\\n \\n .bifa-gallery-slider {\\n height: 400px;\\n }\\n \\n .bifa-slide-caption {\\n padding: 30px 25px;\\n }\\n \\n .bifa-slide-title {\\n font-size: 1.5rem;\\n }\\n \\n .bifa-gallery-nav {\\n width: 45px;\\n height: 45px;\\n }\\n \\n .bifa-play-pause-btn {\\n width: 45px;\\n height: 45px;\\n }\\n \\n .bifa-gallery-thumbs {\\n grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\\n gap: 12px;\\n margin-top: 30px;\\n }\\n \\n .bifa-thumb-item {\\n height: 100px;\\n }\\n}\\n\\n@media (max-width: 480px) {\\n .bifa-gallery-section {\\n padding: 40px 0 50px 0;\\n }\\n \\n .bifa-gallery-slider {\\n height: 300px;\\n }\\n \\n .bifa-gallery-section-title {\\n font-size: 2rem;\\n }\\n \\n .bifa-gallery-section-subtitle {\\n font-size: 1.1rem;\\n letter-spacing: 1px;\\n }\\n \\n .bifa-gallery-nav {\\n display: none; \\\/* \\u0421\\u043a\\u0440\\u044b\\u0432\\u0430\\u0435\\u043c \\u0441\\u0442\\u0440\\u0435\\u043b\\u043a\\u0438 \\u043d\\u0430 \\u043e\\u0447\\u0435\\u043d\\u044c \\u043c\\u0430\\u043b\\u0435\\u043d\\u044c\\u043a\\u0438\\u0445 \\u044d\\u043a\\u0440\\u0430\\u043d\\u0430\\u0445 *\\\/\\n }\\n \\n .bifa-slide-caption {\\n padding: 25px 20px;\\n }\\n \\n .bifa-slide-title {\\n font-size: 1.3rem;\\n }\\n \\n .bifa-slide-desc {\\n font-size: 1rem;\\n }\\n \\n .bifa-gallery-thumbs {\\n grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));\\n gap: 10px;\\n }\\n \\n .bifa-thumb-item {\\n height: 80px;\\n }\\n}\\n<\\\/style>\\n<\\\/head>\\n<body>\\n\\n<\/p>\n<div class=\"\\\"bifa-gallery-section-wrapper\\\"\">\\n \\n <\/p>\n<section class=\"\\\"bifa-gallery-section\\\"\">\\n \\n <\/p>\n<div class=\"\\\"bifa-gallery-bg-animation\\\"\">\\n \\n <\/p>\n<div class=\"\\\"bifa-floating-shape\" bifa-shape-gallery-1\\\"><\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-floating-shape\" bifa-shape-gallery-2\\\"><\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-floating-shape\" bifa-shape-gallery-3\\\"><\\\/div>\\n \\n <\\\/div>\\n\\n <\/p>\n<div class=\"\\\"bifa-gallery-container\\\"\">\\n \\n <\/p>\n<div class=\"\\\"bifa-gallery-section-header\\\"\">\\n <\/p>\n<h2 class=\"\\\"bifa-gallery-section-title\\\"\">BIFA+ Gallery<\\\/h2>\\n <\/p>\n<p class=\"\\\"bifa-gallery-section-subtitle\\\"\">Captivating Moments<\\\/p>\\n <\/p>\n<p class=\"\\\"bifa-gallery-section-description\\\"\">\\n Discover the most inspiring moments from BIFA+ events and activities that showcase the power of football in uniting nations and building communities.\\n <\\\/p>\\n <\\\/div>\\n\\n \\n <\/p>\n<div class=\"\\\"bifa-gallery-main\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-gallery-slider\\\"\">\\n \\n <\/p>\n<div class=\"\\\"bifa-slide\" active\\\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Moments\\\/1.jpg?v=2\\\"\" alt=\"\\\"BIFA+\" victory moment\\\">\\n <\/p>\n<div class=\"\\\"bifa-slide-caption\\\"\">\\n <\/p>\n<h3 class=\"\\\"bifa-slide-title\\\"\">Victory Celebration<\\\/h3>\\n <\/p>\n<p class=\"\\\"bifa-slide-desc\\\"\">Team emotions and unity after achieving remarkable success on the international stage<\\\/p>\\n <\\\/div>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"bifa-slide\\\"\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Moments\\\/2.jpg?v=2\\\"\" alt=\"\\\"BIFA+\" team spirit\\\">\\n <\/p>\n<div class=\"\\\"bifa-slide-caption\\\"\">\\n <\/p>\n<h3 class=\"\\\"bifa-slide-title\\\"\">Team Spirit<\\\/h3>\\n <\/p>\n<p class=\"\\\"bifa-slide-desc\\\"\">Showcasing the incredible bond and unity that defines BIFA+ community<\\\/p>\\n <\\\/div>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"bifa-slide\\\"\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Moments\\\/3.jpg?v=2\\\"\" alt=\"\\\"BIFA+\" young talents\\\">\\n <\/p>\n<div class=\"\\\"bifa-slide-caption\\\"\">\\n <\/p>\n<h3 class=\"\\\"bifa-slide-title\\\"\">Future Champions<\\\/h3>\\n <\/p>\n<p class=\"\\\"bifa-slide-desc\\\"\">Nurturing the next generation of football talents at BIFA+ Academy programs<\\\/p>\\n <\\\/div>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"bifa-slide\\\"\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Moments\\\/4.jpg?v=2\\\"\" alt=\"\\\"BIFA+\" stadium\\\">\\n <\/p>\n<div class=\"\\\"bifa-slide-caption\\\"\">\\n <\/p>\n<h3 class=\"\\\"bifa-slide-title\\\"\">World-Class Venues<\\\/h3>\\n <\/p>\n<p class=\"\\\"bifa-slide-desc\\\"\">Modern stadiums and facilities that host unforgettable football experiences<\\\/p>\\n <\\\/div>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"bifa-gallery-nav\" prev\\\"><\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-gallery-nav\" next\\\"><\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"bifa-gallery-dots\\\"\">\\n <span class=\"\\\"bifa-dot\" active\\\" data-slide=\"\\\"0\\\"\"><\\\/span>\\n <span class=\"\\\"bifa-dot\\\"\" data-slide=\"\\\"1\\\"\"><\\\/span>\\n <span class=\"\\\"bifa-dot\\\"\" data-slide=\"\\\"2\\\"\"><\\\/span>\\n <span class=\"\\\"bifa-dot\\\"\" data-slide=\"\\\"3\\\"\"><\\\/span>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"bifa-gallery-controls\\\"\">\\n <button class=\"\\\"bifa-play-pause-btn\" playing\\\" aria-label=\"\\\"Play\\\/Pause\" gallery\\\"><\\\/button>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"bifa-gallery-thumbs\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-thumb-item\" active\\\" data-slide=\"\\\"0\\\"\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Moments\\\/1.jpg?v=2\\\"\" alt=\"\\\"Victory\" thumbnail\\\">\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-thumb-item\\\"\" data-slide=\"\\\"1\\\"\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Moments\\\/2.jpg?v=2\\\"\" alt=\"\\\"Team\" spirit thumbnail\\\">\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-thumb-item\\\"\" data-slide=\"\\\"2\\\"\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Moments\\\/3.jpg?v=2\\\"\" alt=\"\\\"Young\" talents thumbnail\\\">\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-thumb-item\\\"\" data-slide=\"\\\"3\\\"\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Moments\\\/4.jpg?v=2\\\"\" alt=\"\\\"Stadium\" thumbnail\\\">\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/section>\\n<\\\/div>\\n\\n<script>\\n\\\/\\\/ BIFA+ Premium Gallery Module\\nconst BifaGallery = {\\n \\\/\\\/ Configuration\\n config: {\\n currentSlide: 0,\\n isPlaying: true,\\n slideInterval: null,\\n autoplayDelay: 5000\\n },\\n\\n \\\/\\\/ Initialize\\n init() {\\n this.createParticles();\\n this.setupEventListeners();\\n this.startSlideshow();\\n this.preloadImages();\\n },\\n\\n \\\/\\\/ Create golden particles\\n createParticles() {\\n const particlesContainer = document.querySelector('.bifa-gallery-bg-animation');\\n const particleCount = 8; \\\/\\\/ \\u041c\\u0435\\u043d\\u044c\\u0448\\u0435 \\u0447\\u0430\\u0441\\u0442\\u0438\\u0446 \\u0434\\u043b\\u044f \\u0431\\u043e\\u043b\\u0435\\u0435 \\u0447\\u0438\\u0441\\u0442\\u043e\\u0433\\u043e \\u0432\\u0438\\u0434\\u0430\\n\\n for (let i = 0; i < particleCount; i++) {\\n const particle = document.createElement('div');\\n particle.className = 'bifa-gallery-particle';\\n particle.style.left = Math.random() * 100 + '%';\\n particle.style.animationDelay = Math.random() * 16 + 's';\\n particle.style.animationDuration = (14 + Math.random() * 6) + 's';\\n \\n const size = 4 + Math.random() * 2;\\n particle.style.width = size + 'px';\\n particle.style.height = size + 'px';\\n \\n particlesContainer.appendChild(particle);\\n }\\n },\\n\\n \\\/\\\/ Setup event listeners\\n setupEventListeners() {\\n const slides = document.querySelectorAll('.bifa-slide');\\n const dots = document.querySelectorAll('.bifa-dot');\\n const thumbs = document.querySelectorAll('.bifa-thumb-item');\\n const prevBtn = document.querySelector('.bifa-gallery-nav.prev');\\n const nextBtn = document.querySelector('.bifa-gallery-nav.next');\\n const playPauseBtn = document.querySelector('.bifa-play-pause-btn');\\n const gallerySlider = document.querySelector('.bifa-gallery-slider');\\n\\n \\\/\\\/ Navigation buttons\\n if (prevBtn) {\\n prevBtn.addEventListener('click', () => {\\n this.prevSlide();\\n this.restartAutoplay();\\n });\\n }\\n\\n if (nextBtn) {\\n nextBtn.addEventListener('click', () => {\\n this.nextSlide();\\n this.restartAutoplay();\\n });\\n }\\n\\n \\\/\\\/ Play\\\/Pause button\\n if (playPauseBtn) {\\n playPauseBtn.addEventListener('click', () => {\\n this.togglePlayPause();\\n });\\n }\\n\\n \\\/\\\/ Dot navigation\\n dots.forEach((dot, index) => {\\n dot.addEventListener('click', () => {\\n this.showSlide(index);\\n this.restartAutoplay();\\n });\\n });\\n\\n \\\/\\\/ Thumbnail navigation\\n thumbs.forEach((thumb, index) => {\\n thumb.addEventListener('click', () => {\\n this.showSlide(index);\\n this.restartAutoplay();\\n });\\n });\\n\\n \\\/\\\/ Pause on hover\\n if (gallerySlider) {\\n gallerySlider.addEventListener('mouseenter', () => {\\n if (this.config.isPlaying) this.stopSlideshow();\\n });\\n\\n gallerySlider.addEventListener('mouseleave', () => {\\n if (!this.config.isPlaying) this.startSlideshow();\\n });\\n }\\n\\n \\\/\\\/ Touch support\\n this.setupTouchNavigation(gallerySlider);\\n\\n \\\/\\\/ Keyboard support\\n this.setupKeyboardNavigation();\\n },\\n\\n \\\/\\\/ Show specific slide\\n showSlide(index) {\\n const slides = document.querySelectorAll('.bifa-slide');\\n const dots = document.querySelectorAll('.bifa-dot');\\n const thumbs = document.querySelectorAll('.bifa-thumb-item');\\n\\n \\\/\\\/ Remove active classes\\n slides.forEach(slide => slide.classList.remove('active'));\\n dots.forEach(dot => dot.classList.remove('active'));\\n thumbs.forEach(thumb => thumb.classList.remove('active'));\\n\\n \\\/\\\/ Add active classes\\n if (slides[index]) slides[index].classList.add('active');\\n if (dots[index]) dots[index].classList.add('active');\\n if (thumbs[index]) thumbs[index].classList.add('active');\\n\\n this.config.currentSlide = index;\\n },\\n\\n \\\/\\\/ Next slide\\n nextSlide() {\\n const slides = document.querySelectorAll('.bifa-slide');\\n const nextIndex = (this.config.currentSlide + 1) % slides.length;\\n this.showSlide(nextIndex);\\n },\\n\\n \\\/\\\/ Previous slide\\n prevSlide() {\\n const slides = document.querySelectorAll('.bifa-slide');\\n const prevIndex = (this.config.currentSlide - 1 + slides.length) % slides.length;\\n this.showSlide(prevIndex);\\n },\\n\\n \\\/\\\/ Start slideshow\\n startSlideshow() {\\n this.config.slideInterval = setInterval(() => {\\n this.nextSlide();\\n }, this.config.autoplayDelay);\\n this.config.isPlaying = true;\\n \\n const playPauseBtn = document.querySelector('.bifa-play-pause-btn');\\n if (playPauseBtn) playPauseBtn.classList.add('playing');\\n },\\n\\n \\\/\\\/ Stop slideshow\\n stopSlideshow() {\\n if (this.config.slideInterval) {\\n clearInterval(this.config.slideInterval);\\n this.config.slideInterval = null;\\n }\\n this.config.isPlaying = false;\\n \\n const playPauseBtn = document.querySelector('.bifa-play-pause-btn');\\n if (playPauseBtn) playPauseBtn.classList.remove('playing');\\n },\\n\\n \\\/\\\/ Toggle play\\\/pause\\n togglePlayPause() {\\n if (this.config.isPlaying) {\\n this.stopSlideshow();\\n } else {\\n this.startSlideshow();\\n }\\n },\\n\\n \\\/\\\/ Restart autoplay\\n restartAutoplay() {\\n if (this.config.isPlaying) {\\n this.stopSlideshow();\\n this.startSlideshow();\\n }\\n },\\n\\n \\\/\\\/ Setup touch navigation\\n setupTouchNavigation(element) {\\n if (!element) return;\\n\\n let touchStartX = 0;\\n let touchEndX = 0;\\n\\n element.addEventListener('touchstart', (e) => {\\n touchStartX = e.changedTouches[0].screenX;\\n });\\n\\n element.addEventListener('touchend', (e) => {\\n touchEndX = e.changedTouches[0].screenX;\\n this.handleSwipe();\\n });\\n\\n this.handleSwipe = () => {\\n if (touchEndX < touchStartX - 50) {\\n \\\/\\\/ Swipe left - next slide\\n this.nextSlide();\\n this.restartAutoplay();\\n }\\n if (touchEndX > touchStartX + 50) {\\n \\\/\\\/ Swipe right - previous slide\\n this.prevSlide();\\n this.restartAutoplay();\\n }\\n };\\n },\\n\\n \\\/\\\/ Setup keyboard navigation\\n setupKeyboardNavigation() {\\n document.addEventListener('keydown', (e) => {\\n if (e.key === 'ArrowLeft') {\\n this.prevSlide();\\n this.restartAutoplay();\\n } else if (e.key === 'ArrowRight') {\\n this.nextSlide();\\n this.restartAutoplay();\\n } else if (e.key === ' ') {\\n e.preventDefault();\\n this.togglePlayPause();\\n }\\n });\\n },\\n\\n \\\/\\\/ Preload images\\n preloadImages() {\\n const imageUrls = [\\n '\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Moments\\\/1.jpg?v=2',\\n '\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Moments\\\/2.jpg?v=2',\\n '\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Moments\\\/3.jpg?v=2',\\n '\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Moments\\\/4.jpg?v=2'\\n ];\\n\\n imageUrls.forEach(url => {\\n const img = new Image();\\n img.src = url;\\n });\\n }\\n};\\n\\n\\\/\\\/ Initialize when DOM is ready\\ndocument.addEventListener('DOMContentLoaded', () => {\\n BifaGallery.init();\\n});\\n<\\\/script>\\n\\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+ Premium Academy Block<\\\/title>\\n <link rel=\"\\\"preconnect\\\"\" href=\"\\\"https:\\\/\\\/fonts.googleapis.com\\\"\">\\n <link rel=\"\\\"preconnect\\\"\" href=\"\\\"https:\\\/\\\/fonts.gstatic.com\\\"\" crossorigin>\\n \\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&family=Cairo:wght@300;400;500;600;700;800&family=Tajawal:wght@300;400;500;700;800&display=swap\\\"\" rel=\"\\\"stylesheet\\\"\">\\n\\n<\/p>\n<style>\\n\\\/* ========= \\u0413\\u041b\\u041e\\u0411\\u0410\\u041b\\u042c\\u041d\\u042b\\u0415 \\u041f\\u0415\\u0420\\u0415\\u041c\\u0415\\u041d\\u041d\\u042b\\u0415 BIFA+ ========= *\\\/\\n:root {\\n \\\/* \\u041e\\u0444\\u0438\\u0446\\u0438\\u0430\\u043b\\u044c\\u043d\\u044b\\u0435 \\u0446\\u0432\\u0435\\u0442\\u0430 BIFA+ *\\\/\\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 --bifa-gray-light: #F8F9FA;\\n --bifa-gray: #6C757D;\\n \\n \\\/* \\u041e\\u0444\\u0438\\u0446\\u0438\\u0430\\u043b\\u044c\\u043d\\u044b\\u0435 \\u0448\\u0440\\u0438\\u0444\\u0442\\u044b BIFA+ *\\\/\\n --bifa-font-heading: 'Montserrat', 'Cairo', sans-serif;\\n --bifa-font-body: 'Poppins', 'Tajawal', sans-serif;\\n --bifa-font-arabic: 'Cairo', 'Tajawal', 'GE SS Text', sans-serif;\\n \\n \\\/* \\u041f\\u0440\\u0435\\u043c\\u0438\\u0430\\u043b\\u044c\\u043d\\u044b\\u0435 \\u0442\\u0435\\u043d\\u0438 \\u0438 \\u044d\\u0444\\u0444\\u0435\\u043a\\u0442\\u044b *\\\/\\n --bifa-shadow-premium: 0 25px 80px rgba(10, 31, 68, 0.15);\\n --bifa-shadow-hover: 0 35px 100px rgba(10, 31, 68, 0.2);\\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\\n\\\/* ========= RESET ========= *\\\/\\n* {\\n margin: 0;\\n padding: 0;\\n box-sizing: border-box;\\n}\\n\\n*, *::before, *::after {\\n box-sizing: border-box;\\n}\\n\\nhtml {\\n scroll-behavior: smooth;\\n}\\n\\nbody {\\n font-family: var(--bifa-font-body);\\n overflow-x: hidden;\\n background: var(--bifa-bright-white);\\n text-rendering: optimizeLegibility;\\n -webkit-font-smoothing: antialiased;\\n -moz-osx-font-smoothing: grayscale;\\n color: var(--bifa-soft-black);\\n}\\n\\n\\\/* ========= ACADEMY SECTION WRAPPER ========= *\\\/\\n.bifa-academy-section-wrapper {\\n width: 100vw;\\n position: relative;\\n left: 50%;\\n margin-left: -50vw;\\n background: transparent; \\\/* \\u0411\\u0435\\u0437 \\u0444\\u043e\\u043d\\u0430 *\\\/\\n overflow: hidden;\\n}\\n\\n\\\/* ========= MAIN ACADEMY SECTION ========= *\\\/\\n.bifa-academy-section {\\n padding: 100px 20px 80px;\\n position: relative;\\n background: transparent;\\n}\\n\\n\\\/* ========= ANIMATED BACKGROUND ELEMENTS ========= *\\\/\\n.bifa-academy-bg-animation {\\n position: absolute;\\n width: 100%;\\n height: 100%;\\n overflow: hidden;\\n z-index: 1;\\n top: 0;\\n left: 0;\\n}\\n\\n\\\/* \\u0417\\u043e\\u043b\\u043e\\u0442\\u044b\\u0435 \\u0447\\u0430\\u0441\\u0442\\u0438\\u0446\\u044b BIFA+ *\\\/\\n.bifa-academy-particle {\\n position: absolute;\\n width: 3px;\\n height: 3px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n border-radius: 50%;\\n animation: floatAcademy 20s infinite linear;\\n box-shadow: 0 0 6px rgba(212, 175, 55, 0.2);\\n opacity: 0.25;\\n will-change: transform;\\n}\\n\\n@keyframes floatAcademy {\\n 0% {\\n transform: translateY(100vh) translateX(0) rotate(0deg);\\n opacity: 0;\\n }\\n 10% { opacity: 0.3; }\\n 90% { opacity: 0.3; }\\n 100% {\\n transform: translateY(-100vh) translateX(70px) rotate(360deg);\\n opacity: 0;\\n }\\n}\\n\\n\\\/* \\u041f\\u043b\\u0430\\u0432\\u0430\\u044e\\u0449\\u0438\\u0435 \\u0433\\u0435\\u043e\\u043c\\u0435\\u0442\\u0440\\u0438\\u0447\\u0435\\u0441\\u043a\\u0438\\u0435 \\u0444\\u0438\\u0433\\u0443\\u0440\\u044b BIFA+ *\\\/\\n.bifa-floating-shape {\\n position: absolute;\\n border-radius: 50%;\\n filter: blur(120px);\\n animation: morphFloatAcademy 25s ease-in-out infinite;\\n pointer-events: none;\\n opacity: 0.4;\\n}\\n\\n.bifa-shape-academy-1 {\\n width: 400px;\\n height: 400px;\\n background: radial-gradient(circle at 30% 30%, rgba(212, 175, 55, 0.07), transparent);\\n top: -200px;\\n right: -200px;\\n}\\n\\n.bifa-shape-academy-2 {\\n width: 350px;\\n height: 350px;\\n background: radial-gradient(circle at 70% 70%, rgba(10, 31, 68, 0.05), transparent);\\n bottom: -175px;\\n left: -175px;\\n animation-delay: 8s;\\n}\\n\\n.bifa-shape-academy-3 {\\n width: 300px;\\n height: 300px;\\n background: radial-gradient(circle at 50% 50%, rgba(29, 97, 67, 0.06), transparent);\\n top: 40%;\\n left: 60%;\\n animation-delay: 16s;\\n}\\n\\n@keyframes morphFloatAcademy {\\n 0%, 100% { \\n transform: translate(0, 0) scale(1) rotate(0deg);\\n filter: blur(120px);\\n }\\n 25% { \\n transform: translate(100px, -80px) scale(1.2) rotate(90deg);\\n filter: blur(140px);\\n }\\n 50% { \\n transform: translate(-80px, 100px) scale(0.8) rotate(180deg);\\n filter: blur(100px);\\n }\\n 75% { \\n transform: translate(-100px, -60px) scale(1.1) rotate(270deg);\\n filter: blur(130px);\\n }\\n}\\n\\n\\\/* ========= CONTAINER ========= *\\\/\\n.bifa-academy-container {\\n max-width: 1200px;\\n margin: 0 auto;\\n position: relative;\\n z-index: 10;\\n}\\n\\n\\\/* ========= SECTION TITLE - Premium Style ========= *\\\/\\n.bifa-section-title-wrapper {\\n text-align: center;\\n margin-bottom: 80px;\\n}\\n\\n.bifa-academy-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), #ffd700);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n position: relative;\\n animation: fadeInUp 1s ease-out 0.3s both;\\n line-height: 1.2;\\n margin-bottom: 20px;\\n text-transform: uppercase;\\n letter-spacing: -0.5px;\\n}\\n\\n.bifa-academy-section-title::after {\\n content: '';\\n position: absolute;\\n bottom: -15px;\\n left: 50%;\\n transform: translateX(-50%);\\n width: 0;\\n height: 4px;\\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700);\\n animation: expandWidth 0.8s ease-out 1s both;\\n border-radius: 2px;\\n}\\n\\n\\\/* ========= VIDEO CONTAINER - Premium Style ========= *\\\/\\n.bifa-academy-video {\\n margin-bottom: 60px;\\n animation: fadeInUp 1s ease-out 0.5s both;\\n}\\n\\n.bifa-video-wrapper {\\n position: relative;\\n width: 100%;\\n max-width: 900px;\\n margin: 0 auto;\\n padding-bottom: 50%;\\n border-radius: 25px;\\n overflow: hidden;\\n box-shadow: var(--bifa-shadow-premium);\\n background: var(--bifa-gray-light);\\n transform: scale(0.95);\\n animation: scaleIn 0.8s ease-out 0.5s forwards;\\n border: 2px solid rgba(212, 175, 55, 0.1);\\n}\\n\\n.bifa-video-wrapper video {\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n object-fit: cover;\\n transition: transform 0.3s ease;\\n}\\n\\n.bifa-video-wrapper:hover video {\\n transform: scale(1.02);\\n}\\n\\n\\\/* Video overlay effects *\\\/\\n.bifa-video-wrapper::before {\\n content: '';\\n position: absolute;\\n inset: 0;\\n background: linear-gradient(135deg, \\n transparent 0%, \\n rgba(212, 175, 55, 0.1) 100%\\n );\\n opacity: 0;\\n transition: opacity 0.3s ease;\\n z-index: 1;\\n pointer-events: none;\\n}\\n\\n.bifa-video-wrapper:hover::before {\\n opacity: 1;\\n}\\n\\n\\\/* ========= CONTENT CARD - Premium Style ========= *\\\/\\n.bifa-academy-content {\\n background: var(--bifa-bright-white);\\n border-radius: 25px;\\n padding: 60px 50px;\\n box-shadow: var(--bifa-shadow-premium);\\n animation: fadeInUp 1s ease-out 0.8s both;\\n max-width: 100%;\\n overflow: hidden;\\n border: 1px solid rgba(212, 175, 55, 0.1);\\n backdrop-filter: blur(10px);\\n}\\n\\n.bifa-content-grid {\\n display: grid;\\n grid-template-columns: repeat(2, 1fr);\\n gap: 60px;\\n margin-bottom: 50px;\\n}\\n\\n.bifa-content-block {\\n opacity: 0;\\n animation: fadeInUp 0.8s ease-out forwards;\\n}\\n\\n.bifa-content-block:nth-child(1) {\\n animation-delay: 1s;\\n}\\n\\n.bifa-content-block:nth-child(2) {\\n animation-delay: 1.2s;\\n}\\n\\n.bifa-content-block h3 {\\n font-family: var(--bifa-font-heading);\\n font-size: 1.8rem;\\n font-weight: 800;\\n color: var(--bifa-deep-navy);\\n margin-bottom: 25px;\\n position: relative;\\n padding-left: 30px;\\n line-height: 1.3;\\n text-rendering: optimizeLegibility;\\n}\\n\\n.bifa-content-block h3::before {\\n content: '';\\n position: absolute;\\n left: 0;\\n top: 50%;\\n transform: translateY(-50%);\\n width: 5px;\\n height: 100%;\\n max-height: 40px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n border-radius: 3px;\\n box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);\\n}\\n\\n.bifa-content-block p {\\n font-family: var(--bifa-font-body);\\n font-size: 1.1rem;\\n line-height: 1.8;\\n color: #4a5568;\\n margin-bottom: 25px;\\n text-align: left;\\n max-width: 100%;\\n}\\n\\n\\\/* ========= FEATURES LIST - Premium Style ========= *\\\/\\n.bifa-features-list {\\n list-style: none;\\n margin-top: 30px;\\n display: flex;\\n flex-direction: column;\\n gap: 20px;\\n padding: 0;\\n}\\n\\n.bifa-features-list li {\\n display: flex;\\n align-items: flex-start;\\n font-family: var(--bifa-font-body);\\n font-size: 1.05rem;\\n color: var(--bifa-soft-black);\\n line-height: 1.6;\\n transition: var(--bifa-transition);\\n opacity: 0;\\n animation: slideIn 0.5s ease-out forwards;\\n padding: 15px;\\n background: rgba(248, 249, 250, 0.5);\\n border-radius: 15px;\\n border: 1px solid rgba(212, 175, 55, 0.1);\\n}\\n\\n.bifa-features-list li:nth-child(1) {\\n animation-delay: 1.2s;\\n}\\n\\n.bifa-features-list li:nth-child(2) {\\n animation-delay: 1.3s;\\n}\\n\\n.bifa-features-list li:nth-child(3) {\\n animation-delay: 1.4s;\\n}\\n\\n.bifa-content-block:nth-child(2) .bifa-features-list li:nth-child(1) {\\n animation-delay: 1.4s;\\n}\\n\\n.bifa-content-block:nth-child(2) .bifa-features-list li:nth-child(2) {\\n animation-delay: 1.5s;\\n}\\n\\n.bifa-content-block:nth-child(2) .bifa-features-list li:nth-child(3) {\\n animation-delay: 1.6s;\\n}\\n\\n.bifa-features-list li:hover {\\n color: var(--bifa-deep-navy);\\n background: rgba(212, 175, 55, 0.1);\\n border-color: rgba(212, 175, 55, 0.3);\\n transform: translateX(5px);\\n}\\n\\n.bifa-feature-icon {\\n flex-shrink: 0;\\n width: 45px;\\n height: 45px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n border-radius: 15px;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n margin-right: 18px;\\n transition: var(--bifa-transition);\\n box-shadow: var(--bifa-shadow-gold);\\n}\\n\\n.bifa-feature-icon svg {\\n width: 24px;\\n height: 24px;\\n fill: var(--bifa-deep-navy);\\n stroke: var(--bifa-deep-navy);\\n stroke-width: 1.5;\\n}\\n\\n.bifa-features-list li:hover .bifa-feature-icon {\\n transform: scale(1.1) rotate(5deg);\\n box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);\\n}\\n\\n.bifa-feature-text {\\n flex: 1;\\n padding-top: 10px;\\n font-weight: 500;\\n}\\n\\n\\\/* ========= CALL TO ACTION - Premium Style ========= *\\\/\\n.bifa-academy-cta {\\n background: linear-gradient(135deg, var(--bifa-deep-navy), #162e5a);\\n color: var(--bifa-bright-white);\\n padding: 50px 40px;\\n border-radius: 25px;\\n text-align: center;\\n margin-top: 50px;\\n box-shadow: var(--bifa-shadow-premium);\\n animation: fadeInUp 1s ease-out 1.4s both;\\n position: relative;\\n overflow: hidden;\\n border: 2px solid rgba(212, 175, 55, 0.2);\\n}\\n\\n.bifa-academy-cta::before {\\n content: '';\\n position: absolute;\\n top: -50%;\\n right: -50%;\\n width: 100%;\\n height: 100%;\\n background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 60%);\\n animation: float 8s ease-in-out infinite;\\n}\\n\\n.bifa-cta-title {\\n font-family: var(--bifa-font-heading);\\n font-size: 2rem;\\n font-weight: 800;\\n margin-bottom: 20px;\\n line-height: 1.3;\\n position: relative;\\n z-index: 1;\\n background: linear-gradient(135deg, var(--bifa-bright-white), #f0f0f0);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n}\\n\\n.bifa-cta-text {\\n font-family: var(--bifa-font-body);\\n font-size: 1.2rem;\\n line-height: 1.6;\\n max-width: 800px;\\n margin: 0 auto 35px;\\n position: relative;\\n z-index: 1;\\n color: rgba(255, 255, 255, 0.9);\\n}\\n\\n.bifa-cta-button {\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n gap: 12px;\\n padding: 18px 45px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n color: var(--bifa-deep-navy);\\n text-decoration: none;\\n border-radius: 50px;\\n font-family: var(--bifa-font-heading);\\n font-weight: 700;\\n font-size: 1.1rem;\\n transition: var(--bifa-transition);\\n box-shadow: var(--bifa-shadow-gold);\\n position: relative;\\n overflow: hidden;\\n z-index: 1;\\n text-transform: uppercase;\\n letter-spacing: 0.5px;\\n}\\n\\n.bifa-cta-button::before {\\n content: '';\\n position: absolute;\\n top: 0;\\n left: -100%;\\n width: 100%;\\n height: 100%;\\n background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);\\n transition: left 0.5s ease;\\n z-index: -1;\\n}\\n\\n.bifa-cta-button:hover {\\n transform: translateY(-3px);\\n box-shadow: 0 8px 30px rgba(212, 175, 55, 0.4);\\n background: linear-gradient(135deg, #ffd700, var(--bifa-heritage-gold));\\n}\\n\\n.bifa-cta-button:hover::before {\\n left: 100%;\\n}\\n\\n\\\/* ========= ANIMATIONS ========= *\\\/\\n@keyframes slideIn {\\n to {\\n opacity: 1;\\n }\\n}\\n\\n@keyframes fadeInUp {\\n from {\\n opacity: 0;\\n transform: translateY(30px);\\n }\\n to {\\n opacity: 1;\\n transform: translateY(0);\\n }\\n}\\n\\n@keyframes expandWidth {\\n from {\\n width: 0;\\n }\\n to {\\n width: 120px;\\n }\\n}\\n\\n@keyframes scaleIn {\\n to {\\n transform: scale(1);\\n }\\n}\\n\\n@keyframes float {\\n 0%, 100% {\\n transform: translate(0, 0);\\n }\\n 50% {\\n transform: translate(-20px, 20px);\\n }\\n}\\n\\n\\\/* ========= RESPONSIVE ========= *\\\/\\n@media (max-width: 968px) {\\n .bifa-content-grid {\\n grid-template-columns: 1fr;\\n gap: 50px;\\n }\\n \\n .bifa-video-wrapper {\\n padding-bottom: 56.25%;\\n }\\n \\n .bifa-content-block {\\n animation-delay: 1s !important;\\n }\\n \\n .bifa-features-list li {\\n animation-delay: 0s !important;\\n animation: slideIn 0.5s ease-out forwards;\\n }\\n}\\n\\n@media (max-width: 768px) {\\n .bifa-academy-section {\\n padding: 80px 20px 60px;\\n }\\n \\n .bifa-academy-content {\\n padding: 40px 30px;\\n }\\n \\n .bifa-content-block h3 {\\n font-size: 1.6rem;\\n padding-left: 25px;\\n }\\n \\n .bifa-academy-section-title {\\n font-size: 2rem;\\n }\\n \\n .bifa-feature-icon {\\n width: 40px;\\n height: 40px;\\n margin-right: 15px;\\n }\\n \\n .bifa-feature-icon svg {\\n width: 20px;\\n height: 20px;\\n }\\n \\n .bifa-content-grid {\\n gap: 40px;\\n }\\n \\n .bifa-academy-cta {\\n padding: 40px 30px;\\n }\\n \\n .bifa-cta-title {\\n font-size: 1.7rem;\\n }\\n \\n .bifa-cta-text {\\n font-size: 1.1rem;\\n }\\n}\\n\\n@media (max-width: 480px) {\\n .bifa-academy-section {\\n padding: 60px 15px 50px;\\n }\\n \\n .bifa-academy-content {\\n padding: 30px 20px;\\n }\\n \\n .bifa-academy-section-title {\\n font-size: 1.8rem;\\n }\\n \\n .bifa-content-block h3 {\\n font-size: 1.4rem;\\n padding-left: 20px;\\n }\\n \\n .bifa-content-block p {\\n font-size: 1rem;\\n }\\n \\n .bifa-cta-title {\\n font-size: 1.5rem;\\n }\\n \\n .bifa-cta-text {\\n font-size: 1rem;\\n }\\n \\n .bifa-cta-button {\\n padding: 15px 35px;\\n font-size: 1rem;\\n }\\n \\n .bifa-feature-icon {\\n width: 35px;\\n height: 35px;\\n margin-right: 12px;\\n }\\n \\n .bifa-feature-icon svg {\\n width: 18px;\\n height: 18px;\\n }\\n \\n .bifa-features-list li {\\n font-size: 0.95rem;\\n padding: 12px;\\n }\\n \\n .bifa-features-list {\\n gap: 15px;\\n }\\n \\n .bifa-academy-cta {\\n padding: 35px 25px;\\n }\\n}\\n<\\\/style>\\n<\\\/head>\\n<body>\\n\\n<\/p>\n<div class=\"\\\"bifa-academy-section-wrapper\\\"\">\\n \\n <\/p>\n<section class=\"\\\"bifa-academy-section\\\"\">\\n \\n <\/p>\n<div class=\"\\\"bifa-academy-bg-animation\\\"\">\\n \\n <\/p>\n<div class=\"\\\"bifa-floating-shape\" bifa-shape-academy-1\\\"><\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-floating-shape\" bifa-shape-academy-2\\\"><\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-floating-shape\" bifa-shape-academy-3\\\"><\\\/div>\\n \\n <\\\/div>\\n\\n <\/p>\n<div class=\"\\\"bifa-academy-container\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-section-title-wrapper\\\"\">\\n <\/p>\n<h2 class=\"\\\"bifa-academy-section-title\\\"\">BIFA+ Academy: Future of Football<\\\/h2>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"bifa-academy-video\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-video-wrapper\\\"\">\\n <video autoplay loop muted playsinline>\\n<source src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Futuristic_Classroom_Video_Ready.webm\\\"\" type=\"\\\"video\\\/webm\\\"\">\\n<source src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Futuristic_Classroom_Video_Ready.mp4\\\"\" type=\"\\\"video\\\/mp4\\\"\">\\n <\\\/video>\\n <\\\/div>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"bifa-academy-content\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-content-grid\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-content-block\\\"\">\\n <\/p>\n<h3>Revolutionary Training System<\\\/h3>\\n <\/p>\n<p>\\n BIFA+ creates a revolutionary system for training footballers, with the ability to analyze every aspect of the game \\n by both top-tier coaches and artificial intelligence. Our academy uses \\n machine learning to create individual development programs that take into account the unique characteristics of each player.\\n <\\\/p>\\n <\/p>\n<ul class=\"\\\"bifa-features-list\\\"\">\\n <\/p>\n<li>\\n <span class=\"\\\"bifa-feature-icon\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" xmlns=\"\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\"\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M21\" 10.12h-6.78l2.74-2.82c-2.73-2.7-7.15-2.8-9.88-.1-2.73 2.71-2.73 7.08 0 9.79 2.73 2.71 7.15 9.88 0c18.32 15.65 19 14.08 12.1h2c0 1.98-.88 4.55-2.64 6.29-3.51 3.48-9.21 3.48-12.72 0-3.5-3.47-3.53-9.11-.02-12.58 3.51-3.47 9.14-3.47 12.65 0l21 3v7.12z\\\"\\>\\n <circle cx=\"\\\"12\\\"\" cy=\"\\\"12\\\"\" r=\"\\\"3\\\"\\\/\">\\n <\\\/svg>\\n <\\\/span>\\n <span class=\"\\\"bifa-feature-text\\\"\">Intelligent analysis of game data<\\\/span>\\n <\\\/li>\\n\n<li>\\n <span class=\"\\\"bifa-feature-icon\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" xmlns=\"\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\"\" fill=\"\\\"none\\\"\">\\n <circle cx=\"\\\"12\\\"\" cy=\"\\\"12\\\"\" r=\"\\\"10\\\"\\\/\">\\n <circle cx=\"\\\"12\\\"\" cy=\"\\\"12\\\"\" r=\"\\\"3\\\"\\\/\">\\n <path d=\"\\\"M12\" 2v3m12 19v3m2 12h3m19 12h3\\\"\\>\\n <\\\/svg>\\n <\\\/span>\\n <span class=\"\\\"bifa-feature-text\\\"\">Adaptive training programs<\\\/span>\\n <\\\/li>\\n\n<li>\\n <span class=\"\\\"bifa-feature-icon\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" xmlns=\"\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\"\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M3.5\" 18.5l9 13l4 4l20.5 6\\\"\\>\\n <path d=\"\\\"M20.5\" 6h-5m20.5 6v5\\\"\\>\\n <\\\/svg>\\n <\\\/span>\\n <span class=\"\\\"bifa-feature-text\\\"\">Continuous progress monitoring<\\\/span>\\n <\\\/li>\\n <\\\/ul>\\n <\\\/div>\\n \\n\n<div class=\"\\\"bifa-content-block\\\"\">\\n <\/p>\n<h3>Smart Analytics for Coaches<\\\/h3>\\n <\/p>\n<p>\\n The artificial intelligence system processes training and match data in real-time, \\n providing coaches with detailed information about player progress, tactical patterns and areas for improvement. \\n Personalized dashboards help make decisions based on objective data.\\n <\\\/p>\\n <\/p>\n<ul class=\"\\\"bifa-features-list\\\"\">\\n <\/p>\n<li>\\n <span class=\"\\\"bifa-feature-icon\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" xmlns=\"\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\"\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M13\" 2l3 14h9l-1 8 10-12h-9l1-8z\\\"\\>\\n <\\\/svg>\\n <\\\/span>\\n <span class=\"\\\"bifa-feature-text\\\"\">Real-time performance analysis<\\\/span>\\n <\\\/li>\\n\n<li>\\n <span class=\"\\\"bifa-feature-icon\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" xmlns=\"\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\"\" fill=\"\\\"none\\\"\">\\n <circle cx=\"\\\"12\\\"\" cy=\"\\\"8\\\"\" r=\"\\\"5\\\"\\\/\">\\n <path d=\"\\\"M20\" 21a8 8 0 1 0-16 0\\\"\\>\\n <circle cx=\"\\\"8\\\"\" cy=\"\\\"19\\\"\" r=\"\\\"1\\\"\\\/\">\\n <circle cx=\"\\\"12\\\"\" cy=\"\\\"19\\\"\" r=\"\\\"1\\\"\\\/\">\\n <circle cx=\"\\\"16\\\"\" cy=\"\\\"19\\\"\" r=\"\\\"1\\\"\\\/\">\\n <\\\/svg>\\n <\\\/span>\\n <span class=\"\\\"bifa-feature-text\\\"\">Data-driven decision making<\\\/span>\\n <\\\/li>\\n\n<li>\\n <span class=\"\\\"bifa-feature-icon\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" xmlns=\"\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\"\" fill=\"\\\"none\\\"\">\\n <rect x=\"\\\"3\\\"\" y=\"\\\"3\\\"\" width=\"\\\"18\\\"\" height=\"\\\"14\\\"\" rx=\"\\\"2\\\"\\\/\">\\n <path d=\"\\\"M7\" 21h10m12 17v4\\\"\\>\\n <path d=\"\\\"M8\" 8h8m8 12h5\\\"\\>\\n <\\\/svg>\\n <\\\/span>\\n <span class=\"\\\"bifa-feature-text\\\"\">Personalized coaching dashboards<\\\/span>\\n <\\\/li>\\n <\\\/ul>\\n <\\\/div>\\n <\\\/div>\\n \\n \\n\n<div class=\"\\\"bifa-academy-cta\\\"\">\\n <\/p>\n<h3 class=\"\\\"bifa-cta-title\\\"\">Join the AI-Powered Football Revolution<\\\/h3>\\n <\/p>\n<p class=\"\\\"bifa-cta-text\\\"\">\\n Experience the future of football training with BIFA+. Our cutting-edge AI technology \\n combined with world-class coaching creates unprecedented opportunities for player development.\\n <\\\/p>\\n <a href=\"\\\"https:\\\/\\\/bifa.ai\\\/academy-ai\\\/\\\"\" class=\"\\\"bifa-cta-button\\\"\">\\n <span>Discover Academy<\\\/span>\\n <svg width=\"\\\"20\\\"\" height=\"\\\"20\\\"\" viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M5\" 12h19m19 12l12 5m19 19\\\" stroke =\"\\\"currentColor\\\"\" stroke-width=\"\\\"2.5\\\"\" stroke-linecap=\"\\\"round\\\"\" stroke-linejoin=\"\\\"round\\\"\\\/\">\\n <\\\/svg>\\n <\\\/a>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/section>\\n<\\\/div>\\n\\n<script>\\n\\\/\\\/ BIFA+ Premium Academy Module\\nconst BifaAcademy = {\\n \\\/\\\/ Configuration\\n config: {\\n particleCount: 10,\\n animationDelay: 100\\n },\\n\\n \\\/\\\/ Initialize\\n init() {\\n this.createParticles();\\n this.setupVideoOptimization();\\n this.setupIntersectionObserver();\\n },\\n\\n \\\/\\\/ Create golden particles\\n createParticles() {\\n const particlesContainer = document.querySelector('.bifa-academy-bg-animation');\\n if (!particlesContainer) return;\\n\\n for (let i = 0; i < this.config.particleCount; i++) {\\n const particle = document.createElement('div');\\n particle.className = 'bifa-academy-particle';\\n particle.style.left = Math.random() * 100 + '%';\\n particle.style.animationDelay = Math.random() * 18 + 's';\\n particle.style.animationDuration = (16 + Math.random() * 8) + '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\\n \\\/\\\/ Setup video optimization\\n setupVideoOptimization() {\\n const video = document.querySelector('.bifa-video-wrapper video');\\n if (!video) return;\\n\\n \\\/\\\/ Ensure video plays smoothly\\n video.addEventListener('loadstart', () => {\\n video.play().catch(e => {\\n console.log('Video autoplay prevented:', e);\\n });\\n });\\n\\n \\\/\\\/ Handle video errors gracefully\\n video.addEventListener('error', (e) => {\\n console.warn('Video loading error:', e);\\n \\\/\\\/ Could add fallback image here\\n });\\n\\n \\\/\\\/ Optimize performance\\n video.addEventListener('loadeddata', () => {\\n video.currentTime = 0;\\n });\\n },\\n\\n \\\/\\\/ Setup intersection observer for animations\\n setupIntersectionObserver() {\\n if (!window.IntersectionObserver) return;\\n\\n const observerOptions = {\\n threshold: 0.1,\\n rootMargin: '50px 0px'\\n };\\n\\n const observer = new IntersectionObserver((entries) => {\\n entries.forEach(entry => {\\n if (entry.isIntersecting) {\\n entry.target.classList.add('animate-in');\\n }\\n });\\n }, observerOptions);\\n\\n \\\/\\\/ Observe animated elements\\n const animatedElements = document.querySelectorAll(\\n '.bifa-content-block, .bifa-features-list li, .bifa-academy-cta'\\n );\\n\\n animatedElements.forEach(el => {\\n observer.observe(el);\\n });\\n },\\n\\n \\\/\\\/ Utility method for smooth scrolling to elements\\n scrollToSection(targetId) {\\n const element = document.getElementById(targetId);\\n if (element) {\\n element.scrollIntoView({\\n behavior: 'smooth',\\n block: 'start'\\n });\\n }\\n }\\n};\\n\\n\\\/\\\/ Initialize when DOM is ready\\ndocument.addEventListener('DOMContentLoaded', () => {\\n BifaAcademy.init();\\n});\\n\\n\\\/\\\/ Performance optimization - pause animations when not visible\\ndocument.addEventListener('visibilitychange', () => {\\n const particles = document.querySelectorAll('.bifa-academy-particle');\\n const shapes = document.querySelectorAll('.bifa-floating-shape');\\n \\n if (document.hidden) {\\n particles.forEach(p => p.style.animationPlayState = 'paused');\\n shapes.forEach(s => s.style.animationPlayState = 'paused');\\n } else {\\n particles.forEach(p => p.style.animationPlayState = 'running');\\n shapes.forEach(s => s.style.animationPlayState = 'running');\\n }\\n});\\n<\\\/script>\\n\\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+ Featured Stories \\\/ Ambassadors Block - Dynamic<\\\/title>\\n <link rel=\"\\\"preconnect\\\"\" href=\"\\\"https:\\\/\\\/fonts.googleapis.com\\\"\">\\n <link rel=\"\\\"preconnect\\\"\" href=\"\\\"https:\\\/\\\/fonts.gstatic.com\\\"\" crossorigin>\\n \\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&family=Cairo:wght@300;400;500;600;700;800&family=Tajawal:wght@300;400;500;700;800&display=swap\\\"\" rel=\"\\\"stylesheet\\\"\">\\n\\n<\/p>\n<style>\\n\\\/* ========= \\u0413\\u041b\\u041e\\u0411\\u0410\\u041b\\u042c\\u041d\\u042b\\u0415 \\u041f\\u0415\\u0420\\u0415\\u041c\\u0415\\u041d\\u041d\\u042b\\u0415 BIFA+ ========= *\\\/\\n:root {\\n \\\/* \\u041e\\u0444\\u0438\\u0446\\u0438\\u0430\\u043b\\u044c\\u043d\\u044b\\u0435 \\u0446\\u0432\\u0435\\u0442\\u0430 BIFA+ *\\\/\\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 --bifa-gray-light: #F8F9FA;\\n --bifa-gray: #6C757D;\\n \\n \\\/* \\u041e\\u0444\\u0438\\u0446\\u0438\\u0430\\u043b\\u044c\\u043d\\u044b\\u0435 \\u0448\\u0440\\u0438\\u0444\\u0442\\u044b BIFA+ *\\\/\\n --bifa-font-heading: 'Montserrat', 'Cairo', sans-serif;\\n --bifa-font-body: 'Poppins', 'Tajawal', sans-serif;\\n --bifa-font-arabic: 'Cairo', 'Tajawal', 'GE SS Text', sans-serif;\\n \\n \\\/* \\u041f\\u0440\\u0435\\u043c\\u0438\\u0430\\u043b\\u044c\\u043d\\u044b\\u0435 \\u0442\\u0435\\u043d\\u0438 \\u0438 \\u044d\\u0444\\u0444\\u0435\\u043a\\u0442\\u044b *\\\/\\n --bifa-shadow-premium: 0 25px 80px rgba(10, 31, 68, 0.15);\\n --bifa-shadow-hover: 0 35px 100px rgba(10, 31, 68, 0.2);\\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\\n\\\/* ========= RESET ========= *\\\/\\n* {\\n margin: 0;\\n padding: 0;\\n box-sizing: border-box;\\n}\\n\\nhtml {\\n scroll-behavior: smooth;\\n}\\n\\nbody {\\n font-family: var(--bifa-font-body);\\n overflow-x: hidden;\\n background: var(--bifa-bright-white);\\n text-rendering: optimizeLegibility;\\n -webkit-font-smoothing: antialiased;\\n -moz-osx-font-smoothing: grayscale;\\n color: var(--bifa-soft-black);\\n}\\n\\n\\\/* ========= LOADING STATE ========= *\\\/\\n.bifa-loading-container {\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n justify-content: center;\\n min-height: 400px;\\n gap: 20px;\\n}\\n\\n.bifa-loading-spinner {\\n width: 60px;\\n height: 60px;\\n border: 4px solid rgba(212, 175, 55, 0.1);\\n border-top: 4px solid var(--bifa-heritage-gold);\\n border-radius: 50%;\\n animation: spin 1s linear infinite;\\n}\\n\\n@keyframes spin {\\n 0% { transform: rotate(0deg); }\\n 100% { transform: rotate(360deg); }\\n}\\n\\n.bifa-loading-text {\\n font-family: var(--bifa-font-heading);\\n font-size: 1.2rem;\\n color: var(--bifa-gray);\\n animation: pulse 1.5s ease-in-out infinite;\\n}\\n\\n@keyframes pulse {\\n 0%, 100% { opacity: 1; }\\n 50% { opacity: 0.5; }\\n}\\n\\n\\\/* ========= ERROR STATE ========= *\\\/\\n.bifa-error-container {\\n background: #fff3cd;\\n border: 2px solid #ffc107;\\n border-radius: 15px;\\n padding: 30px;\\n margin: 40px 20px;\\n text-align: center;\\n}\\n\\n.bifa-error-icon {\\n font-size: 3rem;\\n margin-bottom: 20px;\\n}\\n\\n.bifa-error-message {\\n font-family: var(--bifa-font-heading);\\n font-size: 1.3rem;\\n color: #856404;\\n margin-bottom: 15px;\\n}\\n\\n.bifa-error-details {\\n font-family: var(--bifa-font-body);\\n color: #856404;\\n margin-bottom: 20px;\\n}\\n\\n.bifa-retry-button {\\n display: inline-block;\\n padding: 12px 30px;\\n background: var(--bifa-heritage-gold);\\n color: var(--bifa-deep-navy);\\n border: none;\\n border-radius: 50px;\\n font-family: var(--bifa-font-heading);\\n font-weight: 700;\\n cursor: pointer;\\n transition: var(--bifa-transition);\\n}\\n\\n.bifa-retry-button:hover {\\n transform: translateY(-2px);\\n box-shadow: var(--bifa-shadow-gold);\\n}\\n\\n\\\/* ========= EMPTY STATE ========= *\\\/\\n.bifa-empty-container {\\n text-align: center;\\n padding: 60px 20px;\\n}\\n\\n.bifa-empty-icon {\\n font-size: 4rem;\\n color: var(--bifa-gray);\\n margin-bottom: 20px;\\n}\\n\\n.bifa-empty-message {\\n font-family: var(--bifa-font-heading);\\n font-size: 1.5rem;\\n color: var(--bifa-gray);\\n margin-bottom: 10px;\\n}\\n\\n.bifa-empty-submessage {\\n font-family: var(--bifa-font-body);\\n color: var(--bifa-gray);\\n margin-bottom: 30px;\\n}\\n\\n\\\/* ========= AMBASSADORS SECTION WRAPPER ========= *\\\/\\n.bifa-ambassadors-section-wrapper {\\n width: 100vw;\\n position: relative;\\n left: 50%;\\n margin-left: -50vw;\\n background: transparent;\\n overflow: hidden;\\n}\\n\\n\\\/* ========= MAIN AMBASSADORS SECTION ========= *\\\/\\n.bifa-ambassadors-section {\\n padding: 100px 20px 100px;\\n position: relative;\\n background: transparent;\\n}\\n\\n\\\/* ========= ANIMATED BACKGROUND ELEMENTS ========= *\\\/\\n.bifa-ambassadors-bg-animation {\\n position: absolute;\\n width: 100%;\\n height: 100%;\\n overflow: hidden;\\n z-index: 1;\\n top: 0;\\n left: 0;\\n}\\n\\n\\\/* \\u0417\\u043e\\u043b\\u043e\\u0442\\u044b\\u0435 \\u0447\\u0430\\u0441\\u0442\\u0438\\u0446\\u044b BIFA+ *\\\/\\n.bifa-ambassadors-particle {\\n position: absolute;\\n width: 3px;\\n height: 3px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n border-radius: 50%;\\n animation: floatAmbassadors 20s infinite linear;\\n box-shadow: 0 0 6px rgba(212, 175, 55, 0.2);\\n opacity: 0.25;\\n will-change: transform;\\n}\\n\\n@keyframes floatAmbassadors {\\n 0% {\\n transform: translateY(100vh) translateX(0) rotate(0deg);\\n opacity: 0;\\n }\\n 10% { opacity: 0.3; }\\n 90% { opacity: 0.3; }\\n 100% {\\n transform: translateY(-100vh) translateX(70px) rotate(360deg);\\n opacity: 0;\\n }\\n}\\n\\n\\\/* \\u041f\\u043b\\u0430\\u0432\\u0430\\u044e\\u0449\\u0438\\u0435 \\u0433\\u0435\\u043e\\u043c\\u0435\\u0442\\u0440\\u0438\\u0447\\u0435\\u0441\\u043a\\u0438\\u0435 \\u0444\\u0438\\u0433\\u0443\\u0440\\u044b BIFA+ *\\\/\\n.bifa-floating-shape-amb {\\n position: absolute;\\n border-radius: 50%;\\n filter: blur(120px);\\n animation: morphFloatAmbassadors 25s ease-in-out infinite;\\n pointer-events: none;\\n opacity: 0.4;\\n}\\n\\n.bifa-shape-ambassadors-1 {\\n width: 400px;\\n height: 400px;\\n background: radial-gradient(circle at 30% 30%, rgba(212, 175, 55, 0.07), transparent);\\n top: -200px;\\n right: -200px;\\n}\\n\\n.bifa-shape-ambassadors-2 {\\n width: 350px;\\n height: 350px;\\n background: radial-gradient(circle at 70% 70%, rgba(10, 31, 68, 0.05), transparent);\\n bottom: -175px;\\n left: -175px;\\n animation-delay: 8s;\\n}\\n\\n.bifa-shape-ambassadors-3 {\\n width: 300px;\\n height: 300px;\\n background: radial-gradient(circle at 50% 50%, rgba(29, 97, 67, 0.06), transparent);\\n top: 40%;\\n left: 60%;\\n animation-delay: 16s;\\n}\\n\\n@keyframes morphFloatAmbassadors {\\n 0%, 100% { \\n transform: translate(0, 0) scale(1) rotate(0deg);\\n filter: blur(120px);\\n }\\n 25% { \\n transform: translate(100px, -80px) scale(1.2) rotate(90deg);\\n filter: blur(140px);\\n }\\n 50% { \\n transform: translate(-80px, 100px) scale(0.8) rotate(180deg);\\n filter: blur(100px);\\n }\\n 75% { \\n transform: translate(-100px, -60px) scale(1.1) rotate(270deg);\\n filter: blur(130px);\\n }\\n}\\n\\n\\\/* ========= CONTAINER ========= *\\\/\\n.bifa-ambassadors-container {\\n max-width: 1200px;\\n margin: 0 auto;\\n position: relative;\\n z-index: 10;\\n}\\n\\n\\\/* ========= SECTION TITLE - Premium Style ========= *\\\/\\n.bifa-ambassadors-title-wrapper {\\n text-align: center;\\n margin-bottom: 80px;\\n}\\n\\n.bifa-ambassadors-section-title {\\n font-family: var(--bifa-font-heading) !important;\\n font-size: clamp(2.5rem, 4vw, 3.5rem);\\n font-weight: 900 !important;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent !important;\\n position: relative;\\n animation: fadeInUp 1s ease-out 0.3s both;\\n line-height: 1.2;\\n margin-bottom: 20px;\\n text-transform: uppercase;\\n letter-spacing: -0.5px;\\n text-shadow: 0 2px 4px rgba(212, 175, 55, 0.1);\\n}\\n\\n.bifa-ambassadors-section-title::after {\\n content: '';\\n position: absolute;\\n bottom: -15px;\\n left: 50%;\\n transform: translateX(-50%);\\n width: 0;\\n height: 4px;\\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700);\\n animation: expandWidth 0.8s ease-out 1s both;\\n border-radius: 2px;\\n}\\n\\n.bifa-ambassadors-subtitle {\\n font-family: var(--bifa-font-body) !important;\\n font-size: 1.3rem;\\n font-weight: 600 !important;\\n color: var(--bifa-gray) !important;\\n margin-top: 30px;\\n animation: fadeInUp 1s ease-out 0.5s both;\\n line-height: 1.6;\\n max-width: 700px;\\n margin-left: auto;\\n margin-right: auto;\\n}\\n\\n\\\/* ========= JOIN US BUTTONS SECTION ========= *\\\/\\n.bifa-join-buttons-section {\\n text-align: center;\\n margin: 60px auto;\\n padding: 40px 20px;\\n background: linear-gradient(135deg, rgba(212, 175, 55, 0.05), transparent);\\n border-radius: 20px;\\n animation: fadeInUp 1s ease-out 0.7s both;\\n max-width: 100%;\\n}\\n\\n.bifa-join-buttons-container {\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n gap: 20px;\\n flex-wrap: wrap;\\n margin: 30px auto 0;\\n max-width: 100%;\\n}\\n\\n.bifa-join-button {\\n all: initial;\\n font-family: 'Montserrat', sans-serif !important;\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n gap: 10px;\\n padding: 18px 35px !important;\\n background: linear-gradient(135deg, #0A1F44, #162e5a) !important;\\n color: #FFFFFF !important;\\n text-decoration: none !important;\\n border-radius: 50px;\\n font-weight: 700 !important;\\n font-size: 1rem !important;\\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\\n box-shadow: 0 15px 40px rgba(10, 31, 68, 0.2), \\n 0 5px 15px rgba(10, 31, 68, 0.15);\\n position: relative;\\n overflow: hidden;\\n text-transform: uppercase;\\n letter-spacing: 0.5px;\\n border: 2px solid transparent !important;\\n cursor: pointer !important;\\n white-space: nowrap;\\n text-align: center;\\n box-sizing: border-box;\\n}\\n\\n.bifa-join-button:hover {\\n transform: translateY(-3px) scale(1.02);\\n box-shadow: 0 20px 50px rgba(10, 31, 68, 0.3), \\n 0 10px 20px rgba(10, 31, 68, 0.2);\\n background: linear-gradient(135deg, #162e5a, #0A1F44) !important;\\n border-color: rgba(212, 175, 55, 0.3) !important;\\n}\\n\\n.bifa-join-button::before {\\n content: '';\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n width: 0;\\n height: 0;\\n background: radial-gradient(circle, rgba(212, 175, 55, 0.3), transparent);\\n transition: all 0.5s ease;\\n transform: translate(-50%, -50%);\\n}\\n\\n.bifa-join-button:hover::before {\\n width: 100%;\\n height: 100%;\\n}\\n\\n.bifa-join-button svg {\\n width: 18px;\\n height: 18px;\\n fill: currentColor;\\n flex-shrink: 0;\\n}\\n\\n\\\/* ========= AMBASSADORS GRID ========= *\\\/\\n.bifa-ambassadors-grid {\\n display: grid;\\n grid-template-columns: repeat(3, 1fr);\\n gap: 40px;\\n margin-bottom: 60px;\\n position: relative;\\n transition: max-height 0.6s ease-out;\\n}\\n\\n\\\/* Hide cards beyond the first 3 by default *\\\/\\n.bifa-ambassador-card:nth-child(n+4) {\\n display: none;\\n opacity: 0;\\n}\\n\\n\\\/* Show all cards when expanded *\\\/\\n.bifa-ambassadors-grid.expanded .bifa-ambassador-card:nth-child(n+4) {\\n display: block;\\n animation: fadeInUp 0.8s ease-out forwards;\\n}\\n\\n\\\/* Stagger animations for expanded cards *\\\/\\n.bifa-ambassadors-grid.expanded .bifa-ambassador-card:nth-child(4) {\\n animation-delay: 0.1s;\\n}\\n\\n.bifa-ambassadors-grid.expanded .bifa-ambassador-card:nth-child(5) {\\n animation-delay: 0.2s;\\n}\\n\\n.bifa-ambassadors-grid.expanded .bifa-ambassador-card:nth-child(6) {\\n animation-delay: 0.3s;\\n}\\n\\n\\\/* ========= AMBASSADOR CARD - Premium Style ========= *\\\/\\n.bifa-ambassador-card {\\n background: var(--bifa-bright-white) !important;\\n border-radius: 25px;\\n overflow: hidden;\\n box-shadow: var(--bifa-shadow-premium);\\n transition: var(--bifa-transition);\\n animation: fadeInUp 1s ease-out both;\\n border: 1px solid rgba(212, 175, 55, 0.1);\\n position: relative;\\n cursor: pointer;\\n text-decoration: none;\\n color: inherit;\\n display: block;\\n}\\n\\n.bifa-ambassador-card:nth-child(1) {\\n animation-delay: 0.8s;\\n}\\n\\n.bifa-ambassador-card:nth-child(2) {\\n animation-delay: 1s;\\n}\\n\\n.bifa-ambassador-card:nth-child(3) {\\n animation-delay: 1.2s;\\n}\\n\\n.bifa-ambassador-card:hover {\\n transform: translateY(-10px);\\n box-shadow: var(--bifa-shadow-hover);\\n border-color: rgba(212, 175, 55, 0.3);\\n}\\n\\n\\\/* Ambassador Image Container *\\\/\\n.bifa-ambassador-image {\\n position: relative;\\n width: 100%;\\n height: 300px;\\n overflow: hidden;\\n background: linear-gradient(135deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);\\n background-size: 200% 100%;\\n}\\n\\n.bifa-ambassador-image.loading {\\n animation: loading 2s infinite linear;\\n}\\n\\n.bifa-ambassador-image img {\\n width: 100%;\\n height: 100%;\\n object-fit: cover;\\n object-position: center;\\n transition: transform 0.5s ease;\\n}\\n\\n.bifa-ambassador-card:hover .bifa-ambassador-image img {\\n transform: scale(1.1);\\n}\\n\\n\\\/* No image placeholder *\\\/\\n.bifa-ambassador-no-image {\\n width: 100%;\\n height: 100%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(10, 31, 68, 0.05));\\n}\\n\\n.bifa-ambassador-no-image svg {\\n width: 80px;\\n height: 80px;\\n color: var(--bifa-gray);\\n opacity: 0.5;\\n}\\n\\n\\\/* Gold Overlay Effect *\\\/\\n.bifa-ambassador-image::after {\\n content: '';\\n position: absolute;\\n inset: 0;\\n background: linear-gradient(180deg, \\n transparent 50%, \\n rgba(10, 31, 68, 0.7) 100%\\n );\\n opacity: 0;\\n transition: opacity 0.3s ease;\\n}\\n\\n.bifa-ambassador-card:hover .bifa-ambassador-image::after {\\n opacity: 1;\\n}\\n\\n\\\/* Country Flag *\\\/\\n.bifa-ambassador-country {\\n position: absolute;\\n top: 20px;\\n left: 20px;\\n font-size: 32px;\\n z-index: 2;\\n background: rgba(255, 255, 255, 0.9);\\n width: 48px;\\n height: 48px;\\n border-radius: 50%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\\n}\\n\\n\\\/* Ambassador Content *\\\/\\n.bifa-ambassador-content {\\n padding: 35px 30px;\\n position: relative;\\n}\\n\\n.bifa-ambassador-name {\\n font-family: var(--bifa-font-heading) !important;\\n font-size: 1.5rem;\\n font-weight: 900 !important;\\n color: var(--bifa-deep-navy) !important;\\n margin-bottom: 8px;\\n line-height: 1.2;\\n transition: color 0.3s ease;\\n}\\n\\n.bifa-ambassador-card:hover .bifa-ambassador-name {\\n color: var(--bifa-heritage-gold) !important;\\n}\\n\\n.bifa-ambassador-role {\\n font-family: var(--bifa-font-body) !important;\\n font-size: 1rem;\\n font-weight: 700 !important;\\n color: var(--bifa-heritage-gold) !important;\\n margin-bottom: 8px;\\n text-transform: uppercase;\\n letter-spacing: 0.5px;\\n}\\n\\n.bifa-ambassador-organization {\\n font-family: var(--bifa-font-body) !important;\\n font-size: 0.95rem;\\n font-weight: 500 !important;\\n color: var(--bifa-gray) !important;\\n margin-bottom: 20px;\\n}\\n\\n.bifa-ambassador-quote {\\n font-family: var(--bifa-font-body) !important;\\n font-size: 1.05rem;\\n font-weight: 500 !important;\\n line-height: 1.7;\\n color: #4a5568 !important;\\n font-style: italic;\\n position: relative;\\n padding-left: 25px;\\n}\\n\\n.bifa-ambassador-quote::before {\\n content: '\\\"';\\n position: absolute;\\n left: 0;\\n top: -5px;\\n font-size: 2.5rem;\\n color: var(--bifa-heritage-gold);\\n font-family: var(--bifa-font-heading);\\n font-weight: 800;\\n opacity: 0.3;\\n}\\n\\n\\\/* Gold Badge for Special Ambassadors *\\\/\\n.bifa-ambassador-badge {\\n position: absolute;\\n top: 20px;\\n right: 20px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n color: var(--bifa-deep-navy);\\n padding: 8px 16px;\\n border-radius: 50px;\\n font-family: var(--bifa-font-heading);\\n font-size: 0.75rem;\\n font-weight: 700;\\n text-transform: uppercase;\\n letter-spacing: 0.5px;\\n box-shadow: var(--bifa-shadow-gold);\\n z-index: 2;\\n}\\n\\n\\\/* Featured badge style *\\\/\\n.bifa-ambassador-badge.featured {\\n background: linear-gradient(135deg, #ff6b6b, #ff4757);\\n color: white;\\n}\\n\\n\\\/* ========= VIEW ALL BUTTON ========= *\\\/\\n.bifa-ambassadors-cta {\\n text-align: center;\\n margin-top: 60px;\\n animation: fadeInUp 1s ease-out 1.2s both;\\n}\\n\\n.bifa-view-all-button {\\n all: initial;\\n font-family: 'Montserrat', sans-serif !important;\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n gap: 12px;\\n padding: 20px 50px !important;\\n background: linear-gradient(135deg, #0A1F44, #162e5a) !important;\\n color: #FFFFFF !important;\\n text-decoration: none !important;\\n border-radius: 50px;\\n font-weight: 800 !important;\\n font-size: 1.15rem !important;\\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\\n box-shadow: 0 25px 60px rgba(10, 31, 68, 0.3), \\n 0 10px 20px rgba(10, 31, 68, 0.2),\\n inset 0 -2px 4px rgba(0, 0, 0, 0.1);\\n position: relative;\\n overflow: hidden;\\n text-transform: uppercase;\\n letter-spacing: 0.5px;\\n border: 2px solid rgba(212, 175, 55, 0.2) !important;\\n cursor: pointer !important;\\n}\\n\\n.bifa-view-all-button:hover {\\n transform: translateY(-3px);\\n box-shadow: 0 30px 80px rgba(10, 31, 68, 0.4), \\n 0 15px 30px rgba(10, 31, 68, 0.3);\\n background: linear-gradient(135deg, #162e5a, var(--bifa-deep-navy)) !important;\\n}\\n\\n.bifa-button-text {\\n font-weight: 700 !important;\\n color: #FFFFFF !important;\\n}\\n\\n.bifa-ambassador-count {\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n color: var(--bifa-deep-navy) !important;\\n width: 32px;\\n height: 32px;\\n border-radius: 50%;\\n font-size: 1rem !important;\\n font-weight: 900 !important;\\n margin-left: 10px;\\n}\\n\\n\\\/* ========= ANIMATIONS ========= *\\\/\\n@keyframes fadeInUp {\\n from {\\n opacity: 0;\\n transform: translateY(30px);\\n }\\n to {\\n opacity: 1;\\n transform: translateY(0);\\n }\\n}\\n\\n@keyframes expandWidth {\\n from {\\n width: 0;\\n }\\n to {\\n width: 120px;\\n }\\n}\\n\\n@keyframes loading {\\n 0% {\\n background-position: 200% 0;\\n }\\n 100% {\\n background-position: -200% 0;\\n }\\n}\\n\\n\\\/* ========= RESPONSIVE ========= *\\\/\\n@media (max-width: 1024px) {\\n .bifa-ambassadors-grid {\\n grid-template-columns: repeat(2, 1fr);\\n gap: 35px;\\n }\\n \\n .bifa-ambassador-card:nth-child(n+3) {\\n display: none;\\n opacity: 0;\\n }\\n \\n .bifa-ambassadors-grid.expanded .bifa-ambassador-card:nth-child(n+3) {\\n display: block;\\n animation: fadeInUp 0.8s ease-out forwards;\\n }\\n}\\n\\n@media (max-width: 768px) {\\n .bifa-ambassadors-section {\\n padding: 80px 15px 60px;\\n }\\n \\n .bifa-ambassadors-container {\\n padding: 0 10px;\\n }\\n \\n .bifa-ambassadors-grid {\\n grid-template-columns: 1fr;\\n gap: 30px;\\n }\\n \\n .bifa-ambassador-card:nth-child(n+2) {\\n display: none;\\n opacity: 0;\\n }\\n \\n .bifa-ambassadors-grid.expanded .bifa-ambassador-card:nth-child(n+2) {\\n display: block;\\n animation: fadeInUp 0.8s ease-out forwards;\\n }\\n \\n .bifa-ambassador-image {\\n height: 250px;\\n }\\n \\n \\\/* \\u041c\\u043e\\u0431\\u0438\\u043b\\u044c\\u043d\\u0430\\u044f \\u0446\\u0435\\u043d\\u0442\\u0440\\u043e\\u0432\\u043a\\u0430 \\u043a\\u043d\\u043e\\u043f\\u043e\\u043a Join Us *\\\/\\n .bifa-join-buttons-section {\\n padding: 30px 10px;\\n margin: 40px 0;\\n }\\n \\n .bifa-join-buttons-container {\\n flex-direction: column;\\n align-items: center;\\n gap: 15px;\\n width: 100%;\\n padding: 0;\\n }\\n \\n .bifa-join-button {\\n width: 90%;\\n max-width: 320px;\\n padding: 16px 25px !important;\\n font-size: 0.95rem !important;\\n justify-content: center;\\n text-align: center;\\n }\\n \\n \\\/* \\u0426\\u0435\\u043d\\u0442\\u0440\\u043e\\u0432\\u043a\\u0430 \\u0437\\u0430\\u0433\\u043e\\u043b\\u043e\\u0432\\u043a\\u043e\\u0432 *\\\/\\n .bifa-ambassadors-title-wrapper {\\n padding: 0 10px;\\n margin-bottom: 60px;\\n }\\n \\n .bifa-ambassadors-section-title {\\n font-size: 2.2rem;\\n }\\n \\n .bifa-ambassadors-subtitle {\\n font-size: 1.15rem;\\n padding: 0 10px;\\n }\\n \\n \\\/* \\u041a\\u043d\\u043e\\u043f\\u043a\\u0430 View All *\\\/\\n .bifa-ambassadors-cta {\\n padding: 0 10px;\\n }\\n \\n .bifa-view-all-button {\\n padding: 18px 35px !important;\\n font-size: 1rem !important;\\n width: auto;\\n max-width: 90%;\\n }\\n}\\n\\n@media (max-width: 480px) {\\n .bifa-ambassadors-section {\\n padding: 60px 10px 50px;\\n }\\n \\n .bifa-ambassadors-section-title {\\n font-size: 1.8rem;\\n letter-spacing: 0;\\n }\\n \\n .bifa-ambassadors-subtitle {\\n font-size: 1rem;\\n padding: 0 5px;\\n }\\n \\n .bifa-ambassador-content {\\n padding: 25px 20px;\\n }\\n \\n \\\/* \\u0415\\u0449\\u0451 \\u0431\\u043e\\u043b\\u0435\\u0435 \\u043a\\u043e\\u043c\\u043f\\u0430\\u043a\\u0442\\u043d\\u044b\\u0435 \\u043a\\u043d\\u043e\\u043f\\u043a\\u0438 \\u0434\\u043b\\u044f \\u043c\\u0430\\u043b\\u044b\\u0445 \\u044d\\u043a\\u0440\\u0430\\u043d\\u043e\\u0432 *\\\/\\n .bifa-join-buttons-section {\\n padding: 25px 5px;\\n margin: 30px 0;\\n }\\n \\n .bifa-join-button {\\n width: 95%;\\n max-width: 280px;\\n font-size: 0.85rem !important;\\n padding: 14px 20px !important;\\n letter-spacing: 0.3px;\\n }\\n \\n .bifa-join-button svg {\\n width: 16px;\\n height: 16px;\\n }\\n \\n \\\/* View All button \\u043d\\u0430 \\u043c\\u0430\\u043b\\u044b\\u0445 \\u044d\\u043a\\u0440\\u0430\\u043d\\u0430\\u0445 *\\\/\\n .bifa-view-all-button {\\n padding: 16px 30px !important;\\n font-size: 0.95rem !important;\\n }\\n \\n .bifa-ambassador-count {\\n width: 28px;\\n height: 28px;\\n font-size: 0.9rem !important;\\n }\\n}\\n\\n\\\/* \\u0414\\u043e\\u043f\\u043e\\u043b\\u043d\\u0438\\u0442\\u0435\\u043b\\u044c\\u043d\\u044b\\u0435 \\u0441\\u0442\\u0438\\u043b\\u0438 \\u0434\\u043b\\u044f \\u043e\\u0447\\u0435\\u043d\\u044c \\u043c\\u0430\\u043b\\u044b\\u0445 \\u044d\\u043a\\u0440\\u0430\\u043d\\u043e\\u0432 *\\\/\\n@media (max-width: 380px) {\\n .bifa-ambassadors-section-title {\\n font-size: 1.6rem;\\n }\\n \\n .bifa-join-button {\\n width: 98%;\\n font-size: 0.8rem !important;\\n padding: 12px 18px !important;\\n gap: 8px;\\n }\\n \\n \\\/* \\u0423\\u0431\\u0438\\u0440\\u0430\\u0435\\u043c \\u0433\\u043e\\u0440\\u0438\\u0437\\u043e\\u043d\\u0442\\u0430\\u043b\\u044c\\u043d\\u044b\\u0439 \\u0441\\u043a\\u0440\\u043e\\u043b\\u043b *\\\/\\n .bifa-ambassadors-section-wrapper {\\n overflow-x: hidden;\\n }\\n}\\n<\\\/style>\\n<\\\/head>\\n<body>\\n\\n<\/p>\n<div class=\"\\\"bifa-ambassadors-section-wrapper\\\"\">\\n \\n <\/p>\n<section class=\"\\\"bifa-ambassadors-section\\\"\">\\n \\n <\/p>\n<div class=\"\\\"bifa-ambassadors-bg-animation\\\"\">\\n \\n <\/p>\n<div class=\"\\\"bifa-floating-shape-amb\" bifa-shape-ambassadors-1\\\"><\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-floating-shape-amb\" bifa-shape-ambassadors-2\\\"><\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-floating-shape-amb\" bifa-shape-ambassadors-3\\\"><\\\/div>\\n \\n <\\\/div>\\n\\n <\/p>\n<div class=\"\\\"bifa-ambassadors-container\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-ambassadors-title-wrapper\\\"\">\\n <\/p>\n<h2 class=\"\\\"bifa-ambassadors-section-title\\\"\">Be Part of BIFA<\\\/h2>\\n <\/p>\n<p class=\"\\\"bifa-ambassadors-subtitle\\\"\">\\n Whether you're a student, coach, or fan, there's a role for you in building football's future.\\n <\\\/p>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"bifa-join-buttons-section\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-join-buttons-container\\\"\">\\n <a href=\"\\\"https:\\\/\\\/bifa.ai\\\/join\\\/#volunteers\\\"\" class=\"\\\"bifa-join-button\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"currentColor\\\"\">\\n <path d=\"\\\"M12\" 2c6.48 2 6.48 12s4.48 10 10-4.48 10-10s17.52 12 2zm-2 15l-5-5 1.41-1.41l10 14.17l7.59-7.59l19 8l-9 9z\\\"\\>\\n <\\\/svg>\\n Apply as Volunteer\\n <\\\/a>\\n <a href=\"\\\"https:\\\/\\\/bifa.ai\\\/join\\\/#representatives\\\"\" class=\"\\\"bifa-join-button\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"currentColor\\\"\">\\n <path d=\"\\\"M19\" 3h-4.18c14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2h5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2h14c1.1 0 2-.9 2-2v5c0-1.1-.9-2-2-2zm-7 0c.55 .45 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14h7v-2h7v2zm3-4h7v-2h10v2zm0-4h7v7h10v2z\\\"\\>\\n <\\\/svg>\\n Apply as Representative\\n <\\\/a>\\n <a href=\"\\\"https:\\\/\\\/bifa.ai\\\/join\\\/#ambassadors\\\"\" class=\"\\\"bifa-join-button\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"currentColor\\\"\">\\n <path d=\"\\\"M12\" 2l3.09 6.26l22 9.27l-5 4.87 1.18 6.88l12 17.77l-6.18 3.25l7 14.14 2 9.27l6.91-1.01l12 2z\\\"\\>\\n <\\\/svg>\\n Apply as Ambassador\\n <\\\/a>\\n <\\\/div>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"bifa-ambassadors-grid\\\"\" id=\"\\\"bifa-ambassadors-grid\\\"\">\\n \\n <\/p>\n<div class=\"\\\"bifa-loading-container\\\"\" id=\"\\\"bifa-loading\\\"\" style=\"\\\"grid-column:\" 1\\-1;\\\">\\n <\/p>\n<div class=\"\\\"bifa-loading-spinner\\\"\"><\\\/div>\\n <\/p>\n<p class=\"\\\"bifa-loading-text\\\"\">Loading ambassadors...<\\\/p>\\n <\\\/div>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"bifa-ambassadors-cta\\\"\" id=\"\\\"bifa-cta\\\"\" style=\"\\\"display:\" none;\\\">\\n <button class=\"\\\"bifa-view-all-button\\\"\" id=\"\\\"bifa-view-all-button\\\"\" type=\"\\\"button\\\"\">\\n <span class=\"\\\"bifa-button-text\\\"\">View All Ambassadors<\\\/span>\\n <span class=\"\\\"bifa-ambassador-count\\\"\">0<\\\/span>\\n <svg width=\"\\\"20\\\"\" height=\"\\\"20\\\"\" viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\" stroke=\"\\\"#FFFFFF\\\"\" stroke-width=\"\\\"2.5\\\"\">\\n <path d=\"\\\"M5\" 12h19m19 12l12 5m19 19\\\" stroke =\"\\\"#FFFFFF\\\"\" stroke-width=\"\\\"2.5\\\"\" stroke-linecap=\"\\\"round\\\"\" stroke-linejoin=\"\\\"round\\\"\\\/\">\\n <\\\/svg>\\n <\\\/button>\\n <\\\/div>\\n <\\\/div>\\n <\\\/section>\\n<\\\/div>\\n\\n<script>\\n\\\/\\\/ BIFA+ Dynamic Ambassadors Module with REST API Integration - PRODUCTION VERSION\\n(function() {\\n 'use strict';\\n \\n \\\/\\\/ Configuration\\n const CONFIG = {\\n apiUrl: '\\\/wp-json\\\/bifa\\\/v1\\\/ambassadors',\\n particleCount: 12,\\n visibleCardsDesktop: 3,\\n visibleCardsTablet: 2,\\n visibleCardsMobile: 1,\\n isExpanded: false\\n };\\n \\n \\\/\\\/ Country flags mapping\\n const FLAGS = {\\n 'BR': '\\ud83c\\udde7\\ud83c\\uddf7',\\n 'RU': '\\ud83c\\uddf7\\ud83c\\uddfa',\\n 'IN': '\\ud83c\\uddee\\ud83c\\uddf3',\\n 'CN': '\\ud83c\\udde8\\ud83c\\uddf3',\\n 'ZA': '\\ud83c\\uddff\\ud83c\\udde6',\\n 'SA': '\\ud83c\\uddf8\\ud83c\\udde6',\\n 'AE': '\\ud83c\\udde6\\ud83c\\uddea',\\n 'EG': '\\ud83c\\uddea\\ud83c\\uddec',\\n 'IR': '\\ud83c\\uddee\\ud83c\\uddf7',\\n 'ET': '\\ud83c\\uddea\\ud83c\\uddf9',\\n 'ID': '\\ud83c\\uddee\\ud83c\\udde9',\\n 'AR': '\\ud83c\\udde6\\ud83c\\uddf7'\\n };\\n \\n \\\/\\\/ State\\n let ambassadors = [];\\n let visibleCards = CONFIG.visibleCardsDesktop;\\n \\n \\\/\\\/ Initialize\\n function init() {\\n \\\/\\\/ Create particles\\n createParticles();\\n \\n \\\/\\\/ Determine visible cards based on screen size\\n updateVisibleCards();\\n \\n \\\/\\\/ Load ambassadors data\\n loadAmbassadors();\\n \\n \\\/\\\/ Setup event listeners\\n setupEventListeners();\\n \\n \\\/\\\/ Setup resize handler\\n window.addEventListener('resize', debounce(updateVisibleCards, 250));\\n }\\n \\n \\\/\\\/ Create golden particles\\n function createParticles() {\\n const particlesContainer = document.querySelector('.bifa-ambassadors-bg-animation');\\n if (!particlesContainer) return;\\n \\n for (let i = 0; i < CONFIG.particleCount; i++) {\\n const particle = document.createElement('div');\\n particle.className = 'bifa-ambassadors-particle';\\n particle.style.left = Math.random() * 100 + '%';\\n particle.style.animationDelay = Math.random() * 20 + 's';\\n particle.style.animationDuration = (18 + Math.random() * 10) + '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 \\n \\\/\\\/ Update visible cards based on screen size\\n function updateVisibleCards() {\\n const width = window.innerWidth;\\n if (width <= 768) {\\n visibleCards = CONFIG.visibleCardsMobile;\\n } else if (width <= 1024) {\\n visibleCards = CONFIG.visibleCardsTablet;\\n } else {\\n visibleCards = CONFIG.visibleCardsDesktop;\\n }\\n }\\n \\n \\\/\\\/ Load ambassadors from REST API\\n async function loadAmbassadors() {\\n const grid = document.getElementById('bifa-ambassadors-grid');\\n const loadingContainer = document.getElementById('bifa-loading');\\n \\n try {\\n const apiUrl = `${window.location.protocol}\\\/\\\/${window.location.host}${CONFIG.apiUrl}`;\\n const response = await fetch(apiUrl);\\n \\n if (!response.ok) {\\n throw new Error(`API Error: ${response.status} ${response.statusText}`);\\n }\\n \\n ambassadors = await response.json();\\n \\n \\\/\\\/ Remove loading state\\n if (loadingContainer) {\\n loadingContainer.remove();\\n }\\n \\n \\\/\\\/ Check if we have ambassadors\\n if (ambassadors.length === 0) {\\n showEmptyState(grid);\\n return;\\n }\\n \\n \\\/\\\/ Sort ambassadors by order\\n ambassadors.sort((a, b) => {\\n const orderA = parseInt(a.order) || 999;\\n const orderB = parseInt(b.order) || 999;\\n return orderA - orderB;\\n });\\n \\n \\\/\\\/ Render ambassadors\\n renderAmbassadors(grid);\\n \\n \\\/\\\/ Setup view all button\\n setupViewAllButton();\\n \\n } catch (error) {\\n console.error('BIFA Ambassadors: Error loading data:', error);\\n \\n \\\/\\\/ Remove loading state\\n if (loadingContainer) {\\n loadingContainer.remove();\\n }\\n \\n \\\/\\\/ Show error state\\n showErrorState(grid, error);\\n }\\n }\\n \\n \\\/\\\/ Render ambassadors cards\\n function renderAmbassadors(grid) {\\n \\\/\\\/ Clear grid\\n grid.innerHTML = '';\\n \\n \\\/\\\/ Render each ambassador\\n ambassadors.forEach((ambassador, index) => {\\n const card = createAmbassadorCard(ambassador, index);\\n grid.appendChild(card);\\n });\\n }\\n \\n \\\/\\\/ Create ambassador card element - PRODUCTION VERSION\\n function createAmbassadorCard(ambassador, index) {\\n const card = document.createElement('a');\\n card.className = 'bifa-ambassador-card';\\n card.href = ambassador.link || `\\\/ambassadors\\\/${ambassador.slug || ambassador.id}\\\/`;\\n card.setAttribute('data-id', ambassador.id);\\n \\n \\\/\\\/ Add animation delay\\n card.style.animationDelay = `${0.8 + (index * 0.2)}s`;\\n \\n \\\/\\\/ Select best available image\\n let imageUrl = null;\\n \\n \\\/\\\/ Priority: avatar -> featured_image -> portrait -> thumbnail\\n if (ambassador.avatar && ambassador.avatar.length > 0 && ambassador.avatar !== 'false') {\\n imageUrl = ambassador.avatar;\\n } else if (ambassador.featured_image && ambassador.featured_image.length > 0 && ambassador.featured_image !== 'false') {\\n imageUrl = ambassador.featured_image;\\n } else if (ambassador.portrait && ambassador.portrait.length > 0 && ambassador.portrait !== 'false') {\\n imageUrl = ambassador.portrait;\\n } else if (ambassador.thumbnail && ambassador.thumbnail.length > 0 && ambassador.thumbnail !== 'false') {\\n imageUrl = ambassador.thumbnail;\\n }\\n \\n \\\/\\\/ Create image container\\n const imageContainer = document.createElement('div');\\n imageContainer.className = 'bifa-ambassador-image';\\n \\n if (imageUrl && imageUrl !== 'false' && imageUrl !== false) {\\n \\\/\\\/ Create img element programmatically\\n const img = document.createElement('img');\\n img.src = imageUrl;\\n img.alt = ambassador.title || '';\\n img.loading = 'lazy';\\n \\n \\\/\\\/ Add error event listener for fallback\\n img.addEventListener('error', function() {\\n \\\/\\\/ Replace with placeholder on error\\n imageContainer.innerHTML = `\\n <\/p>\n<div class=\"\\\"bifa-ambassador-no-image\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\" stroke=\"\\\"currentColor\\\"\" stroke-width=\"\\\"1\\\"\">\\n <path d=\"\\\"M20\" 21v-2a4 4 0 0-4-4h8a4 0-4 4v2\\\"><\\\/path>\\n <circle cx=\"\\\"12\\\"\" cy=\"\\\"7\\\"\" r=\"\\\"4\\\"\"><\\\/circle>\\n <\\\/svg>\\n <\\\/div>\\n `;\\n });\\n \\n imageContainer.appendChild(img);\\n } else {\\n imageContainer.innerHTML = `\\n <\/p>\n<div class=\"\\\"bifa-ambassador-no-image\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\" stroke=\"\\\"currentColor\\\"\" stroke-width=\"\\\"1\\\"\">\\n <path d=\"\\\"M20\" 21v-2a4 4 0 0-4-4h8a4 0-4 4v2\\\"><\\\/path>\\n <circle cx=\"\\\"12\\\"\" cy=\"\\\"7\\\"\" r=\"\\\"4\\\"\"><\\\/circle>\\n <\\\/svg>\\n <\\\/div>\\n `;\\n }\\n \\n \\\/\\\/ Add country flag\\n let countryHtml = '';\\n if (ambassador.country && FLAGS[ambassador.country]) {\\n countryHtml = `\\n <\/p>\n<div class=\"\\\"bifa-ambassador-country\\\"\">\\n ${FLAGS[ambassador.country]}\\n <\\\/div>\\n `;\\n }\\n \\n \\\/\\\/ Add badge\\n let badgeHtml = '';\\n if (ambassador.badge) {\\n badgeHtml = `\\n <\/p>\n<div class=\"\\\"bifa-ambassador-badge\" ${ambassador.featured ? 'featured' : ''}\\\">\\n ${escapeHtml(ambassador.badge)}\\n <\\\/div>\\n `;\\n } else if (ambassador.featured) {\\n badgeHtml = `\\n <\/p>\n<div class=\"\\\"bifa-ambassador-badge\" featured\\\">\\n Featured\\n <\\\/div>\\n `;\\n }\\n \\n \\\/\\\/ Build other content with innerHTML\\n const contentHtml = `\\n ${badgeHtml}\\n ${countryHtml}\\n <\/p>\n<div class=\"\\\"bifa-ambassador-content\\\"\">\\n <\/p>\n<h3 class=\"\\\"bifa-ambassador-name\\\"\">${escapeHtml(ambassador.title)}<\\\/h3>\\n ${ambassador.role ? `<\/p>\n<p class=\"\\\"bifa-ambassador-role\\\"\">${escapeHtml(ambassador.role)}<\\\/p>` : ''}\\n ${ambassador.organization ? `<\/p>\n<p class=\"\\\"bifa-ambassador-organization\\\"\">${escapeHtml(ambassador.organization)}<\\\/p>` : ''}\\n ${ambassador.quote ? `<\/p>\n<p class=\"\\\"bifa-ambassador-quote\\\"\">${escapeHtml(ambassador.quote)}<\\\/p>` : ''}\\n ${!ambassador.quote && ambassador.bio_short ? `<\/p>\n<p class=\"\\\"bifa-ambassador-quote\\\"\">${escapeHtml(ambassador.bio_short)}<\\\/p>` : ''}\\n <\\\/div>\\n `;\\n \\n \\\/\\\/ Set initial HTML (without image)\\n card.innerHTML = contentHtml;\\n \\n \\\/\\\/ Insert image container at the correct position\\n const contentDiv = card.querySelector('.bifa-ambassador-content');\\n card.insertBefore(imageContainer, contentDiv);\\n \\n return card;\\n }\\n \\n \\\/\\\/ Setup view all button\\n function setupViewAllButton() {\\n const ctaSection = document.getElementById('bifa-cta');\\n const button = document.getElementById('bifa-view-all-button');\\n const countBadge = button.querySelector('.bifa-ambassador-count');\\n \\n \\\/\\\/ Calculate hidden cards\\n const hiddenCards = ambassadors.length - visibleCards;\\n \\n \\\/\\\/ Show\\\/hide button based on card count\\n if (hiddenCards > 0) {\\n ctaSection.style.display = 'block';\\n countBadge.textContent = hiddenCards;\\n } else {\\n ctaSection.style.display = 'none';\\n }\\n }\\n \\n \\\/\\\/ Setup event listeners\\n function setupEventListeners() {\\n const button = document.getElementById('bifa-view-all-button');\\n if (button) {\\n button.addEventListener('click', toggleAllAmbassadors);\\n }\\n }\\n \\n \\\/\\\/ Toggle expand\\\/collapse\\n function toggleAllAmbassadors() {\\n const grid = document.getElementById('bifa-ambassadors-grid');\\n const button = document.getElementById('bifa-view-all-button');\\n const buttonText = button.querySelector('.bifa-button-text');\\n const countBadge = button.querySelector('.bifa-ambassador-count');\\n \\n CONFIG.isExpanded = !CONFIG.isExpanded;\\n \\n if (CONFIG.isExpanded) {\\n \\\/\\\/ Expand\\n grid.classList.add('expanded');\\n button.classList.add('expanded');\\n buttonText.textContent = 'Show Less';\\n countBadge.style.display = 'none';\\n \\n \\\/\\\/ Smooth scroll to newly visible cards\\n setTimeout(() => {\\n const fourthCard = document.querySelector('.bifa-ambassador-card:nth-child(4)');\\n if (fourthCard) {\\n const rect = fourthCard.getBoundingClientRect();\\n const scrollTop = window.pageYOffset || document.documentElement.scrollTop;\\n const targetY = rect.top + scrollTop - 100;\\n \\n window.scrollTo({\\n top: targetY,\\n behavior: 'smooth'\\n });\\n }\\n }, 100);\\n } else {\\n \\\/\\\/ Collapse\\n grid.classList.remove('expanded');\\n button.classList.remove('expanded');\\n buttonText.textContent = 'View All Ambassadors';\\n countBadge.style.display = 'inline-flex';\\n \\n \\\/\\\/ Update count\\n const hiddenCards = ambassadors.length - visibleCards;\\n countBadge.textContent = hiddenCards;\\n \\n \\\/\\\/ Scroll back to top of section\\n const section = document.querySelector('.bifa-ambassadors-section');\\n section.scrollIntoView({ behavior: 'smooth', block: 'start' });\\n }\\n }\\n \\n \\\/\\\/ Show empty state\\n function showEmptyState(grid) {\\n grid.innerHTML = `\\n <\/p>\n<div class=\"\\\"bifa-empty-container\\\"\" style=\"\\\"grid-column:\" 1\\-1;\\\">\\n <\/p>\n<div class=\"\\\"bifa-empty-icon\\\"\">\\ud83d\\udc65<\\\/div>\\n <\/p>\n<h3 class=\"\\\"bifa-empty-message\\\"\">No Ambassadors Yet<\\\/h3>\\n <\/p>\n<p class=\"\\\"bifa-empty-submessage\\\"\">We're currently recruiting ambassadors for BIFA programs.<\\\/p>\\n <\\\/div>\\n `;\\n }\\n \\n \\\/\\\/ Show error state\\n function showErrorState(grid, error) {\\n grid.innerHTML = `\\n <\/p>\n<div class=\"\\\"bifa-error-container\\\"\" style=\"\\\"grid-column:\" 1\\-1;\\\">\\n <\/p>\n<div class=\"\\\"bifa-error-icon\\\"\">\\u26a0\\ufe0f<\\\/div>\\n <\/p>\n<h3 class=\"\\\"bifa-error-message\\\"\">Unable to Load Ambassadors<\\\/h3>\\n <\/p>\n<p class=\"\\\"bifa-error-details\\\"\">${error.message}<\\\/p>\\n <button class=\"\\\"bifa-retry-button\\\"\" onclick=\"\\\"location.reload()\\\"\">\\n Retry\\n <\\\/button>\\n <\\\/div>\\n `;\\n }\\n \\n \\\/\\\/ Utility: Escape HTML\\n function escapeHtml(text) {\\n if (!text) return '';\\n const map = {\\n '&': '&',\\n '<': '<',\\n '>': '>',\\n '\\\"': '"',\\n \\\"'\\\": '''\\n };\\n return text.replace(\\\/[&<>\\\"']\\\/g, m => map[m]);\\n }\\n \\n \\\/\\\/ Utility: Debounce\\n function debounce(func, wait) {\\n let timeout;\\n return function executedFunction(...args) {\\n const later = () => {\\n clearTimeout(timeout);\\n func(...args);\\n };\\n clearTimeout(timeout);\\n timeout = setTimeout(later, wait);\\n };\\n }\\n \\n \\\/\\\/ Initialize when DOM is ready\\n if (document.readyState === 'loading') {\\n document.addEventListener('DOMContentLoaded', init);\\n } else {\\n init();\\n }\\n \\n})();\\n<\\\/script>\\n\\n<\\\/body>\\n<\\\/html>\"}},{\"type\":\"html\",\"props\":{\"content\":\"<!DOCTYPE html>\\n<html lang=\"\\\"ru\\\"\">\\n<head>\\n <meta charset=\"\\\"UTF-8\\\"\">\\n <meta name=\"\\\"viewport\\\"\" content=\"\\\"width=device-width,\" initial-scale=\"1.0\\\"\">\\n <title>BIFA+ - Partners & Sponsors<\\\/title>\\n \\n \\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&family=Cairo:wght@300;400;500;600;700;800&family=Tajawal:wght@300;400;500;700;800&display=swap\\\"\" rel=\"\\\"stylesheet\\\"\">\\n \\n <\/p>\n<style>\\n \\\/* ========= \\u0413\\u041b\\u041e\\u0411\\u0410\\u041b\\u042c\\u041d\\u042b\\u0415 \\u041f\\u0415\\u0420\\u0415\\u041c\\u0415\\u041d\\u041d\\u042b\\u0415 BIFA+ ========= *\\\/\\n :root {\\n \\\/* \\u041e\\u0444\\u0438\\u0446\\u0438\\u0430\\u043b\\u044c\\u043d\\u044b\\u0435 \\u0446\\u0432\\u0435\\u0442\\u0430 BIFA+ *\\\/\\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 \\\/* \\u041e\\u0444\\u0438\\u0446\\u0438\\u0430\\u043b\\u044c\\u043d\\u044b\\u0435 \\u0448\\u0440\\u0438\\u0444\\u0442\\u044b BIFA+ *\\\/\\n --bifa-font-heading: 'Montserrat', 'Cairo', sans-serif;\\n --bifa-font-body: 'Poppins', 'Tajawal', sans-serif;\\n --bifa-font-arabic: 'Cairo', 'Tajawal', 'GE SS Text', sans-serif;\\n }\\n\\n \\\/* ========= RESET ========= *\\\/\\n * {\\n box-sizing: border-box;\\n margin: 0;\\n padding: 0;\\n }\\n \\n body {\\n font-family: var(--bifa-font-body);\\n overflow-x: hidden;\\n background: var(--bifa-bright-white);\\n }\\n\\n \\\/* ========= \\u0410\\u041d\\u0418\\u041c\\u0410\\u0426\\u0418\\u0418 ========= *\\\/\\n @keyframes goldPulse {\\n 0%, 100% { opacity: 0.6; }\\n 50% { opacity: 1; }\\n }\\n\\n @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(50px);\\n opacity: 0;\\n }\\n }\\n \\n @keyframes fadeInDown {\\n from {\\n opacity: 0;\\n transform: translateY(-40px);\\n }\\n to {\\n opacity: 1;\\n transform: translateY(0);\\n }\\n }\\n\\n @keyframes fadeInUp {\\n from {\\n opacity: 0;\\n transform: translateY(40px);\\n }\\n to {\\n opacity: 1;\\n transform: translateY(0);\\n }\\n }\\n\\n @keyframes partners-pulse {\\n 0%, 100% { \\n filter: brightness(1.1) drop-shadow(0 0 10px rgba(212, 175, 55, 0.4)); \\n transform: scale(1);\\n }\\n 50% { \\n filter: brightness(1.3) drop-shadow(0 0 20px rgba(212, 175, 55, 0.6)); \\n transform: scale(1.02);\\n }\\n }\\n\\n @keyframes partners-twinkle {\\n 0%, 100% { \\n opacity: 0.3; \\n transform: scale(1); \\n }\\n 50% { \\n opacity: 1; \\n transform: scale(1.5); \\n }\\n }\\n\\n @keyframes partners-float-neon {\\n 0%, 100% {\\n transform: translate(0, 0) scale(1);\\n }\\n 33% {\\n transform: translate(50px, -80px) scale(1.1);\\n }\\n 66% {\\n transform: translate(-50px, 50px) scale(0.9);\\n }\\n }\\n\\n @keyframes partners-rotate-slow {\\n from { transform: rotate(0deg); }\\n to { transform: rotate(360deg); }\\n }\\n\\n @keyframes textRotate {\\n 0% {\\n opacity: 0;\\n transform: translateY(-50%) translateY(20px);\\n }\\n 10% {\\n opacity: 1;\\n transform: translateY(-50%) translateY(0);\\n }\\n 40% {\\n opacity: 1;\\n transform: translateY(-50%) translateY(0);\\n }\\n 50% {\\n opacity: 0;\\n transform: translateY(-50%) translateY(-20px);\\n }\\n 100% {\\n opacity: 0;\\n transform: translateY(-50%) translateY(-20px);\\n }\\n }\\n\\n @keyframes textGlow {\\n 0%, 100% {\\n text-shadow: \\n 0 0 10px rgba(212, 175, 55, 0.3),\\n 0 0 20px rgba(212, 175, 55, 0.2),\\n 0 0 30px rgba(212, 175, 55, 0.1);\\n filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.2));\\n }\\n 50% {\\n text-shadow: \\n 0 0 15px rgba(212, 175, 55, 0.5),\\n 0 0 30px rgba(212, 175, 55, 0.4),\\n 0 0 45px rgba(212, 175, 55, 0.3),\\n 0 0 60px rgba(212, 175, 55, 0.2);\\n filter: drop-shadow(0 0 25px rgba(212, 175, 55, 0.3));\\n }\\n }\\n\\n \\\/* ========= \\u041e\\u0421\\u041d\\u041e\\u0412\\u041d\\u041e\\u0419 \\u041a\\u041e\\u041d\\u0422\\u0415\\u0419\\u041d\\u0415\\u0420 ========= *\\\/\\n .partners-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 }\\n\\n \\\/* \\u0421\\u0432\\u044f\\u0437\\u0443\\u044e\\u0449\\u0430\\u044f \\u043b\\u0438\\u043d\\u0438\\u044f \\u0441 \\u043f\\u0440\\u0435\\u0434\\u044b\\u0434\\u0443\\u0449\\u0435\\u0439 \\u0441\\u0435\\u043a\\u0446\\u0438\\u0435\\u0439 *\\\/\\n .partners-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 }\\n\\n .bifa-partners-container {\\n position: relative;\\n padding: 80px 0;\\n background: transparent;\\n overflow: hidden;\\n }\\n\\n .bifa-partners-container::before {\\n content: '';\\n position: absolute;\\n inset: 0;\\n background: radial-gradient(circle at 30% 50%, rgba(212, 175, 55, 0.03), transparent 50%),\\n radial-gradient(circle at 70% 80%, rgba(10, 31, 68, 0.03), transparent 50%);\\n z-index: 0;\\n }\\n\\n \\\/* ========= \\u0427\\u0410\\u0421\\u0422\\u0418\\u0426\\u042b \\u0418 \\u0414\\u0415\\u041a\\u041e\\u0420\\u0410\\u0422\\u0418\\u0412\\u041d\\u042b\\u0415 \\u042d\\u041b\\u0415\\u041c\\u0415\\u041d\\u0422\\u042b ========= *\\\/\\n .bg-particles {\\n position: absolute;\\n width: 100%;\\n height: 100%;\\n overflow: hidden;\\n z-index: 2;\\n }\\n\\n .particle {\\n position: absolute;\\n width: 4px;\\n height: 4px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n border-radius: 50%;\\n animation: float 15s infinite linear;\\n box-shadow: 0 0 8px rgba(212, 175, 55, 0.3);\\n opacity: 0.3;\\n }\\n\\n .neon-elements {\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n overflow: hidden;\\n z-index: 0;\\n pointer-events: none;\\n }\\n\\n .neon-circle {\\n position: absolute;\\n border-radius: 50%;\\n filter: blur(40px);\\n animation: partners-float-neon 20s ease-in-out infinite;\\n }\\n\\n .neon-circle:nth-child(1) {\\n width: 300px;\\n height: 300px;\\n background: rgba(212, 175, 55, 0.08);\\n top: -150px;\\n left: -150px;\\n animation: partners-float-neon 18s ease-in-out infinite;\\n }\\n\\n .neon-circle:nth-child(2) {\\n width: 400px;\\n height: 400px;\\n background: rgba(10, 31, 68, 0.06);\\n bottom: -200px;\\n right: -200px;\\n animation: partners-float-neon 25s ease-in-out infinite;\\n animation-delay: 5s;\\n }\\n\\n .neon-circle:nth-child(3) {\\n width: 250px;\\n height: 250px;\\n background: rgba(29, 97, 67, 0.05);\\n top: 50%;\\n left: 50%;\\n transform: translate(-50%, -50%);\\n animation: partners-float-neon 30s ease-in-out infinite;\\n animation-delay: 10s;\\n }\\n\\n .glow-dot {\\n position: absolute;\\n width: 4px;\\n height: 4px;\\n background: rgba(212, 175, 55, 0.8);\\n border-radius: 50%;\\n box-shadow: 0 0 10px rgba(212, 175, 55, 0.8);\\n animation: partners-twinkle 3s ease-in-out infinite;\\n }\\n\\n .glow-dot:nth-child(6) {\\n top: 15%;\\n right: 10%;\\n animation-delay: 0s;\\n }\\n\\n .glow-dot:nth-child(7) {\\n bottom: 25%;\\n left: 8%;\\n animation-delay: 1.5s;\\n }\\n\\n .glow-dot:nth-child(8) {\\n top: 70%;\\n right: 30%;\\n animation-delay: 2.5s;\\n }\\n\\n \\\/* ========= \\u041a\\u041e\\u041d\\u0422\\u0415\\u041d\\u0422 ========= *\\\/\\n .content-wrapper {\\n position: relative;\\n z-index: 2;\\n max-width: 1400px;\\n margin: 0 auto;\\n padding: 0 40px;\\n }\\n\\n \\\/* ========= \\u0417\\u0410\\u0413\\u041e\\u041b\\u041e\\u0412\\u041e\\u041a \\u0421\\u0415\\u041a\\u0426\\u0418\\u0418 ========= *\\\/\\n .section-header {\\n text-align: center;\\n margin-bottom: 60px;\\n position: relative;\\n z-index: 1;\\n animation: fadeInDown 1.2s ease;\\n }\\n\\n .partners-title {\\n font-family: var(--bifa-font-heading);\\n font-size: clamp(3rem, 5vw, 4.5rem);\\n font-weight: 900;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n margin-bottom: 25px;\\n text-transform: uppercase;\\n position: relative;\\n cursor: pointer;\\n transition: all 0.3s ease;\\n text-decoration: none;\\n display: inline-block;\\n }\\n\\n .partners-title::after {\\n content: '';\\n position: absolute;\\n bottom: -10px;\\n left: 50%;\\n transform: translateX(-50%);\\n width: 0;\\n height: 3px;\\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700);\\n transition: width 0.4s ease;\\n }\\n\\n .partners-title:hover {\\n transform: translateY(-3px);\\n }\\n\\n .partners-title:hover::after {\\n width: 100%;\\n }\\n\\n \\\/* \\u041a\\u043e\\u043d\\u0442\\u0435\\u0439\\u043d\\u0435\\u0440 \\u0434\\u043b\\u044f \\u0430\\u043d\\u0438\\u043c\\u0430\\u0446\\u0438\\u0438 \\u0441\\u043c\\u0435\\u043d\\u044b \\u0442\\u0435\\u043a\\u0441\\u0442\\u043e\\u0432 *\\\/\\n .subtitle-container {\\n position: relative;\\n height: 60px;\\n margin-bottom: 20px;\\n overflow: visible;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n }\\n\\n .partners-subtitle,\\n .partners-slogan {\\n font-family: var(--bifa-font-body);\\n font-size: clamp(1.2rem, 2.5vw, 1.8rem);\\n color: var(--bifa-deep-navy);\\n font-weight: 600;\\n letter-spacing: 2px;\\n position: absolute;\\n width: 100%;\\n left: 0;\\n top: 50%;\\n transform: translateY(-50%);\\n margin: 0;\\n text-align: center;\\n opacity: 0;\\n z-index: 2;\\n }\\n\\n .partners-subtitle {\\n animation: textRotate 8s ease-in-out infinite;\\n }\\n\\n .partners-slogan {\\n font-family: var(--bifa-font-heading);\\n font-weight: 700;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n animation: textRotate 8s ease-in-out infinite, textGlow 2s ease-in-out infinite;\\n animation-delay: 4s, 4s;\\n }\\n\\n .partners-description {\\n max-width: 900px;\\n margin: 0 auto;\\n font-family: var(--bifa-font-body);\\n font-size: clamp(1rem, 1.5vw, 1.2rem);\\n line-height: 1.8;\\n color: #4a5568;\\n font-weight: 400;\\n opacity: 0;\\n animation: fadeInUp 1s ease forwards;\\n animation-delay: 2s;\\n }\\n\\n .highlight {\\n font-weight: 700;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n }\\n\\n \\\/* ========= \\u041a\\u0410\\u0422\\u0415\\u0413\\u041e\\u0420\\u0418\\u0418 \\u041f\\u0410\\u0420\\u0422\\u041d\\u0415\\u0420\\u041e\\u0412 ========= *\\\/\\n .partner-categories {\\n margin-bottom: 50px;\\n position: relative;\\n z-index: 1;\\n animation: fadeInUp 1s ease-out 0.2s both;\\n }\\n\\n .category-tabs {\\n display: flex;\\n justify-content: center;\\n gap: 20px;\\n flex-wrap: wrap;\\n }\\n\\n .category-tab {\\n padding: 14px 35px;\\n background: rgba(255, 255, 255, 0.95);\\n backdrop-filter: blur(10px);\\n border: 2px solid rgba(212, 175, 55, 0.2);\\n border-radius: 50px;\\n font-weight: 600;\\n color: var(--bifa-deep-navy);\\n cursor: pointer;\\n transition: all 0.3s ease;\\n font-size: 1rem;\\n text-transform: uppercase;\\n letter-spacing: 0.5px;\\n font-family: var(--bifa-font-heading);\\n box-shadow: 0 2px 10px rgba(212, 175, 55, 0.08);\\n position: relative;\\n overflow: hidden;\\n }\\n\\n .category-tab::before {\\n content: '';\\n position: absolute;\\n top: 0;\\n left: -100%;\\n width: 100%;\\n height: 100%;\\n background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.3), transparent);\\n transition: left 0.5s ease;\\n }\\n\\n .category-tab:hover::before {\\n left: 100%;\\n }\\n\\n .category-tab:hover {\\n transform: translateY(-3px);\\n box-shadow: 0 10px 30px rgba(212, 175, 55, 0.2);\\n border-color: var(--bifa-heritage-gold);\\n background: rgba(255, 255, 255, 1);\\n }\\n\\n .category-tab.active {\\n background: linear-gradient(135deg, var(--bifa-heritage-gold) 0%, #ffd700 100%);\\n color: var(--bifa-deep-navy);\\n border-color: transparent;\\n box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);\\n font-weight: 800;\\n }\\n\\n \\\/* ========= \\u0421\\u0415\\u0422\\u041a\\u0410 \\u041f\\u0410\\u0420\\u0422\\u041d\\u0415\\u0420\\u041e\\u0412 ========= *\\\/\\n .partners-grid {\\n display: grid;\\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\\n gap: 30px;\\n margin-bottom: 60px;\\n position: relative;\\n z-index: 1;\\n animation: fadeInUp 1s ease-out 0.4s both;\\n }\\n\\n .partner-card {\\n background: rgba(255, 255, 255, 0.98);\\n backdrop-filter: blur(10px);\\n border-radius: 20px;\\n overflow: hidden;\\n box-shadow: 0 2px 10px rgba(212, 175, 55, 0.08);\\n cursor: pointer;\\n transition: all 0.3s ease;\\n position: relative;\\n border: 2px solid rgba(212, 175, 55, 0.1);\\n height: 250px;\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n justify-content: center;\\n padding: 40px 30px;\\n }\\n\\n .partner-card::before {\\n content: '';\\n position: absolute;\\n top: 0;\\n left: 0;\\n right: 0;\\n bottom: 0;\\n background: radial-gradient(circle at center, rgba(212, 175, 55, 0.05) 0%, transparent 70%);\\n opacity: 0;\\n transition: opacity 0.4s ease;\\n }\\n\\n .partner-card:hover {\\n transform: translateY(-10px);\\n box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15);\\n border-color: rgba(212, 175, 55, 0.3);\\n }\\n\\n .partner-card:hover::before {\\n opacity: 1;\\n }\\n\\n .partner-tier-badge {\\n position: absolute;\\n top: 15px;\\n right: 15px;\\n padding: 5px 12px;\\n border-radius: 20px;\\n font-size: 10px;\\n font-weight: 700;\\n text-transform: uppercase;\\n letter-spacing: 0.5px;\\n font-family: var(--bifa-font-heading);\\n backdrop-filter: blur(10px);\\n z-index: 2;\\n }\\n\\n .tier-platinum {\\n background: linear-gradient(135deg, #e5e7eb 0%, #9ca3af 100%);\\n color: #1f2937;\\n box-shadow: 0 2px 10px rgba(156, 163, 175, 0.4);\\n }\\n\\n .tier-gold {\\n background: linear-gradient(135deg, var(--bifa-heritage-gold) 0%, #ffd700 100%);\\n color: var(--bifa-deep-navy);\\n box-shadow: 0 2px 10px rgba(212, 175, 55, 0.4);\\n }\\n\\n .tier-silver {\\n background: linear-gradient(135deg, #d1d5db 0%, #e5e7eb 100%);\\n color: #374151;\\n box-shadow: 0 2px 10px rgba(209, 213, 219, 0.4);\\n }\\n\\n .tier-media {\\n background: linear-gradient(135deg, var(--bifa-deep-navy) 0%, #162e5a 100%);\\n color: white;\\n box-shadow: 0 2px 10px rgba(10, 31, 68, 0.4);\\n }\\n .tier-strategic {\\n background: linear-gradient(135deg, var(--bifa-deep-navy) 0%, #162e5a 100%);\\n color: white;\\n box-shadow: 0 2px 10px rgba(10, 31, 68, 0.4);\\n }\\n .tier-institutional {\\n background: linear-gradient(135deg, var(--bifa-deep-navy) 0%, #162e5a 100%);\\n color: white;\\n box-shadow: 0 2px 10px rgba(10, 31, 68, 0.4);\\n }\\n\\n .partner-logo {\\n width: 100%;\\n max-width: 200px;\\n height: 100px;\\n object-fit: contain;\\n filter: grayscale(100%);\\n opacity: 0.7;\\n transition: all 0.3s ease;\\n position: relative;\\n z-index: 1;\\n }\\n\\n .partner-card:hover .partner-logo {\\n filter: grayscale(0%);\\n opacity: 1;\\n transform: scale(1.05);\\n }\\n\\n .partner-info {\\n text-align: center;\\n margin-top: 20px;\\n position: relative;\\n z-index: 1;\\n }\\n\\n .partner-name {\\n font-weight: 700;\\n color: var(--bifa-deep-navy);\\n font-size: 1.2rem;\\n margin-bottom: 5px;\\n transition: color 0.3s ease;\\n font-family: var(--bifa-font-heading);\\n }\\n\\n .partner-card:hover .partner-name {\\n color: var(--bifa-heritage-gold);\\n }\\n\\n .partner-description {\\n font-size: 0.9rem;\\n color: #64748b;\\n line-height: 1.4;\\n font-family: var(--bifa-font-body);\\n }\\n\\n \\\/* ========= CTA \\u0421\\u0415\\u041a\\u0426\\u0418\\u042f ========= *\\\/\\n .partners-cta {\\n text-align: center;\\n padding: 60px 40px;\\n background: linear-gradient(135deg, rgba(212, 175, 55, 0.05) 0%, rgba(212, 175, 55, 0.08) 100%);\\n backdrop-filter: blur(10px);\\n border-radius: 25px;\\n position: relative;\\n z-index: 1;\\n overflow: hidden;\\n animation: fadeInUp 1s ease-out 0.6s both;\\n border: 2px solid rgba(212, 175, 55, 0.2);\\n box-shadow: 0 2px 10px rgba(212, 175, 55, 0.08);\\n }\\n\\n .partners-cta::before {\\n content: '';\\n position: absolute;\\n top: -50%;\\n left: -50%;\\n width: 200%;\\n height: 200%;\\n background: radial-gradient(circle, rgba(212, 175, 55, 0.05) 0%, transparent 50%);\\n animation: partners-rotate-slow 20s linear infinite;\\n }\\n\\n .cta-title {\\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), #ffd700);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n margin-bottom: 20px;\\n position: relative;\\n z-index: 1;\\n }\\n\\n .cta-description {\\n font-size: 1.2rem;\\n color: var(--bifa-deep-navy);\\n margin-bottom: 30px;\\n line-height: 1.6;\\n position: relative;\\n z-index: 1;\\n font-family: var(--bifa-font-body);\\n }\\n\\n .cta-button {\\n display: inline-block;\\n padding: 18px 50px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold) 0%, #ffd700 100%);\\n color: var(--bifa-deep-navy);\\n text-decoration: none;\\n border-radius: 50px;\\n font-weight: 700;\\n font-size: 1.1rem;\\n text-transform: uppercase;\\n letter-spacing: 0.5px;\\n font-family: var(--bifa-font-heading);\\n transition: all 0.3s ease;\\n box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);\\n position: relative;\\n z-index: 1;\\n overflow: hidden;\\n }\\n\\n .cta-button::before {\\n content: '';\\n position: absolute;\\n top: 0;\\n left: -100%;\\n width: 100%;\\n height: 100%;\\n background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);\\n transition: left 0.5s ease;\\n }\\n\\n .cta-button:hover::before {\\n left: 100%;\\n }\\n\\n .cta-button:hover {\\n transform: translateY(-3px);\\n box-shadow: 0 15px 40px rgba(212, 175, 55, 0.4);\\n }\\n\\n \\\/* ========= \\u0421\\u041e\\u0421\\u0422\\u041e\\u042f\\u041d\\u0418\\u0415 \\u0417\\u0410\\u0413\\u0420\\u0423\\u0417\\u041a\\u0418 ========= *\\\/\\n .loading-container {\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n justify-content: center;\\n padding: 80px 20px;\\n text-align: center;\\n }\\n\\n .loading-content {\\n background: rgba(255, 255, 255, 0.95);\\n backdrop-filter: blur(10px);\\n border-radius: 20px;\\n padding: 40px 30px;\\n border: 2px solid rgba(212, 175, 55, 0.2);\\n box-shadow: 0 2px 10px rgba(212, 175, 55, 0.08);\\n position: relative;\\n overflow: hidden;\\n }\\n\\n .loading-icon {\\n font-size: 48px;\\n margin-bottom: 20px;\\n animation: partners-pulse 2s ease-in-out infinite;\\n }\\n\\n .loading-title {\\n font-size: 1.8rem;\\n font-weight: 700;\\n color: var(--bifa-deep-navy);\\n margin-bottom: 10px;\\n font-family: var(--bifa-font-heading);\\n }\\n\\n .loading-subtitle {\\n font-size: 1rem;\\n color: #64748b;\\n font-family: var(--bifa-font-body);\\n }\\n\\n \\\/* ========= RESPONSIVE DESIGN ========= *\\\/\\n @media (max-width: 1024px) {\\n .content-wrapper {\\n padding: 0 30px;\\n }\\n \\n .partners-grid {\\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\\n gap: 25px;\\n }\\n\\n .partners-title {\\n font-size: 3rem;\\n }\\n }\\n\\n @media (max-width: 768px) {\\n .content-wrapper {\\n padding: 0 20px;\\n }\\n\\n .partners-title {\\n font-size: 2.5rem;\\n }\\n\\n .subtitle-container {\\n height: 50px;\\n }\\n\\n .partners-subtitle,\\n .partners-slogan {\\n font-size: 1.2rem;\\n }\\n\\n .partners-grid {\\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\\n gap: 20px;\\n }\\n\\n .partner-card {\\n height: 220px;\\n padding: 30px 20px;\\n }\\n\\n .cta-title {\\n font-size: 2rem;\\n }\\n\\n .cta-button {\\n padding: 15px 40px;\\n font-size: 1rem;\\n }\\n\\n .category-tab {\\n padding: 12px 25px;\\n font-size: 0.9rem;\\n }\\n }\\n\\n @media (max-width: 480px) {\\n .partners-grid {\\n grid-template-columns: 1fr;\\n }\\n\\n .partners-title {\\n font-size: 2rem;\\n }\\n\\n .subtitle-container {\\n height: 30px;\\n margin-bottom: 15px;\\n padding: 10px 0;\\n }\\n\\n .partners-subtitle,\\n .partners-slogan {\\n font-size: 1rem;\\n letter-spacing: 1px;\\n }\\n }\\n <\\\/style>\\n<\\\/head>\\n<body>\\n <\/p>\n<div class=\"\\\"partners-section-wrapper\\\"\">\\n \\n <\/p>\n<div class=\"\\\"bg-particles\\\"\"><\\\/div>\\n\\n \\n <\/p>\n<section class=\"\\\"bifa-partners-container\\\"\">\\n \\n <\/p>\n<div class=\"\\\"neon-elements\\\"\">\\n <\/p>\n<div class=\"\\\"neon-circle\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"neon-circle\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"neon-circle\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"glow-dot\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"glow-dot\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"glow-dot\\\"\"><\\\/div>\\n <\\\/div>\\n\\n <\/p>\n<div class=\"\\\"content-wrapper\\\"\">\\n \\n <\/p>\n<div class=\"\\\"section-header\\\"\">\\n <\/p>\n<div class=\"\\\"partners-title\\\"\">Partners & Sponsors<\\\/div>\\n <\/p>\n<div class=\"\\\"subtitle-container\\\"\">\\n <\/p>\n<p class=\"\\\"partners-subtitle\\\"\">Together we create the future of Global South cooperation<\\\/p>\\n <\/p>\n<p class=\"\\\"partners-slogan\\\"\">Play with Spirit. Leading with Vision.<\\\/p>\\n <\\\/div>\\n <\/p>\n<p class=\"\\\"partners-description\\\"\">\\n A global network of <span class=\"\\\"highlight\\\"\">strategic partners<\\\/span> and \\n <span class=\"\\\"highlight\\\"\">innovative sponsors<\\\/span> supporting BIFA+'s mission to unite the \\n <span class=\"\\\"highlight\\\"\">Global South<\\\/span> through football, cultural exchange, and \\n <span class=\"\\\"highlight\\\"\">sports diplomacy<\\\/span>. From technology innovators to media giants, \\n our partners share our vision of creating bridges between nations and empowering the next generation.\\n <\\\/p>\\n <\\\/div>\\n\\n \\n <\/p>\n<div class=\"\\\"partner-categories\\\"\">\\n <\/p>\n<div class=\"\\\"category-tabs\\\"\">\\n <button class=\"\\\"category-tab\" active\\\" onclick=\"\\\"filterPartners('all')\\\"\">All Partners<\\\/button>\\n <button class=\"\\\"category-tab\\\"\" onclick=\"\\\"filterPartners('platinum')\\\"\">Platinum<\\\/button>\\n <button class=\"\\\"category-tab\\\"\" onclick=\"\\\"filterPartners('gold')\\\"\">Gold<\\\/button>\\n <button class=\"\\\"category-tab\\\"\" onclick=\"\\\"filterPartners('silver')\\\"\">Silver<\\\/button>\\n <button class=\"\\\"category-tab\\\"\" onclick=\"\\\"filterPartners('media')\\\"\">Media Partners<\\\/button>\\n <button class=\"\\\"category-tab\\\"\" onclick=\"\\\"filterPartners('strategic')\\\"\">Strategic Partners<\\\/button>\\n <button class=\"\\\"category-tab\\\"\" onclick=\"\\\"filterPartners('institutional')\\\"\">Institutional Partners<\\\/button>\\n <\\\/div>\\n <\\\/div>\\n\\n \\n <\/p>\n<div class=\"\\\"partners-grid\\\"\" id=\"\\\"partnersGrid\\\"\">\\n <\/p>\n<div class=\"\\\"loading-container\\\"\">\\n <\/p>\n<div class=\"\\\"loading-content\\\"\">\\n <\/p>\n<div class=\"\\\"loading-icon\\\"\">\\u2728<\\\/div>\\n <\/p>\n<h3 class=\"\\\"loading-title\\\"\">Building Together<\\\/h3>\\n <\/p>\n<p class=\"\\\"loading-subtitle\\\"\"> BIFA collaborates with governments, clubs, and innovators to grow football across the Global South. Official partners will be announced soon.<\\\/p>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n\\n \\n <\/p>\n<div class=\"\\\"partners-cta\\\"\">\\n <\/p>\n<h3 class=\"\\\"cta-title\\\"\">Join the Global BIFA+ Movement<\\\/h3>\\n <\/p>\n<p class=\"\\\"cta-description\\\"\">Partner with us to create a new future for international sports cooperation and Global South unity<\\\/p>\\n <a href=\"\\\"https:\\\/\\\/bifa.ai\\\/partners\\\/\\\"\" class=\"\\\"cta-button\\\"\">Partner with Us<\\\/a>\\n <\\\/div>\\n <\\\/div>\\n <\\\/section>\\n <\\\/div>\\n\\n <script>\\n \\\/\\\/ Partner data will be loaded from API\\n let partnersData = [];\\n\\n \\\/\\\/ Function to load partners from backend\\n async function loadPartners() {\\n try {\\n const response = await fetch('\\\/wp-json\\\/bifa\\\/v1\\\/partners');\\n if (!response.ok) {\\n throw new Error('Failed to load partners');\\n }\\n const data = await response.json();\\n partnersData = data;\\n displayPartners('all');\\n } catch (error) {\\n console.error('Error loading partners:', error);\\n showError();\\n }\\n }\\n\\n \\\/\\\/ Function to display partners\\n function displayPartners(filterType = 'all') {\\n const grid = document.getElementById('partnersGrid');\\n grid.innerHTML = '';\\n\\n \\\/\\\/ Filter partners\\n const filteredPartners = filterType === 'all' \\n ? partnersData \\n : partnersData.filter(partner => partner.type === filterType);\\n\\n \\\/\\\/ Sort by order\\n filteredPartners.sort((a, b) => a.order - b.order);\\n\\n if (filteredPartners.length === 0) {\\n grid.innerHTML = `\\n <\/p>\n<div class=\"\\\"loading-container\\\"\" style=\"\\\"grid-column:\" 1 \\>\\n <\/p>\n<div class=\"\\\"loading-content\\\"\">\\n <\/p>\n<div class=\"\\\"loading-icon\\\"\">\\ud83e\\udd1d<\\\/div>\\n <\/p>\n<h3 class=\"\\\"loading-title\\\"\">Building Together<\\\/h3>\\n <\/p>\n<p class=\"\\\"loading-subtitle\\\"\">BIFA collaborates with governments, clubs, and innovators to grow football across the Global South. Official partners will be announced soon<\\\/p>\\n <\\\/div>\\n <\\\/div>\\n `;\\n return;\\n }\\n\\n \\\/\\\/ Create partner cards\\n filteredPartners.forEach(partner => {\\n const card = createPartnerCard(partner);\\n grid.appendChild(card);\\n });\\n\\n \\\/\\\/ Add animation delay to cards\\n const cards = grid.querySelectorAll('.partner-card');\\n cards.forEach((card, index) => {\\n card.style.animationDelay = `${index * 0.1}s`;\\n });\\n }\\n\\n \\\/\\\/ Function to create partner card\\n function createPartnerCard(partner) {\\n const card = document.createElement('div');\\n card.className = 'partner-card';\\n card.style.animation = 'fadeInUp 0.6s ease-out both';\\n\\n \\\/\\\/ Tier badge\\n const tierBadge = document.createElement('div');\\n tierBadge.className = `partner-tier-badge tier-${partner.type}`;\\n tierBadge.textContent = partner.type;\\n\\n \\\/\\\/ Logo\\n const logo = document.createElement('img');\\n logo.className = 'partner-logo';\\n logo.src = partner.logo_url;\\n logo.alt = partner.name;\\n logo.loading = 'lazy';\\n\\n \\\/\\\/ Info container\\n const info = document.createElement('div');\\n info.className = 'partner-info';\\n\\n const name = document.createElement('h3');\\n name.className = 'partner-name';\\n name.textContent = partner.name;\\n\\n const description = document.createElement('p');\\n description.className = 'partner-description';\\n description.textContent = partner.description || '';\\n\\n info.appendChild(name);\\n if (partner.description) {\\n info.appendChild(description);\\n }\\n\\n \\\/\\\/ Assemble card\\n card.appendChild(tierBadge);\\n card.appendChild(logo);\\n card.appendChild(info);\\n\\n \\\/\\\/ Add click handler\\n if (partner.website) {\\n card.style.cursor = 'pointer';\\n card.onclick = () => window.open(partner.website, '_blank');\\n }\\n\\n return card;\\n }\\n\\n \\\/\\\/ Function to filter partners\\n function filterPartners(type) {\\n \\\/\\\/ Update active tab\\n document.querySelectorAll('.category-tab').forEach(tab => {\\n tab.classList.remove('active');\\n });\\n event.target.classList.add('active');\\n\\n \\\/\\\/ Display filtered partners\\n displayPartners(type);\\n }\\n\\n \\\/\\\/ Function to show error state\\n function showError() {\\n const grid = document.getElementById('partnersGrid');\\n grid.innerHTML = `\\n <\/p>\n<div class=\"\\\"loading-container\\\"\" style=\"\\\"grid-column:\" 1 \\>\\n <\/p>\n<div class=\"\\\"loading-content\\\"\">\\n <\/p>\n<div class=\"\\\"loading-icon\\\"\">\\u26a0\\ufe0f<\\\/div>\\n <\/p>\n<h3 class=\"\\\"loading-title\\\"\">Loading Error<\\\/h3>\\n <\/p>\n<p class=\"\\\"loading-subtitle\\\"\">Please refresh the page<\\\/p>\\n <\\\/div>\\n <\\\/div>\\n `;\\n }\\n\\n \\\/\\\/ Initialize on page load\\n document.addEventListener('DOMContentLoaded', function() {\\n loadPartners();\\n\\n \\\/\\\/ Create optimized floating particles (reduced count for performance)\\n const particlesContainer = document.querySelector('.bg-particles');\\n const particleCount = 15; \\\/\\\/ Reduced for better performance\\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() * 15 + 's';\\n particle.style.animationDuration = (12 + Math.random() * 6) + 's';\\n \\n const size = 3 + Math.random() * 3; \\\/\\\/ Smaller particles\\n particle.style.width = size + 'px';\\n particle.style.height = size + 'px';\\n \\n particlesContainer.appendChild(particle);\\n }\\n });\\n <\\\/script>\\n<\\\/body>\\n<\\\/html>\"}}]}]}]},{\"type\":\"section\",\"props\":{\"image_position\":\"center-center\",\"style\":\"default\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"default\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"}}]}]}],\"version\":\"4.5.32\"} --><\/p>","protected":false},"excerpt":{"rendered":"<p>BIFA+ \u2014 Video Section with Enhanced Player Welcome to BIFA+ BRICS International Football Alliance Uniting the Global South through football, youth development, and cultural exchange. A global sports and cultural alliance connecting the Global South through football, innovation, and youth empowerment. Founded by Dr. Salim Humaid Almazaini from the UAE, BIFA+ creates bridges between nations […]<\/p>","protected":false},"author":0,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bifa.ai\/pt\/wp-json\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bifa.ai\/pt\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bifa.ai\/pt\/wp-json\/wp\/v2\/types\/page"}],"replies":[{"embeddable":true,"href":"https:\/\/bifa.ai\/pt\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":102,"href":"https:\/\/bifa.ai\/pt\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":1116,"href":"https:\/\/bifa.ai\/pt\/wp-json\/wp\/v2\/pages\/7\/revisions\/1116"}],"wp:attachment":[{"href":"https:\/\/bifa.ai\/pt\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n
\n
\n
\n
\nBIFA+ \u2014 Video Section with Enhanced Player<\/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&family=Cairo:wght@300;400;500;600;700;800&family=Tajawal:wght@300;400;500;700;800&display=swap\" rel=\"stylesheet\">\n<style>\n\/* ========= \u0413\u041b\u041e\u0411\u0410\u041b\u042c\u041d\u042b\u0415 \u041f\u0415\u0420\u0415\u041c\u0415\u041d\u041d\u042b\u0415 BIFA+ ========= *\/\n:root {\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 --bifa-font-heading: 'Montserrat', 'Cairo', sans-serif;\n --bifa-font-body: 'Poppins', 'Tajawal', sans-serif;\n --bifa-font-arabic: 'Cairo', 'Tajawal', 'GE SS Text', sans-serif;\n}<\/p>\n<p>* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}<\/p>\n<p>body {\n font-family: var(--bifa-font-body);\n overflow-x: hidden;\n background: var(--bifa-bright-white);\n}<\/p>\n<p>\/* \u041e\u041f\u0422\u0418\u041c\u0418\u0417\u0410\u0426\u0418\u042f: \u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d contain \u0434\u043b\u044f \u0438\u0437\u043e\u043b\u044f\u0446\u0438\u0438 *\/\n.video-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 contain: layout style paint;\n}<\/p>\n<p>.video-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 will-change: opacity;\n}<\/p>\n<p>@keyframes goldPulse {\n 0%, 100% { opacity: 0.6; }\n 50% { opacity: 1; }\n}<\/p>\n<p>.bifa-video-section {\n min-height: 100vh;\n padding: 80px 0;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n}<\/p>\n<p>\/* \u041e\u041f\u0422\u0418\u041c\u0418\u0417\u0410\u0426\u0418\u042f: \u0423\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0447\u0430\u0441\u0442\u0438\u0446 \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d GPU acceleration *\/\n.bg-particles {\n position: absolute;\n width: 100%;\n height: 100%;\n overflow: hidden;\n z-index: 2;\n will-change: auto;\n contain: layout style paint;\n}<\/p>\n<p>.particle {\n position: absolute;\n width: 4px;\n height: 4px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n border-radius: 50%;\n animation: float 15s infinite linear;\n box-shadow: 0 0 8px rgba(212, 175, 55, 0.3);\n opacity: 0.3;\n will-change: transform;\n transform: translateZ(0);\n backface-visibility: hidden;\n}<\/p>\n<p>@keyframes float {\n 0% {\n transform: translateY(100vh) translateX(0) translateZ(0);\n opacity: 0;\n }\n 15% { opacity: 1; }\n 85% { opacity: 1; }\n 100% {\n transform: translateY(-100vh) translateX(50px) translateZ(0);\n opacity: 0;\n }\n}<\/p>\n<p>.video-container {\n max-width: 1400px;\n width: 90%;\n margin: 0 auto;\n position: relative;\n z-index: 10;\n}<\/p>\n<p>.about-header {\n text-align: center;\n margin-bottom: 60px;\n animation: fadeInDown 1.2s ease;\n overflow: visible;\n position: relative;\n}<\/p>\n<p>@keyframes fadeInDown {\n from {\n opacity: 0;\n transform: translateY(-40px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>.about-title {\n font-family: var(--bifa-font-heading);\n font-size: clamp(3rem, 5vw, 4.5rem);\n font-weight: 900;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n margin-bottom: 25px;\n text-transform: uppercase;\n position: relative;\n cursor: pointer;\n transition: all 0.3s ease;\n text-decoration: none;\n display: inline-block;\n will-change: transform;\n}<\/p>\n<p>.about-title::after {\n content: '';\n position: absolute;\n bottom: -10px;\n left: 50%;\n transform: translateX(-50%);\n width: 0;\n height: 3px;\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700);\n transition: width 0.4s ease;\n}<\/p>\n<p>.about-title:hover {\n transform: translateY(-3px);\n}<\/p>\n<p>.about-title:hover::after {\n width: 100%;\n}<\/p>\n<p>.subtitle-container {\n position: relative;\n height: 60px;\n margin-bottom: 20px;\n overflow: visible;\n display: flex;\n align-items: center;\n justify-content: center;\n}<\/p>\n<p>.about-subtitle,\n.about-slogan {\n font-family: var(--bifa-font-body);\n font-size: clamp(1.2rem, 2.5vw, 1.8rem);\n color: var(--bifa-deep-navy);\n font-weight: 600;\n letter-spacing: 2px;\n position: absolute;\n width: 100%;\n left: 0;\n top: 50%;\n transform: translateY(-50%);\n margin: 0;\n text-align: center;\n opacity: 0;\n z-index: 2;\n}<\/p>\n<p>.about-subtitle {\n animation: textRotate 8s ease-in-out infinite;\n}<\/p>\n<p>.about-slogan {\n font-family: var(--bifa-font-heading);\n font-weight: 700;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n animation: textRotate 8s ease-in-out infinite, textGlow 2s ease-in-out infinite;\n animation-delay: 4s, 4s;\n}<\/p>\n<p>@keyframes textRotate {\n 0% {\n opacity: 0;\n transform: translateY(-50%) translateY(20px);\n }\n 10% {\n opacity: 1;\n transform: translateY(-50%) translateY(0);\n }\n 40% {\n opacity: 1;\n transform: translateY(-50%) translateY(0);\n }\n 50% {\n opacity: 0;\n transform: translateY(-50%) translateY(-20px);\n }\n 100% {\n opacity: 0;\n transform: translateY(-50%) translateY(-20px);\n }\n}<\/p>\n<p>@keyframes textGlow {\n 0%, 100% {\n text-shadow: \n 0 0 10px rgba(212, 175, 55, 0.3),\n 0 0 20px rgba(212, 175, 55, 0.2),\n 0 0 30px rgba(212, 175, 55, 0.1);\n filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.2));\n }\n 50% {\n text-shadow: \n 0 0 15px rgba(212, 175, 55, 0.5),\n 0 0 30px rgba(212, 175, 55, 0.4),\n 0 0 45px rgba(212, 175, 55, 0.3),\n 0 0 60px rgba(212, 175, 55, 0.2);\n filter: drop-shadow(0 0 25px rgba(212, 175, 55, 0.3));\n }\n}<\/p>\n<p>.about-slogan::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 400%;\n height: 300%;\n background: radial-gradient(ellipse at center, \n rgba(212, 175, 55, 0.12) 0%, \n rgba(212, 175, 55, 0.08) 20%, \n rgba(212, 175, 55, 0.05) 40%, \n rgba(212, 175, 55, 0.02) 60%,\n transparent 80%\n );\n z-index: -1;\n opacity: 0;\n animation: glowPulse 2s ease-in-out infinite;\n animation-delay: 4s;\n pointer-events: none;\n filter: blur(10px);\n}<\/p>\n<p>@keyframes glowPulse {\n 0%, 100% {\n opacity: 0.5;\n transform: translate(-50%, -50%) scale(0.8);\n }\n 50% {\n opacity: 1;\n transform: translate(-50%, -50%) scale(1.2);\n }\n}<\/p>\n<p>.subtitle-container::before,\n.subtitle-container::after {\n content: '';\n position: absolute;\n width: 50px;\n height: 1px;\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent);\n top: 50%;\n transform: translateY(-50%);\n opacity: 0;\n animation: lineExpand 8s ease-in-out infinite;\n}<\/p>\n<p>.subtitle-container::before {\n left: 10%;\n}<\/p>\n<p>.subtitle-container::after {\n right: 10%;\n}<\/p>\n<p>@keyframes lineExpand {\n 0%, 50%, 100% {\n width: 0;\n opacity: 0;\n }\n 45%, 55% {\n width: 50px;\n opacity: 1;\n }\n}<\/p>\n<p>.about-description {\n max-width: 900px;\n margin: 0 auto;\n font-family: var(--bifa-font-body);\n font-size: clamp(1rem, 1.5vw, 1.2rem);\n line-height: 1.8;\n color: #4a5568;\n font-weight: 400;\n opacity: 0;\n animation: fadeInDescription 1s ease forwards;\n animation-delay: 2s;\n}<\/p>\n<p>@keyframes fadeInDescription {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>.highlight {\n font-weight: 700;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n}<\/p>\n<p>\/* \u041e\u041f\u0422\u0418\u041c\u0418\u0417\u0410\u0426\u0418\u042f: \u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d GPU acceleration *\/\n.video-wrapper {\n position: relative;\n width: 100%;\n padding-bottom: 56.25%;\n border-radius: 25px;\n background: linear-gradient(135deg, var(--bifa-deep-navy) 0%, #162e5a 100%);\n overflow: hidden;\n box-shadow: \n 0 25px 80px rgba(10, 31, 68, 0.15),\n 0 0 0 1px rgba(212, 175, 55, 0.1),\n inset 0 1px 0 rgba(255, 255, 255, 0.1);\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n will-change: transform;\n transform: translateZ(0);\n}<\/p>\n<p>\/* \u041e\u041f\u0422\u0418\u041c\u0418\u0417\u0418\u0420\u041e\u0412\u0410\u041d\u041e: \u0423\u043f\u0440\u043e\u0449\u0435\u043d loading screen *\/\n.video-loading-overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: #f8f9fa !important;\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-container {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: #f8f9fa !important;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n}<\/p>\n<p>.loading-iframe {\n position: absolute;\n border: none;\n background: #f8f9fa !important;\n width: 100vw;\n height: 100vh;\n min-width: 768px;\n min-height: 600px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n transform-origin: center center;\n}<\/p>\n<p>@media (max-width: 768px) {\n .loading-iframe {\n transform: translate(-50%, -50%) scale(0.6);\n }\n}<\/p>\n<p>@media (max-width: 480px) {\n .loading-iframe {\n transform: translate(-50%, -50%) scale(0.45);\n }\n}<\/p>\n<p>.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: #f8f9fa !important;\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), #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n text-align: center;\n margin-bottom: 20px;\n}<\/p>\n<p>.loader-progress {\n width: 200px;\n height: 4px;\n background: rgba(212, 175, 55, 0.2);\n border-radius: 2px;\n overflow: hidden;\n}<\/p>\n<p>.loader-progress-bar {\n width: 0%;\n height: 100%;\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700);\n border-radius: 2px;\n animation: loadingProgress 3s ease-in-out infinite;\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(-5px) translateZ(0);\n box-shadow: \n 0 35px 100px rgba(10, 31, 68, 0.2),\n 0 0 0 1px rgba(212, 175, 55, 0.2),\n inset 0 1px 0 rgba(255, 255, 255, 0.1);\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>\/* ========= VIDEO ERROR OVERLAY ========= *\/\n.video-error-overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(135deg, var(--bifa-deep-navy) 0%, #162e5a 100%);\n display: none;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n z-index: 90;\n border-radius: 25px;\n}<\/p>\n<p>.video-error-overlay.active {\n display: flex;\n}<\/p>\n<p>.error-icon {\n width: 80px;\n height: 80px;\n margin-bottom: 20px;\n opacity: 0.7;\n}<\/p>\n<p>.error-icon svg {\n width: 100%;\n height: 100%;\n fill: var(--bifa-heritage-gold);\n}<\/p>\n<p>.error-message {\n font-family: var(--bifa-font-heading);\n font-size: 1.2rem;\n color: rgba(255, 255, 255, 0.9);\n text-align: center;\n margin-bottom: 20px;\n}<\/p>\n<p>.error-retry-btn {\n padding: 12px 30px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n border: none;\n border-radius: 25px;\n font-family: var(--bifa-font-heading);\n font-size: 0.9rem;\n font-weight: 700;\n color: var(--bifa-deep-navy);\n cursor: pointer;\n transition: transform 0.2s ease, box-shadow 0.2s ease;\n}<\/p>\n<p>.error-retry-btn:hover {\n transform: scale(1.05);\n box-shadow: 0 10px 30px rgba(212, 175, 55, 0.4);\n}<\/p>\n<p>\/* ========= 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.video-wrapper.controls-visible .controls {\n opacity: 1;\n visibility: visible;\n transform: translateY(0);\n}<\/p>\n<p>\/* Touch: \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044b \u043f\u0440\u0438 \u0442\u0430\u043f\u0435 *\/\n.video-wrapper.touch-active .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>\/* \u041e\u041f\u0422\u0418\u041c\u0418\u0417\u0410\u0426\u0418\u042f: \u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d GPU acceleration *\/\n.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 will-change: transform;\n transform: translateZ(0);\n}<\/p>\n<p>\/* \u0424\u043e\u043a\u0443\u0441\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f accessibility *\/\n.ctrl-btn:focus,\n.fullscreen-btn:focus {\n outline: none;\n box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.5);\n}<\/p>\n<p>.ctrl-btn:focus-visible,\n.fullscreen-btn:focus-visible {\n outline: none;\n box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.8);\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) translateZ(0);\n background: var(--bifa-heritage-gold);\n}<\/p>\n<p>.ctrl-btn:active {\n transform: scale(0.95) translateZ(0);\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>\/* \u0411\u0443\u0444\u0435\u0440 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 *\/\n.progress-buffer {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n background: rgba(255, 255, 255, 0.4);\n border-radius: 4px;\n width: 0;\n transition: width 0.3s ease;\n}<\/p>\n<p>.progress-bar {\n width: 0;\n height: 100%;\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700);\n transition: width 0.1s linear;\n border-radius: 4px;\n position: relative;\n z-index: 2;\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: #ffd700;\n border-radius: 50%;\n box-shadow: 0 0 10px rgba(212, 175, 55, 0.6);\n opacity: 0;\n transition: opacity 0.2s ease;\n}<\/p>\n<p>.progress:hover .progress-bar::after,\n.progress.dragging .progress-bar::after {\n opacity: 1;\n}<\/p>\n<p>\/* \u0423\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u043d\u0430\u044f \u0437\u043e\u043d\u0430 \u043a\u043b\u0438\u043a\u0430 \u0434\u043b\u044f progress *\/\n.progress::before {\n content: '';\n position: absolute;\n top: -10px;\n left: 0;\n right: 0;\n bottom: -10px;\n z-index: 1;\n}<\/p>\n<p>.time-display {\n color: 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: 100px;\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), #ffd700);\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 will-change: transform;\n transform: translateZ(0);\n}<\/p>\n<p>.fullscreen-btn svg {\n width: 24px;\n height: 24px;\n fill: var(--bifa-deep-navy);\n pointer-events: none;\n}<\/p>\n<p>.fullscreen-btn:hover {\n transform: scale(1.1) translateZ(0);\n background: var(--bifa-heritage-gold);\n}<\/p>\n<p>\/* ========= KEYBOARD HINT ========= *\/\n.keyboard-hint {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background: rgba(10, 31, 68, 0.9);\n padding: 15px 25px;\n border-radius: 10px;\n font-family: var(--bifa-font-heading);\n font-size: 1rem;\n color: white;\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.3s ease, visibility 0.3s ease;\n pointer-events: none;\n z-index: 50;\n text-align: center;\n}<\/p>\n<p>.keyboard-hint.visible {\n opacity: 1;\n visibility: visible;\n}<\/p>\n<p>.keyboard-hint kbd {\n display: inline-block;\n background: var(--bifa-heritage-gold);\n color: var(--bifa-deep-navy);\n padding: 4px 10px;\n border-radius: 5px;\n font-weight: 700;\n margin: 0 5px;\n}<\/p>\n<p>.video-content {\n margin-top: 60px;\n text-align: center;\n animation: fadeInUp 1.2s ease;\n}<\/p>\n<p>@keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(40px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>.stats-bar {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n gap: 80px;\n margin-bottom: 50px;\n padding: 40px 0;\n background: linear-gradient(135deg, rgba(212, 175, 55, 0.05) 0%, rgba(212, 175, 55, 0.08) 100%);\n border-radius: 20px;\n backdrop-filter: blur(10px);\n position: relative;\n}<\/p>\n<p>.stats-bar::after {\n content: '*As of 2024, based on World Bank\/UN data.';\n position: absolute;\n bottom: 10px;\n left: 50%;\n transform: translateX(-50%);\n font-size: 0.75rem;\n color: #999;\n font-family: var(--bifa-font-body);\n font-style: italic;\n}<\/p>\n<p>.stat-item {\n text-align: center;\n position: relative;\n}<\/p>\n<p>.stat-number {\n font-family: var(--bifa-font-heading);\n font-size: 3rem;\n font-weight: 900;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n margin-bottom: 8px;\n}<\/p>\n<p>.stat-label {\n font-family: var(--bifa-font-heading);\n font-size: 0.9rem;\n font-weight: 600;\n letter-spacing: 1px;\n text-transform: uppercase;\n color: var(--bifa-deep-navy);\n}<\/p>\n<p>.video-slogan {\n max-width: 900px;\n margin: 0 auto 50px;\n padding: 0 20px;\n font-size: clamp(1.1rem, 2vw, 1.4rem);\n line-height: 1.7;\n color: var(--bifa-deep-navy);\n font-family: var(--bifa-font-body);\n}<\/p>\n<p>.slogan-main {\n display: block;\n font-family: var(--bifa-font-heading);\n font-weight: 700;\n font-size: clamp(1.3rem, 2.2vw, 1.6rem);\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n margin-bottom: 15px;\n}<\/p>\n<p>.buttons-container {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n gap: 30px;\n}<\/p>\n<p>\/* \u041a\u041d\u041e\u041f\u041a\u0418: \u0416\u0418\u0420\u041d\u042b\u0419 \u0411\u0415\u041b\u042b\u0419 \u0422\u0415\u041a\u0421\u0422 \u0421 \u041f\u0420\u0418\u041e\u0420\u0418\u0422\u0415\u0422\u041e\u041c *\/\n.cta-button {\n padding: 20px 45px;\n font-family: var(--bifa-font-heading);\n font-size: 1rem;\n font-weight: 900 !important;\n text-transform: uppercase;\n border-radius: 50px;\n text-decoration: none;\n position: relative;\n overflow: hidden;\n transition: all 0.3s ease;\n letter-spacing: 1px;\n color: #FFFFFF !important;\n border: 2px solid transparent;\n text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;\n will-change: transform;\n transform: translateZ(0);\n}<\/p>\n<p>.cta-button.primary {\n background: linear-gradient(135deg, var(--bifa-deep-navy) 0%, #162e5a 100%);\n box-shadow: 0 15px 40px rgba(10, 31, 68, 0.3);\n}<\/p>\n<p>.cta-button.secondary {\n background: linear-gradient(135deg, var(--bifa-civic-green) 0%, #2a8a5e 100%);\n box-shadow: 0 15px 40px rgba(29, 97, 67, 0.3);\n}<\/p>\n<p>.cta-button:hover {\n transform: translateY(-5px) translateZ(0);\n}<\/p>\n<p>\/* \u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u044f \u0431\u0435\u043b\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430 *\/\n.cta-button * {\n color: #FFFFFF !important;\n}<\/p>\n<p>@media (max-width: 768px) {\n .bifa-video-section { padding: 60px 0; }\n .about-title { font-size: 2.5rem; }\n .subtitle-container { height: 50px; }\n .stats-bar { gap: 50px; padding: 30px 0 50px; }\n .stat-number { font-size: 2.2rem; }\n .buttons-container { flex-direction: column; align-items: center; }\n .cta-button { width: 280px; text-align: center; }\n .controls-row { gap: 10px; }\n .ctrl-btn { width: 42px; height: 42px; }\n .ctrl-btn svg { width: 20px; height: 20px; }\n .fullscreen-btn { width: 42px; height: 42px; }\n .fullscreen-btn svg { width: 20px; height: 20px; }\n .volume-slider { width: 60px; }\n .time-display { min-width: 80px; font-size: 12px; }\n}<\/p>\n<p>@media (max-width: 480px) {\n .about-title { font-size: 2rem; }\n .subtitle-container { height: 40px; margin-bottom: 15px; padding: 10px 0; }\n .about-subtitle, .about-slogan { font-size: 1rem; letter-spacing: 1px; }\n .video-wrapper { border-radius: 15px; }\n .cta-button { width: 250px; font-size: 0.9rem; padding: 18px 35px; }\n .controls { padding: 20px 15px 10px; }\n .ctrl-btn { width: 38px; height: 38px; }\n .ctrl-btn svg { width: 18px; height: 18px; }\n .fullscreen-btn { width: 38px; height: 38px; }\n .fullscreen-btn svg { width: 18px; height: 18px; }\n .volume-container { display: none; }\n .stats-bar { padding-bottom: 60px; }\n .time-display { min-width: 70px; }\n}<\/p>\n<p>\/* \u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0434\u043b\u044f iOS\/Safari *\/\n@supports (-webkit-touch-callout: none) {\n .ctrl-btn svg,\n .fullscreen-btn svg {\n transform: translateZ(0);\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n }\n}\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"video-section-wrapper\">\n<div class=\"bg-particles\"><\/div>\n<section class=\"bifa-video-section\">\n<div class=\"video-container\">\n<div class=\"about-header\">\n <a href=\"\/about\" class=\"about-title\">Bem-vindo \u00e0 BIFA+<\/a><\/p>\n<div class=\"subtitle-container\">\n<p class=\"about-subtitle\">Alian\u00e7a Internacional de Futebol do BRICS<\/p>\n<p class=\"about-slogan\">Unindo o Sul Global por meio do futebol, do desenvolvimento da juventude e do interc\u00e2mbio cultural.<\/p>\n<\/p><\/div>\n<p class=\"about-description\">\n Uma alian\u00e7a esportiva e cultural global que conecta os <span class=\"highlight\">Sul Global<\/span> through football,<br \/>\n innovation, and youth empowerment. Founded by Dr. <span class=\"highlight\">Salim Humaid Almazaini<\/span> from the UAE,<br \/>\n BIFA+ creates bridges between nations through <span class=\"highlight\">diplomacia esportiva<\/span>,<br \/>\n <span class=\"highlight\">interc\u00e2mbio cultural<\/span>e <span class=\"highlight\">integra\u00e7\u00e3o de tecnologia<\/span>.\n <\/p>\n<\/p><\/div>\n<div class=\"video-wrapper\" id=\"videoWrapper\" tabindex=\"0\" role=\"application\" aria-label=\"Video player\">\n <\/p>\n<div class=\"video-loading-overlay\" id=\"videoLoadingOverlay\">\n<div class=\"loading-iframe-container\">\n <iframe \n id=\"loadingIframe\"\n class=\"loading-iframe\"\n src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Logo\/Get.html\"\n title=\"Tela de carregamento do BIFA+\"\n loading=\"eager\"><br \/>\n <\/iframe>\n <\/div>\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\">\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:#ffd700\"\/>\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=\"#0A1F44\" font-family=\"Montserrat\" font-size=\"24\" font-weight=\"bold\">BIFA+<\/text>\n <\/svg>\n <\/div>\n<div class=\"loader-text\">Carregando BIFA+ Experience...<\/div>\n<div class=\"loader-progress\">\n<div class=\"loader-progress-bar\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"video-error-overlay\" id=\"videoErrorOverlay\">\n<div class=\"error-icon\">\n <svg viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"\/>\n <\/svg>\n <\/div>\n<div class=\"error-message\">Video failed to load<\/div>\n<p> <button class=\"error-retry-btn\" id=\"errorRetryBtn\">Try Again<\/button>\n <\/div>\n<p> <\/p>\n<div class=\"keyboard-hint\" id=\"keyboardHint\">\n <kbd>Space<\/kbd> Reproduzir\/Pausar\n <\/div>\n<p> <video id=\"heroVideo\" autoplay muted loop playsinline preload=\"metadata\"><source src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/video.mp4\" type=\"video\/mp4\">Seu navegador n\u00e3o suporta a tag de v\u00eddeo.<\/video><\/p>\n<div class=\"controls\" id=\"controls\">\n<div class=\"controls-row\">\n <button class=\"ctrl-btn\" id=\"playPause\" aria-label=\"Play\" aria-pressed=\"false\"><br \/>\n <svg viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M8 5v14l11-7z\"\/><\/svg><br \/>\n <\/button><\/p>\n<div class=\"progress-container\">\n<div class=\"progress\" id=\"progress\" role=\"slider\" aria-label=\"Progresso do v\u00eddeo\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"0\" tabindex=\"0\">\n<div class=\"progress-buffer\" id=\"progressBuffer\"><\/div>\n<div class=\"progress-bar\" id=\"progressBar\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"time-display\" id=\"timeDisplay\">0:00 \/ 0:00<\/div>\n<div class=\"volume-container\">\n <button class=\"ctrl-btn\" id=\"muteToggle\" aria-label=\"Mute\" aria-pressed=\"true\"><br \/>\n <svg viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M4 9v6h4l5 5V4L8 9H4z\"\/><\/svg><br \/>\n <\/button><\/p>\n<div class=\"volume-slider\" id=\"volumeSlider\" role=\"slider\" aria-label=\"Volume\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"100\" tabindex=\"0\">\n<div class=\"volume-bar\" id=\"volumeBar\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <button class=\"fullscreen-btn\" id=\"fullscreenBtn\" aria-label=\"Enter fullscreen\"><br \/>\n <svg viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z\"\/>\n <\/svg><br \/>\n <\/button>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"video-content\">\n<div class=\"stats-bar\">\n<div class=\"stat-item\">\n<div class=\"stat-number\">11+<\/div>\n<div class=\"stat-label\">Na\u00e7\u00f5es do Sul Global<\/div>\n<\/p><\/div>\n<div class=\"stat-item\">\n<div class=\"stat-number\">3.8B<\/div>\n<div class=\"stat-label\">Popula\u00e7\u00e3o Unida<\/div>\n<\/p><\/div>\n<div class=\"stat-item\">\n<div class=\"stat-number\">2024<\/div>\n<div class=\"stat-label\">Ano de funda\u00e7\u00e3o<\/div>\n<\/p><\/div>\n<div class=\"stat-item\">\n<div class=\"stat-number\">\u221e<\/div>\n<div class=\"stat-label\">Potencial futuro<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"video-slogan\">\n <span class=\"slogan-main\">BIFA+: Onde a energia do Sul Global se transforma em di\u00e1logo internacional sobre futebol<\/span><br \/>\n We envision a world united through sport \u2013 where football becomes a symbol of peace, cooperation, and shared values.<br \/>\n Through our comprehensive programs including <strong>BIFA+ Mulheres<\/strong>, <strong>Iniciativas para jovens e universidades<\/strong>,<br \/>\n <strong>Jogos de eFootball<\/strong>e o <strong>Rede de cidades<\/strong>, we’re building bridges between cultures<br \/>\n and creating opportunities for the next generation of global leaders.\n <\/div>\n<div class=\"buttons-container\">\n <a href=\"https:\/\/bifa.ai\/initiatives\/\" class=\"cta-button primary\">Explorar programas<\/a><br \/>\n <a href=\"https:\/\/bifa.ai\/about\/#core-team\" class=\"cta-button secondary\">Conhe\u00e7a a equipe<\/a>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<\/div>\n<p><script>\n(function() {\n 'use strict';<\/p>\n<p> \/\/ ========= DOM ELEMENTS =========\n const video = document.getElementById('heroVideo');\n const videoWrapper = document.getElementById('videoWrapper');\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 progressBuffer = document.getElementById('progressBuffer');\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 const loadingIframe = document.getElementById('loadingIframe');\n const fallbackLoader = document.getElementById('fallbackLoader');\n const errorOverlay = document.getElementById('videoErrorOverlay');\n const errorRetryBtn = document.getElementById('errorRetryBtn');\n const keyboardHint = document.getElementById('keyboardHint');\n const particlesContainer = document.querySelector('.bg-particles');<\/p>\n<p> \/\/ ========= STATE =========\n let videoReady = false;\n let isDraggingProgress = false;\n let isDraggingVolume = false;\n let touchControlsTimeout = null;\n let keyboardHintTimeout = null;\n let isTouchDevice = false;\n let savedVolume = 1;<\/p>\n<p> \/\/ ========= ICONS =========\n const icons = {\n play: '<svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M8 5v14l11-7z\"\/><\/svg>',\n pause: '<svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M6 19h4V5H6zm8 0h4V5h-4z\"\/><\/svg>',\n volumeHigh: '<svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z\"\/><\/svg>',\n volumeLow: '<svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M18.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z\"\/><\/svg>',\n volumeMuted: '<svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><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 fullscreenEnter: '<svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z\"\/><\/svg>',\n fullscreenExit: '<svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z\"\/><\/svg>'\n };<\/p>\n<p> \/\/ ========= UTILITY FUNCTIONS =========\n function formatTime(seconds) {\n if (isNaN(seconds) || !isFinite(seconds)) return '0:00';\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> function clamp(value, min, max) {\n return Math.min(Math.max(value, min), max);\n }<\/p>\n<p> function detectTouchDevice() {\n isTouchDevice = ('ontouchstart' in window) || \n (navigator.maxTouchPoints > 0) || \n (navigator.msMaxTouchPoints > 0);\n return isTouchDevice;\n }<\/p>\n<p> \/\/ ========= LOADING SCREEN =========\n function handleIframeLoad() {\n console.log('Loading screen iframe loaded');\n }<\/p>\n<p> function handleIframeError() {\n console.log('Loading screen iframe failed, showing fallback');\n if (loadingIframe) loadingIframe.style.display = 'none';\n if (fallbackLoader) fallbackLoader.classList.add('active');\n }<\/p>\n<p> function hideLoadingScreen() {\n if (videoReady && loadingOverlay && !loadingOverlay.classList.contains('hidden')) {\n setTimeout(() => {\n loadingOverlay.classList.add('hidden');\n setTimeout(() => {\n if (loadingOverlay.parentNode) {\n loadingOverlay.style.display = 'none';\n }\n }, 800);\n }, 1500);\n }\n }<\/p>\n<p> function checkVideoReady() {\n if (video.readyState >= 3 && !videoReady) {\n videoReady = true;\n hideLoadingScreen();\n }\n }<\/p>\n<p> \/\/ ========= ERROR HANDLING =========\n function showError() {\n if (errorOverlay) {\n errorOverlay.classList.add('active');\n }\n if (loadingOverlay) {\n loadingOverlay.classList.add('hidden');\n }\n }<\/p>\n<p> function hideError() {\n if (errorOverlay) {\n errorOverlay.classList.remove('active');\n }\n }<\/p>\n<p> function retryVideo() {\n hideError();\n if (loadingOverlay) {\n loadingOverlay.classList.remove('hidden');\n loadingOverlay.style.display = 'flex';\n }\n videoReady = false;\n video.load();\n video.play().catch(() => {});\n }<\/p>\n<p> \/\/ ========= PLAY\/PAUSE =========\n function togglePlay() {\n if (video.paused) {\n video.play().catch(err => console.warn('Play failed:', err));\n } else {\n video.pause();\n }\n }<\/p>\n<p> function updatePlayButton() {\n const isPaused = video.paused;\n playBtn.innerHTML = isPaused ? icons.play : icons.pause;\n playBtn.setAttribute('aria-label', isPaused ? 'Play' : 'Pause');\n playBtn.setAttribute('aria-pressed', !isPaused);\n }<\/p>\n<p> \/\/ ========= VOLUME =========\n function updateVolumeIcon() {\n let icon;\n if (video.muted || video.volume === 0) {\n icon = icons.volumeMuted;\n } else if (video.volume < 0.5) {\n icon = icons.volumeLow;\n } else {\n icon = icons.volumeHigh;\n }\n muteBtn.innerHTML = icon;\n muteBtn.setAttribute('aria-label', video.muted ? 'Unmute' : 'Mute');\n muteBtn.setAttribute('aria-pressed', video.muted);\n }\n\n function updateVolumeBar() {\n const vol = video.muted ? 0 : video.volume;\n volumeBar.style.width = (vol * 100) + '%';\n volumeSlider.setAttribute('aria-valuenow', Math.round(vol * 100));\n }\n\n function setVolume(value) {\n video.volume = clamp(value, 0, 1);\n if (value > 0) {\n video.muted = false;\n savedVolume = value;\n }\n updateVolumeIcon();\n updateVolumeBar();\n }<\/p>\n<p> function toggleMute() {\n if (video.muted || video.volume === 0) {\n video.muted = false;\n video.volume = savedVolume > 0 ? savedVolume : 0.5;\n } else {\n savedVolume = video.volume;\n video.muted = true;\n }\n updateVolumeIcon();\n updateVolumeBar();\n }<\/p>\n<p> \/\/ ========= PROGRESS =========\n function updateProgress() {\n if (!isDraggingProgress && video.duration) {\n const percent = (video.currentTime \/ video.duration) * 100;\n progressBar.style.width = percent + '%';\n progress.setAttribute('aria-valuenow', Math.round(percent));\n }\n timeDisplay.textContent = `${formatTime(video.currentTime)} \/ ${formatTime(video.duration)}`;\n }<\/p>\n<p> function updateBuffer() {\n if (video.buffered.length > 0) {\n const bufferedEnd = video.buffered.end(video.buffered.length - 1);\n const duration = video.duration;\n if (duration > 0) {\n progressBuffer.style.width = (bufferedEnd \/ duration * 100) + '%';\n }\n }\n }<\/p>\n<p> function seekTo(percent) {\n if (video.duration) {\n video.currentTime = clamp(percent, 0, 1) * video.duration;\n }\n }<\/p>\n<p> function getProgressPercent(e, element) {\n const rect = element.getBoundingClientRect();\n const clientX = e.touches ? e.touches[0].clientX : e.clientX;\n return clamp((clientX - rect.left) \/ rect.width, 0, 1);\n }<\/p>\n<p> \/\/ ========= FULLSCREEN =========\n function isFullscreen() {\n return !!(document.fullscreenElement || document.webkitFullscreenElement || \n document.mozFullScreenElement || document.msFullscreenElement);\n }<\/p>\n<p> function enterFullscreen() {\n const elem = videoWrapper;\n if (elem.requestFullscreen) {\n elem.requestFullscreen();\n } else if (elem.webkitRequestFullscreen) {\n elem.webkitRequestFullscreen();\n } else if (elem.mozRequestFullScreen) {\n elem.mozRequestFullScreen();\n } else if (elem.msRequestFullscreen) {\n elem.msRequestFullscreen();\n } else if (video.webkitEnterFullscreen) {\n \/\/ iOS Safari fallback\n video.webkitEnterFullscreen();\n }\n }<\/p>\n<p> function exitFullscreen() {\n if (document.exitFullscreen) {\n document.exitFullscreen();\n } else if (document.webkitExitFullscreen) {\n document.webkitExitFullscreen();\n } else if (document.mozCancelFullScreen) {\n document.mozCancelFullScreen();\n } else if (document.msExitFullscreen) {\n document.msExitFullscreen();\n }\n }<\/p>\n<p> function toggleFullscreen() {\n if (isFullscreen()) {\n exitFullscreen();\n } else {\n enterFullscreen();\n }\n }<\/p>\n<p> function updateFullscreenButton() {\n const fs = isFullscreen();\n fullscreenBtn.innerHTML = fs ? icons.fullscreenExit : icons.fullscreenEnter;\n fullscreenBtn.setAttribute('aria-label', fs ? 'Exit fullscreen' : 'Enter fullscreen');\n }<\/p>\n<p> \/\/ ========= KEYBOARD HINT =========\n function showKeyboardHint(text) {\n keyboardHint.innerHTML = text;\n keyboardHint.classList.add('visible');<\/p>\n<p> clearTimeout(keyboardHintTimeout);\n keyboardHintTimeout = setTimeout(() => {\n keyboardHint.classList.remove('visible');\n }, 1000);\n }<\/p>\n<p> \/\/ ========= TOUCH CONTROLS =========\n function showTouchControls() {\n videoWrapper.classList.add('touch-active');\n clearTimeout(touchControlsTimeout);\n touchControlsTimeout = setTimeout(() => {\n if (!video.paused) {\n videoWrapper.classList.remove('touch-active');\n }\n }, 3000);\n }<\/p>\n<p> \/\/ ========= EVENT LISTENERS =========<\/p>\n<p> \/\/ Loading iframe events\n if (loadingIframe) {\n loadingIframe.addEventListener('load', handleIframeLoad);\n loadingIframe.addEventListener('error', handleIframeError);\n }<\/p>\n<p> \/\/ Video events\n video.addEventListener('loadeddata', checkVideoReady);\n video.addEventListener('canplay', checkVideoReady);\n video.addEventListener('canplaythrough', () => {\n videoReady = true;\n hideLoadingScreen();\n });\n video.addEventListener('play', updatePlayButton);\n video.addEventListener('pause', updatePlayButton);\n video.addEventListener('timeupdate', updateProgress);\n video.addEventListener('progress', updateBuffer);\n video.addEventListener('volumechange', () => {\n updateVolumeIcon();\n updateVolumeBar();\n });\n video.addEventListener('error', (e) => {\n console.error('Video error:', e);\n showError();\n });\n video.addEventListener('stalled', () => {\n console.warn('Video stalled');\n });<\/p>\n<p> \/\/ Fallback: \u0441\u043a\u0440\u044b\u0442\u044c loading \u0447\u0435\u0440\u0435\u0437 8 \u0441\u0435\u043a\u0443\u043d\u0434\n setTimeout(() => {\n if (!loadingOverlay.classList.contains('hidden')) {\n videoReady = true;\n hideLoadingScreen();\n }\n }, 8000);<\/p>\n<p> \/\/ Error retry button\n if (errorRetryBtn) {\n errorRetryBtn.addEventListener('click', retryVideo);\n }<\/p>\n<p> \/\/ Play\/Pause button\n playBtn.addEventListener('click', togglePlay);<\/p>\n<p> \/\/ Mute button\n muteBtn.addEventListener('click', toggleMute);<\/p>\n<p> \/\/ Progress bar - Click\n progress.addEventListener('click', (e) => {\n if (!isDraggingProgress) {\n seekTo(getProgressPercent(e, progress));\n }\n });<\/p>\n<p> \/\/ Progress bar - Drag (mouse)\n progress.addEventListener('mousedown', (e) => {\n isDraggingProgress = true;\n progress.classList.add('dragging');\n seekTo(getProgressPercent(e, progress));\n });<\/p>\n<p> document.addEventListener('mousemove', (e) => {\n if (isDraggingProgress) {\n const percent = getProgressPercent(e, progress);\n progressBar.style.width = (percent * 100) + '%';\n seekTo(percent);\n }\n });<\/p>\n<p> document.addEventListener('mouseup', () => {\n if (isDraggingProgress) {\n isDraggingProgress = false;\n progress.classList.remove('dragging');\n }\n });<\/p>\n<p> \/\/ Progress bar - Drag (touch)\n progress.addEventListener('touchstart', (e) => {\n isDraggingProgress = true;\n progress.classList.add('dragging');\n seekTo(getProgressPercent(e, progress));\n }, { passive: true });<\/p>\n<p> progress.addEventListener('touchmove', (e) => {\n if (isDraggingProgress) {\n const percent = getProgressPercent(e, progress);\n progressBar.style.width = (percent * 100) + '%';\n seekTo(percent);\n }\n }, { passive: true });<\/p>\n<p> progress.addEventListener('touchend', () => {\n isDraggingProgress = false;\n progress.classList.remove('dragging');\n });<\/p>\n<p> \/\/ Volume slider - Click\n volumeSlider.addEventListener('click', (e) => {\n if (!isDraggingVolume) {\n setVolume(getProgressPercent(e, volumeSlider));\n }\n });<\/p>\n<p> \/\/ Volume slider - Drag (mouse)\n volumeSlider.addEventListener('mousedown', (e) => {\n isDraggingVolume = true;\n setVolume(getProgressPercent(e, volumeSlider));\n });<\/p>\n<p> document.addEventListener('mousemove', (e) => {\n if (isDraggingVolume) {\n setVolume(getProgressPercent(e, volumeSlider));\n }\n });<\/p>\n<p> document.addEventListener('mouseup', () => {\n isDraggingVolume = false;\n });<\/p>\n<p> \/\/ Volume slider - Drag (touch)\n volumeSlider.addEventListener('touchstart', (e) => {\n isDraggingVolume = true;\n setVolume(getProgressPercent(e, volumeSlider));\n }, { passive: true });<\/p>\n<p> volumeSlider.addEventListener('touchmove', (e) => {\n if (isDraggingVolume) {\n setVolume(getProgressPercent(e, volumeSlider));\n }\n }, { passive: true });<\/p>\n<p> volumeSlider.addEventListener('touchend', () => {\n isDraggingVolume = false;\n });<\/p>\n<p> \/\/ Fullscreen button\n fullscreenBtn.addEventListener('click', toggleFullscreen);<\/p>\n<p> \/\/ Double-click for fullscreen\n videoWrapper.addEventListener('dblclick', (e) => {\n \/\/ \u041d\u0435 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u043d\u0430 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0430\u0445\n if (e.target.closest('.controls')) return;\n toggleFullscreen();\n });<\/p>\n<p> \/\/ Fullscreen change events\n const fullscreenEvents = ['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange', 'MSFullscreenChange'];\n fullscreenEvents.forEach(event => {\n document.addEventListener(event, updateFullscreenButton);\n });<\/p>\n<p> \/\/ Touch: tap to show\/hide controls\n videoWrapper.addEventListener('touchstart', (e) => {\n if (!e.target.closest('.controls') && !e.target.closest('.ctrl-btn') && !e.target.closest('.fullscreen-btn')) {\n showTouchControls();\n }\n }, { passive: true });<\/p>\n<p> \/\/ Click on video to play\/pause (but not on controls)\n videoWrapper.addEventListener('click', (e) => {\n if (!e.target.closest('.controls') && \n !e.target.closest('.ctrl-btn') && \n !e.target.closest('.fullscreen-btn') &&\n !e.target.closest('.video-loading-overlay') &&\n !e.target.closest('.video-error-overlay')) {<\/p>\n<p> \/\/ \u041d\u0430 touch \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 \u043f\u0435\u0440\u0432\u044b\u0439 \u0442\u0430\u043f \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044b\n if (isTouchDevice && !videoWrapper.classList.contains('touch-active')) {\n showTouchControls();\n return;\n }<\/p>\n<p> togglePlay();\n }\n });<\/p>\n<p> \/\/ ========= KEYBOARD CONTROLS =========\n videoWrapper.addEventListener('keydown', (e) => {\n \/\/ \u0418\u0433\u043d\u043e\u0440\u0438\u0440\u0443\u0435\u043c \u0435\u0441\u043b\u0438 \u0444\u043e\u043a\u0443\u0441 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0430\u0445\n if (e.target.tagName === 'BUTTON') return;<\/p>\n<p> switch (e.key) {\n case ' ':\n case 'k':\n e.preventDefault();\n togglePlay();\n showKeyboardHint(video.paused ? '<kbd>Space<\/kbd> Paused' : '<kbd>Space<\/kbd> Playing');\n break;<\/p>\n<p> case 'ArrowLeft':\n e.preventDefault();\n video.currentTime = Math.max(0, video.currentTime - 5);\n showKeyboardHint('<kbd>\u2190<\/kbd> -5s');\n break;<\/p>\n<p> case 'ArrowRight':\n e.preventDefault();\n video.currentTime = Math.min(video.duration, video.currentTime + 5);\n showKeyboardHint('<kbd>\u2192<\/kbd> +5s');\n break;<\/p>\n<p> case 'ArrowUp':\n e.preventDefault();\n setVolume(video.volume + 0.1);\n showKeyboardHint(`<kbd>\u2191<\/kbd> Volume ${Math.round(video.volume * 100)}%`);\n break;<\/p>\n<p> case 'ArrowDown':\n e.preventDefault();\n setVolume(video.volume - 0.1);\n showKeyboardHint(`<kbd>\u2193<\/kbd> Volume ${Math.round(video.volume * 100)}%`);\n break;<\/p>\n<p> case 'm':\n case 'M':\n e.preventDefault();\n toggleMute();\n showKeyboardHint(video.muted ? '<kbd>M<\/kbd> Muted' : '<kbd>M<\/kbd> Unmuted');\n break;<\/p>\n<p> case 'f':\n case 'F':\n e.preventDefault();\n toggleFullscreen();\n break;<\/p>\n<p> case 'Home':\n e.preventDefault();\n video.currentTime = 0;\n showKeyboardHint('<kbd>Home<\/kbd> Start');\n break;<\/p>\n<p> case 'End':\n e.preventDefault();\n video.currentTime = video.duration;\n showKeyboardHint('<kbd>End<\/kbd> End');\n break;<\/p>\n<p> \/\/ \u0426\u0438\u0444\u0440\u044b 0-9 \u0434\u043b\u044f seek \u043a \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0443 \u0432\u0438\u0434\u0435\u043e\n case '0': case '1': case '2': case '3': case '4':\n case '5': case '6': case '7': case '8': case '9':\n e.preventDefault();\n const percent = parseInt(e.key) \/ 10;\n video.currentTime = video.duration * percent;\n showKeyboardHint(`<kbd>${e.key}<\/kbd> ${percent * 100}%`);\n break;\n }\n });<\/p>\n<p> \/\/ Progress bar keyboard\n progress.addEventListener('keydown', (e) => {\n const step = video.duration \/ 100; \/\/ 1%<\/p>\n<p> switch (e.key) {\n case 'ArrowLeft':\n e.preventDefault();\n video.currentTime = Math.max(0, video.currentTime - step * 5);\n break;\n case 'ArrowRight':\n e.preventDefault();\n video.currentTime = Math.min(video.duration, video.currentTime + step * 5);\n break;\n }\n });<\/p>\n<p> \/\/ Volume slider keyboard\n volumeSlider.addEventListener('keydown', (e) => {\n switch (e.key) {\n case 'ArrowLeft':\n case 'ArrowDown':\n e.preventDefault();\n setVolume(video.volume - 0.05);\n break;\n case 'ArrowRight':\n case 'ArrowUp':\n e.preventDefault();\n setVolume(video.volume + 0.05);\n break;\n }\n });<\/p>\n<p> \/\/ ========= PARTICLES =========\n function createParticles() {\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() * 15 + 's';\n particle.style.animationDuration = (12 + 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 \/\/ ========= INIT =========\n function init() {\n detectTouchDevice();\n updatePlayButton();\n updateVolumeIcon();\n updateVolumeBar();\n updateFullscreenButton();\n createParticles();\n \n \/\/ \u041d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\n video.volume = 1;\n savedVolume = 1;\n }\n\n \/\/ \u0417\u0430\u043f\u0443\u0441\u043a \u043f\u0440\u0438 DOM ready\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', init);\n } else {\n init();\n }\n\n \/\/ ========= CLEANUP (\u0434\u043b\u044f SPA) =========\n window.addEventListener('beforeunload', () => {\n fullscreenEvents.forEach(event => {\n document.removeEventListener(event, updateFullscreenButton);\n });\n });<\/p>\n<p>})();\n<\/script><br \/>\n<\/body><br \/>\n<\/html>\n<\/div>\n<div>\n<p> <!DOCTYPE html><br \/>\n<html lang=\"ru\"><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+ News Center – Premium Design<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n\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&family=Cairo:wght@300;400;500;600;700;800&family=Tajawal:wght@300;400;500;700;800&display=swap\" rel=\"stylesheet\">\n<style>\n\/* ========= \u0413\u041b\u041e\u0411\u0410\u041b\u042c\u041d\u042b\u0415 \u041f\u0415\u0420\u0415\u041c\u0415\u041d\u041d\u042b\u0415 BIFA+ ========= *\/\n:root {\n \/* \u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430 BIFA+ *\/\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 --bifa-gray-light: #F8F9FA;\n --bifa-gray: #6C757D;<\/p>\n<p> \/* \u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0448\u0440\u0438\u0444\u0442\u044b BIFA+ *\/\n --bifa-font-heading: 'Montserrat', 'Cairo', sans-serif;\n --bifa-font-body: 'Poppins', 'Tajawal', sans-serif;\n --bifa-font-arabic: 'Cairo', 'Tajawal', 'GE SS Text', sans-serif;<\/p>\n<p> \/* \u041f\u0440\u0435\u043c\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0442\u0435\u043d\u0438 \u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u044b *\/\n --bifa-shadow-premium: 0 25px 80px rgba(10, 31, 68, 0.15);\n --bifa-shadow-hover: 0 35px 100px rgba(10, 31, 68, 0.2);\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 ========= *\/\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}<\/p>\n<p>body {\n font-family: var(--bifa-font-body);\n background: var(--bifa-bright-white);\n overflow-x: hidden;\n color: var(--bifa-soft-black);\n}<\/p>\n<p>\/* ========= NEWS SECTION WRAPPER ========= *\/\n.news-section-wrapper {\n width: 100vw;\n position: relative;\n left: 50%;\n margin-left: -50vw;\n background: transparent;\n overflow: hidden;\n}<\/p>\n<p>\/* ========= MAIN NEWS SECTION ========= *\/\n.bifa-news-section {\n min-height: auto;\n padding: 40px 0 60px 0;\n position: relative;\n background: transparent;\n}<\/p>\n<p>\/* ========= ANIMATED BACKGROUND ========= *\/\n.news-bg-animation {\n position: absolute;\n width: 100%;\n height: 100%;\n overflow: hidden;\n z-index: 1;\n top: 0;\n left: 0;\n}<\/p>\n<p>\/* \u0417\u043e\u043b\u043e\u0442\u044b\u0435 \u0447\u0430\u0441\u0442\u0438\u0446\u044b - \u0442\u0430\u043a\u0438\u0435 \u0436\u0435 \u043a\u0430\u043a \u0432 \u0432\u0438\u0434\u0435\u043e \u0441\u0435\u043a\u0446\u0438\u0438 *\/\n.news-particle {\n position: absolute;\n width: 3px;\n height: 3px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n border-radius: 50%;\n animation: floatNews 20s infinite linear;\n box-shadow: 0 0 6px rgba(212, 175, 55, 0.2);\n opacity: 0.2;\n will-change: transform;\n}<\/p>\n<p>@keyframes floatNews {\n 0% {\n transform: translateY(100vh) translateX(0) rotate(0deg);\n opacity: 0;\n }\n 10% { opacity: 0.3; }\n 90% { opacity: 0.3; }\n 100% {\n transform: translateY(-100vh) translateX(80px) rotate(360deg);\n opacity: 0;\n }\n}<\/p>\n<p>\/* \u041f\u043b\u0430\u0432\u0430\u044e\u0449\u0438\u0435 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0444\u0438\u0433\u0443\u0440\u044b *\/\n.floating-shape {\n position: absolute;\n border-radius: 50%;\n filter: blur(120px);\n animation: morphFloat 25s ease-in-out infinite;\n pointer-events: none;\n opacity: 0.5;\n}<\/p>\n<p>.shape-news-1 {\n width: 400px;\n height: 400px;\n background: radial-gradient(circle at 30% 30%, rgba(212, 175, 55, 0.08), transparent);\n top: -200px;\n right: -200px;\n}<\/p>\n<p>.shape-news-2 {\n width: 350px;\n height: 350px;\n background: radial-gradient(circle at 70% 70%, rgba(10, 31, 68, 0.05), transparent);\n bottom: -175px;\n left: -175px;\n animation-delay: 8s;\n}<\/p>\n<p>.shape-news-3 {\n width: 300px;\n height: 300px;\n background: radial-gradient(circle at 50% 50%, rgba(29, 97, 67, 0.06), transparent);\n top: 40%;\n left: 60%;\n animation-delay: 16s;\n}<\/p>\n<p>@keyframes morphFloat {\n 0%, 100% { \n transform: translate(0, 0) scale(1) rotate(0deg);\n filter: blur(100px);\n }\n 25% { \n transform: translate(100px, -80px) scale(1.2) rotate(90deg);\n filter: blur(120px);\n }\n 50% { \n transform: translate(-80px, 100px) scale(0.8) rotate(180deg);\n filter: blur(80px);\n }\n 75% { \n transform: translate(-120px, -60px) scale(1.1) rotate(270deg);\n filter: blur(110px);\n }\n}<\/p>\n<p>\/* ========= CONTAINER ========= *\/\n.bifa-container {\n max-width: 1400px;\n margin: 0 auto;\n padding: 0 20px;\n position: relative;\n z-index: 10;\n}<\/p>\n<p>\/* ========= SECTION HEADER - Premium Style ========= *\/\n.bifa-section-header {\n text-align: center;\n margin-bottom: 60px;\n animation: fadeInDown 1.2s ease;\n}<\/p>\n<p>.bifa-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), #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n margin-bottom: 15px;\n text-transform: uppercase;\n position: relative;\n display: inline-block;\n cursor: pointer;\n transition: all 0.3s ease;\n}<\/p>\n<p>.bifa-section-title::after {\n content: '';\n position: absolute;\n bottom: -10px;\n left: 50%;\n transform: translateX(-50%);\n width: 0;\n height: 3px;\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700);\n transition: width 0.4s ease;\n}<\/p>\n<p>.bifa-section-title:hover {\n transform: translateY(-3px);\n filter: drop-shadow(0 10px 20px rgba(212, 175, 55, 0.3));\n}<\/p>\n<p>.bifa-section-title:hover::after {\n width: 100%;\n}<\/p>\n<p>\/* \u041f\u043e\u0434\u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441\u0435\u043a\u0446\u0438\u0438 *\/\n.bifa-section-subtitle {\n font-family: var(--bifa-font-heading);\n font-size: clamp(1.1rem, 2vw, 1.5rem);\n color: var(--bifa-deep-navy);\n font-weight: 600;\n letter-spacing: 1.5px;\n margin-bottom: 15px;\n opacity: 0;\n animation: fadeInUp 1.2s ease 0.3s forwards;\n}<\/p>\n<p>.bifa-section-description {\n max-width: 800px;\n margin: 0 auto;\n font-family: var(--bifa-font-body);\n font-size: clamp(0.95rem, 1.3vw, 1.1rem);\n line-height: 1.7;\n color: #4a5568;\n opacity: 0;\n animation: fadeInUp 1.2s ease 0.6s forwards;\n}<\/p>\n<p>\/* ========= LOADING STATE - Premium ========= *\/\n.bifa-loading-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 400px;\n gap: 30px;\n}<\/p>\n<p>.bifa-loader {\n width: 80px;\n height: 80px;\n position: relative;\n}<\/p>\n<p>.bifa-loader-ring {\n position: absolute;\n width: 100%;\n height: 100%;\n border: 3px solid transparent;\n border-radius: 50%;\n animation: loaderSpin 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;\n}<\/p>\n<p>.bifa-loader-ring:nth-child(1) {\n border-top-color: var(--bifa-heritage-gold);\n animation-delay: 0s;\n}<\/p>\n<p>.bifa-loader-ring:nth-child(2) {\n width: 70%;\n height: 70%;\n top: 15%;\n left: 15%;\n border-right-color: var(--bifa-deep-navy);\n animation-delay: 0.2s;\n animation-direction: reverse;\n}<\/p>\n<p>.bifa-loader-ring:nth-child(3) {\n width: 40%;\n height: 40%;\n top: 30%;\n left: 30%;\n border-bottom-color: var(--bifa-civic-green);\n animation-delay: 0.4s;\n}<\/p>\n<p>@keyframes loaderSpin {\n 0% { \n transform: rotate(0deg) scale(1);\n }\n 50% {\n transform: rotate(180deg) scale(1.1);\n }\n 100% { \n transform: rotate(360deg) scale(1);\n }\n}<\/p>\n<p>.loading-text {\n font-family: var(--bifa-font-heading);\n font-size: 1.2rem;\n font-weight: 700;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n animation: textGlow 2s ease-in-out infinite;\n}<\/p>\n<p>\/* ========= HERO NEWS CARD - Premium \u0428\u0418\u0420\u041e\u041a\u0418\u0419 \u0414\u0418\u0417\u0410\u0419\u041d ========= *\/\n.bifa-hero-news {\n margin-bottom: 80px;\n opacity: 0;\n animation: fadeInUp 1.2s ease 0.2s forwards;\n}<\/p>\n<p>.bifa-hero-card {\n background: white;\n backdrop-filter: blur(20px);\n border-radius: 25px;\n overflow: hidden;\n box-shadow: 0 10px 40px rgba(10, 31, 68, 0.08);\n transition: var(--bifa-transition);\n cursor: pointer;\n position: relative;\n border: none;\n}<\/p>\n<p>.bifa-hero-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 3px;\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700, var(--bifa-heritage-gold));\n transform: scaleX(0);\n transition: transform 0.3s ease;\n}<\/p>\n<p>.bifa-hero-card:hover::before {\n transform: scaleX(1);\n}<\/p>\n<p>.bifa-hero-card:hover {\n transform: translateY(-8px);\n box-shadow: 0 20px 60px rgba(10, 31, 68, 0.12);\n}<\/p>\n<p>\/* \u041d\u041e\u0412\u042b\u0419 \u0428\u0418\u0420\u041e\u041a\u0418\u0419 \u0414\u0418\u0417\u0410\u0419\u041d \u0414\u041b\u042f \u0412\u0421\u0415\u0425 \u0423\u0421\u0422\u0420\u041e\u0419\u0421\u0422\u0412 *\/\n.bifa-hero-wrapper {\n display: block;\n min-height: 650px;\n}<\/p>\n<p>.bifa-hero-image {\n position: relative;\n background-size: cover;\n background-position: center;\n overflow: hidden;\n height: 500px;\n width: 100%;\n}<\/p>\n<p>\/* \u0413\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043d\u044b\u0439 \u043e\u0432\u0435\u0440\u043b\u0435\u0439 \u0441 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0435\u0439 *\/\n.bifa-hero-image::before {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(180deg, \n transparent 0%, \n rgba(10, 31, 68, 0.3) 60%,\n rgba(10, 31, 68, 0.8) 100%\n );\n opacity: 0.6;\n transition: opacity 0.3s ease;\n}<\/p>\n<p>.bifa-hero-card:hover .bifa-hero-image::before {\n opacity: 1;\n}<\/p>\n<p>\/* \u0417\u043e\u043b\u043e\u0442\u043e\u0439 \u0430\u043a\u0446\u0435\u043d\u0442 \u043d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 *\/\n.bifa-hero-image::after {\n content: '';\n position: absolute;\n top: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n background: linear-gradient(45deg, \n transparent 30%, \n rgba(212, 175, 55, 0.2) 50%, \n transparent 70%\n );\n transform: rotate(45deg) translateY(-100%);\n transition: transform 0.8s ease;\n}<\/p>\n<p>.bifa-hero-card:hover .bifa-hero-image::after {\n transform: rotate(45deg) translateY(100%);\n}<\/p>\n<p>.bifa-hero-image-overlay {\n position: absolute;\n top: 40px;\n left: 40px;\n display: flex;\n gap: 20px;\n z-index: 2;\n flex-wrap: wrap;\n}<\/p>\n<p>.bifa-hero-badge {\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n color: var(--bifa-deep-navy);\n padding: 12px 28px;\n border-radius: 35px;\n font-family: var(--bifa-font-heading);\n font-weight: 800;\n font-size: 0.95rem;\n text-transform: uppercase;\n letter-spacing: 1.2px;\n box-shadow: 0 10px 25px rgba(212, 175, 55, 0.3);\n transition: all 0.3s ease;\n}<\/p>\n<p>\/* \u041f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0439 \u0431\u0435\u0439\u0434\u0436 \u0434\u043b\u044f \u0441\u0440\u043e\u0447\u043d\u044b\u0445 \u043d\u043e\u0432\u043e\u0441\u0442\u0435\u0439 *\/\n.bifa-hero-badge.urgent {\n background: linear-gradient(135deg, #dc2626, #ef4444);\n color: white;\n box-shadow: 0 10px 25px rgba(220, 38, 38, 0.4);\n animation: pulse-urgent 2s ease-in-out infinite;\n}<\/p>\n<p>@keyframes pulse-urgent {\n 0%, 100% { \n transform: scale(1);\n box-shadow: 0 10px 25px rgba(220, 38, 38, 0.4);\n }\n 50% { \n transform: scale(1.05);\n box-shadow: 0 15px 35px rgba(220, 38, 38, 0.6);\n }\n}<\/p>\n<p>.bifa-hero-badge:hover {\n transform: translateY(-3px);\n box-shadow: 0 15px 35px rgba(212, 175, 55, 0.4);\n}<\/p>\n<p>.bifa-hero-date {\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(10px);\n color: var(--bifa-deep-navy);\n padding: 12px 28px;\n border-radius: 35px;\n font-family: var(--bifa-font-body);\n font-weight: 600;\n font-size: 0.9rem;\n box-shadow: 0 10px 25px rgba(10, 31, 68, 0.1);\n}<\/p>\n<p>.bifa-hero-content {\n padding: 60px 50px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: center;\n background: linear-gradient(135deg, \n rgba(255, 255, 255, 0.8) 0%, \n rgba(248, 249, 250, 0.8) 100%\n );\n}<\/p>\n<p>.bifa-hero-title {\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 line-height: 1.2;\n margin-bottom: 25px;\n position: relative;\n text-align: center;\n}<\/p>\n<p>.bifa-hero-title::after {\n content: '';\n position: absolute;\n bottom: -10px;\n left: 50%;\n transform: translateX(-50%);\n width: 60px;\n height: 3px;\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700);\n border-radius: 2px;\n}<\/p>\n<p>.bifa-hero-excerpt {\n font-family: var(--bifa-font-body);\n font-size: 1.15rem;\n color: #4a5568;\n line-height: 1.8;\n margin-bottom: 35px;\n text-align: center;\n max-width: 900px;\n}<\/p>\n<p>.bifa-hero-footer {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 30px;\n width: 100%;\n}<\/p>\n<p>.bifa-hero-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n background: var(--bifa-deep-navy);\n color: #FFD700;\n padding: 18px 45px;\n border-radius: 50px;\n font-family: var(--bifa-font-heading);\n font-weight: 700;\n font-size: 0.9rem;\n text-decoration: none;\n text-transform: uppercase;\n letter-spacing: 1.5px;\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n box-shadow: 0 4px 15px rgba(10, 31, 68, 0.2);\n position: relative;\n overflow: hidden;\n border: 1.5px solid #FFD700;\n min-width: 180px;\n text-align: center;\n}<\/p>\n<p>.bifa-hero-btn span {\n position: relative;\n z-index: 1;\n background: linear-gradient(135deg, #FFD700, #FFA500);\n -webkit-background-clip: text;\n background-clip: text;\n -webkit-text-fill-color: transparent;\n font-weight: 800;\n text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);\n}<\/p>\n<p>.bifa-hero-btn::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 0;\n height: 100%;\n background: linear-gradient(135deg, #FFD700, #FFA500);\n transition: width 0.4s ease;\n z-index: 0;\n}<\/p>\n<p>.bifa-hero-btn::after {\n content: '';\n position: absolute;\n inset: -2px;\n background: linear-gradient(135deg, #FFD700, #FFA500);\n border-radius: 50px;\n opacity: 0.3;\n filter: blur(10px);\n z-index: -1;\n transition: opacity 0.4s ease;\n}<\/p>\n<p>.bifa-hero-btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);\n border-color: transparent;\n}<\/p>\n<p>.bifa-hero-btn:hover span {\n background: var(--bifa-deep-navy);\n -webkit-background-clip: text;\n background-clip: text;\n -webkit-text-fill-color: transparent;\n text-shadow: none;\n}<\/p>\n<p>.bifa-hero-btn:hover::before {\n width: 100%;\n}<\/p>\n<p>.bifa-hero-btn:hover::after {\n opacity: 0.5;\n}<\/p>\n<p>.bifa-hero-btn:active {\n transform: translateY(0);\n box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);\n}<\/p>\n<p>.bifa-hero-btn svg {\n width: 18px;\n height: 18px;\n transition: transform 0.3s ease;\n stroke: #FFD700;\n position: relative;\n z-index: 1;\n filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.5));\n}<\/p>\n<p>.bifa-hero-btn:hover svg {\n transform: translateX(5px);\n stroke: var(--bifa-deep-navy);\n filter: none;\n}<\/p>\n<p>\/* Stats \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 hero *\/\n.bifa-hero-stats {\n display: flex;\n gap: 40px;\n margin-top: 30px;\n padding-top: 30px;\n border-top: 1px solid rgba(212, 175, 55, 0.2);\n justify-content: center;\n width: 100%;\n}<\/p>\n<p>.hero-stat-item {\n display: flex;\n align-items: center;\n gap: 12px;\n}<\/p>\n<p>.hero-stat-icon {\n width: 40px;\n height: 40px;\n background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(255, 215, 0, 0.1));\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n}<\/p>\n<p>.hero-stat-icon svg {\n width: 20px;\n height: 20px;\n stroke: var(--bifa-heritage-gold);\n stroke-width: 2;\n}<\/p>\n<p>.hero-stat-text {\n font-family: var(--bifa-font-body);\n font-size: 0.9rem;\n color: var(--bifa-gray);\n}<\/p>\n<p>.hero-stat-number {\n font-family: var(--bifa-font-heading);\n font-weight: 700;\n color: var(--bifa-deep-navy);\n}<\/p>\n<p>\/* ========= NEWS CAROUSEL - Premium Style ========= *\/\n.bifa-news-carousel {\n position: relative;\n opacity: 0;\n animation: fadeInUp 1.2s ease 0.4s forwards;\n}<\/p>\n<p>.bifa-carousel-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 40px;\n}<\/p>\n<p>.bifa-carousel-title {\n font-family: var(--bifa-font-heading);\n font-size: 1.8rem;\n font-weight: 800;\n background: linear-gradient(135deg, var(--bifa-deep-navy), #162e5a);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n position: relative;\n}<\/p>\n<p>.bifa-carousel-controls {\n display: flex;\n gap: 20px;\n}<\/p>\n<p>.bifa-carousel-btn {\n width: 48px;\n height: 48px;\n border: 2px solid transparent;\n background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 249, 250, 0.95));\n backdrop-filter: blur(10px);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: var(--bifa-transition);\n box-shadow: 0 10px 30px rgba(10, 31, 68, 0.1);\n position: relative;\n overflow: hidden;\n}<\/p>\n<p>.bifa-carousel-btn::before {\n content: '';\n position: absolute;\n inset: -2px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n border-radius: 50%;\n opacity: 0;\n transition: opacity 0.3s ease;\n z-index: -1;\n}<\/p>\n<p>.bifa-carousel-btn:hover::before {\n opacity: 1;\n}<\/p>\n<p>.bifa-carousel-btn:hover {\n transform: scale(1.1);\n box-shadow: 0 15px 40px rgba(212, 175, 55, 0.3);\n}<\/p>\n<p>.bifa-carousel-btn svg {\n width: 20px;\n height: 20px;\n stroke: var(--bifa-deep-navy);\n stroke-width: 3;\n transition: all 0.3s ease;\n}<\/p>\n<p>.bifa-carousel-btn:hover svg {\n stroke: var(--bifa-deep-navy);\n transform: scale(1.1);\n}<\/p>\n<p>.bifa-carousel-btn:active {\n transform: scale(0.95);\n}<\/p>\n<p>\/* News Cards Container *\/\n.bifa-carousel-wrapper {\n overflow: hidden;\n margin: 0 -15px;\n padding: 10px 0;\n}<\/p>\n<p>.bifa-carousel-track {\n display: flex;\n gap: 30px;\n transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n padding: 10px 15px;\n}<\/p>\n<p>\/* Individual News Card - Premium Style *\/\n.bifa-news-card {\n flex: 0 0 calc(33.333% - 20px);\n background: white;\n backdrop-filter: blur(20px);\n border-radius: 20px;\n overflow: hidden;\n box-shadow: 0 5px 20px rgba(10, 31, 68, 0.06);\n transition: var(--bifa-transition);\n cursor: pointer;\n position: relative;\n border: none;\n}<\/p>\n<p>.bifa-news-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 2px;\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent);\n transform: scaleX(0);\n transition: transform 0.3s ease;\n}<\/p>\n<p>.bifa-news-card:hover::before {\n transform: scaleX(1);\n}<\/p>\n<p>.bifa-news-card:hover {\n transform: translateY(-8px) scale(1.02);\n box-shadow: 0 15px 40px rgba(10, 31, 68, 0.12);\n}<\/p>\n<p>.bifa-news-image {\n position: relative;\n height: 200px;\n background-size: cover;\n background-position: center;\n overflow: hidden;\n}<\/p>\n<p>.bifa-news-image::before {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(180deg, \n transparent 0%, \n transparent 50%, \n rgba(10, 31, 68, 0.9) 100%\n );\n transition: opacity 0.3s ease;\n}<\/p>\n<p>.bifa-news-card:hover .bifa-news-image::before {\n opacity: 0.8;\n}<\/p>\n<p>\/* Shimmer effect on hover *\/\n.bifa-news-image::after {\n content: '';\n position: absolute;\n top: -50%;\n left: -75%;\n width: 50%;\n height: 200%;\n background: linear-gradient(90deg, \n transparent 0%, \n rgba(255, 255, 255, 0.3) 50%, \n transparent 100%\n );\n transform: skewX(-25deg);\n transition: left 0.8s ease;\n}<\/p>\n<p>.bifa-news-card:hover .bifa-news-image::after {\n left: 125%;\n}<\/p>\n<p>.bifa-news-badge {\n position: absolute;\n top: 20px;\n left: 20px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n color: var(--bifa-deep-navy);\n padding: 8px 20px;\n border-radius: 25px;\n font-family: var(--bifa-font-heading);\n font-weight: 800;\n font-size: 0.75rem;\n text-transform: uppercase;\n letter-spacing: 1px;\n z-index: 2;\n box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);\n transition: all 0.3s ease;\n}<\/p>\n<p>\/* \u041f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0439 \u0431\u0435\u0439\u0434\u0436 \u0434\u043b\u044f \u0441\u0440\u043e\u0447\u043d\u044b\u0445 \u043d\u043e\u0432\u043e\u0441\u0442\u0435\u0439 \u0432 \u043a\u0430\u0440\u0443\u0441\u0435\u043b\u0438 *\/\n.bifa-news-badge.urgent {\n background: linear-gradient(135deg, #dc2626, #ef4444);\n color: white;\n box-shadow: 0 8px 20px rgba(220, 38, 38, 0.4);\n animation: pulse-urgent 2s ease-in-out infinite;\n}<\/p>\n<p>.bifa-news-card:hover .bifa-news-badge {\n transform: translateY(-2px);\n box-shadow: 0 12px 30px rgba(212, 175, 55, 0.4);\n}<\/p>\n<p>.bifa-news-content {\n padding: 30px;\n}<\/p>\n<p>.bifa-news-date {\n font-family: var(--bifa-font-body);\n font-size: 0.85rem;\n color: var(--bifa-gray);\n margin-bottom: 12px;\n display: flex;\n align-items: center;\n gap: 8px;\n}<\/p>\n<p>.bifa-news-date::before {\n content: '';\n width: 4px;\n height: 4px;\n background: var(--bifa-heritage-gold);\n border-radius: 50%;\n}<\/p>\n<p>.bifa-news-title {\n font-family: var(--bifa-font-heading);\n font-size: 1.25rem;\n font-weight: 800;\n color: var(--bifa-deep-navy);\n line-height: 1.4;\n margin-bottom: 15px;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n transition: color 0.3s ease;\n}<\/p>\n<p>.bifa-news-card:hover .bifa-news-title {\n background: linear-gradient(135deg, var(--bifa-deep-navy), #162e5a);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n}<\/p>\n<p>.bifa-news-excerpt {\n font-family: var(--bifa-font-body);\n font-size: 0.95rem;\n color: #4a5568;\n line-height: 1.7;\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n margin-bottom: 25px;\n}<\/p>\n<p>.bifa-news-link {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n color: var(--bifa-heritage-gold);\n font-family: var(--bifa-font-heading);\n font-weight: 700;\n font-size: 0.9rem;\n text-decoration: none;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n transition: var(--bifa-transition);\n position: relative;\n}<\/p>\n<p>.bifa-news-link::after {\n content: '';\n position: absolute;\n bottom: -2px;\n left: 0;\n width: 0;\n height: 2px;\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700);\n transition: width 0.3s ease;\n}<\/p>\n<p>.bifa-news-link:hover {\n gap: 15px;\n}<\/p>\n<p>.bifa-news-link:hover::after {\n width: 100%;\n}<\/p>\n<p>.bifa-news-link svg {\n width: 16px;\n height: 16px;\n stroke: currentColor;\n stroke-width: 2;\n transition: transform 0.3s ease;\n}<\/p>\n<p>.bifa-news-link:hover svg {\n transform: translateX(3px);\n}<\/p>\n<p>\/* ========= \u0418\u0421\u041f\u0420\u0410\u0412\u041b\u0415\u041d\u041e: \u041c\u0435\u0442\u043a\u0430 \u0434\u0430\u0442\u044b \u0441\u043e\u0431\u044b\u0442\u0438\u044f - \u0411\u0415\u0417 \u041f\u0415\u0420\u0415\u0421\u0415\u0427\u0415\u041d\u0418\u0419 ========= *\/\n.event-date-label {\n position: absolute;\n bottom: 20px;\n left: 20px;\n background: linear-gradient(135deg, var(--bifa-civic-green), #248a5f);\n color: white;\n padding: 8px 18px;\n border-radius: 25px;\n font-family: var(--bifa-font-heading);\n font-weight: 700;\n font-size: 0.7rem;\n text-transform: uppercase;\n letter-spacing: 0.8px;\n z-index: 2;\n box-shadow: 0 8px 20px rgba(29, 97, 67, 0.4);\n white-space: nowrap;\n transition: all 0.3s ease;\n}<\/p>\n<p>.bifa-news-card:hover .event-date-label {\n transform: translateY(-2px);\n box-shadow: 0 12px 30px rgba(29, 97, 67, 0.5);\n}<\/p>\n<p>\/* ========= ERROR STATE - Premium ========= *\/\n.bifa-error-container {\n display: none;\n text-align: center;\n padding: 80px 20px;\n animation: fadeIn 0.5s ease-out;\n}<\/p>\n<p>.bifa-error-icon {\n width: 100px;\n height: 100px;\n margin: 0 auto 30px;\n background: linear-gradient(135deg, #FF6B6B, #FF4757);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0 20px 50px rgba(255, 71, 87, 0.3);\n animation: errorPulse 2s ease-in-out infinite;\n}<\/p>\n<p>@keyframes errorPulse {\n 0%, 100% {\n transform: scale(1);\n box-shadow: 0 20px 50px rgba(255, 71, 87, 0.3);\n }\n 50% {\n transform: scale(1.05);\n box-shadow: 0 25px 60px rgba(255, 71, 87, 0.4);\n }\n}<\/p>\n<p>.bifa-error-icon svg {\n width: 50px;\n height: 50px;\n stroke: white;\n stroke-width: 3;\n}<\/p>\n<p>.bifa-error-title {\n font-family: var(--bifa-font-heading);\n font-size: 2rem;\n font-weight: 800;\n color: var(--bifa-deep-navy);\n margin-bottom: 20px;\n}<\/p>\n<p>.bifa-error-message {\n font-family: var(--bifa-font-body);\n font-size: 1.15rem;\n color: #4a5568;\n margin-bottom: 40px;\n max-width: 500px;\n margin-left: auto;\n margin-right: auto;\n line-height: 1.7;\n}<\/p>\n<p>.bifa-retry-btn {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n color: var(--bifa-deep-navy);\n padding: 15px 35px;\n border-radius: 50px;\n font-family: var(--bifa-font-heading);\n font-weight: 800;\n font-size: 0.9rem;\n text-decoration: none;\n cursor: pointer;\n border: none;\n text-transform: uppercase;\n letter-spacing: 1px;\n transition: var(--bifa-transition);\n box-shadow: 0 15px 40px rgba(212, 175, 55, 0.3);\n position: relative;\n overflow: hidden;\n}<\/p>\n<p>.bifa-retry-btn::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>.bifa-retry-btn:hover {\n transform: translateY(-3px);\n box-shadow: 0 20px 50px rgba(212, 175, 55, 0.4);\n}<\/p>\n<p>.bifa-retry-btn:hover::before {\n width: 300px;\n height: 300px;\n}<\/p>\n<p>.bifa-retry-btn svg {\n width: 20px;\n height: 20px;\n transition: transform 0.3s ease;\n}<\/p>\n<p>.bifa-retry-btn:hover svg {\n transform: rotate(180deg);\n}<\/p>\n<p>\/* ========= ANIMATIONS ========= *\/\n@keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}<\/p>\n<p>@keyframes fadeInDown {\n from {\n opacity: 0;\n transform: translateY(-40px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>@keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(40px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>@keyframes textGlow {\n 0%, 100% {\n text-shadow: 0 0 5px rgba(212, 175, 55, 0.5);\n }\n 50% {\n text-shadow: 0 0 20px rgba(212, 175, 55, 0.8), 0 0 30px rgba(212, 175, 55, 0.6);\n }\n}<\/p>\n<p>\/* ========= RESPONSIVE ========= *\/\n@media (max-width: 1200px) {\n .bifa-news-card {\n flex: 0 0 calc(50% - 15px);\n }\n}<\/p>\n<p>@media (max-width: 992px) {\n \/* Hero \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0448\u0438\u0440\u043e\u043a\u0438\u043c \u043d\u0430 \u043f\u043b\u0430\u043d\u0448\u0435\u0442\u0430\u0445 *\/\n .bifa-hero-image {\n height: 400px;\n }<\/p>\n<p> .bifa-hero-content {\n padding: 40px;\n }\n}<\/p>\n<p>@media (max-width: 768px) {\n .bifa-news-section {\n padding: 50px 0 60px 0;\n }<\/p>\n<p> .bifa-section-header {\n margin-bottom: 50px;\n }<\/p>\n<p> .bifa-section-title {\n font-size: 1.75rem;\n }<\/p>\n<p> .bifa-news-card {\n flex: 0 0 calc(100% - 20px);\n }<\/p>\n<p> .bifa-carousel-header {\n flex-direction: column;\n gap: 25px;\n align-items: flex-start;\n }<\/p>\n<p> .bifa-hero-content {\n padding: 35px 25px;\n }<\/p>\n<p> .bifa-hero-title {\n font-size: 1.6rem;\n }<\/p>\n<p> .bifa-hero-excerpt {\n font-size: 0.95rem;\n }<\/p>\n<p> .bifa-carousel-controls {\n gap: 15px;\n }<\/p>\n<p> .bifa-hero-content {\n padding: 25px 20px;\n }<\/p>\n<p> .bifa-hero-title {\n font-size: 1.4rem;\n margin-bottom: 15px;\n }<\/p>\n<p> .bifa-hero-excerpt {\n font-size: 0.9rem;\n margin-bottom: 25px;\n }<\/p>\n<p> .hero-stat-item {\n gap: 8px;\n }<\/p>\n<p> .hero-stat-icon {\n width: 35px;\n height: 35px;\n }<\/p>\n<p> .hero-stat-icon svg {\n width: 18px;\n height: 18px;\n }<\/p>\n<p> .hero-stat-text {\n font-size: 0.8rem;\n }<\/p>\n<p> .bifa-carousel-btn {\n width: 44px;\n height: 44px;\n }<\/p>\n<p> \/* \u0418\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 *\/\n .event-date-label {\n font-size: 0.65rem;\n padding: 6px 14px;\n }\n}<\/p>\n<p>@media (max-width: 480px) {\n .bifa-news-section {\n padding: 40px 0 50px 0;\n }<\/p>\n<p> .bifa-section-title {\n font-size: 2rem;\n }<\/p>\n<p> .bifa-section-subtitle {\n font-size: 1.1rem;\n letter-spacing: 1px;\n }<\/p>\n<p> .bifa-hero-image {\n height: 300px;\n }<\/p>\n<p> .bifa-hero-image-overlay {\n top: 20px;\n left: 20px;\n flex-direction: column;\n gap: 10px;\n }<\/p>\n<p> .bifa-hero-badge,\n .bifa-hero-date {\n font-size: 0.7rem;\n padding: 6px 14px;\n letter-spacing: 0.5px;\n }<\/p>\n<p> .bifa-hero-footer {\n flex-direction: column;\n align-items: center;\n gap: 15px;\n width: 100%;\n }<\/p>\n<p> .bifa-hero-btn {\n width: auto;\n max-width: 220px;\n justify-content: center;\n padding: 14px 25px;\n font-size: 0.85rem;\n letter-spacing: 1px;\n }<\/p>\n<p> .bifa-hero-btn::after {\n display: none;\n }<\/p>\n<p> .bifa-hero-btn span {\n text-shadow: none;\n }<\/p>\n<p> .bifa-hero-wrapper {\n min-height: auto;\n }<\/p>\n<p> .bifa-hero-stats {\n margin-top: 20px;\n padding-top: 20px;\n gap: 25px;\n }<\/p>\n<p> .bifa-carousel-btn {\n width: 42px;\n height: 42px;\n }<\/p>\n<p> .bifa-news-content {\n padding: 20px;\n }<\/p>\n<p> .bifa-error-container {\n padding: 60px 20px;\n }<\/p>\n<p> \/* \u0418\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 - \u043c\u0435\u0442\u043a\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0432\u043d\u0438\u0437\u0443 \u0441\u043b\u0435\u0432\u0430 *\/\n .event-date-label {\n font-size: 0.6rem;\n padding: 5px 12px;\n bottom: 15px;\n left: 15px;\n }\n}\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"news-section-wrapper\">\n <\/p>\n<section class=\"bifa-news-section\">\n <\/p>\n<div class=\"news-bg-animation\">\n <\/p>\n<div class=\"floating-shape shape-news-1\"><\/div>\n<div class=\"floating-shape shape-news-2\"><\/div>\n<div class=\"floating-shape shape-news-3\"><\/div>\n<p> \n <\/div>\n<div class=\"bifa-container\">\n <\/p>\n<div class=\"bifa-section-header\">\n<h2 class=\"bifa-section-title\">Centro de Not\u00edcias BIFA+<\/h2>\n<p class=\"bifa-section-subtitle\">Latest Updates & Stories<\/p>\n<p class=\"bifa-section-description\">\n BIFA+ News - onde o jogo une as na\u00e7\u00f5es.\n <\/p>\n<\/p><\/div>\n<p> <\/p>\n<div id=\"bifaLoadingState\" class=\"bifa-loading-container\">\n<div class=\"bifa-loader\">\n<div class=\"bifa-loader-ring\"><\/div>\n<div class=\"bifa-loader-ring\"><\/div>\n<div class=\"bifa-loader-ring\"><\/div>\n<\/p><\/div>\n<p class=\"loading-text\">Loading Latest Stories…<\/p>\n<\/p><\/div>\n<p> <\/p>\n<div id=\"bifaNewsContent\" class=\"bifa-news-content\" style=\"display: none;\">\n <\/p>\n<div id=\"bifaHeroNews\" class=\"bifa-hero-news\">\n \n <\/div>\n<p> <\/p>\n<div class=\"bifa-news-carousel\">\n<div class=\"bifa-carousel-header\">\n<h3 class=\"bifa-carousel-title\">Mais hist\u00f3rias<\/h3>\n<div class=\"bifa-carousel-controls\">\n <button class=\"bifa-carousel-btn\" id=\"bifaPrevBtn\" aria-label=\"Anterior\"><br \/>\n <svg viewbox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M15 18L9 12L15 6\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg><br \/>\n <\/button><br \/>\n <button class=\"bifa-carousel-btn\" id=\"bifaNextBtn\" aria-label=\"Pr\u00f3ximo\"><br \/>\n <svg viewbox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M9 18L15 12L9 6\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg><br \/>\n <\/button>\n <\/div>\n<\/p><\/div>\n<div class=\"bifa-carousel-wrapper\">\n<div id=\"bifaCarouselTrack\" class=\"bifa-carousel-track\">\n \n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div id=\"bifaErrorState\" class=\"bifa-error-container\">\n<div class=\"bifa-error-icon\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M12 9V13M12 17H12.01M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg>\n <\/div>\n<h3 class=\"bifa-error-title\">N\u00e3o \u00e9 poss\u00edvel carregar not\u00edcias<\/h3>\n<p class=\"bifa-error-message\">We’re having trouble fetching the latest stories. Please check your connection and try again.<\/p>\n<p> <button class=\"bifa-retry-btn\" onclick=\"loadBifaNews()\"><br \/>\n <svg width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M1 4V10H7M23 20V14H17M20.49 9C19.62 5.33 16.31 2.5 12.23 2.5C7.09 2.5 2.7 7.17 3.04 12.5C3.38 17.83 8.09 22 13.5 22C17.83 22 21.53 19.19 22.68 15.36M12 8V12L15 15\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg><br \/>\n <span>Repetir<\/span><br \/>\n <\/button>\n <\/div>\n<\/p><\/div>\n<\/section>\n<\/div>\n<p><script>\n\/\/ BIFA+ Premium News Module - \u0423\u043b\u0443\u0447\u0448\u0435\u043d\u043d\u044b\u0439 \u043f\u0430\u0440\u0441\u0438\u043d\u0433 \u0438\u0437 \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430\nconst BifaNews = {\n \/\/ Configuration\n config: {\n apiUrl: 'https:\/\/bifa.ai\/wp-json\/wp\/v2\/bifa_news_events',\n perPage: 20,\n \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0434\u043b\u044f \u043b\u0443\u0447\u0448\u0435\u0433\u043e \u043f\u0430\u0440\u0441\u0438\u043d\u0433\u0430\n newsParams: '_embed&per_page=20&acf_format=standard&orderby=date&order=desc',\n carouselIndex: 0,\n cardsPerView: 3,\n newsData: []\n },<\/p>\n<p> \/\/ Initialize\n init() {\n this.createParticles();\n this.setupEventListeners();\n this.loadNews();\n this.updateCardsPerView();\n window.addEventListener('resize', () => this.updateCardsPerView());\n },<\/p>\n<p> \/\/ Create golden particles\n createParticles() {\n const particlesContainer = document.querySelector('.news-bg-animation');\n const particleCount = 10;<\/p>\n<p> for (let i = 0; i < particleCount; i++) {\n const particle = document.createElement('div');\n particle.className = 'news-particle';\n particle.style.left = Math.random() * 100 + '%';\n particle.style.animationDelay = Math.random() * 18 + 's';\n particle.style.animationDuration = (15 + Math.random() * 8) + '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\n \/\/ Setup event listeners\n setupEventListeners() {\n const prevBtn = document.getElementById('bifaPrevBtn');\n const nextBtn = document.getElementById('bifaNextBtn');\n \n if (prevBtn) prevBtn.addEventListener('click', () => this.navigateCarousel('prev'));\n if (nextBtn) nextBtn.addEventListener('click', () => this.navigateCarousel('next'));<\/p>\n<p> \/\/ Touch swipe \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\n this.setupTouchSwipe();\n },<\/p>\n<p> \/\/ Touch swipe functionality \u0434\u043b\u044f \u043a\u0430\u0440\u0443\u0441\u0435\u043b\u0438\n setupTouchSwipe() {\n const carouselWrapper = document.querySelector('.bifa-carousel-wrapper');\n if (!carouselWrapper) return;<\/p>\n<p> let touchStartX = 0;\n let touchEndX = 0;\n let touchStartY = 0;\n let touchEndY = 0;\n let isSwiping = false;\n const minSwipeDistance = 50; \/\/ \u041c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0441\u0432\u0430\u0439\u043f\u0430 \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445<\/p>\n<p> \/\/ Touch start\n carouselWrapper.addEventListener('touchstart', (e) => {\n touchStartX = e.touches[0].clientX;\n touchStartY = e.touches[0].clientY;\n isSwiping = true;\n }, { passive: true });<\/p>\n<p> \/\/ Touch move - \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u0441\u043a\u0440\u043e\u043b\u043b\u0430 \u043f\u0440\u0438 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u0432\u0430\u0439\u043f\u0435\n carouselWrapper.addEventListener('touchmove', (e) => {\n if (!isSwiping) return;<\/p>\n<p> touchEndX = e.touches[0].clientX;\n touchEndY = e.touches[0].clientY;<\/p>\n<p> const diffX = Math.abs(touchEndX - touchStartX);\n const diffY = Math.abs(touchEndY - touchStartY);<\/p>\n<p> \/\/ \u0415\u0441\u043b\u0438 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0432\u0430\u0439\u043f \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e, \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0441\u043a\u0440\u043e\u043b\u043b\n if (diffX > diffY && diffX > 10) {\n e.preventDefault();\n }\n }, { passive: false });<\/p>\n<p> \/\/ Touch end\n carouselWrapper.addEventListener('touchend', (e) => {\n if (!isSwiping) return;<\/p>\n<p> const diffX = touchEndX - touchStartX;\n const diffY = Math.abs(touchEndY - touchStartY);<\/p>\n<p> \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0447\u0442\u043e \u044d\u0442\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0432\u0430\u0439\u043f (\u0430 \u043d\u0435 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u043a\u0440\u043e\u043b\u043b)\n if (Math.abs(diffX) > diffY && Math.abs(diffX) > minSwipeDistance) {\n if (diffX > 0) {\n \/\/ \u0421\u0432\u0430\u0439\u043f \u0432\u043f\u0440\u0430\u0432\u043e - \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0439 \u0441\u043b\u0430\u0439\u0434\n this.navigateCarousel('prev');\n } else {\n \/\/ \u0421\u0432\u0430\u0439\u043f \u0432\u043b\u0435\u0432\u043e - \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0441\u043b\u0430\u0439\u0434\n this.navigateCarousel('next');\n }\n }<\/p>\n<p> isSwiping = false;\n touchStartX = 0;\n touchEndX = 0;\n touchStartY = 0;\n touchEndY = 0;\n }, { passive: true });\n },<\/p>\n<p> \/\/ Update cards per view based on screen size\n updateCardsPerView() {\n if (window.innerWidth <= 768) {\n this.config.cardsPerView = 1;\n } else if (window.innerWidth <= 1200) {\n this.config.cardsPerView = 2;\n } else {\n this.config.cardsPerView = 3;\n }\n },\n\n \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u0430\u0442\u044b\n formatDate(dateStr) {\n if (!dateStr) return '';\n const date = new Date(dateStr);\n return date.toLocaleDateString('en-US', {\n month: 'long',\n day: 'numeric',\n year: 'numeric'\n });\n },\n\n \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u0443\u0441\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u044f\n getEventStatus(startDate, endDate) {\n if (!startDate) return 'unknown';\n \n const now = new Date();\n const start = new Date(startDate);\n const end = endDate ? new Date(endDate) : start;\n \n now.setHours(0, 0, 0, 0);\n start.setHours(0, 0, 0, 0);\n end.setHours(23, 59, 59, 999);\n \n if (now > end) {\n return 'past';\n } else if (now >= start && now <= end) {\n return 'ongoing';\n } else {\n return 'upcoming';\n }\n },\n\n \/\/ Load news from API - \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u043d\u044b\u0439 \u043f\u0430\u0440\u0441\u0438\u043d\u0433 \u0438\u0437 \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430\n async loadNews() {\n const loadingState = document.getElementById('bifaLoadingState');\n const newsContent = document.getElementById('bifaNewsContent');\n const errorState = document.getElementById('bifaErrorState');\n\n try {\n \/\/ Show loading\n loadingState.style.display = 'flex';\n newsContent.style.display = 'none';\n errorState.style.display = 'none';\n\n \/\/ Fetch all items\n const response = await fetch(`${this.config.apiUrl}?${this.config.newsParams}`);\n \n if (!response.ok) {\n throw new Error('Failed to fetch news');\n }\n\n const allData = await response.json();\n \n \/\/ \u0423\u043b\u0443\u0447\u0448\u0435\u043d\u043d\u0430\u044f \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u044f - \u0431\u0435\u0440\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u043e\u0432\u043e\u0441\u0442\u0438 (\u0431\u0435\u0437 \u0434\u0430\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u0439)\n const newsData = allData.filter(item => {\n \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043a\u0430\u043a \u0438\u0437 \u043f\u0440\u044f\u043c\u044b\u0445 \u043f\u043e\u043b\u0435\u0439, \u0442\u0430\u043a \u0438 \u0438\u0437 meta\n const eventDate = item._bifa_event_date || item.meta?._bifa_event_date || item.acf?._bifa_event_date;\n const itemType = item.bifa_item_type || item.meta?.bifa_item_type || item.acf?.bifa_item_type;<\/p>\n<p> \/\/ \u042d\u0442\u043e \u043d\u043e\u0432\u043e\u0441\u0442\u044c \u0435\u0441\u043b\u0438 \u043d\u0435\u0442 \u0434\u0430\u0442\u044b \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0438\u043b\u0438 \u0442\u0438\u043f \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0430 \u043d\u043e\u0432\u043e\u0441\u0442\u044c\n const isNews = !eventDate || eventDate === '' || (itemType && !itemType.includes(3));<\/p>\n<p> return isNews;\n });<\/p>\n<p> if (newsData.length === 0) {\n throw new Error('No news available');\n }<\/p>\n<p> \/\/ \u0421\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u043f\u043e \u0434\u0430\u0442\u0435 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438\n newsData.sort((a, b) => new Date(b.date) - new Date(a.date));<\/p>\n<p> \/\/ Store news data\n this.config.newsData = newsData;<\/p>\n<p> \/\/ Hide loading, show content\n loadingState.style.display = 'none';\n newsContent.style.display = 'block';<\/p>\n<p> \/\/ Render news\n this.renderHeroNews(newsData[0]);\n this.renderCarousel(newsData.slice(1));<\/p>\n<p> } catch (error) {\n console.error('Error loading news:', error);\n loadingState.style.display = 'none';\n errorState.style.display = 'block';\n }\n },<\/p>\n<p> \/\/ Render hero news - \u0441 \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u043d\u044b\u043c \u043f\u0430\u0440\u0441\u0438\u043d\u0433\u043e\u043c \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u0418\u0421\u041f\u0420\u0410\u0412\u041b\u0415\u041d\u041d\u041e\u0419 \u041a\u041d\u041e\u041f\u041a\u041e\u0419\n renderHeroNews(news) {\n const heroContainer = document.getElementById('bifaHeroNews');\n if (!heroContainer || !news) return;<\/p>\n<p> \/\/ Get featured image\n const media = news._embedded?.['wp:featuredmedia']?.[0];\n const imageUrl = media?.source_url || '\/wp-content\/themes\/yootheme-child\/assets\/images\/news-placeholder-hero.jpg';<\/p>\n<p> \/\/ Format date\n const date = this.formatDate(news.date);<\/p>\n<p> \/\/ Get excerpt\n const excerpt = this.stripHtml(news.excerpt.rendered).substring(0, 350) + '...';<\/p>\n<p> \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c badge \u0438 priority \u0438\u0437 \u0432\u0441\u0435\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0445 \u043c\u0435\u0441\u0442\n const badgeText = news._bifa_badge_text || news.meta?._bifa_badge_text || news.acf?._bifa_badge_text || this.getBadgeText(news);\n const priority = news._bifa_priority || news.meta?._bifa_priority || news.acf?._bifa_priority || 'normal';<\/p>\n<p> \/\/ Render hero \u0441 \u0448\u0438\u0440\u043e\u043a\u0438\u043c \u0434\u0438\u0437\u0430\u0439\u043d\u043e\u043c - \u0418\u0421\u041f\u0420\u0410\u0412\u041b\u0415\u041d\u041d\u0410\u042f \u041a\u041d\u041e\u041f\u041a\u0410\n heroContainer.innerHTML = `<\/p>\n<div class=\"bifa-hero-card\" onclick=\"window.open('${news.link}', '_blank')\">\n<div class=\"bifa-hero-wrapper\">\n<div class=\"bifa-hero-image\" style=\"background-image: url('${imageUrl}')\">\n<div class=\"bifa-hero-image-overlay\">\n <span class=\"bifa-hero-badge ${priority === 'urgent' ? 'urgent' : ''}\">${badgeText}<\/span>\n <span class=\"bifa-hero-date\">${date}<\/span>\n <\/div>\n<\/p><\/div>\n<div class=\"bifa-hero-content\">\n<h2 class=\"bifa-hero-title\">${news.title.rendered}<\/h2>\n<p class=\"bifa-hero-excerpt\">${excerpt}<\/p>\n<div class=\"bifa-hero-footer\">\n <a href=\"\/$%7Bnews.link%7D\" class=\"bifa-hero-btn\" target=\"_blank\">\n <span>READ OUR STORY<\/span>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M5 12H19M19 12L12 5M19 12L12 19\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg>\n <\/a>\n <\/div>\n<div class=\"bifa-hero-stats\">\n<div class=\"hero-stat-item\">\n<div class=\"hero-stat-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z\" stroke=\"currentColor\" fill=\"none\"\/>\n <\/svg>\n <\/div>\n<div class=\"hero-stat-text\">\n <span class=\"hero-stat-number\">${priority === 'urgent' ? 'Breaking' : 'Featured'}<\/span> Story\n <\/div>\n<\/p><\/div>\n<div class=\"hero-stat-item\">\n<div class=\"hero-stat-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M9 11L12 14L22 4M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3\" stroke=\"currentColor\"\/>\n <\/svg>\n <\/div>\n<div class=\"hero-stat-text\">\n <span class=\"hero-stat-number\">Verified<\/span> News\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> `;\n },<\/p>\n<p> \/\/ Create news card \u0441 \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u043d\u044b\u043c \u043f\u0430\u0440\u0441\u0438\u043d\u0433\u043e\u043c\n createNewsCard(news, index) {\n const card = document.createElement('div');\n card.className = 'bifa-news-card';\n card.style.animationDelay = `${index * 0.1}s`;<\/p>\n<p> \/\/ Get data\n const media = news._embedded?.['wp:featuredmedia']?.[0];\n const imageUrl = media?.source_url || `\/wp-content\/themes\/yootheme-child\/assets\/images\/news-placeholder-${(index % 3) + 1}.jpg`;\n const date = this.formatDate(news.date);\n const excerpt = this.stripHtml(news.excerpt.rendered).substring(0, 100) + '...';<\/p>\n<p> \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c badge \u0438 priority\n const badgeText = news._bifa_badge_text || news.meta?._bifa_badge_text || news.acf?._bifa_badge_text || this.getBadgeText(news);\n const priority = news._bifa_priority || news.meta?._bifa_priority || news.acf?._bifa_priority || 'normal';<\/p>\n<p> \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043b\u0438 \u044d\u0442\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0435\u043c\n const eventDate = news._bifa_event_date || news.meta?._bifa_event_date || news.acf?._bifa_event_date;\n const eventEndDate = news._bifa_event_end_date || news.meta?._bifa_event_end_date || news.acf?._bifa_event_end_date;<\/p>\n<p> card.innerHTML = `<\/p>\n<div class=\"bifa-news-image\" style=\"background-image: url('${imageUrl}')\">\n <span class=\"bifa-news-badge ${priority === 'urgent' ? 'urgent' : ''}\">${badgeText}<\/span>\n ${eventDate ? `<span class=\"event-date-label\">Event: ${this.formatDate(eventDate)}<\/span>` : ''}\n <\/div>\n<div class=\"bifa-news-content\">\n<div class=\"bifa-news-date\">${date}<\/div>\n<h4 class=\"bifa-news-title\">${news.title.rendered}<\/h4>\n<p class=\"bifa-news-excerpt\">${excerpt}<\/p>\n<p> <a href=\"\/$%7Bnews.link%7D\" class=\"bifa-news-link\" target=\"_blank\" onclick=\"event.stopPropagation()\">\n <span>Read More<\/span>\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M5 12H19M19 12L12 5M19 12L12 19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg>\n <\/a>\n <\/div>\n<p> `;<\/p>\n<p> \/\/ Add click handler\n card.addEventListener('click', () => {\n window.open(news.link, '_blank');\n });<\/p>\n<p> return card;\n },<\/p>\n<p> \/\/ Render carousel - \u0441 \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u043d\u044b\u043c \u043f\u0430\u0440\u0441\u0438\u043d\u0433\u043e\u043c\n renderCarousel(newsItems) {\n const carouselTrack = document.getElementById('bifaCarouselTrack');\n if (!carouselTrack || !newsItems.length) return;<\/p>\n<p> \/\/ Clear existing content\n carouselTrack.innerHTML = '';<\/p>\n<p> \/\/ Render each news item\n newsItems.forEach((news, index) => {\n const card = this.createNewsCard(news, index);\n carouselTrack.appendChild(card);\n });<\/p>\n<p> \/\/ Reset carousel position\n this.config.carouselIndex = 0;\n this.updateCarouselPosition();\n },<\/p>\n<p> \/\/ Navigate carousel\n navigateCarousel(direction) {\n const track = document.getElementById('bifaCarouselTrack');\n if (!track) return;<\/p>\n<p> const cards = track.querySelectorAll('.bifa-news-card');\n const maxIndex = Math.max(0, cards.length - this.config.cardsPerView);<\/p>\n<p> if (direction === 'prev') {\n this.config.carouselIndex = Math.max(0, this.config.carouselIndex - 1);\n } else {\n this.config.carouselIndex = Math.min(maxIndex, this.config.carouselIndex + 1);\n }<\/p>\n<p> this.updateCarouselPosition();\n },<\/p>\n<p> \/\/ Update carousel position\n updateCarouselPosition() {\n const track = document.getElementById('bifaCarouselTrack');\n if (!track) return;<\/p>\n<p> const cardWidth = 100 \/ this.config.cardsPerView;\n const offset = -(this.config.carouselIndex * cardWidth);<\/p>\n<p> track.style.transform = `translateX(${offset}%)`;\n },<\/p>\n<p> \/\/ Get badge text\n getBadgeText(news) {\n \/\/ \u041f\u0440\u043e\u0431\u0443\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c badge \u0438\u0437 \u0440\u0430\u0437\u043d\u044b\u0445 \u043c\u0435\u0441\u0442\n if (news._bifa_badge_text) {\n return news._bifa_badge_text;\n }<\/p>\n<p> if (news.meta?._bifa_badge_text) {\n return news.meta._bifa_badge_text;\n }<\/p>\n<p> if (news.acf?._bifa_badge_text) {\n return news.acf._bifa_badge_text;\n }<\/p>\n<p> \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044e\n const category = news._embedded?.['wp:term']?.[0]?.[0];\n return category?.name || 'News';\n },<\/p>\n<p> \/\/ Strip HTML\n stripHtml(html) {\n const temp = document.createElement('div');\n temp.innerHTML = html;\n return temp.textContent || temp.innerText || '';\n }\n};<\/p>\n<p>\/\/ Initialize when DOM is ready\ndocument.addEventListener('DOMContentLoaded', () => {\n BifaNews.init();\n});<\/p>\n<p>\/\/ Make loadBifaNews globally available for retry button\nwindow.loadBifaNews = () => BifaNews.loadNews();\n<\/script><\/p>\n<p><\/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, maximum-scale=5.0, user-scalable=yes\"><br \/>\n<title>BIFA+ Interactive World Map<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n<style>\n:root {\n --navy: #0A1F44;\n --gold: #D4AF37;\n --gold-gradient: linear-gradient(135deg, #D4AF37, #ffd700);\n --green: #1D6143;\n --white: #FFF;\n --gray: #6B7280;\n --shadow: 0 2px 10px rgba(10,31,68,0.08);\n --shadow-lg: 0 10px 40px rgba(10,31,68,0.12);\n --trans: all 0.3s cubic-bezier(0.4,0,0.2,1);\n --r: 12px;\n}\n* { \n box-sizing: border-box; \n font-family: 'Poppins', sans-serif; \n -webkit-tap-highlight-color: transparent;\n -webkit-touch-callout: none;\n}\nbody { \n margin: 0; \n padding: 0; \n background: var(--white); \n touch-action: manipulation;\n}\nsvg {\n touch-action: manipulation;\n}\nsvg * {\n pointer-events: none;\n}\nsvg path {\n pointer-events: fill;\n}\n.svg-event-marker,\n.svg-event-marker * {\n pointer-events: all !important;\n cursor: pointer;\n}\n@keyframes float { \n 0%,100% { transform: translate3d(0,0,0); opacity: 1; } \n 50% { transform: translate3d(0,-10px,0); opacity: 0.8; } \n}\n@keyframes pulse { \n 0%,100% { transform: scale(1); } \n 50% { transform: scale(1.1); } \n}\n@keyframes spin { to { transform: rotate(360deg); } }\n@keyframes fadeIn { to { opacity: 1; } }\n@keyframes dashMove { to { stroke-dashoffset: -100; } }\n@keyframes fadeInUp {\n from { opacity: 0; transform: translate3d(0,30px,0); }\n to { opacity: 1; transform: translate3d(0,0,0); }\n}\n@keyframes expandWidth { to { width: 120px; } }\n.brics-map-container {\n position: relative;\n width: 100vw;\n margin-left: calc(-50vw + 50%);\n padding: 60px 0;\n background: var(--white);\n overflow: hidden;\n}\n.brics-map-container::before {\n content: '';\n position: absolute;\n inset: 0;\n background: radial-gradient(circle at 30% 50%, rgba(10,31,68,0.02), transparent 50%),\n radial-gradient(circle at 70% 80%, rgba(212,175,55,0.02), transparent 50%);\n z-index: 0;\n pointer-events: none;\n}\n.particles {\n position: absolute;\n width: 100%;\n height: 100%;\n overflow: hidden;\n z-index: 1;\n pointer-events: none;\n}\n.particle {\n position: absolute;\n width: 4px;\n height: 4px;\n background: linear-gradient(135deg, rgba(212,175,55,0.3), rgba(255,215,0,0.2));\n border-radius: 50%;\n animation: float 15s ease-in-out infinite;\n will-change: transform;\n box-shadow: 0 0 8px rgba(212,175,55,0.2);\n}\n.particle:nth-child(2n) { \n background: linear-gradient(135deg, rgba(10,31,68,0.2), rgba(22,46,90,0.15)); \n animation-duration: 18s; \n}\n.particle:nth-child(3n) { \n background: linear-gradient(135deg, rgba(29,97,67,0.15), rgba(45,139,95,0.1)); \n animation-duration: 20s;\n}\n.content-wrapper {\n position: relative;\n z-index: 2;\n padding: 0 20px;\n max-width: 1400px;\n margin: 0 auto;\n}\n.brics-header {\n text-align: center;\n margin-bottom: 60px;\n}\n.brics-header h2 {\n font-family: 'Montserrat', sans-serif;\n font-weight: 900;\n font-size: clamp(2.5rem, 4vw, 3.5rem);\n background: linear-gradient(135deg, var(--gold), #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n margin: 0 0 20px;\n position: relative;\n display: inline-block;\n text-transform: uppercase;\n letter-spacing: -0.5px;\n line-height: 1.2;\n text-shadow: 0 2px 4px rgba(212, 175, 55, 0.1);\n animation: fadeInUp 1s ease-out 0.3s both;\n}\n.brics-header h2:after {\n content: '';\n position: absolute;\n bottom: -15px;\n left: 50%;\n transform: translateX(-50%);\n width: 0;\n height: 5px;\n background: linear-gradient(90deg, var(--gold), #ffd700);\n border-radius: 3px;\n animation: expandWidth 0.8s ease-out 1s both;\n}\n.brics-subtitle {\n font-family: 'Poppins', sans-serif;\n font-weight: 600;\n font-size: 1.3rem;\n color: var(--gray);\n margin: 30px auto 0;\n letter-spacing: 0.3px;\n line-height: 1.6;\n max-width: 700px;\n animation: fadeInUp 1s ease-out 0.5s both;\n}\n.filter-controls {\n display: flex;\n justify-content: center;\n gap: 20px;\n margin-bottom: 40px;\n flex-wrap: wrap;\n}\n.filter-btn {\n padding: 12px 28px;\n background: var(--white);\n border: 2px solid var(--navy);\n border-radius: 50px;\n font-family: 'Montserrat', sans-serif;\n font-weight: 700;\n font-size: 14px;\n color: var(--navy);\n cursor: pointer;\n transition: var(--trans);\n text-decoration: none;\n display: inline-block;\n text-transform: uppercase;\n letter-spacing: 1px;\n box-shadow: 0 4px 15px rgba(10,31,68,0.1);\n position: relative;\n overflow: hidden;\n touch-action: manipulation;\n}\n.filter-btn:hover {\n transform: translateY(-3px);\n box-shadow: 0 8px 25px rgba(10,31,68,0.2);\n background: var(--navy);\n color: var(--white);\n}\n.filter-btn.active {\n background: var(--navy);\n color: var(--white);\n border-color: var(--navy);\n box-shadow: 0 6px 20px rgba(10,31,68,0.3);\n}\n.filter-btn.active.news {\n background: linear-gradient(135deg, var(--green), #2d8b5f);\n border-color: var(--green);\n box-shadow: 0 6px 20px rgba(29,97,67,0.3);\n}\n.brics-legend {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: 20px;\n margin-bottom: 40px;\n padding: 30px;\n background: linear-gradient(135deg, rgba(248,249,250,0.9) 0%, rgba(240,242,245,0.9) 100%);\n border-radius: 25px;\n box-shadow: 0 5px 30px rgba(10,31,68,0.08);\n backdrop-filter: blur(10px);\n border: 1px solid rgba(212,175,55,0.1);\n}\n.brics-country-tag {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 24px;\n background: var(--white);\n border-radius: 50px;\n box-shadow: 0 4px 15px rgba(10,31,68,0.1);\n transition: var(--trans);\n cursor: pointer;\n position: relative;\n overflow: hidden;\n border: 2px solid transparent;\n touch-action: manipulation;\n}\n.brics-country-tag:hover {\n transform: translateY(-3px) scale(1.02);\n box-shadow: 0 10px 30px rgba(212,175,55,0.3);\n border-color: var(--gold);\n}\n.brics-country-tag.active {\n background: linear-gradient(135deg, var(--navy), #162e5a);\n box-shadow: 0 6px 25px rgba(10,31,68,0.4);\n border-color: var(--gold);\n}\n.brics-country-tag.active .country-name {\n color: var(--white);\n}\n.country-flag {\n width: 32px;\n height: 24px;\n border-radius: 4px;\n background-size: cover;\n background-position: center;\n box-shadow: 0 2px 6px rgba(0,0,0,0.15);\n}\n.country-name {\n font-family: 'Montserrat', sans-serif;\n font-size: 15px;\n font-weight: 700;\n color: var(--navy);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n transition: color 0.3s ease;\n}\n.event-count {\n background: linear-gradient(135deg, var(--gold), #ffd700);\n color: var(--navy);\n font-family: 'Montserrat', sans-serif;\n font-weight: 800;\n font-size: 12px;\n padding: 4px 10px;\n border-radius: 20px;\n margin-left: auto;\n box-shadow: 0 2px 8px rgba(212,175,55,0.3);\n}\n.map-wrapper {\n position: relative;\n width: 100%;\n background: linear-gradient(135deg, #f5f6f8 0%, #e8eaed 100%);\n overflow: hidden;\n min-height: 600px;\n box-shadow: 0 10px 50px rgba(10,31,68,0.15);\n border-radius: 25px;\n margin: 0 20px;\n width: calc(100% - 40px);\n border: 1px solid rgba(212,175,55,0.1);\n}\n.map-zoom-container {\n width: 100%;\n height: 100%;\n position: relative;\n overflow: hidden;\n touch-action: none;\n cursor: grab;\n}\n.map-zoom-container:active {\n cursor: grabbing;\n}\n.map-svg-container {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n z-index: 1;\n padding: 40px;\n transform-origin: center center;\n transition: none;\n will-change: transform;\n}\n.map-svg-container svg {\n width: 100%;\n height: auto;\n max-height: 600px;\n filter: drop-shadow(0 10px 30px rgba(10,31,68,0.08));\n}\n.zoom-controls {\n position: absolute;\n bottom: 20px;\n right: 20px;\n display: flex;\n flex-direction: column;\n gap: 10px;\n z-index: 100;\n}\n.zoom-btn {\n width: 40px;\n height: 40px;\n background: var(--white);\n border: 2px solid var(--navy);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n font-size: 20px;\n font-weight: 800;\n color: var(--navy);\n box-shadow: 0 4px 15px rgba(10,31,68,0.2);\n transition: all 0.3s;\n user-select: none;\n position: relative;\n overflow: hidden;\n touch-action: manipulation;\n}\n.zoom-btn:hover {\n background: var(--navy);\n color: var(--white);\n transform: scale(1.1);\n border-color: var(--gold);\n}\n.zoom-btn:active {\n transform: scale(0.95);\n}\n.zoom-reset {\n font-size: 14px;\n padding: 8px 12px;\n width: auto;\n height: auto;\n border-radius: 25px;\n font-family: 'Montserrat', sans-serif;\n font-weight: 700;\n letter-spacing: 0.5px;\n}\n.map-svg-container svg path {\n fill: #e8eaed;\n stroke: #d1d5db;\n stroke-width: 0.3;\n opacity: 0.4;\n filter: blur(0.8px);\n pointer-events: none;\n transition: none;\n cursor: default;\n}\n.map-svg-container svg path.brics-country {\n fill: var(--gold);\n stroke: var(--white);\n stroke-width: 2;\n opacity: 1;\n filter: drop-shadow(0 0 15px rgba(212,175,55,0.5));\n pointer-events: fill;\n cursor: pointer;\n transition: var(--trans);\n}\n.map-svg-container svg path.brics-country:hover {\n fill: #e6c157;\n stroke-width: 2.5;\n filter: brightness(1.15) drop-shadow(0 0 25px rgba(212,175,55,0.7));\n}\n.map-svg-container svg path.active-country {\n fill: var(--navy) !important;\n stroke: var(--gold);\n stroke-width: 2.5;\n filter: drop-shadow(0 0 25px rgba(10,31,68,0.5));\n}\n.connection-lines {\n pointer-events: none;\n opacity: 0;\n animation: fadeIn 2s ease-out 1s forwards;\n}\n.connection-line {\n stroke: var(--gold);\n stroke-width: 1.5;\n fill: none;\n stroke-dasharray: 5, 5;\n animation: dashMove 20s linear infinite;\n opacity: 0.4;\n}\n.svg-event-marker {\n cursor: pointer;\n position: relative;\n}\n.svg-event-marker:hover circle:not([fill=\"transparent\"]) {\n filter: drop-shadow(0 6px 20px rgba(212,175,55,0.5));\n stroke-width: 4;\n}\n.svg-event-marker circle {\n fill: var(--white);\n stroke: var(--gold);\n stroke-width: 3;\n filter: drop-shadow(0 4px 12px rgba(10,31,68,0.3));\n transition: all 0.3s ease;\n}\n.svg-event-marker.news circle {\n stroke: var(--green);\n}\n.svg-event-marker.urgent circle {\n stroke: #dc2626;\n animation: pulse 1s ease-in-out infinite;\n}\n.svg-event-marker text {\n text-anchor: middle;\n dominant-baseline: middle;\n pointer-events: none;\n user-select: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n}\n.event-popup {\n position: fixed !important;\n background: var(--white);\n border-radius: 25px;\n box-shadow: 0 30px 90px rgba(10,31,68,0.3);\n padding: 24px;\n z-index: 999999 !important;\n max-width: 380px;\n min-width: 320px;\n display: none;\n pointer-events: none !important;\n border: 2px solid var(--gold);\n opacity: 0;\n transition: opacity 0.2s ease-in-out;\n backdrop-filter: blur(10px);\n}\n.event-popup.active {\n display: block !important;\n opacity: 1;\n pointer-events: auto !important;\n}\n.popup-close {\n position: absolute;\n top: 10px;\n right: 10px;\n width: 32px;\n height: 32px;\n background: var(--navy);\n color: var(--white);\n border: none;\n border-radius: 50%;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 18px;\n font-weight: 800;\n transition: all 0.3s;\n z-index: 10;\n box-shadow: 0 4px 12px rgba(10,31,68,0.3);\n touch-action: manipulation;\n}\n.popup-close:hover {\n background: linear-gradient(135deg, #dc2626, #ef4444);\n transform: scale(1.1) rotate(90deg);\n box-shadow: 0 6px 20px rgba(220,38,38,0.4);\n}\n.popup-overlay {\n position: fixed;\n inset: 0;\n background: rgba(0,0,0,0.3);\n z-index: 999998;\n cursor: pointer;\n display: none;\n}\n.popup-overlay.active {\n display: block;\n}\n@media (max-width: 768px) {\n .popup-overlay.active { display: block; }\n .event-popup {\n top: 50% !important;\n left: 50% !important;\n transform: translate(-50%, -50%) !important;\n }\n}\n.country-tooltip {\n position: absolute;\n background: var(--navy);\n color: var(--white);\n font-family: 'Montserrat', sans-serif;\n font-size: 14px;\n font-weight: 600;\n white-space: nowrap;\n padding: 10px 20px;\n border-radius: 25px;\n box-shadow: 0 8px 25px rgba(10,31,68,0.4);\n opacity: 0;\n visibility: hidden;\n transform: translateY(5px);\n transition: all 0.2s;\n pointer-events: none;\n z-index: 10002;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n border: 1px solid rgba(212,175,55,0.2);\n}\n.country-tooltip.show {\n opacity: 1;\n visibility: visible;\n transform: translateY(0);\n}\n.popup-header {\n display: flex;\n gap: 16px;\n margin-bottom: 20px;\n}\n.popup-image-wrapper {\n position: relative;\n width: 110px;\n height: 80px;\n flex-shrink: 0;\n border-radius: 15px;\n overflow: hidden;\n background: linear-gradient(135deg, #f0f2f5 0%, #e5e7eb 100%);\n box-shadow: 0 4px 15px rgba(10,31,68,0.15);\n border: 1px solid rgba(212,175,55,0.1);\n}\n.popup-image-wrapper.no-image {\n background: linear-gradient(135deg, #f0f2f5 0%, #e5e7eb 100%);\n}\n.popup-image {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n}\n.popup-image-placeholder {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 32px;\n background: linear-gradient(135deg, #f8f9fa 0%, #f0f2f5 100%);\n color: #6B7280;\n text-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n.popup-content { \n flex: 1; \n min-height: 80px;\n}\n.popup-title {\n font-family: 'Montserrat', sans-serif;\n font-weight: 800;\n font-size: 18px;\n color: var(--navy);\n margin: 0 0 10px;\n line-height: 1.3;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-transform: uppercase;\n letter-spacing: -0.3px;\n}\n.popup-meta {\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n.popup-meta-item {\n font-family: 'Poppins', sans-serif;\n font-size: 13px;\n color: var(--gray);\n display: flex;\n align-items: center;\n gap: 8px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.3px;\n}\n.popup-excerpt {\n font-family: 'Poppins', sans-serif;\n font-size: 14px;\n color: #475569;\n line-height: 1.6;\n margin: 16px 0 20px;\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n.popup-link {\n background: linear-gradient(135deg, var(--gold), #ffd700);\n color: var(--navy);\n padding: 12px 24px;\n border-radius: 50px;\n text-decoration: none;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n font-family: 'Montserrat', sans-serif;\n font-weight: 800;\n font-size: 14px;\n text-transform: uppercase;\n letter-spacing: 1px;\n transition: all 0.3s;\n box-shadow: 0 4px 15px rgba(212,175,55,0.4);\n position: relative;\n overflow: hidden;\n touch-action: manipulation;\n}\n.popup-link:hover {\n transform: translateY(-3px);\n box-shadow: 0 8px 25px rgba(212,175,55,0.5);\n background: linear-gradient(135deg, #e6c157, #ffd700);\n}\n.loading-overlay {\n position: absolute;\n inset: 0;\n background: rgba(255,255,255,0.95);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10000;\n backdrop-filter: blur(5px);\n border-radius: var(--r);\n}\n.spinner {\n width: 50px;\n height: 50px;\n border: 4px solid #e5e7eb;\n border-top-color: var(--gold);\n border-radius: 50%;\n animation: spin 1s linear infinite;\n margin: 0 auto 20px;\n box-shadow: 0 0 20px rgba(212,175,55,0.2);\n}\n.loading-text {\n font-family: 'Montserrat', sans-serif;\n font-size: 16px;\n color: var(--gray);\n font-weight: 600;\n letter-spacing: 0.5px;\n text-transform: uppercase;\n}\n@media (max-width: 768px) {\n .brics-map-container { padding: 40px 0; }\n .content-wrapper { padding: 0 15px; }\n .brics-header { margin-bottom: 40px; }\n .brics-header h2 { font-size: 2rem; }\n .brics-subtitle { font-size: 1.1rem; }\n .filter-controls { gap: 10px; margin-bottom: 25px; padding: 0 10px; }\n .filter-btn { padding: 10px 20px; font-size: 12px; border-radius: 25px; }\n .brics-legend { gap: 10px; padding: 20px 15px; margin-bottom: 25px; border-radius: 20px; }\n .brics-country-tag { padding: 8px 16px; gap: 10px; border-radius: 25px; }\n .country-flag { width: 24px; height: 18px; }\n .country-name { font-size: 13px; }\n .event-count { font-size: 11px; padding: 3px 8px; border-radius: 15px; }\n .map-wrapper { margin: 0; width: 100%; min-height: 450px; height: 450px; border-radius: 15px; }\n .map-svg-container { padding: 10px; }\n .map-svg-container svg { max-height: none; height: 130%; width: auto; max-width: none; }\n .zoom-controls { bottom: 10px; right: 10px; gap: 8px; }\n .zoom-btn { width: 36px; height: 36px; font-size: 18px; }\n .zoom-reset { font-size: 12px; padding: 6px 10px; border-radius: 20px; }\n .svg-event-marker circle { stroke-width: 2; }\n .svg-event-marker:active circle {\n stroke-width: 4;\n filter: drop-shadow(0 4px 15px rgba(212,175,55,0.5));\n }\n .event-popup { max-width: calc(100vw - 30px) !important; min-width: 280px; padding: 20px; border-radius: 20px; }\n .popup-header { flex-direction: column; gap: 12px; }\n .popup-image-wrapper { width: 100%; height: 160px; border-radius: 12px; }\n .popup-image-placeholder { font-size: 48px; }\n .popup-title { font-size: 16px; }\n .popup-excerpt { font-size: 13px; }\n .popup-link { width: 100%; justify-content: center; padding: 12px 20px; border-radius: 25px; }\n .country-tooltip { font-size: 12px; padding: 8px 16px; border-radius: 20px; }\n .connection-lines { display: none; }\n .particle { width: 3px; height: 3px; }\n}\n@media (max-width: 480px) {\n .brics-map-container { padding: 30px 0; }\n .brics-header { margin-bottom: 35px; }\n .brics-header h2 { font-size: 1.8rem; }\n .brics-subtitle { font-size: 1rem; margin-top: 20px; }\n}\n@media (max-width: 375px) {\n .brics-header h2 { font-size: 1.8rem; }\n .brics-subtitle { font-size: 1rem; }\n .map-wrapper { height: 350px; min-height: 350px; border-radius: 12px; }\n .svg-event-marker text { font-size: 14px; }\n}\n@media (hover: none) and (pointer: coarse) {\n .svg-event-marker {\n transform-origin: center;\n }\n .svg-event-marker:active circle {\n stroke-width: 4;\n filter: drop-shadow(0 6px 20px rgba(212,175,55,0.5));\n }\n}\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"brics-map-container\">\n<div class=\"particles\">\n<div class=\"particle\" style=\"left:10%;animation-delay:0s\"><\/div>\n<div class=\"particle\" style=\"left:30%;animation-delay:2s\"><\/div>\n<div class=\"particle\" style=\"left:50%;animation-delay:4s\"><\/div>\n<div class=\"particle\" style=\"left:70%;animation-delay:6s\"><\/div>\n<div class=\"particle\" style=\"left:90%;animation-delay:8s\"><\/div>\n<\/div>\n<div class=\"content-wrapper\">\n<div class=\"brics-header\">\n<a href=\"https:\/\/bifa.ai\/events-2\/\" style=\"text-decoration: none;\"><\/p>\n<h2>Eventos de transi\u00e7\u00e3o BIFA+<\/h2>\n<p><\/a><\/p>\n<p class=\"brics-subtitle\">Conectando na\u00e7\u00f5es por meio de pontes econ\u00f4micas<\/p>\n<\/div>\n<div class=\"filter-controls\" id=\"filterControls\"><\/div>\n<div class=\"brics-legend\" id=\"legend\"><\/div>\n<div class=\"map-wrapper\">\n<div class=\"map-zoom-container\" id=\"mapZoomContainer\">\n<div class=\"map-svg-container\" id=\"mapContainer\"><\/div>\n<\/div>\n<div class=\"country-tooltip\" id=\"tooltip\"><\/div>\n<div class=\"zoom-controls\" id=\"zoomControls\"><\/div>\n<div class=\"loading-overlay\" id=\"loadingOverlay\">\n<div style=\"text-align:center\">\n<div class=\"spinner\"><\/div>\n<div class=\"loading-text\">Loading BIFA+ content…<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"event-popup\" id=\"eventPopup\"><\/div>\n<div class=\"popup-overlay\" id=\"popupOverlay\"><\/div>\n<\/div>\n<\/div>\n<p><script>\n(function() {\n'use strict';<\/p>\n<p>\/\/ ==================== CONFIGURATION ====================\nconst CONFIG = {\n SVG_PATH: \"\/wp-content\/themes\/yootheme-child\/assets\/images\/world_map.svg\",\n API_ENDPOINT: 'https:\/\/bifa.ai\/wp-json\/wp\/v2\/bifa_news_events?_embed&per_page=100&acf_format=standard',\n IMAGE_PROXY: 'https:\/\/images.weserv.nl\/',\n MIN_ZOOM: 1,\n MAX_ZOOM: 4,\n ZOOM_STEP: 0.3,\n MOBILE_BREAKPOINT: 768,\n DEBOUNCE_DELAY: 250,\n THROTTLE_DELAY: 16,\n POPUP_HOVER_DELAY: 200,\n TOUCH_TAP_THRESHOLD: 300,\n MAX_MARKERS_PER_COUNTRY: 5,\n MARKER_RADIUS_DESKTOP: 30,\n MARKER_RADIUS_MOBILE: 20,\n MARKER_SIZE_DESKTOP: 20,\n MARKER_SIZE_MOBILE: 22\n};<\/p>\n<p>const BRICS_COUNTRIES = {\n 'BR': { name: 'Brazil', lat: -14.235, lng: -51.925, size: 'medium' },\n 'RU': { name: 'Russian Federation', lat: 61.524, lng: 105.318, size: 'large' },\n 'IN': { name: 'India', lat: 20.593, lng: 78.962, size: 'large' },\n 'CN': { name: 'China', lat: 35.861, lng: 104.195, size: 'large' },\n 'ZA': { name: 'South Africa', lat: -30.559, lng: 22.937, size: 'medium' },\n 'SA': { name: 'Saudi Arabia', lat: 23.885, lng: 45.079, size: 'small' },\n 'AE': { name: 'United Arab Emirates', lat: 23.424, lng: 53.847, size: 'small' },\n 'EG': { name: 'Egypt', lat: 26.820, lng: 30.802, size: 'medium' },\n 'IR': { name: 'Iran', lat: 32.427, lng: 53.688, size: 'medium' },\n 'ET': { name: 'Ethiopia', lat: 9.145, lng: 40.489, size: 'small' },\n 'ID': { name: 'Indonesia', lat: -0.789, lng: 113.921, size: 'large' }\n};<\/p>\n<p>const MAX_MARKERS_BY_SIZE = {\n small: 1,\n medium: 3,\n large: 4\n};<\/p>\n<p>const INDONESIA_ID_PATTERNS = ['ID', 'ID0', 'ID1', 'ID2', 'ID3', 'ID4', 'ID5', 'ID6', 'ID7', 'ID8', 'ID9', 'ID_'];<\/p>\n<p>\/\/ ==================== STATE MANAGEMENT ====================\nclass AppState {\n constructor() {\n this.content = [];\n this.filter = 'all';\n this.svg = null;\n this.zoom = 1;\n this.x = 0;\n this.y = 0;\n this.isDragging = false;\n this.startX = 0;\n this.startY = 0;\n this.maxX = 0;\n this.maxY = 0;\n this.markersGroup = null;\n this.activeMarker = null;\n this.isPopupOpen = false;\n this.isPopupHovered = false;\n this.touchStartTime = 0;\n this.lastDistance = 0;\n this.countryCenters = {};\n this.eventListeners = new Map();\n this.isTouchDevice = this._detectTouchDevice();\n this.isMobile = this._detectMobile();\n this.resizeObserver = null;\n this.imageLoadErrors = new WeakMap();\n }<\/p>\n<p> _detectTouchDevice() {\n return ('ontouchstart' in window) || \n (navigator.maxTouchPoints > 0) || \n (navigator.msMaxTouchPoints > 0);\n }<\/p>\n<p> _detectMobile() {\n return window.innerWidth <= CONFIG.MOBILE_BREAKPOINT;\n }\n\n updateMobileState() {\n this.isMobile = this._detectMobile();\n }\n\n reset() {\n this.zoom = 1;\n this.x = 0;\n this.y = 0;\n this.isDragging = false;\n }\n}\n\n\/\/ ==================== UTILITY FUNCTIONS ====================\nclass Utils {\n static $(id) {\n return document.getElementById(id);\n }\n\n static $$(selector, parent = document) {\n return parent.querySelectorAll(selector);\n }\n\n static createElement(html) {\n const template = document.createElement('template');\n template.innerHTML = html.trim();\n return template.content.firstChild;\n }\n\n static debounce(func, wait) {\n let timeout;\n return function executedFunction(...args) {\n const later = () => {\n clearTimeout(timeout);\n func(...args);\n };\n clearTimeout(timeout);\n timeout = setTimeout(later, wait);\n };\n }<\/p>\n<p> static throttle(func, limit) {\n let inThrottle;\n return function(...args) {\n if (!inThrottle) {\n func.apply(this, args);\n inThrottle = true;\n setTimeout(() => inThrottle = false, limit);\n }\n };\n }<\/p>\n<p> static formatDate(dateStr) {\n if (!dateStr) return '';\n const date = new Date(dateStr);\n return date.toLocaleDateString('en-US', { \n month: 'short', \n day: 'numeric', \n year: 'numeric' \n });\n }<\/p>\n<p> static stripHtml(html) {\n const div = document.createElement('div');\n div.innerHTML = html;\n const text = div.textContent || '';\n return text.length > 200 ? text.substring(0, 200) + '...' : text;\n }<\/p>\n<p> static createImageProxy(url) {\n if (!url || window.location.hostname === 'bifa.ai') return url;\n return `${CONFIG.IMAGE_PROXY}?url=${encodeURIComponent(url)}&w=380&h=220&fit=cover&a=attention`;\n }<\/p>\n<p> static isIndonesiaPath(id) {\n return INDONESIA_ID_PATTERNS.some(pattern => \n id === pattern || id.startsWith(pattern)\n );\n }<\/p>\n<p> static clamp(value, min, max) {\n return Math.max(min, Math.min(max, value));\n }\n}<\/p>\n<p>\/\/ ==================== EVENT MANAGER ====================\nclass EventManager {\n constructor() {\n this.listeners = new Map();\n }<\/p>\n<p> add(element, event, handler, options = {}) {\n if (!element) return;<\/p>\n<p> const key = `${event}-${handler.name || 'anonymous'}`;<\/p>\n<p> if (this.listeners.has(element)) {\n const elementListeners = this.listeners.get(element);\n if (elementListeners.has(key)) {\n return;\n }\n elementListeners.set(key, { event, handler, options });\n } else {\n this.listeners.set(element, new Map([[key, { event, handler, options }]]));\n }<\/p>\n<p> element.addEventListener(event, handler, options);\n }<\/p>\n<p> remove(element, event, handler) {\n if (!element) return;<\/p>\n<p> const key = `${event}-${handler.name || 'anonymous'}`;\n const elementListeners = this.listeners.get(element);<\/p>\n<p> if (elementListeners && elementListeners.has(key)) {\n const { event: evt, handler: hdlr, options } = elementListeners.get(key);\n element.removeEventListener(evt, hdlr, options);\n elementListeners.delete(key);<\/p>\n<p> if (elementListeners.size === 0) {\n this.listeners.delete(element);\n }\n }\n }<\/p>\n<p> removeAll(element) {\n if (!element || !this.listeners.has(element)) return;<\/p>\n<p> const elementListeners = this.listeners.get(element);\n elementListeners.forEach(({ event, handler, options }) => {\n element.removeEventListener(event, handler, options);\n });<\/p>\n<p> this.listeners.delete(element);\n }<\/p>\n<p> cleanup() {\n this.listeners.forEach((elementListeners, element) => {\n this.removeAll(element);\n });\n this.listeners.clear();\n }\n}<\/p>\n<p>\/\/ ==================== ZOOM CONTROLLER ====================\nclass ZoomController {\n constructor(state, eventManager) {\n this.state = state;\n this.eventManager = eventManager;\n this.container = null;\n this.mapContainer = null;\n }<\/p>\n<p> init(container, mapContainer) {\n this.container = container;\n this.mapContainer = mapContainer;\n this.setupEventListeners();\n this.renderControls();\n }<\/p>\n<p> setupEventListeners() {\n this.eventManager.add(this.container, 'mousedown', this.handleStart.bind(this));\n this.eventManager.add(this.container, 'mousemove', Utils.throttle(this.handleMove.bind(this), CONFIG.THROTTLE_DELAY));\n this.eventManager.add(this.container, 'mouseup', this.handleEnd.bind(this));\n this.eventManager.add(this.container, 'mouseleave', this.handleEnd.bind(this));\n this.eventManager.add(this.container, 'wheel', this.handleWheel.bind(this), { passive: false });<\/p>\n<p> this.eventManager.add(this.container, 'touchstart', this.handleStart.bind(this), { passive: false });\n this.eventManager.add(this.container, 'touchmove', this.handleTouchMove.bind(this), { passive: false });\n this.eventManager.add(this.container, 'touchend', this.handleTouchEnd.bind(this));\n }<\/p>\n<p> handleStart(e) {\n if (this.state.zoom <= 1) return;\n \n this.state.isDragging = true;\n const point = e.touches ? e.touches[0] : e;\n this.state.startX = point.clientX - this.state.x;\n this.state.startY = point.clientY - this.state.y;\n \n if (e.type === 'touchstart') {\n e.preventDefault();\n }\n }\n\n handleMove(e) {\n if (!this.state.isDragging || this.state.zoom <= 1) return;\n \n const point = e.touches ? e.touches[0] : e;\n this.state.x = point.clientX - this.state.startX;\n this.state.y = point.clientY - this.state.startY;\n \n requestAnimationFrame(() => this.updateTransform());<\/p>\n<p> if (e.type === 'touchmove') {\n e.preventDefault();\n }\n }<\/p>\n<p> handleEnd() {\n this.state.isDragging = false;\n }<\/p>\n<p> handleWheel(e) {\n if (e.ctrlKey || e.metaKey) {\n e.preventDefault();\n const delta = e.deltaY > 0 ? -CONFIG.ZOOM_STEP : CONFIG.ZOOM_STEP;\n this.setZoom(this.state.zoom + delta);\n }\n }<\/p>\n<p> handleTouchMove(e) {\n if (e.touches.length === 2) {\n e.preventDefault();\n const touch1 = e.touches[0];\n const touch2 = e.touches[1];\n const distance = Math.hypot(\n touch2.clientX - touch1.clientX,\n touch2.clientY - touch1.clientY\n );<\/p>\n<p> if (this.state.lastDistance > 0) {\n const scale = distance \/ this.state.lastDistance;\n this.setZoom(this.state.zoom * scale);\n }\n this.state.lastDistance = distance;\n } else {\n this.handleMove(e);\n }\n }<\/p>\n<p> handleTouchEnd(e) {\n if (e.touches.length === 0) {\n this.state.lastDistance = 0;\n this.handleEnd();\n }\n }<\/p>\n<p> setZoom(zoom) {\n this.state.zoom = Utils.clamp(zoom, CONFIG.MIN_ZOOM, CONFIG.MAX_ZOOM);\n this.updateBounds();\n this.updateTransform();\n }<\/p>\n<p> updateBounds() {\n if (!this.state.svg || !this.container) return;<\/p>\n<p> const containerBounds = this.container.getBoundingClientRect();\n const svgBox = this.state.svg.getBBox();<\/p>\n<p> const scaledWidth = svgBox.width * this.state.zoom;\n const scaledHeight = svgBox.height * this.state.zoom;<\/p>\n<p> this.state.maxX = Math.max(0, (scaledWidth - containerBounds.width) \/ 2);\n this.state.maxY = Math.max(0, (scaledHeight - containerBounds.height) \/ 2);\n }<\/p>\n<p> updateTransform() {\n if (!this.mapContainer) return;<\/p>\n<p> this.state.x = Utils.clamp(this.state.x, -this.state.maxX, this.state.maxX);\n this.state.y = Utils.clamp(this.state.y, -this.state.maxY, this.state.maxY);<\/p>\n<p> this.mapContainer.style.transform = \n `translate3d(${this.state.x}px, ${this.state.y}px, 0) scale(${this.state.zoom})`;\n }<\/p>\n<p> zoomIn() {\n this.setZoom(this.state.zoom + CONFIG.ZOOM_STEP);\n }<\/p>\n<p> zoomOut() {\n this.setZoom(this.state.zoom - CONFIG.ZOOM_STEP);\n }<\/p>\n<p> reset() {\n this.state.reset();\n this.updateTransform();\n }<\/p>\n<p> renderControls() {\n const controls = Utils.$('zoomControls');\n controls.innerHTML = `\n <button class=\"zoom-btn\" id=\"zoomInBtn\">+<\/button>\n <button class=\"zoom-btn\" id=\"zoomOutBtn\">\u2212<\/button>\n <button class=\"zoom-btn zoom-reset\" id=\"zoomResetBtn\">Reset<\/button>\n `;<\/p>\n<p> this.eventManager.add(Utils.$('zoomInBtn'), 'click', () => this.zoomIn());\n this.eventManager.add(Utils.$('zoomOutBtn'), 'click', () => this.zoomOut());\n this.eventManager.add(Utils.$('zoomResetBtn'), 'click', () => this.reset());\n }\n}<\/p>\n<p>\/\/ ==================== MAP MANAGER ====================\nclass MapManager {\n constructor(state, eventManager) {\n this.state = state;\n this.eventManager = eventManager;\n this.tooltip = Utils.$('tooltip');\n }<\/p>\n<p> async loadSVG() {\n try {\n const response = await fetch(CONFIG.SVG_PATH);\n if (!response.ok) {\n throw new Error(`${response.status} ${response.statusText}`);\n }<\/p>\n<p> const svgText = await response.text();\n const container = Utils.$('mapContainer');\n container.innerHTML = svgText;<\/p>\n<p> this.state.svg = container.querySelector('svg');\n if (!this.state.svg) {\n throw new Error('SVG element not found');\n }<\/p>\n<p> this.initMap();\n } catch (error) {\n console.error('Error loading SVG:', error);\n Utils.$('mapContainer').innerHTML = \n '<\/p>\n<div style=\"text-align:center;padding:50px;color:#666\">Unable to load map<\/div>\n<p>';\n Utils.$('loadingOverlay').style.display = 'none';\n }\n }<\/p>\n<p> initMap() {\n this.setupSVGDefs();\n this.createMarkersGroup();\n this.processPaths();\n this.createConnectionLines();\n }<\/p>\n<p> setupSVGDefs() {\n const defs = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'defs');\n defs.innerHTML = `\n <linearGradient id=\"brics-gradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n <stop offset=\"0%\" style=\"stop-color:#D4AF37\"\/>\n <stop offset=\"100%\" style=\"stop-color:#b8973f\"\/>\n <\/linearGradient>\n `;\n this.state.svg.insertBefore(defs, this.state.svg.firstChild);\n }<\/p>\n<p> createMarkersGroup() {\n this.state.markersGroup = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'g');\n this.state.markersGroup.setAttribute('id', 'markers-group');\n this.state.svg.appendChild(this.state.markersGroup);\n }<\/p>\n<p> processPaths() {\n const paths = this.state.svg.querySelectorAll('path');<\/p>\n<p> paths.forEach(path => {\n const id = path.id || path.getAttribute('id');\n if (!id) return;<\/p>\n<p> const countryCode = this.identifyCountry(id);<\/p>\n<p> if (countryCode) {\n this.setupBRICSPath(path, countryCode);\n this.calculateCenter(path, countryCode);\n }\n });\n }<\/p>\n<p> identifyCountry(pathId) {\n if (BRICS_COUNTRIES[pathId]) {\n return pathId;\n }<\/p>\n<p> if (Utils.isIndonesiaPath(pathId)) {\n return 'ID';\n }<\/p>\n<p> return null;\n }<\/p>\n<p> setupBRICSPath(path, countryCode) {\n path.classList.add('brics-country');\n path.setAttribute('data-brics', countryCode);\n path.setAttribute('data-country-name', BRICS_COUNTRIES[countryCode].name);<\/p>\n<p> if (!this.state.isTouchDevice) {\n this.eventManager.add(path, 'mouseenter', (e) => this.showTooltip(e));\n this.eventManager.add(path, 'mousemove', (e) => this.updateTooltip(e));\n this.eventManager.add(path, 'mouseleave', () => this.hideTooltip());\n }<\/p>\n<p> this.eventManager.add(path, 'click', (e) => this.toggleCountry(e, countryCode));\n }<\/p>\n<p> calculateCenter(path, countryCode) {\n const bbox = path.getBBox();\n if (!this.state.countryCenters[countryCode]) {\n this.state.countryCenters[countryCode] = {\n x: bbox.x + bbox.width \/ 2,\n y: bbox.y + bbox.height \/ 2\n };\n }\n }<\/p>\n<p> showTooltip(e) {\n const name = e.target.getAttribute('data-country-name');\n if (name) {\n this.tooltip.textContent = name;\n this.tooltip.classList.add('show');\n }\n }<\/p>\n<p> updateTooltip(e) {\n const rect = Utils.$('mapZoomContainer').getBoundingClientRect();\n this.tooltip.style.left = (e.clientX - rect.left) + 'px';\n this.tooltip.style.top = (e.clientY - rect.top - 40) + 'px';\n }<\/p>\n<p> hideTooltip() {\n this.tooltip.classList.remove('show');\n }<\/p>\n<p> toggleCountry(e, countryCode) {\n e.target.classList.toggle('active-country');<\/p>\n<p> const tag = document.querySelector(`[data-country=\"${countryCode}\"]`);\n if (tag) {\n tag.classList.toggle('active');\n }\n }<\/p>\n<p> createConnectionLines() {\n if (this.state.isMobile) return;<\/p>\n<p> const connections = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'g');\n connections.setAttribute('class', 'connection-lines');<\/p>\n<p> const lines = [\n ['BR', 'ZA'], \n ['RU', 'CN'], \n ['CN', 'IN'], \n ['SA', 'AE'], \n ['EG', 'ET'], \n ['IN', 'ID']\n ];<\/p>\n<p> lines.forEach(([from, to]) => {\n const fromCenter = this.state.countryCenters[from];\n const toCenter = this.state.countryCenters[to];<\/p>\n<p> if (fromCenter && toCenter) {\n const line = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'path');\n const midX = (fromCenter.x + toCenter.x) \/ 2;\n const midY = (fromCenter.y + toCenter.y) \/ 2 - 50;<\/p>\n<p> line.setAttribute('d', \n `M ${fromCenter.x} ${fromCenter.y} Q ${midX} ${midY} ${toCenter.x} ${toCenter.y}`\n );\n line.setAttribute('class', 'connection-line');\n connections.appendChild(line);\n }\n });<\/p>\n<p> this.state.svg.insertBefore(connections, this.state.markersGroup);\n }\n}<\/p>\n<p>\/\/ ==================== CONTENT MANAGER ====================\nclass ContentManager {\n constructor(state, eventManager) {\n this.state = state;\n this.eventManager = eventManager;\n }<\/p>\n<p> async loadContent() {\n try {\n const response = await fetch(CONFIG.API_ENDPOINT);\n const posts = await response.json();<\/p>\n<p> this.state.content = posts.map(post => this.parsePost(post));<\/p>\n<p> Utils.$('loadingOverlay').style.display = 'none';\n return this.state.content;\n } catch (error) {\n console.error('Error loading content:', error);\n Utils.$('loadingOverlay').style.display = 'none';\n return [];\n }\n }<\/p>\n<p> getPostUrl(post) {\n if (post.link && post.link !== '' && !post.link.includes('?p=')) {\n return post.link;\n }<\/p>\n<p> if (post.slug) {\n return `https:\/\/bifa.ai\/news-events\/${post.slug}\/`;\n }<\/p>\n<p> if (post.guid && post.guid.rendered && !post.guid.rendered.includes('?p=')) {\n return post.guid.rendered;\n }<\/p>\n<p> if (post.id) {\n return `https:\/\/bifa.ai\/?p=${post.id}`;\n }<\/p>\n<p> console.error('Cannot determine URL for post:', post.id);\n return 'https:\/\/bifa.ai\/';\n }<\/p>\n<p> parsePost(post) {\n const types = post.bifa_item_type || [];\n const classes = post.class_list || [];<\/p>\n<p> const hasEvent = types.some(x => x == 3 || x == 'event') || \n classes.some(c => c.includes('bifa_item_type-event'));\n const hasNews = types.some(x => x == 2 || x == 'news') || \n classes.some(c => c.includes('bifa_item_type-news'));<\/p>\n<p> let image = '';\n if (post._embedded?.['wp:featuredmedia']?.[0]?.source_url) {\n image = Utils.createImageProxy(post._embedded['wp:featuredmedia'][0].source_url);\n }<\/p>\n<p> return {\n id: post.id,\n title: post.title.rendered,\n excerpt: Utils.stripHtml(post.excerpt.rendered),\n link: this.getPostUrl(post),\n type: hasEvent ? 'event' : hasNews ? 'news' : 'unknown',\n date: post._bifa_event_date || post.date,\n location: post._bifa_location,\n priority: post._bifa_priority,\n country: post._bifa_event_country,\n image: image\n };\n }<\/p>\n<p> filterContent(filter) {\n this.state.filter = filter;<\/p>\n<p> let filtered = this.state.content;\n if (filter === 'events') {\n filtered = this.state.content.filter(item => item.type === 'event');\n } else if (filter === 'news') {\n filtered = this.state.content.filter(item => item.type === 'news');\n }<\/p>\n<p> return filtered;\n }<\/p>\n<p> groupByCountry(content) {\n const grouped = {};<\/p>\n<p> content.forEach(item => {\n if (item.country && BRICS_COUNTRIES[item.country]) {\n if (!grouped[item.country]) {\n grouped[item.country] = [];\n }\n grouped[item.country].push(item);\n }\n });<\/p>\n<p> Object.keys(grouped).forEach(country => {\n const countrySize = BRICS_COUNTRIES[country].size;\n const maxMarkers = MAX_MARKERS_BY_SIZE[countrySize];<\/p>\n<p> grouped[country].sort((a, b) => new Date(b.date) - new Date(a.date));<\/p>\n<p> grouped[country] = grouped[country].slice(0, maxMarkers);\n });<\/p>\n<p> return grouped;\n }\n}<\/p>\n<p>\/\/ ==================== MARKER MANAGER ====================\nclass MarkerManager {\n constructor(state, eventManager, popupManager) {\n this.state = state;\n this.eventManager = eventManager;\n this.popupManager = popupManager;\n }<\/p>\n<p> renderMarkers(groupedContent) {\n if (!this.state.markersGroup) return;<\/p>\n<p> this.state.markersGroup.innerHTML = '';<\/p>\n<p> Object.entries(groupedContent).forEach(([country, items]) => {\n const center = this.state.countryCenters[country];\n if (!center) return;<\/p>\n<p> const markerCount = items.length;<\/p>\n<p> let radius;\n if (markerCount === 1) {\n radius = 0;\n } else if (markerCount === 2) {\n radius = this.state.isMobile ? 15 : 20;\n } else if (markerCount === 3) {\n radius = this.state.isMobile ? 20 : 25;\n } else {\n radius = this.state.isMobile ? 25 : 30;\n }<\/p>\n<p> \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043c\u0430\u0440\u043a\u0435\u0440\u044b \u0432 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435: \u0441\u0442\u0430\u0440\u044b\u0435 \u043f\u0435\u0440\u0432\u044b\u043c\u0438, \u043d\u043e\u0432\u044b\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u043c\u0438\n \/\/ \u0412 SVG \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0442\u0441\u044f \u043f\u043e\u0432\u0435\u0440\u0445 \u043f\u0435\u0440\u0432\u044b\u0445\n const reversedItems = [...items].reverse();<\/p>\n<p> reversedItems.forEach((item, reverseIndex) => {\n \/\/ \u0412\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u043d\u0434\u0435\u043a\u0441 \u0434\u043b\u044f \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f\n const index = markerCount - reverseIndex - 1;<\/p>\n<p> let markerX, markerY;<\/p>\n<p> if (markerCount === 1) {\n markerX = center.x;\n markerY = center.y;\n } else {\n const angle = (index * 360 \/ markerCount - 90) * Math.PI \/ 180;\n markerX = center.x + Math.cos(angle) * radius;\n markerY = center.y + Math.sin(angle) * radius;\n }<\/p>\n<p> const marker = this.createMarker(item, markerX, markerY, reverseIndex);\n this.setupMarkerEvents(marker, item);\n this.state.markersGroup.appendChild(marker);\n });\n });\n }<\/p>\n<p> createMarker(item, x, y, zIndex = 0) {\n const markerSize = this.state.isMobile ? \n CONFIG.MARKER_SIZE_MOBILE : \n CONFIG.MARKER_SIZE_DESKTOP;<\/p>\n<p> const g = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'g');\n g.setAttribute('class', `svg-event-marker ${item.type} ${item.priority === 'urgent' ? 'urgent' : ''}`);\n g.setAttribute('transform', `translate(${x},${y})`);\n g.setAttribute('data-item-id', item.id);\n g.setAttribute('data-z-index', zIndex);<\/p>\n<p> const hitArea = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'circle');\n hitArea.setAttribute('r', this.state.isMobile ? '35' : '30');\n hitArea.setAttribute('fill', 'transparent');\n hitArea.setAttribute('class', 'hit-area');<\/p>\n<p> const circle = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'circle');\n circle.setAttribute('r', markerSize);<\/p>\n<p> \/\/ \u0418\u0421\u041f\u0420\u0410\u0412\u041b\u0415\u041d\u0418\u0415 \u0414\u041b\u042f iPhone: \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u044d\u043c\u043e\u0434\u0437\u0438 \u0432\u043c\u0435\u0441\u0442\u043e \u0432\u043d\u0435\u0448\u043d\u0438\u0445 SVG \u0438\u043a\u043e\u043d\u043e\u043a\n const text = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'text');\n text.setAttribute('x', '0');\n text.setAttribute('y', this.state.isMobile ? '6' : '7');\n text.setAttribute('text-anchor', 'middle');\n text.setAttribute('dominant-baseline', 'middle');\n text.setAttribute('font-size', this.state.isMobile ? '16' : '18');\n text.setAttribute('pointer-events', 'none');\n text.setAttribute('user-select', 'none');<\/p>\n<p> \/\/ \u0412\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u044d\u043c\u043e\u0434\u0437\u0438 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u0438\u043f\u0430 \u0438 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u0430\n if (item.priority === 'urgent' && item.type === 'news') {\n text.textContent = '\ud83d\udea8';\n } else if (item.type === 'event') {\n text.textContent = '\ud83d\udcc5';\n } else {\n text.textContent = '\ud83d\udcf0';\n }<\/p>\n<p> g.appendChild(hitArea);\n g.appendChild(circle);\n g.appendChild(text);<\/p>\n<p> return g;\n }<\/p>\n<p> setupMarkerEvents(marker, item) {\n if (this.state.isTouchDevice || this.state.isMobile) {\n this.eventManager.add(marker, 'touchstart', (e) => {\n e.preventDefault();\n e.stopPropagation();\n this.handleMarkerTap(marker, item);\n }, { passive: false });<\/p>\n<p> this.eventManager.add(marker, 'click', (e) => {\n e.preventDefault();\n e.stopPropagation();\n const timeSinceTouch = Date.now() - this.state.touchStartTime;\n if (timeSinceTouch > CONFIG.TOUCH_TAP_THRESHOLD) {\n this.handleMarkerTap(marker, item);\n }\n });\n } else {\n this.eventManager.add(marker, 'mouseenter', (e) => {\n e.stopPropagation();\n this.state.activeMarker = marker;\n this.popupManager.show(item, e);\n });<\/p>\n<p> this.eventManager.add(marker, 'mouseleave', (e) => {\n e.stopPropagation();\n setTimeout(() => {\n if (!this.state.isPopupHovered && this.state.activeMarker === marker) {\n this.popupManager.hide();\n }\n }, CONFIG.POPUP_HOVER_DELAY);\n });<\/p>\n<p> this.eventManager.add(marker, 'click', (e) => {\n e.stopPropagation();\n window.location.href = item.link;\n });\n }\n }<\/p>\n<p> handleMarkerTap(marker, item) {\n if (this.state.activeMarker === marker && this.state.isPopupOpen) {\n this.popupManager.hide();\n return;\n }<\/p>\n<p> this.state.activeMarker = marker;\n this.state.touchStartTime = Date.now();<\/p>\n<p> setTimeout(() => {\n this.popupManager.show(item, { currentTarget: marker });\n }, 10);\n }\n}<\/p>\n<p>\/\/ ==================== POPUP MANAGER ====================\nclass PopupManager {\n constructor(state, eventManager) {\n this.state = state;\n this.eventManager = eventManager;\n this.popup = Utils.$('eventPopup');\n this.overlay = Utils.$('popupOverlay');\n this.setupOverlayEvents();\n }<\/p>\n<p> setupOverlayEvents() {\n if (this.state.isTouchDevice) {\n this.eventManager.add(this.overlay, 'touchstart', (e) => {\n e.preventDefault();\n this.hide();\n });\n }<\/p>\n<p> this.eventManager.add(this.overlay, 'click', () => this.hide());\n }<\/p>\n<p> show(item, event) {\n this.state.isPopupOpen = true;\n this.renderPopup(item);\n this.positionPopup(event);\n this.setupPopupEvents();\n }<\/p>\n<p> renderPopup(item) {\n const imageHtml = item.image ? `<\/p>\n<div class=\"popup-image-wrapper\">\n <img decoding=\"async\" class=\"popup-image\" \n src=\"\/$%7Bitem.image%7D\" \n alt=\"${item.title.replace(\/\"\/g, '"')}\" \n data-image-url=\"${item.image}\">\n <\/div>\n<p> ` : `<\/p>\n<div class=\"popup-image-wrapper no-image\">\n<div class=\"popup-image-placeholder\">${item.type === 'event' ? '\ud83d\udcc5' : '\ud83d\udcf0'}<\/div>\n<\/p><\/div>\n<p> `;<\/p>\n<p> const closeButton = (this.state.isMobile || this.state.isTouchDevice) ? \n '<button class=\"popup-close\" id=\"popupCloseBtn\">\u00d7<\/button>' : '';<\/p>\n<p> this.popup.innerHTML = `\n ${closeButton}<\/p>\n<div class=\"popup-header\">\n ${imageHtml}<\/p>\n<div class=\"popup-content\">\n<h4 class=\"popup-title\">${item.title}<\/h4>\n<div class=\"popup-meta\">\n ${item.date ? `<\/p>\n<div class=\"popup-meta-item\">\ud83d\udcc5 ${Utils.formatDate(item.date)}<\/div>\n<p>` : ''}\n ${item.location ? `<\/p>\n<div class=\"popup-meta-item\">\ud83d\udccd ${item.location}<\/div>\n<p>` : ''}\n ${item.type ? `<\/p>\n<div class=\"popup-meta-item\">${item.type === 'event' ? '\ud83c\udfaf Event' : '\ud83d\udcf0 News'}<\/div>\n<p>` : ''}\n <\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p class=\"popup-excerpt\">${item.excerpt}<\/p>\n<p> <a href=\"\/$%7Bitem.link%7D\" class=\"popup-link\" onclick=\"window.location.href='${item.link}'; return false;\">View Details \u2192<\/a>\n `;<\/p>\n<p> this.popup.classList.add('active');<\/p>\n<p> if (item.image) {\n this.setupImageErrorHandling(this.popup.querySelector('.popup-image'));\n }<\/p>\n<p> if (closeButton) {\n const closeBtn = Utils.$('popupCloseBtn');\n if (closeBtn) {\n this.eventManager.add(closeBtn, 'click', () => this.hide());\n }\n }\n }<\/p>\n<p> setupImageErrorHandling(img) {\n if (!img || this.state.imageLoadErrors.get(img)) return;<\/p>\n<p> const errorHandler = () => {\n if (!this.state.imageLoadErrors.get(img)) {\n this.state.imageLoadErrors.set(img, true);\n const originalUrl = img.dataset.imageUrl || img.src;\n img.src = Utils.createImageProxy(originalUrl);\n }\n };<\/p>\n<p> this.eventManager.add(img, 'error', errorHandler);\n }<\/p>\n<p> positionPopup(event) {\n if (this.state.isMobile || this.state.isTouchDevice) {\n this.overlay.classList.add('active');\n return;\n }<\/p>\n<p> const rect = event.currentTarget.getBoundingClientRect();\n const popupWidth = 380;\n const popupHeight = this.popup.offsetHeight || 300;<\/p>\n<p> let posX = rect.right + 15;\n let posY = rect.top + rect.height \/ 2 - popupHeight \/ 2;<\/p>\n<p> if (posX + popupWidth > window.innerWidth - 20) {\n posX = rect.left - popupWidth - 15;\n }<\/p>\n<p> posY = Utils.clamp(posY, 20, window.innerHeight - popupHeight - 20);<\/p>\n<p> this.popup.style.left = posX + 'px';\n this.popup.style.top = posY + 'px';\n }<\/p>\n<p> setupPopupEvents() {\n if (!this.state.isMobile && !this.state.isTouchDevice) {\n this.eventManager.add(this.popup, 'mouseenter', () => {\n this.state.isPopupHovered = true;\n });<\/p>\n<p> this.eventManager.add(this.popup, 'mouseleave', () => {\n this.state.isPopupHovered = false;\n setTimeout(() => {\n if (!this.state.isPopupHovered) {\n this.hide();\n }\n }, 100);\n });\n }\n }<\/p>\n<p> hide() {\n this.popup.classList.remove('active');\n this.overlay.classList.remove('active');\n this.state.isPopupOpen = false;\n this.state.isPopupHovered = false;\n this.state.activeMarker = null;\n }\n}<\/p>\n<p>\/\/ ==================== UI MANAGER ====================\nclass UIManager {\n constructor(state, eventManager) {\n this.state = state;\n this.eventManager = eventManager;\n }<\/p>\n<p> renderFilters() {\n const container = Utils.$('filterControls');\n const filters = [\n { value: 'all', label: 'All', classes: '' },\n { value: 'events', label: 'Events', classes: '' },\n { value: 'news', label: 'News', classes: 'news' }\n ];<\/p>\n<p> container.innerHTML = filters.map(filter => `\n <button class=\"filter-btn ${filter.classes} ${filter.value === 'all' ? 'active' : ''}\" \n data-filter=\"${filter.value}\">\n ${filter.label}\n <\/button>\n `).join('');<\/p>\n<p> Utils.$$('.filter-btn').forEach(btn => {\n this.eventManager.add(btn, 'click', (e) => {\n this.handleFilterClick(e.target);\n });\n });\n }<\/p>\n<p> handleFilterClick(button) {\n const filter = button.getAttribute('data-filter');<\/p>\n<p> Utils.$$('.filter-btn').forEach(btn => {\n btn.classList.remove('active');\n });\n button.classList.add('active');<\/p>\n<p> app.applyFilter(filter);\n }<\/p>\n<p> renderLegend() {\n const container = Utils.$('legend');<\/p>\n<p> container.innerHTML = Object.entries(BRICS_COUNTRIES).map(([code, data]) => `<\/p>\n<div class=\"brics-country-tag\" data-country=\"${code}\">\n <img decoding=\"async\" class=\"country-flag\" \n src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Flags\/${code.toLowerCase()}.svg\" \n alt=\"${data.name}\" \n loading=\"lazy\">\n <span class=\"country-name\">${data.name}<\/span>\n <span class=\"event-count\" style=\"display:none\">0<\/span>\n <\/div>\n<p> `).join('');<\/p>\n<p> Utils.$$('.brics-country-tag').forEach(tag => {\n this.setupTagEvents(tag);\n });\n }<\/p>\n<p> setupTagEvents(tag) {\n this.eventManager.add(tag, 'click', (e) => {\n const code = e.currentTarget.getAttribute('data-country');\n this.toggleCountryHighlight(code);\n });<\/p>\n<p> if (!this.state.isTouchDevice) {\n this.eventManager.add(tag, 'mouseenter', (e) => {\n const code = e.currentTarget.getAttribute('data-country');\n this.highlightCountryPaths(code, true);\n });<\/p>\n<p> this.eventManager.add(tag, 'mouseleave', (e) => {\n const code = e.currentTarget.getAttribute('data-country');\n this.highlightCountryPaths(code, false);\n });\n }\n }<\/p>\n<p> toggleCountryHighlight(code) {\n const paths = this.getCountryPaths(code);\n paths.forEach(path => path.classList.toggle('active-country'));<\/p>\n<p> const tag = document.querySelector(`[data-country=\"${code}\"]`);\n if (tag) {\n tag.classList.toggle('active');\n }\n }<\/p>\n<p> highlightCountryPaths(code, highlight) {\n const paths = this.getCountryPaths(code);\n paths.forEach(path => {\n path.style.filter = highlight ? 'brightness(1.3)' : '';\n });\n }<\/p>\n<p> getCountryPaths(code) {\n if (code === 'ID') {\n return this.state.svg.querySelectorAll(\n INDONESIA_ID_PATTERNS.map(p => `path[id=\"${p}\"], path[id^=\"${p}\"]`).join(',')\n );\n }\n return this.state.svg.querySelectorAll(`path[data-brics=\"${code}\"]`);\n }<\/p>\n<p> updateCounts(groupedContent) {\n Utils.$$('.brics-country-tag').forEach(tag => {\n const code = tag.getAttribute('data-country');\n const count = groupedContent[code]?.length || 0;\n const counter = tag.querySelector('.event-count');<\/p>\n<p> if (count > 0) {\n counter.textContent = count;\n counter.style.display = 'block';\n } else {\n counter.style.display = 'none';\n }\n });\n }\n}<\/p>\n<p>\/\/ ==================== MAIN APPLICATION ====================\nclass BIFAMapApp {\n constructor() {\n this.state = new AppState();\n this.eventManager = new EventManager();\n this.zoomController = new ZoomController(this.state, this.eventManager);\n this.mapManager = new MapManager(this.state, this.eventManager);\n this.contentManager = new ContentManager(this.state, this.eventManager);\n this.popupManager = new PopupManager(this.state, this.eventManager);\n this.markerManager = new MarkerManager(this.state, this.eventManager, this.popupManager);\n this.uiManager = new UIManager(this.state, this.eventManager);\n }<\/p>\n<p> async init() {\n this.uiManager.renderFilters();\n this.uiManager.renderLegend();<\/p>\n<p> await this.mapManager.loadSVG();<\/p>\n<p> this.zoomController.init(\n Utils.$('mapZoomContainer'),\n Utils.$('mapContainer')\n );<\/p>\n<p> await this.contentManager.loadContent();\n this.updateMap();<\/p>\n<p> this.setupGlobalEvents();\n }<\/p>\n<p> setupGlobalEvents() {\n this.eventManager.add(document, 'click', (e) => {\n if ((this.state.isMobile || this.state.isTouchDevice) && \n this.state.isPopupOpen && \n !e.target.closest('.event-popup') && \n !e.target.closest('.svg-event-marker')) {\n this.popupManager.hide();\n }\n });<\/p>\n<p> this.eventManager.add(document, 'keydown', (e) => {\n if (e.key === 'Escape' && this.state.isPopupOpen) {\n this.popupManager.hide();\n }\n });<\/p>\n<p> this.eventManager.add(window, 'scroll', Utils.debounce(() => {\n if (!this.state.isMobile && !this.state.isTouchDevice && this.state.isPopupOpen) {\n this.popupManager.hide();\n }\n }, 100));<\/p>\n<p> this.eventManager.add(window, 'resize', Utils.debounce(() => {\n this.state.updateMobileState();\n this.zoomController.updateBounds();<\/p>\n<p> if (this.state.isMobile) {\n this.zoomController.reset();\n }\n }, CONFIG.DEBOUNCE_DELAY));\n }<\/p>\n<p> applyFilter(filter) {\n const filtered = this.contentManager.filterContent(filter);\n const grouped = this.contentManager.groupByCountry(filtered);<\/p>\n<p> this.uiManager.updateCounts(grouped);\n this.markerManager.renderMarkers(grouped);\n }<\/p>\n<p> updateMap() {\n const filtered = this.contentManager.filterContent(this.state.filter);\n const grouped = this.contentManager.groupByCountry(filtered);<\/p>\n<p> this.uiManager.updateCounts(grouped);\n this.markerManager.renderMarkers(grouped);\n }<\/p>\n<p> cleanup() {\n this.eventManager.cleanup();\n if (this.state.resizeObserver) {\n this.state.resizeObserver.disconnect();\n }\n }\n}<\/p>\n<p>\/\/ ==================== INITIALIZATION ====================\nlet app;<\/p>\n<p>function initApp() {\n app = new BIFAMapApp();\n app.init();\n}<\/p>\n<p>if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', initApp);\n} else {\n initApp();\n}<\/p>\n<p>window.addEventListener('beforeunload', () => {\n if (app) {\n app.cleanup();\n }\n});<\/p>\n<p>})();\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 Quote Block – Official Branding<\/title><\/p>\n<p> \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@400;500;600;700;800&family=Poppins:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n<style>\n\/* Reset and Base *\/\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}<\/p>\n<p>html {\n overflow-x: hidden;\n overflow-y: auto;\n}<\/p>\n<p>body {\n font-family: 'Montserrat', sans-serif;\n background: #f5f5f5;\n overflow-x: hidden;\n position: relative;\n}<\/p>\n<p>\/* Modern Minimalism Quote Section *\/\n.quote-section-wrapper {\n width: 100vw;\n position: relative;\n left: 50%;\n right: 50%;\n margin-left: -50vw;\n margin-right: -50vw;\n background: #FFFFFF; \/* Official Bright White *\/\n overflow: hidden;\n max-width: 100vw;\n}<\/p>\n<p>.quote-section {\n padding: 100px 0;\n position: relative;\n}<\/p>\n<p>.quote-container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 40px;\n position: relative;\n}<\/p>\n<p>\/* Layout *\/\n.quote-layout {\n display: grid;\n grid-template-columns: 300px 1fr;\n gap: 80px;\n align-items: center;\n}<\/p>\n<p>\/* Left Panel with Bird *\/\n.bird-panel {\n position: relative;\n height: 400px;\n display: flex;\n align-items: center;\n justify-content: center;\n animation: fadeInLeft 1s ease-out;\n}<\/p>\n<p>.bird-circle {\n width: 250px;\n height: 250px;\n border-radius: 50%;\n background: linear-gradient(135deg, rgba(212, 175, 55, 0.05) 0%, rgba(212, 175, 55, 0.08) 100%); \/* Heritage Gold gradient *\/\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n}<\/p>\n<p>.bird-icon {\n width: 150px;\n height: 150px;\n background-image: url('\/wp-content\/themes\/yootheme-child\/assets\/images\/Logo\/bird.svg');\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center;\n opacity: 0.2;\n animation: hover-bird 4s ease-in-out infinite;\n}<\/p>\n<p>@keyframes hover-bird {\n 0%, 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(-10px);\n }\n}<\/p>\n<p>\/* Right Panel with Quote *\/\n.quote-content {\n animation: fadeInRight 1s ease-out;\n}<\/p>\n<p>.quote-text {\n font-family: 'Poppins', sans-serif !important; \/* Poppins \u0434\u043b\u044f \u0446\u0438\u0442\u0430\u0442\u044b *\/\n font-size: 2.5rem;\n font-weight: 300;\n line-height: 1.5;\n color: #0A1F44; \/* Official Deep Navy *\/\n margin-bottom: 40px;\n position: relative;\n}<\/p>\n<p>.quote-text::before {\n content: '\"';\n position: absolute;\n top: -30px;\n left: -50px;\n font-size: 100px;\n color: #D4AF37; \/* Official Heritage Gold *\/\n opacity: 0.3;\n font-family: 'Poppins', sans-serif;\n}<\/p>\n<p>\/* Author Block *\/\n.author-block {\n display: flex;\n align-items: center;\n gap: 20px;\n}<\/p>\n<p>.author-logo {\n width: 60px;\n height: 60px;\n background-image: url('\/wp-content\/themes\/yootheme-child\/assets\/images\/LogoF.svg');\n background-size: contain;\n background-repeat: no-repeat;\n opacity: 0.8;\n}<\/p>\n<p>.author-details {\n border-left: 3px solid #D4AF37; \/* Official Heritage Gold *\/\n padding-left: 20px;\n}<\/p>\n<p>.author-name {\n font-size: 1.3rem;\n font-weight: 700;\n color: #0A1F44; \/* Official Deep Navy *\/\n margin-bottom: 5px;\n font-family: 'Montserrat', sans-serif;\n}<\/p>\n<p>.author-title {\n font-size: 1rem;\n color: #1D6143; \/* Official Civic Green *\/\n font-weight: 500;\n font-family: 'Montserrat', sans-serif;\n}<\/p>\n<p>\/* Animations *\/\n@keyframes fadeInLeft {\n from {\n opacity: 0;\n transform: translateX(-50px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}<\/p>\n<p>@keyframes fadeInRight {\n from {\n opacity: 0;\n transform: translateX(50px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}<\/p>\n<p>\/* Responsive Design *\/\n@media (max-width: 968px) {\n .quote-layout {\n grid-template-columns: 1fr;\n gap: 40px;\n }<\/p>\n<p> .bird-panel {\n height: 200px;\n }<\/p>\n<p> .bird-circle {\n width: 150px;\n height: 150px;\n }<\/p>\n<p> .bird-icon {\n width: 100px;\n height: 100px;\n }<\/p>\n<p> .quote-text {\n font-size: 1.8rem;\n }\n}<\/p>\n<p>@media (max-width: 640px) {\n .quote-section {\n padding: 80px 0;\n }<\/p>\n<p> .quote-text {\n font-size: 1.5rem;\n }<\/p>\n<p> .quote-text::before {\n font-size: 60px;\n left: -30px;\n top: -20px;\n }\n}\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"quote-section-wrapper\">\n<section class=\"quote-section\">\n<div class=\"quote-container\">\n<div class=\"quote-layout\">\n <\/p>\n<div class=\"bird-panel\">\n<div class=\"bird-circle\">\n<div class=\"bird-icon\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"quote-content\">\n<blockquote class=\"quote-text\"><p>\n We’re not just playing a game. We’re building the future.\n <\/p><\/blockquote>\n<div class=\"author-block\">\n<div class=\"author-logo\"><\/div>\n<div class=\"author-details\">\n<div class=\"author-name\"> Dr. Salim Almazaini<\/div>\n<div class=\"author-title\">Founder & President, BIFA & BIFA+<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<\/div>\n<p><script>\n\/\/ Animation on scroll\ndocument.addEventListener('DOMContentLoaded', function() {\n const observerOptions = {\n threshold: 0.3,\n rootMargin: '0px 0px -100px 0px'\n };<\/p>\n<p> const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.style.animationPlayState = 'running';\n observer.unobserve(entry.target);\n }\n });\n }, observerOptions);<\/p>\n<p> \/\/ Observe animated elements\n document.querySelectorAll('.bird-panel, .quote-content').forEach(el => {\n if (el) {\n if (el.style.animation || window.getComputedStyle(el).animation !== 'none') {\n el.style.animationPlayState = 'paused';\n observer.observe(el);\n }\n }\n });<\/p>\n<p> \/\/ Preload images\n function preloadImages() {\n const imageUrls = [\n '\/wp-content\/themes\/yootheme-child\/assets\/images\/Logo\/bird.svg',\n '\/wp-content\/themes\/yootheme-child\/assets\/images\/flag-logo1.svg'\n ];<\/p>\n<p> imageUrls.forEach(url => {\n const img = new Image();\n img.src = url;\n });\n }<\/p>\n<p> preloadImages();\n});\n<\/script><\/p>\n<p><\/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+ BRICS Alliance<\/title><\/p>\n<p> \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&display=swap\" rel=\"stylesheet\">\n<style>\n\/* ========= OFFICIAL BIFA+ BRAND VARIABLES - HIGH PRIORITY ========= *\/\n:root {\n \/* Official BIFA+ Colors from Brand Guide *\/\n --bifa-deep-navy: #0A1F44 !important;\n --bifa-heritage-gold: #D4AF37 !important;\n --bifa-civic-green: #1D6143 !important;\n --bifa-bright-white: #FFFFFF !important;\n --bifa-soft-black: #1A1A1A !important;\n --bifa-gray-light: #F8F9FA !important;\n --bifa-gray: #6C757D !important;<\/p>\n<p> \/* Official BIFA+ Typography from Brand Guide *\/\n --bifa-font-heading: 'Montserrat', sans-serif !important;\n --bifa-font-body: 'Poppins', sans-serif !important;<\/p>\n<p> \/* Premium Effects *\/\n --bifa-shadow-premium: 0 25px 80px rgba(10, 31, 68, 0.15) !important;\n --bifa-shadow-hover: 0 35px 100px rgba(10, 31, 68, 0.2) !important;\n --bifa-shadow-gold: 0 15px 40px rgba(212, 175, 55, 0.3) !important;\n --bifa-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;\n}<\/p>\n<p>\/* ========= YOOTHEME OVERRIDE - CRITICAL STYLES ========= *\/\n.brics-section-wrapper,\n.brics-section-wrapper *,\n.brics-section,\n.brics-section * {\n margin: 0 !important;\n padding: 0 !important;\n box-sizing: border-box !important;\n}<\/p>\n<p>\/* Force official BIFA+ fonts on all elements - OVERRIDE YOOTHEME *\/\n.brics-section-wrapper,\n.brics-section-wrapper *:not(.flag-image):not(.flag-image *) {\n font-family: var(--bifa-font-body) !important;\n}<\/p>\n<p>.brics-section-wrapper h1,\n.brics-section-wrapper h2,\n.brics-section-wrapper h3,\n.brics-section-wrapper h4,\n.brics-section-wrapper h5,\n.brics-section-wrapper h6,\n.brics-section-wrapper .section-title,\n.brics-section-wrapper .flags-title,\n.brics-section-wrapper .content-intro,\n.brics-section-wrapper .stat-number,\n.brics-section-wrapper .stat-label,\n.brics-section-wrapper .flag-name,\n.brics-section-wrapper .cta-text,\n.brics-section-wrapper .btn-text {\n font-family: var(--bifa-font-heading) !important;\n}<\/p>\n<p>\/* ========= SECTION WRAPPER - FULL WIDTH ========= *\/\n.brics-section-wrapper {\n width: 100vw !important;\n position: relative !important;\n left: 50% !important;\n margin-left: -50vw !important;\n background: transparent !important;\n overflow: hidden !important;\n z-index: 1 !important;\n}<\/p>\n<p>\/* ========= BRICS SECTION ========= *\/\n.brics-section {\n padding: 80px 0 !important;\n background: transparent !important;\n position: relative !important;\n overflow: hidden !important;\n width: 100% !important;\n margin: 0 !important;\n}<\/p>\n<p>\/* ========= CONTAINER ========= *\/\n.brics-container {\n max-width: 1400px !important;\n margin: 0 auto !important;\n padding: 0 20px !important;\n position: relative !important;\n z-index: 10 !important;\n width: 100% !important;\n}<\/p>\n<p>\/* ========= SECTION TITLE - OFFICIAL BIFA+ STYLE ========= *\/\n.brics-section .section-title {\n font-family: var(--bifa-font-heading) !important;\n font-size: clamp(2.5rem, 5vw, 4rem) !important;\n font-weight: 900 !important;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700) !important;\n -webkit-background-clip: text !important;\n background-clip: text !important;\n color: transparent !important;\n text-align: center !important;\n margin: 0 0 60px 0 !important;\n position: relative !important;\n animation: fadeInDown 1s ease-out !important;\n text-transform: uppercase !important;\n letter-spacing: 2px !important;\n cursor: pointer !important;\n transition: var(--bifa-transition) !important;\n line-height: 1.2 !important;\n padding: 0 !important;\n}<\/p>\n<p>.brics-section .section-title::after {\n content: '' !important;\n position: absolute !important;\n bottom: -15px !important;\n left: 50% !important;\n transform: translateX(-50%) !important;\n width: 0 !important;\n height: 5px !important;\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700) !important;\n border-radius: 3px !important;\n transition: width 0.4s ease !important;\n}<\/p>\n<p>.brics-section .section-title:hover {\n transform: translateY(-3px) !important;\n filter: drop-shadow(0 10px 20px rgba(212, 175, 55, 0.3)) !important;\n}<\/p>\n<p>.brics-section .section-title:hover::after {\n width: 100px !important;\n}<\/p>\n<p>\/* ========= MAIN IMAGE - OFFICIAL BIFA+ STYLE ========= *\/\n.brics-section .brics-image {\n width: 100% !important;\n max-width: 1200px !important;\n margin: 0 auto 60px auto !important;\n border-radius: 25px !important;\n overflow: hidden !important;\n box-shadow: var(--bifa-shadow-premium) !important;\n animation: fadeInUp 1s ease-out !important;\n position: relative !important;\n transition: var(--bifa-transition) !important;\n padding: 0 !important;\n}<\/p>\n<p>.brics-section .brics-image::before {\n content: '' !important;\n position: absolute !important;\n inset: 0 !important;\n background: linear-gradient(135deg, \n rgba(10, 31, 68, 0.1) 0%, \n transparent 50%, \n rgba(212, 175, 55, 0.1) 100%) !important;\n opacity: 0 !important;\n transition: opacity 0.3s ease !important;\n z-index: 1 !important;\n}<\/p>\n<p>.brics-section .brics-image:hover::before {\n opacity: 1 !important;\n}<\/p>\n<p>.brics-section .brics-image:hover {\n transform: translateY(-5px) !important;\n box-shadow: var(--bifa-shadow-hover) !important;\n}<\/p>\n<p>.brics-section .brics-image img {\n width: 100% !important;\n height: auto !important;\n display: block !important;\n transition: transform 0.3s ease !important;\n margin: 0 !important;\n padding: 0 !important;\n}<\/p>\n<p>.brics-section .brics-image:hover img {\n transform: scale(1.02) !important;\n}<\/p>\n<p>\/* ========= CONTENT SECTION - OFFICIAL BIFA+ STYLE ========= *\/\n.brics-section .brics-content {\n background: rgba(255, 255, 255, 0.95) !important;\n backdrop-filter: blur(20px) !important;\n border-radius: 30px !important;\n padding: 60px !important;\n margin: 0 auto 60px auto !important;\n max-width: 1200px !important;\n animation: fadeInUp 1s ease-out 0.2s both !important;\n box-shadow: var(--bifa-shadow-premium) !important;\n border: 2px solid rgba(212, 175, 55, 0.1) !important;\n position: relative !important;\n overflow: hidden !important;\n width: 100% !important;\n}<\/p>\n<p>.brics-section .brics-content::before {\n content: '' !important;\n position: absolute !important;\n top: 0 !important;\n left: 0 !important;\n right: 0 !important;\n height: 3px !important;\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent) !important;\n animation: contentGlow 4s ease-in-out infinite !important;\n}<\/p>\n<p>@keyframes contentGlow {\n 0%, 100% { opacity: 0.5 !important; }\n 50% { opacity: 1 !important; }\n}<\/p>\n<p>.brics-section .content-intro {\n font-family: var(--bifa-font-heading) !important;\n font-size: clamp(1.3rem, 2.5vw, 1.8rem) !important;\n line-height: 1.7 !important;\n background: linear-gradient(135deg, var(--bifa-deep-navy), #162e5a) !important;\n -webkit-background-clip: text !important;\n background-clip: text !important;\n color: transparent !important;\n font-weight: 700 !important;\n text-align: center !important;\n margin: 0 0 40px 0 !important;\n position: relative !important;\n padding: 0 !important;\n}<\/p>\n<p>.brics-section .content-intro::after {\n content: '' !important;\n position: absolute !important;\n bottom: -10px !important;\n left: 50% !important;\n transform: translateX(-50%) !important;\n width: 60px !important;\n height: 2px !important;\n background: var(--bifa-heritage-gold) !important;\n border-radius: 2px !important;\n}<\/p>\n<p>.brics-section .content-text {\n font-family: var(--bifa-font-body) !important;\n font-size: clamp(1.05rem, 1.5vw, 1.2rem) !important;\n line-height: 1.8 !important;\n color: var(--bifa-gray) !important;\n margin: 0 0 30px 0 !important;\n text-align: justify !important;\n position: relative !important;\n padding: 0 0 0 20px !important;\n}<\/p>\n<p>.brics-section .content-text::before {\n content: '' !important;\n position: absolute !important;\n left: 0 !important;\n top: 0 !important;\n width: 4px !important;\n height: 100% !important;\n background: linear-gradient(180deg, var(--bifa-heritage-gold), transparent) !important;\n border-radius: 2px !important;\n}<\/p>\n<p>\/* ========= STATS CAROUSEL - OFFICIAL BIFA+ STYLE ========= *\/\n.brics-section .stats-carousel-section {\n margin: 50px 0 !important;\n padding: 0 !important;\n width: 100% !important;\n}<\/p>\n<p>.brics-section .stats-carousel-title {\n font-family: var(--bifa-font-heading) !important;\n font-size: clamp(1.5rem, 2.5vw, 2rem) !important;\n font-weight: 800 !important;\n color: var(--bifa-deep-navy) !important;\n text-align: center !important;\n margin: 0 0 40px 0 !important;\n position: relative !important;\n text-transform: uppercase !important;\n letter-spacing: 1px !important;\n padding: 0 !important;\n}<\/p>\n<p>.brics-section .stats-carousel-title::after {\n content: '' !important;\n position: absolute !important;\n bottom: -8px !important;\n left: 50% !important;\n transform: translateX(-50%) !important;\n width: 60px !important;\n height: 2px !important;\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700) !important;\n border-radius: 2px !important;\n}<\/p>\n<p>.brics-section .stats-carousel-container {\n position: relative !important;\n max-width: 1200px !important;\n margin: 0 auto !important;\n overflow: hidden !important;\n padding: 0 !important;\n}<\/p>\n<p>.brics-section .stats-carousel-wrapper {\n position: relative !important;\n padding: 0 70px !important;\n overflow: hidden !important;\n margin: 0 !important;\n}<\/p>\n<p>.brics-section .stats-carousel {\n display: flex !important;\n transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;\n gap: 25px !important;\n will-change: transform !important;\n margin: 0 !important;\n padding: 0 !important;\n}<\/p>\n<p>.brics-section .stats-item {\n flex: 0 0 auto !important;\n text-align: center !important;\n padding: 30px 20px !important;\n background: linear-gradient(135deg, \n rgba(255, 255, 255, 0.95) 0%, \n rgba(248, 249, 250, 0.95) 100%) !important;\n backdrop-filter: blur(10px) !important;\n border-radius: 25px !important;\n transition: var(--bifa-transition) !important;\n cursor: pointer !important;\n box-shadow: var(--bifa-shadow-premium) !important;\n min-width: 200px !important;\n max-width: 220px !important;\n transform: translateY(0) scale(1) !important;\n opacity: 1 !important;\n border: 2px solid rgba(212, 175, 55, 0.1) !important;\n position: relative !important;\n overflow: hidden !important;\n margin: 0 !important;\n}<\/p>\n<p>.brics-section .stats-item::before {\n content: '' !important;\n position: absolute !important;\n top: 0 !important;\n left: 0 !important;\n right: 0 !important;\n height: 3px !important;\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent) !important;\n transform: scaleX(0) !important;\n transition: transform 0.3s ease !important;\n}<\/p>\n<p>.brics-section .stats-item:hover::before {\n transform: scaleX(1) !important;\n}<\/p>\n<p>.brics-section .stats-item:hover {\n transform: translateY(-10px) scale(1.05) !important;\n box-shadow: var(--bifa-shadow-gold) !important;\n border-color: var(--bifa-heritage-gold) !important;\n z-index: 10 !important;\n}<\/p>\n<p>.brics-section .stats-item-clone {\n opacity: 0.7 !important;\n}<\/p>\n<p>.brics-section .stats-icon {\n font-size: 2.5rem !important;\n margin: 0 0 15px 0 !important;\n line-height: 1 !important;\n filter: grayscale(0.3) !important;\n transition: all 0.3s ease !important;\n padding: 0 !important;\n}<\/p>\n<p>.brics-section .stats-item:hover .stats-icon {\n filter: grayscale(0) !important;\n transform: scale(1.1) !important;\n}<\/p>\n<p>.brics-section .stats-number {\n font-family: var(--bifa-font-heading) !important;\n font-size: clamp(2rem, 3vw, 2.8rem) !important;\n font-weight: 900 !important;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700) !important;\n -webkit-background-clip: text !important;\n background-clip: text !important;\n color: transparent !important;\n margin: 0 0 10px 0 !important;\n line-height: 1 !important;\n padding: 0 !important;\n}<\/p>\n<p>.brics-section .stats-label {\n font-family: var(--bifa-font-heading) !important;\n font-size: 0.95rem !important;\n color: var(--bifa-deep-navy) !important;\n font-weight: 700 !important;\n text-transform: uppercase !important;\n letter-spacing: 1px !important;\n margin: 0 0 8px 0 !important;\n padding: 0 !important;\n line-height: 1.3 !important;\n}<\/p>\n<p>.brics-section .stats-description {\n font-family: var(--bifa-font-body) !important;\n font-size: 0.85rem !important;\n color: var(--bifa-gray) !important;\n font-weight: 500 !important;\n margin: 0 !important;\n padding: 0 !important;\n line-height: 1.4 !important;\n font-style: italic !important;\n}<\/p>\n<p>\/* ========= STATS CAROUSEL NAVIGATION - OFFICIAL BIFA+ STYLE ========= *\/\n.brics-section .stats-carousel-button {\n position: absolute !important;\n top: 50% !important;\n transform: translateY(-50%) !important;\n background: rgba(255, 255, 255, 0.95) !important;\n backdrop-filter: blur(10px) !important;\n border: 2px solid rgba(212, 175, 55, 0.2) !important;\n width: 50px !important;\n height: 50px !important;\n border-radius: 50% !important;\n box-shadow: var(--bifa-shadow-premium) !important;\n cursor: pointer !important;\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n transition: var(--bifa-transition) !important;\n z-index: 10 !important;\n opacity: 0.9 !important;\n margin: 0 !important;\n padding: 0 !important;\n}<\/p>\n<p>.brics-section .stats-carousel-button::before {\n content: '' !important;\n position: absolute !important;\n inset: -2px !important;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700) !important;\n border-radius: 50% !important;\n opacity: 0 !important;\n transition: opacity 0.3s ease !important;\n z-index: -1 !important;\n}<\/p>\n<p>.brics-section .stats-carousel-button:hover::before {\n opacity: 1 !important;\n}<\/p>\n<p>.brics-section .stats-carousel-button:hover {\n color: var(--bifa-deep-navy) !important;\n box-shadow: var(--bifa-shadow-gold) !important;\n transform: translateY(-50%) scale(1.1) !important;\n opacity: 1 !important;\n border-color: transparent !important;\n}<\/p>\n<p>.brics-section .stats-carousel-button-prev {\n left: 0 !important;\n}<\/p>\n<p>.brics-section .stats-carousel-button-next {\n right: 0 !important;\n}<\/p>\n<p>.brics-section .stats-carousel-button svg {\n width: 20px !important;\n height: 20px !important;\n fill: var(--bifa-deep-navy) !important;\n transition: transform 0.3s ease !important;\n stroke-width: 3 !important;\n}<\/p>\n<p>.brics-section .stats-carousel-button:hover svg {\n transform: scale(1.2) !important;\n}<\/p>\n<p>.brics-section .stats-carousel-button-prev:hover svg {\n transform: translateX(-2px) scale(1.2) !important;\n}<\/p>\n<p>.brics-section .stats-carousel-button-next:hover svg {\n transform: translateX(2px) scale(1.2) !important;\n}<\/p>\n<p>\/* ========= STATS CAROUSEL INDICATORS - OFFICIAL BIFA+ STYLE ========= *\/\n.brics-section .stats-carousel-indicators {\n display: flex !important;\n justify-content: center !important;\n gap: 10px !important;\n margin: 35px 0 0 0 !important;\n padding: 0 !important;\n}<\/p>\n<p>.brics-section .stats-carousel-indicators .indicator {\n width: 10px !important;\n height: 10px !important;\n border-radius: 50% !important;\n background: rgba(212, 175, 55, 0.3) !important;\n cursor: pointer !important;\n transition: var(--bifa-transition) !important;\n opacity: 0.6 !important;\n border: 2px solid transparent !important;\n margin: 0 !important;\n padding: 0 !important;\n}<\/p>\n<p>.brics-section .stats-carousel-indicators .indicator:hover {\n opacity: 1 !important;\n transform: scale(1.2) !important;\n background: rgba(212, 175, 55, 0.6) !important;\n}<\/p>\n<p>.brics-section .stats-carousel-indicators .indicator.active {\n background: var(--bifa-heritage-gold) !important;\n width: 35px !important;\n border-radius: 5px !important;\n opacity: 1 !important;\n box-shadow: 0 3px 12px rgba(212, 175, 55, 0.4) !important;\n}<\/p>\n<p>\/* ========= FLAGS SECTION - OFFICIAL BIFA+ STYLE ========= *\/\n.brics-section .flags-section {\n margin: 80px 0 0 0 !important;\n position: relative !important;\n padding: 0 0 40px 0 !important;\n width: 100% !important;\n}<\/p>\n<p>.brics-section .flags-title {\n font-family: var(--bifa-font-heading) !important;\n font-size: clamp(1.8rem, 3vw, 2.5rem) !important;\n font-weight: 800 !important;\n color: var(--bifa-deep-navy) !important;\n text-align: center !important;\n margin: 0 0 60px 0 !important;\n animation: fadeInDown 1s ease-out !important;\n position: relative !important;\n text-transform: uppercase !important;\n letter-spacing: 1px !important;\n padding: 0 !important;\n}<\/p>\n<p>.brics-section .flags-title::after {\n content: '' !important;\n position: absolute !important;\n bottom: -10px !important;\n left: 50% !important;\n transform: translateX(-50%) !important;\n width: 80px !important;\n height: 3px !important;\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700) !important;\n border-radius: 2px !important;\n}<\/p>\n<p>\/* ========= FLAGS CAROUSEL - OFFICIAL BIFA+ STYLE ========= *\/\n.brics-section .flags-carousel-container {\n animation: carouselFadeIn 1s ease-out 0.3s both !important;\n position: relative !important;\n max-width: 1200px !important;\n margin: 0 auto !important;\n overflow: hidden !important;\n padding: 0 !important;\n}<\/p>\n<p>@keyframes carouselFadeIn {\n from {\n opacity: 0 !important;\n transform: translateY(30px) !important;\n }\n to {\n opacity: 1 !important;\n transform: translateY(0) !important;\n }\n}<\/p>\n<p>.brics-section .flags-carousel-wrapper {\n position: relative !important;\n padding: 0 70px !important;\n overflow: hidden !important;\n margin: 0 !important;\n}<\/p>\n<p>.brics-section .flags-carousel {\n display: flex !important;\n transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;\n gap: 30px !important;\n will-change: transform !important;\n margin: 0 !important;\n padding: 0 !important;\n}<\/p>\n<p>.brics-section .flag-item {\n flex: 0 0 auto !important;\n text-align: center !important;\n padding: 30px !important;\n background: rgba(255, 255, 255, 0.95) !important;\n backdrop-filter: blur(10px) !important;\n border-radius: 25px !important;\n transition: var(--bifa-transition) !important;\n cursor: pointer !important;\n box-shadow: var(--bifa-shadow-premium) !important;\n min-width: 180px !important;\n transform: translateY(0) scale(1) !important;\n opacity: 1 !important;\n border: 2px solid rgba(212, 175, 55, 0.1) !important;\n position: relative !important;\n overflow: hidden !important;\n margin: 0 !important;\n}<\/p>\n<p>.brics-section .flag-item::before {\n content: '' !important;\n position: absolute !important;\n top: 0 !important;\n left: 0 !important;\n right: 0 !important;\n height: 2px !important;\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent) !important;\n transform: scaleX(0) !important;\n transition: transform 0.3s ease !important;\n}<\/p>\n<p>.brics-section .flag-item:hover::before {\n transform: scaleX(1) !important;\n}<\/p>\n<p>.brics-section .flag-item:hover {\n transform: translateY(-15px) scale(1.05) !important;\n box-shadow: var(--bifa-shadow-gold) !important;\n border-color: var(--bifa-heritage-gold) !important;\n z-index: 10 !important;\n}<\/p>\n<p>.brics-section .flag-item-clone {\n opacity: 0.7 !important;\n}<\/p>\n<p>.brics-section .flag-image {\n width: 100px !important;\n height: 75px !important;\n margin: 0 auto 20px auto !important;\n border-radius: 15px !important;\n overflow: hidden !important;\n box-shadow: 0 8px 20px rgba(10, 31, 68, 0.15) !important;\n transition: var(--bifa-transition) !important;\n position: relative !important;\n padding: 0 !important;\n}<\/p>\n<p>.brics-section .flag-item:hover .flag-image {\n box-shadow: var(--bifa-shadow-gold) !important;\n transform: scale(1.05) translateY(-2px) !important;\n}<\/p>\n<p>.brics-section .flag-image::after {\n content: '' !important;\n position: absolute !important;\n inset: 0 !important;\n background: linear-gradient(135deg, \n rgba(212, 175, 55, 0.1) 0%, \n transparent 50%, \n rgba(10, 31, 68, 0.1) 100%) !important;\n opacity: 0 !important;\n transition: opacity 0.3s ease !important;\n}<\/p>\n<p>.brics-section .flag-item:hover .flag-image::after {\n opacity: 1 !important;\n}<\/p>\n<p>.brics-section .flag-image img {\n width: 100% !important;\n height: 100% !important;\n object-fit: cover !important;\n transition: transform 0.3s ease !important;\n margin: 0 !important;\n padding: 0 !important;\n}<\/p>\n<p>.brics-section .flag-item:hover .flag-image img {\n transform: scale(1.1) !important;\n}<\/p>\n<p>.brics-section .flag-name {\n font-family: var(--bifa-font-heading) !important;\n font-size: 1.1rem !important;\n font-weight: 700 !important;\n color: var(--bifa-deep-navy) !important;\n text-transform: uppercase !important;\n letter-spacing: 1px !important;\n margin: 10px 0 0 0 !important;\n transition: color 0.3s ease !important;\n padding: 0 !important;\n}<\/p>\n<p>.brics-section .flag-item:hover .flag-name {\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700) !important;\n -webkit-background-clip: text !important;\n background-clip: text !important;\n color: transparent !important;\n}<\/p>\n<p>\/* ========= CAROUSEL NAVIGATION - OFFICIAL BIFA+ STYLE ========= *\/\n.brics-section .carousel-button {\n position: absolute !important;\n top: 50% !important;\n transform: translateY(-50%) !important;\n background: rgba(255, 255, 255, 0.95) !important;\n backdrop-filter: blur(10px) !important;\n border: 2px solid rgba(212, 175, 55, 0.2) !important;\n width: 55px !important;\n height: 55px !important;\n border-radius: 50% !important;\n box-shadow: var(--bifa-shadow-premium) !important;\n cursor: pointer !important;\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n transition: var(--bifa-transition) !important;\n z-index: 10 !important;\n opacity: 0.9 !important;\n margin: 0 !important;\n padding: 0 !important;\n}<\/p>\n<p>.brics-section .carousel-button::before {\n content: '' !important;\n position: absolute !important;\n inset: -2px !important;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700) !important;\n border-radius: 50% !important;\n opacity: 0 !important;\n transition: opacity 0.3s ease !important;\n z-index: -1 !important;\n}<\/p>\n<p>.brics-section .carousel-button:hover::before {\n opacity: 1 !important;\n}<\/p>\n<p>.brics-section .carousel-button:hover {\n color: var(--bifa-deep-navy) !important;\n box-shadow: var(--bifa-shadow-gold) !important;\n transform: translateY(-50%) scale(1.1) !important;\n opacity: 1 !important;\n border-color: transparent !important;\n}<\/p>\n<p>.brics-section .carousel-button-prev {\n left: 0 !important;\n}<\/p>\n<p>.brics-section .carousel-button-next {\n right: 0 !important;\n}<\/p>\n<p>.brics-section .carousel-button svg {\n width: 24px !important;\n height: 24px !important;\n fill: var(--bifa-deep-navy) !important;\n transition: transform 0.3s ease !important;\n stroke-width: 3 !important;\n}<\/p>\n<p>.brics-section .carousel-button:hover svg {\n transform: scale(1.2) !important;\n}<\/p>\n<p>.brics-section .carousel-button-prev:hover svg {\n transform: translateX(-2px) scale(1.2) !important;\n}<\/p>\n<p>.brics-section .carousel-button-next:hover svg {\n transform: translateX(2px) scale(1.2) !important;\n}<\/p>\n<p>\/* ========= CAROUSEL INDICATORS - OFFICIAL BIFA+ STYLE ========= *\/\n.brics-section .carousel-indicators {\n display: flex !important;\n justify-content: center !important;\n gap: 12px !important;\n margin: 40px 0 0 0 !important;\n padding: 0 !important;\n}<\/p>\n<p>.brics-section .indicator {\n width: 12px !important;\n height: 12px !important;\n border-radius: 50% !important;\n background: rgba(212, 175, 55, 0.3) !important;\n cursor: pointer !important;\n transition: var(--bifa-transition) !important;\n opacity: 0.6 !important;\n border: 2px solid transparent !important;\n margin: 0 !important;\n padding: 0 !important;\n}<\/p>\n<p>.brics-section .indicator:hover {\n opacity: 1 !important;\n transform: scale(1.2) !important;\n background: rgba(212, 175, 55, 0.6) !important;\n}<\/p>\n<p>.brics-section .indicator.active {\n background: var(--bifa-heritage-gold) !important;\n width: 40px !important;\n border-radius: 6px !important;\n opacity: 1 !important;\n box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4) !important;\n}<\/p>\n<p>\/* ========= CALL TO ACTION - OFFICIAL BIFA+ STYLE ========= *\/\n.brics-section .brics-cta {\n background: linear-gradient(135deg, var(--bifa-deep-navy) 0%, #162e5a 100%) !important;\n color: var(--bifa-bright-white) !important;\n padding: 50px !important;\n border-radius: 30px !important;\n text-align: center !important;\n margin: 60px auto 0 auto !important;\n max-width: 1200px !important;\n box-shadow: var(--bifa-shadow-premium) !important;\n animation: fadeInUp 1s ease-out 0.4s both !important;\n position: relative !important;\n overflow: hidden !important;\n border: 2px solid rgba(212, 175, 55, 0.2) !important;\n width: 100% !important;\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n}<\/p>\n<p>.brics-section .brics-cta::before {\n content: '' !important;\n position: absolute !important;\n top: -50% !important;\n left: -50% !important;\n width: 200% !important;\n height: 200% !important;\n background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%) !important;\n animation: ctaPulse 4s ease-in-out infinite !important;\n}<\/p>\n<p>@keyframes ctaPulse {\n 0%, 100% { \n transform: scale(1) rotate(0deg) !important; \n opacity: 0.5 !important;\n }\n 50% { \n transform: scale(1.1) rotate(180deg) !important; \n opacity: 0.8 !important;\n }\n}<\/p>\n<p>.brics-section .cta-text {\n font-family: var(--bifa-font-heading) !important;\n font-size: clamp(1.3rem, 2.5vw, 1.8rem) !important;\n line-height: 1.7 !important;\n font-weight: 700 !important;\n position: relative !important;\n z-index: 1 !important;\n text-shadow: 2px 2px 4px rgba(0,0,0,0.3) !important;\n margin: 0 !important;\n padding: 0 !important;\n color: var(--bifa-bright-white) !important;\n text-align: center !important;\n width: 100% !important;\n max-width: 100% !important;\n}<\/p>\n<p>\/* ========= LEARN MORE BUTTON - OFFICIAL BIFA+ STYLE ========= *\/\n.brics-section .learn-more-wrapper {\n text-align: center !important;\n margin: 60px 0 0 0 !important;\n animation: fadeInUp 1s ease-out 0.6s both !important;\n padding: 0 !important;\n}<\/p>\n<p>.brics-section .learn-more-btn {\n display: inline-flex !important;\n align-items: center !important;\n gap: 15px !important;\n padding: 20px 45px !important;\n background: rgba(255, 255, 255, 0.95) !important;\n backdrop-filter: blur(10px) !important;\n color: var(--bifa-deep-navy) !important;\n text-decoration: none !important;\n font-family: var(--bifa-font-heading) !important;\n font-size: 1.1rem !important;\n font-weight: 700 !important;\n border-radius: 50px !important;\n box-shadow: var(--bifa-shadow-premium) !important;\n transition: var(--bifa-transition) !important;\n position: relative !important;\n overflow: hidden !important;\n border: 2px solid rgba(212, 175, 55, 0.2) !important;\n text-transform: uppercase !important;\n letter-spacing: 1px !important;\n margin: 0 !important;\n}<\/p>\n<p>.brics-section .learn-more-btn::before {\n content: '' !important;\n position: absolute !important;\n top: 0 !important;\n left: -100% !important;\n width: 100% !important;\n height: 100% !important;\n background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.2), transparent) !important;\n transition: left 0.5s ease !important;\n}<\/p>\n<p>.brics-section .learn-more-btn:hover::before {\n left: 100% !important;\n}<\/p>\n<p>.brics-section .learn-more-btn::after {\n content: '' !important;\n position: absolute !important;\n inset: -2px !important;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700) !important;\n border-radius: 50px !important;\n opacity: 0 !important;\n transition: opacity 0.3s ease !important;\n z-index: -1 !important;\n}<\/p>\n<p>.brics-section .learn-more-btn:hover::after {\n opacity: 0.2 !important;\n}<\/p>\n<p>.brics-section .learn-more-btn:hover {\n transform: translateY(-3px) !important;\n box-shadow: var(--bifa-shadow-gold) !important;\n border-color: var(--bifa-heritage-gold) !important;\n color: var(--bifa-deep-navy) !important;\n}<\/p>\n<p>.brics-section .btn-text {\n position: relative !important;\n z-index: 1 !important;\n margin: 0 !important;\n padding: 0 !important;\n}<\/p>\n<p>.brics-section .btn-arrow {\n transition: transform 0.3s ease !important;\n stroke: currentColor !important;\n position: relative !important;\n z-index: 1 !important;\n}<\/p>\n<p>.brics-section .learn-more-btn:hover .btn-arrow {\n transform: translateX(5px) !important;\n}<\/p>\n<p>\/* ========= ANIMATIONS - OFFICIAL BIFA+ STYLE ========= *\/\n@keyframes fadeInDown {\n from {\n opacity: 0 !important;\n transform: translateY(-50px) !important;\n }\n to {\n opacity: 1 !important;\n transform: translateY(0) !important;\n }\n}<\/p>\n<p>@keyframes fadeInUp {\n from {\n opacity: 0 !important;\n transform: translateY(50px) !important;\n }\n to {\n opacity: 1 !important;\n transform: translateY(0) !important;\n }\n}<\/p>\n<p>\/* ========= RESPONSIVE DESIGN - YOOTHEME COMPATIBLE ========= *\/<\/p>\n<p>\/* Desktop and large screens - ensure centering *\/\n@media (min-width: 1200px) {\n .brics-section .brics-cta {\n text-align: center !important;\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n }<\/p>\n<p> .brics-section .cta-text {\n text-align: center !important;\n width: 100% !important;\n max-width: 100% !important;\n }\n}<\/p>\n<p>\/* Laptop and medium screens - ensure centering *\/\n@media (min-width: 969px) and (max-width: 1199px) {\n .brics-section .brics-cta {\n text-align: center !important;\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n }<\/p>\n<p> .brics-section .cta-text {\n text-align: center !important;\n width: 100% !important;\n max-width: 100% !important;\n }\n}<\/p>\n<p>@media (max-width: 968px) {\n .brics-section {\n padding: 60px 0 !important;\n }<\/p>\n<p> .brics-section .brics-content {\n padding: 40px !important;\n }<\/p>\n<p> .brics-section .stats-grid {\n grid-template-columns: 1fr !important;\n gap: 25px !important;\n }<\/p>\n<p> .brics-section .flags-carousel-wrapper {\n padding: 0 50px !important;\n }<\/p>\n<p> .brics-section .flag-item {\n min-width: 160px !important;\n padding: 25px !important;\n }<\/p>\n<p> .brics-section .flag-image {\n width: 90px !important;\n height: 67px !important;\n }<\/p>\n<p> .brics-section .carousel-button {\n width: 50px !important;\n height: 50px !important;\n }\n}<\/p>\n<p>@media (max-width: 568px) {\n .brics-section {\n padding: 50px 0 !important;\n }<\/p>\n<p> .brics-section .section-title {\n font-size: 2rem !important;\n margin-bottom: 40px !important;\n }<\/p>\n<p> .brics-section .brics-content {\n padding: 30px 20px !important;\n margin-bottom: 40px !important;\n }<\/p>\n<p> .brics-section .content-intro {\n font-size: 1.2rem !important;\n margin-bottom: 30px !important;\n }<\/p>\n<p> .brics-section .content-text {\n font-size: 1rem !important;\n text-align: left !important;\n padding-left: 15px !important;\n }<\/p>\n<p> .brics-section .stat-number {\n font-size: 2.5rem !important;\n }<\/p>\n<p> .brics-section .stat-label {\n font-size: 1rem !important;\n }<\/p>\n<p> .brics-section .flags-carousel-wrapper {\n padding: 0 40px !important;\n }<\/p>\n<p> .brics-section .flags-carousel {\n gap: 20px !important;\n }<\/p>\n<p> .brics-section .flag-item {\n min-width: 140px !important;\n padding: 20px !important;\n }<\/p>\n<p> .brics-section .flag-image {\n width: 70px !important;\n height: 52px !important;\n }<\/p>\n<p> .brics-section .flag-name {\n font-size: 0.9rem !important;\n }<\/p>\n<p> .brics-section .carousel-button {\n width: 45px !important;\n height: 45px !important;\n }<\/p>\n<p> .brics-section .brics-cta {\n padding: 35px 20px !important;\n margin-top: 40px !important;\n text-align: center !important;\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n }<\/p>\n<p> .brics-section .cta-text {\n font-size: 1.2rem !important;\n text-align: center !important;\n width: 100% !important;\n }<\/p>\n<p> .brics-section .learn-more-btn {\n padding: 15px 30px !important;\n font-size: 1rem !important;\n gap: 10px !important;\n }<\/p>\n<p> .brics-section .flags-title {\n font-size: 1.8rem !important;\n margin-bottom: 40px !important;\n }\n}<\/p>\n<p>@media (max-width: 420px) {\n .brics-container {\n padding: 0 15px !important;\n }<\/p>\n<p> .brics-section .section-title {\n font-size: 1.8rem !important;\n }<\/p>\n<p> .brics-section .brics-content {\n padding: 25px 15px !important;\n }<\/p>\n<p> .brics-section .flags-carousel-wrapper {\n padding: 0 35px !important;\n }<\/p>\n<p> .brics-section .flag-item {\n min-width: 120px !important;\n padding: 15px !important;\n }<\/p>\n<p> .brics-section .flag-image {\n width: 60px !important;\n height: 45px !important;\n }<\/p>\n<p> .brics-section .carousel-button {\n width: 40px !important;\n height: 40px !important;\n }<\/p>\n<p> .brics-section .carousel-button svg {\n width: 20px !important;\n height: 20px !important;\n }\n}\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"brics-section-wrapper\">\n <\/p>\n<section class=\"brics-section\">\n<div class=\"brics-container\">\n<h2 class=\"section-title\">BRICS: Uma nova era para o futebol mundial<\/h2>\n<p> <\/p>\n<div class=\"brics-image\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Brics\/brics-alliance.jpg\" alt=\"BRICS Alliance\">\n <\/div>\n<p> <\/p>\n<div class=\"brics-content\">\n<p class=\"content-intro\">\n A uni\u00e3o de gigantes econ\u00f4micos cria uma plataforma \u00fanica para o desenvolvimento do futebol\n <\/p>\n<p class=\"content-text\">\n Fundada em Dubai pelo l\u00edder vision\u00e1rio Salim Humaid Almazaini, a BIFA+ representa uma alian\u00e7a de pa\u00edses com ricas tradi\u00e7\u00f5es futebol\u00edsticas e enorme potencial. Os Emirados \u00c1rabes Unidos servem como sede estrat\u00e9gica, reunindo na\u00e7\u00f5es de todos os continentes. O Brasil contribui com o ber\u00e7o do lend\u00e1rio futebol, a R\u00fassia com a experi\u00eancia de sediar a Copa do Mundo de 2018, enquanto a China e a \u00cdndia oferecem os maiores mercados com bilh\u00f5es de torcedores apaixonados. A \u00c1frica do Sul lidera o desenvolvimento do futebol africano, com os novos membros acrescentando uma for\u00e7a tremenda: Egito e Eti\u00f3pia, da \u00c1frica, Ir\u00e3, do Oriente M\u00e9dio, e Indon\u00e9sia, como o primeiro membro do Sudeste Asi\u00e1tico.\n <\/p>\n<p class=\"content-text\">\n Together, these countries form a powerful football ecosystem capable of competing with traditional<br \/>\n European leagues. The total population of BRICS countries exceeds 3.8 billion people,<br \/>\n creating an unprecedented base for talent development and fan engagement.\n <\/p>\n<p> <\/p>\n<div class=\"stats-carousel-section\">\n<h4 class=\"stats-carousel-title\">BIFA+ em n\u00fameros<\/h4>\n<div class=\"stats-carousel-container\">\n<div class=\"stats-carousel-wrapper\">\n <button class=\"stats-carousel-button stats-carousel-button-prev\" aria-label=\"Estat\u00edsticas anteriores\"><br \/>\n <svg viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"\/>\n <\/svg><br \/>\n <\/button><\/p>\n<div class=\"stats-carousel\" id=\"statsCarousel\">\n<div class=\"stats-item\">\n<div class=\"stats-icon\">\ud83c\udf0d<\/div>\n<div class=\"stats-number\">11+<\/div>\n<div class=\"stats-label\">Na\u00e7\u00f5es do Sul Global<\/div>\n<div class=\"stats-description\">Unidos na diplomacia do futebol<\/div>\n<\/p><\/div>\n<div class=\"stats-item\">\n<div class=\"stats-icon\">\ud83d\udc65<\/div>\n<div class=\"stats-number\">3.8B<\/div>\n<div class=\"stats-label\">Popula\u00e7\u00e3o Unida<\/div>\n<div class=\"stats-description\">Base de f\u00e3s sem precedentes<\/div>\n<\/p><\/div>\n<div class=\"stats-item\">\n<div class=\"stats-icon\">\ud83c\udfc6<\/div>\n<div class=\"stats-number\">2024<\/div>\n<div class=\"stats-label\">Ano de funda\u00e7\u00e3o<\/div>\n<div class=\"stats-description\">In\u00edcio de uma nova era<\/div>\n<\/p><\/div>\n<div class=\"stats-item\">\n<div class=\"stats-icon\">\ud83c\udf0f<\/div>\n<div class=\"stats-number\">4<\/div>\n<div class=\"stats-label\">Continentes Unidos<\/div>\n<div class=\"stats-description\">Presen\u00e7a global no futebol<\/div>\n<\/p><\/div>\n<div class=\"stats-item\">\n<div class=\"stats-icon\">\ud83d\udcac<\/div>\n<div class=\"stats-number\">700+<\/div>\n<div class=\"stats-label\">Idiomas falados<\/div>\n<div class=\"stats-description\">Diversidade cultural<\/div>\n<\/p><\/div>\n<div class=\"stats-item\">\n<div class=\"stats-icon\">\ud83d\udd50<\/div>\n<div class=\"stats-number\">18<\/div>\n<div class=\"stats-label\">Fusos hor\u00e1rios<\/div>\n<div class=\"stats-description\">Futebol 24 horas por dia<\/div>\n<\/p><\/div>\n<div class=\"stats-item\">\n<div class=\"stats-icon\">\u26bd<\/div>\n<div class=\"stats-number\">\u221e<\/div>\n<div class=\"stats-label\">Potencial futuro<\/div>\n<div class=\"stats-description\">Possibilidades ilimitadas<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <button class=\"stats-carousel-button stats-carousel-button-next\" aria-label=\"Pr\u00f3ximas estat\u00edsticas\"><br \/>\n <svg viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M9 18l6-6-6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"\/>\n <\/svg><br \/>\n <\/button>\n <\/div>\n<div class=\"stats-carousel-indicators\" id=\"statsCarouselIndicators\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p class=\"content-text\">\n BIFA will become the first truly global football league, uniting continents and cultures.<br \/>\n Using the economic power and sporting ambitions of BRICS countries, we are creating a platform<br \/>\n where the world’s best players can showcase their skills to billions of viewers.\n <\/p>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"flags-section\">\n<h3 class=\"flags-title\">Pa\u00edses membros da BIFA<\/h3>\n<div class=\"flags-carousel-container\">\n<div class=\"flags-carousel-wrapper\">\n <button class=\"carousel-button carousel-button-prev\" aria-label=\"Anterior\"><br \/>\n <svg viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"\/>\n <\/svg><br \/>\n <\/button><\/p>\n<div class=\"flags-carousel\" id=\"flagsCarousel\">\n<div class=\"flag-item\">\n<div class=\"flag-image\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Flags\/br.svg\" alt=\"Brazil\">\n <\/div>\n<div class=\"flag-name\">Brasil<\/div>\n<\/p><\/div>\n<div class=\"flag-item\">\n<div class=\"flag-image\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Flags\/ru.svg\" alt=\"Russia\">\n <\/div>\n<div class=\"flag-name\">R\u00fassia<\/div>\n<\/p><\/div>\n<div class=\"flag-item\">\n<div class=\"flag-image\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Flags\/in.svg\" alt=\"India\">\n <\/div>\n<div class=\"flag-name\">\u00cdndia<\/div>\n<\/p><\/div>\n<div class=\"flag-item\">\n<div class=\"flag-image\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Flags\/cn.svg\" alt=\"China\">\n <\/div>\n<div class=\"flag-name\">China<\/div>\n<\/p><\/div>\n<div class=\"flag-item\">\n<div class=\"flag-image\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Flags\/za.svg\" alt=\"South Africa\">\n <\/div>\n<div class=\"flag-name\">\u00c1frica do Sul<\/div>\n<\/p><\/div>\n<div class=\"flag-item\">\n<div class=\"flag-image\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Flags\/ae.svg\" alt=\"UAE\">\n <\/div>\n<div class=\"flag-name\">EMIRADOS \u00c1RABES UNIDOS<\/div>\n<\/p><\/div>\n<div class=\"flag-item\">\n<div class=\"flag-image\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Flags\/ir.svg\" alt=\"Iran\">\n <\/div>\n<div class=\"flag-name\">Ir\u00e3<\/div>\n<\/p><\/div>\n<div class=\"flag-item\">\n<div class=\"flag-image\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Flags\/et.svg\" alt=\"Ethiopia\">\n <\/div>\n<div class=\"flag-name\">Eti\u00f3pia<\/div>\n<\/p><\/div>\n<div class=\"flag-item\">\n<div class=\"flag-image\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Flags\/eg.svg\" alt=\"Egypt\">\n <\/div>\n<div class=\"flag-name\">Egito<\/div>\n<\/p><\/div>\n<div class=\"flag-item\">\n<div class=\"flag-image\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Flags\/id.svg\" alt=\"Indonesia\">\n <\/div>\n<div class=\"flag-name\">Indon\u00e9sia<\/div>\n<\/p><\/div>\n<div class=\"flag-item\">\n<div class=\"flag-image\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Flags\/sa.svg\" alt=\"Saudi Arabia\">\n <\/div>\n<div class=\"flag-name\">Ar\u00e1bia Saudita<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <button class=\"carousel-button carousel-button-next\" aria-label=\"Pr\u00f3ximo\"><br \/>\n <svg viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M9 18l6-6-6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"\/>\n <\/svg><br \/>\n <\/button>\n <\/div>\n<div class=\"carousel-indicators\" id=\"carouselIndicators\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"brics-cta\">\n<p class=\"cta-text\">\n Juntos, constru\u00edmos um futuro em que o futebol une continentes e cria novas oportunidades para bilh\u00f5es de pessoas\n <\/p>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"learn-more-wrapper\">\n <a href=\"https:\/\/bifa.ai\/country-members\/\" class=\"learn-more-btn\"><br \/>\n <span class=\"btn-text\">Saiba mais sobre os pa\u00edses membros<\/span><br \/>\n <svg class=\"btn-arrow\" width=\"24\" height=\"24\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M5 12H19M19 12L12 5M19 12L12 19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg><br \/>\n <\/a>\n <\/div>\n<\/p><\/div>\n<\/section>\n<\/div>\n<p><script>\n\/\/ BIFA+ BRICS Carousel System - Optimized Version\ndocument.addEventListener('DOMContentLoaded', function() {\n \/\/ Universal Carousel Class\n class BIFACarousel {\n constructor(config) {\n this.carousel = config.carousel;\n this.prevButton = config.prevButton;\n this.nextButton = config.nextButton;\n this.indicatorsContainer = config.indicatorsContainer;\n this.items = config.items;\n this.itemClass = config.itemClass;\n this.cloneClass = config.cloneClass;\n this.gap = config.gap || 30;\n this.autoPlayDelay = config.autoPlayDelay || 4000;\n this.itemsPerView = config.itemsPerView || 5;\n this.calculateItemsPerView = config.calculateItemsPerView;<\/p>\n<p> this.currentIndex = 0;\n this.autoPlayInterval = null;\n this.isTransitioning = false;\n this.totalItems = this.items.length;<\/p>\n<p> this.init();\n }<\/p>\n<p> init() {\n if (!this.carousel || this.totalItems === 0) return;<\/p>\n<p> this.calculateItemsPerView();\n this.createIndicators();\n this.setupInfiniteScroll();\n this.setupEventListeners();<\/p>\n<p> \/\/ Start autoplay after delay\n setTimeout(() => this.startAutoPlay(), 1000);\n }<\/p>\n<p> setupInfiniteScroll() {\n \/\/ Remove existing clones\n this.carousel.querySelectorAll(`.${this.cloneClass}`).forEach(clone => clone.remove());<\/p>\n<p> \/\/ Create clones for infinite scroll\n for (let i = 0; i < this.itemsPerView; i++) {\n const firstClone = this.items[i].cloneNode(true);\n const lastClone = this.items[this.totalItems - this.itemsPerView + i].cloneNode(true);\n \n firstClone.classList.add(this.cloneClass);\n lastClone.classList.add(this.cloneClass);\n \n this.carousel.appendChild(firstClone);\n this.carousel.insertBefore(lastClone, this.items[0]);\n }\n \n this.currentIndex = this.itemsPerView;\n this.carousel.style.transition = 'none';\n this.updateCarouselPosition();\n \n this.carousel.offsetHeight; \/\/ Force reflow\n this.carousel.style.transition = 'transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94)';\n }\n \n createIndicators() {\n if (!this.indicatorsContainer) return;\n \n this.indicatorsContainer.innerHTML = '';\n const totalPages = Math.ceil(this.totalItems \/ this.itemsPerView);\n \n for (let i = 0; i < totalPages; i++) {\n const indicator = document.createElement('div');\n indicator.className = 'indicator';\n if (i === 0) indicator.classList.add('active');\n indicator.addEventListener('click', () => this.goToPage(i));\n this.indicatorsContainer.appendChild(indicator);\n }\n }<\/p>\n<p> updateCarouselPosition() {\n const allItems = this.carousel.querySelectorAll(`.${this.itemClass}, .${this.cloneClass}`);\n if (allItems.length === 0) return;<\/p>\n<p> const itemWidth = allItems[0].offsetWidth;\n const offset = this.currentIndex * (itemWidth + this.gap);\n this.carousel.style.transform = `translateX(-${offset}px)`;\n }<\/p>\n<p> updateCarousel() {\n if (this.isTransitioning) return;\n this.isTransitioning = true;<\/p>\n<p> this.updateCarouselPosition();\n this.updateIndicators();<\/p>\n<p> this.carousel.addEventListener('transitionend', this.handleTransitionEnd.bind(this), { once: true });\n }<\/p>\n<p> handleTransitionEnd() {\n const totalItemsWithClones = this.carousel.querySelectorAll(`.${this.itemClass}, .${this.cloneClass}`).length;<\/p>\n<p> if (this.currentIndex >= totalItemsWithClones - this.itemsPerView) {\n this.carousel.style.transition = 'none';\n this.currentIndex = this.itemsPerView;\n this.updateCarouselPosition();\n this.carousel.offsetHeight;\n this.carousel.style.transition = 'transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94)';\n } else if (this.currentIndex < this.itemsPerView) {\n this.carousel.style.transition = 'none';\n this.currentIndex = totalItemsWithClones - this.itemsPerView * 2;\n this.updateCarouselPosition();\n this.carousel.offsetHeight;\n this.carousel.style.transition = 'transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94)';\n }\n \n this.isTransitioning = false;\n }\n \n updateIndicators() {\n if (!this.indicatorsContainer) return;\n \n const indicators = this.indicatorsContainer.querySelectorAll('.indicator');\n const realIndex = (this.currentIndex - this.itemsPerView) % this.totalItems;\n const currentPage = Math.floor(realIndex \/ this.itemsPerView);\n \n indicators.forEach((indicator, index) => {\n indicator.classList.toggle('active', index === currentPage);\n });\n }<\/p>\n<p> goToPage(pageIndex) {\n if (this.isTransitioning) return;<\/p>\n<p> const targetIndex = (pageIndex * this.itemsPerView) + this.itemsPerView;\n this.currentIndex = targetIndex;\n this.updateCarousel();\n this.resetAutoPlay();\n }<\/p>\n<p> nextSlide() {\n if (this.isTransitioning) return;\n this.currentIndex += 1;\n this.updateCarousel();\n }<\/p>\n<p> prevSlide() {\n if (this.isTransitioning) return;\n this.currentIndex -= 1;\n this.updateCarousel();\n }<\/p>\n<p> startAutoPlay() {\n this.autoPlayInterval = setInterval(() => this.nextSlide(), this.autoPlayDelay);\n }<\/p>\n<p> stopAutoPlay() {\n clearInterval(this.autoPlayInterval);\n }<\/p>\n<p> resetAutoPlay() {\n this.stopAutoPlay();\n this.startAutoPlay();\n }<\/p>\n<p> setupEventListeners() {\n \/\/ Navigation buttons\n if (this.prevButton) {\n this.prevButton.addEventListener('click', () => {\n this.prevSlide();\n this.resetAutoPlay();\n });\n }<\/p>\n<p> if (this.nextButton) {\n this.nextButton.addEventListener('click', () => {\n this.nextSlide();\n this.resetAutoPlay();\n });\n }<\/p>\n<p> \/\/ Pause on hover\n const container = this.carousel.closest('.flags-carousel-container, .stats-carousel-container');\n if (container) {\n container.addEventListener('mouseenter', () => this.stopAutoPlay());\n container.addEventListener('mouseleave', () => this.startAutoPlay());\n }<\/p>\n<p> \/\/ Touch support\n let touchStartX = 0;\n let touchEndX = 0;<\/p>\n<p> this.carousel.addEventListener('touchstart', (e) => {\n touchStartX = e.changedTouches[0].screenX;\n this.stopAutoPlay();\n });<\/p>\n<p> this.carousel.addEventListener('touchend', (e) => {\n touchEndX = e.changedTouches[0].screenX;\n this.handleSwipe(touchStartX, touchEndX);\n this.startAutoPlay();\n });<\/p>\n<p> \/\/ Responsive handling\n window.addEventListener('resize', () => {\n const oldItemsPerView = this.itemsPerView;\n this.calculateItemsPerView();<\/p>\n<p> if (oldItemsPerView !== this.itemsPerView) {\n this.setupInfiniteScroll();\n this.createIndicators();\n this.updateCarouselPosition();\n }\n });\n }<\/p>\n<p> handleSwipe(startX, endX) {\n const swipeDistance = endX - startX;\n const minSwipeDistance = 50;<\/p>\n<p> if (Math.abs(swipeDistance) > minSwipeDistance) {\n if (swipeDistance < 0) {\n this.nextSlide();\n } else {\n this.prevSlide();\n }\n }\n }\n }\n \n \/\/ Initialize Flags Carousel\n const flagsCarousel = new BIFACarousel({\n carousel: document.getElementById('flagsCarousel'),\n prevButton: document.querySelector('.carousel-button-prev'),\n nextButton: document.querySelector('.carousel-button-next'),\n indicatorsContainer: document.getElementById('carouselIndicators'),\n items: document.querySelectorAll('#flagsCarousel .flag-item'),\n itemClass: 'flag-item',\n cloneClass: 'flag-item-clone',\n gap: 30,\n autoPlayDelay: 4000,\n calculateItemsPerView: function() {\n const width = window.innerWidth;\n if (width < 420) {\n this.itemsPerView = 2;\n } else if (width < 568) {\n this.itemsPerView = 2;\n } else if (width < 768) {\n this.itemsPerView = 3;\n } else if (width < 1024) {\n this.itemsPerView = 4;\n } else {\n this.itemsPerView = 5;\n }\n }\n });\n \n \/\/ Initialize Stats Carousel\n const statsCarousel = new BIFACarousel({\n carousel: document.getElementById('statsCarousel'),\n prevButton: document.querySelector('.stats-carousel-button-prev'),\n nextButton: document.querySelector('.stats-carousel-button-next'),\n indicatorsContainer: document.getElementById('statsCarouselIndicators'),\n items: document.querySelectorAll('#statsCarousel .stats-item'),\n itemClass: 'stats-item',\n cloneClass: 'stats-item-clone',\n gap: 25,\n autoPlayDelay: 3500,\n calculateItemsPerView: function() {\n const width = window.innerWidth;\n if (width < 420) {\n this.itemsPerView = 1;\n } else if (width < 768) {\n this.itemsPerView = 2;\n } else if (width < 1024) {\n this.itemsPerView = 3;\n } else {\n this.itemsPerView = 4;\n }\n }\n });\n \n \/\/ Animate counters when visible\n const animateCounters = () => {\n const counters = document.querySelectorAll('.stats-number');<\/p>\n<p> const observerOptions = {\n threshold: 0.3,\n rootMargin: '0px'\n };<\/p>\n<p> const animateValue = (element, start, end, duration, suffix = '') => {\n let startTimestamp = null;\n const step = (timestamp) => {\n if (!startTimestamp) startTimestamp = timestamp;\n const progress = Math.min((timestamp - startTimestamp) \/ duration, 1);<\/p>\n<p> const easeOutQuart = 1 - Math.pow(1 - progress, 4);<\/p>\n<p> if (end === '\u221e') {\n element.textContent = '\u221e';\n return;\n } else if (end.includes('.')) {\n const current = (start + easeOutQuart * (parseFloat(end) - start)).toFixed(1);\n element.textContent = current + suffix;\n } else if (end.includes('+')) {\n const numEnd = parseInt(end.replace('+', ''));\n element.textContent = Math.floor(easeOutQuart * (numEnd - start) + start) + '+';\n } else {\n element.textContent = Math.floor(easeOutQuart * (end - start) + start) + suffix;\n }<\/p>\n<p> if (progress < 1) {\n window.requestAnimationFrame(step);\n } else {\n element.textContent = end + suffix;\n }\n };\n window.requestAnimationFrame(step);\n };\n \n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting && !entry.target.animated) {\n entry.target.animated = true;\n const finalText = entry.target.textContent;<\/p>\n<p> \/\/ Stats carousel numbers\n if (finalText.includes('11+')) {\n animateValue(entry.target, 0, '11+', 1800);\n } else if (finalText.includes('3.8B')) {\n animateValue(entry.target, 0, '3.8', 2000, 'B');\n } else if (finalText.includes('2024')) {\n animateValue(entry.target, 2020, 2024, 2200);\n } else if (finalText.includes('4') && !finalText.includes('700')) {\n animateValue(entry.target, 0, 4, 1500);\n } else if (finalText.includes('700+')) {\n animateValue(entry.target, 0, '700+', 2500);\n } else if (finalText.includes('18')) {\n animateValue(entry.target, 0, 18, 2000);\n } else if (finalText.includes('\u221e')) {\n animateValue(entry.target, 0, '\u221e', 1000);\n }\n }\n });\n }, observerOptions);<\/p>\n<p> counters.forEach(counter => {\n observer.observe(counter);\n });\n };<\/p>\n<p> \/\/ Start animations\n setTimeout(animateCounters, 500);<\/p>\n<p> \/\/ Smooth scroll for Learn More button\n const learnMoreBtn = document.querySelector('.learn-more-btn');\n if (learnMoreBtn) {\n learnMoreBtn.addEventListener('click', function(e) {\n if (this.getAttribute('href').startsWith('#')) {\n e.preventDefault();\n const targetId = this.getAttribute('href').substring(1);\n const targetElement = document.getElementById(targetId);<\/p>\n<p> if (targetElement) {\n targetElement.scrollIntoView({\n behavior: 'smooth',\n block: 'start'\n });\n } else {\n const flagsSection = document.querySelector('.flags-section');\n if (flagsSection) {\n flagsSection.scrollIntoView({\n behavior: 'smooth',\n block: 'start'\n });\n }\n }\n }\n });\n }\n});\n<\/script><\/p>\n<p><\/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><\/p>\n<p> \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@400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n<style>\n\/* ===== PRESIDENT BLOCK FOR YOOTHEME - OFFICIAL BIFA+ BRAND ===== *\/<\/p>\n<p>\/* CSS Variables - Official BIFA+ Colors *\/\n:root {\n --deep-navy: #0A1F44;\n --heritage-gold: #D4AF37;\n --civic-green: #1D6143;\n --bright-white: #FFFFFF;\n --soft-black: #1A1A1A;\n --text-secondary: #64748b;\n --shadow-sm: 0 2px 10px rgba(10, 31, 68, 0.08);\n --shadow-md: 0 10px 40px rgba(10, 31, 68, 0.12);\n --radius: 12px;\n}<\/p>\n<p>.bifa-president-block {\n position: relative;\n width: 100vw;\n margin-left: calc(-50vw + 50%);\n padding: 40px 0; \/* \u0423\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u043c \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0434\u043b\u044f \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0430 *\/\n background: transparent;\n overflow: hidden;\n}<\/p>\n<p>\/* \u0412\u043e\u0441\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0444\u043e\u043d \u0434\u043b\u044f \u043f\u043b\u0430\u043d\u0448\u0435\u0442\u043e\u0432 \u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 *\/\n@media (max-width: 1024px) {\n .bifa-president-block {\n background: linear-gradient(135deg, #f8f9fa 0%, #f0f2f5 100%);\n padding: 60px 0; \/* \u0412\u043e\u0441\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043e\u0442\u0441\u0442\u0443\u043f\u044b *\/\n }\n}<\/p>\n<p>.bifa-president-block::before {\n content: '';\n position: absolute;\n inset: 0;\n background: none;\n z-index: 0;\n}<\/p>\n<p>\/* \u0412\u043e\u0441\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442 \u0434\u043b\u044f \u043f\u043b\u0430\u043d\u0448\u0435\u0442\u043e\u0432 \u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 *\/\n@media (max-width: 1024px) {\n .bifa-president-block::before {\n background: radial-gradient(circle at 30% 50%, rgba(10, 31, 68, 0.02), transparent 50%),\n radial-gradient(circle at 70% 80%, rgba(212, 175, 55, 0.02), transparent 50%);\n }\n}<\/p>\n<p>\/* \u0427\u0430\u0441\u0442\u0438\u0446\u044b \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0444\u043e\u043d\u0430 *\/\n.president-particles {\n display: none; \/* \u0421\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0434\u043b\u044f \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0430 *\/\n}<\/p>\n<p>\/* \u041f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0447\u0430\u0441\u0442\u0438\u0446\u044b \u0434\u043b\u044f \u043f\u043b\u0430\u043d\u0448\u0435\u0442\u043e\u0432 \u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 *\/\n@media (max-width: 1024px) {\n .president-particles {\n display: block;\n position: absolute;\n width: 100%;\n height: 100%;\n overflow: hidden;\n z-index: 1;\n }\n}<\/p>\n<p>.president-particle {\n position: absolute;\n width: 4px;\n height: 4px;\n background: rgba(212, 175, 55, 0.2);\n border-radius: 50%;\n animation: president-float 15s ease-in-out infinite;\n}<\/p>\n<p>.president-particle:nth-child(2n) { \n background: rgba(10, 31, 68, 0.15); \n animation-duration: 18s; \n}<\/p>\n<p>.president-particle:nth-child(3n) { \n background: rgba(29, 97, 67, 0.1); \n animation-duration: 20s; \n}<\/p>\n<p>@keyframes president-float { \n 0%, 100% { \n transform: translateY(0); \n opacity: 1; \n }\n 50% { \n transform: translateY(-10px); \n opacity: 0.8; \n }\n}<\/p>\n<p>\/* \u041a\u043e\u043d\u0442\u0435\u043d\u0442 \u043e\u0431\u0435\u0440\u0442\u043a\u0430 *\/\n.president-content-wrapper {\n position: relative;\n z-index: 2;\n padding: 0 20px;\n}<\/p>\n<p>\/* Typography for this block - BIFA+ Official Fonts *\/\n.bifa-president-block h1, \n.bifa-president-block h2, \n.bifa-president-block h3 {\n font-family: 'Montserrat', sans-serif !important;\n}<\/p>\n<p>.bifa-president-block p, \n.bifa-president-block span, \n.bifa-president-block a {\n font-family: 'Poppins', sans-serif !important;\n}<\/p>\n<p>\/* President Card Container *\/\n.bifa-president-container {\n max-width: 1200px;\n margin: 0 auto;\n position: relative;\n z-index: 1;\n}<\/p>\n<p>\/* Main Card *\/\n.bifa-president-card {\n background: transparent;\n backdrop-filter: none;\n border-radius: 0;\n padding: 0; \/* \u0423\u0431\u0438\u0440\u0430\u0435\u043c \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0434\u043b\u044f \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0430 *\/\n box-shadow: none;\n border: none;\n position: relative;\n overflow: hidden;\n animation: bifa-fadeInUp 1s ease-out;\n}<\/p>\n<p>\/* \u0412\u043e\u0441\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0443 \u0434\u043b\u044f \u043f\u043b\u0430\u043d\u0448\u0435\u0442\u043e\u0432 \u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 *\/\n@media (max-width: 1024px) {\n .bifa-president-card {\n background: var(--bright-white);\n backdrop-filter: blur(10px);\n border-radius: var(--radius);\n box-shadow: 0 5px 30px rgba(10, 31, 68, 0.1);\n border: 2px solid rgba(212, 175, 55, 0.2);\n }\n}<\/p>\n<p>\/* Rotating background gradient *\/\n.bifa-president-card::before {\n content: '';\n position: absolute;\n top: -50%;\n right: -50%;\n width: 200%;\n height: 200%;\n background: none;\n animation: none;\n pointer-events: none;\n}<\/p>\n<p>\/* \u0412\u043e\u0441\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442 \u0434\u043b\u044f \u043f\u043b\u0430\u043d\u0448\u0435\u0442\u043e\u0432 \u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 *\/\n@media (max-width: 1024px) {\n .bifa-president-card::before {\n background: radial-gradient(circle, rgba(212, 175, 55, 0.03) 0%, transparent 50%);\n animation: bifa-rotate-slow 30s linear infinite;\n }\n}<\/p>\n<p>\/* Card Content Grid *\/\n.bifa-card-content {\n display: grid;\n grid-template-columns: 280px 1fr;\n gap: 60px;\n align-items: center;\n position: relative;\n z-index: 1;\n}<\/p>\n<p>\/* President Photo *\/\n.bifa-president-photo {\n width: 280px;\n height: 280px;\n border-radius: 50%;\n overflow: hidden;\n position: relative;\n border: 5px solid transparent;\n background: linear-gradient(white, white) padding-box,\n linear-gradient(135deg, var(--heritage-gold), #e6c157, var(--heritage-gold)) border-box;\n animation: bifa-fadeInScale 1s ease-out;\n box-shadow: 0 10px 30px rgba(10, 31, 68, 0.15);\n}<\/p>\n<p>.bifa-president-photo img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.6s ease;\n}<\/p>\n<p>.bifa-president-photo:hover img {\n transform: scale(1.1);\n}<\/p>\n<p>\/* President Info Section *\/\n.bifa-president-info {\n animation: bifa-fadeInRight 1s ease-out 0.3s both;\n}<\/p>\n<p>\/* Badge *\/\n.bifa-president-badge {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(212, 175, 55, 0.05) 100%);\n padding: 12px 24px;\n border-radius: 50px;\n margin-bottom: 25px;\n border: 1px solid rgba(212, 175, 55, 0.3);\n}<\/p>\n<p>.bifa-badge-icon {\n width: 24px;\n height: 24px;\n fill: var(--heritage-gold);\n}<\/p>\n<p>.bifa-badge-text {\n font-family: 'Montserrat', sans-serif !important;\n font-size: 0.85rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 2px;\n color: var(--deep-navy);\n}<\/p>\n<p>\/* President Name - \u0417\u041e\u041b\u041e\u0422\u041e\u0419 \u0426\u0412\u0415\u0422 \u0421 \u041f\u0415\u0420\u0415\u041b\u0418\u0412\u041e\u041c *\/\n.bifa-president-name {\n font-size: 2.8rem;\n font-weight: 800;\n background: linear-gradient(135deg, var(--heritage-gold) 0%, #e6c157 25%, #f4d03f 50%, #e6c157 75%, var(--heritage-gold) 100%);\n background-size: 200% 100%;\n background-clip: text;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n margin-bottom: 30px;\n line-height: 1.1;\n font-family: 'Montserrat', sans-serif !important;\n text-transform: uppercase;\n letter-spacing: 1px;\n text-shadow: 0 2px 4px rgba(212, 175, 55, 0.1);\n cursor: pointer;\n transition: all 0.3s ease;\n}<\/p>\n<p>\/* \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043f\u0435\u0440\u0435\u043b\u0438\u0432\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 *\/\n.bifa-president-name:hover {\n animation: bifa-gold-shimmer 2s ease-in-out infinite;\n transform: scale(1.02);\n}<\/p>\n<p>\/* \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0437\u043e\u043b\u043e\u0442\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u043b\u0438\u0432\u0430 *\/\n@keyframes bifa-gold-shimmer {\n 0% {\n background-position: 200% 0;\n }\n 50% {\n background-position: -200% 0;\n }\n 100% {\n background-position: 200% 0;\n }\n}<\/p>\n<p>\/* Description *\/\n.bifa-president-description {\n font-size: 1.15rem;\n line-height: 1.8;\n color: var(--text-secondary);\n margin-bottom: 40px;\n font-family: 'Poppins', sans-serif !important;\n font-weight: 400;\n}<\/p>\n<p>.bifa-president-description .bifa-highlight {\n color: var(--heritage-gold);\n font-weight: 600;\n}<\/p>\n<p>\/* Action Buttons Container *\/\n.bifa-president-actions {\n display: flex;\n align-items: center;\n gap: 25px;\n flex-wrap: wrap;\n}<\/p>\n<p>\/* Buttons - Official BIFA+ Style *\/\n.bifa-btn {\n padding: 14px 32px;\n text-decoration: none;\n font-size: 0.95rem;\n font-weight: 600;\n border-radius: var(--radius);\n display: inline-flex;\n align-items: center;\n gap: 10px;\n transition: all 0.3s ease;\n font-family: 'Montserrat', sans-serif !important;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n text-transform: uppercase;\n letter-spacing: 1px;\n}<\/p>\n<p>.bifa-btn-gold {\n background: var(--heritage-gold);\n color: var(--deep-navy);\n box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);\n border: 2px solid var(--heritage-gold);\n}<\/p>\n<p>.bifa-btn-gold:hover {\n transform: translateY(-2px);\n box-shadow: 0 6px 25px rgba(212, 175, 55, 0.4);\n background: #e6c157;\n color: var(--deep-navy);\n text-decoration: none;\n}<\/p>\n<p>.bifa-btn-outline {\n background: transparent;\n color: var(--deep-navy);\n border: 2px solid var(--deep-navy);\n}<\/p>\n<p>.bifa-btn-outline:hover {\n background: var(--deep-navy);\n color: var(--bright-white);\n transform: translateY(-2px);\n box-shadow: 0 6px 20px rgba(10, 31, 68, 0.25);\n text-decoration: none;\n}<\/p>\n<p>.bifa-btn-icon {\n width: 20px;\n height: 20px;\n transition: transform 0.3s ease;\n}<\/p>\n<p>.bifa-btn:hover .bifa-btn-icon {\n transform: translateX(5px);\n}<\/p>\n<p>\/* BIFA Logo *\/\n.bifa-logo-wrapper {\n position: relative;\n width: 80px;\n height: 80px;\n flex-shrink: 0;\n margin-left: 15px;\n}<\/p>\n<p>.bifa-logo-bg {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 100px;\n height: 100px;\n background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 60%);\n border-radius: 50%;\n animation: bifa-pulse 4s ease-in-out infinite;\n}<\/p>\n<p>.bifa-logo-img {\n width: 80px;\n height: 80px;\n background-image: url('\/wp-content\/themes\/yootheme-child\/assets\/images\/logo_bifa.svg');\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center;\n filter: drop-shadow(0 4px 8px rgba(10, 31, 68, 0.1));\n transition: all 0.4s ease;\n position: relative;\n z-index: 1;\n}<\/p>\n<p>.bifa-logo-wrapper:hover .bifa-logo-img {\n transform: scale(1.1) rotate(5deg);\n filter: drop-shadow(0 6px 15px rgba(212, 175, 55, 0.3));\n}<\/p>\n<p>\/* Decorative Elements *\/\n.bifa-gold-accent {\n display: none; \/* \u0421\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0434\u043b\u044f \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0430 *\/\n}<\/p>\n<p>\/* \u0414\u043b\u044f \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u044b\u0445 \u044d\u043a\u0440\u0430\u043d\u043e\u0432 - \u0443\u0431\u0438\u0440\u0430\u0435\u043c \u0432\u0441\u0435 \u0444\u043e\u043d\u044b \u0438 \u0440\u0430\u043c\u043a\u0438 *\/\n@media (min-width: 1025px) {\n .bifa-president-block {\n background: transparent !important;\n padding: 40px 0;\n }<\/p>\n<p> .bifa-president-block::before {\n display: none;\n }<\/p>\n<p> .bifa-president-card {\n background: transparent !important;\n border: none !important;\n box-shadow: none !important;\n padding: 0 !important;\n }<\/p>\n<p> .president-particles,\n .bifa-gold-accent {\n display: none !important;\n }\n}<\/p>\n<p>\/* \u041f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u043f\u043b\u0430\u043d\u0448\u0435\u0442\u043e\u0432 \u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 *\/\n@media (max-width: 1024px) {\n .bifa-gold-accent {\n display: block;\n position: absolute;\n width: 180px;\n height: 180px;\n background: radial-gradient(circle, rgba(212, 175, 55, 0.12) 0%, transparent 70%);\n border-radius: 50%;\n filter: blur(40px);\n pointer-events: none;\n animation: bifa-float-accent 15s ease-in-out infinite;\n }<\/p>\n<p> .bifa-gold-accent:nth-child(1) {\n top: -80px;\n right: 10%;\n }<\/p>\n<p> .bifa-gold-accent:nth-child(2) {\n bottom: -80px;\n left: 10%;\n animation-delay: 7s;\n }\n}<\/p>\n<p>\/* Animations *\/\n@keyframes bifa-fadeInUp {\n from {\n opacity: 0;\n transform: translateY(40px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>@keyframes bifa-fadeInRight {\n from {\n opacity: 0;\n transform: translateX(40px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}<\/p>\n<p>@keyframes bifa-fadeInScale {\n from {\n opacity: 0;\n transform: scale(0.8);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}<\/p>\n<p>@keyframes bifa-rotate-slow {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}<\/p>\n<p>@keyframes bifa-float-accent {\n 0%, 100% {\n transform: translate(0, 0);\n }\n 50% {\n transform: translate(-20px, 20px);\n }\n}<\/p>\n<p>@keyframes bifa-pulse {\n 0%, 100% {\n transform: translate(-50%, -50%) scale(1);\n opacity: 0.3;\n }\n 50% {\n transform: translate(-50%, -50%) scale(1.05);\n opacity: 0.5;\n }\n}<\/p>\n<p>\/* Responsive Design *\/\n@media (max-width: 1024px) {\n .bifa-president-container {\n padding: 0 30px;\n }<\/p>\n<p> .bifa-president-card {\n padding: 50px 40px;\n background: var(--bright-white);\n backdrop-filter: blur(10px);\n border-radius: var(--radius);\n box-shadow: 0 5px 30px rgba(10, 31, 68, 0.1);\n border: 2px solid rgba(212, 175, 55, 0.2);\n }<\/p>\n<p> .bifa-card-content {\n gap: 50px;\n }\n}<\/p>\n<p>@media (max-width: 868px) {\n .bifa-president-block {\n padding: 60px 0;\n }<\/p>\n<p> .bifa-card-content {\n grid-template-columns: 1fr;\n text-align: center;\n gap: 40px;\n }<\/p>\n<p> .bifa-president-photo {\n margin: 0 auto;\n }<\/p>\n<p> .bifa-president-actions {\n justify-content: center;\n }<\/p>\n<p> .bifa-president-badge {\n margin-left: auto;\n margin-right: auto;\n }\n}<\/p>\n<p>@media (max-width: 640px) {\n .bifa-president-container {\n padding: 0 20px;\n }<\/p>\n<p> .bifa-president-card {\n padding: 40px 30px;\n }<\/p>\n<p> .bifa-president-name {\n font-size: 2.2rem;\n }<\/p>\n<p> .bifa-president-description {\n font-size: 1.05rem;\n }<\/p>\n<p> .bifa-president-actions {\n flex-direction: column;\n width: 100%;\n gap: 15px;\n }<\/p>\n<p> .bifa-btn {\n width: 100%;\n justify-content: center;\n }<\/p>\n<p> .bifa-logo-wrapper {\n margin: 20px auto 0;\n }\n}<\/p>\n<p>@media (max-width: 480px) {\n .bifa-president-block {\n padding: 50px 0;\n }<\/p>\n<p> .bifa-president-card {\n padding: 30px 20px;\n border-radius: var(--radius);\n background: var(--bright-white);\n backdrop-filter: blur(10px);\n box-shadow: 0 5px 30px rgba(10, 31, 68, 0.1);\n border: 2px solid rgba(212, 175, 55, 0.2);\n }<\/p>\n<p> .bifa-president-photo {\n width: 220px;\n height: 220px;\n }<\/p>\n<p> .bifa-president-name {\n font-size: 1.9rem;\n margin-bottom: 20px;\n }<\/p>\n<p> .bifa-president-description {\n font-size: 1rem;\n margin-bottom: 30px;\n }<\/p>\n<p> .bifa-btn {\n padding: 12px 24px;\n font-size: 0.9rem;\n }<\/p>\n<p> .bifa-logo-wrapper {\n width: 70px;\n height: 70px;\n }<\/p>\n<p> .bifa-logo-img {\n width: 70px;\n height: 70px;\n }\n}\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<p><\/p>\n<div class=\"bifa-president-block\">\n <\/p>\n<div class=\"president-particles\">\n<div class=\"president-particle\" style=\"left:10%; top:20%; animation-delay:0s\"><\/div>\n<div class=\"president-particle\" style=\"left:30%; top:60%; animation-delay:2s\"><\/div>\n<div class=\"president-particle\" style=\"left:50%; top:30%; animation-delay:4s\"><\/div>\n<div class=\"president-particle\" style=\"left:70%; top:70%; animation-delay:6s\"><\/div>\n<div class=\"president-particle\" style=\"left:90%; top:40%; animation-delay:8s\"><\/div>\n<div class=\"president-particle\" style=\"left:20%; top:80%; animation-delay:3s\"><\/div>\n<div class=\"president-particle\" style=\"left:80%; top:10%; animation-delay:5s\"><\/div>\n<div class=\"president-particle\" style=\"left:40%; top:90%; animation-delay:7s\"><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"bifa-gold-accent\"><\/div>\n<div class=\"bifa-gold-accent\"><\/div>\n<div class=\"president-content-wrapper\">\n<div class=\"bifa-president-container\">\n<div class=\"bifa-president-card\">\n<div class=\"bifa-card-content\">\n <\/p>\n<div class=\"bifa-president-photo\">\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> <\/p>\n<div class=\"bifa-president-info\">\n<div class=\"bifa-president-badge\">\n <svg class=\"bifa-badge-icon\" viewbox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\/>\n <\/svg><br \/>\n <span class=\"bifa-badge-text\">Fundador e presidente<\/span>\n <\/div>\n<h2 class=\"bifa-president-name\">Dr. Salim Humaid Almazaini<\/h2>\n<div class=\"bifa-president-description\">\n<p>\n Um distinto <span class=\"bifa-highlight\">l\u00edder vision\u00e1rio<\/span> em diplomacia esportiva internacional. Por meio de inova\u00e7\u00e3o estrat\u00e9gica e compromisso inabal\u00e1vel, o Dr. Almazaini transforma o futebol global <span class=\"bifa-highlight\">em uma poderosa ponte para a unidade e a coopera\u00e7\u00e3o<\/span> entre na\u00e7\u00f5es.\n <\/p>\n<\/p><\/div>\n<div class=\"bifa-president-actions\">\n <a href=\"https:\/\/bifa.ai\/about\/#founder\" class=\"bifa-btn bifa-btn-gold\"><br \/>\n <span>Descubra a hist\u00f3ria<\/span><br \/>\n <svg class=\"bifa-btn-icon\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\n <\/svg><br \/>\n <\/a><\/p>\n<p> <a href=\"https:\/\/bifa.ai\/about\/\" class=\"bifa-btn bifa-btn-outline\"><br \/>\n <span>Sobre a BIFA<\/span><br \/>\n <svg class=\"bifa-btn-icon\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\n <path d=\"M12 6v6l4 2\"\/>\n <\/svg><br \/>\n <\/a><\/p>\n<div class=\"bifa-logo-wrapper\">\n<div class=\"bifa-logo-bg\"><\/div>\n<div class=\"bifa-logo-img\" role=\"img\" aria-label=\"Logotipo da BIFA\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n<p><script>\n\/\/ BIFA President Block Interactions\n(function() {\n \/\/ Smooth reveal animation on scroll\n const observerOptions = {\n threshold: 0.2,\n rootMargin: '0px 0px -50px 0px'\n };<\/p>\n<p> const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.style.animationPlayState = 'running';\n observer.unobserve(entry.target);\n }\n });\n }, observerOptions);<\/p>\n<p> \/\/ Observe animated elements\n const animatedElements = document.querySelectorAll('.bifa-president-card, .bifa-president-photo');\n animatedElements.forEach(el => {\n if (el) {\n el.style.animationPlayState = 'paused';\n observer.observe(el);\n }\n });<\/p>\n<p> \/\/ Button hover effects\n const buttons = document.querySelectorAll('.bifa-btn');\n buttons.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.3) 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 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> \/\/ Image loading effect\n const presidentImg = document.querySelector('.bifa-president-photo img');\n if (presidentImg) {\n presidentImg.style.opacity = '0';\n presidentImg.style.transition = 'opacity 0.6s ease';<\/p>\n<p> if (presidentImg.complete) {\n presidentImg.style.opacity = '1';\n } else {\n presidentImg.addEventListener('load', function() {\n this.style.opacity = '1';\n });\n }\n }<\/p>\n<p> \/\/ Preload images\n const imagesToPreload = [\n '\/wp-content\/themes\/yootheme-child\/assets\/images\/logo_bifa.svg',\n '\/wp-content\/themes\/yootheme-child\/assets\/images\/Mr\/main-photo.jpg'\n ];<\/p>\n<p> imagesToPreload.forEach(url => {\n const img = new Image();\n img.src = url;\n });\n})();\n<\/script><\/p>\n<p><\/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+ Premium Gallery Block<\/title>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n \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&family=Cairo:wght@300;400;500;600;700;800&family=Tajawal:wght@300;400;500;700;800&display=swap\" rel=\"stylesheet\">\n<style>\n\/* ========= \u0413\u041b\u041e\u0411\u0410\u041b\u042c\u041d\u042b\u0415 \u041f\u0415\u0420\u0415\u041c\u0415\u041d\u041d\u042b\u0415 BIFA+ ========= *\/\n:root {\n \/* \u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430 BIFA+ *\/\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 --bifa-gray-light: #F8F9FA;\n --bifa-gray: #6C757D;<\/p>\n<p> \/* \u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0448\u0440\u0438\u0444\u0442\u044b BIFA+ *\/\n --bifa-font-heading: 'Montserrat', 'Cairo', sans-serif;\n --bifa-font-body: 'Poppins', 'Tajawal', sans-serif;\n --bifa-font-arabic: 'Cairo', 'Tajawal', 'GE SS Text', sans-serif;<\/p>\n<p> \/* \u041f\u0440\u0435\u043c\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0442\u0435\u043d\u0438 \u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u044b *\/\n --bifa-shadow-premium: 0 25px 80px rgba(10, 31, 68, 0.15);\n --bifa-shadow-hover: 0 35px 100px rgba(10, 31, 68, 0.2);\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 ========= *\/\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}<\/p>\n<p>body {\n font-family: var(--bifa-font-body);\n background: var(--bifa-bright-white);\n overflow-x: hidden;\n color: var(--bifa-soft-black);\n}<\/p>\n<p>\/* ========= GALLERY SECTION WRAPPER ========= *\/\n.bifa-gallery-section-wrapper {\n width: 100vw;\n position: relative;\n left: 50%;\n margin-left: -50vw;\n background: transparent; \/* \u0411\u0435\u0437 \u0444\u043e\u043d\u0430 *\/\n overflow: hidden;\n}<\/p>\n<p>\/* ========= MAIN GALLERY SECTION ========= *\/\n.bifa-gallery-section {\n min-height: auto;\n padding: 60px 0 80px 0;\n position: relative;\n background: transparent;\n}<\/p>\n<p>\/* ========= ANIMATED BACKGROUND ELEMENTS ========= *\/\n.bifa-gallery-bg-animation {\n position: absolute;\n width: 100%;\n height: 100%;\n overflow: hidden;\n z-index: 1;\n top: 0;\n left: 0;\n}<\/p>\n<p>\/* \u0417\u043e\u043b\u043e\u0442\u044b\u0435 \u0447\u0430\u0441\u0442\u0438\u0446\u044b BIFA+ *\/\n.bifa-gallery-particle {\n position: absolute;\n width: 4px;\n height: 4px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n border-radius: 50%;\n animation: floatGallery 18s infinite linear;\n box-shadow: 0 0 8px rgba(212, 175, 55, 0.3);\n opacity: 0.3;\n will-change: transform;\n}<\/p>\n<p>@keyframes floatGallery {\n 0% {\n transform: translateY(100vh) translateX(0) rotate(0deg);\n opacity: 0;\n }\n 10% { opacity: 0.4; }\n 90% { opacity: 0.4; }\n 100% {\n transform: translateY(-100vh) translateX(60px) rotate(360deg);\n opacity: 0;\n }\n}<\/p>\n<p>\/* \u041f\u043b\u0430\u0432\u0430\u044e\u0449\u0438\u0435 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0444\u0438\u0433\u0443\u0440\u044b BIFA+ *\/\n.bifa-floating-shape {\n position: absolute;\n border-radius: 50%;\n filter: blur(100px);\n animation: morphFloatGallery 22s ease-in-out infinite;\n pointer-events: none;\n opacity: 0.4;\n}<\/p>\n<p>.bifa-shape-gallery-1 {\n width: 350px;\n height: 350px;\n background: radial-gradient(circle at 30% 30%, rgba(212, 175, 55, 0.08), transparent);\n top: -175px;\n right: -175px;\n}<\/p>\n<p>.bifa-shape-gallery-2 {\n width: 300px;\n height: 300px;\n background: radial-gradient(circle at 70% 70%, rgba(10, 31, 68, 0.06), transparent);\n bottom: -150px;\n left: -150px;\n animation-delay: 7s;\n}<\/p>\n<p>.bifa-shape-gallery-3 {\n width: 250px;\n height: 250px;\n background: radial-gradient(circle at 50% 50%, rgba(29, 97, 67, 0.07), transparent);\n top: 40%;\n left: 60%;\n animation-delay: 14s;\n}<\/p>\n<p>@keyframes morphFloatGallery {\n 0%, 100% { \n transform: translate(0, 0) scale(1) rotate(0deg);\n filter: blur(100px);\n }\n 25% { \n transform: translate(80px, -60px) scale(1.2) rotate(90deg);\n filter: blur(120px);\n }\n 50% { \n transform: translate(-60px, 80px) scale(0.8) rotate(180deg);\n filter: blur(80px);\n }\n 75% { \n transform: translate(-80px, -40px) scale(1.1) rotate(270deg);\n filter: blur(110px);\n }\n}<\/p>\n<p>\/* ========= CONTAINER ========= *\/\n.bifa-gallery-container {\n max-width: 1400px;\n margin: 0 auto;\n padding: 0 20px;\n position: relative;\n z-index: 10;\n}<\/p>\n<p>\/* ========= SECTION HEADER - Premium Style ========= *\/\n.bifa-gallery-section-header {\n text-align: center;\n margin-bottom: 70px;\n animation: fadeInDown 1.2s ease;\n}<\/p>\n<p>.bifa-gallery-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), #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n margin-bottom: 15px;\n text-transform: uppercase;\n position: relative;\n display: inline-block;\n cursor: pointer;\n transition: all 0.3s ease;\n}<\/p>\n<p>.bifa-gallery-section-title::after {\n content: '';\n position: absolute;\n bottom: -10px;\n left: 50%;\n transform: translateX(-50%);\n width: 0;\n height: 3px;\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700);\n transition: width 0.4s ease;\n}<\/p>\n<p>.bifa-gallery-section-title:hover {\n transform: translateY(-3px);\n filter: drop-shadow(0 10px 20px rgba(212, 175, 55, 0.3));\n}<\/p>\n<p>.bifa-gallery-section-title:hover::after {\n width: 100%;\n}<\/p>\n<p>.bifa-gallery-section-subtitle {\n font-family: var(--bifa-font-heading);\n font-size: clamp(1.1rem, 2vw, 1.5rem);\n color: var(--bifa-deep-navy);\n font-weight: 600;\n letter-spacing: 1.5px;\n margin-bottom: 15px;\n opacity: 0;\n animation: fadeInUp 1.2s ease 0.3s forwards;\n}<\/p>\n<p>.bifa-gallery-section-description {\n max-width: 800px;\n margin: 0 auto;\n font-family: var(--bifa-font-body);\n font-size: clamp(0.95rem, 1.3vw, 1.1rem);\n line-height: 1.7;\n color: #4a5568;\n opacity: 0;\n animation: fadeInUp 1.2s ease 0.6s forwards;\n}<\/p>\n<p>\/* ========= MAIN GALLERY - Premium Design ========= *\/\n.bifa-gallery-main {\n position: relative;\n max-width: 1000px;\n margin: 0 auto 50px;\n border-radius: 25px;\n overflow: hidden;\n box-shadow: var(--bifa-shadow-premium);\n animation: fadeInUp 1.2s ease 0.4s forwards;\n background: white;\n opacity: 0;\n border: 1px solid rgba(212, 175, 55, 0.1);\n}<\/p>\n<p>.bifa-gallery-slider {\n position: relative;\n height: 600px;\n background: var(--bifa-gray-light);\n overflow: hidden;\n}<\/p>\n<p>.bifa-slide {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n transition: opacity 1s ease-in-out;\n}<\/p>\n<p>.bifa-slide.active {\n opacity: 1;\n}<\/p>\n<p>.bifa-slide img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.3s ease;\n}<\/p>\n<p>.bifa-slide:hover img {\n transform: scale(1.05);\n}<\/p>\n<p>.bifa-slide-caption {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n background: linear-gradient(to top, \n rgba(10, 31, 68, 0.95) 0%, \n rgba(10, 31, 68, 0.8) 50%,\n transparent 100%\n );\n padding: 50px 40px;\n color: white;\n}<\/p>\n<p>.bifa-slide-title {\n font-family: var(--bifa-font-heading);\n font-size: 1.8rem;\n font-weight: 800;\n margin-bottom: 12px;\n color: var(--bifa-bright-white);\n text-shadow: 0 2px 4px rgba(0,0,0,0.3);\n}<\/p>\n<p>.bifa-slide-desc {\n font-family: var(--bifa-font-body);\n font-size: 1.1rem;\n color: rgba(255, 255, 255, 0.9);\n line-height: 1.6;\n}<\/p>\n<p>\/* ========= NAVIGATION ARROWS - Premium Style ========= *\/\n.bifa-gallery-nav {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(15px);\n border: 2px solid rgba(212, 175, 55, 0.3);\n width: 55px;\n height: 55px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: var(--bifa-transition);\n z-index: 20;\n box-shadow: 0 8px 25px rgba(10, 31, 68, 0.15);\n}<\/p>\n<p>.bifa-gallery-nav:hover {\n background: var(--bifa-heritage-gold);\n border-color: var(--bifa-heritage-gold);\n transform: translateY(-50%) scale(1.1);\n box-shadow: var(--bifa-shadow-gold);\n}<\/p>\n<p>.bifa-gallery-nav.prev {\n left: 25px;\n}<\/p>\n<p>.bifa-gallery-nav.next {\n right: 25px;\n}<\/p>\n<p>.bifa-gallery-nav::before {\n content: '';\n width: 14px;\n height: 14px;\n border-top: 3px solid var(--bifa-deep-navy);\n border-right: 3px solid var(--bifa-deep-navy);\n transition: border-color 0.3s ease;\n}<\/p>\n<p>.bifa-gallery-nav:hover::before {\n border-color: var(--bifa-bright-white);\n}<\/p>\n<p>.bifa-gallery-nav.prev::before {\n transform: rotate(-135deg);\n margin-left: 4px;\n}<\/p>\n<p>.bifa-gallery-nav.next::before {\n transform: rotate(45deg);\n margin-right: 4px;\n}<\/p>\n<p>\/* ========= DOTS NAVIGATION - Premium Style ========= *\/\n.bifa-gallery-dots {\n position: absolute;\n bottom: 25px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n gap: 12px;\n z-index: 20;\n}<\/p>\n<p>.bifa-dot {\n width: 14px;\n height: 14px;\n border-radius: 50%;\n background: rgba(255, 255, 255, 0.6);\n cursor: pointer;\n transition: var(--bifa-transition);\n border: 2px solid transparent;\n backdrop-filter: blur(10px);\n}<\/p>\n<p>.bifa-dot.active {\n background: var(--bifa-heritage-gold);\n transform: scale(1.3);\n border-color: rgba(255, 255, 255, 0.8);\n box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);\n}<\/p>\n<p>.bifa-dot:hover {\n background: rgba(255, 255, 255, 0.9);\n transform: scale(1.1);\n}<\/p>\n<p>\/* ========= PLAY\/PAUSE CONTROL - Premium Style ========= *\/\n.bifa-gallery-controls {\n position: absolute;\n top: 25px;\n right: 25px;\n z-index: 20;\n}<\/p>\n<p>.bifa-play-pause-btn {\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(15px);\n border: 2px solid rgba(212, 175, 55, 0.3);\n width: 55px;\n height: 55px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: var(--bifa-transition);\n box-shadow: 0 8px 25px rgba(10, 31, 68, 0.15);\n outline: none;\n}<\/p>\n<p>.bifa-play-pause-btn:hover {\n background: var(--bifa-heritage-gold);\n border-color: var(--bifa-heritage-gold);\n transform: scale(1.1);\n box-shadow: var(--bifa-shadow-gold);\n}<\/p>\n<p>.bifa-play-pause-btn::before {\n content: '';\n width: 0;\n height: 0;\n border-left: 16px solid var(--bifa-deep-navy);\n border-top: 12px solid transparent;\n border-bottom: 12px solid transparent;\n margin-left: 3px;\n transition: all 0.3s ease;\n}<\/p>\n<p>.bifa-play-pause-btn:hover::before {\n border-left-color: var(--bifa-bright-white);\n}<\/p>\n<p>.bifa-play-pause-btn.playing::before {\n width: 22px;\n height: 22px;\n border: none;\n background: linear-gradient(to right, \n var(--bifa-deep-navy) 35%, \n transparent 35%, \n transparent 65%, \n var(--bifa-deep-navy) 65%\n );\n margin-left: 0;\n}<\/p>\n<p>.bifa-play-pause-btn.playing:hover::before {\n background: linear-gradient(to right, \n var(--bifa-bright-white) 35%, \n transparent 35%, \n transparent 65%, \n var(--bifa-bright-white) 65%\n );\n}<\/p>\n<p>\/* ========= THUMBNAILS - Premium Grid ========= *\/\n.bifa-gallery-thumbs {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n gap: 20px;\n margin-top: 40px;\n animation: fadeInUp 1.2s ease 0.7s forwards;\n opacity: 0;\n}<\/p>\n<p>.bifa-thumb-item {\n position: relative;\n height: 140px;\n border-radius: 20px;\n overflow: hidden;\n cursor: pointer;\n transition: var(--bifa-transition);\n box-shadow: 0 8px 25px rgba(10, 31, 68, 0.1);\n background: white;\n border: 3px solid transparent;\n}<\/p>\n<p>.bifa-thumb-item:hover {\n transform: translateY(-8px);\n box-shadow: 0 15px 40px rgba(10, 31, 68, 0.2);\n border-color: rgba(212, 175, 55, 0.3);\n}<\/p>\n<p>.bifa-thumb-item.active {\n border-color: var(--bifa-heritage-gold);\n box-shadow: var(--bifa-shadow-gold);\n transform: translateY(-5px);\n}<\/p>\n<p>.bifa-thumb-item img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.3s ease;\n}<\/p>\n<p>.bifa-thumb-item:hover img {\n transform: scale(1.1);\n}<\/p>\n<p>\/* Overlay effect for thumbnails *\/\n.bifa-thumb-item::before {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(135deg, \n transparent 0%, \n rgba(212, 175, 55, 0.1) 100%\n );\n opacity: 0;\n transition: opacity 0.3s ease;\n z-index: 1;\n}<\/p>\n<p>.bifa-thumb-item:hover::before {\n opacity: 1;\n}<\/p>\n<p>.bifa-thumb-item.active::before {\n background: linear-gradient(135deg, \n rgba(212, 175, 55, 0.2) 0%, \n rgba(212, 175, 55, 0.05) 100%\n );\n opacity: 1;\n}<\/p>\n<p>\/* ========= ANIMATIONS ========= *\/\n@keyframes fadeInDown {\n from {\n opacity: 0;\n transform: translateY(-40px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>@keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(40px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>\/* ========= RESPONSIVE ========= *\/\n@media (max-width: 1024px) {\n .bifa-gallery-thumbs {\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n gap: 15px;\n }<\/p>\n<p> .bifa-thumb-item {\n height: 120px;\n }\n}<\/p>\n<p>@media (max-width: 768px) {\n .bifa-gallery-section {\n padding: 50px 0 60px 0;\n }<\/p>\n<p> .bifa-gallery-container {\n padding: 0 15px;\n }<\/p>\n<p> .bifa-gallery-slider {\n height: 400px;\n }<\/p>\n<p> .bifa-slide-caption {\n padding: 30px 25px;\n }<\/p>\n<p> .bifa-slide-title {\n font-size: 1.5rem;\n }<\/p>\n<p> .bifa-gallery-nav {\n width: 45px;\n height: 45px;\n }<\/p>\n<p> .bifa-play-pause-btn {\n width: 45px;\n height: 45px;\n }<\/p>\n<p> .bifa-gallery-thumbs {\n grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n gap: 12px;\n margin-top: 30px;\n }<\/p>\n<p> .bifa-thumb-item {\n height: 100px;\n }\n}<\/p>\n<p>@media (max-width: 480px) {\n .bifa-gallery-section {\n padding: 40px 0 50px 0;\n }<\/p>\n<p> .bifa-gallery-slider {\n height: 300px;\n }<\/p>\n<p> .bifa-gallery-section-title {\n font-size: 2rem;\n }<\/p>\n<p> .bifa-gallery-section-subtitle {\n font-size: 1.1rem;\n letter-spacing: 1px;\n }<\/p>\n<p> .bifa-gallery-nav {\n display: none; \/* \u0421\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0441\u0442\u0440\u0435\u043b\u043a\u0438 \u043d\u0430 \u043e\u0447\u0435\u043d\u044c \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 \u044d\u043a\u0440\u0430\u043d\u0430\u0445 *\/\n }<\/p>\n<p> .bifa-slide-caption {\n padding: 25px 20px;\n }<\/p>\n<p> .bifa-slide-title {\n font-size: 1.3rem;\n }<\/p>\n<p> .bifa-slide-desc {\n font-size: 1rem;\n }<\/p>\n<p> .bifa-gallery-thumbs {\n grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));\n gap: 10px;\n }<\/p>\n<p> .bifa-thumb-item {\n height: 80px;\n }\n}\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"bifa-gallery-section-wrapper\">\n <\/p>\n<section class=\"bifa-gallery-section\">\n <\/p>\n<div class=\"bifa-gallery-bg-animation\">\n <\/p>\n<div class=\"bifa-floating-shape bifa-shape-gallery-1\"><\/div>\n<div class=\"bifa-floating-shape bifa-shape-gallery-2\"><\/div>\n<div class=\"bifa-floating-shape bifa-shape-gallery-3\"><\/div>\n<p> \n <\/div>\n<div class=\"bifa-gallery-container\">\n <\/p>\n<div class=\"bifa-gallery-section-header\">\n<h2 class=\"bifa-gallery-section-title\">Galeria BIFA+<\/h2>\n<p class=\"bifa-gallery-section-subtitle\">Momentos cativantes<\/p>\n<p class=\"bifa-gallery-section-description\">\n Descubra os momentos mais inspiradores dos eventos e atividades da BIFA+ que mostram o poder do futebol na uni\u00e3o de na\u00e7\u00f5es e na constru\u00e7\u00e3o de comunidades.\n <\/p>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"bifa-gallery-main\">\n<div class=\"bifa-gallery-slider\">\n <\/p>\n<div class=\"bifa-slide active\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Moments\/1.jpg?v=2\" alt=\"BIFA+ Victory Moment\"><\/p>\n<div class=\"bifa-slide-caption\">\n<h3 class=\"bifa-slide-title\">Celebra\u00e7\u00e3o da vit\u00f3ria<\/h3>\n<p class=\"bifa-slide-desc\">Emo\u00e7\u00f5es e uni\u00e3o da equipe ap\u00f3s alcan\u00e7ar um sucesso not\u00e1vel no cen\u00e1rio internacional<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"bifa-slide\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Moments\/2.jpg?v=2\" alt=\"BIFA+ Team Spirit\"><\/p>\n<div class=\"bifa-slide-caption\">\n<h3 class=\"bifa-slide-title\">Esp\u00edrito de equipe<\/h3>\n<p class=\"bifa-slide-desc\">Mostrando o incr\u00edvel v\u00ednculo e a uni\u00e3o que definem a comunidade BIFA+<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"bifa-slide\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Moments\/3.jpg?v=2\" alt=\"BIFA+ Young Talents\"><\/p>\n<div class=\"bifa-slide-caption\">\n<h3 class=\"bifa-slide-title\">Futuros campe\u00f5es<\/h3>\n<p class=\"bifa-slide-desc\">Incentivando a pr\u00f3xima gera\u00e7\u00e3o de talentos do futebol nos programas da BIFA+ Academy<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"bifa-slide\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Moments\/4.jpg?v=2\" alt=\"BIFA+ Stadium\"><\/p>\n<div class=\"bifa-slide-caption\">\n<h3 class=\"bifa-slide-title\">Locais de classe mundial<\/h3>\n<p class=\"bifa-slide-desc\">Est\u00e1dios e instala\u00e7\u00f5es modernos que proporcionam experi\u00eancias inesquec\u00edveis no futebol<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"bifa-gallery-nav prev\"><\/div>\n<div class=\"bifa-gallery-nav next\"><\/div>\n<p> <\/p>\n<div class=\"bifa-gallery-dots\">\n <span class=\"bifa-dot active\" data-slide=\"0\"><\/span><br \/>\n <span class=\"bifa-dot\" data-slide=\"1\"><\/span><br \/>\n <span class=\"bifa-dot\" data-slide=\"2\"><\/span><br \/>\n <span class=\"bifa-dot\" data-slide=\"3\"><\/span>\n <\/div>\n<p> <\/p>\n<div class=\"bifa-gallery-controls\">\n <button class=\"bifa-play-pause-btn playing\" aria-label=\"Reproduzir\/Pausar a galeria\"><\/button>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"bifa-gallery-thumbs\">\n<div class=\"bifa-thumb-item active\" data-slide=\"0\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Moments\/1.jpg?v=2\" alt=\"Victory Thumbnail\">\n <\/div>\n<div class=\"bifa-thumb-item\" data-slide=\"1\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Moments\/2.jpg?v=2\" alt=\"Team Spirit Thumbnail\">\n <\/div>\n<div class=\"bifa-thumb-item\" data-slide=\"2\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Moments\/3.jpg?v=2\" alt=\"Young Talents Thumbnail\">\n <\/div>\n<div class=\"bifa-thumb-item\" data-slide=\"3\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Moments\/4.jpg?v=2\" alt=\"Stadium Thumbnail\">\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<\/div>\n<p><script>\n\/\/ BIFA+ Premium Gallery Module\nconst BifaGallery = {\n \/\/ Configuration\n config: {\n currentSlide: 0,\n isPlaying: true,\n slideInterval: null,\n autoplayDelay: 5000\n },<\/p>\n<p> \/\/ Initialize\n init() {\n this.createParticles();\n this.setupEventListeners();\n this.startSlideshow();\n this.preloadImages();\n },<\/p>\n<p> \/\/ Create golden particles\n createParticles() {\n const particlesContainer = document.querySelector('.bifa-gallery-bg-animation');\n const particleCount = 8; \/\/ \u041c\u0435\u043d\u044c\u0448\u0435 \u0447\u0430\u0441\u0442\u0438\u0446 \u0434\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0447\u0438\u0441\u0442\u043e\u0433\u043e \u0432\u0438\u0434\u0430<\/p>\n<p> for (let i = 0; i < particleCount; i++) {\n const particle = document.createElement('div');\n particle.className = 'bifa-gallery-particle';\n particle.style.left = Math.random() * 100 + '%';\n particle.style.animationDelay = Math.random() * 16 + 's';\n particle.style.animationDuration = (14 + Math.random() * 6) + 's';\n \n const size = 4 + Math.random() * 2;\n particle.style.width = size + 'px';\n particle.style.height = size + 'px';\n \n particlesContainer.appendChild(particle);\n }\n },\n\n \/\/ Setup event listeners\n setupEventListeners() {\n const slides = document.querySelectorAll('.bifa-slide');\n const dots = document.querySelectorAll('.bifa-dot');\n const thumbs = document.querySelectorAll('.bifa-thumb-item');\n const prevBtn = document.querySelector('.bifa-gallery-nav.prev');\n const nextBtn = document.querySelector('.bifa-gallery-nav.next');\n const playPauseBtn = document.querySelector('.bifa-play-pause-btn');\n const gallerySlider = document.querySelector('.bifa-gallery-slider');\n\n \/\/ Navigation buttons\n if (prevBtn) {\n prevBtn.addEventListener('click', () => {\n this.prevSlide();\n this.restartAutoplay();\n });\n }<\/p>\n<p> if (nextBtn) {\n nextBtn.addEventListener('click', () => {\n this.nextSlide();\n this.restartAutoplay();\n });\n }<\/p>\n<p> \/\/ Play\/Pause button\n if (playPauseBtn) {\n playPauseBtn.addEventListener('click', () => {\n this.togglePlayPause();\n });\n }<\/p>\n<p> \/\/ Dot navigation\n dots.forEach((dot, index) => {\n dot.addEventListener('click', () => {\n this.showSlide(index);\n this.restartAutoplay();\n });\n });<\/p>\n<p> \/\/ Thumbnail navigation\n thumbs.forEach((thumb, index) => {\n thumb.addEventListener('click', () => {\n this.showSlide(index);\n this.restartAutoplay();\n });\n });<\/p>\n<p> \/\/ Pause on hover\n if (gallerySlider) {\n gallerySlider.addEventListener('mouseenter', () => {\n if (this.config.isPlaying) this.stopSlideshow();\n });<\/p>\n<p> gallerySlider.addEventListener('mouseleave', () => {\n if (!this.config.isPlaying) this.startSlideshow();\n });\n }<\/p>\n<p> \/\/ Touch support\n this.setupTouchNavigation(gallerySlider);<\/p>\n<p> \/\/ Keyboard support\n this.setupKeyboardNavigation();\n },<\/p>\n<p> \/\/ Show specific slide\n showSlide(index) {\n const slides = document.querySelectorAll('.bifa-slide');\n const dots = document.querySelectorAll('.bifa-dot');\n const thumbs = document.querySelectorAll('.bifa-thumb-item');<\/p>\n<p> \/\/ Remove active classes\n slides.forEach(slide => slide.classList.remove('active'));\n dots.forEach(dot => dot.classList.remove('active'));\n thumbs.forEach(thumb => thumb.classList.remove('active'));<\/p>\n<p> \/\/ Add active classes\n if (slides[index]) slides[index].classList.add('active');\n if (dots[index]) dots[index].classList.add('active');\n if (thumbs[index]) thumbs[index].classList.add('active');<\/p>\n<p> this.config.currentSlide = index;\n },<\/p>\n<p> \/\/ Next slide\n nextSlide() {\n const slides = document.querySelectorAll('.bifa-slide');\n const nextIndex = (this.config.currentSlide + 1) % slides.length;\n this.showSlide(nextIndex);\n },<\/p>\n<p> \/\/ Previous slide\n prevSlide() {\n const slides = document.querySelectorAll('.bifa-slide');\n const prevIndex = (this.config.currentSlide - 1 + slides.length) % slides.length;\n this.showSlide(prevIndex);\n },<\/p>\n<p> \/\/ Start slideshow\n startSlideshow() {\n this.config.slideInterval = setInterval(() => {\n this.nextSlide();\n }, this.config.autoplayDelay);\n this.config.isPlaying = true;<\/p>\n<p> const playPauseBtn = document.querySelector('.bifa-play-pause-btn');\n if (playPauseBtn) playPauseBtn.classList.add('playing');\n },<\/p>\n<p> \/\/ Stop slideshow\n stopSlideshow() {\n if (this.config.slideInterval) {\n clearInterval(this.config.slideInterval);\n this.config.slideInterval = null;\n }\n this.config.isPlaying = false;<\/p>\n<p> const playPauseBtn = document.querySelector('.bifa-play-pause-btn');\n if (playPauseBtn) playPauseBtn.classList.remove('playing');\n },<\/p>\n<p> \/\/ Toggle play\/pause\n togglePlayPause() {\n if (this.config.isPlaying) {\n this.stopSlideshow();\n } else {\n this.startSlideshow();\n }\n },<\/p>\n<p> \/\/ Restart autoplay\n restartAutoplay() {\n if (this.config.isPlaying) {\n this.stopSlideshow();\n this.startSlideshow();\n }\n },<\/p>\n<p> \/\/ Setup touch navigation\n setupTouchNavigation(element) {\n if (!element) return;<\/p>\n<p> let touchStartX = 0;\n let touchEndX = 0;<\/p>\n<p> element.addEventListener('touchstart', (e) => {\n touchStartX = e.changedTouches[0].screenX;\n });<\/p>\n<p> element.addEventListener('touchend', (e) => {\n touchEndX = e.changedTouches[0].screenX;\n this.handleSwipe();\n });<\/p>\n<p> this.handleSwipe = () => {\n if (touchEndX < touchStartX - 50) {\n \/\/ Swipe left - next slide\n this.nextSlide();\n this.restartAutoplay();\n }\n if (touchEndX > touchStartX + 50) {\n \/\/ Swipe right - previous slide\n this.prevSlide();\n this.restartAutoplay();\n }\n };\n },<\/p>\n<p> \/\/ Setup keyboard navigation\n setupKeyboardNavigation() {\n document.addEventListener('keydown', (e) => {\n if (e.key === 'ArrowLeft') {\n this.prevSlide();\n this.restartAutoplay();\n } else if (e.key === 'ArrowRight') {\n this.nextSlide();\n this.restartAutoplay();\n } else if (e.key === ' ') {\n e.preventDefault();\n this.togglePlayPause();\n }\n });\n },<\/p>\n<p> \/\/ Preload images\n preloadImages() {\n const imageUrls = [\n '\/wp-content\/themes\/yootheme-child\/assets\/images\/Moments\/1.jpg?v=2',\n '\/wp-content\/themes\/yootheme-child\/assets\/images\/Moments\/2.jpg?v=2',\n '\/wp-content\/themes\/yootheme-child\/assets\/images\/Moments\/3.jpg?v=2',\n '\/wp-content\/themes\/yootheme-child\/assets\/images\/Moments\/4.jpg?v=2'\n ];<\/p>\n<p> imageUrls.forEach(url => {\n const img = new Image();\n img.src = url;\n });\n }\n};<\/p>\n<p>\/\/ Initialize when DOM is ready\ndocument.addEventListener('DOMContentLoaded', () => {\n BifaGallery.init();\n});\n<\/script><\/p>\n<p><\/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+ Premium Academy Block<\/title>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n \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&family=Cairo:wght@300;400;500;600;700;800&family=Tajawal:wght@300;400;500;700;800&display=swap\" rel=\"stylesheet\">\n<style>\n\/* ========= \u0413\u041b\u041e\u0411\u0410\u041b\u042c\u041d\u042b\u0415 \u041f\u0415\u0420\u0415\u041c\u0415\u041d\u041d\u042b\u0415 BIFA+ ========= *\/\n:root {\n \/* \u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430 BIFA+ *\/\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 --bifa-gray-light: #F8F9FA;\n --bifa-gray: #6C757D;<\/p>\n<p> \/* \u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0448\u0440\u0438\u0444\u0442\u044b BIFA+ *\/\n --bifa-font-heading: 'Montserrat', 'Cairo', sans-serif;\n --bifa-font-body: 'Poppins', 'Tajawal', sans-serif;\n --bifa-font-arabic: 'Cairo', 'Tajawal', 'GE SS Text', sans-serif;<\/p>\n<p> \/* \u041f\u0440\u0435\u043c\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0442\u0435\u043d\u0438 \u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u044b *\/\n --bifa-shadow-premium: 0 25px 80px rgba(10, 31, 68, 0.15);\n --bifa-shadow-hover: 0 35px 100px rgba(10, 31, 68, 0.2);\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 ========= *\/\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}<\/p>\n<p>*, *::before, *::after {\n box-sizing: border-box;\n}<\/p>\n<p>html {\n scroll-behavior: smooth;\n}<\/p>\n<p>body {\n font-family: var(--bifa-font-body);\n overflow-x: hidden;\n background: var(--bifa-bright-white);\n text-rendering: optimizeLegibility;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n color: var(--bifa-soft-black);\n}<\/p>\n<p>\/* ========= ACADEMY SECTION WRAPPER ========= *\/\n.bifa-academy-section-wrapper {\n width: 100vw;\n position: relative;\n left: 50%;\n margin-left: -50vw;\n background: transparent; \/* \u0411\u0435\u0437 \u0444\u043e\u043d\u0430 *\/\n overflow: hidden;\n}<\/p>\n<p>\/* ========= MAIN ACADEMY SECTION ========= *\/\n.bifa-academy-section {\n padding: 100px 20px 80px;\n position: relative;\n background: transparent;\n}<\/p>\n<p>\/* ========= ANIMATED BACKGROUND ELEMENTS ========= *\/\n.bifa-academy-bg-animation {\n position: absolute;\n width: 100%;\n height: 100%;\n overflow: hidden;\n z-index: 1;\n top: 0;\n left: 0;\n}<\/p>\n<p>\/* \u0417\u043e\u043b\u043e\u0442\u044b\u0435 \u0447\u0430\u0441\u0442\u0438\u0446\u044b BIFA+ *\/\n.bifa-academy-particle {\n position: absolute;\n width: 3px;\n height: 3px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n border-radius: 50%;\n animation: floatAcademy 20s infinite linear;\n box-shadow: 0 0 6px rgba(212, 175, 55, 0.2);\n opacity: 0.25;\n will-change: transform;\n}<\/p>\n<p>@keyframes floatAcademy {\n 0% {\n transform: translateY(100vh) translateX(0) rotate(0deg);\n opacity: 0;\n }\n 10% { opacity: 0.3; }\n 90% { opacity: 0.3; }\n 100% {\n transform: translateY(-100vh) translateX(70px) rotate(360deg);\n opacity: 0;\n }\n}<\/p>\n<p>\/* \u041f\u043b\u0430\u0432\u0430\u044e\u0449\u0438\u0435 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0444\u0438\u0433\u0443\u0440\u044b BIFA+ *\/\n.bifa-floating-shape {\n position: absolute;\n border-radius: 50%;\n filter: blur(120px);\n animation: morphFloatAcademy 25s ease-in-out infinite;\n pointer-events: none;\n opacity: 0.4;\n}<\/p>\n<p>.bifa-shape-academy-1 {\n width: 400px;\n height: 400px;\n background: radial-gradient(circle at 30% 30%, rgba(212, 175, 55, 0.07), transparent);\n top: -200px;\n right: -200px;\n}<\/p>\n<p>.bifa-shape-academy-2 {\n width: 350px;\n height: 350px;\n background: radial-gradient(circle at 70% 70%, rgba(10, 31, 68, 0.05), transparent);\n bottom: -175px;\n left: -175px;\n animation-delay: 8s;\n}<\/p>\n<p>.bifa-shape-academy-3 {\n width: 300px;\n height: 300px;\n background: radial-gradient(circle at 50% 50%, rgba(29, 97, 67, 0.06), transparent);\n top: 40%;\n left: 60%;\n animation-delay: 16s;\n}<\/p>\n<p>@keyframes morphFloatAcademy {\n 0%, 100% { \n transform: translate(0, 0) scale(1) rotate(0deg);\n filter: blur(120px);\n }\n 25% { \n transform: translate(100px, -80px) scale(1.2) rotate(90deg);\n filter: blur(140px);\n }\n 50% { \n transform: translate(-80px, 100px) scale(0.8) rotate(180deg);\n filter: blur(100px);\n }\n 75% { \n transform: translate(-100px, -60px) scale(1.1) rotate(270deg);\n filter: blur(130px);\n }\n}<\/p>\n<p>\/* ========= CONTAINER ========= *\/\n.bifa-academy-container {\n max-width: 1200px;\n margin: 0 auto;\n position: relative;\n z-index: 10;\n}<\/p>\n<p>\/* ========= SECTION TITLE - Premium Style ========= *\/\n.bifa-section-title-wrapper {\n text-align: center;\n margin-bottom: 80px;\n}<\/p>\n<p>.bifa-academy-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), #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n position: relative;\n animation: fadeInUp 1s ease-out 0.3s both;\n line-height: 1.2;\n margin-bottom: 20px;\n text-transform: uppercase;\n letter-spacing: -0.5px;\n}<\/p>\n<p>.bifa-academy-section-title::after {\n content: '';\n position: absolute;\n bottom: -15px;\n left: 50%;\n transform: translateX(-50%);\n width: 0;\n height: 4px;\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700);\n animation: expandWidth 0.8s ease-out 1s both;\n border-radius: 2px;\n}<\/p>\n<p>\/* ========= VIDEO CONTAINER - Premium Style ========= *\/\n.bifa-academy-video {\n margin-bottom: 60px;\n animation: fadeInUp 1s ease-out 0.5s both;\n}<\/p>\n<p>.bifa-video-wrapper {\n position: relative;\n width: 100%;\n max-width: 900px;\n margin: 0 auto;\n padding-bottom: 50%;\n border-radius: 25px;\n overflow: hidden;\n box-shadow: var(--bifa-shadow-premium);\n background: var(--bifa-gray-light);\n transform: scale(0.95);\n animation: scaleIn 0.8s ease-out 0.5s forwards;\n border: 2px solid rgba(212, 175, 55, 0.1);\n}<\/p>\n<p>.bifa-video-wrapper video {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.3s ease;\n}<\/p>\n<p>.bifa-video-wrapper:hover video {\n transform: scale(1.02);\n}<\/p>\n<p>\/* Video overlay effects *\/\n.bifa-video-wrapper::before {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(135deg, \n transparent 0%, \n rgba(212, 175, 55, 0.1) 100%\n );\n opacity: 0;\n transition: opacity 0.3s ease;\n z-index: 1;\n pointer-events: none;\n}<\/p>\n<p>.bifa-video-wrapper:hover::before {\n opacity: 1;\n}<\/p>\n<p>\/* ========= CONTENT CARD - Premium Style ========= *\/\n.bifa-academy-content {\n background: var(--bifa-bright-white);\n border-radius: 25px;\n padding: 60px 50px;\n box-shadow: var(--bifa-shadow-premium);\n animation: fadeInUp 1s ease-out 0.8s both;\n max-width: 100%;\n overflow: hidden;\n border: 1px solid rgba(212, 175, 55, 0.1);\n backdrop-filter: blur(10px);\n}<\/p>\n<p>.bifa-content-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 60px;\n margin-bottom: 50px;\n}<\/p>\n<p>.bifa-content-block {\n opacity: 0;\n animation: fadeInUp 0.8s ease-out forwards;\n}<\/p>\n<p>.bifa-content-block:nth-child(1) {\n animation-delay: 1s;\n}<\/p>\n<p>.bifa-content-block:nth-child(2) {\n animation-delay: 1.2s;\n}<\/p>\n<p>.bifa-content-block h3 {\n font-family: var(--bifa-font-heading);\n font-size: 1.8rem;\n font-weight: 800;\n color: var(--bifa-deep-navy);\n margin-bottom: 25px;\n position: relative;\n padding-left: 30px;\n line-height: 1.3;\n text-rendering: optimizeLegibility;\n}<\/p>\n<p>.bifa-content-block h3::before {\n content: '';\n position: absolute;\n left: 0;\n top: 50%;\n transform: translateY(-50%);\n width: 5px;\n height: 100%;\n max-height: 40px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n border-radius: 3px;\n box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);\n}<\/p>\n<p>.bifa-content-block p {\n font-family: var(--bifa-font-body);\n font-size: 1.1rem;\n line-height: 1.8;\n color: #4a5568;\n margin-bottom: 25px;\n text-align: left;\n max-width: 100%;\n}<\/p>\n<p>\/* ========= FEATURES LIST - Premium Style ========= *\/\n.bifa-features-list {\n list-style: none;\n margin-top: 30px;\n display: flex;\n flex-direction: column;\n gap: 20px;\n padding: 0;\n}<\/p>\n<p>.bifa-features-list li {\n display: flex;\n align-items: flex-start;\n font-family: var(--bifa-font-body);\n font-size: 1.05rem;\n color: var(--bifa-soft-black);\n line-height: 1.6;\n transition: var(--bifa-transition);\n opacity: 0;\n animation: slideIn 0.5s ease-out forwards;\n padding: 15px;\n background: rgba(248, 249, 250, 0.5);\n border-radius: 15px;\n border: 1px solid rgba(212, 175, 55, 0.1);\n}<\/p>\n<p>.bifa-features-list li:nth-child(1) {\n animation-delay: 1.2s;\n}<\/p>\n<p>.bifa-features-list li:nth-child(2) {\n animation-delay: 1.3s;\n}<\/p>\n<p>.bifa-features-list li:nth-child(3) {\n animation-delay: 1.4s;\n}<\/p>\n<p>.bifa-content-block:nth-child(2) .bifa-features-list li:nth-child(1) {\n animation-delay: 1.4s;\n}<\/p>\n<p>.bifa-content-block:nth-child(2) .bifa-features-list li:nth-child(2) {\n animation-delay: 1.5s;\n}<\/p>\n<p>.bifa-content-block:nth-child(2) .bifa-features-list li:nth-child(3) {\n animation-delay: 1.6s;\n}<\/p>\n<p>.bifa-features-list li:hover {\n color: var(--bifa-deep-navy);\n background: rgba(212, 175, 55, 0.1);\n border-color: rgba(212, 175, 55, 0.3);\n transform: translateX(5px);\n}<\/p>\n<p>.bifa-feature-icon {\n flex-shrink: 0;\n width: 45px;\n height: 45px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n border-radius: 15px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 18px;\n transition: var(--bifa-transition);\n box-shadow: var(--bifa-shadow-gold);\n}<\/p>\n<p>.bifa-feature-icon svg {\n width: 24px;\n height: 24px;\n fill: var(--bifa-deep-navy);\n stroke: var(--bifa-deep-navy);\n stroke-width: 1.5;\n}<\/p>\n<p>.bifa-features-list li:hover .bifa-feature-icon {\n transform: scale(1.1) rotate(5deg);\n box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);\n}<\/p>\n<p>.bifa-feature-text {\n flex: 1;\n padding-top: 10px;\n font-weight: 500;\n}<\/p>\n<p>\/* ========= CALL TO ACTION - Premium Style ========= *\/\n.bifa-academy-cta {\n background: linear-gradient(135deg, var(--bifa-deep-navy), #162e5a);\n color: var(--bifa-bright-white);\n padding: 50px 40px;\n border-radius: 25px;\n text-align: center;\n margin-top: 50px;\n box-shadow: var(--bifa-shadow-premium);\n animation: fadeInUp 1s ease-out 1.4s both;\n position: relative;\n overflow: hidden;\n border: 2px solid rgba(212, 175, 55, 0.2);\n}<\/p>\n<p>.bifa-academy-cta::before {\n content: '';\n position: absolute;\n top: -50%;\n right: -50%;\n width: 100%;\n height: 100%;\n background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 60%);\n animation: float 8s ease-in-out infinite;\n}<\/p>\n<p>.bifa-cta-title {\n font-family: var(--bifa-font-heading);\n font-size: 2rem;\n font-weight: 800;\n margin-bottom: 20px;\n line-height: 1.3;\n position: relative;\n z-index: 1;\n background: linear-gradient(135deg, var(--bifa-bright-white), #f0f0f0);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n}<\/p>\n<p>.bifa-cta-text {\n font-family: var(--bifa-font-body);\n font-size: 1.2rem;\n line-height: 1.6;\n max-width: 800px;\n margin: 0 auto 35px;\n position: relative;\n z-index: 1;\n color: rgba(255, 255, 255, 0.9);\n}<\/p>\n<p>.bifa-cta-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 12px;\n padding: 18px 45px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n color: var(--bifa-deep-navy);\n text-decoration: none;\n border-radius: 50px;\n font-family: var(--bifa-font-heading);\n font-weight: 700;\n font-size: 1.1rem;\n transition: var(--bifa-transition);\n box-shadow: var(--bifa-shadow-gold);\n position: relative;\n overflow: hidden;\n z-index: 1;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}<\/p>\n<p>.bifa-cta-button::before {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);\n transition: left 0.5s ease;\n z-index: -1;\n}<\/p>\n<p>.bifa-cta-button:hover {\n transform: translateY(-3px);\n box-shadow: 0 8px 30px rgba(212, 175, 55, 0.4);\n background: linear-gradient(135deg, #ffd700, var(--bifa-heritage-gold));\n}<\/p>\n<p>.bifa-cta-button:hover::before {\n left: 100%;\n}<\/p>\n<p>\/* ========= ANIMATIONS ========= *\/\n@keyframes slideIn {\n to {\n opacity: 1;\n }\n}<\/p>\n<p>@keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>@keyframes expandWidth {\n from {\n width: 0;\n }\n to {\n width: 120px;\n }\n}<\/p>\n<p>@keyframes scaleIn {\n to {\n transform: scale(1);\n }\n}<\/p>\n<p>@keyframes float {\n 0%, 100% {\n transform: translate(0, 0);\n }\n 50% {\n transform: translate(-20px, 20px);\n }\n}<\/p>\n<p>\/* ========= RESPONSIVE ========= *\/\n@media (max-width: 968px) {\n .bifa-content-grid {\n grid-template-columns: 1fr;\n gap: 50px;\n }<\/p>\n<p> .bifa-video-wrapper {\n padding-bottom: 56.25%;\n }<\/p>\n<p> .bifa-content-block {\n animation-delay: 1s !important;\n }<\/p>\n<p> .bifa-features-list li {\n animation-delay: 0s !important;\n animation: slideIn 0.5s ease-out forwards;\n }\n}<\/p>\n<p>@media (max-width: 768px) {\n .bifa-academy-section {\n padding: 80px 20px 60px;\n }<\/p>\n<p> .bifa-academy-content {\n padding: 40px 30px;\n }<\/p>\n<p> .bifa-content-block h3 {\n font-size: 1.6rem;\n padding-left: 25px;\n }<\/p>\n<p> .bifa-academy-section-title {\n font-size: 2rem;\n }<\/p>\n<p> .bifa-feature-icon {\n width: 40px;\n height: 40px;\n margin-right: 15px;\n }<\/p>\n<p> .bifa-feature-icon svg {\n width: 20px;\n height: 20px;\n }<\/p>\n<p> .bifa-content-grid {\n gap: 40px;\n }<\/p>\n<p> .bifa-academy-cta {\n padding: 40px 30px;\n }<\/p>\n<p> .bifa-cta-title {\n font-size: 1.7rem;\n }<\/p>\n<p> .bifa-cta-text {\n font-size: 1.1rem;\n }\n}<\/p>\n<p>@media (max-width: 480px) {\n .bifa-academy-section {\n padding: 60px 15px 50px;\n }<\/p>\n<p> .bifa-academy-content {\n padding: 30px 20px;\n }<\/p>\n<p> .bifa-academy-section-title {\n font-size: 1.8rem;\n }<\/p>\n<p> .bifa-content-block h3 {\n font-size: 1.4rem;\n padding-left: 20px;\n }<\/p>\n<p> .bifa-content-block p {\n font-size: 1rem;\n }<\/p>\n<p> .bifa-cta-title {\n font-size: 1.5rem;\n }<\/p>\n<p> .bifa-cta-text {\n font-size: 1rem;\n }<\/p>\n<p> .bifa-cta-button {\n padding: 15px 35px;\n font-size: 1rem;\n }<\/p>\n<p> .bifa-feature-icon {\n width: 35px;\n height: 35px;\n margin-right: 12px;\n }<\/p>\n<p> .bifa-feature-icon svg {\n width: 18px;\n height: 18px;\n }<\/p>\n<p> .bifa-features-list li {\n font-size: 0.95rem;\n padding: 12px;\n }<\/p>\n<p> .bifa-features-list {\n gap: 15px;\n }<\/p>\n<p> .bifa-academy-cta {\n padding: 35px 25px;\n }\n}\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"bifa-academy-section-wrapper\">\n <\/p>\n<section class=\"bifa-academy-section\">\n <\/p>\n<div class=\"bifa-academy-bg-animation\">\n <\/p>\n<div class=\"bifa-floating-shape bifa-shape-academy-1\"><\/div>\n<div class=\"bifa-floating-shape bifa-shape-academy-2\"><\/div>\n<div class=\"bifa-floating-shape bifa-shape-academy-3\"><\/div>\n<p> \n <\/div>\n<div class=\"bifa-academy-container\">\n<div class=\"bifa-section-title-wrapper\">\n<h2 class=\"bifa-academy-section-title\">Academia BIFA+: Futuro do Futebol<\/h2>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"bifa-academy-video\">\n<div class=\"bifa-video-wrapper\">\n <video autoplay loop muted playsinline><source src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Futuristic_Classroom_Video_Ready.webm\" type=\"video\/webm\"><source src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Futuristic_Classroom_Video_Ready.mp4\" type=\"video\/mp4\"><\/video>\n <\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"bifa-academy-content\">\n<div class=\"bifa-content-grid\">\n<div class=\"bifa-content-block\">\n<h3>Sistema de treinamento revolucion\u00e1rio<\/h3>\n<p>\n BIFA+ creates a revolutionary system for training footballers, with the ability to analyze every aspect of the game<br \/>\n by both top-tier coaches and artificial intelligence. Our academy uses<br \/>\n machine learning to create individual development programs that take into account the unique characteristics of each player.\n <\/p>\n<ul class=\"bifa-features-list\">\n<li>\n <span class=\"bifa-feature-icon\"><br \/>\n <svg viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\">\n <path d=\"M21 10.12h-6.78l2.74-2.82c-2.73-2.7-7.15-2.8-9.88-.1-2.73 2.71-2.73 7.08 0 9.79 2.73 2.71 7.15 2.71 9.88 0C18.32 15.65 19 14.08 19 12.1h2c0 1.98-.88 4.55-2.64 6.29-3.51 3.48-9.21 3.48-12.72 0-3.5-3.47-3.53-9.11-.02-12.58 3.51-3.47 9.14-3.47 12.65 0L21 3v7.12z\"\/>\n <circle cx=\"12\" cy=\"12\" r=\"3\"\/>\n <\/svg><br \/>\n <\/span><br \/>\n <span class=\"bifa-feature-text\">An\u00e1lise inteligente dos dados do jogo<\/span>\n <\/li>\n<li>\n <span class=\"bifa-feature-icon\"><br \/>\n <svg viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\n <circle cx=\"12\" cy=\"12\" r=\"3\"\/>\n <path d=\"M12 2v3M12 19v3M2 12h3M19 12h3\"\/>\n <\/svg><br \/>\n <\/span><br \/>\n <span class=\"bifa-feature-text\">Programas de treinamento adaptativo<\/span>\n <\/li>\n<li>\n <span class=\"bifa-feature-icon\"><br \/>\n <svg viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\">\n <path d=\"M3.5 18.5L9 13l4 4L20.5 6\"\/>\n <path d=\"M20.5 6h-5M20.5 6v5\"\/>\n <\/svg><br \/>\n <\/span><br \/>\n <span class=\"bifa-feature-text\">Monitoramento cont\u00ednuo do progresso<\/span>\n <\/li>\n<\/ul><\/div>\n<div class=\"bifa-content-block\">\n<h3>An\u00e1lise inteligente para treinadores<\/h3>\n<p>\n The artificial intelligence system processes training and match data in real-time,<br \/>\n providing coaches with detailed information about player progress, tactical patterns and areas for improvement.<br \/>\n Personalized dashboards help make decisions based on objective data.\n <\/p>\n<ul class=\"bifa-features-list\">\n<li>\n <span class=\"bifa-feature-icon\"><br \/>\n <svg viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\">\n <path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\"\/>\n <\/svg><br \/>\n <\/span><br \/>\n <span class=\"bifa-feature-text\">An\u00e1lise de desempenho em tempo real<\/span>\n <\/li>\n<li>\n <span class=\"bifa-feature-icon\"><br \/>\n <svg viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\">\n <circle cx=\"12\" cy=\"8\" r=\"5\"\/>\n <path d=\"M20 21a8 8 0 1 0-16 0\"\/>\n <circle cx=\"8\" cy=\"19\" r=\"1\"\/>\n <circle cx=\"12\" cy=\"19\" r=\"1\"\/>\n <circle cx=\"16\" cy=\"19\" r=\"1\"\/>\n <\/svg><br \/>\n <\/span><br \/>\n <span class=\"bifa-feature-text\">Tomada de decis\u00e3o orientada por dados<\/span>\n <\/li>\n<li>\n <span class=\"bifa-feature-icon\"><br \/>\n <svg viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"14\" rx=\"2\"\/>\n <path d=\"M7 21h10M12 17v4\"\/>\n <path d=\"M8 8h8M8 12h5\"\/>\n <\/svg><br \/>\n <\/span><br \/>\n <span class=\"bifa-feature-text\">Pain\u00e9is de treinamento personalizados<\/span>\n <\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"bifa-academy-cta\">\n<h3 class=\"bifa-cta-title\">Junte-se \u00e0 revolu\u00e7\u00e3o do futebol movida a IA<\/h3>\n<p class=\"bifa-cta-text\">\n Experience the future of football training with BIFA+. Our cutting-edge AI technology<br \/>\n combined with world-class coaching creates unprecedented opportunities for player development.\n <\/p>\n<p> <a href=\"https:\/\/bifa.ai\/academy-ai\/\" class=\"bifa-cta-button\"><br \/>\n <span>Descubra a Academia<\/span><br \/>\n <svg width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M5 12H19M19 12L12 5M19 12L12 19\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg><br \/>\n <\/a>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<\/div>\n<p><script>\n\/\/ BIFA+ Premium Academy Module\nconst BifaAcademy = {\n \/\/ Configuration\n config: {\n particleCount: 10,\n animationDelay: 100\n },<\/p>\n<p> \/\/ Initialize\n init() {\n this.createParticles();\n this.setupVideoOptimization();\n this.setupIntersectionObserver();\n },<\/p>\n<p> \/\/ Create golden particles\n createParticles() {\n const particlesContainer = document.querySelector('.bifa-academy-bg-animation');\n if (!particlesContainer) return;<\/p>\n<p> for (let i = 0; i < this.config.particleCount; i++) {\n const particle = document.createElement('div');\n particle.className = 'bifa-academy-particle';\n particle.style.left = Math.random() * 100 + '%';\n particle.style.animationDelay = Math.random() * 18 + 's';\n particle.style.animationDuration = (16 + Math.random() * 8) + '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\n \/\/ Setup video optimization\n setupVideoOptimization() {\n const video = document.querySelector('.bifa-video-wrapper video');\n if (!video) return;\n\n \/\/ Ensure video plays smoothly\n video.addEventListener('loadstart', () => {\n video.play().catch(e => {\n console.log('Video autoplay prevented:', e);\n });\n });<\/p>\n<p> \/\/ Handle video errors gracefully\n video.addEventListener('error', (e) => {\n console.warn('Video loading error:', e);\n \/\/ Could add fallback image here\n });<\/p>\n<p> \/\/ Optimize performance\n video.addEventListener('loadeddata', () => {\n video.currentTime = 0;\n });\n },<\/p>\n<p> \/\/ Setup intersection observer for animations\n setupIntersectionObserver() {\n if (!window.IntersectionObserver) return;<\/p>\n<p> const observerOptions = {\n threshold: 0.1,\n rootMargin: '50px 0px'\n };<\/p>\n<p> const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('animate-in');\n }\n });\n }, observerOptions);<\/p>\n<p> \/\/ Observe animated elements\n const animatedElements = document.querySelectorAll(\n '.bifa-content-block, .bifa-features-list li, .bifa-academy-cta'\n );<\/p>\n<p> animatedElements.forEach(el => {\n observer.observe(el);\n });\n },<\/p>\n<p> \/\/ Utility method for smooth scrolling to elements\n scrollToSection(targetId) {\n const element = document.getElementById(targetId);\n if (element) {\n element.scrollIntoView({\n behavior: 'smooth',\n block: 'start'\n });\n }\n }\n};<\/p>\n<p>\/\/ Initialize when DOM is ready\ndocument.addEventListener('DOMContentLoaded', () => {\n BifaAcademy.init();\n});<\/p>\n<p>\/\/ Performance optimization - pause animations when not visible\ndocument.addEventListener('visibilitychange', () => {\n const particles = document.querySelectorAll('.bifa-academy-particle');\n const shapes = document.querySelectorAll('.bifa-floating-shape');<\/p>\n<p> if (document.hidden) {\n particles.forEach(p => p.style.animationPlayState = 'paused');\n shapes.forEach(s => s.style.animationPlayState = 'paused');\n } else {\n particles.forEach(p => p.style.animationPlayState = 'running');\n shapes.forEach(s => s.style.animationPlayState = 'running');\n }\n});\n<\/script><\/p>\n<p><\/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+ Featured Stories \/ Ambassadors Block – Dynamic<\/title>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n \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&family=Cairo:wght@300;400;500;600;700;800&family=Tajawal:wght@300;400;500;700;800&display=swap\" rel=\"stylesheet\">\n<style>\n\/* ========= \u0413\u041b\u041e\u0411\u0410\u041b\u042c\u041d\u042b\u0415 \u041f\u0415\u0420\u0415\u041c\u0415\u041d\u041d\u042b\u0415 BIFA+ ========= *\/\n:root {\n \/* \u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430 BIFA+ *\/\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 --bifa-gray-light: #F8F9FA;\n --bifa-gray: #6C757D;<\/p>\n<p> \/* \u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0448\u0440\u0438\u0444\u0442\u044b BIFA+ *\/\n --bifa-font-heading: 'Montserrat', 'Cairo', sans-serif;\n --bifa-font-body: 'Poppins', 'Tajawal', sans-serif;\n --bifa-font-arabic: 'Cairo', 'Tajawal', 'GE SS Text', sans-serif;<\/p>\n<p> \/* \u041f\u0440\u0435\u043c\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0442\u0435\u043d\u0438 \u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u044b *\/\n --bifa-shadow-premium: 0 25px 80px rgba(10, 31, 68, 0.15);\n --bifa-shadow-hover: 0 35px 100px rgba(10, 31, 68, 0.2);\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 ========= *\/\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}<\/p>\n<p>html {\n scroll-behavior: smooth;\n}<\/p>\n<p>body {\n font-family: var(--bifa-font-body);\n overflow-x: hidden;\n background: var(--bifa-bright-white);\n text-rendering: optimizeLegibility;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n color: var(--bifa-soft-black);\n}<\/p>\n<p>\/* ========= LOADING STATE ========= *\/\n.bifa-loading-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 400px;\n gap: 20px;\n}<\/p>\n<p>.bifa-loading-spinner {\n width: 60px;\n height: 60px;\n border: 4px solid rgba(212, 175, 55, 0.1);\n border-top: 4px solid var(--bifa-heritage-gold);\n border-radius: 50%;\n animation: spin 1s linear infinite;\n}<\/p>\n<p>@keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}<\/p>\n<p>.bifa-loading-text {\n font-family: var(--bifa-font-heading);\n font-size: 1.2rem;\n color: var(--bifa-gray);\n animation: pulse 1.5s ease-in-out infinite;\n}<\/p>\n<p>@keyframes pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.5; }\n}<\/p>\n<p>\/* ========= ERROR STATE ========= *\/\n.bifa-error-container {\n background: #fff3cd;\n border: 2px solid #ffc107;\n border-radius: 15px;\n padding: 30px;\n margin: 40px 20px;\n text-align: center;\n}<\/p>\n<p>.bifa-error-icon {\n font-size: 3rem;\n margin-bottom: 20px;\n}<\/p>\n<p>.bifa-error-message {\n font-family: var(--bifa-font-heading);\n font-size: 1.3rem;\n color: #856404;\n margin-bottom: 15px;\n}<\/p>\n<p>.bifa-error-details {\n font-family: var(--bifa-font-body);\n color: #856404;\n margin-bottom: 20px;\n}<\/p>\n<p>.bifa-retry-button {\n display: inline-block;\n padding: 12px 30px;\n background: var(--bifa-heritage-gold);\n color: var(--bifa-deep-navy);\n border: none;\n border-radius: 50px;\n font-family: var(--bifa-font-heading);\n font-weight: 700;\n cursor: pointer;\n transition: var(--bifa-transition);\n}<\/p>\n<p>.bifa-retry-button:hover {\n transform: translateY(-2px);\n box-shadow: var(--bifa-shadow-gold);\n}<\/p>\n<p>\/* ========= EMPTY STATE ========= *\/\n.bifa-empty-container {\n text-align: center;\n padding: 60px 20px;\n}<\/p>\n<p>.bifa-empty-icon {\n font-size: 4rem;\n color: var(--bifa-gray);\n margin-bottom: 20px;\n}<\/p>\n<p>.bifa-empty-message {\n font-family: var(--bifa-font-heading);\n font-size: 1.5rem;\n color: var(--bifa-gray);\n margin-bottom: 10px;\n}<\/p>\n<p>.bifa-empty-submessage {\n font-family: var(--bifa-font-body);\n color: var(--bifa-gray);\n margin-bottom: 30px;\n}<\/p>\n<p>\/* ========= AMBASSADORS SECTION WRAPPER ========= *\/\n.bifa-ambassadors-section-wrapper {\n width: 100vw;\n position: relative;\n left: 50%;\n margin-left: -50vw;\n background: transparent;\n overflow: hidden;\n}<\/p>\n<p>\/* ========= MAIN AMBASSADORS SECTION ========= *\/\n.bifa-ambassadors-section {\n padding: 100px 20px 100px;\n position: relative;\n background: transparent;\n}<\/p>\n<p>\/* ========= ANIMATED BACKGROUND ELEMENTS ========= *\/\n.bifa-ambassadors-bg-animation {\n position: absolute;\n width: 100%;\n height: 100%;\n overflow: hidden;\n z-index: 1;\n top: 0;\n left: 0;\n}<\/p>\n<p>\/* \u0417\u043e\u043b\u043e\u0442\u044b\u0435 \u0447\u0430\u0441\u0442\u0438\u0446\u044b BIFA+ *\/\n.bifa-ambassadors-particle {\n position: absolute;\n width: 3px;\n height: 3px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n border-radius: 50%;\n animation: floatAmbassadors 20s infinite linear;\n box-shadow: 0 0 6px rgba(212, 175, 55, 0.2);\n opacity: 0.25;\n will-change: transform;\n}<\/p>\n<p>@keyframes floatAmbassadors {\n 0% {\n transform: translateY(100vh) translateX(0) rotate(0deg);\n opacity: 0;\n }\n 10% { opacity: 0.3; }\n 90% { opacity: 0.3; }\n 100% {\n transform: translateY(-100vh) translateX(70px) rotate(360deg);\n opacity: 0;\n }\n}<\/p>\n<p>\/* \u041f\u043b\u0430\u0432\u0430\u044e\u0449\u0438\u0435 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0444\u0438\u0433\u0443\u0440\u044b BIFA+ *\/\n.bifa-floating-shape-amb {\n position: absolute;\n border-radius: 50%;\n filter: blur(120px);\n animation: morphFloatAmbassadors 25s ease-in-out infinite;\n pointer-events: none;\n opacity: 0.4;\n}<\/p>\n<p>.bifa-shape-ambassadors-1 {\n width: 400px;\n height: 400px;\n background: radial-gradient(circle at 30% 30%, rgba(212, 175, 55, 0.07), transparent);\n top: -200px;\n right: -200px;\n}<\/p>\n<p>.bifa-shape-ambassadors-2 {\n width: 350px;\n height: 350px;\n background: radial-gradient(circle at 70% 70%, rgba(10, 31, 68, 0.05), transparent);\n bottom: -175px;\n left: -175px;\n animation-delay: 8s;\n}<\/p>\n<p>.bifa-shape-ambassadors-3 {\n width: 300px;\n height: 300px;\n background: radial-gradient(circle at 50% 50%, rgba(29, 97, 67, 0.06), transparent);\n top: 40%;\n left: 60%;\n animation-delay: 16s;\n}<\/p>\n<p>@keyframes morphFloatAmbassadors {\n 0%, 100% { \n transform: translate(0, 0) scale(1) rotate(0deg);\n filter: blur(120px);\n }\n 25% { \n transform: translate(100px, -80px) scale(1.2) rotate(90deg);\n filter: blur(140px);\n }\n 50% { \n transform: translate(-80px, 100px) scale(0.8) rotate(180deg);\n filter: blur(100px);\n }\n 75% { \n transform: translate(-100px, -60px) scale(1.1) rotate(270deg);\n filter: blur(130px);\n }\n}<\/p>\n<p>\/* ========= CONTAINER ========= *\/\n.bifa-ambassadors-container {\n max-width: 1200px;\n margin: 0 auto;\n position: relative;\n z-index: 10;\n}<\/p>\n<p>\/* ========= SECTION TITLE - Premium Style ========= *\/\n.bifa-ambassadors-title-wrapper {\n text-align: center;\n margin-bottom: 80px;\n}<\/p>\n<p>.bifa-ambassadors-section-title {\n font-family: var(--bifa-font-heading) !important;\n font-size: clamp(2.5rem, 4vw, 3.5rem);\n font-weight: 900 !important;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent !important;\n position: relative;\n animation: fadeInUp 1s ease-out 0.3s both;\n line-height: 1.2;\n margin-bottom: 20px;\n text-transform: uppercase;\n letter-spacing: -0.5px;\n text-shadow: 0 2px 4px rgba(212, 175, 55, 0.1);\n}<\/p>\n<p>.bifa-ambassadors-section-title::after {\n content: '';\n position: absolute;\n bottom: -15px;\n left: 50%;\n transform: translateX(-50%);\n width: 0;\n height: 4px;\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700);\n animation: expandWidth 0.8s ease-out 1s both;\n border-radius: 2px;\n}<\/p>\n<p>.bifa-ambassadors-subtitle {\n font-family: var(--bifa-font-body) !important;\n font-size: 1.3rem;\n font-weight: 600 !important;\n color: var(--bifa-gray) !important;\n margin-top: 30px;\n animation: fadeInUp 1s ease-out 0.5s both;\n line-height: 1.6;\n max-width: 700px;\n margin-left: auto;\n margin-right: auto;\n}<\/p>\n<p>\/* ========= JOIN US BUTTONS SECTION ========= *\/\n.bifa-join-buttons-section {\n text-align: center;\n margin: 60px auto;\n padding: 40px 20px;\n background: linear-gradient(135deg, rgba(212, 175, 55, 0.05), transparent);\n border-radius: 20px;\n animation: fadeInUp 1s ease-out 0.7s both;\n max-width: 100%;\n}<\/p>\n<p>.bifa-join-buttons-container {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 20px;\n flex-wrap: wrap;\n margin: 30px auto 0;\n max-width: 100%;\n}<\/p>\n<p>.bifa-join-button {\n all: initial;\n font-family: 'Montserrat', sans-serif !important;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n padding: 18px 35px !important;\n background: linear-gradient(135deg, #0A1F44, #162e5a) !important;\n color: #FFFFFF !important;\n text-decoration: none !important;\n border-radius: 50px;\n font-weight: 700 !important;\n font-size: 1rem !important;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n box-shadow: 0 15px 40px rgba(10, 31, 68, 0.2), \n 0 5px 15px rgba(10, 31, 68, 0.15);\n position: relative;\n overflow: hidden;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n border: 2px solid transparent !important;\n cursor: pointer !important;\n white-space: nowrap;\n text-align: center;\n box-sizing: border-box;\n}<\/p>\n<p>.bifa-join-button:hover {\n transform: translateY(-3px) scale(1.02);\n box-shadow: 0 20px 50px rgba(10, 31, 68, 0.3), \n 0 10px 20px rgba(10, 31, 68, 0.2);\n background: linear-gradient(135deg, #162e5a, #0A1F44) !important;\n border-color: rgba(212, 175, 55, 0.3) !important;\n}<\/p>\n<p>.bifa-join-button::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0;\n height: 0;\n background: radial-gradient(circle, rgba(212, 175, 55, 0.3), transparent);\n transition: all 0.5s ease;\n transform: translate(-50%, -50%);\n}<\/p>\n<p>.bifa-join-button:hover::before {\n width: 100%;\n height: 100%;\n}<\/p>\n<p>.bifa-join-button svg {\n width: 18px;\n height: 18px;\n fill: currentColor;\n flex-shrink: 0;\n}<\/p>\n<p>\/* ========= AMBASSADORS GRID ========= *\/\n.bifa-ambassadors-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 40px;\n margin-bottom: 60px;\n position: relative;\n transition: max-height 0.6s ease-out;\n}<\/p>\n<p>\/* Hide cards beyond the first 3 by default *\/\n.bifa-ambassador-card:nth-child(n+4) {\n display: none;\n opacity: 0;\n}<\/p>\n<p>\/* Show all cards when expanded *\/\n.bifa-ambassadors-grid.expanded .bifa-ambassador-card:nth-child(n+4) {\n display: block;\n animation: fadeInUp 0.8s ease-out forwards;\n}<\/p>\n<p>\/* Stagger animations for expanded cards *\/\n.bifa-ambassadors-grid.expanded .bifa-ambassador-card:nth-child(4) {\n animation-delay: 0.1s;\n}<\/p>\n<p>.bifa-ambassadors-grid.expanded .bifa-ambassador-card:nth-child(5) {\n animation-delay: 0.2s;\n}<\/p>\n<p>.bifa-ambassadors-grid.expanded .bifa-ambassador-card:nth-child(6) {\n animation-delay: 0.3s;\n}<\/p>\n<p>\/* ========= AMBASSADOR CARD - Premium Style ========= *\/\n.bifa-ambassador-card {\n background: var(--bifa-bright-white) !important;\n border-radius: 25px;\n overflow: hidden;\n box-shadow: var(--bifa-shadow-premium);\n transition: var(--bifa-transition);\n animation: fadeInUp 1s ease-out both;\n border: 1px solid rgba(212, 175, 55, 0.1);\n position: relative;\n cursor: pointer;\n text-decoration: none;\n color: inherit;\n display: block;\n}<\/p>\n<p>.bifa-ambassador-card:nth-child(1) {\n animation-delay: 0.8s;\n}<\/p>\n<p>.bifa-ambassador-card:nth-child(2) {\n animation-delay: 1s;\n}<\/p>\n<p>.bifa-ambassador-card:nth-child(3) {\n animation-delay: 1.2s;\n}<\/p>\n<p>.bifa-ambassador-card:hover {\n transform: translateY(-10px);\n box-shadow: var(--bifa-shadow-hover);\n border-color: rgba(212, 175, 55, 0.3);\n}<\/p>\n<p>\/* Ambassador Image Container *\/\n.bifa-ambassador-image {\n position: relative;\n width: 100%;\n height: 300px;\n overflow: hidden;\n background: linear-gradient(135deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);\n background-size: 200% 100%;\n}<\/p>\n<p>.bifa-ambassador-image.loading {\n animation: loading 2s infinite linear;\n}<\/p>\n<p>.bifa-ambassador-image img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n transition: transform 0.5s ease;\n}<\/p>\n<p>.bifa-ambassador-card:hover .bifa-ambassador-image img {\n transform: scale(1.1);\n}<\/p>\n<p>\/* No image placeholder *\/\n.bifa-ambassador-no-image {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(10, 31, 68, 0.05));\n}<\/p>\n<p>.bifa-ambassador-no-image svg {\n width: 80px;\n height: 80px;\n color: var(--bifa-gray);\n opacity: 0.5;\n}<\/p>\n<p>\/* Gold Overlay Effect *\/\n.bifa-ambassador-image::after {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(180deg, \n transparent 50%, \n rgba(10, 31, 68, 0.7) 100%\n );\n opacity: 0;\n transition: opacity 0.3s ease;\n}<\/p>\n<p>.bifa-ambassador-card:hover .bifa-ambassador-image::after {\n opacity: 1;\n}<\/p>\n<p>\/* Country Flag *\/\n.bifa-ambassador-country {\n position: absolute;\n top: 20px;\n left: 20px;\n font-size: 32px;\n z-index: 2;\n background: rgba(255, 255, 255, 0.9);\n width: 48px;\n height: 48px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}<\/p>\n<p>\/* Ambassador Content *\/\n.bifa-ambassador-content {\n padding: 35px 30px;\n position: relative;\n}<\/p>\n<p>.bifa-ambassador-name {\n font-family: var(--bifa-font-heading) !important;\n font-size: 1.5rem;\n font-weight: 900 !important;\n color: var(--bifa-deep-navy) !important;\n margin-bottom: 8px;\n line-height: 1.2;\n transition: color 0.3s ease;\n}<\/p>\n<p>.bifa-ambassador-card:hover .bifa-ambassador-name {\n color: var(--bifa-heritage-gold) !important;\n}<\/p>\n<p>.bifa-ambassador-role {\n font-family: var(--bifa-font-body) !important;\n font-size: 1rem;\n font-weight: 700 !important;\n color: var(--bifa-heritage-gold) !important;\n margin-bottom: 8px;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}<\/p>\n<p>.bifa-ambassador-organization {\n font-family: var(--bifa-font-body) !important;\n font-size: 0.95rem;\n font-weight: 500 !important;\n color: var(--bifa-gray) !important;\n margin-bottom: 20px;\n}<\/p>\n<p>.bifa-ambassador-quote {\n font-family: var(--bifa-font-body) !important;\n font-size: 1.05rem;\n font-weight: 500 !important;\n line-height: 1.7;\n color: #4a5568 !important;\n font-style: italic;\n position: relative;\n padding-left: 25px;\n}<\/p>\n<p>.bifa-ambassador-quote::before {\n content: '\"';\n position: absolute;\n left: 0;\n top: -5px;\n font-size: 2.5rem;\n color: var(--bifa-heritage-gold);\n font-family: var(--bifa-font-heading);\n font-weight: 800;\n opacity: 0.3;\n}<\/p>\n<p>\/* Gold Badge for Special Ambassadors *\/\n.bifa-ambassador-badge {\n position: absolute;\n top: 20px;\n right: 20px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n color: var(--bifa-deep-navy);\n padding: 8px 16px;\n border-radius: 50px;\n font-family: var(--bifa-font-heading);\n font-size: 0.75rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n box-shadow: var(--bifa-shadow-gold);\n z-index: 2;\n}<\/p>\n<p>\/* Featured badge style *\/\n.bifa-ambassador-badge.featured {\n background: linear-gradient(135deg, #ff6b6b, #ff4757);\n color: white;\n}<\/p>\n<p>\/* ========= VIEW ALL BUTTON ========= *\/\n.bifa-ambassadors-cta {\n text-align: center;\n margin-top: 60px;\n animation: fadeInUp 1s ease-out 1.2s both;\n}<\/p>\n<p>.bifa-view-all-button {\n all: initial;\n font-family: 'Montserrat', sans-serif !important;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 12px;\n padding: 20px 50px !important;\n background: linear-gradient(135deg, #0A1F44, #162e5a) !important;\n color: #FFFFFF !important;\n text-decoration: none !important;\n border-radius: 50px;\n font-weight: 800 !important;\n font-size: 1.15rem !important;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n box-shadow: 0 25px 60px rgba(10, 31, 68, 0.3), \n 0 10px 20px rgba(10, 31, 68, 0.2),\n inset 0 -2px 4px rgba(0, 0, 0, 0.1);\n position: relative;\n overflow: hidden;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n border: 2px solid rgba(212, 175, 55, 0.2) !important;\n cursor: pointer !important;\n}<\/p>\n<p>.bifa-view-all-button:hover {\n transform: translateY(-3px);\n box-shadow: 0 30px 80px rgba(10, 31, 68, 0.4), \n 0 15px 30px rgba(10, 31, 68, 0.3);\n background: linear-gradient(135deg, #162e5a, var(--bifa-deep-navy)) !important;\n}<\/p>\n<p>.bifa-button-text {\n font-weight: 700 !important;\n color: #FFFFFF !important;\n}<\/p>\n<p>.bifa-ambassador-count {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n color: var(--bifa-deep-navy) !important;\n width: 32px;\n height: 32px;\n border-radius: 50%;\n font-size: 1rem !important;\n font-weight: 900 !important;\n margin-left: 10px;\n}<\/p>\n<p>\/* ========= ANIMATIONS ========= *\/\n@keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>@keyframes expandWidth {\n from {\n width: 0;\n }\n to {\n width: 120px;\n }\n}<\/p>\n<p>@keyframes loading {\n 0% {\n background-position: 200% 0;\n }\n 100% {\n background-position: -200% 0;\n }\n}<\/p>\n<p>\/* ========= RESPONSIVE ========= *\/\n@media (max-width: 1024px) {\n .bifa-ambassadors-grid {\n grid-template-columns: repeat(2, 1fr);\n gap: 35px;\n }<\/p>\n<p> .bifa-ambassador-card:nth-child(n+3) {\n display: none;\n opacity: 0;\n }<\/p>\n<p> .bifa-ambassadors-grid.expanded .bifa-ambassador-card:nth-child(n+3) {\n display: block;\n animation: fadeInUp 0.8s ease-out forwards;\n }\n}<\/p>\n<p>@media (max-width: 768px) {\n .bifa-ambassadors-section {\n padding: 80px 15px 60px;\n }<\/p>\n<p> .bifa-ambassadors-container {\n padding: 0 10px;\n }<\/p>\n<p> .bifa-ambassadors-grid {\n grid-template-columns: 1fr;\n gap: 30px;\n }<\/p>\n<p> .bifa-ambassador-card:nth-child(n+2) {\n display: none;\n opacity: 0;\n }<\/p>\n<p> .bifa-ambassadors-grid.expanded .bifa-ambassador-card:nth-child(n+2) {\n display: block;\n animation: fadeInUp 0.8s ease-out forwards;\n }<\/p>\n<p> .bifa-ambassador-image {\n height: 250px;\n }<\/p>\n<p> \/* \u041c\u043e\u0431\u0438\u043b\u044c\u043d\u0430\u044f \u0446\u0435\u043d\u0442\u0440\u043e\u0432\u043a\u0430 \u043a\u043d\u043e\u043f\u043e\u043a Join Us *\/\n .bifa-join-buttons-section {\n padding: 30px 10px;\n margin: 40px 0;\n }<\/p>\n<p> .bifa-join-buttons-container {\n flex-direction: column;\n align-items: center;\n gap: 15px;\n width: 100%;\n padding: 0;\n }<\/p>\n<p> .bifa-join-button {\n width: 90%;\n max-width: 320px;\n padding: 16px 25px !important;\n font-size: 0.95rem !important;\n justify-content: center;\n text-align: center;\n }<\/p>\n<p> \/* \u0426\u0435\u043d\u0442\u0440\u043e\u0432\u043a\u0430 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432 *\/\n .bifa-ambassadors-title-wrapper {\n padding: 0 10px;\n margin-bottom: 60px;\n }<\/p>\n<p> .bifa-ambassadors-section-title {\n font-size: 2.2rem;\n }<\/p>\n<p> .bifa-ambassadors-subtitle {\n font-size: 1.15rem;\n padding: 0 10px;\n }<\/p>\n<p> \/* \u041a\u043d\u043e\u043f\u043a\u0430 View All *\/\n .bifa-ambassadors-cta {\n padding: 0 10px;\n }<\/p>\n<p> .bifa-view-all-button {\n padding: 18px 35px !important;\n font-size: 1rem !important;\n width: auto;\n max-width: 90%;\n }\n}<\/p>\n<p>@media (max-width: 480px) {\n .bifa-ambassadors-section {\n padding: 60px 10px 50px;\n }<\/p>\n<p> .bifa-ambassadors-section-title {\n font-size: 1.8rem;\n letter-spacing: 0;\n }<\/p>\n<p> .bifa-ambassadors-subtitle {\n font-size: 1rem;\n padding: 0 5px;\n }<\/p>\n<p> .bifa-ambassador-content {\n padding: 25px 20px;\n }<\/p>\n<p> \/* \u0415\u0449\u0451 \u0431\u043e\u043b\u0435\u0435 \u043a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u044b\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 \u0434\u043b\u044f \u043c\u0430\u043b\u044b\u0445 \u044d\u043a\u0440\u0430\u043d\u043e\u0432 *\/\n .bifa-join-buttons-section {\n padding: 25px 5px;\n margin: 30px 0;\n }<\/p>\n<p> .bifa-join-button {\n width: 95%;\n max-width: 280px;\n font-size: 0.85rem !important;\n padding: 14px 20px !important;\n letter-spacing: 0.3px;\n }<\/p>\n<p> .bifa-join-button svg {\n width: 16px;\n height: 16px;\n }<\/p>\n<p> \/* View All button \u043d\u0430 \u043c\u0430\u043b\u044b\u0445 \u044d\u043a\u0440\u0430\u043d\u0430\u0445 *\/\n .bifa-view-all-button {\n padding: 16px 30px !important;\n font-size: 0.95rem !important;\n }<\/p>\n<p> .bifa-ambassador-count {\n width: 28px;\n height: 28px;\n font-size: 0.9rem !important;\n }\n}<\/p>\n<p>\/* \u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u043e\u0447\u0435\u043d\u044c \u043c\u0430\u043b\u044b\u0445 \u044d\u043a\u0440\u0430\u043d\u043e\u0432 *\/\n@media (max-width: 380px) {\n .bifa-ambassadors-section-title {\n font-size: 1.6rem;\n }<\/p>\n<p> .bifa-join-button {\n width: 98%;\n font-size: 0.8rem !important;\n padding: 12px 18px !important;\n gap: 8px;\n }<\/p>\n<p> \/* \u0423\u0431\u0438\u0440\u0430\u0435\u043c \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u043a\u0440\u043e\u043b\u043b *\/\n .bifa-ambassadors-section-wrapper {\n overflow-x: hidden;\n }\n}\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"bifa-ambassadors-section-wrapper\">\n <\/p>\n<section class=\"bifa-ambassadors-section\">\n <\/p>\n<div class=\"bifa-ambassadors-bg-animation\">\n <\/p>\n<div class=\"bifa-floating-shape-amb bifa-shape-ambassadors-1\"><\/div>\n<div class=\"bifa-floating-shape-amb bifa-shape-ambassadors-2\"><\/div>\n<div class=\"bifa-floating-shape-amb bifa-shape-ambassadors-3\"><\/div>\n<p> \n <\/div>\n<div class=\"bifa-ambassadors-container\">\n<div class=\"bifa-ambassadors-title-wrapper\">\n<h2 class=\"bifa-ambassadors-section-title\">Fa\u00e7a parte da BIFA<\/h2>\n<p class=\"bifa-ambassadors-subtitle\">\n Whether you’re a student, coach, or fan, there’s a role for you in building football’s future.\n <\/p>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"bifa-join-buttons-section\">\n<div class=\"bifa-join-buttons-container\">\n <a href=\"https:\/\/bifa.ai\/join\/#volunteers\" class=\"bifa-join-button\"><br \/>\n <svg viewbox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"\/>\n <\/svg><br \/>\n Candidatar-se como volunt\u00e1rio<br \/>\n <\/a><br \/>\n <a href=\"https:\/\/bifa.ai\/join\/#representatives\" class=\"bifa-join-button\"><br \/>\n <svg viewbox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z\"\/>\n <\/svg><br \/>\n Candidatar-se como Representante<br \/>\n <\/a><br \/>\n <a href=\"https:\/\/bifa.ai\/join\/#ambassadors\" class=\"bifa-join-button\"><br \/>\n <svg viewbox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\/>\n <\/svg><br \/>\n Candidatar-se como Embaixador<br \/>\n <\/a>\n <\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"bifa-ambassadors-grid\" id=\"bifa-ambassadors-grid\">\n <\/p>\n<div class=\"bifa-loading-container\" id=\"bifa-loading\" style=\"grid-column: 1\/-1;\">\n<div class=\"bifa-loading-spinner\"><\/div>\n<p class=\"bifa-loading-text\">Loading ambassadors…<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"bifa-ambassadors-cta\" id=\"bifa-cta\" style=\"display: none;\">\n <button class=\"bifa-view-all-button\" id=\"bifa-view-all-button\" type=\"button\"><br \/>\n <span class=\"bifa-button-text\">Ver todos os embaixadores<\/span><br \/>\n <span class=\"bifa-ambassador-count\">0<\/span><br \/>\n <svg width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"#FFFFFF\" stroke-width=\"2.5\">\n <path d=\"M5 12H19M19 12L12 5M19 12L12 19\" stroke=\"#FFFFFF\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg><br \/>\n <\/button>\n <\/div>\n<\/p><\/div>\n<\/section>\n<\/div>\n<p><script>\n\/\/ BIFA+ Dynamic Ambassadors Module with REST API Integration - PRODUCTION VERSION\n(function() {\n 'use strict';<\/p>\n<p> \/\/ Configuration\n const CONFIG = {\n apiUrl: '\/wp-json\/bifa\/v1\/ambassadors',\n particleCount: 12,\n visibleCardsDesktop: 3,\n visibleCardsTablet: 2,\n visibleCardsMobile: 1,\n isExpanded: false\n };<\/p>\n<p> \/\/ Country flags mapping\n const FLAGS = {\n 'BR': '\ud83c\udde7\ud83c\uddf7',\n 'RU': '\ud83c\uddf7\ud83c\uddfa',\n 'IN': '\ud83c\uddee\ud83c\uddf3',\n 'CN': '\ud83c\udde8\ud83c\uddf3',\n 'ZA': '\ud83c\uddff\ud83c\udde6',\n 'SA': '\ud83c\uddf8\ud83c\udde6',\n 'AE': '\ud83c\udde6\ud83c\uddea',\n 'EG': '\ud83c\uddea\ud83c\uddec',\n 'IR': '\ud83c\uddee\ud83c\uddf7',\n 'ET': '\ud83c\uddea\ud83c\uddf9',\n 'ID': '\ud83c\uddee\ud83c\udde9',\n 'AR': '\ud83c\udde6\ud83c\uddf7'\n };<\/p>\n<p> \/\/ State\n let ambassadors = [];\n let visibleCards = CONFIG.visibleCardsDesktop;<\/p>\n<p> \/\/ Initialize\n function init() {\n \/\/ Create particles\n createParticles();<\/p>\n<p> \/\/ Determine visible cards based on screen size\n updateVisibleCards();<\/p>\n<p> \/\/ Load ambassadors data\n loadAmbassadors();<\/p>\n<p> \/\/ Setup event listeners\n setupEventListeners();<\/p>\n<p> \/\/ Setup resize handler\n window.addEventListener('resize', debounce(updateVisibleCards, 250));\n }<\/p>\n<p> \/\/ Create golden particles\n function createParticles() {\n const particlesContainer = document.querySelector('.bifa-ambassadors-bg-animation');\n if (!particlesContainer) return;<\/p>\n<p> for (let i = 0; i < CONFIG.particleCount; i++) {\n const particle = document.createElement('div');\n particle.className = 'bifa-ambassadors-particle';\n particle.style.left = Math.random() * 100 + '%';\n particle.style.animationDelay = Math.random() * 20 + 's';\n particle.style.animationDuration = (18 + Math.random() * 10) + '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 \n \/\/ Update visible cards based on screen size\n function updateVisibleCards() {\n const width = window.innerWidth;\n if (width <= 768) {\n visibleCards = CONFIG.visibleCardsMobile;\n } else if (width <= 1024) {\n visibleCards = CONFIG.visibleCardsTablet;\n } else {\n visibleCards = CONFIG.visibleCardsDesktop;\n }\n }\n \n \/\/ Load ambassadors from REST API\n async function loadAmbassadors() {\n const grid = document.getElementById('bifa-ambassadors-grid');\n const loadingContainer = document.getElementById('bifa-loading');\n \n try {\n const apiUrl = `${window.location.protocol}\/\/${window.location.host}${CONFIG.apiUrl}`;\n const response = await fetch(apiUrl);\n \n if (!response.ok) {\n throw new Error(`API Error: ${response.status} ${response.statusText}`);\n }\n \n ambassadors = await response.json();\n \n \/\/ Remove loading state\n if (loadingContainer) {\n loadingContainer.remove();\n }\n \n \/\/ Check if we have ambassadors\n if (ambassadors.length === 0) {\n showEmptyState(grid);\n return;\n }\n \n \/\/ Sort ambassadors by order\n ambassadors.sort((a, b) => {\n const orderA = parseInt(a.order) || 999;\n const orderB = parseInt(b.order) || 999;\n return orderA - orderB;\n });<\/p>\n<p> \/\/ Render ambassadors\n renderAmbassadors(grid);<\/p>\n<p> \/\/ Setup view all button\n setupViewAllButton();<\/p>\n<p> } catch (error) {\n console.error('BIFA Ambassadors: Error loading data:', error);<\/p>\n<p> \/\/ Remove loading state\n if (loadingContainer) {\n loadingContainer.remove();\n }<\/p>\n<p> \/\/ Show error state\n showErrorState(grid, error);\n }\n }<\/p>\n<p> \/\/ Render ambassadors cards\n function renderAmbassadors(grid) {\n \/\/ Clear grid\n grid.innerHTML = '';<\/p>\n<p> \/\/ Render each ambassador\n ambassadors.forEach((ambassador, index) => {\n const card = createAmbassadorCard(ambassador, index);\n grid.appendChild(card);\n });\n }<\/p>\n<p> \/\/ Create ambassador card element - PRODUCTION VERSION\n function createAmbassadorCard(ambassador, index) {\n const card = document.createElement('a');\n card.className = 'bifa-ambassador-card';\n card.href = ambassador.link || `\/ambassadors\/${ambassador.slug || ambassador.id}\/`;\n card.setAttribute('data-id', ambassador.id);<\/p>\n<p> \/\/ Add animation delay\n card.style.animationDelay = `${0.8 + (index * 0.2)}s`;<\/p>\n<p> \/\/ Select best available image\n let imageUrl = null;<\/p>\n<p> \/\/ Priority: avatar -> featured_image -> portrait -> thumbnail\n if (ambassador.avatar && ambassador.avatar.length > 0 && ambassador.avatar !== 'false') {\n imageUrl = ambassador.avatar;\n } else if (ambassador.featured_image && ambassador.featured_image.length > 0 && ambassador.featured_image !== 'false') {\n imageUrl = ambassador.featured_image;\n } else if (ambassador.portrait && ambassador.portrait.length > 0 && ambassador.portrait !== 'false') {\n imageUrl = ambassador.portrait;\n } else if (ambassador.thumbnail && ambassador.thumbnail.length > 0 && ambassador.thumbnail !== 'false') {\n imageUrl = ambassador.thumbnail;\n }<\/p>\n<p> \/\/ Create image container\n const imageContainer = document.createElement('div');\n imageContainer.className = 'bifa-ambassador-image';<\/p>\n<p> if (imageUrl && imageUrl !== 'false' && imageUrl !== false) {\n \/\/ Create img element programmatically\n const img = document.createElement('img');\n img.src = imageUrl;\n img.alt = ambassador.title || '';\n img.loading = 'lazy';<\/p>\n<p> \/\/ Add error event listener for fallback\n img.addEventListener('error', function() {\n \/\/ Replace with placeholder on error\n imageContainer.innerHTML = `<\/p>\n<div class=\"bifa-ambassador-no-image\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\">\n <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"><\/path>\n <circle cx=\"12\" cy=\"7\" r=\"4\"><\/circle>\n <\/svg>\n <\/div>\n<p> `;\n });<\/p>\n<p> imageContainer.appendChild(img);\n } else {\n imageContainer.innerHTML = `<\/p>\n<div class=\"bifa-ambassador-no-image\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\">\n <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"><\/path>\n <circle cx=\"12\" cy=\"7\" r=\"4\"><\/circle>\n <\/svg>\n <\/div>\n<p> `;\n }<\/p>\n<p> \/\/ Add country flag\n let countryHtml = '';\n if (ambassador.country && FLAGS[ambassador.country]) {\n countryHtml = `<\/p>\n<div class=\"bifa-ambassador-country\">\n ${FLAGS[ambassador.country]}\n <\/div>\n<p> `;\n }<\/p>\n<p> \/\/ Add badge\n let badgeHtml = '';\n if (ambassador.badge) {\n badgeHtml = `<\/p>\n<div class=\"bifa-ambassador-badge ${ambassador.featured ? 'featured' : ''}\">\n ${escapeHtml(ambassador.badge)}\n <\/div>\n<p> `;\n } else if (ambassador.featured) {\n badgeHtml = `<\/p>\n<div class=\"bifa-ambassador-badge featured\">\n Featured\n <\/div>\n<p> `;\n }<\/p>\n<p> \/\/ Build other content with innerHTML\n const contentHtml = `\n ${badgeHtml}\n ${countryHtml}<\/p>\n<div class=\"bifa-ambassador-content\">\n<h3 class=\"bifa-ambassador-name\">${escapeHtml(ambassador.title)}<\/h3>\n<p> ${ambassador.role ? `<\/p>\n<p class=\"bifa-ambassador-role\">${escapeHtml(ambassador.role)}<\/p>\n<p>` : ''}\n ${ambassador.organization ? `<\/p>\n<p class=\"bifa-ambassador-organization\">${escapeHtml(ambassador.organization)}<\/p>\n<p>` : ''}\n ${ambassador.quote ? `<\/p>\n<p class=\"bifa-ambassador-quote\">${escapeHtml(ambassador.quote)}<\/p>\n<p>` : ''}\n ${!ambassador.quote && ambassador.bio_short ? `<\/p>\n<p class=\"bifa-ambassador-quote\">${escapeHtml(ambassador.bio_short)}<\/p>\n<p>` : ''}\n <\/p><\/div>\n<p> `;<\/p>\n<p> \/\/ Set initial HTML (without image)\n card.innerHTML = contentHtml;<\/p>\n<p> \/\/ Insert image container at the correct position\n const contentDiv = card.querySelector('.bifa-ambassador-content');\n card.insertBefore(imageContainer, contentDiv);<\/p>\n<p> return card;\n }<\/p>\n<p> \/\/ Setup view all button\n function setupViewAllButton() {\n const ctaSection = document.getElementById('bifa-cta');\n const button = document.getElementById('bifa-view-all-button');\n const countBadge = button.querySelector('.bifa-ambassador-count');<\/p>\n<p> \/\/ Calculate hidden cards\n const hiddenCards = ambassadors.length - visibleCards;<\/p>\n<p> \/\/ Show\/hide button based on card count\n if (hiddenCards > 0) {\n ctaSection.style.display = 'block';\n countBadge.textContent = hiddenCards;\n } else {\n ctaSection.style.display = 'none';\n }\n }<\/p>\n<p> \/\/ Setup event listeners\n function setupEventListeners() {\n const button = document.getElementById('bifa-view-all-button');\n if (button) {\n button.addEventListener('click', toggleAllAmbassadors);\n }\n }<\/p>\n<p> \/\/ Toggle expand\/collapse\n function toggleAllAmbassadors() {\n const grid = document.getElementById('bifa-ambassadors-grid');\n const button = document.getElementById('bifa-view-all-button');\n const buttonText = button.querySelector('.bifa-button-text');\n const countBadge = button.querySelector('.bifa-ambassador-count');<\/p>\n<p> CONFIG.isExpanded = !CONFIG.isExpanded;<\/p>\n<p> if (CONFIG.isExpanded) {\n \/\/ Expand\n grid.classList.add('expanded');\n button.classList.add('expanded');\n buttonText.textContent = 'Show Less';\n countBadge.style.display = 'none';<\/p>\n<p> \/\/ Smooth scroll to newly visible cards\n setTimeout(() => {\n const fourthCard = document.querySelector('.bifa-ambassador-card:nth-child(4)');\n if (fourthCard) {\n const rect = fourthCard.getBoundingClientRect();\n const scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n const targetY = rect.top + scrollTop - 100;<\/p>\n<p> window.scrollTo({\n top: targetY,\n behavior: 'smooth'\n });\n }\n }, 100);\n } else {\n \/\/ Collapse\n grid.classList.remove('expanded');\n button.classList.remove('expanded');\n buttonText.textContent = 'View All Ambassadors';\n countBadge.style.display = 'inline-flex';<\/p>\n<p> \/\/ Update count\n const hiddenCards = ambassadors.length - visibleCards;\n countBadge.textContent = hiddenCards;<\/p>\n<p> \/\/ Scroll back to top of section\n const section = document.querySelector('.bifa-ambassadors-section');\n section.scrollIntoView({ behavior: 'smooth', block: 'start' });\n }\n }<\/p>\n<p> \/\/ Show empty state\n function showEmptyState(grid) {\n grid.innerHTML = `<\/p>\n<div class=\"bifa-empty-container\" style=\"grid-column: 1\/-1;\">\n<div class=\"bifa-empty-icon\">\ud83d\udc65<\/div>\n<h3 class=\"bifa-empty-message\">No Ambassadors Yet<\/h3>\n<p class=\"bifa-empty-submessage\">We're currently recruiting ambassadors for BIFA programs.<\/p>\n<\/p><\/div>\n<p> `;\n }<\/p>\n<p> \/\/ Show error state\n function showErrorState(grid, error) {\n grid.innerHTML = `<\/p>\n<div class=\"bifa-error-container\" style=\"grid-column: 1\/-1;\">\n<div class=\"bifa-error-icon\">\u26a0\ufe0f<\/div>\n<h3 class=\"bifa-error-message\">Unable to Load Ambassadors<\/h3>\n<p class=\"bifa-error-details\">${error.message}<\/p>\n<p> <button class=\"bifa-retry-button\" onclick=\"location.reload()\">\n Retry\n <\/button>\n <\/div>\n<p> `;\n }<\/p>\n<p> \/\/ Utility: Escape HTML\n function escapeHtml(text) {\n if (!text) return '';\n const map = {\n '&': '&',\n '<': '<',\n '>': '>',\n '\"': '"',\n \"'\": '''\n };\n return text.replace(\/[&<>\"']\/g, m => map[m]);\n }<\/p>\n<p> \/\/ Utility: Debounce\n function debounce(func, wait) {\n let timeout;\n return function executedFunction(...args) {\n const later = () => {\n clearTimeout(timeout);\n func(...args);\n };\n clearTimeout(timeout);\n timeout = setTimeout(later, wait);\n };\n }<\/p>\n<p> \/\/ Initialize when DOM is ready\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', init);\n } else {\n init();\n }<\/p>\n<p>})();\n<\/script><\/p>\n<p><\/body><br \/>\n<\/html>\n<\/div>\n<div>\n<p> <!DOCTYPE html><br \/>\n<html lang=\"ru\"><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+ – Partners & Sponsors<\/title><\/p>\n<p> \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&family=Cairo:wght@300;400;500;600;700;800&family=Tajawal:wght@300;400;500;700;800&display=swap\" rel=\"stylesheet\">\n<style>\n \/* ========= \u0413\u041b\u041e\u0411\u0410\u041b\u042c\u041d\u042b\u0415 \u041f\u0415\u0420\u0415\u041c\u0415\u041d\u041d\u042b\u0415 BIFA+ ========= *\/\n :root {\n \/* \u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430 BIFA+ *\/\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> \/* \u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0448\u0440\u0438\u0444\u0442\u044b BIFA+ *\/\n --bifa-font-heading: 'Montserrat', 'Cairo', sans-serif;\n --bifa-font-body: 'Poppins', 'Tajawal', sans-serif;\n --bifa-font-arabic: 'Cairo', 'Tajawal', 'GE SS Text', sans-serif;\n }<\/p>\n<p> \/* ========= RESET ========= *\/\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }<\/p>\n<p> body {\n font-family: var(--bifa-font-body);\n overflow-x: hidden;\n background: var(--bifa-bright-white);\n }<\/p>\n<p> \/* ========= \u0410\u041d\u0418\u041c\u0410\u0426\u0418\u0418 ========= *\/\n @keyframes goldPulse {\n 0%, 100% { opacity: 0.6; }\n 50% { opacity: 1; }\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(50px);\n opacity: 0;\n }\n }<\/p>\n<p> @keyframes fadeInDown {\n from {\n opacity: 0;\n transform: translateY(-40px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }<\/p>\n<p> @keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(40px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }<\/p>\n<p> @keyframes partners-pulse {\n 0%, 100% { \n filter: brightness(1.1) drop-shadow(0 0 10px rgba(212, 175, 55, 0.4)); \n transform: scale(1);\n }\n 50% { \n filter: brightness(1.3) drop-shadow(0 0 20px rgba(212, 175, 55, 0.6)); \n transform: scale(1.02);\n }\n }<\/p>\n<p> @keyframes partners-twinkle {\n 0%, 100% { \n opacity: 0.3; \n transform: scale(1); \n }\n 50% { \n opacity: 1; \n transform: scale(1.5); \n }\n }<\/p>\n<p> @keyframes partners-float-neon {\n 0%, 100% {\n transform: translate(0, 0) scale(1);\n }\n 33% {\n transform: translate(50px, -80px) scale(1.1);\n }\n 66% {\n transform: translate(-50px, 50px) scale(0.9);\n }\n }<\/p>\n<p> @keyframes partners-rotate-slow {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }<\/p>\n<p> @keyframes textRotate {\n 0% {\n opacity: 0;\n transform: translateY(-50%) translateY(20px);\n }\n 10% {\n opacity: 1;\n transform: translateY(-50%) translateY(0);\n }\n 40% {\n opacity: 1;\n transform: translateY(-50%) translateY(0);\n }\n 50% {\n opacity: 0;\n transform: translateY(-50%) translateY(-20px);\n }\n 100% {\n opacity: 0;\n transform: translateY(-50%) translateY(-20px);\n }\n }<\/p>\n<p> @keyframes textGlow {\n 0%, 100% {\n text-shadow: \n 0 0 10px rgba(212, 175, 55, 0.3),\n 0 0 20px rgba(212, 175, 55, 0.2),\n 0 0 30px rgba(212, 175, 55, 0.1);\n filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.2));\n }\n 50% {\n text-shadow: \n 0 0 15px rgba(212, 175, 55, 0.5),\n 0 0 30px rgba(212, 175, 55, 0.4),\n 0 0 45px rgba(212, 175, 55, 0.3),\n 0 0 60px rgba(212, 175, 55, 0.2);\n filter: drop-shadow(0 0 25px rgba(212, 175, 55, 0.3));\n }\n }<\/p>\n<p> \/* ========= \u041e\u0421\u041d\u041e\u0412\u041d\u041e\u0419 \u041a\u041e\u041d\u0422\u0415\u0419\u041d\u0415\u0420 ========= *\/\n .partners-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 }<\/p>\n<p> \/* \u0421\u0432\u044f\u0437\u0443\u044e\u0449\u0430\u044f \u043b\u0438\u043d\u0438\u044f \u0441 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0441\u0435\u043a\u0446\u0438\u0435\u0439 *\/\n .partners-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> .bifa-partners-container {\n position: relative;\n padding: 80px 0;\n background: transparent;\n overflow: hidden;\n }<\/p>\n<p> .bifa-partners-container::before {\n content: '';\n position: absolute;\n inset: 0;\n background: radial-gradient(circle at 30% 50%, rgba(212, 175, 55, 0.03), transparent 50%),\n radial-gradient(circle at 70% 80%, rgba(10, 31, 68, 0.03), transparent 50%);\n z-index: 0;\n }<\/p>\n<p> \/* ========= \u0427\u0410\u0421\u0422\u0418\u0426\u042b \u0418 \u0414\u0415\u041a\u041e\u0420\u0410\u0422\u0418\u0412\u041d\u042b\u0415 \u042d\u041b\u0415\u041c\u0415\u041d\u0422\u042b ========= *\/\n .bg-particles {\n position: absolute;\n width: 100%;\n height: 100%;\n overflow: hidden;\n z-index: 2;\n }<\/p>\n<p> .particle {\n position: absolute;\n width: 4px;\n height: 4px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n border-radius: 50%;\n animation: float 15s infinite linear;\n box-shadow: 0 0 8px rgba(212, 175, 55, 0.3);\n opacity: 0.3;\n }<\/p>\n<p> .neon-elements {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow: hidden;\n z-index: 0;\n pointer-events: none;\n }<\/p>\n<p> .neon-circle {\n position: absolute;\n border-radius: 50%;\n filter: blur(40px);\n animation: partners-float-neon 20s ease-in-out infinite;\n }<\/p>\n<p> .neon-circle:nth-child(1) {\n width: 300px;\n height: 300px;\n background: rgba(212, 175, 55, 0.08);\n top: -150px;\n left: -150px;\n animation: partners-float-neon 18s ease-in-out infinite;\n }<\/p>\n<p> .neon-circle:nth-child(2) {\n width: 400px;\n height: 400px;\n background: rgba(10, 31, 68, 0.06);\n bottom: -200px;\n right: -200px;\n animation: partners-float-neon 25s ease-in-out infinite;\n animation-delay: 5s;\n }<\/p>\n<p> .neon-circle:nth-child(3) {\n width: 250px;\n height: 250px;\n background: rgba(29, 97, 67, 0.05);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n animation: partners-float-neon 30s ease-in-out infinite;\n animation-delay: 10s;\n }<\/p>\n<p> .glow-dot {\n position: absolute;\n width: 4px;\n height: 4px;\n background: rgba(212, 175, 55, 0.8);\n border-radius: 50%;\n box-shadow: 0 0 10px rgba(212, 175, 55, 0.8);\n animation: partners-twinkle 3s ease-in-out infinite;\n }<\/p>\n<p> .glow-dot:nth-child(6) {\n top: 15%;\n right: 10%;\n animation-delay: 0s;\n }<\/p>\n<p> .glow-dot:nth-child(7) {\n bottom: 25%;\n left: 8%;\n animation-delay: 1.5s;\n }<\/p>\n<p> .glow-dot:nth-child(8) {\n top: 70%;\n right: 30%;\n animation-delay: 2.5s;\n }<\/p>\n<p> \/* ========= \u041a\u041e\u041d\u0422\u0415\u041d\u0422 ========= *\/\n .content-wrapper {\n position: relative;\n z-index: 2;\n max-width: 1400px;\n margin: 0 auto;\n padding: 0 40px;\n }<\/p>\n<p> \/* ========= \u0417\u0410\u0413\u041e\u041b\u041e\u0412\u041e\u041a \u0421\u0415\u041a\u0426\u0418\u0418 ========= *\/\n .section-header {\n text-align: center;\n margin-bottom: 60px;\n position: relative;\n z-index: 1;\n animation: fadeInDown 1.2s ease;\n }<\/p>\n<p> .partners-title {\n font-family: var(--bifa-font-heading);\n font-size: clamp(3rem, 5vw, 4.5rem);\n font-weight: 900;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n margin-bottom: 25px;\n text-transform: uppercase;\n position: relative;\n cursor: pointer;\n transition: all 0.3s ease;\n text-decoration: none;\n display: inline-block;\n }<\/p>\n<p> .partners-title::after {\n content: '';\n position: absolute;\n bottom: -10px;\n left: 50%;\n transform: translateX(-50%);\n width: 0;\n height: 3px;\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700);\n transition: width 0.4s ease;\n }<\/p>\n<p> .partners-title:hover {\n transform: translateY(-3px);\n }<\/p>\n<p> .partners-title:hover::after {\n width: 100%;\n }<\/p>\n<p> \/* \u041a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441\u043c\u0435\u043d\u044b \u0442\u0435\u043a\u0441\u0442\u043e\u0432 *\/\n .subtitle-container {\n position: relative;\n height: 60px;\n margin-bottom: 20px;\n overflow: visible;\n display: flex;\n align-items: center;\n justify-content: center;\n }<\/p>\n<p> .partners-subtitle,\n .partners-slogan {\n font-family: var(--bifa-font-body);\n font-size: clamp(1.2rem, 2.5vw, 1.8rem);\n color: var(--bifa-deep-navy);\n font-weight: 600;\n letter-spacing: 2px;\n position: absolute;\n width: 100%;\n left: 0;\n top: 50%;\n transform: translateY(-50%);\n margin: 0;\n text-align: center;\n opacity: 0;\n z-index: 2;\n }<\/p>\n<p> .partners-subtitle {\n animation: textRotate 8s ease-in-out infinite;\n }<\/p>\n<p> .partners-slogan {\n font-family: var(--bifa-font-heading);\n font-weight: 700;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n animation: textRotate 8s ease-in-out infinite, textGlow 2s ease-in-out infinite;\n animation-delay: 4s, 4s;\n }<\/p>\n<p> .partners-description {\n max-width: 900px;\n margin: 0 auto;\n font-family: var(--bifa-font-body);\n font-size: clamp(1rem, 1.5vw, 1.2rem);\n line-height: 1.8;\n color: #4a5568;\n font-weight: 400;\n opacity: 0;\n animation: fadeInUp 1s ease forwards;\n animation-delay: 2s;\n }<\/p>\n<p> .highlight {\n font-weight: 700;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n }<\/p>\n<p> \/* ========= \u041a\u0410\u0422\u0415\u0413\u041e\u0420\u0418\u0418 \u041f\u0410\u0420\u0422\u041d\u0415\u0420\u041e\u0412 ========= *\/\n .partner-categories {\n margin-bottom: 50px;\n position: relative;\n z-index: 1;\n animation: fadeInUp 1s ease-out 0.2s both;\n }<\/p>\n<p> .category-tabs {\n display: flex;\n justify-content: center;\n gap: 20px;\n flex-wrap: wrap;\n }<\/p>\n<p> .category-tab {\n padding: 14px 35px;\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(10px);\n border: 2px solid rgba(212, 175, 55, 0.2);\n border-radius: 50px;\n font-weight: 600;\n color: var(--bifa-deep-navy);\n cursor: pointer;\n transition: all 0.3s ease;\n font-size: 1rem;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n font-family: var(--bifa-font-heading);\n box-shadow: 0 2px 10px rgba(212, 175, 55, 0.08);\n position: relative;\n overflow: hidden;\n }<\/p>\n<p> .category-tab::before {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.3), transparent);\n transition: left 0.5s ease;\n }<\/p>\n<p> .category-tab:hover::before {\n left: 100%;\n }<\/p>\n<p> .category-tab:hover {\n transform: translateY(-3px);\n box-shadow: 0 10px 30px rgba(212, 175, 55, 0.2);\n border-color: var(--bifa-heritage-gold);\n background: rgba(255, 255, 255, 1);\n }<\/p>\n<p> .category-tab.active {\n background: linear-gradient(135deg, var(--bifa-heritage-gold) 0%, #ffd700 100%);\n color: var(--bifa-deep-navy);\n border-color: transparent;\n box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);\n font-weight: 800;\n }<\/p>\n<p> \/* ========= \u0421\u0415\u0422\u041a\u0410 \u041f\u0410\u0420\u0422\u041d\u0415\u0420\u041e\u0412 ========= *\/\n .partners-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 30px;\n margin-bottom: 60px;\n position: relative;\n z-index: 1;\n animation: fadeInUp 1s ease-out 0.4s both;\n }<\/p>\n<p> .partner-card {\n background: rgba(255, 255, 255, 0.98);\n backdrop-filter: blur(10px);\n border-radius: 20px;\n overflow: hidden;\n box-shadow: 0 2px 10px rgba(212, 175, 55, 0.08);\n cursor: pointer;\n transition: all 0.3s ease;\n position: relative;\n border: 2px solid rgba(212, 175, 55, 0.1);\n height: 250px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px 30px;\n }<\/p>\n<p> .partner-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: radial-gradient(circle at center, rgba(212, 175, 55, 0.05) 0%, transparent 70%);\n opacity: 0;\n transition: opacity 0.4s ease;\n }<\/p>\n<p> .partner-card:hover {\n transform: translateY(-10px);\n box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15);\n border-color: rgba(212, 175, 55, 0.3);\n }<\/p>\n<p> .partner-card:hover::before {\n opacity: 1;\n }<\/p>\n<p> .partner-tier-badge {\n position: absolute;\n top: 15px;\n right: 15px;\n padding: 5px 12px;\n border-radius: 20px;\n font-size: 10px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n font-family: var(--bifa-font-heading);\n backdrop-filter: blur(10px);\n z-index: 2;\n }<\/p>\n<p> .tier-platinum {\n background: linear-gradient(135deg, #e5e7eb 0%, #9ca3af 100%);\n color: #1f2937;\n box-shadow: 0 2px 10px rgba(156, 163, 175, 0.4);\n }<\/p>\n<p> .tier-gold {\n background: linear-gradient(135deg, var(--bifa-heritage-gold) 0%, #ffd700 100%);\n color: var(--bifa-deep-navy);\n box-shadow: 0 2px 10px rgba(212, 175, 55, 0.4);\n }<\/p>\n<p> .tier-silver {\n background: linear-gradient(135deg, #d1d5db 0%, #e5e7eb 100%);\n color: #374151;\n box-shadow: 0 2px 10px rgba(209, 213, 219, 0.4);\n }<\/p>\n<p> .tier-media {\n background: linear-gradient(135deg, var(--bifa-deep-navy) 0%, #162e5a 100%);\n color: white;\n box-shadow: 0 2px 10px rgba(10, 31, 68, 0.4);\n }\n .tier-strategic {\n background: linear-gradient(135deg, var(--bifa-deep-navy) 0%, #162e5a 100%);\n color: white;\n box-shadow: 0 2px 10px rgba(10, 31, 68, 0.4);\n }\n .tier-institutional {\n background: linear-gradient(135deg, var(--bifa-deep-navy) 0%, #162e5a 100%);\n color: white;\n box-shadow: 0 2px 10px rgba(10, 31, 68, 0.4);\n }<\/p>\n<p> .partner-logo {\n width: 100%;\n max-width: 200px;\n height: 100px;\n object-fit: contain;\n filter: grayscale(100%);\n opacity: 0.7;\n transition: all 0.3s ease;\n position: relative;\n z-index: 1;\n }<\/p>\n<p> .partner-card:hover .partner-logo {\n filter: grayscale(0%);\n opacity: 1;\n transform: scale(1.05);\n }<\/p>\n<p> .partner-info {\n text-align: center;\n margin-top: 20px;\n position: relative;\n z-index: 1;\n }<\/p>\n<p> .partner-name {\n font-weight: 700;\n color: var(--bifa-deep-navy);\n font-size: 1.2rem;\n margin-bottom: 5px;\n transition: color 0.3s ease;\n font-family: var(--bifa-font-heading);\n }<\/p>\n<p> .partner-card:hover .partner-name {\n color: var(--bifa-heritage-gold);\n }<\/p>\n<p> .partner-description {\n font-size: 0.9rem;\n color: #64748b;\n line-height: 1.4;\n font-family: var(--bifa-font-body);\n }<\/p>\n<p> \/* ========= CTA \u0421\u0415\u041a\u0426\u0418\u042f ========= *\/\n .partners-cta {\n text-align: center;\n padding: 60px 40px;\n background: linear-gradient(135deg, rgba(212, 175, 55, 0.05) 0%, rgba(212, 175, 55, 0.08) 100%);\n backdrop-filter: blur(10px);\n border-radius: 25px;\n position: relative;\n z-index: 1;\n overflow: hidden;\n animation: fadeInUp 1s ease-out 0.6s both;\n border: 2px solid rgba(212, 175, 55, 0.2);\n box-shadow: 0 2px 10px rgba(212, 175, 55, 0.08);\n }<\/p>\n<p> .partners-cta::before {\n content: '';\n position: absolute;\n top: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n background: radial-gradient(circle, rgba(212, 175, 55, 0.05) 0%, transparent 50%);\n animation: partners-rotate-slow 20s linear infinite;\n }<\/p>\n<p> .cta-title {\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), #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n margin-bottom: 20px;\n position: relative;\n z-index: 1;\n }<\/p>\n<p> .cta-description {\n font-size: 1.2rem;\n color: var(--bifa-deep-navy);\n margin-bottom: 30px;\n line-height: 1.6;\n position: relative;\n z-index: 1;\n font-family: var(--bifa-font-body);\n }<\/p>\n<p> .cta-button {\n display: inline-block;\n padding: 18px 50px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold) 0%, #ffd700 100%);\n color: var(--bifa-deep-navy);\n text-decoration: none;\n border-radius: 50px;\n font-weight: 700;\n font-size: 1.1rem;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n font-family: var(--bifa-font-heading);\n transition: all 0.3s ease;\n box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);\n position: relative;\n z-index: 1;\n overflow: hidden;\n }<\/p>\n<p> .cta-button::before {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);\n transition: left 0.5s ease;\n }<\/p>\n<p> .cta-button:hover::before {\n left: 100%;\n }<\/p>\n<p> .cta-button:hover {\n transform: translateY(-3px);\n box-shadow: 0 15px 40px rgba(212, 175, 55, 0.4);\n }<\/p>\n<p> \/* ========= \u0421\u041e\u0421\u0422\u041e\u042f\u041d\u0418\u0415 \u0417\u0410\u0413\u0420\u0423\u0417\u041a\u0418 ========= *\/\n .loading-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 80px 20px;\n text-align: center;\n }<\/p>\n<p> .loading-content {\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(10px);\n border-radius: 20px;\n padding: 40px 30px;\n border: 2px solid rgba(212, 175, 55, 0.2);\n box-shadow: 0 2px 10px rgba(212, 175, 55, 0.08);\n position: relative;\n overflow: hidden;\n }<\/p>\n<p> .loading-icon {\n font-size: 48px;\n margin-bottom: 20px;\n animation: partners-pulse 2s ease-in-out infinite;\n }<\/p>\n<p> .loading-title {\n font-size: 1.8rem;\n font-weight: 700;\n color: var(--bifa-deep-navy);\n margin-bottom: 10px;\n font-family: var(--bifa-font-heading);\n }<\/p>\n<p> .loading-subtitle {\n font-size: 1rem;\n color: #64748b;\n font-family: var(--bifa-font-body);\n }<\/p>\n<p> \/* ========= RESPONSIVE DESIGN ========= *\/\n @media (max-width: 1024px) {\n .content-wrapper {\n padding: 0 30px;\n }<\/p>\n<p> .partners-grid {\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 25px;\n }<\/p>\n<p> .partners-title {\n font-size: 3rem;\n }\n }<\/p>\n<p> @media (max-width: 768px) {\n .content-wrapper {\n padding: 0 20px;\n }<\/p>\n<p> .partners-title {\n font-size: 2.5rem;\n }<\/p>\n<p> .subtitle-container {\n height: 50px;\n }<\/p>\n<p> .partners-subtitle,\n .partners-slogan {\n font-size: 1.2rem;\n }<\/p>\n<p> .partners-grid {\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 20px;\n }<\/p>\n<p> .partner-card {\n height: 220px;\n padding: 30px 20px;\n }<\/p>\n<p> .cta-title {\n font-size: 2rem;\n }<\/p>\n<p> .cta-button {\n padding: 15px 40px;\n font-size: 1rem;\n }<\/p>\n<p> .category-tab {\n padding: 12px 25px;\n font-size: 0.9rem;\n }\n }<\/p>\n<p> @media (max-width: 480px) {\n .partners-grid {\n grid-template-columns: 1fr;\n }<\/p>\n<p> .partners-title {\n font-size: 2rem;\n }<\/p>\n<p> .subtitle-container {\n height: 30px;\n margin-bottom: 15px;\n padding: 10px 0;\n }<\/p>\n<p> .partners-subtitle,\n .partners-slogan {\n font-size: 1rem;\n letter-spacing: 1px;\n }\n }\n <\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"partners-section-wrapper\">\n <\/p>\n<div class=\"bg-particles\"><\/div>\n<p> <\/p>\n<section class=\"bifa-partners-container\">\n <\/p>\n<div class=\"neon-elements\">\n<div class=\"neon-circle\"><\/div>\n<div class=\"neon-circle\"><\/div>\n<div class=\"neon-circle\"><\/div>\n<div class=\"glow-dot\"><\/div>\n<div class=\"glow-dot\"><\/div>\n<div class=\"glow-dot\"><\/div>\n<\/p><\/div>\n<div class=\"content-wrapper\">\n <\/p>\n<div class=\"section-header\">\n<div class=\"partners-title\">Partners & Sponsors<\/div>\n<div class=\"subtitle-container\">\n<p class=\"partners-subtitle\">Juntos, criamos o futuro da coopera\u00e7\u00e3o do Sul Global<\/p>\n<p class=\"partners-slogan\">Jogar com esp\u00edrito. Liderar com vis\u00e3o.<\/p>\n<\/p><\/div>\n<p class=\"partners-description\">\n Uma rede global de <span class=\"highlight\">parceiros estrat\u00e9gicos<\/span> e<br \/>\n <span class=\"highlight\">patrocinadores inovadores<\/span> supporting BIFA+’s mission to unite the<br \/>\n <span class=\"highlight\">Sul Global<\/span> por meio de futebol, interc\u00e2mbio cultural e<br \/>\n <span class=\"highlight\">diplomacia esportiva<\/span>. From technology innovators to media giants,<br \/>\n our partners share our vision of creating bridges between nations and empowering the next generation.\n <\/p>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"partner-categories\">\n<div class=\"category-tabs\">\n <button class=\"category-tab active\" onclick=\"filterPartners('all')\">Todos os parceiros<\/button><br \/>\n <button class=\"category-tab\" onclick=\"filterPartners('platinum')\">Platina<\/button><br \/>\n <button class=\"category-tab\" onclick=\"filterPartners('gold')\">Ouro<\/button><br \/>\n <button class=\"category-tab\" onclick=\"filterPartners('silver')\">Prata<\/button><br \/>\n <button class=\"category-tab\" onclick=\"filterPartners('media')\">Parceiros de m\u00eddia<\/button><br \/>\n <button class=\"category-tab\" onclick=\"filterPartners('strategic')\">Parceiros estrat\u00e9gicos<\/button><br \/>\n <button class=\"category-tab\" onclick=\"filterPartners('institutional')\">Parceiros institucionais<\/button>\n <\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"partners-grid\" id=\"partnersGrid\">\n<div class=\"loading-container\">\n<div class=\"loading-content\">\n<div class=\"loading-icon\">\u2728<\/div>\n<h3 class=\"loading-title\">Construindo juntos<\/h3>\n<p class=\"loading-subtitle\"> A BIFA colabora com governos, clubes e inovadores para desenvolver o futebol no Sul Global. Os parceiros oficiais ser\u00e3o anunciados em breve.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"partners-cta\">\n<h3 class=\"cta-title\">Participe do Movimento Global BIFA+<\/h3>\n<p class=\"cta-description\">Seja nosso parceiro para criar um novo futuro para a coopera\u00e7\u00e3o esportiva internacional e a unidade do Sul Global<\/p>\n<p> <a href=\"https:\/\/bifa.ai\/partners\/\" class=\"cta-button\">Seja nosso parceiro<\/a>\n <\/div>\n<\/p><\/div>\n<\/section><\/div>\n<p> <script>\n \/\/ Partner data will be loaded from API\n let partnersData = [];<\/p>\n<p> \/\/ Function to load partners from backend\n async function loadPartners() {\n try {\n const response = await fetch('\/wp-json\/bifa\/v1\/partners');\n if (!response.ok) {\n throw new Error('Failed to load partners');\n }\n const data = await response.json();\n partnersData = data;\n displayPartners('all');\n } catch (error) {\n console.error('Error loading partners:', error);\n showError();\n }\n }<\/p>\n<p> \/\/ Function to display partners\n function displayPartners(filterType = 'all') {\n const grid = document.getElementById('partnersGrid');\n grid.innerHTML = '';<\/p>\n<p> \/\/ Filter partners\n const filteredPartners = filterType === 'all' \n ? partnersData \n : partnersData.filter(partner => partner.type === filterType);<\/p>\n<p> \/\/ Sort by order\n filteredPartners.sort((a, b) => a.order - b.order);<\/p>\n<p> if (filteredPartners.length === 0) {\n grid.innerHTML = `<\/p>\n<div class=\"loading-container\" style=\"grid-column: 1 \/ -1;\">\n<div class=\"loading-content\">\n<div class=\"loading-icon\">\ud83e\udd1d<\/div>\n<h3 class=\"loading-title\">Building Together<\/h3>\n<p class=\"loading-subtitle\">BIFA collaborates with governments, clubs, and innovators to grow football across the Global South. Official partners will be announced soon<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<p> `;\n return;\n }<\/p>\n<p> \/\/ Create partner cards\n filteredPartners.forEach(partner => {\n const card = createPartnerCard(partner);\n grid.appendChild(card);\n });<\/p>\n<p> \/\/ Add animation delay to cards\n const cards = grid.querySelectorAll('.partner-card');\n cards.forEach((card, index) => {\n card.style.animationDelay = `${index * 0.1}s`;\n });\n }<\/p>\n<p> \/\/ Function to create partner card\n function createPartnerCard(partner) {\n const card = document.createElement('div');\n card.className = 'partner-card';\n card.style.animation = 'fadeInUp 0.6s ease-out both';<\/p>\n<p> \/\/ Tier badge\n const tierBadge = document.createElement('div');\n tierBadge.className = `partner-tier-badge tier-${partner.type}`;\n tierBadge.textContent = partner.type;<\/p>\n<p> \/\/ Logo\n const logo = document.createElement('img');\n logo.className = 'partner-logo';\n logo.src = partner.logo_url;\n logo.alt = partner.name;\n logo.loading = 'lazy';<\/p>\n<p> \/\/ Info container\n const info = document.createElement('div');\n info.className = 'partner-info';<\/p>\n<p> const name = document.createElement('h3');\n name.className = 'partner-name';\n name.textContent = partner.name;<\/p>\n<p> const description = document.createElement('p');\n description.className = 'partner-description';\n description.textContent = partner.description || '';<\/p>\n<p> info.appendChild(name);\n if (partner.description) {\n info.appendChild(description);\n }<\/p>\n<p> \/\/ Assemble card\n card.appendChild(tierBadge);\n card.appendChild(logo);\n card.appendChild(info);<\/p>\n<p> \/\/ Add click handler\n if (partner.website) {\n card.style.cursor = 'pointer';\n card.onclick = () => window.open(partner.website, '_blank');\n }<\/p>\n<p> return card;\n }<\/p>\n<p> \/\/ Function to filter partners\n function filterPartners(type) {\n \/\/ Update active tab\n document.querySelectorAll('.category-tab').forEach(tab => {\n tab.classList.remove('active');\n });\n event.target.classList.add('active');<\/p>\n<p> \/\/ Display filtered partners\n displayPartners(type);\n }<\/p>\n<p> \/\/ Function to show error state\n function showError() {\n const grid = document.getElementById('partnersGrid');\n grid.innerHTML = `<\/p>\n<div class=\"loading-container\" style=\"grid-column: 1 \/ -1;\">\n<div class=\"loading-content\">\n<div class=\"loading-icon\">\u26a0\ufe0f<\/div>\n<h3 class=\"loading-title\">Loading Error<\/h3>\n<p class=\"loading-subtitle\">Please refresh the page<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<p> `;\n }<\/p>\n<p> \/\/ Initialize on page load\n document.addEventListener('DOMContentLoaded', function() {\n loadPartners();<\/p>\n<p> \/\/ Create optimized floating particles (reduced count for performance)\n const particlesContainer = document.querySelector('.bg-particles');\n const particleCount = 15; \/\/ Reduced for better performance<\/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() * 15 + 's';\n particle.style.animationDuration = (12 + Math.random() * 6) + 's';\n \n const size = 3 + Math.random() * 3; \/\/ Smaller particles\n particle.style.width = size + 'px';\n particle.style.height = size + 'px';\n \n particlesContainer.appendChild(particle);\n }\n });\n <\/script><br \/>\n<\/body><br \/>\n<\/html>\n<\/div>\n<p><br \/>\n\\n <\/p>\n<div class=\"\\\"video-loading-overlay\\\"\" id=\"\\\"videoLoadingOverlay\\\"\">\\n <\/p>\n<div class=\"\\\"loading-iframe-container\\\"\">\\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>\\n <\\\/iframe>\\n <\\\/div>\\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\\\"\">\\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:#ffd700\\\"\\\/\">\\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=\"\\\"#0A1F44\\\"\" font-family=\"\\\"Montserrat\\\"\" font-size=\"\\\"24\\\"\" font-weight=\"\\\"bold\\\"\">BIFA+<\\\/text>\\n <\\\/svg>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"loader-text\\\"\">Loading BIFA+ Experience...<\\\/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 \\n <\/p>\n<div class=\"\\\"video-error-overlay\\\"\" id=\"\\\"videoErrorOverlay\\\"\">\\n <\/p>\n<div class=\"\\\"error-icon\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" xmlns=\"\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\"\">\\n <path d=\"\\\"M12\" 2c6.48 2 6.48 12s4.48 10 10-4.48 10-10s17.52 12 2zm1 15h-2v-2h2v2zm0-4h-2v7h2v6z\\\"\\>\\n <\\\/svg>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"error-message\\\"\">Video failed to load<\\\/div>\\n <button class=\"\\\"error-retry-btn\\\"\" id=\"\\\"errorRetryBtn\\\"\">Try Again<\\\/button>\\n <\\\/div>\\n\\n \\n <\/p>\n<div class=\"\\\"keyboard-hint\\\"\" id=\"\\\"keyboardHint\\\"\">\\n <kbd>Space<\\\/kbd> Play\\\/Pause\\n <\\\/div>\\n\\n <video id=\"\\\"heroVideo\\\"\" autoplay muted loop playsinline preload=\"\\\"metadata\\\"\">\\n<source src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/video.mp4\\\"\" type=\"\\\"video\\\/mp4\\\"\">\\n Your browser does not support the video tag.\\n <\\\/video>\\n\\n <\/p>\n<div class=\"\\\"controls\\\"\" id=\"\\\"controls\\\"\">\\n <\/p>\n<div class=\"\\\"controls-row\\\"\">\\n <button class=\"\\\"ctrl-btn\\\"\" id=\"\\\"playPause\\\"\" aria-label=\"\\\"Play\\\"\" aria-pressed=\"\\\"false\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" xmlns=\"\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\"\"><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=\"\\\"slider\\\"\" aria-label=\"\\\"Video\" progress\\\" aria-valuemin=\"\\\"0\\\"\" aria-valuemax=\"\\\"100\\\"\" aria-valuenow=\"\\\"0\\\"\" tabindex=\"\\\"0\\\"\">\\n <\/p>\n<div class=\"\\\"progress-buffer\\\"\" id=\"\\\"progressBuffer\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"progress-bar\\\"\" id=\"\\\"progressBar\\\"\"><\\\/div>\\n <\\\/div>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"time-display\\\"\" id=\"\\\"timeDisplay\\\"\">0:00 \\\/ 0:00<\\\/div>\\n \\n <\/p>\n<div class=\"\\\"volume-container\\\"\">\\n <button class=\"\\\"ctrl-btn\\\"\" id=\"\\\"muteToggle\\\"\" aria-label=\"\\\"Mute\\\"\" aria-pressed=\"\\\"true\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" xmlns=\"\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\"\"><path d=\"\\\"M4\" 9v6h4l5 5v4l8 9h4z\\\"\\><\\\/svg>\\n <\\\/button>\\n <\/p>\n<div class=\"\\\"volume-slider\\\"\" id=\"\\\"volumeSlider\\\"\" role=\"\\\"slider\\\"\" aria-label=\"\\\"Volume\\\"\" aria-valuemin=\"\\\"0\\\"\" aria-valuemax=\"\\\"100\\\"\" aria-valuenow=\"\\\"100\\\"\" tabindex=\"\\\"0\\\"\">\\n <\/p>\n<div class=\"\\\"volume-bar\\\"\" id=\"\\\"volumeBar\\\"\"><\\\/div>\\n <\\\/div>\\n <\\\/div>\\n \\n <button class=\"\\\"fullscreen-btn\\\"\" id=\"\\\"fullscreenBtn\\\"\" aria-label=\"\\\"Enter\" fullscreen\\\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" xmlns=\"\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\"\">\\n <path d=\"\\\"M7\" 14h5v5h5v-2h7v-3zm-2-4h2v7h3v5h5v5zm12 7h-3v2h5v-5h-2v3zm14 5v2h3v3h2v5h-5z\\\"\\>\\n <\\\/svg>\\n <\\\/button>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n\\n <\/p>\n<div class=\"\\\"video-content\\\"\">\\n <\/p>\n<div class=\"\\\"stats-bar\\\"\">\\n <\/p>\n<div class=\"\\\"stat-item\\\"\">\\n <\/p>\n<div class=\"\\\"stat-number\\\"\">11+<\\\/div>\\n <\/p>\n<div class=\"\\\"stat-label\\\"\">Na\u00e7\u00f5es do Sul Global<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"stat-item\\\"\">\\n <\/p>\n<div class=\"\\\"stat-number\\\"\">3.8B<\\\/div>\\n <\/p>\n<div class=\"\\\"stat-label\\\"\">Popula\u00e7\u00e3o Unida<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"stat-item\\\"\">\\n <\/p>\n<div class=\"\\\"stat-number\\\"\">2024<\\\/div>\\n <\/p>\n<div class=\"\\\"stat-label\\\"\">Ano de funda\u00e7\u00e3o<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"stat-item\\\"\">\\n <\/p>\n<div class=\"\\\"stat-number\\\"\">\\u221e<\\\/div>\\n <\/p>\n<div class=\"\\\"stat-label\\\"\">Potencial futuro<\\\/div>\\n <\\\/div>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"video-slogan\\\"\">\\n <span class=\"\\\"slogan-main\\\"\">BIFA+: Onde a energia do Sul Global se transforma em di\u00e1logo internacional sobre futebol<\\\/span>\\n We envision a world united through sport \\u2013 where football becomes a symbol of peace, cooperation, and shared values. \\n Through our comprehensive programs including <strong>BIFA+ Mulheres<\\\/strong>, <strong>Youth & University initiatives<\\\/strong>, \\n <strong>Jogos de eFootball<\\\/strong>e o <strong>Rede de cidades<\\\/strong>, we're building bridges between cultures \\n and creating opportunities for the next generation of global leaders.\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"buttons-container\\\"\">\\n <a href=\"\\\"https:\\\/\\\/bifa.ai\\\/initiatives\\\/\\\"\" class=\"\\\"cta-button\" primary\\\">Explorar programas<\\\/a>\\n <a href=\"\\\"https:\\\/\\\/bifa.ai\\\/about\\\/#core-team\\\"\" class=\"\\\"cta-button\" secondary\\\">Conhe\u00e7a a equipe<\\\/a>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/section>\\n<\\\/div>\\n\\n<script>\\n(function() {\\n 'use strict';\\n\\n \\\/\\\/ ========= DOM ELEMENTS =========\\n const video = document.getElementById('heroVideo');\\n const videoWrapper = document.getElementById('videoWrapper');\\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 progressBuffer = document.getElementById('progressBuffer');\\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 const loadingIframe = document.getElementById('loadingIframe');\\n const fallbackLoader = document.getElementById('fallbackLoader');\\n const errorOverlay = document.getElementById('videoErrorOverlay');\\n const errorRetryBtn = document.getElementById('errorRetryBtn');\\n const keyboardHint = document.getElementById('keyboardHint');\\n const particlesContainer = document.querySelector('.bg-particles');\\n\\n \\\/\\\/ ========= STATE =========\\n let videoReady = false;\\n let isDraggingProgress = false;\\n let isDraggingVolume = false;\\n let touchControlsTimeout = null;\\n let keyboardHintTimeout = null;\\n let isTouchDevice = false;\\n let savedVolume = 1;\\n\\n \\\/\\\/ ========= ICONS =========\\n const icons = {\\n play: '<svg viewbox=\"\\\"0\" 0 24 24\\\" xmlns=\"\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\"\"><path d=\"\\\"M8\" 5v14l11-7z\\\"\\><\\\/svg>',\\n pause: '<svg viewbox=\"\\\"0\" 0 24 24\\\" xmlns=\"\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\"\"><path d=\"\\\"M6\" 19h4v5h6zm8 0h4v5h-4z\\\"\\><\\\/svg>',\\n volumeHigh: '<svg viewbox=\"\\\"0\" 0 24 24\\\" xmlns=\"\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\"\"><path d=\"\\\"M3\" 9v6h4l5 5v4l7 9h3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zm14 3.23v2.06c2.89.86 5 3.54 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z\\\"\\><\\\/svg>',\\n volumeLow: '<svg viewbox=\"\\\"0\" 0 24 24\\\" xmlns=\"\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\"\"><path d=\"\\\"M18.5\" 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zm5 9v6h4l5 5v4l9 9h5z\\\"\\><\\\/svg>',\\n volumeMuted: '<svg viewbox=\"\\\"0\" 0 24 24\\\" xmlns=\"\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\"\"><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 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 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 19.73l-9-9l4.27 3zm12 4l9.91 6.09 12 8.18v4z\\\"\\><\\\/svg>',\\n fullscreenEnter: '<svg viewbox=\"\\\"0\" 0 24 24\\\" xmlns=\"\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\"\"><path d=\"\\\"M7\" 14h5v5h5v-2h7v-3zm-2-4h2v7h3v5h5v5zm12 7h-3v2h5v-5h-2v3zm14 5v2h3v3h2v5h-5z\\\"\\><\\\/svg>',\\n fullscreenExit: '<svg viewbox=\"\\\"0\" 0 24 24\\\" xmlns=\"\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\"\"><path d=\"\\\"M5\" 16h3v3h2v-5h5v2zm3-8h5v2h5v5h8v3zm6 11h2v-3h3v-2h-5v5zm2-11v5h-2v5h5v8h-3z\\\"\\><\\\/svg>'\\n };\\n\\n \\\/\\\/ ========= UTILITY FUNCTIONS =========\\n function formatTime(seconds) {\\n if (isNaN(seconds) || !isFinite(seconds)) return '0:00';\\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 function clamp(value, min, max) {\\n return Math.min(Math.max(value, min), max);\\n }\\n\\n function detectTouchDevice() {\\n isTouchDevice = ('ontouchstart' in window) || \\n (navigator.maxTouchPoints > 0) || \\n (navigator.msMaxTouchPoints > 0);\\n return isTouchDevice;\\n }\\n\\n \\\/\\\/ ========= LOADING SCREEN =========\\n function handleIframeLoad() {\\n console.log('Loading screen iframe loaded');\\n }\\n\\n function handleIframeError() {\\n console.log('Loading screen iframe failed, showing fallback');\\n if (loadingIframe) loadingIframe.style.display = 'none';\\n if (fallbackLoader) fallbackLoader.classList.add('active');\\n }\\n\\n function hideLoadingScreen() {\\n if (videoReady && loadingOverlay && !loadingOverlay.classList.contains('hidden')) {\\n setTimeout(() => {\\n loadingOverlay.classList.add('hidden');\\n setTimeout(() => {\\n if (loadingOverlay.parentNode) {\\n loadingOverlay.style.display = 'none';\\n }\\n }, 800);\\n }, 1500);\\n }\\n }\\n\\n function checkVideoReady() {\\n if (video.readyState >= 3 && !videoReady) {\\n videoReady = true;\\n hideLoadingScreen();\\n }\\n }\\n\\n \\\/\\\/ ========= ERROR HANDLING =========\\n function showError() {\\n if (errorOverlay) {\\n errorOverlay.classList.add('active');\\n }\\n if (loadingOverlay) {\\n loadingOverlay.classList.add('hidden');\\n }\\n }\\n\\n function hideError() {\\n if (errorOverlay) {\\n errorOverlay.classList.remove('active');\\n }\\n }\\n\\n function retryVideo() {\\n hideError();\\n if (loadingOverlay) {\\n loadingOverlay.classList.remove('hidden');\\n loadingOverlay.style.display = 'flex';\\n }\\n videoReady = false;\\n video.load();\\n video.play().catch(() => {});\\n }\\n\\n \\\/\\\/ ========= PLAY\\\/PAUSE =========\\n function togglePlay() {\\n if (video.paused) {\\n video.play().catch(err => console.warn('Play failed:', err));\\n } else {\\n video.pause();\\n }\\n }\\n\\n function updatePlayButton() {\\n const isPaused = video.paused;\\n playBtn.innerHTML = isPaused ? icons.play : icons.pause;\\n playBtn.setAttribute('aria-label', isPaused ? 'Play' : 'Pause');\\n playBtn.setAttribute('aria-pressed', !isPaused);\\n }\\n\\n \\\/\\\/ ========= VOLUME =========\\n function updateVolumeIcon() {\\n let icon;\\n if (video.muted || video.volume === 0) {\\n icon = icons.volumeMuted;\\n } else if (video.volume < 0.5) {\\n icon = icons.volumeLow;\\n } else {\\n icon = icons.volumeHigh;\\n }\\n muteBtn.innerHTML = icon;\\n muteBtn.setAttribute('aria-label', video.muted ? 'Unmute' : 'Mute');\\n muteBtn.setAttribute('aria-pressed', video.muted);\\n }\\n\\n function updateVolumeBar() {\\n const vol = video.muted ? 0 : video.volume;\\n volumeBar.style.width = (vol * 100) + '%';\\n volumeSlider.setAttribute('aria-valuenow', Math.round(vol * 100));\\n }\\n\\n function setVolume(value) {\\n video.volume = clamp(value, 0, 1);\\n if (value > 0) {\\n video.muted = false;\\n savedVolume = value;\\n }\\n updateVolumeIcon();\\n updateVolumeBar();\\n }\\n\\n function toggleMute() {\\n if (video.muted || video.volume === 0) {\\n video.muted = false;\\n video.volume = savedVolume > 0 ? savedVolume : 0.5;\\n } else {\\n savedVolume = video.volume;\\n video.muted = true;\\n }\\n updateVolumeIcon();\\n updateVolumeBar();\\n }\\n\\n \\\/\\\/ ========= PROGRESS =========\\n function updateProgress() {\\n if (!isDraggingProgress && video.duration) {\\n const percent = (video.currentTime \\\/ video.duration) * 100;\\n progressBar.style.width = percent + '%';\\n progress.setAttribute('aria-valuenow', Math.round(percent));\\n }\\n timeDisplay.textContent = `${formatTime(video.currentTime)} \\\/ ${formatTime(video.duration)}`;\\n }\\n\\n function updateBuffer() {\\n if (video.buffered.length > 0) {\\n const bufferedEnd = video.buffered.end(video.buffered.length - 1);\\n const duration = video.duration;\\n if (duration > 0) {\\n progressBuffer.style.width = (bufferedEnd \\\/ duration * 100) + '%';\\n }\\n }\\n }\\n\\n function seekTo(percent) {\\n if (video.duration) {\\n video.currentTime = clamp(percent, 0, 1) * video.duration;\\n }\\n }\\n\\n function getProgressPercent(e, element) {\\n const rect = element.getBoundingClientRect();\\n const clientX = e.touches ? e.touches[0].clientX : e.clientX;\\n return clamp((clientX - rect.left) \\\/ rect.width, 0, 1);\\n }\\n\\n \\\/\\\/ ========= FULLSCREEN =========\\n function isFullscreen() {\\n return !!(document.fullscreenElement || document.webkitFullscreenElement || \\n document.mozFullScreenElement || document.msFullscreenElement);\\n }\\n\\n function enterFullscreen() {\\n const elem = videoWrapper;\\n if (elem.requestFullscreen) {\\n elem.requestFullscreen();\\n } else if (elem.webkitRequestFullscreen) {\\n elem.webkitRequestFullscreen();\\n } else if (elem.mozRequestFullScreen) {\\n elem.mozRequestFullScreen();\\n } else if (elem.msRequestFullscreen) {\\n elem.msRequestFullscreen();\\n } else if (video.webkitEnterFullscreen) {\\n \\\/\\\/ iOS Safari fallback\\n video.webkitEnterFullscreen();\\n }\\n }\\n\\n function exitFullscreen() {\\n if (document.exitFullscreen) {\\n document.exitFullscreen();\\n } else if (document.webkitExitFullscreen) {\\n document.webkitExitFullscreen();\\n } else if (document.mozCancelFullScreen) {\\n document.mozCancelFullScreen();\\n } else if (document.msExitFullscreen) {\\n document.msExitFullscreen();\\n }\\n }\\n\\n function toggleFullscreen() {\\n if (isFullscreen()) {\\n exitFullscreen();\\n } else {\\n enterFullscreen();\\n }\\n }\\n\\n function updateFullscreenButton() {\\n const fs = isFullscreen();\\n fullscreenBtn.innerHTML = fs ? icons.fullscreenExit : icons.fullscreenEnter;\\n fullscreenBtn.setAttribute('aria-label', fs ? 'Exit fullscreen' : 'Enter fullscreen');\\n }\\n\\n \\\/\\\/ ========= KEYBOARD HINT =========\\n function showKeyboardHint(text) {\\n keyboardHint.innerHTML = text;\\n keyboardHint.classList.add('visible');\\n \\n clearTimeout(keyboardHintTimeout);\\n keyboardHintTimeout = setTimeout(() => {\\n keyboardHint.classList.remove('visible');\\n }, 1000);\\n }\\n\\n \\\/\\\/ ========= TOUCH CONTROLS =========\\n function showTouchControls() {\\n videoWrapper.classList.add('touch-active');\\n clearTimeout(touchControlsTimeout);\\n touchControlsTimeout = setTimeout(() => {\\n if (!video.paused) {\\n videoWrapper.classList.remove('touch-active');\\n }\\n }, 3000);\\n }\\n\\n \\\/\\\/ ========= EVENT LISTENERS =========\\n \\n \\\/\\\/ Loading iframe events\\n if (loadingIframe) {\\n loadingIframe.addEventListener('load', handleIframeLoad);\\n loadingIframe.addEventListener('error', handleIframeError);\\n }\\n\\n \\\/\\\/ Video events\\n video.addEventListener('loadeddata', checkVideoReady);\\n video.addEventListener('canplay', checkVideoReady);\\n video.addEventListener('canplaythrough', () => {\\n videoReady = true;\\n hideLoadingScreen();\\n });\\n video.addEventListener('play', updatePlayButton);\\n video.addEventListener('pause', updatePlayButton);\\n video.addEventListener('timeupdate', updateProgress);\\n video.addEventListener('progress', updateBuffer);\\n video.addEventListener('volumechange', () => {\\n updateVolumeIcon();\\n updateVolumeBar();\\n });\\n video.addEventListener('error', (e) => {\\n console.error('Video error:', e);\\n showError();\\n });\\n video.addEventListener('stalled', () => {\\n console.warn('Video stalled');\\n });\\n\\n \\\/\\\/ Fallback: \\u0441\\u043a\\u0440\\u044b\\u0442\\u044c loading \\u0447\\u0435\\u0440\\u0435\\u0437 8 \\u0441\\u0435\\u043a\\u0443\\u043d\\u0434\\n setTimeout(() => {\\n if (!loadingOverlay.classList.contains('hidden')) {\\n videoReady = true;\\n hideLoadingScreen();\\n }\\n }, 8000);\\n\\n \\\/\\\/ Error retry button\\n if (errorRetryBtn) {\\n errorRetryBtn.addEventListener('click', retryVideo);\\n }\\n\\n \\\/\\\/ Play\\\/Pause button\\n playBtn.addEventListener('click', togglePlay);\\n\\n \\\/\\\/ Mute button\\n muteBtn.addEventListener('click', toggleMute);\\n\\n \\\/\\\/ Progress bar - Click\\n progress.addEventListener('click', (e) => {\\n if (!isDraggingProgress) {\\n seekTo(getProgressPercent(e, progress));\\n }\\n });\\n\\n \\\/\\\/ Progress bar - Drag (mouse)\\n progress.addEventListener('mousedown', (e) => {\\n isDraggingProgress = true;\\n progress.classList.add('dragging');\\n seekTo(getProgressPercent(e, progress));\\n });\\n\\n document.addEventListener('mousemove', (e) => {\\n if (isDraggingProgress) {\\n const percent = getProgressPercent(e, progress);\\n progressBar.style.width = (percent * 100) + '%';\\n seekTo(percent);\\n }\\n });\\n\\n document.addEventListener('mouseup', () => {\\n if (isDraggingProgress) {\\n isDraggingProgress = false;\\n progress.classList.remove('dragging');\\n }\\n });\\n\\n \\\/\\\/ Progress bar - Drag (touch)\\n progress.addEventListener('touchstart', (e) => {\\n isDraggingProgress = true;\\n progress.classList.add('dragging');\\n seekTo(getProgressPercent(e, progress));\\n }, { passive: true });\\n\\n progress.addEventListener('touchmove', (e) => {\\n if (isDraggingProgress) {\\n const percent = getProgressPercent(e, progress);\\n progressBar.style.width = (percent * 100) + '%';\\n seekTo(percent);\\n }\\n }, { passive: true });\\n\\n progress.addEventListener('touchend', () => {\\n isDraggingProgress = false;\\n progress.classList.remove('dragging');\\n });\\n\\n \\\/\\\/ Volume slider - Click\\n volumeSlider.addEventListener('click', (e) => {\\n if (!isDraggingVolume) {\\n setVolume(getProgressPercent(e, volumeSlider));\\n }\\n });\\n\\n \\\/\\\/ Volume slider - Drag (mouse)\\n volumeSlider.addEventListener('mousedown', (e) => {\\n isDraggingVolume = true;\\n setVolume(getProgressPercent(e, volumeSlider));\\n });\\n\\n document.addEventListener('mousemove', (e) => {\\n if (isDraggingVolume) {\\n setVolume(getProgressPercent(e, volumeSlider));\\n }\\n });\\n\\n document.addEventListener('mouseup', () => {\\n isDraggingVolume = false;\\n });\\n\\n \\\/\\\/ Volume slider - Drag (touch)\\n volumeSlider.addEventListener('touchstart', (e) => {\\n isDraggingVolume = true;\\n setVolume(getProgressPercent(e, volumeSlider));\\n }, { passive: true });\\n\\n volumeSlider.addEventListener('touchmove', (e) => {\\n if (isDraggingVolume) {\\n setVolume(getProgressPercent(e, volumeSlider));\\n }\\n }, { passive: true });\\n\\n volumeSlider.addEventListener('touchend', () => {\\n isDraggingVolume = false;\\n });\\n\\n \\\/\\\/ Fullscreen button\\n fullscreenBtn.addEventListener('click', toggleFullscreen);\\n\\n \\\/\\\/ Double-click for fullscreen\\n videoWrapper.addEventListener('dblclick', (e) => {\\n \\\/\\\/ \\u041d\\u0435 \\u0441\\u0440\\u0430\\u0431\\u0430\\u0442\\u044b\\u0432\\u0430\\u0435\\u0442 \\u043d\\u0430 \\u043a\\u043e\\u043d\\u0442\\u0440\\u043e\\u043b\\u0430\\u0445\\n if (e.target.closest('.controls')) return;\\n toggleFullscreen();\\n });\\n\\n \\\/\\\/ Fullscreen change events\\n const fullscreenEvents = ['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange', 'MSFullscreenChange'];\\n fullscreenEvents.forEach(event => {\\n document.addEventListener(event, updateFullscreenButton);\\n });\\n\\n \\\/\\\/ Touch: tap to show\\\/hide controls\\n videoWrapper.addEventListener('touchstart', (e) => {\\n if (!e.target.closest('.controls') && !e.target.closest('.ctrl-btn') && !e.target.closest('.fullscreen-btn')) {\\n showTouchControls();\\n }\\n }, { passive: true });\\n\\n \\\/\\\/ Click on video to play\\\/pause (but not on controls)\\n videoWrapper.addEventListener('click', (e) => {\\n if (!e.target.closest('.controls') && \\n !e.target.closest('.ctrl-btn') && \\n !e.target.closest('.fullscreen-btn') &&\\n !e.target.closest('.video-loading-overlay') &&\\n !e.target.closest('.video-error-overlay')) {\\n \\n \\\/\\\/ \\u041d\\u0430 touch \\u0443\\u0441\\u0442\\u0440\\u043e\\u0439\\u0441\\u0442\\u0432\\u0430\\u0445 \\u043f\\u0435\\u0440\\u0432\\u044b\\u0439 \\u0442\\u0430\\u043f \\u043f\\u043e\\u043a\\u0430\\u0437\\u044b\\u0432\\u0430\\u0435\\u0442 \\u043a\\u043e\\u043d\\u0442\\u0440\\u043e\\u043b\\u044b\\n if (isTouchDevice && !videoWrapper.classList.contains('touch-active')) {\\n showTouchControls();\\n return;\\n }\\n \\n togglePlay();\\n }\\n });\\n\\n \\\/\\\/ ========= KEYBOARD CONTROLS =========\\n videoWrapper.addEventListener('keydown', (e) => {\\n \\\/\\\/ \\u0418\\u0433\\u043d\\u043e\\u0440\\u0438\\u0440\\u0443\\u0435\\u043c \\u0435\\u0441\\u043b\\u0438 \\u0444\\u043e\\u043a\\u0443\\u0441 \\u043d\\u0430 \\u043a\\u043d\\u043e\\u043f\\u043a\\u0430\\u0445\\n if (e.target.tagName === 'BUTTON') return;\\n\\n switch (e.key) {\\n case ' ':\\n case 'k':\\n e.preventDefault();\\n togglePlay();\\n showKeyboardHint(video.paused ? '<kbd>Space<\\\/kbd> Paused' : '<kbd>Space<\\\/kbd> Playing');\\n break;\\n \\n case 'ArrowLeft':\\n e.preventDefault();\\n video.currentTime = Math.max(0, video.currentTime - 5);\\n showKeyboardHint('<kbd>\\u2190<\\\/kbd> -5s');\\n break;\\n \\n case 'ArrowRight':\\n e.preventDefault();\\n video.currentTime = Math.min(video.duration, video.currentTime + 5);\\n showKeyboardHint('<kbd>\\u2192<\\\/kbd> +5s');\\n break;\\n \\n case 'ArrowUp':\\n e.preventDefault();\\n setVolume(video.volume + 0.1);\\n showKeyboardHint(`<kbd>\\u2191<\\\/kbd> Volume ${Math.round(video.volume * 100)}%`);\\n break;\\n \\n case 'ArrowDown':\\n e.preventDefault();\\n setVolume(video.volume - 0.1);\\n showKeyboardHint(`<kbd>\\u2193<\\\/kbd> Volume ${Math.round(video.volume * 100)}%`);\\n break;\\n \\n case 'm':\\n case 'M':\\n e.preventDefault();\\n toggleMute();\\n showKeyboardHint(video.muted ? '<kbd>M<\\\/kbd> Muted' : '<kbd>M<\\\/kbd> Unmuted');\\n break;\\n \\n case 'f':\\n case 'F':\\n e.preventDefault();\\n toggleFullscreen();\\n break;\\n \\n case 'Home':\\n e.preventDefault();\\n video.currentTime = 0;\\n showKeyboardHint('<kbd>Home<\\\/kbd> Start');\\n break;\\n \\n case 'End':\\n e.preventDefault();\\n video.currentTime = video.duration;\\n showKeyboardHint('<kbd>End<\\\/kbd> End');\\n break;\\n \\n \\\/\\\/ \\u0426\\u0438\\u0444\\u0440\\u044b 0-9 \\u0434\\u043b\\u044f seek \\u043a \\u043f\\u0440\\u043e\\u0446\\u0435\\u043d\\u0442\\u0443 \\u0432\\u0438\\u0434\\u0435\\u043e\\n case '0': case '1': case '2': case '3': case '4':\\n case '5': case '6': case '7': case '8': case '9':\\n e.preventDefault();\\n const percent = parseInt(e.key) \\\/ 10;\\n video.currentTime = video.duration * percent;\\n showKeyboardHint(`<kbd>${e.key}<\\\/kbd> ${percent * 100}%`);\\n break;\\n }\\n });\\n\\n \\\/\\\/ Progress bar keyboard\\n progress.addEventListener('keydown', (e) => {\\n const step = video.duration \\\/ 100; \\\/\\\/ 1%\\n \\n switch (e.key) {\\n case 'ArrowLeft':\\n e.preventDefault();\\n video.currentTime = Math.max(0, video.currentTime - step * 5);\\n break;\\n case 'ArrowRight':\\n e.preventDefault();\\n video.currentTime = Math.min(video.duration, video.currentTime + step * 5);\\n break;\\n }\\n });\\n\\n \\\/\\\/ Volume slider keyboard\\n volumeSlider.addEventListener('keydown', (e) => {\\n switch (e.key) {\\n case 'ArrowLeft':\\n case 'ArrowDown':\\n e.preventDefault();\\n setVolume(video.volume - 0.05);\\n break;\\n case 'ArrowRight':\\n case 'ArrowUp':\\n e.preventDefault();\\n setVolume(video.volume + 0.05);\\n break;\\n }\\n });\\n\\n \\\/\\\/ ========= PARTICLES =========\\n function createParticles() {\\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() * 15 + 's';\\n particle.style.animationDuration = (12 + 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 \\\/\\\/ ========= INIT =========\\n function init() {\\n detectTouchDevice();\\n updatePlayButton();\\n updateVolumeIcon();\\n updateVolumeBar();\\n updateFullscreenButton();\\n createParticles();\\n \\n \\\/\\\/ \\u041d\\u0430\\u0447\\u0430\\u043b\\u044c\\u043d\\u043e\\u0435 \\u0441\\u043e\\u0441\\u0442\\u043e\\u044f\\u043d\\u0438\\u0435\\n video.volume = 1;\\n savedVolume = 1;\\n }\\n\\n \\\/\\\/ \\u0417\\u0430\\u043f\\u0443\\u0441\\u043a \\u043f\\u0440\\u0438 DOM ready\\n if (document.readyState === 'loading') {\\n document.addEventListener('DOMContentLoaded', init);\\n } else {\\n init();\\n }\\n\\n \\\/\\\/ ========= CLEANUP (\\u0434\\u043b\\u044f SPA) =========\\n window.addEventListener('beforeunload', () => {\\n fullscreenEvents.forEach(event => {\\n document.removeEventListener(event, updateFullscreenButton);\\n });\\n });\\n\\n})();\\n<\\\/script>\\n<\\\/body>\\n<\\\/html>\"}},{\"type\":\"html\",\"props\":{\"content\":\"<!DOCTYPE html>\\n<html lang=\"\\\"ru\\\"\">\\n<head>\\n<meta charset=\"\\\"UTF-8\\\"\">\\n<meta name=\"\\\"viewport\\\"\" content=\"\\\"width=device-width,\" initial-scale=\"1.0\\\"\">\\n<title>BIFA+ News Center - Premium Design<\\\/title>\\n<link rel=\"\\\"preconnect\\\"\" href=\"\\\"https:\\\/\\\/fonts.googleapis.com\\\"\">\\n<link rel=\"\\\"preconnect\\\"\" href=\"\\\"https:\\\/\\\/fonts.gstatic.com\\\"\" crossorigin>\\n\\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&family=Cairo:wght@300;400;500;600;700;800&family=Tajawal:wght@300;400;500;700;800&display=swap\\\"\" rel=\"\\\"stylesheet\\\"\">\\n\\n<\/p>\n<style>\\n\\\/* ========= \\u0413\\u041b\\u041e\\u0411\\u0410\\u041b\\u042c\\u041d\\u042b\\u0415 \\u041f\\u0415\\u0420\\u0415\\u041c\\u0415\\u041d\\u041d\\u042b\\u0415 BIFA+ ========= *\\\/\\n:root {\\n \\\/* \\u041e\\u0444\\u0438\\u0446\\u0438\\u0430\\u043b\\u044c\\u043d\\u044b\\u0435 \\u0446\\u0432\\u0435\\u0442\\u0430 BIFA+ *\\\/\\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 --bifa-gray-light: #F8F9FA;\\n --bifa-gray: #6C757D;\\n \\n \\\/* \\u041e\\u0444\\u0438\\u0446\\u0438\\u0430\\u043b\\u044c\\u043d\\u044b\\u0435 \\u0448\\u0440\\u0438\\u0444\\u0442\\u044b BIFA+ *\\\/\\n --bifa-font-heading: 'Montserrat', 'Cairo', sans-serif;\\n --bifa-font-body: 'Poppins', 'Tajawal', sans-serif;\\n --bifa-font-arabic: 'Cairo', 'Tajawal', 'GE SS Text', sans-serif;\\n \\n \\\/* \\u041f\\u0440\\u0435\\u043c\\u0438\\u0430\\u043b\\u044c\\u043d\\u044b\\u0435 \\u0442\\u0435\\u043d\\u0438 \\u0438 \\u044d\\u0444\\u0444\\u0435\\u043a\\u0442\\u044b *\\\/\\n --bifa-shadow-premium: 0 25px 80px rgba(10, 31, 68, 0.15);\\n --bifa-shadow-hover: 0 35px 100px rgba(10, 31, 68, 0.2);\\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\\n\\\/* ========= RESET ========= *\\\/\\n* {\\n margin: 0;\\n padding: 0;\\n box-sizing: border-box;\\n}\\n\\nbody {\\n font-family: var(--bifa-font-body);\\n background: var(--bifa-bright-white);\\n overflow-x: hidden;\\n color: var(--bifa-soft-black);\\n}\\n\\n\\\/* ========= NEWS SECTION WRAPPER ========= *\\\/\\n.news-section-wrapper {\\n width: 100vw;\\n position: relative;\\n left: 50%;\\n margin-left: -50vw;\\n background: transparent;\\n overflow: hidden;\\n}\\n\\n\\\/* ========= MAIN NEWS SECTION ========= *\\\/\\n.bifa-news-section {\\n min-height: auto;\\n padding: 40px 0 60px 0;\\n position: relative;\\n background: transparent;\\n}\\n\\n\\\/* ========= ANIMATED BACKGROUND ========= *\\\/\\n.news-bg-animation {\\n position: absolute;\\n width: 100%;\\n height: 100%;\\n overflow: hidden;\\n z-index: 1;\\n top: 0;\\n left: 0;\\n}\\n\\n\\\/* \\u0417\\u043e\\u043b\\u043e\\u0442\\u044b\\u0435 \\u0447\\u0430\\u0441\\u0442\\u0438\\u0446\\u044b - \\u0442\\u0430\\u043a\\u0438\\u0435 \\u0436\\u0435 \\u043a\\u0430\\u043a \\u0432 \\u0432\\u0438\\u0434\\u0435\\u043e \\u0441\\u0435\\u043a\\u0446\\u0438\\u0438 *\\\/\\n.news-particle {\\n position: absolute;\\n width: 3px;\\n height: 3px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n border-radius: 50%;\\n animation: floatNews 20s infinite linear;\\n box-shadow: 0 0 6px rgba(212, 175, 55, 0.2);\\n opacity: 0.2;\\n will-change: transform;\\n}\\n\\n@keyframes floatNews {\\n 0% {\\n transform: translateY(100vh) translateX(0) rotate(0deg);\\n opacity: 0;\\n }\\n 10% { opacity: 0.3; }\\n 90% { opacity: 0.3; }\\n 100% {\\n transform: translateY(-100vh) translateX(80px) rotate(360deg);\\n opacity: 0;\\n }\\n}\\n\\n\\\/* \\u041f\\u043b\\u0430\\u0432\\u0430\\u044e\\u0449\\u0438\\u0435 \\u0433\\u0435\\u043e\\u043c\\u0435\\u0442\\u0440\\u0438\\u0447\\u0435\\u0441\\u043a\\u0438\\u0435 \\u0444\\u0438\\u0433\\u0443\\u0440\\u044b *\\\/\\n.floating-shape {\\n position: absolute;\\n border-radius: 50%;\\n filter: blur(120px);\\n animation: morphFloat 25s ease-in-out infinite;\\n pointer-events: none;\\n opacity: 0.5;\\n}\\n\\n.shape-news-1 {\\n width: 400px;\\n height: 400px;\\n background: radial-gradient(circle at 30% 30%, rgba(212, 175, 55, 0.08), transparent);\\n top: -200px;\\n right: -200px;\\n}\\n\\n.shape-news-2 {\\n width: 350px;\\n height: 350px;\\n background: radial-gradient(circle at 70% 70%, rgba(10, 31, 68, 0.05), transparent);\\n bottom: -175px;\\n left: -175px;\\n animation-delay: 8s;\\n}\\n\\n.shape-news-3 {\\n width: 300px;\\n height: 300px;\\n background: radial-gradient(circle at 50% 50%, rgba(29, 97, 67, 0.06), transparent);\\n top: 40%;\\n left: 60%;\\n animation-delay: 16s;\\n}\\n\\n@keyframes morphFloat {\\n 0%, 100% { \\n transform: translate(0, 0) scale(1) rotate(0deg);\\n filter: blur(100px);\\n }\\n 25% { \\n transform: translate(100px, -80px) scale(1.2) rotate(90deg);\\n filter: blur(120px);\\n }\\n 50% { \\n transform: translate(-80px, 100px) scale(0.8) rotate(180deg);\\n filter: blur(80px);\\n }\\n 75% { \\n transform: translate(-120px, -60px) scale(1.1) rotate(270deg);\\n filter: blur(110px);\\n }\\n}\\n\\n\\\/* ========= CONTAINER ========= *\\\/\\n.bifa-container {\\n max-width: 1400px;\\n margin: 0 auto;\\n padding: 0 20px;\\n position: relative;\\n z-index: 10;\\n}\\n\\n\\\/* ========= SECTION HEADER - Premium Style ========= *\\\/\\n.bifa-section-header {\\n text-align: center;\\n margin-bottom: 60px;\\n animation: fadeInDown 1.2s ease;\\n}\\n\\n.bifa-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), #ffd700);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n margin-bottom: 15px;\\n text-transform: uppercase;\\n position: relative;\\n display: inline-block;\\n cursor: pointer;\\n transition: all 0.3s ease;\\n}\\n\\n.bifa-section-title::after {\\n content: '';\\n position: absolute;\\n bottom: -10px;\\n left: 50%;\\n transform: translateX(-50%);\\n width: 0;\\n height: 3px;\\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700);\\n transition: width 0.4s ease;\\n}\\n\\n.bifa-section-title:hover {\\n transform: translateY(-3px);\\n filter: drop-shadow(0 10px 20px rgba(212, 175, 55, 0.3));\\n}\\n\\n.bifa-section-title:hover::after {\\n width: 100%;\\n}\\n\\n\\\/* \\u041f\\u043e\\u0434\\u0437\\u0430\\u0433\\u043e\\u043b\\u043e\\u0432\\u043e\\u043a \\u0441\\u0435\\u043a\\u0446\\u0438\\u0438 *\\\/\\n.bifa-section-subtitle {\\n font-family: var(--bifa-font-heading);\\n font-size: clamp(1.1rem, 2vw, 1.5rem);\\n color: var(--bifa-deep-navy);\\n font-weight: 600;\\n letter-spacing: 1.5px;\\n margin-bottom: 15px;\\n opacity: 0;\\n animation: fadeInUp 1.2s ease 0.3s forwards;\\n}\\n\\n.bifa-section-description {\\n max-width: 800px;\\n margin: 0 auto;\\n font-family: var(--bifa-font-body);\\n font-size: clamp(0.95rem, 1.3vw, 1.1rem);\\n line-height: 1.7;\\n color: #4a5568;\\n opacity: 0;\\n animation: fadeInUp 1.2s ease 0.6s forwards;\\n}\\n\\n\\\/* ========= LOADING STATE - Premium ========= *\\\/\\n.bifa-loading-container {\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n justify-content: center;\\n min-height: 400px;\\n gap: 30px;\\n}\\n\\n.bifa-loader {\\n width: 80px;\\n height: 80px;\\n position: relative;\\n}\\n\\n.bifa-loader-ring {\\n position: absolute;\\n width: 100%;\\n height: 100%;\\n border: 3px solid transparent;\\n border-radius: 50%;\\n animation: loaderSpin 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;\\n}\\n\\n.bifa-loader-ring:nth-child(1) {\\n border-top-color: var(--bifa-heritage-gold);\\n animation-delay: 0s;\\n}\\n\\n.bifa-loader-ring:nth-child(2) {\\n width: 70%;\\n height: 70%;\\n top: 15%;\\n left: 15%;\\n border-right-color: var(--bifa-deep-navy);\\n animation-delay: 0.2s;\\n animation-direction: reverse;\\n}\\n\\n.bifa-loader-ring:nth-child(3) {\\n width: 40%;\\n height: 40%;\\n top: 30%;\\n left: 30%;\\n border-bottom-color: var(--bifa-civic-green);\\n animation-delay: 0.4s;\\n}\\n\\n@keyframes loaderSpin {\\n 0% { \\n transform: rotate(0deg) scale(1);\\n }\\n 50% {\\n transform: rotate(180deg) scale(1.1);\\n }\\n 100% { \\n transform: rotate(360deg) scale(1);\\n }\\n}\\n\\n.loading-text {\\n font-family: var(--bifa-font-heading);\\n font-size: 1.2rem;\\n font-weight: 700;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n animation: textGlow 2s ease-in-out infinite;\\n}\\n\\n\\\/* ========= HERO NEWS CARD - Premium \\u0428\\u0418\\u0420\\u041e\\u041a\\u0418\\u0419 \\u0414\\u0418\\u0417\\u0410\\u0419\\u041d ========= *\\\/\\n.bifa-hero-news {\\n margin-bottom: 80px;\\n opacity: 0;\\n animation: fadeInUp 1.2s ease 0.2s forwards;\\n}\\n\\n.bifa-hero-card {\\n background: white;\\n backdrop-filter: blur(20px);\\n border-radius: 25px;\\n overflow: hidden;\\n box-shadow: 0 10px 40px rgba(10, 31, 68, 0.08);\\n transition: var(--bifa-transition);\\n cursor: pointer;\\n position: relative;\\n border: none;\\n}\\n\\n.bifa-hero-card::before {\\n content: '';\\n position: absolute;\\n top: 0;\\n left: 0;\\n right: 0;\\n height: 3px;\\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700, var(--bifa-heritage-gold));\\n transform: scaleX(0);\\n transition: transform 0.3s ease;\\n}\\n\\n.bifa-hero-card:hover::before {\\n transform: scaleX(1);\\n}\\n\\n.bifa-hero-card:hover {\\n transform: translateY(-8px);\\n box-shadow: 0 20px 60px rgba(10, 31, 68, 0.12);\\n}\\n\\n\\\/* \\u041d\\u041e\\u0412\\u042b\\u0419 \\u0428\\u0418\\u0420\\u041e\\u041a\\u0418\\u0419 \\u0414\\u0418\\u0417\\u0410\\u0419\\u041d \\u0414\\u041b\\u042f \\u0412\\u0421\\u0415\\u0425 \\u0423\\u0421\\u0422\\u0420\\u041e\\u0419\\u0421\\u0422\\u0412 *\\\/\\n.bifa-hero-wrapper {\\n display: block;\\n min-height: 650px;\\n}\\n\\n.bifa-hero-image {\\n position: relative;\\n background-size: cover;\\n background-position: center;\\n overflow: hidden;\\n height: 500px;\\n width: 100%;\\n}\\n\\n\\\/* \\u0413\\u0440\\u0430\\u0434\\u0438\\u0435\\u043d\\u0442\\u043d\\u044b\\u0439 \\u043e\\u0432\\u0435\\u0440\\u043b\\u0435\\u0439 \\u0441 \\u0430\\u043d\\u0438\\u043c\\u0430\\u0446\\u0438\\u0435\\u0439 *\\\/\\n.bifa-hero-image::before {\\n content: '';\\n position: absolute;\\n inset: 0;\\n background: linear-gradient(180deg, \\n transparent 0%, \\n rgba(10, 31, 68, 0.3) 60%,\\n rgba(10, 31, 68, 0.8) 100%\\n );\\n opacity: 0.6;\\n transition: opacity 0.3s ease;\\n}\\n\\n.bifa-hero-card:hover .bifa-hero-image::before {\\n opacity: 1;\\n}\\n\\n\\\/* \\u0417\\u043e\\u043b\\u043e\\u0442\\u043e\\u0439 \\u0430\\u043a\\u0446\\u0435\\u043d\\u0442 \\u043d\\u0430 \\u0438\\u0437\\u043e\\u0431\\u0440\\u0430\\u0436\\u0435\\u043d\\u0438\\u0438 *\\\/\\n.bifa-hero-image::after {\\n content: '';\\n position: absolute;\\n top: -50%;\\n left: -50%;\\n width: 200%;\\n height: 200%;\\n background: linear-gradient(45deg, \\n transparent 30%, \\n rgba(212, 175, 55, 0.2) 50%, \\n transparent 70%\\n );\\n transform: rotate(45deg) translateY(-100%);\\n transition: transform 0.8s ease;\\n}\\n\\n.bifa-hero-card:hover .bifa-hero-image::after {\\n transform: rotate(45deg) translateY(100%);\\n}\\n\\n.bifa-hero-image-overlay {\\n position: absolute;\\n top: 40px;\\n left: 40px;\\n display: flex;\\n gap: 20px;\\n z-index: 2;\\n flex-wrap: wrap;\\n}\\n\\n.bifa-hero-badge {\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n color: var(--bifa-deep-navy);\\n padding: 12px 28px;\\n border-radius: 35px;\\n font-family: var(--bifa-font-heading);\\n font-weight: 800;\\n font-size: 0.95rem;\\n text-transform: uppercase;\\n letter-spacing: 1.2px;\\n box-shadow: 0 10px 25px rgba(212, 175, 55, 0.3);\\n transition: all 0.3s ease;\\n}\\n\\n\\\/* \\u041f\\u0440\\u0438\\u043e\\u0440\\u0438\\u0442\\u0435\\u0442\\u043d\\u044b\\u0439 \\u0431\\u0435\\u0439\\u0434\\u0436 \\u0434\\u043b\\u044f \\u0441\\u0440\\u043e\\u0447\\u043d\\u044b\\u0445 \\u043d\\u043e\\u0432\\u043e\\u0441\\u0442\\u0435\\u0439 *\\\/\\n.bifa-hero-badge.urgent {\\n background: linear-gradient(135deg, #dc2626, #ef4444);\\n color: white;\\n box-shadow: 0 10px 25px rgba(220, 38, 38, 0.4);\\n animation: pulse-urgent 2s ease-in-out infinite;\\n}\\n\\n@keyframes pulse-urgent {\\n 0%, 100% { \\n transform: scale(1);\\n box-shadow: 0 10px 25px rgba(220, 38, 38, 0.4);\\n }\\n 50% { \\n transform: scale(1.05);\\n box-shadow: 0 15px 35px rgba(220, 38, 38, 0.6);\\n }\\n}\\n\\n.bifa-hero-badge:hover {\\n transform: translateY(-3px);\\n box-shadow: 0 15px 35px rgba(212, 175, 55, 0.4);\\n}\\n\\n.bifa-hero-date {\\n background: rgba(255, 255, 255, 0.95);\\n backdrop-filter: blur(10px);\\n color: var(--bifa-deep-navy);\\n padding: 12px 28px;\\n border-radius: 35px;\\n font-family: var(--bifa-font-body);\\n font-weight: 600;\\n font-size: 0.9rem;\\n box-shadow: 0 10px 25px rgba(10, 31, 68, 0.1);\\n}\\n\\n.bifa-hero-content {\\n padding: 60px 50px;\\n display: flex;\\n flex-direction: column;\\n justify-content: center;\\n align-items: center;\\n text-align: center;\\n background: linear-gradient(135deg, \\n rgba(255, 255, 255, 0.8) 0%, \\n rgba(248, 249, 250, 0.8) 100%\\n );\\n}\\n\\n.bifa-hero-title {\\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 line-height: 1.2;\\n margin-bottom: 25px;\\n position: relative;\\n text-align: center;\\n}\\n\\n.bifa-hero-title::after {\\n content: '';\\n position: absolute;\\n bottom: -10px;\\n left: 50%;\\n transform: translateX(-50%);\\n width: 60px;\\n height: 3px;\\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700);\\n border-radius: 2px;\\n}\\n\\n.bifa-hero-excerpt {\\n font-family: var(--bifa-font-body);\\n font-size: 1.15rem;\\n color: #4a5568;\\n line-height: 1.8;\\n margin-bottom: 35px;\\n text-align: center;\\n max-width: 900px;\\n}\\n\\n.bifa-hero-footer {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n gap: 30px;\\n width: 100%;\\n}\\n\\n.bifa-hero-btn {\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n gap: 10px;\\n background: var(--bifa-deep-navy);\\n color: #FFD700;\\n padding: 18px 45px;\\n border-radius: 50px;\\n font-family: var(--bifa-font-heading);\\n font-weight: 700;\\n font-size: 0.9rem;\\n text-decoration: none;\\n text-transform: uppercase;\\n letter-spacing: 1.5px;\\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\\n box-shadow: 0 4px 15px rgba(10, 31, 68, 0.2);\\n position: relative;\\n overflow: hidden;\\n border: 1.5px solid #FFD700;\\n min-width: 180px;\\n text-align: center;\\n}\\n\\n.bifa-hero-btn span {\\n position: relative;\\n z-index: 1;\\n background: linear-gradient(135deg, #FFD700, #FFA500);\\n -webkit-background-clip: text;\\n background-clip: text;\\n -webkit-text-fill-color: transparent;\\n font-weight: 800;\\n text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);\\n}\\n\\n.bifa-hero-btn::before {\\n content: '';\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 0;\\n height: 100%;\\n background: linear-gradient(135deg, #FFD700, #FFA500);\\n transition: width 0.4s ease;\\n z-index: 0;\\n}\\n\\n.bifa-hero-btn::after {\\n content: '';\\n position: absolute;\\n inset: -2px;\\n background: linear-gradient(135deg, #FFD700, #FFA500);\\n border-radius: 50px;\\n opacity: 0.3;\\n filter: blur(10px);\\n z-index: -1;\\n transition: opacity 0.4s ease;\\n}\\n\\n.bifa-hero-btn:hover {\\n transform: translateY(-2px);\\n box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);\\n border-color: transparent;\\n}\\n\\n.bifa-hero-btn:hover span {\\n background: var(--bifa-deep-navy);\\n -webkit-background-clip: text;\\n background-clip: text;\\n -webkit-text-fill-color: transparent;\\n text-shadow: none;\\n}\\n\\n.bifa-hero-btn:hover::before {\\n width: 100%;\\n}\\n\\n.bifa-hero-btn:hover::after {\\n opacity: 0.5;\\n}\\n\\n.bifa-hero-btn:active {\\n transform: translateY(0);\\n box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);\\n}\\n\\n.bifa-hero-btn svg {\\n width: 18px;\\n height: 18px;\\n transition: transform 0.3s ease;\\n stroke: #FFD700;\\n position: relative;\\n z-index: 1;\\n filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.5));\\n}\\n\\n.bifa-hero-btn:hover svg {\\n transform: translateX(5px);\\n stroke: var(--bifa-deep-navy);\\n filter: none;\\n}\\n\\n\\\/* Stats \\u044d\\u043b\\u0435\\u043c\\u0435\\u043d\\u0442 \\u0432 hero *\\\/\\n.bifa-hero-stats {\\n display: flex;\\n gap: 40px;\\n margin-top: 30px;\\n padding-top: 30px;\\n border-top: 1px solid rgba(212, 175, 55, 0.2);\\n justify-content: center;\\n width: 100%;\\n}\\n\\n.hero-stat-item {\\n display: flex;\\n align-items: center;\\n gap: 12px;\\n}\\n\\n.hero-stat-icon {\\n width: 40px;\\n height: 40px;\\n background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(255, 215, 0, 0.1));\\n border-radius: 50%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.hero-stat-icon svg {\\n width: 20px;\\n height: 20px;\\n stroke: var(--bifa-heritage-gold);\\n stroke-width: 2;\\n}\\n\\n.hero-stat-text {\\n font-family: var(--bifa-font-body);\\n font-size: 0.9rem;\\n color: var(--bifa-gray);\\n}\\n\\n.hero-stat-number {\\n font-family: var(--bifa-font-heading);\\n font-weight: 700;\\n color: var(--bifa-deep-navy);\\n}\\n\\n\\\/* ========= NEWS CAROUSEL - Premium Style ========= *\\\/\\n.bifa-news-carousel {\\n position: relative;\\n opacity: 0;\\n animation: fadeInUp 1.2s ease 0.4s forwards;\\n}\\n\\n.bifa-carousel-header {\\n display: flex;\\n justify-content: space-between;\\n align-items: center;\\n margin-bottom: 40px;\\n}\\n\\n.bifa-carousel-title {\\n font-family: var(--bifa-font-heading);\\n font-size: 1.8rem;\\n font-weight: 800;\\n background: linear-gradient(135deg, var(--bifa-deep-navy), #162e5a);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n position: relative;\\n}\\n\\n.bifa-carousel-controls {\\n display: flex;\\n gap: 20px;\\n}\\n\\n.bifa-carousel-btn {\\n width: 48px;\\n height: 48px;\\n border: 2px solid transparent;\\n background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 249, 250, 0.95));\\n backdrop-filter: blur(10px);\\n border-radius: 50%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n cursor: pointer;\\n transition: var(--bifa-transition);\\n box-shadow: 0 10px 30px rgba(10, 31, 68, 0.1);\\n position: relative;\\n overflow: hidden;\\n}\\n\\n.bifa-carousel-btn::before {\\n content: '';\\n position: absolute;\\n inset: -2px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n border-radius: 50%;\\n opacity: 0;\\n transition: opacity 0.3s ease;\\n z-index: -1;\\n}\\n\\n.bifa-carousel-btn:hover::before {\\n opacity: 1;\\n}\\n\\n.bifa-carousel-btn:hover {\\n transform: scale(1.1);\\n box-shadow: 0 15px 40px rgba(212, 175, 55, 0.3);\\n}\\n\\n.bifa-carousel-btn svg {\\n width: 20px;\\n height: 20px;\\n stroke: var(--bifa-deep-navy);\\n stroke-width: 3;\\n transition: all 0.3s ease;\\n}\\n\\n.bifa-carousel-btn:hover svg {\\n stroke: var(--bifa-deep-navy);\\n transform: scale(1.1);\\n}\\n\\n.bifa-carousel-btn:active {\\n transform: scale(0.95);\\n}\\n\\n\\\/* News Cards Container *\\\/\\n.bifa-carousel-wrapper {\\n overflow: hidden;\\n margin: 0 -15px;\\n padding: 10px 0;\\n}\\n\\n.bifa-carousel-track {\\n display: flex;\\n gap: 30px;\\n transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);\\n padding: 10px 15px;\\n}\\n\\n\\\/* Individual News Card - Premium Style *\\\/\\n.bifa-news-card {\\n flex: 0 0 calc(33.333% - 20px);\\n background: white;\\n backdrop-filter: blur(20px);\\n border-radius: 20px;\\n overflow: hidden;\\n box-shadow: 0 5px 20px rgba(10, 31, 68, 0.06);\\n transition: var(--bifa-transition);\\n cursor: pointer;\\n position: relative;\\n border: none;\\n}\\n\\n.bifa-news-card::before {\\n content: '';\\n position: absolute;\\n top: 0;\\n left: 0;\\n right: 0;\\n height: 2px;\\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent);\\n transform: scaleX(0);\\n transition: transform 0.3s ease;\\n}\\n\\n.bifa-news-card:hover::before {\\n transform: scaleX(1);\\n}\\n\\n.bifa-news-card:hover {\\n transform: translateY(-8px) scale(1.02);\\n box-shadow: 0 15px 40px rgba(10, 31, 68, 0.12);\\n}\\n\\n.bifa-news-image {\\n position: relative;\\n height: 200px;\\n background-size: cover;\\n background-position: center;\\n overflow: hidden;\\n}\\n\\n.bifa-news-image::before {\\n content: '';\\n position: absolute;\\n inset: 0;\\n background: linear-gradient(180deg, \\n transparent 0%, \\n transparent 50%, \\n rgba(10, 31, 68, 0.9) 100%\\n );\\n transition: opacity 0.3s ease;\\n}\\n\\n.bifa-news-card:hover .bifa-news-image::before {\\n opacity: 0.8;\\n}\\n\\n\\\/* Shimmer effect on hover *\\\/\\n.bifa-news-image::after {\\n content: '';\\n position: absolute;\\n top: -50%;\\n left: -75%;\\n width: 50%;\\n height: 200%;\\n background: linear-gradient(90deg, \\n transparent 0%, \\n rgba(255, 255, 255, 0.3) 50%, \\n transparent 100%\\n );\\n transform: skewX(-25deg);\\n transition: left 0.8s ease;\\n}\\n\\n.bifa-news-card:hover .bifa-news-image::after {\\n left: 125%;\\n}\\n\\n.bifa-news-badge {\\n position: absolute;\\n top: 20px;\\n left: 20px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n color: var(--bifa-deep-navy);\\n padding: 8px 20px;\\n border-radius: 25px;\\n font-family: var(--bifa-font-heading);\\n font-weight: 800;\\n font-size: 0.75rem;\\n text-transform: uppercase;\\n letter-spacing: 1px;\\n z-index: 2;\\n box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);\\n transition: all 0.3s ease;\\n}\\n\\n\\\/* \\u041f\\u0440\\u0438\\u043e\\u0440\\u0438\\u0442\\u0435\\u0442\\u043d\\u044b\\u0439 \\u0431\\u0435\\u0439\\u0434\\u0436 \\u0434\\u043b\\u044f \\u0441\\u0440\\u043e\\u0447\\u043d\\u044b\\u0445 \\u043d\\u043e\\u0432\\u043e\\u0441\\u0442\\u0435\\u0439 \\u0432 \\u043a\\u0430\\u0440\\u0443\\u0441\\u0435\\u043b\\u0438 *\\\/\\n.bifa-news-badge.urgent {\\n background: linear-gradient(135deg, #dc2626, #ef4444);\\n color: white;\\n box-shadow: 0 8px 20px rgba(220, 38, 38, 0.4);\\n animation: pulse-urgent 2s ease-in-out infinite;\\n}\\n\\n.bifa-news-card:hover .bifa-news-badge {\\n transform: translateY(-2px);\\n box-shadow: 0 12px 30px rgba(212, 175, 55, 0.4);\\n}\\n\\n.bifa-news-content {\\n padding: 30px;\\n}\\n\\n.bifa-news-date {\\n font-family: var(--bifa-font-body);\\n font-size: 0.85rem;\\n color: var(--bifa-gray);\\n margin-bottom: 12px;\\n display: flex;\\n align-items: center;\\n gap: 8px;\\n}\\n\\n.bifa-news-date::before {\\n content: '';\\n width: 4px;\\n height: 4px;\\n background: var(--bifa-heritage-gold);\\n border-radius: 50%;\\n}\\n\\n.bifa-news-title {\\n font-family: var(--bifa-font-heading);\\n font-size: 1.25rem;\\n font-weight: 800;\\n color: var(--bifa-deep-navy);\\n line-height: 1.4;\\n margin-bottom: 15px;\\n display: -webkit-box;\\n -webkit-line-clamp: 2;\\n -webkit-box-orient: vertical;\\n overflow: hidden;\\n transition: color 0.3s ease;\\n}\\n\\n.bifa-news-card:hover .bifa-news-title {\\n background: linear-gradient(135deg, var(--bifa-deep-navy), #162e5a);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n}\\n\\n.bifa-news-excerpt {\\n font-family: var(--bifa-font-body);\\n font-size: 0.95rem;\\n color: #4a5568;\\n line-height: 1.7;\\n display: -webkit-box;\\n -webkit-line-clamp: 3;\\n -webkit-box-orient: vertical;\\n overflow: hidden;\\n margin-bottom: 25px;\\n}\\n\\n.bifa-news-link {\\n display: inline-flex;\\n align-items: center;\\n gap: 10px;\\n color: var(--bifa-heritage-gold);\\n font-family: var(--bifa-font-heading);\\n font-weight: 700;\\n font-size: 0.9rem;\\n text-decoration: none;\\n text-transform: uppercase;\\n letter-spacing: 0.5px;\\n transition: var(--bifa-transition);\\n position: relative;\\n}\\n\\n.bifa-news-link::after {\\n content: '';\\n position: absolute;\\n bottom: -2px;\\n left: 0;\\n width: 0;\\n height: 2px;\\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700);\\n transition: width 0.3s ease;\\n}\\n\\n.bifa-news-link:hover {\\n gap: 15px;\\n}\\n\\n.bifa-news-link:hover::after {\\n width: 100%;\\n}\\n\\n.bifa-news-link svg {\\n width: 16px;\\n height: 16px;\\n stroke: currentColor;\\n stroke-width: 2;\\n transition: transform 0.3s ease;\\n}\\n\\n.bifa-news-link:hover svg {\\n transform: translateX(3px);\\n}\\n\\n\\\/* ========= \\u0418\\u0421\\u041f\\u0420\\u0410\\u0412\\u041b\\u0415\\u041d\\u041e: \\u041c\\u0435\\u0442\\u043a\\u0430 \\u0434\\u0430\\u0442\\u044b \\u0441\\u043e\\u0431\\u044b\\u0442\\u0438\\u044f - \\u0411\\u0415\\u0417 \\u041f\\u0415\\u0420\\u0415\\u0421\\u0415\\u0427\\u0415\\u041d\\u0418\\u0419 ========= *\\\/\\n.event-date-label {\\n position: absolute;\\n bottom: 20px;\\n left: 20px;\\n background: linear-gradient(135deg, var(--bifa-civic-green), #248a5f);\\n color: white;\\n padding: 8px 18px;\\n border-radius: 25px;\\n font-family: var(--bifa-font-heading);\\n font-weight: 700;\\n font-size: 0.7rem;\\n text-transform: uppercase;\\n letter-spacing: 0.8px;\\n z-index: 2;\\n box-shadow: 0 8px 20px rgba(29, 97, 67, 0.4);\\n white-space: nowrap;\\n transition: all 0.3s ease;\\n}\\n\\n.bifa-news-card:hover .event-date-label {\\n transform: translateY(-2px);\\n box-shadow: 0 12px 30px rgba(29, 97, 67, 0.5);\\n}\\n\\n\\\/* ========= ERROR STATE - Premium ========= *\\\/\\n.bifa-error-container {\\n display: none;\\n text-align: center;\\n padding: 80px 20px;\\n animation: fadeIn 0.5s ease-out;\\n}\\n\\n.bifa-error-icon {\\n width: 100px;\\n height: 100px;\\n margin: 0 auto 30px;\\n background: linear-gradient(135deg, #FF6B6B, #FF4757);\\n border-radius: 50%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n box-shadow: 0 20px 50px rgba(255, 71, 87, 0.3);\\n animation: errorPulse 2s ease-in-out infinite;\\n}\\n\\n@keyframes errorPulse {\\n 0%, 100% {\\n transform: scale(1);\\n box-shadow: 0 20px 50px rgba(255, 71, 87, 0.3);\\n }\\n 50% {\\n transform: scale(1.05);\\n box-shadow: 0 25px 60px rgba(255, 71, 87, 0.4);\\n }\\n}\\n\\n.bifa-error-icon svg {\\n width: 50px;\\n height: 50px;\\n stroke: white;\\n stroke-width: 3;\\n}\\n\\n.bifa-error-title {\\n font-family: var(--bifa-font-heading);\\n font-size: 2rem;\\n font-weight: 800;\\n color: var(--bifa-deep-navy);\\n margin-bottom: 20px;\\n}\\n\\n.bifa-error-message {\\n font-family: var(--bifa-font-body);\\n font-size: 1.15rem;\\n color: #4a5568;\\n margin-bottom: 40px;\\n max-width: 500px;\\n margin-left: auto;\\n margin-right: auto;\\n line-height: 1.7;\\n}\\n\\n.bifa-retry-btn {\\n display: inline-flex;\\n align-items: center;\\n gap: 10px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n color: var(--bifa-deep-navy);\\n padding: 15px 35px;\\n border-radius: 50px;\\n font-family: var(--bifa-font-heading);\\n font-weight: 800;\\n font-size: 0.9rem;\\n text-decoration: none;\\n cursor: pointer;\\n border: none;\\n text-transform: uppercase;\\n letter-spacing: 1px;\\n transition: var(--bifa-transition);\\n box-shadow: 0 15px 40px rgba(212, 175, 55, 0.3);\\n position: relative;\\n overflow: hidden;\\n}\\n\\n.bifa-retry-btn::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}\\n\\n.bifa-retry-btn:hover {\\n transform: translateY(-3px);\\n box-shadow: 0 20px 50px rgba(212, 175, 55, 0.4);\\n}\\n\\n.bifa-retry-btn:hover::before {\\n width: 300px;\\n height: 300px;\\n}\\n\\n.bifa-retry-btn svg {\\n width: 20px;\\n height: 20px;\\n transition: transform 0.3s ease;\\n}\\n\\n.bifa-retry-btn:hover svg {\\n transform: rotate(180deg);\\n}\\n\\n\\\/* ========= ANIMATIONS ========= *\\\/\\n@keyframes fadeIn {\\n from { opacity: 0; }\\n to { opacity: 1; }\\n}\\n\\n@keyframes fadeInDown {\\n from {\\n opacity: 0;\\n transform: translateY(-40px);\\n }\\n to {\\n opacity: 1;\\n transform: translateY(0);\\n }\\n}\\n\\n@keyframes fadeInUp {\\n from {\\n opacity: 0;\\n transform: translateY(40px);\\n }\\n to {\\n opacity: 1;\\n transform: translateY(0);\\n }\\n}\\n\\n@keyframes textGlow {\\n 0%, 100% {\\n text-shadow: 0 0 5px rgba(212, 175, 55, 0.5);\\n }\\n 50% {\\n text-shadow: 0 0 20px rgba(212, 175, 55, 0.8), 0 0 30px rgba(212, 175, 55, 0.6);\\n }\\n}\\n\\n\\\/* ========= RESPONSIVE ========= *\\\/\\n@media (max-width: 1200px) {\\n .bifa-news-card {\\n flex: 0 0 calc(50% - 15px);\\n }\\n}\\n\\n@media (max-width: 992px) {\\n \\\/* Hero \\u043e\\u0441\\u0442\\u0430\\u0435\\u0442\\u0441\\u044f \\u0448\\u0438\\u0440\\u043e\\u043a\\u0438\\u043c \\u043d\\u0430 \\u043f\\u043b\\u0430\\u043d\\u0448\\u0435\\u0442\\u0430\\u0445 *\\\/\\n .bifa-hero-image {\\n height: 400px;\\n }\\n \\n .bifa-hero-content {\\n padding: 40px;\\n }\\n}\\n\\n@media (max-width: 768px) {\\n .bifa-news-section {\\n padding: 50px 0 60px 0;\\n }\\n \\n .bifa-section-header {\\n margin-bottom: 50px;\\n }\\n \\n .bifa-section-title {\\n font-size: 1.75rem;\\n }\\n \\n .bifa-news-card {\\n flex: 0 0 calc(100% - 20px);\\n }\\n \\n .bifa-carousel-header {\\n flex-direction: column;\\n gap: 25px;\\n align-items: flex-start;\\n }\\n \\n .bifa-hero-content {\\n padding: 35px 25px;\\n }\\n \\n .bifa-hero-title {\\n font-size: 1.6rem;\\n }\\n \\n .bifa-hero-excerpt {\\n font-size: 0.95rem;\\n }\\n \\n .bifa-carousel-controls {\\n gap: 15px;\\n }\\n \\n .bifa-hero-content {\\n padding: 25px 20px;\\n }\\n \\n .bifa-hero-title {\\n font-size: 1.4rem;\\n margin-bottom: 15px;\\n }\\n \\n .bifa-hero-excerpt {\\n font-size: 0.9rem;\\n margin-bottom: 25px;\\n }\\n \\n .hero-stat-item {\\n gap: 8px;\\n }\\n \\n .hero-stat-icon {\\n width: 35px;\\n height: 35px;\\n }\\n \\n .hero-stat-icon svg {\\n width: 18px;\\n height: 18px;\\n }\\n \\n .hero-stat-text {\\n font-size: 0.8rem;\\n }\\n \\n .bifa-carousel-btn {\\n width: 44px;\\n height: 44px;\\n }\\n \\n \\\/* \\u0418\\u0441\\u043f\\u0440\\u0430\\u0432\\u043b\\u0435\\u043d\\u0438\\u0435 \\u0434\\u043b\\u044f \\u043c\\u043e\\u0431\\u0438\\u043b\\u044c\\u043d\\u044b\\u0445 *\\\/\\n .event-date-label {\\n font-size: 0.65rem;\\n padding: 6px 14px;\\n }\\n}\\n\\n@media (max-width: 480px) {\\n .bifa-news-section {\\n padding: 40px 0 50px 0;\\n }\\n \\n .bifa-section-title {\\n font-size: 2rem;\\n }\\n \\n .bifa-section-subtitle {\\n font-size: 1.1rem;\\n letter-spacing: 1px;\\n }\\n \\n .bifa-hero-image {\\n height: 300px;\\n }\\n \\n .bifa-hero-image-overlay {\\n top: 20px;\\n left: 20px;\\n flex-direction: column;\\n gap: 10px;\\n }\\n \\n .bifa-hero-badge,\\n .bifa-hero-date {\\n font-size: 0.7rem;\\n padding: 6px 14px;\\n letter-spacing: 0.5px;\\n }\\n \\n .bifa-hero-footer {\\n flex-direction: column;\\n align-items: center;\\n gap: 15px;\\n width: 100%;\\n }\\n \\n .bifa-hero-btn {\\n width: auto;\\n max-width: 220px;\\n justify-content: center;\\n padding: 14px 25px;\\n font-size: 0.85rem;\\n letter-spacing: 1px;\\n }\\n \\n .bifa-hero-btn::after {\\n display: none;\\n }\\n \\n .bifa-hero-btn span {\\n text-shadow: none;\\n }\\n \\n \\n .bifa-hero-wrapper {\\n min-height: auto;\\n }\\n \\n .bifa-hero-stats {\\n margin-top: 20px;\\n padding-top: 20px;\\n gap: 25px;\\n }\\n \\n .bifa-carousel-btn {\\n width: 42px;\\n height: 42px;\\n }\\n \\n .bifa-news-content {\\n padding: 20px;\\n }\\n \\n .bifa-error-container {\\n padding: 60px 20px;\\n }\\n \\n \\\/* \\u0418\\u0441\\u043f\\u0440\\u0430\\u0432\\u043b\\u0435\\u043d\\u0438\\u0435 \\u0434\\u043b\\u044f \\u043c\\u043e\\u0431\\u0438\\u043b\\u044c\\u043d\\u044b\\u0445 - \\u043c\\u0435\\u0442\\u043a\\u0430 \\u0441\\u043e\\u0431\\u044b\\u0442\\u0438\\u044f \\u0432\\u043d\\u0438\\u0437\\u0443 \\u0441\\u043b\\u0435\\u0432\\u0430 *\\\/\\n .event-date-label {\\n font-size: 0.6rem;\\n padding: 5px 12px;\\n bottom: 15px;\\n left: 15px;\\n }\\n}\\n<\\\/style>\\n<\\\/head>\\n<body>\\n\\n<\/p>\n<div class=\"\\\"news-section-wrapper\\\"\">\\n \\n <\/p>\n<section class=\"\\\"bifa-news-section\\\"\">\\n \\n <\/p>\n<div class=\"\\\"news-bg-animation\\\"\">\\n \\n <\/p>\n<div class=\"\\\"floating-shape\" shape-news-1\\\"><\\\/div>\\n <\/p>\n<div class=\"\\\"floating-shape\" shape-news-2\\\"><\\\/div>\\n <\/p>\n<div class=\"\\\"floating-shape\" shape-news-3\\\"><\\\/div>\\n \\n <\\\/div>\\n\\n <\/p>\n<div class=\"\\\"bifa-container\\\"\">\\n \\n <\/p>\n<div class=\"\\\"bifa-section-header\\\"\">\\n <\/p>\n<h2 class=\"\\\"bifa-section-title\\\"\">BIFA+ News Center<\\\/h2>\\n <\/p>\n<p class=\"\\\"bifa-section-subtitle\\\"\">Latest Updates & Stories<\\\/p>\\n <\/p>\n<p class=\"\\\"bifa-section-description\\\"\">\\n BIFA+ News \\u2014 where the game unites nations.\\n <\\\/p>\\n <\\\/div>\\n\\n \\n <\/p>\n<div id=\"\\\"bifaLoadingState\\\"\" class=\"\\\"bifa-loading-container\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-loader\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-loader-ring\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-loader-ring\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-loader-ring\\\"\"><\\\/div>\\n <\\\/div>\\n <\/p>\n<p class=\"\\\"loading-text\\\"\">Loading Latest Stories...<\\\/p>\\n <\\\/div>\\n\\n \\n <\/p>\n<div id=\"\\\"bifaNewsContent\\\"\" class=\"\\\"bifa-news-content\\\"\" style=\"\\\"display:\" none;\\\">\\n \\n <\/p>\n<div id=\"\\\"bifaHeroNews\\\"\" class=\"\\\"bifa-hero-news\\\"\">\\n \\n <\\\/div>\\n\\n \\n <\/p>\n<div class=\"\\\"bifa-news-carousel\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-carousel-header\\\"\">\\n <\/p>\n<h3 class=\"\\\"bifa-carousel-title\\\"\">More Stories<\\\/h3>\\n <\/p>\n<div class=\"\\\"bifa-carousel-controls\\\"\">\\n <button class=\"\\\"bifa-carousel-btn\\\"\" id=\"\\\"bifaPrevBtn\\\"\" aria-label=\"\\\"Previous\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M15\" 18l9 12l15 6\\\" stroke=\"\\\"currentColor\\\"\" stroke-linecap=\"\\\"round\\\"\" stroke-linejoin=\"\\\"round\\\"\\\/\">\\n <\\\/svg>\\n <\\\/button>\\n <button class=\"\\\"bifa-carousel-btn\\\"\" id=\"\\\"bifaNextBtn\\\"\" aria-label=\"\\\"Next\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M9\" 18l15 12l9 6\\\" stroke=\"\\\"currentColor\\\"\" stroke-linecap=\"\\\"round\\\"\" stroke-linejoin=\"\\\"round\\\"\\\/\">\\n <\\\/svg>\\n <\\\/button>\\n <\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-carousel-wrapper\\\"\">\\n <\/p>\n<div id=\"\\\"bifaCarouselTrack\\\"\" class=\"\\\"bifa-carousel-track\\\"\">\\n \\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n\\n \\n <\/p>\n<div id=\"\\\"bifaErrorState\\\"\" class=\"\\\"bifa-error-container\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-error-icon\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M12\" 9v13m12 17h12.01m21 12c21 16.9706 21 12 21c7.02944 3 12c3 7.02944 3c16.9706 12z\\\" stroke =\"\\\"currentColor\\\"\" stroke-linecap =\"\\\"round\\\"\" stroke-linejoin =\"\\\"round\\\"\\\/\">\\n <\\\/svg>\\n <\\\/div>\\n <\/p>\n<h3 class=\"\\\"bifa-error-title\\\"\">Unable to Load News<\\\/h3>\\n <\/p>\n<p class=\"\\\"bifa-error-message\\\"\">We're having trouble fetching the latest stories. Please check your connection and try again.<\\\/p>\\n <button class=\"\\\"bifa-retry-btn\\\"\" onclick=\"\\\"loadBifaNews()\\\"\">\\n <svg width=\"\\\"20\\\"\" height=\"\\\"20\\\"\" viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M1\" 4v10h7m23 20v14h17m20.49 9c19.62 5.33 16.31 2.5 12.23 2.5c7.09 2.7 7.17 3.04 12.5c3.38 17.83 8.09 22 13.5 22c17.83 21.53 19.19 22.68 15.36m12 8v12l15 15\\\" stroke =\"\\\"currentColor\\\"\" stroke-width =\"\\\"2\\\"\" stroke-linecap=\"\\\"round\\\"\" stroke-linejoin=\"\\\"round\\\"\\\/\">\\n <\\\/svg>\\n <span>Retry<\\\/span>\\n <\\\/button>\\n <\\\/div>\\n <\\\/div>\\n <\\\/section>\\n<\\\/div>\\n\\n<script>\\n\\\/\\\/ BIFA+ Premium News Module - \\u0423\\u043b\\u0443\\u0447\\u0448\\u0435\\u043d\\u043d\\u044b\\u0439 \\u043f\\u0430\\u0440\\u0441\\u0438\\u043d\\u0433 \\u0438\\u0437 \\u0432\\u0442\\u043e\\u0440\\u043e\\u0433\\u043e \\u0444\\u0430\\u0439\\u043b\\u0430\\nconst BifaNews = {\\n \\\/\\\/ Configuration\\n config: {\\n apiUrl: 'https:\\\/\\\/bifa.ai\\\/wp-json\\\/wp\\\/v2\\\/bifa_news_events',\\n perPage: 20,\\n \\\/\\\/ \\u041e\\u0431\\u043d\\u043e\\u0432\\u043b\\u0435\\u043d\\u043d\\u044b\\u0435 \\u043f\\u0430\\u0440\\u0430\\u043c\\u0435\\u0442\\u0440\\u044b \\u0434\\u043b\\u044f \\u043b\\u0443\\u0447\\u0448\\u0435\\u0433\\u043e \\u043f\\u0430\\u0440\\u0441\\u0438\\u043d\\u0433\\u0430\\n newsParams: '_embed&per_page=20&acf_format=standard&orderby=date&order=desc',\\n carouselIndex: 0,\\n cardsPerView: 3,\\n newsData: []\\n },\\n\\n \\\/\\\/ Initialize\\n init() {\\n this.createParticles();\\n this.setupEventListeners();\\n this.loadNews();\\n this.updateCardsPerView();\\n window.addEventListener('resize', () => this.updateCardsPerView());\\n },\\n\\n \\\/\\\/ Create golden particles\\n createParticles() {\\n const particlesContainer = document.querySelector('.news-bg-animation');\\n const particleCount = 10;\\n\\n for (let i = 0; i < particleCount; i++) {\\n const particle = document.createElement('div');\\n particle.className = 'news-particle';\\n particle.style.left = Math.random() * 100 + '%';\\n particle.style.animationDelay = Math.random() * 18 + 's';\\n particle.style.animationDuration = (15 + Math.random() * 8) + '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\\n \\\/\\\/ Setup event listeners\\n setupEventListeners() {\\n const prevBtn = document.getElementById('bifaPrevBtn');\\n const nextBtn = document.getElementById('bifaNextBtn');\\n \\n if (prevBtn) prevBtn.addEventListener('click', () => this.navigateCarousel('prev'));\\n if (nextBtn) nextBtn.addEventListener('click', () => this.navigateCarousel('next'));\\n \\n \\\/\\\/ Touch swipe \\u0434\\u043b\\u044f \\u043c\\u043e\\u0431\\u0438\\u043b\\u044c\\u043d\\u044b\\u0445 \\u0443\\u0441\\u0442\\u0440\\u043e\\u0439\\u0441\\u0442\\u0432\\n this.setupTouchSwipe();\\n },\\n\\n \\\/\\\/ Touch swipe functionality \\u0434\\u043b\\u044f \\u043a\\u0430\\u0440\\u0443\\u0441\\u0435\\u043b\\u0438\\n setupTouchSwipe() {\\n const carouselWrapper = document.querySelector('.bifa-carousel-wrapper');\\n if (!carouselWrapper) return;\\n\\n let touchStartX = 0;\\n let touchEndX = 0;\\n let touchStartY = 0;\\n let touchEndY = 0;\\n let isSwiping = false;\\n const minSwipeDistance = 50; \\\/\\\/ \\u041c\\u0438\\u043d\\u0438\\u043c\\u0430\\u043b\\u044c\\u043d\\u043e\\u0435 \\u0440\\u0430\\u0441\\u0441\\u0442\\u043e\\u044f\\u043d\\u0438\\u0435 \\u0441\\u0432\\u0430\\u0439\\u043f\\u0430 \\u0432 \\u043f\\u0438\\u043a\\u0441\\u0435\\u043b\\u044f\\u0445\\n\\n \\\/\\\/ Touch start\\n carouselWrapper.addEventListener('touchstart', (e) => {\\n touchStartX = e.touches[0].clientX;\\n touchStartY = e.touches[0].clientY;\\n isSwiping = true;\\n }, { passive: true });\\n\\n \\\/\\\/ Touch move - \\u0434\\u043b\\u044f \\u043f\\u0440\\u0435\\u0434\\u043e\\u0442\\u0432\\u0440\\u0430\\u0449\\u0435\\u043d\\u0438\\u044f \\u0441\\u043a\\u0440\\u043e\\u043b\\u043b\\u0430 \\u043f\\u0440\\u0438 \\u0433\\u043e\\u0440\\u0438\\u0437\\u043e\\u043d\\u0442\\u0430\\u043b\\u044c\\u043d\\u043e\\u043c \\u0441\\u0432\\u0430\\u0439\\u043f\\u0435\\n carouselWrapper.addEventListener('touchmove', (e) => {\\n if (!isSwiping) return;\\n \\n touchEndX = e.touches[0].clientX;\\n touchEndY = e.touches[0].clientY;\\n \\n const diffX = Math.abs(touchEndX - touchStartX);\\n const diffY = Math.abs(touchEndY - touchStartY);\\n \\n \\\/\\\/ \\u0415\\u0441\\u043b\\u0438 \\u0433\\u043e\\u0440\\u0438\\u0437\\u043e\\u043d\\u0442\\u0430\\u043b\\u044c\\u043d\\u044b\\u0439 \\u0441\\u0432\\u0430\\u0439\\u043f \\u0431\\u043e\\u043b\\u044c\\u0448\\u0435 \\u0432\\u0435\\u0440\\u0442\\u0438\\u043a\\u0430\\u043b\\u044c\\u043d\\u043e\\u0433\\u043e, \\u043f\\u0440\\u0435\\u0434\\u043e\\u0442\\u0432\\u0440\\u0430\\u0449\\u0430\\u0435\\u043c \\u0441\\u043a\\u0440\\u043e\\u043b\\u043b\\n if (diffX > diffY && diffX > 10) {\\n e.preventDefault();\\n }\\n }, { passive: false });\\n\\n \\\/\\\/ Touch end\\n carouselWrapper.addEventListener('touchend', (e) => {\\n if (!isSwiping) return;\\n \\n const diffX = touchEndX - touchStartX;\\n const diffY = Math.abs(touchEndY - touchStartY);\\n \\n \\\/\\\/ \\u041f\\u0440\\u043e\\u0432\\u0435\\u0440\\u044f\\u0435\\u043c \\u0447\\u0442\\u043e \\u044d\\u0442\\u043e \\u0433\\u043e\\u0440\\u0438\\u0437\\u043e\\u043d\\u0442\\u0430\\u043b\\u044c\\u043d\\u044b\\u0439 \\u0441\\u0432\\u0430\\u0439\\u043f (\\u0430 \\u043d\\u0435 \\u0432\\u0435\\u0440\\u0442\\u0438\\u043a\\u0430\\u043b\\u044c\\u043d\\u044b\\u0439 \\u0441\\u043a\\u0440\\u043e\\u043b\\u043b)\\n if (Math.abs(diffX) > diffY && Math.abs(diffX) > minSwipeDistance) {\\n if (diffX > 0) {\\n \\\/\\\/ \\u0421\\u0432\\u0430\\u0439\\u043f \\u0432\\u043f\\u0440\\u0430\\u0432\\u043e - \\u043f\\u0440\\u0435\\u0434\\u044b\\u0434\\u0443\\u0449\\u0438\\u0439 \\u0441\\u043b\\u0430\\u0439\\u0434\\n this.navigateCarousel('prev');\\n } else {\\n \\\/\\\/ \\u0421\\u0432\\u0430\\u0439\\u043f \\u0432\\u043b\\u0435\\u0432\\u043e - \\u0441\\u043b\\u0435\\u0434\\u0443\\u044e\\u0449\\u0438\\u0439 \\u0441\\u043b\\u0430\\u0439\\u0434\\n this.navigateCarousel('next');\\n }\\n }\\n \\n isSwiping = false;\\n touchStartX = 0;\\n touchEndX = 0;\\n touchStartY = 0;\\n touchEndY = 0;\\n }, { passive: true });\\n },\\n\\n \\\/\\\/ Update cards per view based on screen size\\n updateCardsPerView() {\\n if (window.innerWidth <= 768) {\\n this.config.cardsPerView = 1;\\n } else if (window.innerWidth <= 1200) {\\n this.config.cardsPerView = 2;\\n } else {\\n this.config.cardsPerView = 3;\\n }\\n },\\n\\n \\\/\\\/ \\u0424\\u0443\\u043d\\u043a\\u0446\\u0438\\u044f \\u0434\\u043b\\u044f \\u0444\\u043e\\u0440\\u043c\\u0430\\u0442\\u0438\\u0440\\u043e\\u0432\\u0430\\u043d\\u0438\\u044f \\u0434\\u0430\\u0442\\u044b\\n formatDate(dateStr) {\\n if (!dateStr) return '';\\n const date = new Date(dateStr);\\n return date.toLocaleDateString('en-US', {\\n month: 'long',\\n day: 'numeric',\\n year: 'numeric'\\n });\\n },\\n\\n \\\/\\\/ \\u0424\\u0443\\u043d\\u043a\\u0446\\u0438\\u044f \\u0434\\u043b\\u044f \\u043e\\u043f\\u0440\\u0435\\u0434\\u0435\\u043b\\u0435\\u043d\\u0438\\u044f \\u0441\\u0442\\u0430\\u0442\\u0443\\u0441\\u0430 \\u0441\\u043e\\u0431\\u044b\\u0442\\u0438\\u044f\\n getEventStatus(startDate, endDate) {\\n if (!startDate) return 'unknown';\\n \\n const now = new Date();\\n const start = new Date(startDate);\\n const end = endDate ? new Date(endDate) : start;\\n \\n now.setHours(0, 0, 0, 0);\\n start.setHours(0, 0, 0, 0);\\n end.setHours(23, 59, 59, 999);\\n \\n if (now > end) {\\n return 'past';\\n } else if (now >= start && now <= end) {\\n return 'ongoing';\\n } else {\\n return 'upcoming';\\n }\\n },\\n\\n \\\/\\\/ Load news from API - \\u0443\\u043b\\u0443\\u0447\\u0448\\u0435\\u043d\\u043d\\u044b\\u0439 \\u043f\\u0430\\u0440\\u0441\\u0438\\u043d\\u0433 \\u0438\\u0437 \\u0432\\u0442\\u043e\\u0440\\u043e\\u0433\\u043e \\u0444\\u0430\\u0439\\u043b\\u0430\\n async loadNews() {\\n const loadingState = document.getElementById('bifaLoadingState');\\n const newsContent = document.getElementById('bifaNewsContent');\\n const errorState = document.getElementById('bifaErrorState');\\n\\n try {\\n \\\/\\\/ Show loading\\n loadingState.style.display = 'flex';\\n newsContent.style.display = 'none';\\n errorState.style.display = 'none';\\n\\n \\\/\\\/ Fetch all items\\n const response = await fetch(`${this.config.apiUrl}?${this.config.newsParams}`);\\n \\n if (!response.ok) {\\n throw new Error('Failed to fetch news');\\n }\\n\\n const allData = await response.json();\\n \\n \\\/\\\/ \\u0423\\u043b\\u0443\\u0447\\u0448\\u0435\\u043d\\u043d\\u0430\\u044f \\u0444\\u0438\\u043b\\u044c\\u0442\\u0440\\u0430\\u0446\\u0438\\u044f - \\u0431\\u0435\\u0440\\u0435\\u043c \\u0442\\u043e\\u043b\\u044c\\u043a\\u043e \\u043d\\u043e\\u0432\\u043e\\u0441\\u0442\\u0438 (\\u0431\\u0435\\u0437 \\u0434\\u0430\\u0442 \\u0441\\u043e\\u0431\\u044b\\u0442\\u0438\\u0439)\\n const newsData = allData.filter(item => {\\n \\\/\\\/ \\u041f\\u043e\\u043b\\u0443\\u0447\\u0430\\u0435\\u043c \\u0434\\u0430\\u043d\\u043d\\u044b\\u0435 \\u0441\\u043e\\u0431\\u044b\\u0442\\u0438\\u0439 \\u043a\\u0430\\u043a \\u0438\\u0437 \\u043f\\u0440\\u044f\\u043c\\u044b\\u0445 \\u043f\\u043e\\u043b\\u0435\\u0439, \\u0442\\u0430\\u043a \\u0438 \\u0438\\u0437 meta\\n const eventDate = item._bifa_event_date || item.meta?._bifa_event_date || item.acf?._bifa_event_date;\\n const itemType = item.bifa_item_type || item.meta?.bifa_item_type || item.acf?.bifa_item_type;\\n \\n \\\/\\\/ \\u042d\\u0442\\u043e \\u043d\\u043e\\u0432\\u043e\\u0441\\u0442\\u044c \\u0435\\u0441\\u043b\\u0438 \\u043d\\u0435\\u0442 \\u0434\\u0430\\u0442\\u044b \\u0441\\u043e\\u0431\\u044b\\u0442\\u0438\\u044f \\u0438\\u043b\\u0438 \\u0442\\u0438\\u043f \\u0443\\u043a\\u0430\\u0437\\u044b\\u0432\\u0430\\u0435\\u0442 \\u043d\\u0430 \\u043d\\u043e\\u0432\\u043e\\u0441\\u0442\\u044c\\n const isNews = !eventDate || eventDate === '' || (itemType && !itemType.includes(3));\\n \\n return isNews;\\n });\\n\\n if (newsData.length === 0) {\\n throw new Error('No news available');\\n }\\n\\n \\\/\\\/ \\u0421\\u043e\\u0440\\u0442\\u0438\\u0440\\u0443\\u0435\\u043c \\u043f\\u043e \\u0434\\u0430\\u0442\\u0435 \\u043f\\u0443\\u0431\\u043b\\u0438\\u043a\\u0430\\u0446\\u0438\\u0438\\n newsData.sort((a, b) => new Date(b.date) - new Date(a.date));\\n\\n \\\/\\\/ Store news data\\n this.config.newsData = newsData;\\n\\n \\\/\\\/ Hide loading, show content\\n loadingState.style.display = 'none';\\n newsContent.style.display = 'block';\\n\\n \\\/\\\/ Render news\\n this.renderHeroNews(newsData[0]);\\n this.renderCarousel(newsData.slice(1));\\n\\n } catch (error) {\\n console.error('Error loading news:', error);\\n loadingState.style.display = 'none';\\n errorState.style.display = 'block';\\n }\\n },\\n\\n \\\/\\\/ Render hero news - \\u0441 \\u0443\\u043b\\u0443\\u0447\\u0448\\u0435\\u043d\\u043d\\u044b\\u043c \\u043f\\u0430\\u0440\\u0441\\u0438\\u043d\\u0433\\u043e\\u043c \\u0434\\u0430\\u043d\\u043d\\u044b\\u0445 \\u0438 \\u0418\\u0421\\u041f\\u0420\\u0410\\u0412\\u041b\\u0415\\u041d\\u041d\\u041e\\u0419 \\u041a\\u041d\\u041e\\u041f\\u041a\\u041e\\u0419\\n renderHeroNews(news) {\\n const heroContainer = document.getElementById('bifaHeroNews');\\n if (!heroContainer || !news) return;\\n\\n \\\/\\\/ Get featured image\\n const media = news._embedded?.['wp:featuredmedia']?.[0];\\n const imageUrl = media?.source_url || '\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/news-placeholder-hero.jpg';\\n\\n \\\/\\\/ Format date\\n const date = this.formatDate(news.date);\\n\\n \\\/\\\/ Get excerpt\\n const excerpt = this.stripHtml(news.excerpt.rendered).substring(0, 350) + '...';\\n\\n \\\/\\\/ \\u041f\\u043e\\u043b\\u0443\\u0447\\u0430\\u0435\\u043c badge \\u0438 priority \\u0438\\u0437 \\u0432\\u0441\\u0435\\u0445 \\u0432\\u043e\\u0437\\u043c\\u043e\\u0436\\u043d\\u044b\\u0445 \\u043c\\u0435\\u0441\\u0442\\n const badgeText = news._bifa_badge_text || news.meta?._bifa_badge_text || news.acf?._bifa_badge_text || this.getBadgeText(news);\\n const priority = news._bifa_priority || news.meta?._bifa_priority || news.acf?._bifa_priority || 'normal';\\n\\n \\\/\\\/ Render hero \\u0441 \\u0448\\u0438\\u0440\\u043e\\u043a\\u0438\\u043c \\u0434\\u0438\\u0437\\u0430\\u0439\\u043d\\u043e\\u043c - \\u0418\\u0421\\u041f\\u0420\\u0410\\u0412\\u041b\\u0415\\u041d\\u041d\\u0410\\u042f \\u041a\\u041d\\u041e\\u041f\\u041a\\u0410\\n heroContainer.innerHTML = `\\n <\/p>\n<div class=\"\\\"bifa-hero-card\\\"\" onclick=\"\\\"window.open('${news.link}',\" '_blank')\\\">\\n <\/p>\n<div class=\"\\\"bifa-hero-wrapper\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-hero-image\\\"\" style=\"\\\"background-image:\" url('${imageurl}')\\\">\\n <\/p>\n<div class=\"\\\"bifa-hero-image-overlay\\\"\">\\n <span class=\"\\\"bifa-hero-badge\" ${priority =\"==\" 'urgent' ? : ''}\\\">${badgeText}<\\\/span>\\n <span class=\"\\\"bifa-hero-date\\\"\">${date}<\\\/span>\\n <\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-hero-content\\\"\">\\n <\/p>\n<h2 class=\"\\\"bifa-hero-title\\\"\">${news.title.rendered}<\\\/h2>\\n <\/p>\n<p class=\"\\\"bifa-hero-excerpt\\\"\">${excerpt}<\\\/p>\\n <\/p>\n<div class=\"\\\"bifa-hero-footer\\\"\">\\n <a href=\"\\\"${news.link}\\\"\" class=\"\\\"bifa-hero-btn\\\"\" target=\"\\\"_blank\\\"\">\\n <span>READ OUR STORY<\\\/span>\\n <svg width=\"\\\"20\\\"\" height=\"\\\"20\\\"\" viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M5\" 12h19m19 12l12 5m19 19\\\" stroke =\"\\\"currentColor\\\"\" stroke-width=\"\\\"2.5\\\"\" stroke-linecap=\"\\\"round\\\"\" stroke-linejoin=\"\\\"round\\\"\\\/\">\\n <\\\/svg>\\n <\\\/a>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-hero-stats\\\"\">\\n <\/p>\n<div class=\"\\\"hero-stat-item\\\"\">\\n <\/p>\n<div class=\"\\\"hero-stat-icon\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M12\" 2l15.09 8.26l22 9.27l17 14.14l18.18 21.02l12 17.77l5.82 21.02l7 14.14l2 9.27l8.91 8.26l12 2z\\\" stroke=\"\\\"currentColor\\\"\" fill=\"\\\"none\\\"\\\/\">\\n <\\\/svg>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"hero-stat-text\\\"\">\\n <span class=\"\\\"hero-stat-number\\\"\">${priority === 'urgent' ? 'Breaking' : 'Featured'}<\\\/span> Story\\n <\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"hero-stat-item\\\"\">\\n <\/p>\n<div class=\"\\\"hero-stat-icon\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M9\" 11l12 14l22 4m21 12c21 16.9706 21 12 21c7.02944 3 12c3 7.02944 3\\\" stroke =\"\\\"currentColor\\\"\\\/\">\\n <\\\/svg>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"hero-stat-text\\\"\">\\n <span class=\"\\\"hero-stat-number\\\"\">Verified<\\\/span> News\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n `;\\n },\\n\\n \\\/\\\/ Create news card \\u0441 \\u0443\\u043b\\u0443\\u0447\\u0448\\u0435\\u043d\\u043d\\u044b\\u043c \\u043f\\u0430\\u0440\\u0441\\u0438\\u043d\\u0433\\u043e\\u043c\\n createNewsCard(news, index) {\\n const card = document.createElement('div');\\n card.className = 'bifa-news-card';\\n card.style.animationDelay = `${index * 0.1}s`;\\n\\n \\\/\\\/ Get data\\n const media = news._embedded?.['wp:featuredmedia']?.[0];\\n const imageUrl = media?.source_url || `\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/news-placeholder-${(index % 3) + 1}.jpg`;\\n const date = this.formatDate(news.date);\\n const excerpt = this.stripHtml(news.excerpt.rendered).substring(0, 100) + '...';\\n \\n \\\/\\\/ \\u041f\\u043e\\u043b\\u0443\\u0447\\u0430\\u0435\\u043c badge \\u0438 priority\\n const badgeText = news._bifa_badge_text || news.meta?._bifa_badge_text || news.acf?._bifa_badge_text || this.getBadgeText(news);\\n const priority = news._bifa_priority || news.meta?._bifa_priority || news.acf?._bifa_priority || 'normal';\\n \\n \\\/\\\/ \\u041f\\u0440\\u043e\\u0432\\u0435\\u0440\\u044f\\u0435\\u043c, \\u044f\\u0432\\u043b\\u044f\\u0435\\u0442\\u0441\\u044f \\u043b\\u0438 \\u044d\\u0442\\u043e \\u0441\\u043e\\u0431\\u044b\\u0442\\u0438\\u0435\\u043c\\n const eventDate = news._bifa_event_date || news.meta?._bifa_event_date || news.acf?._bifa_event_date;\\n const eventEndDate = news._bifa_event_end_date || news.meta?._bifa_event_end_date || news.acf?._bifa_event_end_date;\\n \\n card.innerHTML = `\\n <\/p>\n<div class=\"\\\"bifa-news-image\\\"\" style=\"\\\"background-image:\" url('${imageurl}')\\\">\\n <span class=\"\\\"bifa-news-badge\" ${priority =\"==\" 'urgent' ? : ''}\\\">${badgeText}<\\\/span>\\n ${eventDate ? `<span class=\"\\\"event-date-label\\\"\">Event: ${this.formatDate(eventDate)}<\\\/span>` : ''}\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-news-content\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-news-date\\\"\">${date}<\\\/div>\\n <\/p>\n<h4 class=\"\\\"bifa-news-title\\\"\">${news.title.rendered}<\\\/h4>\\n <\/p>\n<p class=\"\\\"bifa-news-excerpt\\\"\">${excerpt}<\\\/p>\\n <a href=\"\\\"${news.link}\\\"\" class=\"\\\"bifa-news-link\\\"\" target=\"\\\"_blank\\\"\" onclick=\"\\\"event.stopPropagation()\\\"\">\\n <span>Read More<\\\/span>\\n <svg width=\"\\\"16\\\"\" height=\"\\\"16\\\"\" viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M5\" 12h19m19 12l12 5m19 19\\\" stroke =\"\\\"currentColor\\\"\" stroke-width=\"\\\"2\\\"\" stroke-linecap=\"\\\"round\\\"\" stroke-linejoin=\"\\\"round\\\"\\\/\">\\n <\\\/svg>\\n <\\\/a>\\n <\\\/div>\\n `;\\n\\n \\\/\\\/ Add click handler\\n card.addEventListener('click', () => {\\n window.open(news.link, '_blank');\\n });\\n\\n return card;\\n },\\n\\n \\\/\\\/ Render carousel - \\u0441 \\u0443\\u043b\\u0443\\u0447\\u0448\\u0435\\u043d\\u043d\\u044b\\u043c \\u043f\\u0430\\u0440\\u0441\\u0438\\u043d\\u0433\\u043e\\u043c\\n renderCarousel(newsItems) {\\n const carouselTrack = document.getElementById('bifaCarouselTrack');\\n if (!carouselTrack || !newsItems.length) return;\\n\\n \\\/\\\/ Clear existing content\\n carouselTrack.innerHTML = '';\\n\\n \\\/\\\/ Render each news item\\n newsItems.forEach((news, index) => {\\n const card = this.createNewsCard(news, index);\\n carouselTrack.appendChild(card);\\n });\\n\\n \\\/\\\/ Reset carousel position\\n this.config.carouselIndex = 0;\\n this.updateCarouselPosition();\\n },\\n\\n \\\/\\\/ Navigate carousel\\n navigateCarousel(direction) {\\n const track = document.getElementById('bifaCarouselTrack');\\n if (!track) return;\\n\\n const cards = track.querySelectorAll('.bifa-news-card');\\n const maxIndex = Math.max(0, cards.length - this.config.cardsPerView);\\n\\n if (direction === 'prev') {\\n this.config.carouselIndex = Math.max(0, this.config.carouselIndex - 1);\\n } else {\\n this.config.carouselIndex = Math.min(maxIndex, this.config.carouselIndex + 1);\\n }\\n\\n this.updateCarouselPosition();\\n },\\n\\n \\\/\\\/ Update carousel position\\n updateCarouselPosition() {\\n const track = document.getElementById('bifaCarouselTrack');\\n if (!track) return;\\n\\n const cardWidth = 100 \\\/ this.config.cardsPerView;\\n const offset = -(this.config.carouselIndex * cardWidth);\\n \\n track.style.transform = `translateX(${offset}%)`;\\n },\\n\\n \\\/\\\/ Get badge text\\n getBadgeText(news) {\\n \\\/\\\/ \\u041f\\u0440\\u043e\\u0431\\u0443\\u0435\\u043c \\u043f\\u043e\\u043b\\u0443\\u0447\\u0438\\u0442\\u044c badge \\u0438\\u0437 \\u0440\\u0430\\u0437\\u043d\\u044b\\u0445 \\u043c\\u0435\\u0441\\u0442\\n if (news._bifa_badge_text) {\\n return news._bifa_badge_text;\\n }\\n \\n if (news.meta?._bifa_badge_text) {\\n return news.meta._bifa_badge_text;\\n }\\n \\n if (news.acf?._bifa_badge_text) {\\n return news.acf._bifa_badge_text;\\n }\\n \\n \\\/\\\/ \\u041f\\u043e\\u043b\\u0443\\u0447\\u0430\\u0435\\u043c \\u043a\\u0430\\u0442\\u0435\\u0433\\u043e\\u0440\\u0438\\u044e\\n const category = news._embedded?.['wp:term']?.[0]?.[0];\\n return category?.name || 'News';\\n },\\n\\n \\\/\\\/ Strip HTML\\n stripHtml(html) {\\n const temp = document.createElement('div');\\n temp.innerHTML = html;\\n return temp.textContent || temp.innerText || '';\\n }\\n};\\n\\n\\\/\\\/ Initialize when DOM is ready\\ndocument.addEventListener('DOMContentLoaded', () => {\\n BifaNews.init();\\n});\\n\\n\\\/\\\/ Make loadBifaNews globally available for retry button\\nwindow.loadBifaNews = () => BifaNews.loadNews();\\n<\\\/script>\\n\\n<\\\/body>\\n<\\\/html>\"}},{\"type\":\"html\",\"props\":{\"content\":\"\"}},{\"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,\" maximum-scale=\"5.0,\" user-scalable=\"yes\\\"\">\\n<title>BIFA+ Interactive World Map<\\\/title>\\n<link href=\"\\\"https:\\\/\\\/fonts.googleapis.com\\\/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700&display=swap\\\"\" rel=\"\\\"stylesheet\\\"\">\\n<\/p>\n<style>\\n:root {\\n --navy: #0A1F44;\\n --gold: #D4AF37;\\n --gold-gradient: linear-gradient(135deg, #D4AF37, #ffd700);\\n --green: #1D6143;\\n --white: #FFF;\\n --gray: #6B7280;\\n --shadow: 0 2px 10px rgba(10,31,68,0.08);\\n --shadow-lg: 0 10px 40px rgba(10,31,68,0.12);\\n --trans: all 0.3s cubic-bezier(0.4,0,0.2,1);\\n --r: 12px;\\n}\\n* { \\n box-sizing: border-box; \\n font-family: 'Poppins', sans-serif; \\n -webkit-tap-highlight-color: transparent;\\n -webkit-touch-callout: none;\\n}\\nbody { \\n margin: 0; \\n padding: 0; \\n background: var(--white); \\n touch-action: manipulation;\\n}\\nsvg {\\n touch-action: manipulation;\\n}\\nsvg * {\\n pointer-events: none;\\n}\\nsvg path {\\n pointer-events: fill;\\n}\\n.svg-event-marker,\\n.svg-event-marker * {\\n pointer-events: all !important;\\n cursor: pointer;\\n}\\n@keyframes float { \\n 0%,100% { transform: translate3d(0,0,0); opacity: 1; } \\n 50% { transform: translate3d(0,-10px,0); opacity: 0.8; } \\n}\\n@keyframes pulse { \\n 0%,100% { transform: scale(1); } \\n 50% { transform: scale(1.1); } \\n}\\n@keyframes spin { to { transform: rotate(360deg); } }\\n@keyframes fadeIn { to { opacity: 1; } }\\n@keyframes dashMove { to { stroke-dashoffset: -100; } }\\n@keyframes fadeInUp {\\n from { opacity: 0; transform: translate3d(0,30px,0); }\\n to { opacity: 1; transform: translate3d(0,0,0); }\\n}\\n@keyframes expandWidth { to { width: 120px; } }\\n.brics-map-container {\\n position: relative;\\n width: 100vw;\\n margin-left: calc(-50vw + 50%);\\n padding: 60px 0;\\n background: var(--white);\\n overflow: hidden;\\n}\\n.brics-map-container::before {\\n content: '';\\n position: absolute;\\n inset: 0;\\n background: radial-gradient(circle at 30% 50%, rgba(10,31,68,0.02), transparent 50%),\\n radial-gradient(circle at 70% 80%, rgba(212,175,55,0.02), transparent 50%);\\n z-index: 0;\\n pointer-events: none;\\n}\\n.particles {\\n position: absolute;\\n width: 100%;\\n height: 100%;\\n overflow: hidden;\\n z-index: 1;\\n pointer-events: none;\\n}\\n.particle {\\n position: absolute;\\n width: 4px;\\n height: 4px;\\n background: linear-gradient(135deg, rgba(212,175,55,0.3), rgba(255,215,0,0.2));\\n border-radius: 50%;\\n animation: float 15s ease-in-out infinite;\\n will-change: transform;\\n box-shadow: 0 0 8px rgba(212,175,55,0.2);\\n}\\n.particle:nth-child(2n) { \\n background: linear-gradient(135deg, rgba(10,31,68,0.2), rgba(22,46,90,0.15)); \\n animation-duration: 18s; \\n}\\n.particle:nth-child(3n) { \\n background: linear-gradient(135deg, rgba(29,97,67,0.15), rgba(45,139,95,0.1)); \\n animation-duration: 20s;\\n}\\n.content-wrapper {\\n position: relative;\\n z-index: 2;\\n padding: 0 20px;\\n max-width: 1400px;\\n margin: 0 auto;\\n}\\n.brics-header {\\n text-align: center;\\n margin-bottom: 60px;\\n}\\n.brics-header h2 {\\n font-family: 'Montserrat', sans-serif;\\n font-weight: 900;\\n font-size: clamp(2.5rem, 4vw, 3.5rem);\\n background: linear-gradient(135deg, var(--gold), #ffd700);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n margin: 0 0 20px;\\n position: relative;\\n display: inline-block;\\n text-transform: uppercase;\\n letter-spacing: -0.5px;\\n line-height: 1.2;\\n text-shadow: 0 2px 4px rgba(212, 175, 55, 0.1);\\n animation: fadeInUp 1s ease-out 0.3s both;\\n}\\n.brics-header h2:after {\\n content: '';\\n position: absolute;\\n bottom: -15px;\\n left: 50%;\\n transform: translateX(-50%);\\n width: 0;\\n height: 5px;\\n background: linear-gradient(90deg, var(--gold), #ffd700);\\n border-radius: 3px;\\n animation: expandWidth 0.8s ease-out 1s both;\\n}\\n.brics-subtitle {\\n font-family: 'Poppins', sans-serif;\\n font-weight: 600;\\n font-size: 1.3rem;\\n color: var(--gray);\\n margin: 30px auto 0;\\n letter-spacing: 0.3px;\\n line-height: 1.6;\\n max-width: 700px;\\n animation: fadeInUp 1s ease-out 0.5s both;\\n}\\n.filter-controls {\\n display: flex;\\n justify-content: center;\\n gap: 20px;\\n margin-bottom: 40px;\\n flex-wrap: wrap;\\n}\\n.filter-btn {\\n padding: 12px 28px;\\n background: var(--white);\\n border: 2px solid var(--navy);\\n border-radius: 50px;\\n font-family: 'Montserrat', sans-serif;\\n font-weight: 700;\\n font-size: 14px;\\n color: var(--navy);\\n cursor: pointer;\\n transition: var(--trans);\\n text-decoration: none;\\n display: inline-block;\\n text-transform: uppercase;\\n letter-spacing: 1px;\\n box-shadow: 0 4px 15px rgba(10,31,68,0.1);\\n position: relative;\\n overflow: hidden;\\n touch-action: manipulation;\\n}\\n.filter-btn:hover {\\n transform: translateY(-3px);\\n box-shadow: 0 8px 25px rgba(10,31,68,0.2);\\n background: var(--navy);\\n color: var(--white);\\n}\\n.filter-btn.active {\\n background: var(--navy);\\n color: var(--white);\\n border-color: var(--navy);\\n box-shadow: 0 6px 20px rgba(10,31,68,0.3);\\n}\\n.filter-btn.active.news {\\n background: linear-gradient(135deg, var(--green), #2d8b5f);\\n border-color: var(--green);\\n box-shadow: 0 6px 20px rgba(29,97,67,0.3);\\n}\\n.brics-legend {\\n display: flex;\\n flex-wrap: wrap;\\n justify-content: center;\\n gap: 20px;\\n margin-bottom: 40px;\\n padding: 30px;\\n background: linear-gradient(135deg, rgba(248,249,250,0.9) 0%, rgba(240,242,245,0.9) 100%);\\n border-radius: 25px;\\n box-shadow: 0 5px 30px rgba(10,31,68,0.08);\\n backdrop-filter: blur(10px);\\n border: 1px solid rgba(212,175,55,0.1);\\n}\\n.brics-country-tag {\\n display: flex;\\n align-items: center;\\n gap: 12px;\\n padding: 12px 24px;\\n background: var(--white);\\n border-radius: 50px;\\n box-shadow: 0 4px 15px rgba(10,31,68,0.1);\\n transition: var(--trans);\\n cursor: pointer;\\n position: relative;\\n overflow: hidden;\\n border: 2px solid transparent;\\n touch-action: manipulation;\\n}\\n.brics-country-tag:hover {\\n transform: translateY(-3px) scale(1.02);\\n box-shadow: 0 10px 30px rgba(212,175,55,0.3);\\n border-color: var(--gold);\\n}\\n.brics-country-tag.active {\\n background: linear-gradient(135deg, var(--navy), #162e5a);\\n box-shadow: 0 6px 25px rgba(10,31,68,0.4);\\n border-color: var(--gold);\\n}\\n.brics-country-tag.active .country-name {\\n color: var(--white);\\n}\\n.country-flag {\\n width: 32px;\\n height: 24px;\\n border-radius: 4px;\\n background-size: cover;\\n background-position: center;\\n box-shadow: 0 2px 6px rgba(0,0,0,0.15);\\n}\\n.country-name {\\n font-family: 'Montserrat', sans-serif;\\n font-size: 15px;\\n font-weight: 700;\\n color: var(--navy);\\n text-transform: uppercase;\\n letter-spacing: 0.5px;\\n transition: color 0.3s ease;\\n}\\n.event-count {\\n background: linear-gradient(135deg, var(--gold), #ffd700);\\n color: var(--navy);\\n font-family: 'Montserrat', sans-serif;\\n font-weight: 800;\\n font-size: 12px;\\n padding: 4px 10px;\\n border-radius: 20px;\\n margin-left: auto;\\n box-shadow: 0 2px 8px rgba(212,175,55,0.3);\\n}\\n.map-wrapper {\\n position: relative;\\n width: 100%;\\n background: linear-gradient(135deg, #f5f6f8 0%, #e8eaed 100%);\\n overflow: hidden;\\n min-height: 600px;\\n box-shadow: 0 10px 50px rgba(10,31,68,0.15);\\n border-radius: 25px;\\n margin: 0 20px;\\n width: calc(100% - 40px);\\n border: 1px solid rgba(212,175,55,0.1);\\n}\\n.map-zoom-container {\\n width: 100%;\\n height: 100%;\\n position: relative;\\n overflow: hidden;\\n touch-action: none;\\n cursor: grab;\\n}\\n.map-zoom-container:active {\\n cursor: grabbing;\\n}\\n.map-svg-container {\\n width: 100%;\\n height: 100%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n position: relative;\\n z-index: 1;\\n padding: 40px;\\n transform-origin: center center;\\n transition: none;\\n will-change: transform;\\n}\\n.map-svg-container svg {\\n width: 100%;\\n height: auto;\\n max-height: 600px;\\n filter: drop-shadow(0 10px 30px rgba(10,31,68,0.08));\\n}\\n.zoom-controls {\\n position: absolute;\\n bottom: 20px;\\n right: 20px;\\n display: flex;\\n flex-direction: column;\\n gap: 10px;\\n z-index: 100;\\n}\\n.zoom-btn {\\n width: 40px;\\n height: 40px;\\n background: var(--white);\\n border: 2px solid var(--navy);\\n border-radius: 50%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n cursor: pointer;\\n font-size: 20px;\\n font-weight: 800;\\n color: var(--navy);\\n box-shadow: 0 4px 15px rgba(10,31,68,0.2);\\n transition: all 0.3s;\\n user-select: none;\\n position: relative;\\n overflow: hidden;\\n touch-action: manipulation;\\n}\\n.zoom-btn:hover {\\n background: var(--navy);\\n color: var(--white);\\n transform: scale(1.1);\\n border-color: var(--gold);\\n}\\n.zoom-btn:active {\\n transform: scale(0.95);\\n}\\n.zoom-reset {\\n font-size: 14px;\\n padding: 8px 12px;\\n width: auto;\\n height: auto;\\n border-radius: 25px;\\n font-family: 'Montserrat', sans-serif;\\n font-weight: 700;\\n letter-spacing: 0.5px;\\n}\\n.map-svg-container svg path {\\n fill: #e8eaed;\\n stroke: #d1d5db;\\n stroke-width: 0.3;\\n opacity: 0.4;\\n filter: blur(0.8px);\\n pointer-events: none;\\n transition: none;\\n cursor: default;\\n}\\n.map-svg-container svg path.brics-country {\\n fill: var(--gold);\\n stroke: var(--white);\\n stroke-width: 2;\\n opacity: 1;\\n filter: drop-shadow(0 0 15px rgba(212,175,55,0.5));\\n pointer-events: fill;\\n cursor: pointer;\\n transition: var(--trans);\\n}\\n.map-svg-container svg path.brics-country:hover {\\n fill: #e6c157;\\n stroke-width: 2.5;\\n filter: brightness(1.15) drop-shadow(0 0 25px rgba(212,175,55,0.7));\\n}\\n.map-svg-container svg path.active-country {\\n fill: var(--navy) !important;\\n stroke: var(--gold);\\n stroke-width: 2.5;\\n filter: drop-shadow(0 0 25px rgba(10,31,68,0.5));\\n}\\n.connection-lines {\\n pointer-events: none;\\n opacity: 0;\\n animation: fadeIn 2s ease-out 1s forwards;\\n}\\n.connection-line {\\n stroke: var(--gold);\\n stroke-width: 1.5;\\n fill: none;\\n stroke-dasharray: 5, 5;\\n animation: dashMove 20s linear infinite;\\n opacity: 0.4;\\n}\\n.svg-event-marker {\\n cursor: pointer;\\n position: relative;\\n}\\n.svg-event-marker:hover circle:not([fill=\\\"transparent\\\"]) {\\n filter: drop-shadow(0 6px 20px rgba(212,175,55,0.5));\\n stroke-width: 4;\\n}\\n.svg-event-marker circle {\\n fill: var(--white);\\n stroke: var(--gold);\\n stroke-width: 3;\\n filter: drop-shadow(0 4px 12px rgba(10,31,68,0.3));\\n transition: all 0.3s ease;\\n}\\n.svg-event-marker.news circle {\\n stroke: var(--green);\\n}\\n.svg-event-marker.urgent circle {\\n stroke: #dc2626;\\n animation: pulse 1s ease-in-out infinite;\\n}\\n.svg-event-marker text {\\n text-anchor: middle;\\n dominant-baseline: middle;\\n pointer-events: none;\\n user-select: none;\\n -webkit-user-select: none;\\n -moz-user-select: none;\\n -ms-user-select: none;\\n}\\n.event-popup {\\n position: fixed !important;\\n background: var(--white);\\n border-radius: 25px;\\n box-shadow: 0 30px 90px rgba(10,31,68,0.3);\\n padding: 24px;\\n z-index: 999999 !important;\\n max-width: 380px;\\n min-width: 320px;\\n display: none;\\n pointer-events: none !important;\\n border: 2px solid var(--gold);\\n opacity: 0;\\n transition: opacity 0.2s ease-in-out;\\n backdrop-filter: blur(10px);\\n}\\n.event-popup.active {\\n display: block !important;\\n opacity: 1;\\n pointer-events: auto !important;\\n}\\n.popup-close {\\n position: absolute;\\n top: 10px;\\n right: 10px;\\n width: 32px;\\n height: 32px;\\n background: var(--navy);\\n color: var(--white);\\n border: none;\\n border-radius: 50%;\\n cursor: pointer;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n font-size: 18px;\\n font-weight: 800;\\n transition: all 0.3s;\\n z-index: 10;\\n box-shadow: 0 4px 12px rgba(10,31,68,0.3);\\n touch-action: manipulation;\\n}\\n.popup-close:hover {\\n background: linear-gradient(135deg, #dc2626, #ef4444);\\n transform: scale(1.1) rotate(90deg);\\n box-shadow: 0 6px 20px rgba(220,38,38,0.4);\\n}\\n.popup-overlay {\\n position: fixed;\\n inset: 0;\\n background: rgba(0,0,0,0.3);\\n z-index: 999998;\\n cursor: pointer;\\n display: none;\\n}\\n.popup-overlay.active {\\n display: block;\\n}\\n@media (max-width: 768px) {\\n .popup-overlay.active { display: block; }\\n .event-popup {\\n top: 50% !important;\\n left: 50% !important;\\n transform: translate(-50%, -50%) !important;\\n }\\n}\\n.country-tooltip {\\n position: absolute;\\n background: var(--navy);\\n color: var(--white);\\n font-family: 'Montserrat', sans-serif;\\n font-size: 14px;\\n font-weight: 600;\\n white-space: nowrap;\\n padding: 10px 20px;\\n border-radius: 25px;\\n box-shadow: 0 8px 25px rgba(10,31,68,0.4);\\n opacity: 0;\\n visibility: hidden;\\n transform: translateY(5px);\\n transition: all 0.2s;\\n pointer-events: none;\\n z-index: 10002;\\n text-transform: uppercase;\\n letter-spacing: 0.5px;\\n border: 1px solid rgba(212,175,55,0.2);\\n}\\n.country-tooltip.show {\\n opacity: 1;\\n visibility: visible;\\n transform: translateY(0);\\n}\\n.popup-header {\\n display: flex;\\n gap: 16px;\\n margin-bottom: 20px;\\n}\\n.popup-image-wrapper {\\n position: relative;\\n width: 110px;\\n height: 80px;\\n flex-shrink: 0;\\n border-radius: 15px;\\n overflow: hidden;\\n background: linear-gradient(135deg, #f0f2f5 0%, #e5e7eb 100%);\\n box-shadow: 0 4px 15px rgba(10,31,68,0.15);\\n border: 1px solid rgba(212,175,55,0.1);\\n}\\n.popup-image-wrapper.no-image {\\n background: linear-gradient(135deg, #f0f2f5 0%, #e5e7eb 100%);\\n}\\n.popup-image {\\n width: 100%;\\n height: 100%;\\n object-fit: cover;\\n display: block;\\n}\\n.popup-image-placeholder {\\n position: absolute;\\n inset: 0;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n font-size: 32px;\\n background: linear-gradient(135deg, #f8f9fa 0%, #f0f2f5 100%);\\n color: #6B7280;\\n text-shadow: 0 2px 4px rgba(0,0,0,0.1);\\n}\\n.popup-content { \\n flex: 1; \\n min-height: 80px;\\n}\\n.popup-title {\\n font-family: 'Montserrat', sans-serif;\\n font-weight: 800;\\n font-size: 18px;\\n color: var(--navy);\\n margin: 0 0 10px;\\n line-height: 1.3;\\n display: -webkit-box;\\n -webkit-line-clamp: 2;\\n -webkit-box-orient: vertical;\\n overflow: hidden;\\n text-transform: uppercase;\\n letter-spacing: -0.3px;\\n}\\n.popup-meta {\\n display: flex;\\n flex-direction: column;\\n gap: 6px;\\n}\\n.popup-meta-item {\\n font-family: 'Poppins', sans-serif;\\n font-size: 13px;\\n color: var(--gray);\\n display: flex;\\n align-items: center;\\n gap: 8px;\\n font-weight: 600;\\n text-transform: uppercase;\\n letter-spacing: 0.3px;\\n}\\n.popup-excerpt {\\n font-family: 'Poppins', sans-serif;\\n font-size: 14px;\\n color: #475569;\\n line-height: 1.6;\\n margin: 16px 0 20px;\\n display: -webkit-box;\\n -webkit-line-clamp: 3;\\n -webkit-box-orient: vertical;\\n overflow: hidden;\\n}\\n.popup-link {\\n background: linear-gradient(135deg, var(--gold), #ffd700);\\n color: var(--navy);\\n padding: 12px 24px;\\n border-radius: 50px;\\n text-decoration: none;\\n display: inline-flex;\\n align-items: center;\\n gap: 8px;\\n font-family: 'Montserrat', sans-serif;\\n font-weight: 800;\\n font-size: 14px;\\n text-transform: uppercase;\\n letter-spacing: 1px;\\n transition: all 0.3s;\\n box-shadow: 0 4px 15px rgba(212,175,55,0.4);\\n position: relative;\\n overflow: hidden;\\n touch-action: manipulation;\\n}\\n.popup-link:hover {\\n transform: translateY(-3px);\\n box-shadow: 0 8px 25px rgba(212,175,55,0.5);\\n background: linear-gradient(135deg, #e6c157, #ffd700);\\n}\\n.loading-overlay {\\n position: absolute;\\n inset: 0;\\n background: rgba(255,255,255,0.95);\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n z-index: 10000;\\n backdrop-filter: blur(5px);\\n border-radius: var(--r);\\n}\\n.spinner {\\n width: 50px;\\n height: 50px;\\n border: 4px solid #e5e7eb;\\n border-top-color: var(--gold);\\n border-radius: 50%;\\n animation: spin 1s linear infinite;\\n margin: 0 auto 20px;\\n box-shadow: 0 0 20px rgba(212,175,55,0.2);\\n}\\n.loading-text {\\n font-family: 'Montserrat', sans-serif;\\n font-size: 16px;\\n color: var(--gray);\\n font-weight: 600;\\n letter-spacing: 0.5px;\\n text-transform: uppercase;\\n}\\n@media (max-width: 768px) {\\n .brics-map-container { padding: 40px 0; }\\n .content-wrapper { padding: 0 15px; }\\n .brics-header { margin-bottom: 40px; }\\n .brics-header h2 { font-size: 2rem; }\\n .brics-subtitle { font-size: 1.1rem; }\\n .filter-controls { gap: 10px; margin-bottom: 25px; padding: 0 10px; }\\n .filter-btn { padding: 10px 20px; font-size: 12px; border-radius: 25px; }\\n .brics-legend { gap: 10px; padding: 20px 15px; margin-bottom: 25px; border-radius: 20px; }\\n .brics-country-tag { padding: 8px 16px; gap: 10px; border-radius: 25px; }\\n .country-flag { width: 24px; height: 18px; }\\n .country-name { font-size: 13px; }\\n .event-count { font-size: 11px; padding: 3px 8px; border-radius: 15px; }\\n .map-wrapper { margin: 0; width: 100%; min-height: 450px; height: 450px; border-radius: 15px; }\\n .map-svg-container { padding: 10px; }\\n .map-svg-container svg { max-height: none; height: 130%; width: auto; max-width: none; }\\n .zoom-controls { bottom: 10px; right: 10px; gap: 8px; }\\n .zoom-btn { width: 36px; height: 36px; font-size: 18px; }\\n .zoom-reset { font-size: 12px; padding: 6px 10px; border-radius: 20px; }\\n .svg-event-marker circle { stroke-width: 2; }\\n .svg-event-marker:active circle {\\n stroke-width: 4;\\n filter: drop-shadow(0 4px 15px rgba(212,175,55,0.5));\\n }\\n .event-popup { max-width: calc(100vw - 30px) !important; min-width: 280px; padding: 20px; border-radius: 20px; }\\n .popup-header { flex-direction: column; gap: 12px; }\\n .popup-image-wrapper { width: 100%; height: 160px; border-radius: 12px; }\\n .popup-image-placeholder { font-size: 48px; }\\n .popup-title { font-size: 16px; }\\n .popup-excerpt { font-size: 13px; }\\n .popup-link { width: 100%; justify-content: center; padding: 12px 20px; border-radius: 25px; }\\n .country-tooltip { font-size: 12px; padding: 8px 16px; border-radius: 20px; }\\n .connection-lines { display: none; }\\n .particle { width: 3px; height: 3px; }\\n}\\n@media (max-width: 480px) {\\n .brics-map-container { padding: 30px 0; }\\n .brics-header { margin-bottom: 35px; }\\n .brics-header h2 { font-size: 1.8rem; }\\n .brics-subtitle { font-size: 1rem; margin-top: 20px; }\\n}\\n@media (max-width: 375px) {\\n .brics-header h2 { font-size: 1.8rem; }\\n .brics-subtitle { font-size: 1rem; }\\n .map-wrapper { height: 350px; min-height: 350px; border-radius: 12px; }\\n .svg-event-marker text { font-size: 14px; }\\n}\\n@media (hover: none) and (pointer: coarse) {\\n .svg-event-marker {\\n transform-origin: center;\\n }\\n .svg-event-marker:active circle {\\n stroke-width: 4;\\n filter: drop-shadow(0 6px 20px rgba(212,175,55,0.5));\\n }\\n}\\n<\\\/style>\\n<\\\/head>\\n<body>\\n<\/p>\n<div class=\"\\\"brics-map-container\\\"\">\\n<\/p>\n<div class=\"\\\"particles\\\"\">\\n<\/p>\n<div class=\"\\\"particle\\\"\" style=\"\\\"left:10%;animation-delay:0s\\\"\"><\\\/div>\\n<\/p>\n<div class=\"\\\"particle\\\"\" style=\"\\\"left:30%;animation-delay:2s\\\"\"><\\\/div>\\n<\/p>\n<div class=\"\\\"particle\\\"\" style=\"\\\"left:50%;animation-delay:4s\\\"\"><\\\/div>\\n<\/p>\n<div class=\"\\\"particle\\\"\" style=\"\\\"left:70%;animation-delay:6s\\\"\"><\\\/div>\\n<\/p>\n<div class=\"\\\"particle\\\"\" style=\"\\\"left:90%;animation-delay:8s\\\"\"><\\\/div>\\n<\\\/div>\\n<\/p>\n<div class=\"\\\"content-wrapper\\\"\">\\n<\/p>\n<div class=\"\\\"brics-header\\\"\">\\n<a href=\"\\\"https:\\\/\\\/bifa.ai\\\/events-2\\\/\\\"\" style=\"\\\"text-decoration:\" none;\\\">\\n<\/p>\n<h2>BIFA+ Bridging Events<\\\/h2>\\n<\\\/a>\\n<\/p>\n<p class=\"\\\"brics-subtitle\\\"\">Connecting Nations Through Economic Bridges<\\\/p>\\n<\\\/div>\\n<\/p>\n<div class=\"\\\"filter-controls\\\"\" id=\"\\\"filterControls\\\"\"><\\\/div>\\n<\/p>\n<div class=\"\\\"brics-legend\\\"\" id=\"\\\"legend\\\"\"><\\\/div>\\n<\/p>\n<div class=\"\\\"map-wrapper\\\"\">\\n<\/p>\n<div class=\"\\\"map-zoom-container\\\"\" id=\"\\\"mapZoomContainer\\\"\">\\n<\/p>\n<div class=\"\\\"map-svg-container\\\"\" id=\"\\\"mapContainer\\\"\"><\\\/div>\\n<\\\/div>\\n<\/p>\n<div class=\"\\\"country-tooltip\\\"\" id=\"\\\"tooltip\\\"\"><\\\/div>\\n<\/p>\n<div class=\"\\\"zoom-controls\\\"\" id=\"\\\"zoomControls\\\"\"><\\\/div>\\n<\/p>\n<div class=\"\\\"loading-overlay\\\"\" id=\"\\\"loadingOverlay\\\"\">\\n<\/p>\n<div style=\"\\\"text-align:center\\\"\">\\n<\/p>\n<div class=\"\\\"spinner\\\"\"><\\\/div>\\n<\/p>\n<div class=\"\\\"loading-text\\\"\">Loading BIFA+ content...<\\\/div>\\n<\\\/div>\\n<\\\/div>\\n<\\\/div>\\n<\/p>\n<div class=\"\\\"event-popup\\\"\" id=\"\\\"eventPopup\\\"\"><\\\/div>\\n<\/p>\n<div class=\"\\\"popup-overlay\\\"\" id=\"\\\"popupOverlay\\\"\"><\\\/div>\\n<\\\/div>\\n<\\\/div>\\n<script>\\n(function() {\\n'use strict';\\n\\n\\\/\\\/ ==================== CONFIGURATION ====================\\nconst CONFIG = {\\n SVG_PATH: \\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/world_map.svg\\\",\\n API_ENDPOINT: 'https:\\\/\\\/bifa.ai\\\/wp-json\\\/wp\\\/v2\\\/bifa_news_events?_embed&per_page=100&acf_format=standard',\\n IMAGE_PROXY: 'https:\\\/\\\/images.weserv.nl\\\/',\\n MIN_ZOOM: 1,\\n MAX_ZOOM: 4,\\n ZOOM_STEP: 0.3,\\n MOBILE_BREAKPOINT: 768,\\n DEBOUNCE_DELAY: 250,\\n THROTTLE_DELAY: 16,\\n POPUP_HOVER_DELAY: 200,\\n TOUCH_TAP_THRESHOLD: 300,\\n MAX_MARKERS_PER_COUNTRY: 5,\\n MARKER_RADIUS_DESKTOP: 30,\\n MARKER_RADIUS_MOBILE: 20,\\n MARKER_SIZE_DESKTOP: 20,\\n MARKER_SIZE_MOBILE: 22\\n};\\n\\nconst BRICS_COUNTRIES = {\\n 'BR': { name: 'Brazil', lat: -14.235, lng: -51.925, size: 'medium' },\\n 'RU': { name: 'Russian Federation', lat: 61.524, lng: 105.318, size: 'large' },\\n 'IN': { name: 'India', lat: 20.593, lng: 78.962, size: 'large' },\\n 'CN': { name: 'China', lat: 35.861, lng: 104.195, size: 'large' },\\n 'ZA': { name: 'South Africa', lat: -30.559, lng: 22.937, size: 'medium' },\\n 'SA': { name: 'Saudi Arabia', lat: 23.885, lng: 45.079, size: 'small' },\\n 'AE': { name: 'United Arab Emirates', lat: 23.424, lng: 53.847, size: 'small' },\\n 'EG': { name: 'Egypt', lat: 26.820, lng: 30.802, size: 'medium' },\\n 'IR': { name: 'Iran', lat: 32.427, lng: 53.688, size: 'medium' },\\n 'ET': { name: 'Ethiopia', lat: 9.145, lng: 40.489, size: 'small' },\\n 'ID': { name: 'Indonesia', lat: -0.789, lng: 113.921, size: 'large' }\\n};\\n\\nconst MAX_MARKERS_BY_SIZE = {\\n small: 1,\\n medium: 3,\\n large: 4\\n};\\n\\nconst INDONESIA_ID_PATTERNS = ['ID', 'ID0', 'ID1', 'ID2', 'ID3', 'ID4', 'ID5', 'ID6', 'ID7', 'ID8', 'ID9', 'ID_'];\\n\\n\\\/\\\/ ==================== STATE MANAGEMENT ====================\\nclass AppState {\\n constructor() {\\n this.content = [];\\n this.filter = 'all';\\n this.svg = null;\\n this.zoom = 1;\\n this.x = 0;\\n this.y = 0;\\n this.isDragging = false;\\n this.startX = 0;\\n this.startY = 0;\\n this.maxX = 0;\\n this.maxY = 0;\\n this.markersGroup = null;\\n this.activeMarker = null;\\n this.isPopupOpen = false;\\n this.isPopupHovered = false;\\n this.touchStartTime = 0;\\n this.lastDistance = 0;\\n this.countryCenters = {};\\n this.eventListeners = new Map();\\n this.isTouchDevice = this._detectTouchDevice();\\n this.isMobile = this._detectMobile();\\n this.resizeObserver = null;\\n this.imageLoadErrors = new WeakMap();\\n }\\n\\n _detectTouchDevice() {\\n return ('ontouchstart' in window) || \\n (navigator.maxTouchPoints > 0) || \\n (navigator.msMaxTouchPoints > 0);\\n }\\n\\n _detectMobile() {\\n return window.innerWidth <= CONFIG.MOBILE_BREAKPOINT;\\n }\\n\\n updateMobileState() {\\n this.isMobile = this._detectMobile();\\n }\\n\\n reset() {\\n this.zoom = 1;\\n this.x = 0;\\n this.y = 0;\\n this.isDragging = false;\\n }\\n}\\n\\n\\\/\\\/ ==================== UTILITY FUNCTIONS ====================\\nclass Utils {\\n static $(id) {\\n return document.getElementById(id);\\n }\\n\\n static $$(selector, parent = document) {\\n return parent.querySelectorAll(selector);\\n }\\n\\n static createElement(html) {\\n const template = document.createElement('template');\\n template.innerHTML = html.trim();\\n return template.content.firstChild;\\n }\\n\\n static debounce(func, wait) {\\n let timeout;\\n return function executedFunction(...args) {\\n const later = () => {\\n clearTimeout(timeout);\\n func(...args);\\n };\\n clearTimeout(timeout);\\n timeout = setTimeout(later, wait);\\n };\\n }\\n\\n static throttle(func, limit) {\\n let inThrottle;\\n return function(...args) {\\n if (!inThrottle) {\\n func.apply(this, args);\\n inThrottle = true;\\n setTimeout(() => inThrottle = false, limit);\\n }\\n };\\n }\\n\\n static formatDate(dateStr) {\\n if (!dateStr) return '';\\n const date = new Date(dateStr);\\n return date.toLocaleDateString('en-US', { \\n month: 'short', \\n day: 'numeric', \\n year: 'numeric' \\n });\\n }\\n\\n static stripHtml(html) {\\n const div = document.createElement('div');\\n div.innerHTML = html;\\n const text = div.textContent || '';\\n return text.length > 200 ? text.substring(0, 200) + '...' : text;\\n }\\n\\n static createImageProxy(url) {\\n if (!url || window.location.hostname === 'bifa.ai') return url;\\n return `${CONFIG.IMAGE_PROXY}?url=${encodeURIComponent(url)}&w=380&h=220&fit=cover&a=attention`;\\n }\\n\\n static isIndonesiaPath(id) {\\n return INDONESIA_ID_PATTERNS.some(pattern => \\n id === pattern || id.startsWith(pattern)\\n );\\n }\\n\\n static clamp(value, min, max) {\\n return Math.max(min, Math.min(max, value));\\n }\\n}\\n\\n\\\/\\\/ ==================== EVENT MANAGER ====================\\nclass EventManager {\\n constructor() {\\n this.listeners = new Map();\\n }\\n\\n add(element, event, handler, options = {}) {\\n if (!element) return;\\n \\n const key = `${event}-${handler.name || 'anonymous'}`;\\n \\n if (this.listeners.has(element)) {\\n const elementListeners = this.listeners.get(element);\\n if (elementListeners.has(key)) {\\n return;\\n }\\n elementListeners.set(key, { event, handler, options });\\n } else {\\n this.listeners.set(element, new Map([[key, { event, handler, options }]]));\\n }\\n \\n element.addEventListener(event, handler, options);\\n }\\n\\n remove(element, event, handler) {\\n if (!element) return;\\n \\n const key = `${event}-${handler.name || 'anonymous'}`;\\n const elementListeners = this.listeners.get(element);\\n \\n if (elementListeners && elementListeners.has(key)) {\\n const { event: evt, handler: hdlr, options } = elementListeners.get(key);\\n element.removeEventListener(evt, hdlr, options);\\n elementListeners.delete(key);\\n \\n if (elementListeners.size === 0) {\\n this.listeners.delete(element);\\n }\\n }\\n }\\n\\n removeAll(element) {\\n if (!element || !this.listeners.has(element)) return;\\n \\n const elementListeners = this.listeners.get(element);\\n elementListeners.forEach(({ event, handler, options }) => {\\n element.removeEventListener(event, handler, options);\\n });\\n \\n this.listeners.delete(element);\\n }\\n\\n cleanup() {\\n this.listeners.forEach((elementListeners, element) => {\\n this.removeAll(element);\\n });\\n this.listeners.clear();\\n }\\n}\\n\\n\\\/\\\/ ==================== ZOOM CONTROLLER ====================\\nclass ZoomController {\\n constructor(state, eventManager) {\\n this.state = state;\\n this.eventManager = eventManager;\\n this.container = null;\\n this.mapContainer = null;\\n }\\n\\n init(container, mapContainer) {\\n this.container = container;\\n this.mapContainer = mapContainer;\\n this.setupEventListeners();\\n this.renderControls();\\n }\\n\\n setupEventListeners() {\\n this.eventManager.add(this.container, 'mousedown', this.handleStart.bind(this));\\n this.eventManager.add(this.container, 'mousemove', Utils.throttle(this.handleMove.bind(this), CONFIG.THROTTLE_DELAY));\\n this.eventManager.add(this.container, 'mouseup', this.handleEnd.bind(this));\\n this.eventManager.add(this.container, 'mouseleave', this.handleEnd.bind(this));\\n this.eventManager.add(this.container, 'wheel', this.handleWheel.bind(this), { passive: false });\\n\\n this.eventManager.add(this.container, 'touchstart', this.handleStart.bind(this), { passive: false });\\n this.eventManager.add(this.container, 'touchmove', this.handleTouchMove.bind(this), { passive: false });\\n this.eventManager.add(this.container, 'touchend', this.handleTouchEnd.bind(this));\\n }\\n\\n handleStart(e) {\\n if (this.state.zoom <= 1) return;\\n \\n this.state.isDragging = true;\\n const point = e.touches ? e.touches[0] : e;\\n this.state.startX = point.clientX - this.state.x;\\n this.state.startY = point.clientY - this.state.y;\\n \\n if (e.type === 'touchstart') {\\n e.preventDefault();\\n }\\n }\\n\\n handleMove(e) {\\n if (!this.state.isDragging || this.state.zoom <= 1) return;\\n \\n const point = e.touches ? e.touches[0] : e;\\n this.state.x = point.clientX - this.state.startX;\\n this.state.y = point.clientY - this.state.startY;\\n \\n requestAnimationFrame(() => this.updateTransform());\\n \\n if (e.type === 'touchmove') {\\n e.preventDefault();\\n }\\n }\\n\\n handleEnd() {\\n this.state.isDragging = false;\\n }\\n\\n handleWheel(e) {\\n if (e.ctrlKey || e.metaKey) {\\n e.preventDefault();\\n const delta = e.deltaY > 0 ? -CONFIG.ZOOM_STEP : CONFIG.ZOOM_STEP;\\n this.setZoom(this.state.zoom + delta);\\n }\\n }\\n\\n handleTouchMove(e) {\\n if (e.touches.length === 2) {\\n e.preventDefault();\\n const touch1 = e.touches[0];\\n const touch2 = e.touches[1];\\n const distance = Math.hypot(\\n touch2.clientX - touch1.clientX,\\n touch2.clientY - touch1.clientY\\n );\\n \\n if (this.state.lastDistance > 0) {\\n const scale = distance \\\/ this.state.lastDistance;\\n this.setZoom(this.state.zoom * scale);\\n }\\n this.state.lastDistance = distance;\\n } else {\\n this.handleMove(e);\\n }\\n }\\n\\n handleTouchEnd(e) {\\n if (e.touches.length === 0) {\\n this.state.lastDistance = 0;\\n this.handleEnd();\\n }\\n }\\n\\n setZoom(zoom) {\\n this.state.zoom = Utils.clamp(zoom, CONFIG.MIN_ZOOM, CONFIG.MAX_ZOOM);\\n this.updateBounds();\\n this.updateTransform();\\n }\\n\\n updateBounds() {\\n if (!this.state.svg || !this.container) return;\\n \\n const containerBounds = this.container.getBoundingClientRect();\\n const svgBox = this.state.svg.getBBox();\\n \\n const scaledWidth = svgBox.width * this.state.zoom;\\n const scaledHeight = svgBox.height * this.state.zoom;\\n \\n this.state.maxX = Math.max(0, (scaledWidth - containerBounds.width) \\\/ 2);\\n this.state.maxY = Math.max(0, (scaledHeight - containerBounds.height) \\\/ 2);\\n }\\n\\n updateTransform() {\\n if (!this.mapContainer) return;\\n \\n this.state.x = Utils.clamp(this.state.x, -this.state.maxX, this.state.maxX);\\n this.state.y = Utils.clamp(this.state.y, -this.state.maxY, this.state.maxY);\\n \\n this.mapContainer.style.transform = \\n `translate3d(${this.state.x}px, ${this.state.y}px, 0) scale(${this.state.zoom})`;\\n }\\n\\n zoomIn() {\\n this.setZoom(this.state.zoom + CONFIG.ZOOM_STEP);\\n }\\n\\n zoomOut() {\\n this.setZoom(this.state.zoom - CONFIG.ZOOM_STEP);\\n }\\n\\n reset() {\\n this.state.reset();\\n this.updateTransform();\\n }\\n\\n renderControls() {\\n const controls = Utils.$('zoomControls');\\n controls.innerHTML = `\\n <button class=\"\\\"zoom-btn\\\"\" id=\"\\\"zoomInBtn\\\"\">+<\\\/button>\\n <button class=\"\\\"zoom-btn\\\"\" id=\"\\\"zoomOutBtn\\\"\">\\u2212<\\\/button>\\n <button class=\"\\\"zoom-btn\" zoom-reset\\\" id=\"\\\"zoomResetBtn\\\"\">Reset<\\\/button>\\n `;\\n \\n this.eventManager.add(Utils.$('zoomInBtn'), 'click', () => this.zoomIn());\\n this.eventManager.add(Utils.$('zoomOutBtn'), 'click', () => this.zoomOut());\\n this.eventManager.add(Utils.$('zoomResetBtn'), 'click', () => this.reset());\\n }\\n}\\n\\n\\\/\\\/ ==================== MAP MANAGER ====================\\nclass MapManager {\\n constructor(state, eventManager) {\\n this.state = state;\\n this.eventManager = eventManager;\\n this.tooltip = Utils.$('tooltip');\\n }\\n\\n async loadSVG() {\\n try {\\n const response = await fetch(CONFIG.SVG_PATH);\\n if (!response.ok) {\\n throw new Error(`${response.status} ${response.statusText}`);\\n }\\n \\n const svgText = await response.text();\\n const container = Utils.$('mapContainer');\\n container.innerHTML = svgText;\\n \\n this.state.svg = container.querySelector('svg');\\n if (!this.state.svg) {\\n throw new Error('SVG element not found');\\n }\\n \\n this.initMap();\\n } catch (error) {\\n console.error('Error loading SVG:', error);\\n Utils.$('mapContainer').innerHTML = \\n '<\/p>\n<div style=\"\\\"text-align:center;padding:50px;color:#666\\\"\">Unable to load map<\\\/div>';\\n Utils.$('loadingOverlay').style.display = 'none';\\n }\\n }\\n\\n initMap() {\\n this.setupSVGDefs();\\n this.createMarkersGroup();\\n this.processPaths();\\n this.createConnectionLines();\\n }\\n\\n setupSVGDefs() {\\n const defs = document.createElementNS('http:\\\/\\\/www.w3.org\\\/2000\\\/svg', 'defs');\\n defs.innerHTML = `\\n <lineargradient id=\"\\\"brics-gradient\\\"\" x1=\"\\\"0%\\\"\" y1=\"\\\"0%\\\"\" x2=\"\\\"100%\\\"\" y2=\"\\\"100%\\\"\">\\n <stop offset=\"\\\"0%\\\"\" style=\"\\\"stop-color:#D4AF37\\\"\\\/\">\\n <stop offset=\"\\\"100%\\\"\" style=\"\\\"stop-color:#b8973f\\\"\\\/\">\\n <\\\/linearGradient>\\n `;\\n this.state.svg.insertBefore(defs, this.state.svg.firstChild);\\n }\\n\\n createMarkersGroup() {\\n this.state.markersGroup = document.createElementNS('http:\\\/\\\/www.w3.org\\\/2000\\\/svg', 'g');\\n this.state.markersGroup.setAttribute('id', 'markers-group');\\n this.state.svg.appendChild(this.state.markersGroup);\\n }\\n\\n processPaths() {\\n const paths = this.state.svg.querySelectorAll('path');\\n \\n paths.forEach(path => {\\n const id = path.id || path.getAttribute('id');\\n if (!id) return;\\n \\n const countryCode = this.identifyCountry(id);\\n \\n if (countryCode) {\\n this.setupBRICSPath(path, countryCode);\\n this.calculateCenter(path, countryCode);\\n }\\n });\\n }\\n\\n identifyCountry(pathId) {\\n if (BRICS_COUNTRIES[pathId]) {\\n return pathId;\\n }\\n \\n if (Utils.isIndonesiaPath(pathId)) {\\n return 'ID';\\n }\\n \\n return null;\\n }\\n\\n setupBRICSPath(path, countryCode) {\\n path.classList.add('brics-country');\\n path.setAttribute('data-brics', countryCode);\\n path.setAttribute('data-country-name', BRICS_COUNTRIES[countryCode].name);\\n \\n if (!this.state.isTouchDevice) {\\n this.eventManager.add(path, 'mouseenter', (e) => this.showTooltip(e));\\n this.eventManager.add(path, 'mousemove', (e) => this.updateTooltip(e));\\n this.eventManager.add(path, 'mouseleave', () => this.hideTooltip());\\n }\\n \\n this.eventManager.add(path, 'click', (e) => this.toggleCountry(e, countryCode));\\n }\\n\\n calculateCenter(path, countryCode) {\\n const bbox = path.getBBox();\\n if (!this.state.countryCenters[countryCode]) {\\n this.state.countryCenters[countryCode] = {\\n x: bbox.x + bbox.width \\\/ 2,\\n y: bbox.y + bbox.height \\\/ 2\\n };\\n }\\n }\\n\\n showTooltip(e) {\\n const name = e.target.getAttribute('data-country-name');\\n if (name) {\\n this.tooltip.textContent = name;\\n this.tooltip.classList.add('show');\\n }\\n }\\n\\n updateTooltip(e) {\\n const rect = Utils.$('mapZoomContainer').getBoundingClientRect();\\n this.tooltip.style.left = (e.clientX - rect.left) + 'px';\\n this.tooltip.style.top = (e.clientY - rect.top - 40) + 'px';\\n }\\n\\n hideTooltip() {\\n this.tooltip.classList.remove('show');\\n }\\n\\n toggleCountry(e, countryCode) {\\n e.target.classList.toggle('active-country');\\n \\n const tag = document.querySelector(`[data-country=\\\"${countryCode}\\\"]`);\\n if (tag) {\\n tag.classList.toggle('active');\\n }\\n }\\n\\n createConnectionLines() {\\n if (this.state.isMobile) return;\\n \\n const connections = document.createElementNS('http:\\\/\\\/www.w3.org\\\/2000\\\/svg', 'g');\\n connections.setAttribute('class', 'connection-lines');\\n \\n const lines = [\\n ['BR', 'ZA'], \\n ['RU', 'CN'], \\n ['CN', 'IN'], \\n ['SA', 'AE'], \\n ['EG', 'ET'], \\n ['IN', 'ID']\\n ];\\n \\n lines.forEach(([from, to]) => {\\n const fromCenter = this.state.countryCenters[from];\\n const toCenter = this.state.countryCenters[to];\\n \\n if (fromCenter && toCenter) {\\n const line = document.createElementNS('http:\\\/\\\/www.w3.org\\\/2000\\\/svg', 'path');\\n const midX = (fromCenter.x + toCenter.x) \\\/ 2;\\n const midY = (fromCenter.y + toCenter.y) \\\/ 2 - 50;\\n \\n line.setAttribute('d', \\n `M ${fromCenter.x} ${fromCenter.y} Q ${midX} ${midY} ${toCenter.x} ${toCenter.y}`\\n );\\n line.setAttribute('class', 'connection-line');\\n connections.appendChild(line);\\n }\\n });\\n \\n this.state.svg.insertBefore(connections, this.state.markersGroup);\\n }\\n}\\n\\n\\\/\\\/ ==================== CONTENT MANAGER ====================\\nclass ContentManager {\\n constructor(state, eventManager) {\\n this.state = state;\\n this.eventManager = eventManager;\\n }\\n\\n async loadContent() {\\n try {\\n const response = await fetch(CONFIG.API_ENDPOINT);\\n const posts = await response.json();\\n \\n this.state.content = posts.map(post => this.parsePost(post));\\n \\n Utils.$('loadingOverlay').style.display = 'none';\\n return this.state.content;\\n } catch (error) {\\n console.error('Error loading content:', error);\\n Utils.$('loadingOverlay').style.display = 'none';\\n return [];\\n }\\n }\\n\\n getPostUrl(post) {\\n if (post.link && post.link !== '' && !post.link.includes('?p=')) {\\n return post.link;\\n }\\n \\n if (post.slug) {\\n return `https:\\\/\\\/bifa.ai\\\/news-events\\\/${post.slug}\\\/`;\\n }\\n \\n if (post.guid && post.guid.rendered && !post.guid.rendered.includes('?p=')) {\\n return post.guid.rendered;\\n }\\n \\n if (post.id) {\\n return `https:\\\/\\\/bifa.ai\\\/?p=${post.id}`;\\n }\\n \\n console.error('Cannot determine URL for post:', post.id);\\n return 'https:\\\/\\\/bifa.ai\\\/';\\n }\\n\\n parsePost(post) {\\n const types = post.bifa_item_type || [];\\n const classes = post.class_list || [];\\n \\n const hasEvent = types.some(x => x == 3 || x == 'event') || \\n classes.some(c => c.includes('bifa_item_type-event'));\\n const hasNews = types.some(x => x == 2 || x == 'news') || \\n classes.some(c => c.includes('bifa_item_type-news'));\\n \\n let image = '';\\n if (post._embedded?.['wp:featuredmedia']?.[0]?.source_url) {\\n image = Utils.createImageProxy(post._embedded['wp:featuredmedia'][0].source_url);\\n }\\n \\n return {\\n id: post.id,\\n title: post.title.rendered,\\n excerpt: Utils.stripHtml(post.excerpt.rendered),\\n link: this.getPostUrl(post),\\n type: hasEvent ? 'event' : hasNews ? 'news' : 'unknown',\\n date: post._bifa_event_date || post.date,\\n location: post._bifa_location,\\n priority: post._bifa_priority,\\n country: post._bifa_event_country,\\n image: image\\n };\\n }\\n\\n filterContent(filter) {\\n this.state.filter = filter;\\n \\n let filtered = this.state.content;\\n if (filter === 'events') {\\n filtered = this.state.content.filter(item => item.type === 'event');\\n } else if (filter === 'news') {\\n filtered = this.state.content.filter(item => item.type === 'news');\\n }\\n \\n return filtered;\\n }\\n\\n groupByCountry(content) {\\n const grouped = {};\\n \\n content.forEach(item => {\\n if (item.country && BRICS_COUNTRIES[item.country]) {\\n if (!grouped[item.country]) {\\n grouped[item.country] = [];\\n }\\n grouped[item.country].push(item);\\n }\\n });\\n \\n Object.keys(grouped).forEach(country => {\\n const countrySize = BRICS_COUNTRIES[country].size;\\n const maxMarkers = MAX_MARKERS_BY_SIZE[countrySize];\\n \\n grouped[country].sort((a, b) => new Date(b.date) - new Date(a.date));\\n \\n grouped[country] = grouped[country].slice(0, maxMarkers);\\n });\\n \\n return grouped;\\n }\\n}\\n\\n\\\/\\\/ ==================== MARKER MANAGER ====================\\nclass MarkerManager {\\n constructor(state, eventManager, popupManager) {\\n this.state = state;\\n this.eventManager = eventManager;\\n this.popupManager = popupManager;\\n }\\n\\n renderMarkers(groupedContent) {\\n if (!this.state.markersGroup) return;\\n \\n this.state.markersGroup.innerHTML = '';\\n \\n Object.entries(groupedContent).forEach(([country, items]) => {\\n const center = this.state.countryCenters[country];\\n if (!center) return;\\n \\n const markerCount = items.length;\\n \\n let radius;\\n if (markerCount === 1) {\\n radius = 0;\\n } else if (markerCount === 2) {\\n radius = this.state.isMobile ? 15 : 20;\\n } else if (markerCount === 3) {\\n radius = this.state.isMobile ? 20 : 25;\\n } else {\\n radius = this.state.isMobile ? 25 : 30;\\n }\\n \\n \\\/\\\/ \\u0414\\u043e\\u0431\\u0430\\u0432\\u043b\\u044f\\u0435\\u043c \\u043c\\u0430\\u0440\\u043a\\u0435\\u0440\\u044b \\u0432 \\u043e\\u0431\\u0440\\u0430\\u0442\\u043d\\u043e\\u043c \\u043f\\u043e\\u0440\\u044f\\u0434\\u043a\\u0435: \\u0441\\u0442\\u0430\\u0440\\u044b\\u0435 \\u043f\\u0435\\u0440\\u0432\\u044b\\u043c\\u0438, \\u043d\\u043e\\u0432\\u044b\\u0435 \\u043f\\u043e\\u0441\\u043b\\u0435\\u0434\\u043d\\u0438\\u043c\\u0438\\n \\\/\\\/ \\u0412 SVG \\u043f\\u043e\\u0441\\u043b\\u0435\\u0434\\u043d\\u0438\\u0435 \\u044d\\u043b\\u0435\\u043c\\u0435\\u043d\\u0442\\u044b \\u043e\\u0442\\u043e\\u0431\\u0440\\u0430\\u0436\\u0430\\u044e\\u0442\\u0441\\u044f \\u043f\\u043e\\u0432\\u0435\\u0440\\u0445 \\u043f\\u0435\\u0440\\u0432\\u044b\\u0445\\n const reversedItems = [...items].reverse();\\n \\n reversedItems.forEach((item, reverseIndex) => {\\n \\\/\\\/ \\u0412\\u044b\\u0447\\u0438\\u0441\\u043b\\u044f\\u0435\\u043c \\u043e\\u0440\\u0438\\u0433\\u0438\\u043d\\u0430\\u043b\\u044c\\u043d\\u044b\\u0439 \\u0438\\u043d\\u0434\\u0435\\u043a\\u0441 \\u0434\\u043b\\u044f \\u043f\\u0440\\u0430\\u0432\\u0438\\u043b\\u044c\\u043d\\u043e\\u0433\\u043e \\u043f\\u043e\\u0437\\u0438\\u0446\\u0438\\u043e\\u043d\\u0438\\u0440\\u043e\\u0432\\u0430\\u043d\\u0438\\u044f\\n const index = markerCount - reverseIndex - 1;\\n \\n let markerX, markerY;\\n \\n if (markerCount === 1) {\\n markerX = center.x;\\n markerY = center.y;\\n } else {\\n const angle = (index * 360 \\\/ markerCount - 90) * Math.PI \\\/ 180;\\n markerX = center.x + Math.cos(angle) * radius;\\n markerY = center.y + Math.sin(angle) * radius;\\n }\\n \\n const marker = this.createMarker(item, markerX, markerY, reverseIndex);\\n this.setupMarkerEvents(marker, item);\\n this.state.markersGroup.appendChild(marker);\\n });\\n });\\n }\\n\\n createMarker(item, x, y, zIndex = 0) {\\n const markerSize = this.state.isMobile ? \\n CONFIG.MARKER_SIZE_MOBILE : \\n CONFIG.MARKER_SIZE_DESKTOP;\\n \\n const g = document.createElementNS('http:\\\/\\\/www.w3.org\\\/2000\\\/svg', 'g');\\n g.setAttribute('class', `svg-event-marker ${item.type} ${item.priority === 'urgent' ? 'urgent' : ''}`);\\n g.setAttribute('transform', `translate(${x},${y})`);\\n g.setAttribute('data-item-id', item.id);\\n g.setAttribute('data-z-index', zIndex);\\n \\n const hitArea = document.createElementNS('http:\\\/\\\/www.w3.org\\\/2000\\\/svg', 'circle');\\n hitArea.setAttribute('r', this.state.isMobile ? '35' : '30');\\n hitArea.setAttribute('fill', 'transparent');\\n hitArea.setAttribute('class', 'hit-area');\\n \\n const circle = document.createElementNS('http:\\\/\\\/www.w3.org\\\/2000\\\/svg', 'circle');\\n circle.setAttribute('r', markerSize);\\n \\n \\\/\\\/ \\u0418\\u0421\\u041f\\u0420\\u0410\\u0412\\u041b\\u0415\\u041d\\u0418\\u0415 \\u0414\\u041b\\u042f iPhone: \\u0418\\u0441\\u043f\\u043e\\u043b\\u044c\\u0437\\u0443\\u0435\\u043c \\u044d\\u043c\\u043e\\u0434\\u0437\\u0438 \\u0432\\u043c\\u0435\\u0441\\u0442\\u043e \\u0432\\u043d\\u0435\\u0448\\u043d\\u0438\\u0445 SVG \\u0438\\u043a\\u043e\\u043d\\u043e\\u043a\\n const text = document.createElementNS('http:\\\/\\\/www.w3.org\\\/2000\\\/svg', 'text');\\n text.setAttribute('x', '0');\\n text.setAttribute('y', this.state.isMobile ? '6' : '7');\\n text.setAttribute('text-anchor', 'middle');\\n text.setAttribute('dominant-baseline', 'middle');\\n text.setAttribute('font-size', this.state.isMobile ? '16' : '18');\\n text.setAttribute('pointer-events', 'none');\\n text.setAttribute('user-select', 'none');\\n \\n \\\/\\\/ \\u0412\\u044b\\u0431\\u0438\\u0440\\u0430\\u0435\\u043c \\u044d\\u043c\\u043e\\u0434\\u0437\\u0438 \\u0432 \\u0437\\u0430\\u0432\\u0438\\u0441\\u0438\\u043c\\u043e\\u0441\\u0442\\u0438 \\u043e\\u0442 \\u0442\\u0438\\u043f\\u0430 \\u0438 \\u043f\\u0440\\u0438\\u043e\\u0440\\u0438\\u0442\\u0435\\u0442\\u0430\\n if (item.priority === 'urgent' && item.type === 'news') {\\n text.textContent = '\\ud83d\\udea8';\\n } else if (item.type === 'event') {\\n text.textContent = '\\ud83d\\udcc5';\\n } else {\\n text.textContent = '\\ud83d\\udcf0';\\n }\\n \\n g.appendChild(hitArea);\\n g.appendChild(circle);\\n g.appendChild(text);\\n \\n return g;\\n }\\n\\n setupMarkerEvents(marker, item) {\\n if (this.state.isTouchDevice || this.state.isMobile) {\\n this.eventManager.add(marker, 'touchstart', (e) => {\\n e.preventDefault();\\n e.stopPropagation();\\n this.handleMarkerTap(marker, item);\\n }, { passive: false });\\n \\n this.eventManager.add(marker, 'click', (e) => {\\n e.preventDefault();\\n e.stopPropagation();\\n const timeSinceTouch = Date.now() - this.state.touchStartTime;\\n if (timeSinceTouch > CONFIG.TOUCH_TAP_THRESHOLD) {\\n this.handleMarkerTap(marker, item);\\n }\\n });\\n } else {\\n this.eventManager.add(marker, 'mouseenter', (e) => {\\n e.stopPropagation();\\n this.state.activeMarker = marker;\\n this.popupManager.show(item, e);\\n });\\n \\n this.eventManager.add(marker, 'mouseleave', (e) => {\\n e.stopPropagation();\\n setTimeout(() => {\\n if (!this.state.isPopupHovered && this.state.activeMarker === marker) {\\n this.popupManager.hide();\\n }\\n }, CONFIG.POPUP_HOVER_DELAY);\\n });\\n \\n this.eventManager.add(marker, 'click', (e) => {\\n e.stopPropagation();\\n window.location.href = item.link;\\n });\\n }\\n }\\n\\n handleMarkerTap(marker, item) {\\n if (this.state.activeMarker === marker && this.state.isPopupOpen) {\\n this.popupManager.hide();\\n return;\\n }\\n \\n this.state.activeMarker = marker;\\n this.state.touchStartTime = Date.now();\\n \\n setTimeout(() => {\\n this.popupManager.show(item, { currentTarget: marker });\\n }, 10);\\n }\\n}\\n\\n\\\/\\\/ ==================== POPUP MANAGER ====================\\nclass PopupManager {\\n constructor(state, eventManager) {\\n this.state = state;\\n this.eventManager = eventManager;\\n this.popup = Utils.$('eventPopup');\\n this.overlay = Utils.$('popupOverlay');\\n this.setupOverlayEvents();\\n }\\n\\n setupOverlayEvents() {\\n if (this.state.isTouchDevice) {\\n this.eventManager.add(this.overlay, 'touchstart', (e) => {\\n e.preventDefault();\\n this.hide();\\n });\\n }\\n \\n this.eventManager.add(this.overlay, 'click', () => this.hide());\\n }\\n\\n show(item, event) {\\n this.state.isPopupOpen = true;\\n this.renderPopup(item);\\n this.positionPopup(event);\\n this.setupPopupEvents();\\n }\\n\\n renderPopup(item) {\\n const imageHtml = item.image ? `\\n <\/p>\n<div class=\"\\\"popup-image-wrapper\\\"\">\\n <img class=\"\\\"popup-image\\\"\" \\n src=\"\\\"${item.image}\\\"\" alt =\"\\\"${item.title.replace(\\\/\\\"\\\/g,\" '"')}\\\" data-image-url =\"\\\"${item.image}\\\"\">\\n <\\\/div>\\n ` : `\\n <\/p>\n<div class=\"\\\"popup-image-wrapper\" no-image\\\">\\n <\/p>\n<div class=\"\\\"popup-image-placeholder\\\"\">${item.type === 'event' ? '\\ud83d\\udcc5' : '\\ud83d\\udcf0'}<\\\/div>\\n <\\\/div>\\n `;\\n \\n const closeButton = (this.state.isMobile || this.state.isTouchDevice) ? \\n '<button class=\"\\\"popup-close\\\"\" id=\"\\\"popupCloseBtn\\\"\">\\u00d7<\\\/button>' : '';\\n \\n this.popup.innerHTML = `\\n ${closeButton}\\n <\/p>\n<div class=\"\\\"popup-header\\\"\">\\n ${imageHtml}\\n <\/p>\n<div class=\"\\\"popup-content\\\"\">\\n <\/p>\n<h4 class=\"\\\"popup-title\\\"\">${item.title}<\\\/h4>\\n <\/p>\n<div class=\"\\\"popup-meta\\\"\">\\n ${item.date ? `<\/p>\n<div class=\"\\\"popup-meta-item\\\"\">\\ud83d\\udcc5 ${Utils.formatDate(item.date)}<\\\/div>` : ''}\\n ${item.location ? `<\/p>\n<div class=\"\\\"popup-meta-item\\\"\">\\ud83d\\udccd ${item.location}<\\\/div>` : ''}\\n ${item.type ? `<\/p>\n<div class=\"\\\"popup-meta-item\\\"\">${item.type === 'event' ? '\\ud83c\\udfaf Event' : '\\ud83d\\udcf0 News'}<\\\/div>` : ''}\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\/p>\n<p class=\"\\\"popup-excerpt\\\"\">${item.excerpt}<\\\/p>\\n <a href=\"\\\"${item.link}\\\"\" class=\"\\\"popup-link\\\"\" onclick=\"\\\"window.location.href='${item.link}';\" return false;\\\">View Details \\u2192<\\\/a>\\n `;\\n \\n this.popup.classList.add('active');\\n \\n if (item.image) {\\n this.setupImageErrorHandling(this.popup.querySelector('.popup-image'));\\n }\\n \\n if (closeButton) {\\n const closeBtn = Utils.$('popupCloseBtn');\\n if (closeBtn) {\\n this.eventManager.add(closeBtn, 'click', () => this.hide());\\n }\\n }\\n }\\n\\n setupImageErrorHandling(img) {\\n if (!img || this.state.imageLoadErrors.get(img)) return;\\n \\n const errorHandler = () => {\\n if (!this.state.imageLoadErrors.get(img)) {\\n this.state.imageLoadErrors.set(img, true);\\n const originalUrl = img.dataset.imageUrl || img.src;\\n img.src = Utils.createImageProxy(originalUrl);\\n }\\n };\\n \\n this.eventManager.add(img, 'error', errorHandler);\\n }\\n\\n positionPopup(event) {\\n if (this.state.isMobile || this.state.isTouchDevice) {\\n this.overlay.classList.add('active');\\n return;\\n }\\n \\n const rect = event.currentTarget.getBoundingClientRect();\\n const popupWidth = 380;\\n const popupHeight = this.popup.offsetHeight || 300;\\n \\n let posX = rect.right + 15;\\n let posY = rect.top + rect.height \\\/ 2 - popupHeight \\\/ 2;\\n \\n if (posX + popupWidth > window.innerWidth - 20) {\\n posX = rect.left - popupWidth - 15;\\n }\\n \\n posY = Utils.clamp(posY, 20, window.innerHeight - popupHeight - 20);\\n \\n this.popup.style.left = posX + 'px';\\n this.popup.style.top = posY + 'px';\\n }\\n\\n setupPopupEvents() {\\n if (!this.state.isMobile && !this.state.isTouchDevice) {\\n this.eventManager.add(this.popup, 'mouseenter', () => {\\n this.state.isPopupHovered = true;\\n });\\n \\n this.eventManager.add(this.popup, 'mouseleave', () => {\\n this.state.isPopupHovered = false;\\n setTimeout(() => {\\n if (!this.state.isPopupHovered) {\\n this.hide();\\n }\\n }, 100);\\n });\\n }\\n }\\n\\n hide() {\\n this.popup.classList.remove('active');\\n this.overlay.classList.remove('active');\\n this.state.isPopupOpen = false;\\n this.state.isPopupHovered = false;\\n this.state.activeMarker = null;\\n }\\n}\\n\\n\\\/\\\/ ==================== UI MANAGER ====================\\nclass UIManager {\\n constructor(state, eventManager) {\\n this.state = state;\\n this.eventManager = eventManager;\\n }\\n\\n renderFilters() {\\n const container = Utils.$('filterControls');\\n const filters = [\\n { value: 'all', label: 'All', classes: '' },\\n { value: 'events', label: 'Events', classes: '' },\\n { value: 'news', label: 'News', classes: 'news' }\\n ];\\n \\n container.innerHTML = filters.map(filter => `\\n <button class=\"\\\"filter-btn\" ${filter.classes} ${filter.value =\"==\" 'all' ? 'active' : ''}\\\" \\n data-filter=\"\\\"${filter.value}\\\"\">\\n ${filter.label}\\n <\\\/button>\\n `).join('');\\n \\n Utils.$$('.filter-btn').forEach(btn => {\\n this.eventManager.add(btn, 'click', (e) => {\\n this.handleFilterClick(e.target);\\n });\\n });\\n }\\n\\n handleFilterClick(button) {\\n const filter = button.getAttribute('data-filter');\\n \\n Utils.$$('.filter-btn').forEach(btn => {\\n btn.classList.remove('active');\\n });\\n button.classList.add('active');\\n \\n app.applyFilter(filter);\\n }\\n\\n renderLegend() {\\n const container = Utils.$('legend');\\n \\n container.innerHTML = Object.entries(BRICS_COUNTRIES).map(([code, data]) => `\\n <\/p>\n<div class=\"\\\"brics-country-tag\\\"\" data-country=\"\\\"${code}\\\"\">\\n <img class=\"\\\"country-flag\\\"\" \\n src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Flags\\\/${code.toLowerCase()}.svg\\\"\" alt =\"\\\"${data.name}\\\"\" loading=\"\\\"lazy\\\"\">\\n <span class=\"\\\"country-name\\\"\">${data.name}<\\\/span>\\n <span class=\"\\\"event-count\\\"\" style=\"\\\"display:none\\\"\">0<\\\/span>\\n <\\\/div>\\n `).join('');\\n \\n Utils.$$('.brics-country-tag').forEach(tag => {\\n this.setupTagEvents(tag);\\n });\\n }\\n\\n setupTagEvents(tag) {\\n this.eventManager.add(tag, 'click', (e) => {\\n const code = e.currentTarget.getAttribute('data-country');\\n this.toggleCountryHighlight(code);\\n });\\n \\n if (!this.state.isTouchDevice) {\\n this.eventManager.add(tag, 'mouseenter', (e) => {\\n const code = e.currentTarget.getAttribute('data-country');\\n this.highlightCountryPaths(code, true);\\n });\\n \\n this.eventManager.add(tag, 'mouseleave', (e) => {\\n const code = e.currentTarget.getAttribute('data-country');\\n this.highlightCountryPaths(code, false);\\n });\\n }\\n }\\n\\n toggleCountryHighlight(code) {\\n const paths = this.getCountryPaths(code);\\n paths.forEach(path => path.classList.toggle('active-country'));\\n \\n const tag = document.querySelector(`[data-country=\\\"${code}\\\"]`);\\n if (tag) {\\n tag.classList.toggle('active');\\n }\\n }\\n\\n highlightCountryPaths(code, highlight) {\\n const paths = this.getCountryPaths(code);\\n paths.forEach(path => {\\n path.style.filter = highlight ? 'brightness(1.3)' : '';\\n });\\n }\\n\\n getCountryPaths(code) {\\n if (code === 'ID') {\\n return this.state.svg.querySelectorAll(\\n INDONESIA_ID_PATTERNS.map(p => `path[id=\\\"${p}\\\"], path[id^=\\\"${p}\\\"]`).join(',')\\n );\\n }\\n return this.state.svg.querySelectorAll(`path[data-brics=\\\"${code}\\\"]`);\\n }\\n\\n updateCounts(groupedContent) {\\n Utils.$$('.brics-country-tag').forEach(tag => {\\n const code = tag.getAttribute('data-country');\\n const count = groupedContent[code]?.length || 0;\\n const counter = tag.querySelector('.event-count');\\n \\n if (count > 0) {\\n counter.textContent = count;\\n counter.style.display = 'block';\\n } else {\\n counter.style.display = 'none';\\n }\\n });\\n }\\n}\\n\\n\\\/\\\/ ==================== MAIN APPLICATION ====================\\nclass BIFAMapApp {\\n constructor() {\\n this.state = new AppState();\\n this.eventManager = new EventManager();\\n this.zoomController = new ZoomController(this.state, this.eventManager);\\n this.mapManager = new MapManager(this.state, this.eventManager);\\n this.contentManager = new ContentManager(this.state, this.eventManager);\\n this.popupManager = new PopupManager(this.state, this.eventManager);\\n this.markerManager = new MarkerManager(this.state, this.eventManager, this.popupManager);\\n this.uiManager = new UIManager(this.state, this.eventManager);\\n }\\n\\n async init() {\\n this.uiManager.renderFilters();\\n this.uiManager.renderLegend();\\n \\n await this.mapManager.loadSVG();\\n \\n this.zoomController.init(\\n Utils.$('mapZoomContainer'),\\n Utils.$('mapContainer')\\n );\\n \\n await this.contentManager.loadContent();\\n this.updateMap();\\n \\n this.setupGlobalEvents();\\n }\\n\\n setupGlobalEvents() {\\n this.eventManager.add(document, 'click', (e) => {\\n if ((this.state.isMobile || this.state.isTouchDevice) && \\n this.state.isPopupOpen && \\n !e.target.closest('.event-popup') && \\n !e.target.closest('.svg-event-marker')) {\\n this.popupManager.hide();\\n }\\n });\\n \\n this.eventManager.add(document, 'keydown', (e) => {\\n if (e.key === 'Escape' && this.state.isPopupOpen) {\\n this.popupManager.hide();\\n }\\n });\\n \\n this.eventManager.add(window, 'scroll', Utils.debounce(() => {\\n if (!this.state.isMobile && !this.state.isTouchDevice && this.state.isPopupOpen) {\\n this.popupManager.hide();\\n }\\n }, 100));\\n \\n this.eventManager.add(window, 'resize', Utils.debounce(() => {\\n this.state.updateMobileState();\\n this.zoomController.updateBounds();\\n \\n if (this.state.isMobile) {\\n this.zoomController.reset();\\n }\\n }, CONFIG.DEBOUNCE_DELAY));\\n }\\n\\n applyFilter(filter) {\\n const filtered = this.contentManager.filterContent(filter);\\n const grouped = this.contentManager.groupByCountry(filtered);\\n \\n this.uiManager.updateCounts(grouped);\\n this.markerManager.renderMarkers(grouped);\\n }\\n\\n updateMap() {\\n const filtered = this.contentManager.filterContent(this.state.filter);\\n const grouped = this.contentManager.groupByCountry(filtered);\\n \\n this.uiManager.updateCounts(grouped);\\n this.markerManager.renderMarkers(grouped);\\n }\\n\\n cleanup() {\\n this.eventManager.cleanup();\\n if (this.state.resizeObserver) {\\n this.state.resizeObserver.disconnect();\\n }\\n }\\n}\\n\\n\\\/\\\/ ==================== INITIALIZATION ====================\\nlet app;\\n\\nfunction initApp() {\\n app = new BIFAMapApp();\\n app.init();\\n}\\n\\nif (document.readyState === 'loading') {\\n document.addEventListener('DOMContentLoaded', initApp);\\n} else {\\n initApp();\\n}\\n\\nwindow.addEventListener('beforeunload', () => {\\n if (app) {\\n app.cleanup();\\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 Quote Block - Official Branding<\\\/title>\\n\\n \\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@400;500;600;700;800&family=Poppins:wght@300;400;500;600;700&display=swap\\\"\" rel=\"\\\"stylesheet\\\"\">\\n\\n<\/p>\n<style>\\n\\\/* Reset and Base *\\\/\\n* {\\n margin: 0;\\n padding: 0;\\n box-sizing: border-box;\\n}\\n\\nhtml {\\n overflow-x: hidden;\\n overflow-y: auto;\\n}\\n\\nbody {\\n font-family: 'Montserrat', sans-serif;\\n background: #f5f5f5;\\n overflow-x: hidden;\\n position: relative;\\n}\\n\\n\\\/* Modern Minimalism Quote Section *\\\/\\n.quote-section-wrapper {\\n width: 100vw;\\n position: relative;\\n left: 50%;\\n right: 50%;\\n margin-left: -50vw;\\n margin-right: -50vw;\\n background: #FFFFFF; \\\/* Official Bright White *\\\/\\n overflow: hidden;\\n max-width: 100vw;\\n}\\n\\n.quote-section {\\n padding: 100px 0;\\n position: relative;\\n}\\n\\n.quote-container {\\n max-width: 1200px;\\n margin: 0 auto;\\n padding: 0 40px;\\n position: relative;\\n}\\n\\n\\\/* Layout *\\\/\\n.quote-layout {\\n display: grid;\\n grid-template-columns: 300px 1fr;\\n gap: 80px;\\n align-items: center;\\n}\\n\\n\\\/* Left Panel with Bird *\\\/\\n.bird-panel {\\n position: relative;\\n height: 400px;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n animation: fadeInLeft 1s ease-out;\\n}\\n\\n.bird-circle {\\n width: 250px;\\n height: 250px;\\n border-radius: 50%;\\n background: linear-gradient(135deg, rgba(212, 175, 55, 0.05) 0%, rgba(212, 175, 55, 0.08) 100%); \\\/* Heritage Gold gradient *\\\/\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n position: relative;\\n}\\n\\n.bird-icon {\\n width: 150px;\\n height: 150px;\\n background-image: url('\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Logo\\\/bird.svg');\\n background-size: contain;\\n background-repeat: no-repeat;\\n background-position: center;\\n opacity: 0.2;\\n animation: hover-bird 4s ease-in-out infinite;\\n}\\n\\n@keyframes hover-bird {\\n 0%, 100% {\\n transform: translateY(0);\\n }\\n 50% {\\n transform: translateY(-10px);\\n }\\n}\\n\\n\\\/* Right Panel with Quote *\\\/\\n.quote-content {\\n animation: fadeInRight 1s ease-out;\\n}\\n\\n.quote-text {\\n font-family: 'Poppins', sans-serif !important; \\\/* Poppins \\u0434\\u043b\\u044f \\u0446\\u0438\\u0442\\u0430\\u0442\\u044b *\\\/\\n font-size: 2.5rem;\\n font-weight: 300;\\n line-height: 1.5;\\n color: #0A1F44; \\\/* Official Deep Navy *\\\/\\n margin-bottom: 40px;\\n position: relative;\\n}\\n\\n.quote-text::before {\\n content: '\\\"';\\n position: absolute;\\n top: -30px;\\n left: -50px;\\n font-size: 100px;\\n color: #D4AF37; \\\/* Official Heritage Gold *\\\/\\n opacity: 0.3;\\n font-family: 'Poppins', sans-serif;\\n}\\n\\n\\\/* Author Block *\\\/\\n.author-block {\\n display: flex;\\n align-items: center;\\n gap: 20px;\\n}\\n\\n.author-logo {\\n width: 60px;\\n height: 60px;\\n background-image: url('\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/LogoF.svg');\\n background-size: contain;\\n background-repeat: no-repeat;\\n opacity: 0.8;\\n}\\n\\n.author-details {\\n border-left: 3px solid #D4AF37; \\\/* Official Heritage Gold *\\\/\\n padding-left: 20px;\\n}\\n\\n.author-name {\\n font-size: 1.3rem;\\n font-weight: 700;\\n color: #0A1F44; \\\/* Official Deep Navy *\\\/\\n margin-bottom: 5px;\\n font-family: 'Montserrat', sans-serif;\\n}\\n\\n.author-title {\\n font-size: 1rem;\\n color: #1D6143; \\\/* Official Civic Green *\\\/\\n font-weight: 500;\\n font-family: 'Montserrat', sans-serif;\\n}\\n\\n\\\/* Animations *\\\/\\n@keyframes fadeInLeft {\\n from {\\n opacity: 0;\\n transform: translateX(-50px);\\n }\\n to {\\n opacity: 1;\\n transform: translateX(0);\\n }\\n}\\n\\n@keyframes fadeInRight {\\n from {\\n opacity: 0;\\n transform: translateX(50px);\\n }\\n to {\\n opacity: 1;\\n transform: translateX(0);\\n }\\n}\\n\\n\\\/* Responsive Design *\\\/\\n@media (max-width: 968px) {\\n .quote-layout {\\n grid-template-columns: 1fr;\\n gap: 40px;\\n }\\n \\n .bird-panel {\\n height: 200px;\\n }\\n \\n .bird-circle {\\n width: 150px;\\n height: 150px;\\n }\\n \\n .bird-icon {\\n width: 100px;\\n height: 100px;\\n }\\n \\n .quote-text {\\n font-size: 1.8rem;\\n }\\n}\\n\\n@media (max-width: 640px) {\\n .quote-section {\\n padding: 80px 0;\\n }\\n \\n .quote-text {\\n font-size: 1.5rem;\\n }\\n \\n .quote-text::before {\\n font-size: 60px;\\n left: -30px;\\n top: -20px;\\n }\\n}\\n<\\\/style>\\n<\\\/head>\\n<body>\\n\\n<\/p>\n<div class=\"\\\"quote-section-wrapper\\\"\">\\n <\/p>\n<section class=\"\\\"quote-section\\\"\">\\n <\/p>\n<div class=\"\\\"quote-container\\\"\">\\n <\/p>\n<div class=\"\\\"quote-layout\\\"\">\\n \\n <\/p>\n<div class=\"\\\"bird-panel\\\"\">\\n <\/p>\n<div class=\"\\\"bird-circle\\\"\">\\n <\/p>\n<div class=\"\\\"bird-icon\\\"\"><\\\/div>\\n <\\\/div>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"quote-content\\\"\">\\n <\/p>\n<blockquote class=\"\\\"quote-text\\\"\"><p>\\n We're not just playing a game. We're building the future.\\n <\\\/blockquote>\\n \\n <\/p>\n<div class=\"\\\"author-block\\\"\">\\n <\/p>\n<div class=\"\\\"author-logo\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"author-details\\\"\">\\n <\/p>\n<div class=\"\\\"author-name\\\"\"> Dr. Salim Almazaini<\\\/div>\\n <\/p>\n<div class=\"\\\"author-title\\\"\">Founder & President, BIFA & BIFA+<\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/section>\\n<\\\/div>\\n\\n<script>\\n\\\/\\\/ Animation on scroll\\ndocument.addEventListener('DOMContentLoaded', function() {\\n const observerOptions = {\\n threshold: 0.3,\\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.animationPlayState = 'running';\\n observer.unobserve(entry.target);\\n }\\n });\\n }, observerOptions);\\n\\n \\\/\\\/ Observe animated elements\\n document.querySelectorAll('.bird-panel, .quote-content').forEach(el => {\\n if (el) {\\n if (el.style.animation || window.getComputedStyle(el).animation !== 'none') {\\n el.style.animationPlayState = 'paused';\\n observer.observe(el);\\n }\\n }\\n });\\n\\n \\\/\\\/ Preload images\\n function preloadImages() {\\n const imageUrls = [\\n '\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Logo\\\/bird.svg',\\n '\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/flag-logo1.svg'\\n ];\\n \\n imageUrls.forEach(url => {\\n const img = new Image();\\n img.src = url;\\n });\\n }\\n \\n preloadImages();\\n});\\n<\\\/script>\\n\\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+ BRICS Alliance<\\\/title>\\n\\n \\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&display=swap\\\"\" rel=\"\\\"stylesheet\\\"\">\\n\\n<\/p>\n<style>\\n\\\/* ========= OFFICIAL BIFA+ BRAND VARIABLES - HIGH PRIORITY ========= *\\\/\\n:root {\\n \\\/* Official BIFA+ Colors from Brand Guide *\\\/\\n --bifa-deep-navy: #0A1F44 !important;\\n --bifa-heritage-gold: #D4AF37 !important;\\n --bifa-civic-green: #1D6143 !important;\\n --bifa-bright-white: #FFFFFF !important;\\n --bifa-soft-black: #1A1A1A !important;\\n --bifa-gray-light: #F8F9FA !important;\\n --bifa-gray: #6C757D !important;\\n \\n \\\/* Official BIFA+ Typography from Brand Guide *\\\/\\n --bifa-font-heading: 'Montserrat', sans-serif !important;\\n --bifa-font-body: 'Poppins', sans-serif !important;\\n \\n \\\/* Premium Effects *\\\/\\n --bifa-shadow-premium: 0 25px 80px rgba(10, 31, 68, 0.15) !important;\\n --bifa-shadow-hover: 0 35px 100px rgba(10, 31, 68, 0.2) !important;\\n --bifa-shadow-gold: 0 15px 40px rgba(212, 175, 55, 0.3) !important;\\n --bifa-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;\\n}\\n\\n\\\/* ========= YOOTHEME OVERRIDE - CRITICAL STYLES ========= *\\\/\\n.brics-section-wrapper,\\n.brics-section-wrapper *,\\n.brics-section,\\n.brics-section * {\\n margin: 0 !important;\\n padding: 0 !important;\\n box-sizing: border-box !important;\\n}\\n\\n\\\/* Force official BIFA+ fonts on all elements - OVERRIDE YOOTHEME *\\\/\\n.brics-section-wrapper,\\n.brics-section-wrapper *:not(.flag-image):not(.flag-image *) {\\n font-family: var(--bifa-font-body) !important;\\n}\\n\\n.brics-section-wrapper h1,\\n.brics-section-wrapper h2,\\n.brics-section-wrapper h3,\\n.brics-section-wrapper h4,\\n.brics-section-wrapper h5,\\n.brics-section-wrapper h6,\\n.brics-section-wrapper .section-title,\\n.brics-section-wrapper .flags-title,\\n.brics-section-wrapper .content-intro,\\n.brics-section-wrapper .stat-number,\\n.brics-section-wrapper .stat-label,\\n.brics-section-wrapper .flag-name,\\n.brics-section-wrapper .cta-text,\\n.brics-section-wrapper .btn-text {\\n font-family: var(--bifa-font-heading) !important;\\n}\\n\\n\\\/* ========= SECTION WRAPPER - FULL WIDTH ========= *\\\/\\n.brics-section-wrapper {\\n width: 100vw !important;\\n position: relative !important;\\n left: 50% !important;\\n margin-left: -50vw !important;\\n background: transparent !important;\\n overflow: hidden !important;\\n z-index: 1 !important;\\n}\\n\\n\\\/* ========= BRICS SECTION ========= *\\\/\\n.brics-section {\\n padding: 80px 0 !important;\\n background: transparent !important;\\n position: relative !important;\\n overflow: hidden !important;\\n width: 100% !important;\\n margin: 0 !important;\\n}\\n\\n\\\/* ========= CONTAINER ========= *\\\/\\n.brics-container {\\n max-width: 1400px !important;\\n margin: 0 auto !important;\\n padding: 0 20px !important;\\n position: relative !important;\\n z-index: 10 !important;\\n width: 100% !important;\\n}\\n\\n\\\/* ========= SECTION TITLE - OFFICIAL BIFA+ STYLE ========= *\\\/\\n.brics-section .section-title {\\n font-family: var(--bifa-font-heading) !important;\\n font-size: clamp(2.5rem, 5vw, 4rem) !important;\\n font-weight: 900 !important;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700) !important;\\n -webkit-background-clip: text !important;\\n background-clip: text !important;\\n color: transparent !important;\\n text-align: center !important;\\n margin: 0 0 60px 0 !important;\\n position: relative !important;\\n animation: fadeInDown 1s ease-out !important;\\n text-transform: uppercase !important;\\n letter-spacing: 2px !important;\\n cursor: pointer !important;\\n transition: var(--bifa-transition) !important;\\n line-height: 1.2 !important;\\n padding: 0 !important;\\n}\\n\\n.brics-section .section-title::after {\\n content: '' !important;\\n position: absolute !important;\\n bottom: -15px !important;\\n left: 50% !important;\\n transform: translateX(-50%) !important;\\n width: 0 !important;\\n height: 5px !important;\\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700) !important;\\n border-radius: 3px !important;\\n transition: width 0.4s ease !important;\\n}\\n\\n.brics-section .section-title:hover {\\n transform: translateY(-3px) !important;\\n filter: drop-shadow(0 10px 20px rgba(212, 175, 55, 0.3)) !important;\\n}\\n\\n.brics-section .section-title:hover::after {\\n width: 100px !important;\\n}\\n\\n\\\/* ========= MAIN IMAGE - OFFICIAL BIFA+ STYLE ========= *\\\/\\n.brics-section .brics-image {\\n width: 100% !important;\\n max-width: 1200px !important;\\n margin: 0 auto 60px auto !important;\\n border-radius: 25px !important;\\n overflow: hidden !important;\\n box-shadow: var(--bifa-shadow-premium) !important;\\n animation: fadeInUp 1s ease-out !important;\\n position: relative !important;\\n transition: var(--bifa-transition) !important;\\n padding: 0 !important;\\n}\\n\\n.brics-section .brics-image::before {\\n content: '' !important;\\n position: absolute !important;\\n inset: 0 !important;\\n background: linear-gradient(135deg, \\n rgba(10, 31, 68, 0.1) 0%, \\n transparent 50%, \\n rgba(212, 175, 55, 0.1) 100%) !important;\\n opacity: 0 !important;\\n transition: opacity 0.3s ease !important;\\n z-index: 1 !important;\\n}\\n\\n.brics-section .brics-image:hover::before {\\n opacity: 1 !important;\\n}\\n\\n.brics-section .brics-image:hover {\\n transform: translateY(-5px) !important;\\n box-shadow: var(--bifa-shadow-hover) !important;\\n}\\n\\n.brics-section .brics-image img {\\n width: 100% !important;\\n height: auto !important;\\n display: block !important;\\n transition: transform 0.3s ease !important;\\n margin: 0 !important;\\n padding: 0 !important;\\n}\\n\\n.brics-section .brics-image:hover img {\\n transform: scale(1.02) !important;\\n}\\n\\n\\\/* ========= CONTENT SECTION - OFFICIAL BIFA+ STYLE ========= *\\\/\\n.brics-section .brics-content {\\n background: rgba(255, 255, 255, 0.95) !important;\\n backdrop-filter: blur(20px) !important;\\n border-radius: 30px !important;\\n padding: 60px !important;\\n margin: 0 auto 60px auto !important;\\n max-width: 1200px !important;\\n animation: fadeInUp 1s ease-out 0.2s both !important;\\n box-shadow: var(--bifa-shadow-premium) !important;\\n border: 2px solid rgba(212, 175, 55, 0.1) !important;\\n position: relative !important;\\n overflow: hidden !important;\\n width: 100% !important;\\n}\\n\\n.brics-section .brics-content::before {\\n content: '' !important;\\n position: absolute !important;\\n top: 0 !important;\\n left: 0 !important;\\n right: 0 !important;\\n height: 3px !important;\\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent) !important;\\n animation: contentGlow 4s ease-in-out infinite !important;\\n}\\n\\n@keyframes contentGlow {\\n 0%, 100% { opacity: 0.5 !important; }\\n 50% { opacity: 1 !important; }\\n}\\n\\n.brics-section .content-intro {\\n font-family: var(--bifa-font-heading) !important;\\n font-size: clamp(1.3rem, 2.5vw, 1.8rem) !important;\\n line-height: 1.7 !important;\\n background: linear-gradient(135deg, var(--bifa-deep-navy), #162e5a) !important;\\n -webkit-background-clip: text !important;\\n background-clip: text !important;\\n color: transparent !important;\\n font-weight: 700 !important;\\n text-align: center !important;\\n margin: 0 0 40px 0 !important;\\n position: relative !important;\\n padding: 0 !important;\\n}\\n\\n.brics-section .content-intro::after {\\n content: '' !important;\\n position: absolute !important;\\n bottom: -10px !important;\\n left: 50% !important;\\n transform: translateX(-50%) !important;\\n width: 60px !important;\\n height: 2px !important;\\n background: var(--bifa-heritage-gold) !important;\\n border-radius: 2px !important;\\n}\\n\\n.brics-section .content-text {\\n font-family: var(--bifa-font-body) !important;\\n font-size: clamp(1.05rem, 1.5vw, 1.2rem) !important;\\n line-height: 1.8 !important;\\n color: var(--bifa-gray) !important;\\n margin: 0 0 30px 0 !important;\\n text-align: justify !important;\\n position: relative !important;\\n padding: 0 0 0 20px !important;\\n}\\n\\n.brics-section .content-text::before {\\n content: '' !important;\\n position: absolute !important;\\n left: 0 !important;\\n top: 0 !important;\\n width: 4px !important;\\n height: 100% !important;\\n background: linear-gradient(180deg, var(--bifa-heritage-gold), transparent) !important;\\n border-radius: 2px !important;\\n}\\n\\n\\\/* ========= STATS CAROUSEL - OFFICIAL BIFA+ STYLE ========= *\\\/\\n.brics-section .stats-carousel-section {\\n margin: 50px 0 !important;\\n padding: 0 !important;\\n width: 100% !important;\\n}\\n\\n.brics-section .stats-carousel-title {\\n font-family: var(--bifa-font-heading) !important;\\n font-size: clamp(1.5rem, 2.5vw, 2rem) !important;\\n font-weight: 800 !important;\\n color: var(--bifa-deep-navy) !important;\\n text-align: center !important;\\n margin: 0 0 40px 0 !important;\\n position: relative !important;\\n text-transform: uppercase !important;\\n letter-spacing: 1px !important;\\n padding: 0 !important;\\n}\\n\\n.brics-section .stats-carousel-title::after {\\n content: '' !important;\\n position: absolute !important;\\n bottom: -8px !important;\\n left: 50% !important;\\n transform: translateX(-50%) !important;\\n width: 60px !important;\\n height: 2px !important;\\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700) !important;\\n border-radius: 2px !important;\\n}\\n\\n.brics-section .stats-carousel-container {\\n position: relative !important;\\n max-width: 1200px !important;\\n margin: 0 auto !important;\\n overflow: hidden !important;\\n padding: 0 !important;\\n}\\n\\n.brics-section .stats-carousel-wrapper {\\n position: relative !important;\\n padding: 0 70px !important;\\n overflow: hidden !important;\\n margin: 0 !important;\\n}\\n\\n.brics-section .stats-carousel {\\n display: flex !important;\\n transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;\\n gap: 25px !important;\\n will-change: transform !important;\\n margin: 0 !important;\\n padding: 0 !important;\\n}\\n\\n.brics-section .stats-item {\\n flex: 0 0 auto !important;\\n text-align: center !important;\\n padding: 30px 20px !important;\\n background: linear-gradient(135deg, \\n rgba(255, 255, 255, 0.95) 0%, \\n rgba(248, 249, 250, 0.95) 100%) !important;\\n backdrop-filter: blur(10px) !important;\\n border-radius: 25px !important;\\n transition: var(--bifa-transition) !important;\\n cursor: pointer !important;\\n box-shadow: var(--bifa-shadow-premium) !important;\\n min-width: 200px !important;\\n max-width: 220px !important;\\n transform: translateY(0) scale(1) !important;\\n opacity: 1 !important;\\n border: 2px solid rgba(212, 175, 55, 0.1) !important;\\n position: relative !important;\\n overflow: hidden !important;\\n margin: 0 !important;\\n}\\n\\n.brics-section .stats-item::before {\\n content: '' !important;\\n position: absolute !important;\\n top: 0 !important;\\n left: 0 !important;\\n right: 0 !important;\\n height: 3px !important;\\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent) !important;\\n transform: scaleX(0) !important;\\n transition: transform 0.3s ease !important;\\n}\\n\\n.brics-section .stats-item:hover::before {\\n transform: scaleX(1) !important;\\n}\\n\\n.brics-section .stats-item:hover {\\n transform: translateY(-10px) scale(1.05) !important;\\n box-shadow: var(--bifa-shadow-gold) !important;\\n border-color: var(--bifa-heritage-gold) !important;\\n z-index: 10 !important;\\n}\\n\\n.brics-section .stats-item-clone {\\n opacity: 0.7 !important;\\n}\\n\\n.brics-section .stats-icon {\\n font-size: 2.5rem !important;\\n margin: 0 0 15px 0 !important;\\n line-height: 1 !important;\\n filter: grayscale(0.3) !important;\\n transition: all 0.3s ease !important;\\n padding: 0 !important;\\n}\\n\\n.brics-section .stats-item:hover .stats-icon {\\n filter: grayscale(0) !important;\\n transform: scale(1.1) !important;\\n}\\n\\n.brics-section .stats-number {\\n font-family: var(--bifa-font-heading) !important;\\n font-size: clamp(2rem, 3vw, 2.8rem) !important;\\n font-weight: 900 !important;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700) !important;\\n -webkit-background-clip: text !important;\\n background-clip: text !important;\\n color: transparent !important;\\n margin: 0 0 10px 0 !important;\\n line-height: 1 !important;\\n padding: 0 !important;\\n}\\n\\n.brics-section .stats-label {\\n font-family: var(--bifa-font-heading) !important;\\n font-size: 0.95rem !important;\\n color: var(--bifa-deep-navy) !important;\\n font-weight: 700 !important;\\n text-transform: uppercase !important;\\n letter-spacing: 1px !important;\\n margin: 0 0 8px 0 !important;\\n padding: 0 !important;\\n line-height: 1.3 !important;\\n}\\n\\n.brics-section .stats-description {\\n font-family: var(--bifa-font-body) !important;\\n font-size: 0.85rem !important;\\n color: var(--bifa-gray) !important;\\n font-weight: 500 !important;\\n margin: 0 !important;\\n padding: 0 !important;\\n line-height: 1.4 !important;\\n font-style: italic !important;\\n}\\n\\n\\\/* ========= STATS CAROUSEL NAVIGATION - OFFICIAL BIFA+ STYLE ========= *\\\/\\n.brics-section .stats-carousel-button {\\n position: absolute !important;\\n top: 50% !important;\\n transform: translateY(-50%) !important;\\n background: rgba(255, 255, 255, 0.95) !important;\\n backdrop-filter: blur(10px) !important;\\n border: 2px solid rgba(212, 175, 55, 0.2) !important;\\n width: 50px !important;\\n height: 50px !important;\\n border-radius: 50% !important;\\n box-shadow: var(--bifa-shadow-premium) !important;\\n cursor: pointer !important;\\n display: flex !important;\\n align-items: center !important;\\n justify-content: center !important;\\n transition: var(--bifa-transition) !important;\\n z-index: 10 !important;\\n opacity: 0.9 !important;\\n margin: 0 !important;\\n padding: 0 !important;\\n}\\n\\n.brics-section .stats-carousel-button::before {\\n content: '' !important;\\n position: absolute !important;\\n inset: -2px !important;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700) !important;\\n border-radius: 50% !important;\\n opacity: 0 !important;\\n transition: opacity 0.3s ease !important;\\n z-index: -1 !important;\\n}\\n\\n.brics-section .stats-carousel-button:hover::before {\\n opacity: 1 !important;\\n}\\n\\n.brics-section .stats-carousel-button:hover {\\n color: var(--bifa-deep-navy) !important;\\n box-shadow: var(--bifa-shadow-gold) !important;\\n transform: translateY(-50%) scale(1.1) !important;\\n opacity: 1 !important;\\n border-color: transparent !important;\\n}\\n\\n.brics-section .stats-carousel-button-prev {\\n left: 0 !important;\\n}\\n\\n.brics-section .stats-carousel-button-next {\\n right: 0 !important;\\n}\\n\\n.brics-section .stats-carousel-button svg {\\n width: 20px !important;\\n height: 20px !important;\\n fill: var(--bifa-deep-navy) !important;\\n transition: transform 0.3s ease !important;\\n stroke-width: 3 !important;\\n}\\n\\n.brics-section .stats-carousel-button:hover svg {\\n transform: scale(1.2) !important;\\n}\\n\\n.brics-section .stats-carousel-button-prev:hover svg {\\n transform: translateX(-2px) scale(1.2) !important;\\n}\\n\\n.brics-section .stats-carousel-button-next:hover svg {\\n transform: translateX(2px) scale(1.2) !important;\\n}\\n\\n\\\/* ========= STATS CAROUSEL INDICATORS - OFFICIAL BIFA+ STYLE ========= *\\\/\\n.brics-section .stats-carousel-indicators {\\n display: flex !important;\\n justify-content: center !important;\\n gap: 10px !important;\\n margin: 35px 0 0 0 !important;\\n padding: 0 !important;\\n}\\n\\n.brics-section .stats-carousel-indicators .indicator {\\n width: 10px !important;\\n height: 10px !important;\\n border-radius: 50% !important;\\n background: rgba(212, 175, 55, 0.3) !important;\\n cursor: pointer !important;\\n transition: var(--bifa-transition) !important;\\n opacity: 0.6 !important;\\n border: 2px solid transparent !important;\\n margin: 0 !important;\\n padding: 0 !important;\\n}\\n\\n.brics-section .stats-carousel-indicators .indicator:hover {\\n opacity: 1 !important;\\n transform: scale(1.2) !important;\\n background: rgba(212, 175, 55, 0.6) !important;\\n}\\n\\n.brics-section .stats-carousel-indicators .indicator.active {\\n background: var(--bifa-heritage-gold) !important;\\n width: 35px !important;\\n border-radius: 5px !important;\\n opacity: 1 !important;\\n box-shadow: 0 3px 12px rgba(212, 175, 55, 0.4) !important;\\n}\\n\\n\\\/* ========= FLAGS SECTION - OFFICIAL BIFA+ STYLE ========= *\\\/\\n.brics-section .flags-section {\\n margin: 80px 0 0 0 !important;\\n position: relative !important;\\n padding: 0 0 40px 0 !important;\\n width: 100% !important;\\n}\\n\\n.brics-section .flags-title {\\n font-family: var(--bifa-font-heading) !important;\\n font-size: clamp(1.8rem, 3vw, 2.5rem) !important;\\n font-weight: 800 !important;\\n color: var(--bifa-deep-navy) !important;\\n text-align: center !important;\\n margin: 0 0 60px 0 !important;\\n animation: fadeInDown 1s ease-out !important;\\n position: relative !important;\\n text-transform: uppercase !important;\\n letter-spacing: 1px !important;\\n padding: 0 !important;\\n}\\n\\n.brics-section .flags-title::after {\\n content: '' !important;\\n position: absolute !important;\\n bottom: -10px !important;\\n left: 50% !important;\\n transform: translateX(-50%) !important;\\n width: 80px !important;\\n height: 3px !important;\\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700) !important;\\n border-radius: 2px !important;\\n}\\n\\n\\\/* ========= FLAGS CAROUSEL - OFFICIAL BIFA+ STYLE ========= *\\\/\\n.brics-section .flags-carousel-container {\\n animation: carouselFadeIn 1s ease-out 0.3s both !important;\\n position: relative !important;\\n max-width: 1200px !important;\\n margin: 0 auto !important;\\n overflow: hidden !important;\\n padding: 0 !important;\\n}\\n\\n@keyframes carouselFadeIn {\\n from {\\n opacity: 0 !important;\\n transform: translateY(30px) !important;\\n }\\n to {\\n opacity: 1 !important;\\n transform: translateY(0) !important;\\n }\\n}\\n\\n.brics-section .flags-carousel-wrapper {\\n position: relative !important;\\n padding: 0 70px !important;\\n overflow: hidden !important;\\n margin: 0 !important;\\n}\\n\\n.brics-section .flags-carousel {\\n display: flex !important;\\n transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;\\n gap: 30px !important;\\n will-change: transform !important;\\n margin: 0 !important;\\n padding: 0 !important;\\n}\\n\\n.brics-section .flag-item {\\n flex: 0 0 auto !important;\\n text-align: center !important;\\n padding: 30px !important;\\n background: rgba(255, 255, 255, 0.95) !important;\\n backdrop-filter: blur(10px) !important;\\n border-radius: 25px !important;\\n transition: var(--bifa-transition) !important;\\n cursor: pointer !important;\\n box-shadow: var(--bifa-shadow-premium) !important;\\n min-width: 180px !important;\\n transform: translateY(0) scale(1) !important;\\n opacity: 1 !important;\\n border: 2px solid rgba(212, 175, 55, 0.1) !important;\\n position: relative !important;\\n overflow: hidden !important;\\n margin: 0 !important;\\n}\\n\\n.brics-section .flag-item::before {\\n content: '' !important;\\n position: absolute !important;\\n top: 0 !important;\\n left: 0 !important;\\n right: 0 !important;\\n height: 2px !important;\\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent) !important;\\n transform: scaleX(0) !important;\\n transition: transform 0.3s ease !important;\\n}\\n\\n.brics-section .flag-item:hover::before {\\n transform: scaleX(1) !important;\\n}\\n\\n.brics-section .flag-item:hover {\\n transform: translateY(-15px) scale(1.05) !important;\\n box-shadow: var(--bifa-shadow-gold) !important;\\n border-color: var(--bifa-heritage-gold) !important;\\n z-index: 10 !important;\\n}\\n\\n.brics-section .flag-item-clone {\\n opacity: 0.7 !important;\\n}\\n\\n.brics-section .flag-image {\\n width: 100px !important;\\n height: 75px !important;\\n margin: 0 auto 20px auto !important;\\n border-radius: 15px !important;\\n overflow: hidden !important;\\n box-shadow: 0 8px 20px rgba(10, 31, 68, 0.15) !important;\\n transition: var(--bifa-transition) !important;\\n position: relative !important;\\n padding: 0 !important;\\n}\\n\\n.brics-section .flag-item:hover .flag-image {\\n box-shadow: var(--bifa-shadow-gold) !important;\\n transform: scale(1.05) translateY(-2px) !important;\\n}\\n\\n.brics-section .flag-image::after {\\n content: '' !important;\\n position: absolute !important;\\n inset: 0 !important;\\n background: linear-gradient(135deg, \\n rgba(212, 175, 55, 0.1) 0%, \\n transparent 50%, \\n rgba(10, 31, 68, 0.1) 100%) !important;\\n opacity: 0 !important;\\n transition: opacity 0.3s ease !important;\\n}\\n\\n.brics-section .flag-item:hover .flag-image::after {\\n opacity: 1 !important;\\n}\\n\\n.brics-section .flag-image img {\\n width: 100% !important;\\n height: 100% !important;\\n object-fit: cover !important;\\n transition: transform 0.3s ease !important;\\n margin: 0 !important;\\n padding: 0 !important;\\n}\\n\\n.brics-section .flag-item:hover .flag-image img {\\n transform: scale(1.1) !important;\\n}\\n\\n.brics-section .flag-name {\\n font-family: var(--bifa-font-heading) !important;\\n font-size: 1.1rem !important;\\n font-weight: 700 !important;\\n color: var(--bifa-deep-navy) !important;\\n text-transform: uppercase !important;\\n letter-spacing: 1px !important;\\n margin: 10px 0 0 0 !important;\\n transition: color 0.3s ease !important;\\n padding: 0 !important;\\n}\\n\\n.brics-section .flag-item:hover .flag-name {\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700) !important;\\n -webkit-background-clip: text !important;\\n background-clip: text !important;\\n color: transparent !important;\\n}\\n\\n\\\/* ========= CAROUSEL NAVIGATION - OFFICIAL BIFA+ STYLE ========= *\\\/\\n.brics-section .carousel-button {\\n position: absolute !important;\\n top: 50% !important;\\n transform: translateY(-50%) !important;\\n background: rgba(255, 255, 255, 0.95) !important;\\n backdrop-filter: blur(10px) !important;\\n border: 2px solid rgba(212, 175, 55, 0.2) !important;\\n width: 55px !important;\\n height: 55px !important;\\n border-radius: 50% !important;\\n box-shadow: var(--bifa-shadow-premium) !important;\\n cursor: pointer !important;\\n display: flex !important;\\n align-items: center !important;\\n justify-content: center !important;\\n transition: var(--bifa-transition) !important;\\n z-index: 10 !important;\\n opacity: 0.9 !important;\\n margin: 0 !important;\\n padding: 0 !important;\\n}\\n\\n.brics-section .carousel-button::before {\\n content: '' !important;\\n position: absolute !important;\\n inset: -2px !important;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700) !important;\\n border-radius: 50% !important;\\n opacity: 0 !important;\\n transition: opacity 0.3s ease !important;\\n z-index: -1 !important;\\n}\\n\\n.brics-section .carousel-button:hover::before {\\n opacity: 1 !important;\\n}\\n\\n.brics-section .carousel-button:hover {\\n color: var(--bifa-deep-navy) !important;\\n box-shadow: var(--bifa-shadow-gold) !important;\\n transform: translateY(-50%) scale(1.1) !important;\\n opacity: 1 !important;\\n border-color: transparent !important;\\n}\\n\\n.brics-section .carousel-button-prev {\\n left: 0 !important;\\n}\\n\\n.brics-section .carousel-button-next {\\n right: 0 !important;\\n}\\n\\n.brics-section .carousel-button svg {\\n width: 24px !important;\\n height: 24px !important;\\n fill: var(--bifa-deep-navy) !important;\\n transition: transform 0.3s ease !important;\\n stroke-width: 3 !important;\\n}\\n\\n.brics-section .carousel-button:hover svg {\\n transform: scale(1.2) !important;\\n}\\n\\n.brics-section .carousel-button-prev:hover svg {\\n transform: translateX(-2px) scale(1.2) !important;\\n}\\n\\n.brics-section .carousel-button-next:hover svg {\\n transform: translateX(2px) scale(1.2) !important;\\n}\\n\\n\\\/* ========= CAROUSEL INDICATORS - OFFICIAL BIFA+ STYLE ========= *\\\/\\n.brics-section .carousel-indicators {\\n display: flex !important;\\n justify-content: center !important;\\n gap: 12px !important;\\n margin: 40px 0 0 0 !important;\\n padding: 0 !important;\\n}\\n\\n.brics-section .indicator {\\n width: 12px !important;\\n height: 12px !important;\\n border-radius: 50% !important;\\n background: rgba(212, 175, 55, 0.3) !important;\\n cursor: pointer !important;\\n transition: var(--bifa-transition) !important;\\n opacity: 0.6 !important;\\n border: 2px solid transparent !important;\\n margin: 0 !important;\\n padding: 0 !important;\\n}\\n\\n.brics-section .indicator:hover {\\n opacity: 1 !important;\\n transform: scale(1.2) !important;\\n background: rgba(212, 175, 55, 0.6) !important;\\n}\\n\\n.brics-section .indicator.active {\\n background: var(--bifa-heritage-gold) !important;\\n width: 40px !important;\\n border-radius: 6px !important;\\n opacity: 1 !important;\\n box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4) !important;\\n}\\n\\n\\\/* ========= CALL TO ACTION - OFFICIAL BIFA+ STYLE ========= *\\\/\\n.brics-section .brics-cta {\\n background: linear-gradient(135deg, var(--bifa-deep-navy) 0%, #162e5a 100%) !important;\\n color: var(--bifa-bright-white) !important;\\n padding: 50px !important;\\n border-radius: 30px !important;\\n text-align: center !important;\\n margin: 60px auto 0 auto !important;\\n max-width: 1200px !important;\\n box-shadow: var(--bifa-shadow-premium) !important;\\n animation: fadeInUp 1s ease-out 0.4s both !important;\\n position: relative !important;\\n overflow: hidden !important;\\n border: 2px solid rgba(212, 175, 55, 0.2) !important;\\n width: 100% !important;\\n display: flex !important;\\n align-items: center !important;\\n justify-content: center !important;\\n}\\n\\n.brics-section .brics-cta::before {\\n content: '' !important;\\n position: absolute !important;\\n top: -50% !important;\\n left: -50% !important;\\n width: 200% !important;\\n height: 200% !important;\\n background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%) !important;\\n animation: ctaPulse 4s ease-in-out infinite !important;\\n}\\n\\n@keyframes ctaPulse {\\n 0%, 100% { \\n transform: scale(1) rotate(0deg) !important; \\n opacity: 0.5 !important;\\n }\\n 50% { \\n transform: scale(1.1) rotate(180deg) !important; \\n opacity: 0.8 !important;\\n }\\n}\\n\\n.brics-section .cta-text {\\n font-family: var(--bifa-font-heading) !important;\\n font-size: clamp(1.3rem, 2.5vw, 1.8rem) !important;\\n line-height: 1.7 !important;\\n font-weight: 700 !important;\\n position: relative !important;\\n z-index: 1 !important;\\n text-shadow: 2px 2px 4px rgba(0,0,0,0.3) !important;\\n margin: 0 !important;\\n padding: 0 !important;\\n color: var(--bifa-bright-white) !important;\\n text-align: center !important;\\n width: 100% !important;\\n max-width: 100% !important;\\n}\\n\\n\\\/* ========= LEARN MORE BUTTON - OFFICIAL BIFA+ STYLE ========= *\\\/\\n.brics-section .learn-more-wrapper {\\n text-align: center !important;\\n margin: 60px 0 0 0 !important;\\n animation: fadeInUp 1s ease-out 0.6s both !important;\\n padding: 0 !important;\\n}\\n\\n.brics-section .learn-more-btn {\\n display: inline-flex !important;\\n align-items: center !important;\\n gap: 15px !important;\\n padding: 20px 45px !important;\\n background: rgba(255, 255, 255, 0.95) !important;\\n backdrop-filter: blur(10px) !important;\\n color: var(--bifa-deep-navy) !important;\\n text-decoration: none !important;\\n font-family: var(--bifa-font-heading) !important;\\n font-size: 1.1rem !important;\\n font-weight: 700 !important;\\n border-radius: 50px !important;\\n box-shadow: var(--bifa-shadow-premium) !important;\\n transition: var(--bifa-transition) !important;\\n position: relative !important;\\n overflow: hidden !important;\\n border: 2px solid rgba(212, 175, 55, 0.2) !important;\\n text-transform: uppercase !important;\\n letter-spacing: 1px !important;\\n margin: 0 !important;\\n}\\n\\n.brics-section .learn-more-btn::before {\\n content: '' !important;\\n position: absolute !important;\\n top: 0 !important;\\n left: -100% !important;\\n width: 100% !important;\\n height: 100% !important;\\n background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.2), transparent) !important;\\n transition: left 0.5s ease !important;\\n}\\n\\n.brics-section .learn-more-btn:hover::before {\\n left: 100% !important;\\n}\\n\\n.brics-section .learn-more-btn::after {\\n content: '' !important;\\n position: absolute !important;\\n inset: -2px !important;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700) !important;\\n border-radius: 50px !important;\\n opacity: 0 !important;\\n transition: opacity 0.3s ease !important;\\n z-index: -1 !important;\\n}\\n\\n.brics-section .learn-more-btn:hover::after {\\n opacity: 0.2 !important;\\n}\\n\\n.brics-section .learn-more-btn:hover {\\n transform: translateY(-3px) !important;\\n box-shadow: var(--bifa-shadow-gold) !important;\\n border-color: var(--bifa-heritage-gold) !important;\\n color: var(--bifa-deep-navy) !important;\\n}\\n\\n.brics-section .btn-text {\\n position: relative !important;\\n z-index: 1 !important;\\n margin: 0 !important;\\n padding: 0 !important;\\n}\\n\\n.brics-section .btn-arrow {\\n transition: transform 0.3s ease !important;\\n stroke: currentColor !important;\\n position: relative !important;\\n z-index: 1 !important;\\n}\\n\\n.brics-section .learn-more-btn:hover .btn-arrow {\\n transform: translateX(5px) !important;\\n}\\n\\n\\\/* ========= ANIMATIONS - OFFICIAL BIFA+ STYLE ========= *\\\/\\n@keyframes fadeInDown {\\n from {\\n opacity: 0 !important;\\n transform: translateY(-50px) !important;\\n }\\n to {\\n opacity: 1 !important;\\n transform: translateY(0) !important;\\n }\\n}\\n\\n@keyframes fadeInUp {\\n from {\\n opacity: 0 !important;\\n transform: translateY(50px) !important;\\n }\\n to {\\n opacity: 1 !important;\\n transform: translateY(0) !important;\\n }\\n}\\n\\n\\\/* ========= RESPONSIVE DESIGN - YOOTHEME COMPATIBLE ========= *\\\/\\n\\n\\\/* Desktop and large screens - ensure centering *\\\/\\n@media (min-width: 1200px) {\\n .brics-section .brics-cta {\\n text-align: center !important;\\n display: flex !important;\\n align-items: center !important;\\n justify-content: center !important;\\n }\\n \\n .brics-section .cta-text {\\n text-align: center !important;\\n width: 100% !important;\\n max-width: 100% !important;\\n }\\n}\\n\\n\\\/* Laptop and medium screens - ensure centering *\\\/\\n@media (min-width: 969px) and (max-width: 1199px) {\\n .brics-section .brics-cta {\\n text-align: center !important;\\n display: flex !important;\\n align-items: center !important;\\n justify-content: center !important;\\n }\\n \\n .brics-section .cta-text {\\n text-align: center !important;\\n width: 100% !important;\\n max-width: 100% !important;\\n }\\n}\\n\\n@media (max-width: 968px) {\\n .brics-section {\\n padding: 60px 0 !important;\\n }\\n \\n .brics-section .brics-content {\\n padding: 40px !important;\\n }\\n \\n .brics-section .stats-grid {\\n grid-template-columns: 1fr !important;\\n gap: 25px !important;\\n }\\n \\n .brics-section .flags-carousel-wrapper {\\n padding: 0 50px !important;\\n }\\n \\n .brics-section .flag-item {\\n min-width: 160px !important;\\n padding: 25px !important;\\n }\\n \\n .brics-section .flag-image {\\n width: 90px !important;\\n height: 67px !important;\\n }\\n \\n .brics-section .carousel-button {\\n width: 50px !important;\\n height: 50px !important;\\n }\\n}\\n\\n@media (max-width: 568px) {\\n .brics-section {\\n padding: 50px 0 !important;\\n }\\n \\n .brics-section .section-title {\\n font-size: 2rem !important;\\n margin-bottom: 40px !important;\\n }\\n \\n .brics-section .brics-content {\\n padding: 30px 20px !important;\\n margin-bottom: 40px !important;\\n }\\n \\n .brics-section .content-intro {\\n font-size: 1.2rem !important;\\n margin-bottom: 30px !important;\\n }\\n \\n .brics-section .content-text {\\n font-size: 1rem !important;\\n text-align: left !important;\\n padding-left: 15px !important;\\n }\\n \\n .brics-section .stat-number {\\n font-size: 2.5rem !important;\\n }\\n \\n .brics-section .stat-label {\\n font-size: 1rem !important;\\n }\\n \\n .brics-section .flags-carousel-wrapper {\\n padding: 0 40px !important;\\n }\\n \\n .brics-section .flags-carousel {\\n gap: 20px !important;\\n }\\n \\n .brics-section .flag-item {\\n min-width: 140px !important;\\n padding: 20px !important;\\n }\\n \\n .brics-section .flag-image {\\n width: 70px !important;\\n height: 52px !important;\\n }\\n \\n .brics-section .flag-name {\\n font-size: 0.9rem !important;\\n }\\n \\n .brics-section .carousel-button {\\n width: 45px !important;\\n height: 45px !important;\\n }\\n \\n .brics-section .brics-cta {\\n padding: 35px 20px !important;\\n margin-top: 40px !important;\\n text-align: center !important;\\n display: flex !important;\\n align-items: center !important;\\n justify-content: center !important;\\n }\\n \\n .brics-section .cta-text {\\n font-size: 1.2rem !important;\\n text-align: center !important;\\n width: 100% !important;\\n }\\n \\n .brics-section .learn-more-btn {\\n padding: 15px 30px !important;\\n font-size: 1rem !important;\\n gap: 10px !important;\\n }\\n \\n .brics-section .flags-title {\\n font-size: 1.8rem !important;\\n margin-bottom: 40px !important;\\n }\\n}\\n\\n@media (max-width: 420px) {\\n .brics-container {\\n padding: 0 15px !important;\\n }\\n \\n .brics-section .section-title {\\n font-size: 1.8rem !important;\\n }\\n \\n .brics-section .brics-content {\\n padding: 25px 15px !important;\\n }\\n \\n .brics-section .flags-carousel-wrapper {\\n padding: 0 35px !important;\\n }\\n \\n .brics-section .flag-item {\\n min-width: 120px !important;\\n padding: 15px !important;\\n }\\n \\n .brics-section .flag-image {\\n width: 60px !important;\\n height: 45px !important;\\n }\\n \\n .brics-section .carousel-button {\\n width: 40px !important;\\n height: 40px !important;\\n }\\n \\n .brics-section .carousel-button svg {\\n width: 20px !important;\\n height: 20px !important;\\n }\\n}\\n<\\\/style>\\n<\\\/head>\\n<body>\\n\\n<\/p>\n<div class=\"\\\"brics-section-wrapper\\\"\">\\n \\n <\/p>\n<section class=\"\\\"brics-section\\\"\">\\n <\/p>\n<div class=\"\\\"brics-container\\\"\">\\n <\/p>\n<h2 class=\"\\\"section-title\\\"\">BRICS: A New Era of World Football<\\\/h2>\\n \\n \\n <\/p>\n<div class=\"\\\"brics-image\\\"\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Brics\\\/brics-alliance.jpg\\\"\" alt=\"\\\"BRICS\" alliance\\\">\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"brics-content\\\"\">\\n <\/p>\n<p class=\"\\\"content-intro\\\"\">\\n The union of economic giants creates a unique platform for football development\\n <\\\/p>\\n \\n <\/p>\n<p class=\"\\\"content-text\\\"\">\\n Founded in Dubai by visionary leader Salim Humaid Almazaini, BIFA+ represents an alliance of countries with rich football traditions and enormous potential. The UAE serves as the strategic headquarters, bringing together nations across continents. Brazil contributes the birthplace of legendary football, Russia the experience of hosting the 2018 World Cup, while China and India offer the largest markets with billions of passionate fans. South Africa leads African football development, with newest members adding tremendous strength: Egypt and Ethiopia from Africa, Iran from the Middle East, and Indonesia as the first Southeast Asian member.\\n <\\\/p>\\n \\n <\/p>\n<p class=\"\\\"content-text\\\"\">\\n Together, these countries form a powerful football ecosystem capable of competing with traditional \\n European leagues. The total population of BRICS countries exceeds 3.8 billion people, \\n creating an unprecedented base for talent development and fan engagement.\\n <\\\/p>\\n \\n \\n <\/p>\n<div class=\"\\\"stats-carousel-section\\\"\">\\n <\/p>\n<h4 class=\"\\\"stats-carousel-title\\\"\">BIFA+ by the Numbers<\\\/h4>\\n <\/p>\n<div class=\"\\\"stats-carousel-container\\\"\">\\n <\/p>\n<div class=\"\\\"stats-carousel-wrapper\\\"\">\\n <button class=\"\\\"stats-carousel-button\" stats-carousel-button-prev\\\" aria-label=\"\\\"Previous\" stats\\\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" xmlns=\"\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\"\">\\n <path d=\"\\\"M15\" 18l-6-6 6-6\\\" stroke=\"\\\"currentColor\\\"\" stroke-width=\"\\\"2\\\"\" stroke-linecap=\"\\\"round\\\"\" stroke-linejoin=\"\\\"round\\\"\" fill=\"\\\"none\\\"\\\/\">\\n <\\\/svg>\\n <\\\/button>\\n \\n <\/p>\n<div class=\"\\\"stats-carousel\\\"\" id=\"\\\"statsCarousel\\\"\">\\n <\/p>\n<div class=\"\\\"stats-item\\\"\">\\n <\/p>\n<div class=\"\\\"stats-icon\\\"\">\\ud83c\\udf0d<\\\/div>\\n <\/p>\n<div class=\"\\\"stats-number\\\"\">11+<\\\/div>\\n <\/p>\n<div class=\"\\\"stats-label\\\"\">Global South Nations<\\\/div>\\n <\/p>\n<div class=\"\\\"stats-description\\\"\">United in football diplomacy<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"stats-item\\\"\">\\n <\/p>\n<div class=\"\\\"stats-icon\\\"\">\\ud83d\\udc65<\\\/div>\\n <\/p>\n<div class=\"\\\"stats-number\\\"\">3.8B<\\\/div>\\n <\/p>\n<div class=\"\\\"stats-label\\\"\">Population United<\\\/div>\\n <\/p>\n<div class=\"\\\"stats-description\\\"\">Unprecedented fan base<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"stats-item\\\"\">\\n <\/p>\n<div class=\"\\\"stats-icon\\\"\">\\ud83c\\udfc6<\\\/div>\\n <\/p>\n<div class=\"\\\"stats-number\\\"\">2024<\\\/div>\\n <\/p>\n<div class=\"\\\"stats-label\\\"\">Year Founded<\\\/div>\\n <\/p>\n<div class=\"\\\"stats-description\\\"\">Beginning of new era<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"stats-item\\\"\">\\n <\/p>\n<div class=\"\\\"stats-icon\\\"\">\\ud83c\\udf0f<\\\/div>\\n <\/p>\n<div class=\"\\\"stats-number\\\"\">4<\\\/div>\\n <\/p>\n<div class=\"\\\"stats-label\\\"\">Continents United<\\\/div>\\n <\/p>\n<div class=\"\\\"stats-description\\\"\">Global football presence<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"stats-item\\\"\">\\n <\/p>\n<div class=\"\\\"stats-icon\\\"\">\\ud83d\\udcac<\\\/div>\\n <\/p>\n<div class=\"\\\"stats-number\\\"\">700+<\\\/div>\\n <\/p>\n<div class=\"\\\"stats-label\\\"\">Languages Spoken<\\\/div>\\n <\/p>\n<div class=\"\\\"stats-description\\\"\">Cultural diversity<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"stats-item\\\"\">\\n <\/p>\n<div class=\"\\\"stats-icon\\\"\">\\ud83d\\udd50<\\\/div>\\n <\/p>\n<div class=\"\\\"stats-number\\\"\">18<\\\/div>\\n <\/p>\n<div class=\"\\\"stats-label\\\"\">Time Zones<\\\/div>\\n <\/p>\n<div class=\"\\\"stats-description\\\"\">Round-the-clock football<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"stats-item\\\"\">\\n <\/p>\n<div class=\"\\\"stats-icon\\\"\">\\u26bd<\\\/div>\\n <\/p>\n<div class=\"\\\"stats-number\\\"\">\\u221e<\\\/div>\\n <\/p>\n<div class=\"\\\"stats-label\\\"\">Future Potential<\\\/div>\\n <\/p>\n<div class=\"\\\"stats-description\\\"\">Limitless possibilities<\\\/div>\\n <\\\/div>\\n <\\\/div>\\n \\n <button class=\"\\\"stats-carousel-button\" stats-carousel-button-next\\\" aria-label=\"\\\"Next\" stats\\\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" xmlns=\"\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\"\">\\n <path d=\"\\\"M9\" 18l6-6-6-6\\\" stroke=\"\\\"currentColor\\\"\" stroke-width=\"\\\"2\\\"\" stroke-linecap=\"\\\"round\\\"\" stroke-linejoin=\"\\\"round\\\"\" fill=\"\\\"none\\\"\\\/\">\\n <\\\/svg>\\n <\\\/button>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"stats-carousel-indicators\\\"\" id=\"\\\"statsCarouselIndicators\\\"\"><\\\/div>\\n <\\\/div>\\n <\\\/div>\\n \\n <\/p>\n<p class=\"\\\"content-text\\\"\">\\n BIFA will become the first truly global football league, uniting continents and cultures. \\n Using the economic power and sporting ambitions of BRICS countries, we are creating a platform \\n where the world's best players can showcase their skills to billions of viewers.\\n <\\\/p>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"flags-section\\\"\">\\n <\/p>\n<h3 class=\"\\\"flags-title\\\"\">BIFA Member Countries<\\\/h3>\\n <\/p>\n<div class=\"\\\"flags-carousel-container\\\"\">\\n <\/p>\n<div class=\"\\\"flags-carousel-wrapper\\\"\">\\n <button class=\"\\\"carousel-button\" carousel-button-prev\\\" aria-label=\"\\\"Previous\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" xmlns=\"\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\"\">\\n <path d=\"\\\"M15\" 18l-6-6 6-6\\\" stroke=\"\\\"currentColor\\\"\" stroke-width=\"\\\"2\\\"\" stroke-linecap=\"\\\"round\\\"\" stroke-linejoin=\"\\\"round\\\"\" fill=\"\\\"none\\\"\\\/\">\\n <\\\/svg>\\n <\\\/button>\\n \\n <\/p>\n<div class=\"\\\"flags-carousel\\\"\" id=\"\\\"flagsCarousel\\\"\">\\n <\/p>\n<div class=\"\\\"flag-item\\\"\">\\n <\/p>\n<div class=\"\\\"flag-image\\\"\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Flags\\\/br.svg\\\"\" alt=\"\\\"Brazil\\\"\">\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"flag-name\\\"\">Brazil<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"flag-item\\\"\">\\n <\/p>\n<div class=\"\\\"flag-image\\\"\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Flags\\\/ru.svg\\\"\" alt=\"\\\"Russia\\\"\">\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"flag-name\\\"\">Russia<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"flag-item\\\"\">\\n <\/p>\n<div class=\"\\\"flag-image\\\"\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Flags\\\/in.svg\\\"\" alt=\"\\\"India\\\"\">\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"flag-name\\\"\">India<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"flag-item\\\"\">\\n <\/p>\n<div class=\"\\\"flag-image\\\"\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Flags\\\/cn.svg\\\"\" alt=\"\\\"China\\\"\">\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"flag-name\\\"\">China<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"flag-item\\\"\">\\n <\/p>\n<div class=\"\\\"flag-image\\\"\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Flags\\\/za.svg\\\"\" alt=\"\\\"South\" africa\\\">\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"flag-name\\\"\">South Africa<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"flag-item\\\"\">\\n <\/p>\n<div class=\"\\\"flag-image\\\"\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Flags\\\/ae.svg\\\"\" alt=\"\\\"UAE\\\"\">\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"flag-name\\\"\">UAE<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"flag-item\\\"\">\\n <\/p>\n<div class=\"\\\"flag-image\\\"\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Flags\\\/ir.svg\\\"\" alt=\"\\\"Iran\\\"\">\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"flag-name\\\"\">Iran<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"flag-item\\\"\">\\n <\/p>\n<div class=\"\\\"flag-image\\\"\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Flags\\\/et.svg\\\"\" alt=\"\\\"Ethiopia\\\"\">\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"flag-name\\\"\">Ethiopia<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"flag-item\\\"\">\\n <\/p>\n<div class=\"\\\"flag-image\\\"\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Flags\\\/eg.svg\\\"\" alt=\"\\\"Egypt\\\"\">\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"flag-name\\\"\">Egypt<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"flag-item\\\"\">\\n <\/p>\n<div class=\"\\\"flag-image\\\"\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Flags\\\/id.svg\\\"\" alt=\"\\\"Indonesia\\\"\">\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"flag-name\\\"\">Indonesia<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"flag-item\\\"\">\\n <\/p>\n<div class=\"\\\"flag-image\\\"\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Flags\\\/sa.svg\\\"\" alt=\"\\\"Saudi\" arabia\\\">\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"flag-name\\\"\">Saudi Arabia<\\\/div>\\n <\\\/div>\\n <\\\/div>\\n \\n <button class=\"\\\"carousel-button\" carousel-button-next\\\" aria-label=\"\\\"Next\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" xmlns=\"\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\"\">\\n <path d=\"\\\"M9\" 18l6-6-6-6\\\" stroke=\"\\\"currentColor\\\"\" stroke-width=\"\\\"2\\\"\" stroke-linecap=\"\\\"round\\\"\" stroke-linejoin=\"\\\"round\\\"\" fill=\"\\\"none\\\"\\\/\">\\n <\\\/svg>\\n <\\\/button>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"carousel-indicators\\\"\" id=\"\\\"carouselIndicators\\\"\"><\\\/div>\\n <\\\/div>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"brics-cta\\\"\">\\n <\/p>\n<p class=\"\\\"cta-text\\\"\">\\n Together we build a future where football unites continents and creates new opportunities for billions of people\\n <\\\/p>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"learn-more-wrapper\\\"\">\\n <a href=\"\\\"https:\\\/\\\/bifa.ai\\\/country-members\\\/\\\"\" class=\"\\\"learn-more-btn\\\"\">\\n <span class=\"\\\"btn-text\\\"\">Learn more about member countries<\\\/span>\\n <svg class=\"\\\"btn-arrow\\\"\" width=\"\\\"24\\\"\" height=\"\\\"24\\\"\" viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\" xmlns=\"\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\"\">\\n <path d=\"\\\"M5\" 12h19m19 12l12 5m19 19\\\" stroke =\"\\\"currentColor\\\"\" stroke-width=\"\\\"2\\\"\" stroke-linecap=\"\\\"round\\\"\" stroke-linejoin=\"\\\"round\\\"\\\/\">\\n <\\\/svg>\\n <\\\/a>\\n <\\\/div>\\n <\\\/div>\\n <\\\/section>\\n<\\\/div>\\n\\n<script>\\n\\\/\\\/ BIFA+ BRICS Carousel System - Optimized Version\\ndocument.addEventListener('DOMContentLoaded', function() {\\n \\\/\\\/ Universal Carousel Class\\n class BIFACarousel {\\n constructor(config) {\\n this.carousel = config.carousel;\\n this.prevButton = config.prevButton;\\n this.nextButton = config.nextButton;\\n this.indicatorsContainer = config.indicatorsContainer;\\n this.items = config.items;\\n this.itemClass = config.itemClass;\\n this.cloneClass = config.cloneClass;\\n this.gap = config.gap || 30;\\n this.autoPlayDelay = config.autoPlayDelay || 4000;\\n this.itemsPerView = config.itemsPerView || 5;\\n this.calculateItemsPerView = config.calculateItemsPerView;\\n \\n this.currentIndex = 0;\\n this.autoPlayInterval = null;\\n this.isTransitioning = false;\\n this.totalItems = this.items.length;\\n \\n this.init();\\n }\\n \\n init() {\\n if (!this.carousel || this.totalItems === 0) return;\\n \\n this.calculateItemsPerView();\\n this.createIndicators();\\n this.setupInfiniteScroll();\\n this.setupEventListeners();\\n \\n \\\/\\\/ Start autoplay after delay\\n setTimeout(() => this.startAutoPlay(), 1000);\\n }\\n \\n setupInfiniteScroll() {\\n \\\/\\\/ Remove existing clones\\n this.carousel.querySelectorAll(`.${this.cloneClass}`).forEach(clone => clone.remove());\\n \\n \\\/\\\/ Create clones for infinite scroll\\n for (let i = 0; i < this.itemsPerView; i++) {\\n const firstClone = this.items[i].cloneNode(true);\\n const lastClone = this.items[this.totalItems - this.itemsPerView + i].cloneNode(true);\\n \\n firstClone.classList.add(this.cloneClass);\\n lastClone.classList.add(this.cloneClass);\\n \\n this.carousel.appendChild(firstClone);\\n this.carousel.insertBefore(lastClone, this.items[0]);\\n }\\n \\n this.currentIndex = this.itemsPerView;\\n this.carousel.style.transition = 'none';\\n this.updateCarouselPosition();\\n \\n this.carousel.offsetHeight; \\\/\\\/ Force reflow\\n this.carousel.style.transition = 'transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94)';\\n }\\n \\n createIndicators() {\\n if (!this.indicatorsContainer) return;\\n \\n this.indicatorsContainer.innerHTML = '';\\n const totalPages = Math.ceil(this.totalItems \\\/ this.itemsPerView);\\n \\n for (let i = 0; i < totalPages; i++) {\\n const indicator = document.createElement('div');\\n indicator.className = 'indicator';\\n if (i === 0) indicator.classList.add('active');\\n indicator.addEventListener('click', () => this.goToPage(i));\\n this.indicatorsContainer.appendChild(indicator);\\n }\\n }\\n \\n updateCarouselPosition() {\\n const allItems = this.carousel.querySelectorAll(`.${this.itemClass}, .${this.cloneClass}`);\\n if (allItems.length === 0) return;\\n \\n const itemWidth = allItems[0].offsetWidth;\\n const offset = this.currentIndex * (itemWidth + this.gap);\\n this.carousel.style.transform = `translateX(-${offset}px)`;\\n }\\n \\n updateCarousel() {\\n if (this.isTransitioning) return;\\n this.isTransitioning = true;\\n \\n this.updateCarouselPosition();\\n this.updateIndicators();\\n \\n this.carousel.addEventListener('transitionend', this.handleTransitionEnd.bind(this), { once: true });\\n }\\n \\n handleTransitionEnd() {\\n const totalItemsWithClones = this.carousel.querySelectorAll(`.${this.itemClass}, .${this.cloneClass}`).length;\\n \\n if (this.currentIndex >= totalItemsWithClones - this.itemsPerView) {\\n this.carousel.style.transition = 'none';\\n this.currentIndex = this.itemsPerView;\\n this.updateCarouselPosition();\\n this.carousel.offsetHeight;\\n this.carousel.style.transition = 'transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94)';\\n } else if (this.currentIndex < this.itemsPerView) {\\n this.carousel.style.transition = 'none';\\n this.currentIndex = totalItemsWithClones - this.itemsPerView * 2;\\n this.updateCarouselPosition();\\n this.carousel.offsetHeight;\\n this.carousel.style.transition = 'transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94)';\\n }\\n \\n this.isTransitioning = false;\\n }\\n \\n updateIndicators() {\\n if (!this.indicatorsContainer) return;\\n \\n const indicators = this.indicatorsContainer.querySelectorAll('.indicator');\\n const realIndex = (this.currentIndex - this.itemsPerView) % this.totalItems;\\n const currentPage = Math.floor(realIndex \\\/ this.itemsPerView);\\n \\n indicators.forEach((indicator, index) => {\\n indicator.classList.toggle('active', index === currentPage);\\n });\\n }\\n \\n goToPage(pageIndex) {\\n if (this.isTransitioning) return;\\n \\n const targetIndex = (pageIndex * this.itemsPerView) + this.itemsPerView;\\n this.currentIndex = targetIndex;\\n this.updateCarousel();\\n this.resetAutoPlay();\\n }\\n \\n nextSlide() {\\n if (this.isTransitioning) return;\\n this.currentIndex += 1;\\n this.updateCarousel();\\n }\\n \\n prevSlide() {\\n if (this.isTransitioning) return;\\n this.currentIndex -= 1;\\n this.updateCarousel();\\n }\\n \\n startAutoPlay() {\\n this.autoPlayInterval = setInterval(() => this.nextSlide(), this.autoPlayDelay);\\n }\\n \\n stopAutoPlay() {\\n clearInterval(this.autoPlayInterval);\\n }\\n \\n resetAutoPlay() {\\n this.stopAutoPlay();\\n this.startAutoPlay();\\n }\\n \\n setupEventListeners() {\\n \\\/\\\/ Navigation buttons\\n if (this.prevButton) {\\n this.prevButton.addEventListener('click', () => {\\n this.prevSlide();\\n this.resetAutoPlay();\\n });\\n }\\n \\n if (this.nextButton) {\\n this.nextButton.addEventListener('click', () => {\\n this.nextSlide();\\n this.resetAutoPlay();\\n });\\n }\\n \\n \\\/\\\/ Pause on hover\\n const container = this.carousel.closest('.flags-carousel-container, .stats-carousel-container');\\n if (container) {\\n container.addEventListener('mouseenter', () => this.stopAutoPlay());\\n container.addEventListener('mouseleave', () => this.startAutoPlay());\\n }\\n \\n \\\/\\\/ Touch support\\n let touchStartX = 0;\\n let touchEndX = 0;\\n \\n this.carousel.addEventListener('touchstart', (e) => {\\n touchStartX = e.changedTouches[0].screenX;\\n this.stopAutoPlay();\\n });\\n \\n this.carousel.addEventListener('touchend', (e) => {\\n touchEndX = e.changedTouches[0].screenX;\\n this.handleSwipe(touchStartX, touchEndX);\\n this.startAutoPlay();\\n });\\n \\n \\\/\\\/ Responsive handling\\n window.addEventListener('resize', () => {\\n const oldItemsPerView = this.itemsPerView;\\n this.calculateItemsPerView();\\n \\n if (oldItemsPerView !== this.itemsPerView) {\\n this.setupInfiniteScroll();\\n this.createIndicators();\\n this.updateCarouselPosition();\\n }\\n });\\n }\\n \\n handleSwipe(startX, endX) {\\n const swipeDistance = endX - startX;\\n const minSwipeDistance = 50;\\n \\n if (Math.abs(swipeDistance) > minSwipeDistance) {\\n if (swipeDistance < 0) {\\n this.nextSlide();\\n } else {\\n this.prevSlide();\\n }\\n }\\n }\\n }\\n \\n \\\/\\\/ Initialize Flags Carousel\\n const flagsCarousel = new BIFACarousel({\\n carousel: document.getElementById('flagsCarousel'),\\n prevButton: document.querySelector('.carousel-button-prev'),\\n nextButton: document.querySelector('.carousel-button-next'),\\n indicatorsContainer: document.getElementById('carouselIndicators'),\\n items: document.querySelectorAll('#flagsCarousel .flag-item'),\\n itemClass: 'flag-item',\\n cloneClass: 'flag-item-clone',\\n gap: 30,\\n autoPlayDelay: 4000,\\n calculateItemsPerView: function() {\\n const width = window.innerWidth;\\n if (width < 420) {\\n this.itemsPerView = 2;\\n } else if (width < 568) {\\n this.itemsPerView = 2;\\n } else if (width < 768) {\\n this.itemsPerView = 3;\\n } else if (width < 1024) {\\n this.itemsPerView = 4;\\n } else {\\n this.itemsPerView = 5;\\n }\\n }\\n });\\n \\n \\\/\\\/ Initialize Stats Carousel\\n const statsCarousel = new BIFACarousel({\\n carousel: document.getElementById('statsCarousel'),\\n prevButton: document.querySelector('.stats-carousel-button-prev'),\\n nextButton: document.querySelector('.stats-carousel-button-next'),\\n indicatorsContainer: document.getElementById('statsCarouselIndicators'),\\n items: document.querySelectorAll('#statsCarousel .stats-item'),\\n itemClass: 'stats-item',\\n cloneClass: 'stats-item-clone',\\n gap: 25,\\n autoPlayDelay: 3500,\\n calculateItemsPerView: function() {\\n const width = window.innerWidth;\\n if (width < 420) {\\n this.itemsPerView = 1;\\n } else if (width < 768) {\\n this.itemsPerView = 2;\\n } else if (width < 1024) {\\n this.itemsPerView = 3;\\n } else {\\n this.itemsPerView = 4;\\n }\\n }\\n });\\n \\n \\\/\\\/ Animate counters when visible\\n const animateCounters = () => {\\n const counters = document.querySelectorAll('.stats-number');\\n \\n const observerOptions = {\\n threshold: 0.3,\\n rootMargin: '0px'\\n };\\n \\n const animateValue = (element, start, end, duration, suffix = '') => {\\n let startTimestamp = null;\\n const step = (timestamp) => {\\n if (!startTimestamp) startTimestamp = timestamp;\\n const progress = Math.min((timestamp - startTimestamp) \\\/ duration, 1);\\n \\n const easeOutQuart = 1 - Math.pow(1 - progress, 4);\\n \\n if (end === '\\u221e') {\\n element.textContent = '\\u221e';\\n return;\\n } else if (end.includes('.')) {\\n const current = (start + easeOutQuart * (parseFloat(end) - start)).toFixed(1);\\n element.textContent = current + suffix;\\n } else if (end.includes('+')) {\\n const numEnd = parseInt(end.replace('+', ''));\\n element.textContent = Math.floor(easeOutQuart * (numEnd - start) + start) + '+';\\n } else {\\n element.textContent = Math.floor(easeOutQuart * (end - start) + start) + suffix;\\n }\\n \\n if (progress < 1) {\\n window.requestAnimationFrame(step);\\n } else {\\n element.textContent = end + suffix;\\n }\\n };\\n window.requestAnimationFrame(step);\\n };\\n \\n const observer = new IntersectionObserver((entries) => {\\n entries.forEach(entry => {\\n if (entry.isIntersecting && !entry.target.animated) {\\n entry.target.animated = true;\\n const finalText = entry.target.textContent;\\n \\n \\\/\\\/ Stats carousel numbers\\n if (finalText.includes('11+')) {\\n animateValue(entry.target, 0, '11+', 1800);\\n } else if (finalText.includes('3.8B')) {\\n animateValue(entry.target, 0, '3.8', 2000, 'B');\\n } else if (finalText.includes('2024')) {\\n animateValue(entry.target, 2020, 2024, 2200);\\n } else if (finalText.includes('4') && !finalText.includes('700')) {\\n animateValue(entry.target, 0, 4, 1500);\\n } else if (finalText.includes('700+')) {\\n animateValue(entry.target, 0, '700+', 2500);\\n } else if (finalText.includes('18')) {\\n animateValue(entry.target, 0, 18, 2000);\\n } else if (finalText.includes('\\u221e')) {\\n animateValue(entry.target, 0, '\\u221e', 1000);\\n }\\n }\\n });\\n }, observerOptions);\\n \\n counters.forEach(counter => {\\n observer.observe(counter);\\n });\\n };\\n \\n \\\/\\\/ Start animations\\n setTimeout(animateCounters, 500);\\n \\n \\\/\\\/ Smooth scroll for Learn More button\\n const learnMoreBtn = document.querySelector('.learn-more-btn');\\n if (learnMoreBtn) {\\n learnMoreBtn.addEventListener('click', function(e) {\\n if (this.getAttribute('href').startsWith('#')) {\\n e.preventDefault();\\n const targetId = this.getAttribute('href').substring(1);\\n const targetElement = document.getElementById(targetId);\\n \\n if (targetElement) {\\n targetElement.scrollIntoView({\\n behavior: 'smooth',\\n block: 'start'\\n });\\n } else {\\n const flagsSection = document.querySelector('.flags-section');\\n if (flagsSection) {\\n flagsSection.scrollIntoView({\\n behavior: 'smooth',\\n block: 'start'\\n });\\n }\\n }\\n }\\n });\\n }\\n});\\n<\\\/script>\\n\\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\\n \\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@400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700&display=swap\\\"\" rel=\"\\\"stylesheet\\\"\">\\n\\n<\/p>\n<style>\\n\\\/* ===== PRESIDENT BLOCK FOR YOOTHEME - OFFICIAL BIFA+ BRAND ===== *\\\/\\n\\n\\\/* CSS Variables - Official BIFA+ Colors *\\\/\\n:root {\\n --deep-navy: #0A1F44;\\n --heritage-gold: #D4AF37;\\n --civic-green: #1D6143;\\n --bright-white: #FFFFFF;\\n --soft-black: #1A1A1A;\\n --text-secondary: #64748b;\\n --shadow-sm: 0 2px 10px rgba(10, 31, 68, 0.08);\\n --shadow-md: 0 10px 40px rgba(10, 31, 68, 0.12);\\n --radius: 12px;\\n}\\n\\n.bifa-president-block {\\n position: relative;\\n width: 100vw;\\n margin-left: calc(-50vw + 50%);\\n padding: 40px 0; \\\/* \\u0423\\u043c\\u0435\\u043d\\u044c\\u0448\\u0430\\u0435\\u043c \\u043e\\u0442\\u0441\\u0442\\u0443\\u043f\\u044b \\u0434\\u043b\\u044f \\u0434\\u0435\\u0441\\u043a\\u0442\\u043e\\u043f\\u0430 *\\\/\\n background: transparent;\\n overflow: hidden;\\n}\\n\\n\\\/* \\u0412\\u043e\\u0441\\u0441\\u0442\\u0430\\u043d\\u0430\\u0432\\u043b\\u0438\\u0432\\u0430\\u0435\\u043c \\u0444\\u043e\\u043d \\u0434\\u043b\\u044f \\u043f\\u043b\\u0430\\u043d\\u0448\\u0435\\u0442\\u043e\\u0432 \\u0438 \\u043c\\u043e\\u0431\\u0438\\u043b\\u044c\\u043d\\u044b\\u0445 *\\\/\\n@media (max-width: 1024px) {\\n .bifa-president-block {\\n background: linear-gradient(135deg, #f8f9fa 0%, #f0f2f5 100%);\\n padding: 60px 0; \\\/* \\u0412\\u043e\\u0441\\u0441\\u0442\\u0430\\u043d\\u0430\\u0432\\u043b\\u0438\\u0432\\u0430\\u0435\\u043c \\u043e\\u0442\\u0441\\u0442\\u0443\\u043f\\u044b *\\\/\\n }\\n}\\n\\n.bifa-president-block::before {\\n content: '';\\n position: absolute;\\n inset: 0;\\n background: none;\\n z-index: 0;\\n}\\n\\n\\\/* \\u0412\\u043e\\u0441\\u0441\\u0442\\u0430\\u043d\\u0430\\u0432\\u043b\\u0438\\u0432\\u0430\\u0435\\u043c \\u0433\\u0440\\u0430\\u0434\\u0438\\u0435\\u043d\\u0442 \\u0434\\u043b\\u044f \\u043f\\u043b\\u0430\\u043d\\u0448\\u0435\\u0442\\u043e\\u0432 \\u0438 \\u043c\\u043e\\u0431\\u0438\\u043b\\u044c\\u043d\\u044b\\u0445 *\\\/\\n@media (max-width: 1024px) {\\n .bifa-president-block::before {\\n background: radial-gradient(circle at 30% 50%, rgba(10, 31, 68, 0.02), transparent 50%),\\n radial-gradient(circle at 70% 80%, rgba(212, 175, 55, 0.02), transparent 50%);\\n }\\n}\\n\\n\\\/* \\u0427\\u0430\\u0441\\u0442\\u0438\\u0446\\u044b \\u0434\\u043b\\u044f \\u0430\\u043d\\u0438\\u043c\\u0430\\u0446\\u0438\\u0438 \\u0444\\u043e\\u043d\\u0430 *\\\/\\n.president-particles {\\n display: none; \\\/* \\u0421\\u043a\\u0440\\u044b\\u0432\\u0430\\u0435\\u043c \\u0434\\u043b\\u044f \\u0434\\u0435\\u0441\\u043a\\u0442\\u043e\\u043f\\u0430 *\\\/\\n}\\n\\n\\\/* \\u041f\\u043e\\u043a\\u0430\\u0437\\u044b\\u0432\\u0430\\u0435\\u043c \\u0447\\u0430\\u0441\\u0442\\u0438\\u0446\\u044b \\u0434\\u043b\\u044f \\u043f\\u043b\\u0430\\u043d\\u0448\\u0435\\u0442\\u043e\\u0432 \\u0438 \\u043c\\u043e\\u0431\\u0438\\u043b\\u044c\\u043d\\u044b\\u0445 *\\\/\\n@media (max-width: 1024px) {\\n .president-particles {\\n display: block;\\n position: absolute;\\n width: 100%;\\n height: 100%;\\n overflow: hidden;\\n z-index: 1;\\n }\\n}\\n\\n.president-particle {\\n position: absolute;\\n width: 4px;\\n height: 4px;\\n background: rgba(212, 175, 55, 0.2);\\n border-radius: 50%;\\n animation: president-float 15s ease-in-out infinite;\\n}\\n\\n.president-particle:nth-child(2n) { \\n background: rgba(10, 31, 68, 0.15); \\n animation-duration: 18s; \\n}\\n\\n.president-particle:nth-child(3n) { \\n background: rgba(29, 97, 67, 0.1); \\n animation-duration: 20s; \\n}\\n\\n@keyframes president-float { \\n 0%, 100% { \\n transform: translateY(0); \\n opacity: 1; \\n }\\n 50% { \\n transform: translateY(-10px); \\n opacity: 0.8; \\n }\\n}\\n\\n\\\/* \\u041a\\u043e\\u043d\\u0442\\u0435\\u043d\\u0442 \\u043e\\u0431\\u0435\\u0440\\u0442\\u043a\\u0430 *\\\/\\n.president-content-wrapper {\\n position: relative;\\n z-index: 2;\\n padding: 0 20px;\\n}\\n\\n\\\/* Typography for this block - BIFA+ Official Fonts *\\\/\\n.bifa-president-block h1, \\n.bifa-president-block h2, \\n.bifa-president-block h3 {\\n font-family: 'Montserrat', sans-serif !important;\\n}\\n\\n.bifa-president-block p, \\n.bifa-president-block span, \\n.bifa-president-block a {\\n font-family: 'Poppins', sans-serif !important;\\n}\\n\\n\\\/* President Card Container *\\\/\\n.bifa-president-container {\\n max-width: 1200px;\\n margin: 0 auto;\\n position: relative;\\n z-index: 1;\\n}\\n\\n\\\/* Main Card *\\\/\\n.bifa-president-card {\\n background: transparent;\\n backdrop-filter: none;\\n border-radius: 0;\\n padding: 0; \\\/* \\u0423\\u0431\\u0438\\u0440\\u0430\\u0435\\u043c \\u0432\\u043d\\u0443\\u0442\\u0440\\u0435\\u043d\\u043d\\u0438\\u0435 \\u043e\\u0442\\u0441\\u0442\\u0443\\u043f\\u044b \\u0434\\u043b\\u044f \\u0434\\u0435\\u0441\\u043a\\u0442\\u043e\\u043f\\u0430 *\\\/\\n box-shadow: none;\\n border: none;\\n position: relative;\\n overflow: hidden;\\n animation: bifa-fadeInUp 1s ease-out;\\n}\\n\\n\\\/* \\u0412\\u043e\\u0441\\u0441\\u0442\\u0430\\u043d\\u0430\\u0432\\u043b\\u0438\\u0432\\u0430\\u0435\\u043c \\u043a\\u0430\\u0440\\u0442\\u043e\\u0447\\u043a\\u0443 \\u0434\\u043b\\u044f \\u043f\\u043b\\u0430\\u043d\\u0448\\u0435\\u0442\\u043e\\u0432 \\u0438 \\u043c\\u043e\\u0431\\u0438\\u043b\\u044c\\u043d\\u044b\\u0445 *\\\/\\n@media (max-width: 1024px) {\\n .bifa-president-card {\\n background: var(--bright-white);\\n backdrop-filter: blur(10px);\\n border-radius: var(--radius);\\n box-shadow: 0 5px 30px rgba(10, 31, 68, 0.1);\\n border: 2px solid rgba(212, 175, 55, 0.2);\\n }\\n}\\n\\n\\\/* Rotating background gradient *\\\/\\n.bifa-president-card::before {\\n content: '';\\n position: absolute;\\n top: -50%;\\n right: -50%;\\n width: 200%;\\n height: 200%;\\n background: none;\\n animation: none;\\n pointer-events: none;\\n}\\n\\n\\\/* \\u0412\\u043e\\u0441\\u0441\\u0442\\u0430\\u043d\\u0430\\u0432\\u043b\\u0438\\u0432\\u0430\\u0435\\u043c \\u0433\\u0440\\u0430\\u0434\\u0438\\u0435\\u043d\\u0442 \\u0434\\u043b\\u044f \\u043f\\u043b\\u0430\\u043d\\u0448\\u0435\\u0442\\u043e\\u0432 \\u0438 \\u043c\\u043e\\u0431\\u0438\\u043b\\u044c\\u043d\\u044b\\u0445 *\\\/\\n@media (max-width: 1024px) {\\n .bifa-president-card::before {\\n background: radial-gradient(circle, rgba(212, 175, 55, 0.03) 0%, transparent 50%);\\n animation: bifa-rotate-slow 30s linear infinite;\\n }\\n}\\n\\n\\\/* Card Content Grid *\\\/\\n.bifa-card-content {\\n display: grid;\\n grid-template-columns: 280px 1fr;\\n gap: 60px;\\n align-items: center;\\n position: relative;\\n z-index: 1;\\n}\\n\\n\\\/* President Photo *\\\/\\n.bifa-president-photo {\\n width: 280px;\\n height: 280px;\\n border-radius: 50%;\\n overflow: hidden;\\n position: relative;\\n border: 5px solid transparent;\\n background: linear-gradient(white, white) padding-box,\\n linear-gradient(135deg, var(--heritage-gold), #e6c157, var(--heritage-gold)) border-box;\\n animation: bifa-fadeInScale 1s ease-out;\\n box-shadow: 0 10px 30px rgba(10, 31, 68, 0.15);\\n}\\n\\n.bifa-president-photo img {\\n width: 100%;\\n height: 100%;\\n object-fit: cover;\\n transition: transform 0.6s ease;\\n}\\n\\n.bifa-president-photo:hover img {\\n transform: scale(1.1);\\n}\\n\\n\\\/* President Info Section *\\\/\\n.bifa-president-info {\\n animation: bifa-fadeInRight 1s ease-out 0.3s both;\\n}\\n\\n\\\/* Badge *\\\/\\n.bifa-president-badge {\\n display: inline-flex;\\n align-items: center;\\n gap: 10px;\\n background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(212, 175, 55, 0.05) 100%);\\n padding: 12px 24px;\\n border-radius: 50px;\\n margin-bottom: 25px;\\n border: 1px solid rgba(212, 175, 55, 0.3);\\n}\\n\\n.bifa-badge-icon {\\n width: 24px;\\n height: 24px;\\n fill: var(--heritage-gold);\\n}\\n\\n.bifa-badge-text {\\n font-family: 'Montserrat', sans-serif !important;\\n font-size: 0.85rem;\\n font-weight: 700;\\n text-transform: uppercase;\\n letter-spacing: 2px;\\n color: var(--deep-navy);\\n}\\n\\n\\\/* President Name - \\u0417\\u041e\\u041b\\u041e\\u0422\\u041e\\u0419 \\u0426\\u0412\\u0415\\u0422 \\u0421 \\u041f\\u0415\\u0420\\u0415\\u041b\\u0418\\u0412\\u041e\\u041c *\\\/\\n.bifa-president-name {\\n font-size: 2.8rem;\\n font-weight: 800;\\n background: linear-gradient(135deg, var(--heritage-gold) 0%, #e6c157 25%, #f4d03f 50%, #e6c157 75%, var(--heritage-gold) 100%);\\n background-size: 200% 100%;\\n background-clip: text;\\n -webkit-background-clip: text;\\n -webkit-text-fill-color: transparent;\\n margin-bottom: 30px;\\n line-height: 1.1;\\n font-family: 'Montserrat', sans-serif !important;\\n text-transform: uppercase;\\n letter-spacing: 1px;\\n text-shadow: 0 2px 4px rgba(212, 175, 55, 0.1);\\n cursor: pointer;\\n transition: all 0.3s ease;\\n}\\n\\n\\\/* \\u0410\\u043d\\u0438\\u043c\\u0430\\u0446\\u0438\\u044f \\u043f\\u0435\\u0440\\u0435\\u043b\\u0438\\u0432\\u0430 \\u0442\\u043e\\u043b\\u044c\\u043a\\u043e \\u043f\\u0440\\u0438 \\u043d\\u0430\\u0432\\u0435\\u0434\\u0435\\u043d\\u0438\\u0438 *\\\/\\n.bifa-president-name:hover {\\n animation: bifa-gold-shimmer 2s ease-in-out infinite;\\n transform: scale(1.02);\\n}\\n\\n\\\/* \\u0410\\u043d\\u0438\\u043c\\u0430\\u0446\\u0438\\u044f \\u0437\\u043e\\u043b\\u043e\\u0442\\u043e\\u0433\\u043e \\u043f\\u0435\\u0440\\u0435\\u043b\\u0438\\u0432\\u0430 *\\\/\\n@keyframes bifa-gold-shimmer {\\n 0% {\\n background-position: 200% 0;\\n }\\n 50% {\\n background-position: -200% 0;\\n }\\n 100% {\\n background-position: 200% 0;\\n }\\n}\\n\\n\\\/* Description *\\\/\\n.bifa-president-description {\\n font-size: 1.15rem;\\n line-height: 1.8;\\n color: var(--text-secondary);\\n margin-bottom: 40px;\\n font-family: 'Poppins', sans-serif !important;\\n font-weight: 400;\\n}\\n\\n.bifa-president-description .bifa-highlight {\\n color: var(--heritage-gold);\\n font-weight: 600;\\n}\\n\\n\\\/* Action Buttons Container *\\\/\\n.bifa-president-actions {\\n display: flex;\\n align-items: center;\\n gap: 25px;\\n flex-wrap: wrap;\\n}\\n\\n\\\/* Buttons - Official BIFA+ Style *\\\/\\n.bifa-btn {\\n padding: 14px 32px;\\n text-decoration: none;\\n font-size: 0.95rem;\\n font-weight: 600;\\n border-radius: var(--radius);\\n display: inline-flex;\\n align-items: center;\\n gap: 10px;\\n transition: all 0.3s ease;\\n font-family: 'Montserrat', sans-serif !important;\\n cursor: pointer;\\n position: relative;\\n overflow: hidden;\\n text-transform: uppercase;\\n letter-spacing: 1px;\\n}\\n\\n.bifa-btn-gold {\\n background: var(--heritage-gold);\\n color: var(--deep-navy);\\n box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);\\n border: 2px solid var(--heritage-gold);\\n}\\n\\n.bifa-btn-gold:hover {\\n transform: translateY(-2px);\\n box-shadow: 0 6px 25px rgba(212, 175, 55, 0.4);\\n background: #e6c157;\\n color: var(--deep-navy);\\n text-decoration: none;\\n}\\n\\n.bifa-btn-outline {\\n background: transparent;\\n color: var(--deep-navy);\\n border: 2px solid var(--deep-navy);\\n}\\n\\n.bifa-btn-outline:hover {\\n background: var(--deep-navy);\\n color: var(--bright-white);\\n transform: translateY(-2px);\\n box-shadow: 0 6px 20px rgba(10, 31, 68, 0.25);\\n text-decoration: none;\\n}\\n\\n.bifa-btn-icon {\\n width: 20px;\\n height: 20px;\\n transition: transform 0.3s ease;\\n}\\n\\n.bifa-btn:hover .bifa-btn-icon {\\n transform: translateX(5px);\\n}\\n\\n\\\/* BIFA Logo *\\\/\\n.bifa-logo-wrapper {\\n position: relative;\\n width: 80px;\\n height: 80px;\\n flex-shrink: 0;\\n margin-left: 15px;\\n}\\n\\n.bifa-logo-bg {\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n transform: translate(-50%, -50%);\\n width: 100px;\\n height: 100px;\\n background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 60%);\\n border-radius: 50%;\\n animation: bifa-pulse 4s ease-in-out infinite;\\n}\\n\\n.bifa-logo-img {\\n width: 80px;\\n height: 80px;\\n background-image: url('\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/logo_bifa.svg');\\n background-size: contain;\\n background-repeat: no-repeat;\\n background-position: center;\\n filter: drop-shadow(0 4px 8px rgba(10, 31, 68, 0.1));\\n transition: all 0.4s ease;\\n position: relative;\\n z-index: 1;\\n}\\n\\n.bifa-logo-wrapper:hover .bifa-logo-img {\\n transform: scale(1.1) rotate(5deg);\\n filter: drop-shadow(0 6px 15px rgba(212, 175, 55, 0.3));\\n}\\n\\n\\\/* Decorative Elements *\\\/\\n.bifa-gold-accent {\\n display: none; \\\/* \\u0421\\u043a\\u0440\\u044b\\u0432\\u0430\\u0435\\u043c \\u0434\\u043b\\u044f \\u0434\\u0435\\u0441\\u043a\\u0442\\u043e\\u043f\\u0430 *\\\/\\n}\\n\\n\\\/* \\u0414\\u043b\\u044f \\u0434\\u0435\\u0441\\u043a\\u0442\\u043e\\u043f\\u043d\\u044b\\u0445 \\u044d\\u043a\\u0440\\u0430\\u043d\\u043e\\u0432 - \\u0443\\u0431\\u0438\\u0440\\u0430\\u0435\\u043c \\u0432\\u0441\\u0435 \\u0444\\u043e\\u043d\\u044b \\u0438 \\u0440\\u0430\\u043c\\u043a\\u0438 *\\\/\\n@media (min-width: 1025px) {\\n .bifa-president-block {\\n background: transparent !important;\\n padding: 40px 0;\\n }\\n \\n .bifa-president-block::before {\\n display: none;\\n }\\n \\n .bifa-president-card {\\n background: transparent !important;\\n border: none !important;\\n box-shadow: none !important;\\n padding: 0 !important;\\n }\\n \\n .president-particles,\\n .bifa-gold-accent {\\n display: none !important;\\n }\\n}\\n\\n\\\/* \\u041f\\u043e\\u043a\\u0430\\u0437\\u044b\\u0432\\u0430\\u0435\\u043c \\u0434\\u0435\\u043a\\u043e\\u0440\\u0430\\u0442\\u0438\\u0432\\u043d\\u044b\\u0435 \\u044d\\u043b\\u0435\\u043c\\u0435\\u043d\\u0442\\u044b \\u0434\\u043b\\u044f \\u043f\\u043b\\u0430\\u043d\\u0448\\u0435\\u0442\\u043e\\u0432 \\u0438 \\u043c\\u043e\\u0431\\u0438\\u043b\\u044c\\u043d\\u044b\\u0445 *\\\/\\n@media (max-width: 1024px) {\\n .bifa-gold-accent {\\n display: block;\\n position: absolute;\\n width: 180px;\\n height: 180px;\\n background: radial-gradient(circle, rgba(212, 175, 55, 0.12) 0%, transparent 70%);\\n border-radius: 50%;\\n filter: blur(40px);\\n pointer-events: none;\\n animation: bifa-float-accent 15s ease-in-out infinite;\\n }\\n\\n .bifa-gold-accent:nth-child(1) {\\n top: -80px;\\n right: 10%;\\n }\\n\\n .bifa-gold-accent:nth-child(2) {\\n bottom: -80px;\\n left: 10%;\\n animation-delay: 7s;\\n }\\n}\\n\\n\\\/* Animations *\\\/\\n@keyframes bifa-fadeInUp {\\n from {\\n opacity: 0;\\n transform: translateY(40px);\\n }\\n to {\\n opacity: 1;\\n transform: translateY(0);\\n }\\n}\\n\\n@keyframes bifa-fadeInRight {\\n from {\\n opacity: 0;\\n transform: translateX(40px);\\n }\\n to {\\n opacity: 1;\\n transform: translateX(0);\\n }\\n}\\n\\n@keyframes bifa-fadeInScale {\\n from {\\n opacity: 0;\\n transform: scale(0.8);\\n }\\n to {\\n opacity: 1;\\n transform: scale(1);\\n }\\n}\\n\\n@keyframes bifa-rotate-slow {\\n from { transform: rotate(0deg); }\\n to { transform: rotate(360deg); }\\n}\\n\\n@keyframes bifa-float-accent {\\n 0%, 100% {\\n transform: translate(0, 0);\\n }\\n 50% {\\n transform: translate(-20px, 20px);\\n }\\n}\\n\\n@keyframes bifa-pulse {\\n 0%, 100% {\\n transform: translate(-50%, -50%) scale(1);\\n opacity: 0.3;\\n }\\n 50% {\\n transform: translate(-50%, -50%) scale(1.05);\\n opacity: 0.5;\\n }\\n}\\n\\n\\\/* Responsive Design *\\\/\\n@media (max-width: 1024px) {\\n .bifa-president-container {\\n padding: 0 30px;\\n }\\n \\n .bifa-president-card {\\n padding: 50px 40px;\\n background: var(--bright-white);\\n backdrop-filter: blur(10px);\\n border-radius: var(--radius);\\n box-shadow: 0 5px 30px rgba(10, 31, 68, 0.1);\\n border: 2px solid rgba(212, 175, 55, 0.2);\\n }\\n \\n .bifa-card-content {\\n gap: 50px;\\n }\\n}\\n\\n@media (max-width: 868px) {\\n .bifa-president-block {\\n padding: 60px 0;\\n }\\n \\n .bifa-card-content {\\n grid-template-columns: 1fr;\\n text-align: center;\\n gap: 40px;\\n }\\n \\n .bifa-president-photo {\\n margin: 0 auto;\\n }\\n \\n .bifa-president-actions {\\n justify-content: center;\\n }\\n \\n .bifa-president-badge {\\n margin-left: auto;\\n margin-right: auto;\\n }\\n}\\n\\n@media (max-width: 640px) {\\n .bifa-president-container {\\n padding: 0 20px;\\n }\\n \\n .bifa-president-card {\\n padding: 40px 30px;\\n }\\n \\n .bifa-president-name {\\n font-size: 2.2rem;\\n }\\n \\n .bifa-president-description {\\n font-size: 1.05rem;\\n }\\n \\n .bifa-president-actions {\\n flex-direction: column;\\n width: 100%;\\n gap: 15px;\\n }\\n \\n .bifa-btn {\\n width: 100%;\\n justify-content: center;\\n }\\n \\n .bifa-logo-wrapper {\\n margin: 20px auto 0;\\n }\\n}\\n\\n@media (max-width: 480px) {\\n .bifa-president-block {\\n padding: 50px 0;\\n }\\n \\n .bifa-president-card {\\n padding: 30px 20px;\\n border-radius: var(--radius);\\n background: var(--bright-white);\\n backdrop-filter: blur(10px);\\n box-shadow: 0 5px 30px rgba(10, 31, 68, 0.1);\\n border: 2px solid rgba(212, 175, 55, 0.2);\\n }\\n \\n .bifa-president-photo {\\n width: 220px;\\n height: 220px;\\n }\\n \\n .bifa-president-name {\\n font-size: 1.9rem;\\n margin-bottom: 20px;\\n }\\n \\n .bifa-president-description {\\n font-size: 1rem;\\n margin-bottom: 30px;\\n }\\n \\n .bifa-btn {\\n padding: 12px 24px;\\n font-size: 0.9rem;\\n }\\n \\n .bifa-logo-wrapper {\\n width: 70px;\\n height: 70px;\\n }\\n \\n .bifa-logo-img {\\n width: 70px;\\n height: 70px;\\n }\\n}\\n<\\\/style>\\n<\\\/head>\\n<body>\\n\\n\\n<\/p>\n<div class=\"\\\"bifa-president-block\\\"\">\\n \\n <\/p>\n<div class=\"\\\"president-particles\\\"\">\\n <\/p>\n<div class=\"\\\"president-particle\\\"\" style=\"\\\"left:10%;\" top:20%; animation-delay:0s\\\"><\\\/div>\\n <\/p>\n<div class=\"\\\"president-particle\\\"\" style=\"\\\"left:30%;\" top:60%; animation-delay:2s\\\"><\\\/div>\\n <\/p>\n<div class=\"\\\"president-particle\\\"\" style=\"\\\"left:50%;\" top:30%; animation-delay:4s\\\"><\\\/div>\\n <\/p>\n<div class=\"\\\"president-particle\\\"\" style=\"\\\"left:70%;\" top:70%; animation-delay:6s\\\"><\\\/div>\\n <\/p>\n<div class=\"\\\"president-particle\\\"\" style=\"\\\"left:90%;\" top:40%; animation-delay:8s\\\"><\\\/div>\\n <\/p>\n<div class=\"\\\"president-particle\\\"\" style=\"\\\"left:20%;\" top:80%; animation-delay:3s\\\"><\\\/div>\\n <\/p>\n<div class=\"\\\"president-particle\\\"\" style=\"\\\"left:80%;\" top:10%; animation-delay:5s\\\"><\\\/div>\\n <\/p>\n<div class=\"\\\"president-particle\\\"\" style=\"\\\"left:40%;\" top:90%; animation-delay:7s\\\"><\\\/div>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"bifa-gold-accent\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-gold-accent\\\"\"><\\\/div>\\n \\n <\/p>\n<div class=\"\\\"president-content-wrapper\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-president-container\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-president-card\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-card-content\\\"\">\\n \\n <\/p>\n<div class=\"\\\"bifa-president-photo\\\"\">\\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 \\n \\n <\/p>\n<div class=\"\\\"bifa-president-info\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-president-badge\\\"\">\\n <svg class=\"\\\"bifa-badge-icon\\\"\" viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"currentColor\\\"\">\\n <path d=\"\\\"M12\" 2l3.09 6.26l22 9.27l-5 4.87 1.18 6.88l12 17.77l-6.18 3.25l7 14.14 2 9.27l6.91-1.01l12 2z\\\"\\>\\n <\\\/svg>\\n <span class=\"\\\"bifa-badge-text\\\"\">Founder & President<\\\/span>\\n <\\\/div>\\n \\n <\/p>\n<h2 class=\"\\\"bifa-president-name\\\"\">Dr. Salim Humaid Almazaini<\\\/h2>\\n \\n <\/p>\n<div class=\"\\\"bifa-president-description\\\"\">\\n <\/p>\n<p>\\n A distinguished <span class=\"\\\"bifa-highlight\\\"\">visionary leader<\\\/span> in international sports diplomacy. Through strategic innovation and unwavering commitment, Dr. Almazaini transforms global football <span class=\"\\\"bifa-highlight\\\"\">into a powerful bridge for unity and cooperation<\\\/span> between nations.\\n <\\\/p>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"bifa-president-actions\\\"\">\\n <a href=\"\\\"https:\\\/\\\/bifa.ai\\\/about\\\/#founder\\\"\" class=\"\\\"bifa-btn\" bifa-btn-gold\\\">\\n <span>Discover Story<\\\/span>\\n <svg class=\"\\\"bifa-btn-icon\\\"\" viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\" stroke=\"\\\"currentColor\\\"\" stroke-width=\"\\\"2\\\"\" stroke-linecap=\"\\\"round\\\"\" stroke-linejoin=\"\\\"round\\\"\">\\n <path d=\"\\\"M5\" 12h14m12 5l7 7-7 7\\\"\\>\\n <\\\/svg>\\n <\\\/a>\\n \\n <a href=\"\\\"https:\\\/\\\/bifa.ai\\\/about\\\/\\\"\" class=\"\\\"bifa-btn\" bifa-btn-outline\\\">\\n <span>About BIFA<\\\/span>\\n <svg class=\"\\\"bifa-btn-icon\\\"\" viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\" stroke=\"\\\"currentColor\\\"\" stroke-width=\"\\\"2\\\"\" stroke-linecap=\"\\\"round\\\"\" stroke-linejoin=\"\\\"round\\\"\">\\n <circle cx=\"\\\"12\\\"\" cy=\"\\\"12\\\"\" r=\"\\\"10\\\"\\\/\">\\n <path d=\"\\\"M12\" 6v6l4 2\\\"\\>\\n <\\\/svg>\\n <\\\/a>\\n \\n <\/p>\n<div class=\"\\\"bifa-logo-wrapper\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-logo-bg\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-logo-img\\\"\" role=\"\\\"img\\\"\" aria-label=\"\\\"BIFA\" logo\\\"><\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n<\\\/div>\\n\\n<script>\\n\\\/\\\/ BIFA President Block Interactions\\n(function() {\\n \\\/\\\/ Smooth reveal animation on scroll\\n const observerOptions = {\\n threshold: 0.2,\\n rootMargin: '0px 0px -50px 0px'\\n };\\n\\n const observer = new IntersectionObserver((entries) => {\\n entries.forEach(entry => {\\n if (entry.isIntersecting) {\\n entry.target.style.animationPlayState = 'running';\\n observer.unobserve(entry.target);\\n }\\n });\\n }, observerOptions);\\n\\n \\\/\\\/ Observe animated elements\\n const animatedElements = document.querySelectorAll('.bifa-president-card, .bifa-president-photo');\\n animatedElements.forEach(el => {\\n if (el) {\\n el.style.animationPlayState = 'paused';\\n observer.observe(el);\\n }\\n });\\n\\n \\\/\\\/ Button hover effects\\n const buttons = document.querySelectorAll('.bifa-btn');\\n buttons.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.3) 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 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 \\\/\\\/ Image loading effect\\n const presidentImg = document.querySelector('.bifa-president-photo img');\\n if (presidentImg) {\\n presidentImg.style.opacity = '0';\\n presidentImg.style.transition = 'opacity 0.6s ease';\\n \\n if (presidentImg.complete) {\\n presidentImg.style.opacity = '1';\\n } else {\\n presidentImg.addEventListener('load', function() {\\n this.style.opacity = '1';\\n });\\n }\\n }\\n\\n \\\/\\\/ Preload images\\n const imagesToPreload = [\\n '\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/logo_bifa.svg',\\n '\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Mr\\\/main-photo.jpg'\\n ];\\n \\n imagesToPreload.forEach(url => {\\n const img = new Image();\\n img.src = url;\\n });\\n})();\\n<\\\/script>\\n\\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+ Premium Gallery Block<\\\/title>\\n <link rel=\"\\\"preconnect\\\"\" href=\"\\\"https:\\\/\\\/fonts.googleapis.com\\\"\">\\n <link rel=\"\\\"preconnect\\\"\" href=\"\\\"https:\\\/\\\/fonts.gstatic.com\\\"\" crossorigin>\\n \\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&family=Cairo:wght@300;400;500;600;700;800&family=Tajawal:wght@300;400;500;700;800&display=swap\\\"\" rel=\"\\\"stylesheet\\\"\">\\n\\n<\/p>\n<style>\\n\\\/* ========= \\u0413\\u041b\\u041e\\u0411\\u0410\\u041b\\u042c\\u041d\\u042b\\u0415 \\u041f\\u0415\\u0420\\u0415\\u041c\\u0415\\u041d\\u041d\\u042b\\u0415 BIFA+ ========= *\\\/\\n:root {\\n \\\/* \\u041e\\u0444\\u0438\\u0446\\u0438\\u0430\\u043b\\u044c\\u043d\\u044b\\u0435 \\u0446\\u0432\\u0435\\u0442\\u0430 BIFA+ *\\\/\\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 --bifa-gray-light: #F8F9FA;\\n --bifa-gray: #6C757D;\\n \\n \\\/* \\u041e\\u0444\\u0438\\u0446\\u0438\\u0430\\u043b\\u044c\\u043d\\u044b\\u0435 \\u0448\\u0440\\u0438\\u0444\\u0442\\u044b BIFA+ *\\\/\\n --bifa-font-heading: 'Montserrat', 'Cairo', sans-serif;\\n --bifa-font-body: 'Poppins', 'Tajawal', sans-serif;\\n --bifa-font-arabic: 'Cairo', 'Tajawal', 'GE SS Text', sans-serif;\\n \\n \\\/* \\u041f\\u0440\\u0435\\u043c\\u0438\\u0430\\u043b\\u044c\\u043d\\u044b\\u0435 \\u0442\\u0435\\u043d\\u0438 \\u0438 \\u044d\\u0444\\u0444\\u0435\\u043a\\u0442\\u044b *\\\/\\n --bifa-shadow-premium: 0 25px 80px rgba(10, 31, 68, 0.15);\\n --bifa-shadow-hover: 0 35px 100px rgba(10, 31, 68, 0.2);\\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\\n\\\/* ========= RESET ========= *\\\/\\n* {\\n margin: 0;\\n padding: 0;\\n box-sizing: border-box;\\n}\\n\\nbody {\\n font-family: var(--bifa-font-body);\\n background: var(--bifa-bright-white);\\n overflow-x: hidden;\\n color: var(--bifa-soft-black);\\n}\\n\\n\\\/* ========= GALLERY SECTION WRAPPER ========= *\\\/\\n.bifa-gallery-section-wrapper {\\n width: 100vw;\\n position: relative;\\n left: 50%;\\n margin-left: -50vw;\\n background: transparent; \\\/* \\u0411\\u0435\\u0437 \\u0444\\u043e\\u043d\\u0430 *\\\/\\n overflow: hidden;\\n}\\n\\n\\\/* ========= MAIN GALLERY SECTION ========= *\\\/\\n.bifa-gallery-section {\\n min-height: auto;\\n padding: 60px 0 80px 0;\\n position: relative;\\n background: transparent;\\n}\\n\\n\\\/* ========= ANIMATED BACKGROUND ELEMENTS ========= *\\\/\\n.bifa-gallery-bg-animation {\\n position: absolute;\\n width: 100%;\\n height: 100%;\\n overflow: hidden;\\n z-index: 1;\\n top: 0;\\n left: 0;\\n}\\n\\n\\\/* \\u0417\\u043e\\u043b\\u043e\\u0442\\u044b\\u0435 \\u0447\\u0430\\u0441\\u0442\\u0438\\u0446\\u044b BIFA+ *\\\/\\n.bifa-gallery-particle {\\n position: absolute;\\n width: 4px;\\n height: 4px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n border-radius: 50%;\\n animation: floatGallery 18s infinite linear;\\n box-shadow: 0 0 8px rgba(212, 175, 55, 0.3);\\n opacity: 0.3;\\n will-change: transform;\\n}\\n\\n@keyframes floatGallery {\\n 0% {\\n transform: translateY(100vh) translateX(0) rotate(0deg);\\n opacity: 0;\\n }\\n 10% { opacity: 0.4; }\\n 90% { opacity: 0.4; }\\n 100% {\\n transform: translateY(-100vh) translateX(60px) rotate(360deg);\\n opacity: 0;\\n }\\n}\\n\\n\\\/* \\u041f\\u043b\\u0430\\u0432\\u0430\\u044e\\u0449\\u0438\\u0435 \\u0433\\u0435\\u043e\\u043c\\u0435\\u0442\\u0440\\u0438\\u0447\\u0435\\u0441\\u043a\\u0438\\u0435 \\u0444\\u0438\\u0433\\u0443\\u0440\\u044b BIFA+ *\\\/\\n.bifa-floating-shape {\\n position: absolute;\\n border-radius: 50%;\\n filter: blur(100px);\\n animation: morphFloatGallery 22s ease-in-out infinite;\\n pointer-events: none;\\n opacity: 0.4;\\n}\\n\\n.bifa-shape-gallery-1 {\\n width: 350px;\\n height: 350px;\\n background: radial-gradient(circle at 30% 30%, rgba(212, 175, 55, 0.08), transparent);\\n top: -175px;\\n right: -175px;\\n}\\n\\n.bifa-shape-gallery-2 {\\n width: 300px;\\n height: 300px;\\n background: radial-gradient(circle at 70% 70%, rgba(10, 31, 68, 0.06), transparent);\\n bottom: -150px;\\n left: -150px;\\n animation-delay: 7s;\\n}\\n\\n.bifa-shape-gallery-3 {\\n width: 250px;\\n height: 250px;\\n background: radial-gradient(circle at 50% 50%, rgba(29, 97, 67, 0.07), transparent);\\n top: 40%;\\n left: 60%;\\n animation-delay: 14s;\\n}\\n\\n@keyframes morphFloatGallery {\\n 0%, 100% { \\n transform: translate(0, 0) scale(1) rotate(0deg);\\n filter: blur(100px);\\n }\\n 25% { \\n transform: translate(80px, -60px) scale(1.2) rotate(90deg);\\n filter: blur(120px);\\n }\\n 50% { \\n transform: translate(-60px, 80px) scale(0.8) rotate(180deg);\\n filter: blur(80px);\\n }\\n 75% { \\n transform: translate(-80px, -40px) scale(1.1) rotate(270deg);\\n filter: blur(110px);\\n }\\n}\\n\\n\\\/* ========= CONTAINER ========= *\\\/\\n.bifa-gallery-container {\\n max-width: 1400px;\\n margin: 0 auto;\\n padding: 0 20px;\\n position: relative;\\n z-index: 10;\\n}\\n\\n\\\/* ========= SECTION HEADER - Premium Style ========= *\\\/\\n.bifa-gallery-section-header {\\n text-align: center;\\n margin-bottom: 70px;\\n animation: fadeInDown 1.2s ease;\\n}\\n\\n.bifa-gallery-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), #ffd700);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n margin-bottom: 15px;\\n text-transform: uppercase;\\n position: relative;\\n display: inline-block;\\n cursor: pointer;\\n transition: all 0.3s ease;\\n}\\n\\n.bifa-gallery-section-title::after {\\n content: '';\\n position: absolute;\\n bottom: -10px;\\n left: 50%;\\n transform: translateX(-50%);\\n width: 0;\\n height: 3px;\\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700);\\n transition: width 0.4s ease;\\n}\\n\\n.bifa-gallery-section-title:hover {\\n transform: translateY(-3px);\\n filter: drop-shadow(0 10px 20px rgba(212, 175, 55, 0.3));\\n}\\n\\n.bifa-gallery-section-title:hover::after {\\n width: 100%;\\n}\\n\\n.bifa-gallery-section-subtitle {\\n font-family: var(--bifa-font-heading);\\n font-size: clamp(1.1rem, 2vw, 1.5rem);\\n color: var(--bifa-deep-navy);\\n font-weight: 600;\\n letter-spacing: 1.5px;\\n margin-bottom: 15px;\\n opacity: 0;\\n animation: fadeInUp 1.2s ease 0.3s forwards;\\n}\\n\\n.bifa-gallery-section-description {\\n max-width: 800px;\\n margin: 0 auto;\\n font-family: var(--bifa-font-body);\\n font-size: clamp(0.95rem, 1.3vw, 1.1rem);\\n line-height: 1.7;\\n color: #4a5568;\\n opacity: 0;\\n animation: fadeInUp 1.2s ease 0.6s forwards;\\n}\\n\\n\\\/* ========= MAIN GALLERY - Premium Design ========= *\\\/\\n.bifa-gallery-main {\\n position: relative;\\n max-width: 1000px;\\n margin: 0 auto 50px;\\n border-radius: 25px;\\n overflow: hidden;\\n box-shadow: var(--bifa-shadow-premium);\\n animation: fadeInUp 1.2s ease 0.4s forwards;\\n background: white;\\n opacity: 0;\\n border: 1px solid rgba(212, 175, 55, 0.1);\\n}\\n\\n.bifa-gallery-slider {\\n position: relative;\\n height: 600px;\\n background: var(--bifa-gray-light);\\n overflow: hidden;\\n}\\n\\n.bifa-slide {\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n opacity: 0;\\n transition: opacity 1s ease-in-out;\\n}\\n\\n.bifa-slide.active {\\n opacity: 1;\\n}\\n\\n.bifa-slide img {\\n width: 100%;\\n height: 100%;\\n object-fit: cover;\\n transition: transform 0.3s ease;\\n}\\n\\n.bifa-slide:hover img {\\n transform: scale(1.05);\\n}\\n\\n.bifa-slide-caption {\\n position: absolute;\\n bottom: 0;\\n left: 0;\\n right: 0;\\n background: linear-gradient(to top, \\n rgba(10, 31, 68, 0.95) 0%, \\n rgba(10, 31, 68, 0.8) 50%,\\n transparent 100%\\n );\\n padding: 50px 40px;\\n color: white;\\n}\\n\\n.bifa-slide-title {\\n font-family: var(--bifa-font-heading);\\n font-size: 1.8rem;\\n font-weight: 800;\\n margin-bottom: 12px;\\n color: var(--bifa-bright-white);\\n text-shadow: 0 2px 4px rgba(0,0,0,0.3);\\n}\\n\\n.bifa-slide-desc {\\n font-family: var(--bifa-font-body);\\n font-size: 1.1rem;\\n color: rgba(255, 255, 255, 0.9);\\n line-height: 1.6;\\n}\\n\\n\\\/* ========= NAVIGATION ARROWS - Premium Style ========= *\\\/\\n.bifa-gallery-nav {\\n position: absolute;\\n top: 50%;\\n transform: translateY(-50%);\\n background: rgba(255, 255, 255, 0.95);\\n backdrop-filter: blur(15px);\\n border: 2px solid rgba(212, 175, 55, 0.3);\\n width: 55px;\\n height: 55px;\\n border-radius: 50%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n cursor: pointer;\\n transition: var(--bifa-transition);\\n z-index: 20;\\n box-shadow: 0 8px 25px rgba(10, 31, 68, 0.15);\\n}\\n\\n.bifa-gallery-nav:hover {\\n background: var(--bifa-heritage-gold);\\n border-color: var(--bifa-heritage-gold);\\n transform: translateY(-50%) scale(1.1);\\n box-shadow: var(--bifa-shadow-gold);\\n}\\n\\n.bifa-gallery-nav.prev {\\n left: 25px;\\n}\\n\\n.bifa-gallery-nav.next {\\n right: 25px;\\n}\\n\\n.bifa-gallery-nav::before {\\n content: '';\\n width: 14px;\\n height: 14px;\\n border-top: 3px solid var(--bifa-deep-navy);\\n border-right: 3px solid var(--bifa-deep-navy);\\n transition: border-color 0.3s ease;\\n}\\n\\n.bifa-gallery-nav:hover::before {\\n border-color: var(--bifa-bright-white);\\n}\\n\\n.bifa-gallery-nav.prev::before {\\n transform: rotate(-135deg);\\n margin-left: 4px;\\n}\\n\\n.bifa-gallery-nav.next::before {\\n transform: rotate(45deg);\\n margin-right: 4px;\\n}\\n\\n\\\/* ========= DOTS NAVIGATION - Premium Style ========= *\\\/\\n.bifa-gallery-dots {\\n position: absolute;\\n bottom: 25px;\\n left: 50%;\\n transform: translateX(-50%);\\n display: flex;\\n gap: 12px;\\n z-index: 20;\\n}\\n\\n.bifa-dot {\\n width: 14px;\\n height: 14px;\\n border-radius: 50%;\\n background: rgba(255, 255, 255, 0.6);\\n cursor: pointer;\\n transition: var(--bifa-transition);\\n border: 2px solid transparent;\\n backdrop-filter: blur(10px);\\n}\\n\\n.bifa-dot.active {\\n background: var(--bifa-heritage-gold);\\n transform: scale(1.3);\\n border-color: rgba(255, 255, 255, 0.8);\\n box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);\\n}\\n\\n.bifa-dot:hover {\\n background: rgba(255, 255, 255, 0.9);\\n transform: scale(1.1);\\n}\\n\\n\\\/* ========= PLAY\\\/PAUSE CONTROL - Premium Style ========= *\\\/\\n.bifa-gallery-controls {\\n position: absolute;\\n top: 25px;\\n right: 25px;\\n z-index: 20;\\n}\\n\\n.bifa-play-pause-btn {\\n background: rgba(255, 255, 255, 0.95);\\n backdrop-filter: blur(15px);\\n border: 2px solid rgba(212, 175, 55, 0.3);\\n width: 55px;\\n height: 55px;\\n border-radius: 50%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n cursor: pointer;\\n transition: var(--bifa-transition);\\n box-shadow: 0 8px 25px rgba(10, 31, 68, 0.15);\\n outline: none;\\n}\\n\\n.bifa-play-pause-btn:hover {\\n background: var(--bifa-heritage-gold);\\n border-color: var(--bifa-heritage-gold);\\n transform: scale(1.1);\\n box-shadow: var(--bifa-shadow-gold);\\n}\\n\\n.bifa-play-pause-btn::before {\\n content: '';\\n width: 0;\\n height: 0;\\n border-left: 16px solid var(--bifa-deep-navy);\\n border-top: 12px solid transparent;\\n border-bottom: 12px solid transparent;\\n margin-left: 3px;\\n transition: all 0.3s ease;\\n}\\n\\n.bifa-play-pause-btn:hover::before {\\n border-left-color: var(--bifa-bright-white);\\n}\\n\\n.bifa-play-pause-btn.playing::before {\\n width: 22px;\\n height: 22px;\\n border: none;\\n background: linear-gradient(to right, \\n var(--bifa-deep-navy) 35%, \\n transparent 35%, \\n transparent 65%, \\n var(--bifa-deep-navy) 65%\\n );\\n margin-left: 0;\\n}\\n\\n.bifa-play-pause-btn.playing:hover::before {\\n background: linear-gradient(to right, \\n var(--bifa-bright-white) 35%, \\n transparent 35%, \\n transparent 65%, \\n var(--bifa-bright-white) 65%\\n );\\n}\\n\\n\\\/* ========= THUMBNAILS - Premium Grid ========= *\\\/\\n.bifa-gallery-thumbs {\\n display: grid;\\n grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\\n gap: 20px;\\n margin-top: 40px;\\n animation: fadeInUp 1.2s ease 0.7s forwards;\\n opacity: 0;\\n}\\n\\n.bifa-thumb-item {\\n position: relative;\\n height: 140px;\\n border-radius: 20px;\\n overflow: hidden;\\n cursor: pointer;\\n transition: var(--bifa-transition);\\n box-shadow: 0 8px 25px rgba(10, 31, 68, 0.1);\\n background: white;\\n border: 3px solid transparent;\\n}\\n\\n.bifa-thumb-item:hover {\\n transform: translateY(-8px);\\n box-shadow: 0 15px 40px rgba(10, 31, 68, 0.2);\\n border-color: rgba(212, 175, 55, 0.3);\\n}\\n\\n.bifa-thumb-item.active {\\n border-color: var(--bifa-heritage-gold);\\n box-shadow: var(--bifa-shadow-gold);\\n transform: translateY(-5px);\\n}\\n\\n.bifa-thumb-item img {\\n width: 100%;\\n height: 100%;\\n object-fit: cover;\\n transition: transform 0.3s ease;\\n}\\n\\n.bifa-thumb-item:hover img {\\n transform: scale(1.1);\\n}\\n\\n\\\/* Overlay effect for thumbnails *\\\/\\n.bifa-thumb-item::before {\\n content: '';\\n position: absolute;\\n inset: 0;\\n background: linear-gradient(135deg, \\n transparent 0%, \\n rgba(212, 175, 55, 0.1) 100%\\n );\\n opacity: 0;\\n transition: opacity 0.3s ease;\\n z-index: 1;\\n}\\n\\n.bifa-thumb-item:hover::before {\\n opacity: 1;\\n}\\n\\n.bifa-thumb-item.active::before {\\n background: linear-gradient(135deg, \\n rgba(212, 175, 55, 0.2) 0%, \\n rgba(212, 175, 55, 0.05) 100%\\n );\\n opacity: 1;\\n}\\n\\n\\\/* ========= ANIMATIONS ========= *\\\/\\n@keyframes fadeInDown {\\n from {\\n opacity: 0;\\n transform: translateY(-40px);\\n }\\n to {\\n opacity: 1;\\n transform: translateY(0);\\n }\\n}\\n\\n@keyframes fadeInUp {\\n from {\\n opacity: 0;\\n transform: translateY(40px);\\n }\\n to {\\n opacity: 1;\\n transform: translateY(0);\\n }\\n}\\n\\n\\\/* ========= RESPONSIVE ========= *\\\/\\n@media (max-width: 1024px) {\\n .bifa-gallery-thumbs {\\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\\n gap: 15px;\\n }\\n \\n .bifa-thumb-item {\\n height: 120px;\\n }\\n}\\n\\n@media (max-width: 768px) {\\n .bifa-gallery-section {\\n padding: 50px 0 60px 0;\\n }\\n \\n .bifa-gallery-container {\\n padding: 0 15px;\\n }\\n \\n .bifa-gallery-slider {\\n height: 400px;\\n }\\n \\n .bifa-slide-caption {\\n padding: 30px 25px;\\n }\\n \\n .bifa-slide-title {\\n font-size: 1.5rem;\\n }\\n \\n .bifa-gallery-nav {\\n width: 45px;\\n height: 45px;\\n }\\n \\n .bifa-play-pause-btn {\\n width: 45px;\\n height: 45px;\\n }\\n \\n .bifa-gallery-thumbs {\\n grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\\n gap: 12px;\\n margin-top: 30px;\\n }\\n \\n .bifa-thumb-item {\\n height: 100px;\\n }\\n}\\n\\n@media (max-width: 480px) {\\n .bifa-gallery-section {\\n padding: 40px 0 50px 0;\\n }\\n \\n .bifa-gallery-slider {\\n height: 300px;\\n }\\n \\n .bifa-gallery-section-title {\\n font-size: 2rem;\\n }\\n \\n .bifa-gallery-section-subtitle {\\n font-size: 1.1rem;\\n letter-spacing: 1px;\\n }\\n \\n .bifa-gallery-nav {\\n display: none; \\\/* \\u0421\\u043a\\u0440\\u044b\\u0432\\u0430\\u0435\\u043c \\u0441\\u0442\\u0440\\u0435\\u043b\\u043a\\u0438 \\u043d\\u0430 \\u043e\\u0447\\u0435\\u043d\\u044c \\u043c\\u0430\\u043b\\u0435\\u043d\\u044c\\u043a\\u0438\\u0445 \\u044d\\u043a\\u0440\\u0430\\u043d\\u0430\\u0445 *\\\/\\n }\\n \\n .bifa-slide-caption {\\n padding: 25px 20px;\\n }\\n \\n .bifa-slide-title {\\n font-size: 1.3rem;\\n }\\n \\n .bifa-slide-desc {\\n font-size: 1rem;\\n }\\n \\n .bifa-gallery-thumbs {\\n grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));\\n gap: 10px;\\n }\\n \\n .bifa-thumb-item {\\n height: 80px;\\n }\\n}\\n<\\\/style>\\n<\\\/head>\\n<body>\\n\\n<\/p>\n<div class=\"\\\"bifa-gallery-section-wrapper\\\"\">\\n \\n <\/p>\n<section class=\"\\\"bifa-gallery-section\\\"\">\\n \\n <\/p>\n<div class=\"\\\"bifa-gallery-bg-animation\\\"\">\\n \\n <\/p>\n<div class=\"\\\"bifa-floating-shape\" bifa-shape-gallery-1\\\"><\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-floating-shape\" bifa-shape-gallery-2\\\"><\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-floating-shape\" bifa-shape-gallery-3\\\"><\\\/div>\\n \\n <\\\/div>\\n\\n <\/p>\n<div class=\"\\\"bifa-gallery-container\\\"\">\\n \\n <\/p>\n<div class=\"\\\"bifa-gallery-section-header\\\"\">\\n <\/p>\n<h2 class=\"\\\"bifa-gallery-section-title\\\"\">BIFA+ Gallery<\\\/h2>\\n <\/p>\n<p class=\"\\\"bifa-gallery-section-subtitle\\\"\">Captivating Moments<\\\/p>\\n <\/p>\n<p class=\"\\\"bifa-gallery-section-description\\\"\">\\n Discover the most inspiring moments from BIFA+ events and activities that showcase the power of football in uniting nations and building communities.\\n <\\\/p>\\n <\\\/div>\\n\\n \\n <\/p>\n<div class=\"\\\"bifa-gallery-main\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-gallery-slider\\\"\">\\n \\n <\/p>\n<div class=\"\\\"bifa-slide\" active\\\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Moments\\\/1.jpg?v=2\\\"\" alt=\"\\\"BIFA+\" victory moment\\\">\\n <\/p>\n<div class=\"\\\"bifa-slide-caption\\\"\">\\n <\/p>\n<h3 class=\"\\\"bifa-slide-title\\\"\">Victory Celebration<\\\/h3>\\n <\/p>\n<p class=\"\\\"bifa-slide-desc\\\"\">Team emotions and unity after achieving remarkable success on the international stage<\\\/p>\\n <\\\/div>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"bifa-slide\\\"\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Moments\\\/2.jpg?v=2\\\"\" alt=\"\\\"BIFA+\" team spirit\\\">\\n <\/p>\n<div class=\"\\\"bifa-slide-caption\\\"\">\\n <\/p>\n<h3 class=\"\\\"bifa-slide-title\\\"\">Team Spirit<\\\/h3>\\n <\/p>\n<p class=\"\\\"bifa-slide-desc\\\"\">Showcasing the incredible bond and unity that defines BIFA+ community<\\\/p>\\n <\\\/div>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"bifa-slide\\\"\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Moments\\\/3.jpg?v=2\\\"\" alt=\"\\\"BIFA+\" young talents\\\">\\n <\/p>\n<div class=\"\\\"bifa-slide-caption\\\"\">\\n <\/p>\n<h3 class=\"\\\"bifa-slide-title\\\"\">Future Champions<\\\/h3>\\n <\/p>\n<p class=\"\\\"bifa-slide-desc\\\"\">Nurturing the next generation of football talents at BIFA+ Academy programs<\\\/p>\\n <\\\/div>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"bifa-slide\\\"\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Moments\\\/4.jpg?v=2\\\"\" alt=\"\\\"BIFA+\" stadium\\\">\\n <\/p>\n<div class=\"\\\"bifa-slide-caption\\\"\">\\n <\/p>\n<h3 class=\"\\\"bifa-slide-title\\\"\">World-Class Venues<\\\/h3>\\n <\/p>\n<p class=\"\\\"bifa-slide-desc\\\"\">Modern stadiums and facilities that host unforgettable football experiences<\\\/p>\\n <\\\/div>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"bifa-gallery-nav\" prev\\\"><\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-gallery-nav\" next\\\"><\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"bifa-gallery-dots\\\"\">\\n <span class=\"\\\"bifa-dot\" active\\\" data-slide=\"\\\"0\\\"\"><\\\/span>\\n <span class=\"\\\"bifa-dot\\\"\" data-slide=\"\\\"1\\\"\"><\\\/span>\\n <span class=\"\\\"bifa-dot\\\"\" data-slide=\"\\\"2\\\"\"><\\\/span>\\n <span class=\"\\\"bifa-dot\\\"\" data-slide=\"\\\"3\\\"\"><\\\/span>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"bifa-gallery-controls\\\"\">\\n <button class=\"\\\"bifa-play-pause-btn\" playing\\\" aria-label=\"\\\"Play\\\/Pause\" gallery\\\"><\\\/button>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"bifa-gallery-thumbs\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-thumb-item\" active\\\" data-slide=\"\\\"0\\\"\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Moments\\\/1.jpg?v=2\\\"\" alt=\"\\\"Victory\" thumbnail\\\">\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-thumb-item\\\"\" data-slide=\"\\\"1\\\"\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Moments\\\/2.jpg?v=2\\\"\" alt=\"\\\"Team\" spirit thumbnail\\\">\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-thumb-item\\\"\" data-slide=\"\\\"2\\\"\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Moments\\\/3.jpg?v=2\\\"\" alt=\"\\\"Young\" talents thumbnail\\\">\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-thumb-item\\\"\" data-slide=\"\\\"3\\\"\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Moments\\\/4.jpg?v=2\\\"\" alt=\"\\\"Stadium\" thumbnail\\\">\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/section>\\n<\\\/div>\\n\\n<script>\\n\\\/\\\/ BIFA+ Premium Gallery Module\\nconst BifaGallery = {\\n \\\/\\\/ Configuration\\n config: {\\n currentSlide: 0,\\n isPlaying: true,\\n slideInterval: null,\\n autoplayDelay: 5000\\n },\\n\\n \\\/\\\/ Initialize\\n init() {\\n this.createParticles();\\n this.setupEventListeners();\\n this.startSlideshow();\\n this.preloadImages();\\n },\\n\\n \\\/\\\/ Create golden particles\\n createParticles() {\\n const particlesContainer = document.querySelector('.bifa-gallery-bg-animation');\\n const particleCount = 8; \\\/\\\/ \\u041c\\u0435\\u043d\\u044c\\u0448\\u0435 \\u0447\\u0430\\u0441\\u0442\\u0438\\u0446 \\u0434\\u043b\\u044f \\u0431\\u043e\\u043b\\u0435\\u0435 \\u0447\\u0438\\u0441\\u0442\\u043e\\u0433\\u043e \\u0432\\u0438\\u0434\\u0430\\n\\n for (let i = 0; i < particleCount; i++) {\\n const particle = document.createElement('div');\\n particle.className = 'bifa-gallery-particle';\\n particle.style.left = Math.random() * 100 + '%';\\n particle.style.animationDelay = Math.random() * 16 + 's';\\n particle.style.animationDuration = (14 + Math.random() * 6) + 's';\\n \\n const size = 4 + Math.random() * 2;\\n particle.style.width = size + 'px';\\n particle.style.height = size + 'px';\\n \\n particlesContainer.appendChild(particle);\\n }\\n },\\n\\n \\\/\\\/ Setup event listeners\\n setupEventListeners() {\\n const slides = document.querySelectorAll('.bifa-slide');\\n const dots = document.querySelectorAll('.bifa-dot');\\n const thumbs = document.querySelectorAll('.bifa-thumb-item');\\n const prevBtn = document.querySelector('.bifa-gallery-nav.prev');\\n const nextBtn = document.querySelector('.bifa-gallery-nav.next');\\n const playPauseBtn = document.querySelector('.bifa-play-pause-btn');\\n const gallerySlider = document.querySelector('.bifa-gallery-slider');\\n\\n \\\/\\\/ Navigation buttons\\n if (prevBtn) {\\n prevBtn.addEventListener('click', () => {\\n this.prevSlide();\\n this.restartAutoplay();\\n });\\n }\\n\\n if (nextBtn) {\\n nextBtn.addEventListener('click', () => {\\n this.nextSlide();\\n this.restartAutoplay();\\n });\\n }\\n\\n \\\/\\\/ Play\\\/Pause button\\n if (playPauseBtn) {\\n playPauseBtn.addEventListener('click', () => {\\n this.togglePlayPause();\\n });\\n }\\n\\n \\\/\\\/ Dot navigation\\n dots.forEach((dot, index) => {\\n dot.addEventListener('click', () => {\\n this.showSlide(index);\\n this.restartAutoplay();\\n });\\n });\\n\\n \\\/\\\/ Thumbnail navigation\\n thumbs.forEach((thumb, index) => {\\n thumb.addEventListener('click', () => {\\n this.showSlide(index);\\n this.restartAutoplay();\\n });\\n });\\n\\n \\\/\\\/ Pause on hover\\n if (gallerySlider) {\\n gallerySlider.addEventListener('mouseenter', () => {\\n if (this.config.isPlaying) this.stopSlideshow();\\n });\\n\\n gallerySlider.addEventListener('mouseleave', () => {\\n if (!this.config.isPlaying) this.startSlideshow();\\n });\\n }\\n\\n \\\/\\\/ Touch support\\n this.setupTouchNavigation(gallerySlider);\\n\\n \\\/\\\/ Keyboard support\\n this.setupKeyboardNavigation();\\n },\\n\\n \\\/\\\/ Show specific slide\\n showSlide(index) {\\n const slides = document.querySelectorAll('.bifa-slide');\\n const dots = document.querySelectorAll('.bifa-dot');\\n const thumbs = document.querySelectorAll('.bifa-thumb-item');\\n\\n \\\/\\\/ Remove active classes\\n slides.forEach(slide => slide.classList.remove('active'));\\n dots.forEach(dot => dot.classList.remove('active'));\\n thumbs.forEach(thumb => thumb.classList.remove('active'));\\n\\n \\\/\\\/ Add active classes\\n if (slides[index]) slides[index].classList.add('active');\\n if (dots[index]) dots[index].classList.add('active');\\n if (thumbs[index]) thumbs[index].classList.add('active');\\n\\n this.config.currentSlide = index;\\n },\\n\\n \\\/\\\/ Next slide\\n nextSlide() {\\n const slides = document.querySelectorAll('.bifa-slide');\\n const nextIndex = (this.config.currentSlide + 1) % slides.length;\\n this.showSlide(nextIndex);\\n },\\n\\n \\\/\\\/ Previous slide\\n prevSlide() {\\n const slides = document.querySelectorAll('.bifa-slide');\\n const prevIndex = (this.config.currentSlide - 1 + slides.length) % slides.length;\\n this.showSlide(prevIndex);\\n },\\n\\n \\\/\\\/ Start slideshow\\n startSlideshow() {\\n this.config.slideInterval = setInterval(() => {\\n this.nextSlide();\\n }, this.config.autoplayDelay);\\n this.config.isPlaying = true;\\n \\n const playPauseBtn = document.querySelector('.bifa-play-pause-btn');\\n if (playPauseBtn) playPauseBtn.classList.add('playing');\\n },\\n\\n \\\/\\\/ Stop slideshow\\n stopSlideshow() {\\n if (this.config.slideInterval) {\\n clearInterval(this.config.slideInterval);\\n this.config.slideInterval = null;\\n }\\n this.config.isPlaying = false;\\n \\n const playPauseBtn = document.querySelector('.bifa-play-pause-btn');\\n if (playPauseBtn) playPauseBtn.classList.remove('playing');\\n },\\n\\n \\\/\\\/ Toggle play\\\/pause\\n togglePlayPause() {\\n if (this.config.isPlaying) {\\n this.stopSlideshow();\\n } else {\\n this.startSlideshow();\\n }\\n },\\n\\n \\\/\\\/ Restart autoplay\\n restartAutoplay() {\\n if (this.config.isPlaying) {\\n this.stopSlideshow();\\n this.startSlideshow();\\n }\\n },\\n\\n \\\/\\\/ Setup touch navigation\\n setupTouchNavigation(element) {\\n if (!element) return;\\n\\n let touchStartX = 0;\\n let touchEndX = 0;\\n\\n element.addEventListener('touchstart', (e) => {\\n touchStartX = e.changedTouches[0].screenX;\\n });\\n\\n element.addEventListener('touchend', (e) => {\\n touchEndX = e.changedTouches[0].screenX;\\n this.handleSwipe();\\n });\\n\\n this.handleSwipe = () => {\\n if (touchEndX < touchStartX - 50) {\\n \\\/\\\/ Swipe left - next slide\\n this.nextSlide();\\n this.restartAutoplay();\\n }\\n if (touchEndX > touchStartX + 50) {\\n \\\/\\\/ Swipe right - previous slide\\n this.prevSlide();\\n this.restartAutoplay();\\n }\\n };\\n },\\n\\n \\\/\\\/ Setup keyboard navigation\\n setupKeyboardNavigation() {\\n document.addEventListener('keydown', (e) => {\\n if (e.key === 'ArrowLeft') {\\n this.prevSlide();\\n this.restartAutoplay();\\n } else if (e.key === 'ArrowRight') {\\n this.nextSlide();\\n this.restartAutoplay();\\n } else if (e.key === ' ') {\\n e.preventDefault();\\n this.togglePlayPause();\\n }\\n });\\n },\\n\\n \\\/\\\/ Preload images\\n preloadImages() {\\n const imageUrls = [\\n '\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Moments\\\/1.jpg?v=2',\\n '\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Moments\\\/2.jpg?v=2',\\n '\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Moments\\\/3.jpg?v=2',\\n '\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Moments\\\/4.jpg?v=2'\\n ];\\n\\n imageUrls.forEach(url => {\\n const img = new Image();\\n img.src = url;\\n });\\n }\\n};\\n\\n\\\/\\\/ Initialize when DOM is ready\\ndocument.addEventListener('DOMContentLoaded', () => {\\n BifaGallery.init();\\n});\\n<\\\/script>\\n\\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+ Premium Academy Block<\\\/title>\\n <link rel=\"\\\"preconnect\\\"\" href=\"\\\"https:\\\/\\\/fonts.googleapis.com\\\"\">\\n <link rel=\"\\\"preconnect\\\"\" href=\"\\\"https:\\\/\\\/fonts.gstatic.com\\\"\" crossorigin>\\n \\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&family=Cairo:wght@300;400;500;600;700;800&family=Tajawal:wght@300;400;500;700;800&display=swap\\\"\" rel=\"\\\"stylesheet\\\"\">\\n\\n<\/p>\n<style>\\n\\\/* ========= \\u0413\\u041b\\u041e\\u0411\\u0410\\u041b\\u042c\\u041d\\u042b\\u0415 \\u041f\\u0415\\u0420\\u0415\\u041c\\u0415\\u041d\\u041d\\u042b\\u0415 BIFA+ ========= *\\\/\\n:root {\\n \\\/* \\u041e\\u0444\\u0438\\u0446\\u0438\\u0430\\u043b\\u044c\\u043d\\u044b\\u0435 \\u0446\\u0432\\u0435\\u0442\\u0430 BIFA+ *\\\/\\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 --bifa-gray-light: #F8F9FA;\\n --bifa-gray: #6C757D;\\n \\n \\\/* \\u041e\\u0444\\u0438\\u0446\\u0438\\u0430\\u043b\\u044c\\u043d\\u044b\\u0435 \\u0448\\u0440\\u0438\\u0444\\u0442\\u044b BIFA+ *\\\/\\n --bifa-font-heading: 'Montserrat', 'Cairo', sans-serif;\\n --bifa-font-body: 'Poppins', 'Tajawal', sans-serif;\\n --bifa-font-arabic: 'Cairo', 'Tajawal', 'GE SS Text', sans-serif;\\n \\n \\\/* \\u041f\\u0440\\u0435\\u043c\\u0438\\u0430\\u043b\\u044c\\u043d\\u044b\\u0435 \\u0442\\u0435\\u043d\\u0438 \\u0438 \\u044d\\u0444\\u0444\\u0435\\u043a\\u0442\\u044b *\\\/\\n --bifa-shadow-premium: 0 25px 80px rgba(10, 31, 68, 0.15);\\n --bifa-shadow-hover: 0 35px 100px rgba(10, 31, 68, 0.2);\\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\\n\\\/* ========= RESET ========= *\\\/\\n* {\\n margin: 0;\\n padding: 0;\\n box-sizing: border-box;\\n}\\n\\n*, *::before, *::after {\\n box-sizing: border-box;\\n}\\n\\nhtml {\\n scroll-behavior: smooth;\\n}\\n\\nbody {\\n font-family: var(--bifa-font-body);\\n overflow-x: hidden;\\n background: var(--bifa-bright-white);\\n text-rendering: optimizeLegibility;\\n -webkit-font-smoothing: antialiased;\\n -moz-osx-font-smoothing: grayscale;\\n color: var(--bifa-soft-black);\\n}\\n\\n\\\/* ========= ACADEMY SECTION WRAPPER ========= *\\\/\\n.bifa-academy-section-wrapper {\\n width: 100vw;\\n position: relative;\\n left: 50%;\\n margin-left: -50vw;\\n background: transparent; \\\/* \\u0411\\u0435\\u0437 \\u0444\\u043e\\u043d\\u0430 *\\\/\\n overflow: hidden;\\n}\\n\\n\\\/* ========= MAIN ACADEMY SECTION ========= *\\\/\\n.bifa-academy-section {\\n padding: 100px 20px 80px;\\n position: relative;\\n background: transparent;\\n}\\n\\n\\\/* ========= ANIMATED BACKGROUND ELEMENTS ========= *\\\/\\n.bifa-academy-bg-animation {\\n position: absolute;\\n width: 100%;\\n height: 100%;\\n overflow: hidden;\\n z-index: 1;\\n top: 0;\\n left: 0;\\n}\\n\\n\\\/* \\u0417\\u043e\\u043b\\u043e\\u0442\\u044b\\u0435 \\u0447\\u0430\\u0441\\u0442\\u0438\\u0446\\u044b BIFA+ *\\\/\\n.bifa-academy-particle {\\n position: absolute;\\n width: 3px;\\n height: 3px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n border-radius: 50%;\\n animation: floatAcademy 20s infinite linear;\\n box-shadow: 0 0 6px rgba(212, 175, 55, 0.2);\\n opacity: 0.25;\\n will-change: transform;\\n}\\n\\n@keyframes floatAcademy {\\n 0% {\\n transform: translateY(100vh) translateX(0) rotate(0deg);\\n opacity: 0;\\n }\\n 10% { opacity: 0.3; }\\n 90% { opacity: 0.3; }\\n 100% {\\n transform: translateY(-100vh) translateX(70px) rotate(360deg);\\n opacity: 0;\\n }\\n}\\n\\n\\\/* \\u041f\\u043b\\u0430\\u0432\\u0430\\u044e\\u0449\\u0438\\u0435 \\u0433\\u0435\\u043e\\u043c\\u0435\\u0442\\u0440\\u0438\\u0447\\u0435\\u0441\\u043a\\u0438\\u0435 \\u0444\\u0438\\u0433\\u0443\\u0440\\u044b BIFA+ *\\\/\\n.bifa-floating-shape {\\n position: absolute;\\n border-radius: 50%;\\n filter: blur(120px);\\n animation: morphFloatAcademy 25s ease-in-out infinite;\\n pointer-events: none;\\n opacity: 0.4;\\n}\\n\\n.bifa-shape-academy-1 {\\n width: 400px;\\n height: 400px;\\n background: radial-gradient(circle at 30% 30%, rgba(212, 175, 55, 0.07), transparent);\\n top: -200px;\\n right: -200px;\\n}\\n\\n.bifa-shape-academy-2 {\\n width: 350px;\\n height: 350px;\\n background: radial-gradient(circle at 70% 70%, rgba(10, 31, 68, 0.05), transparent);\\n bottom: -175px;\\n left: -175px;\\n animation-delay: 8s;\\n}\\n\\n.bifa-shape-academy-3 {\\n width: 300px;\\n height: 300px;\\n background: radial-gradient(circle at 50% 50%, rgba(29, 97, 67, 0.06), transparent);\\n top: 40%;\\n left: 60%;\\n animation-delay: 16s;\\n}\\n\\n@keyframes morphFloatAcademy {\\n 0%, 100% { \\n transform: translate(0, 0) scale(1) rotate(0deg);\\n filter: blur(120px);\\n }\\n 25% { \\n transform: translate(100px, -80px) scale(1.2) rotate(90deg);\\n filter: blur(140px);\\n }\\n 50% { \\n transform: translate(-80px, 100px) scale(0.8) rotate(180deg);\\n filter: blur(100px);\\n }\\n 75% { \\n transform: translate(-100px, -60px) scale(1.1) rotate(270deg);\\n filter: blur(130px);\\n }\\n}\\n\\n\\\/* ========= CONTAINER ========= *\\\/\\n.bifa-academy-container {\\n max-width: 1200px;\\n margin: 0 auto;\\n position: relative;\\n z-index: 10;\\n}\\n\\n\\\/* ========= SECTION TITLE - Premium Style ========= *\\\/\\n.bifa-section-title-wrapper {\\n text-align: center;\\n margin-bottom: 80px;\\n}\\n\\n.bifa-academy-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), #ffd700);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n position: relative;\\n animation: fadeInUp 1s ease-out 0.3s both;\\n line-height: 1.2;\\n margin-bottom: 20px;\\n text-transform: uppercase;\\n letter-spacing: -0.5px;\\n}\\n\\n.bifa-academy-section-title::after {\\n content: '';\\n position: absolute;\\n bottom: -15px;\\n left: 50%;\\n transform: translateX(-50%);\\n width: 0;\\n height: 4px;\\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700);\\n animation: expandWidth 0.8s ease-out 1s both;\\n border-radius: 2px;\\n}\\n\\n\\\/* ========= VIDEO CONTAINER - Premium Style ========= *\\\/\\n.bifa-academy-video {\\n margin-bottom: 60px;\\n animation: fadeInUp 1s ease-out 0.5s both;\\n}\\n\\n.bifa-video-wrapper {\\n position: relative;\\n width: 100%;\\n max-width: 900px;\\n margin: 0 auto;\\n padding-bottom: 50%;\\n border-radius: 25px;\\n overflow: hidden;\\n box-shadow: var(--bifa-shadow-premium);\\n background: var(--bifa-gray-light);\\n transform: scale(0.95);\\n animation: scaleIn 0.8s ease-out 0.5s forwards;\\n border: 2px solid rgba(212, 175, 55, 0.1);\\n}\\n\\n.bifa-video-wrapper video {\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n object-fit: cover;\\n transition: transform 0.3s ease;\\n}\\n\\n.bifa-video-wrapper:hover video {\\n transform: scale(1.02);\\n}\\n\\n\\\/* Video overlay effects *\\\/\\n.bifa-video-wrapper::before {\\n content: '';\\n position: absolute;\\n inset: 0;\\n background: linear-gradient(135deg, \\n transparent 0%, \\n rgba(212, 175, 55, 0.1) 100%\\n );\\n opacity: 0;\\n transition: opacity 0.3s ease;\\n z-index: 1;\\n pointer-events: none;\\n}\\n\\n.bifa-video-wrapper:hover::before {\\n opacity: 1;\\n}\\n\\n\\\/* ========= CONTENT CARD - Premium Style ========= *\\\/\\n.bifa-academy-content {\\n background: var(--bifa-bright-white);\\n border-radius: 25px;\\n padding: 60px 50px;\\n box-shadow: var(--bifa-shadow-premium);\\n animation: fadeInUp 1s ease-out 0.8s both;\\n max-width: 100%;\\n overflow: hidden;\\n border: 1px solid rgba(212, 175, 55, 0.1);\\n backdrop-filter: blur(10px);\\n}\\n\\n.bifa-content-grid {\\n display: grid;\\n grid-template-columns: repeat(2, 1fr);\\n gap: 60px;\\n margin-bottom: 50px;\\n}\\n\\n.bifa-content-block {\\n opacity: 0;\\n animation: fadeInUp 0.8s ease-out forwards;\\n}\\n\\n.bifa-content-block:nth-child(1) {\\n animation-delay: 1s;\\n}\\n\\n.bifa-content-block:nth-child(2) {\\n animation-delay: 1.2s;\\n}\\n\\n.bifa-content-block h3 {\\n font-family: var(--bifa-font-heading);\\n font-size: 1.8rem;\\n font-weight: 800;\\n color: var(--bifa-deep-navy);\\n margin-bottom: 25px;\\n position: relative;\\n padding-left: 30px;\\n line-height: 1.3;\\n text-rendering: optimizeLegibility;\\n}\\n\\n.bifa-content-block h3::before {\\n content: '';\\n position: absolute;\\n left: 0;\\n top: 50%;\\n transform: translateY(-50%);\\n width: 5px;\\n height: 100%;\\n max-height: 40px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n border-radius: 3px;\\n box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);\\n}\\n\\n.bifa-content-block p {\\n font-family: var(--bifa-font-body);\\n font-size: 1.1rem;\\n line-height: 1.8;\\n color: #4a5568;\\n margin-bottom: 25px;\\n text-align: left;\\n max-width: 100%;\\n}\\n\\n\\\/* ========= FEATURES LIST - Premium Style ========= *\\\/\\n.bifa-features-list {\\n list-style: none;\\n margin-top: 30px;\\n display: flex;\\n flex-direction: column;\\n gap: 20px;\\n padding: 0;\\n}\\n\\n.bifa-features-list li {\\n display: flex;\\n align-items: flex-start;\\n font-family: var(--bifa-font-body);\\n font-size: 1.05rem;\\n color: var(--bifa-soft-black);\\n line-height: 1.6;\\n transition: var(--bifa-transition);\\n opacity: 0;\\n animation: slideIn 0.5s ease-out forwards;\\n padding: 15px;\\n background: rgba(248, 249, 250, 0.5);\\n border-radius: 15px;\\n border: 1px solid rgba(212, 175, 55, 0.1);\\n}\\n\\n.bifa-features-list li:nth-child(1) {\\n animation-delay: 1.2s;\\n}\\n\\n.bifa-features-list li:nth-child(2) {\\n animation-delay: 1.3s;\\n}\\n\\n.bifa-features-list li:nth-child(3) {\\n animation-delay: 1.4s;\\n}\\n\\n.bifa-content-block:nth-child(2) .bifa-features-list li:nth-child(1) {\\n animation-delay: 1.4s;\\n}\\n\\n.bifa-content-block:nth-child(2) .bifa-features-list li:nth-child(2) {\\n animation-delay: 1.5s;\\n}\\n\\n.bifa-content-block:nth-child(2) .bifa-features-list li:nth-child(3) {\\n animation-delay: 1.6s;\\n}\\n\\n.bifa-features-list li:hover {\\n color: var(--bifa-deep-navy);\\n background: rgba(212, 175, 55, 0.1);\\n border-color: rgba(212, 175, 55, 0.3);\\n transform: translateX(5px);\\n}\\n\\n.bifa-feature-icon {\\n flex-shrink: 0;\\n width: 45px;\\n height: 45px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n border-radius: 15px;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n margin-right: 18px;\\n transition: var(--bifa-transition);\\n box-shadow: var(--bifa-shadow-gold);\\n}\\n\\n.bifa-feature-icon svg {\\n width: 24px;\\n height: 24px;\\n fill: var(--bifa-deep-navy);\\n stroke: var(--bifa-deep-navy);\\n stroke-width: 1.5;\\n}\\n\\n.bifa-features-list li:hover .bifa-feature-icon {\\n transform: scale(1.1) rotate(5deg);\\n box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);\\n}\\n\\n.bifa-feature-text {\\n flex: 1;\\n padding-top: 10px;\\n font-weight: 500;\\n}\\n\\n\\\/* ========= CALL TO ACTION - Premium Style ========= *\\\/\\n.bifa-academy-cta {\\n background: linear-gradient(135deg, var(--bifa-deep-navy), #162e5a);\\n color: var(--bifa-bright-white);\\n padding: 50px 40px;\\n border-radius: 25px;\\n text-align: center;\\n margin-top: 50px;\\n box-shadow: var(--bifa-shadow-premium);\\n animation: fadeInUp 1s ease-out 1.4s both;\\n position: relative;\\n overflow: hidden;\\n border: 2px solid rgba(212, 175, 55, 0.2);\\n}\\n\\n.bifa-academy-cta::before {\\n content: '';\\n position: absolute;\\n top: -50%;\\n right: -50%;\\n width: 100%;\\n height: 100%;\\n background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 60%);\\n animation: float 8s ease-in-out infinite;\\n}\\n\\n.bifa-cta-title {\\n font-family: var(--bifa-font-heading);\\n font-size: 2rem;\\n font-weight: 800;\\n margin-bottom: 20px;\\n line-height: 1.3;\\n position: relative;\\n z-index: 1;\\n background: linear-gradient(135deg, var(--bifa-bright-white), #f0f0f0);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n}\\n\\n.bifa-cta-text {\\n font-family: var(--bifa-font-body);\\n font-size: 1.2rem;\\n line-height: 1.6;\\n max-width: 800px;\\n margin: 0 auto 35px;\\n position: relative;\\n z-index: 1;\\n color: rgba(255, 255, 255, 0.9);\\n}\\n\\n.bifa-cta-button {\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n gap: 12px;\\n padding: 18px 45px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n color: var(--bifa-deep-navy);\\n text-decoration: none;\\n border-radius: 50px;\\n font-family: var(--bifa-font-heading);\\n font-weight: 700;\\n font-size: 1.1rem;\\n transition: var(--bifa-transition);\\n box-shadow: var(--bifa-shadow-gold);\\n position: relative;\\n overflow: hidden;\\n z-index: 1;\\n text-transform: uppercase;\\n letter-spacing: 0.5px;\\n}\\n\\n.bifa-cta-button::before {\\n content: '';\\n position: absolute;\\n top: 0;\\n left: -100%;\\n width: 100%;\\n height: 100%;\\n background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);\\n transition: left 0.5s ease;\\n z-index: -1;\\n}\\n\\n.bifa-cta-button:hover {\\n transform: translateY(-3px);\\n box-shadow: 0 8px 30px rgba(212, 175, 55, 0.4);\\n background: linear-gradient(135deg, #ffd700, var(--bifa-heritage-gold));\\n}\\n\\n.bifa-cta-button:hover::before {\\n left: 100%;\\n}\\n\\n\\\/* ========= ANIMATIONS ========= *\\\/\\n@keyframes slideIn {\\n to {\\n opacity: 1;\\n }\\n}\\n\\n@keyframes fadeInUp {\\n from {\\n opacity: 0;\\n transform: translateY(30px);\\n }\\n to {\\n opacity: 1;\\n transform: translateY(0);\\n }\\n}\\n\\n@keyframes expandWidth {\\n from {\\n width: 0;\\n }\\n to {\\n width: 120px;\\n }\\n}\\n\\n@keyframes scaleIn {\\n to {\\n transform: scale(1);\\n }\\n}\\n\\n@keyframes float {\\n 0%, 100% {\\n transform: translate(0, 0);\\n }\\n 50% {\\n transform: translate(-20px, 20px);\\n }\\n}\\n\\n\\\/* ========= RESPONSIVE ========= *\\\/\\n@media (max-width: 968px) {\\n .bifa-content-grid {\\n grid-template-columns: 1fr;\\n gap: 50px;\\n }\\n \\n .bifa-video-wrapper {\\n padding-bottom: 56.25%;\\n }\\n \\n .bifa-content-block {\\n animation-delay: 1s !important;\\n }\\n \\n .bifa-features-list li {\\n animation-delay: 0s !important;\\n animation: slideIn 0.5s ease-out forwards;\\n }\\n}\\n\\n@media (max-width: 768px) {\\n .bifa-academy-section {\\n padding: 80px 20px 60px;\\n }\\n \\n .bifa-academy-content {\\n padding: 40px 30px;\\n }\\n \\n .bifa-content-block h3 {\\n font-size: 1.6rem;\\n padding-left: 25px;\\n }\\n \\n .bifa-academy-section-title {\\n font-size: 2rem;\\n }\\n \\n .bifa-feature-icon {\\n width: 40px;\\n height: 40px;\\n margin-right: 15px;\\n }\\n \\n .bifa-feature-icon svg {\\n width: 20px;\\n height: 20px;\\n }\\n \\n .bifa-content-grid {\\n gap: 40px;\\n }\\n \\n .bifa-academy-cta {\\n padding: 40px 30px;\\n }\\n \\n .bifa-cta-title {\\n font-size: 1.7rem;\\n }\\n \\n .bifa-cta-text {\\n font-size: 1.1rem;\\n }\\n}\\n\\n@media (max-width: 480px) {\\n .bifa-academy-section {\\n padding: 60px 15px 50px;\\n }\\n \\n .bifa-academy-content {\\n padding: 30px 20px;\\n }\\n \\n .bifa-academy-section-title {\\n font-size: 1.8rem;\\n }\\n \\n .bifa-content-block h3 {\\n font-size: 1.4rem;\\n padding-left: 20px;\\n }\\n \\n .bifa-content-block p {\\n font-size: 1rem;\\n }\\n \\n .bifa-cta-title {\\n font-size: 1.5rem;\\n }\\n \\n .bifa-cta-text {\\n font-size: 1rem;\\n }\\n \\n .bifa-cta-button {\\n padding: 15px 35px;\\n font-size: 1rem;\\n }\\n \\n .bifa-feature-icon {\\n width: 35px;\\n height: 35px;\\n margin-right: 12px;\\n }\\n \\n .bifa-feature-icon svg {\\n width: 18px;\\n height: 18px;\\n }\\n \\n .bifa-features-list li {\\n font-size: 0.95rem;\\n padding: 12px;\\n }\\n \\n .bifa-features-list {\\n gap: 15px;\\n }\\n \\n .bifa-academy-cta {\\n padding: 35px 25px;\\n }\\n}\\n<\\\/style>\\n<\\\/head>\\n<body>\\n\\n<\/p>\n<div class=\"\\\"bifa-academy-section-wrapper\\\"\">\\n \\n <\/p>\n<section class=\"\\\"bifa-academy-section\\\"\">\\n \\n <\/p>\n<div class=\"\\\"bifa-academy-bg-animation\\\"\">\\n \\n <\/p>\n<div class=\"\\\"bifa-floating-shape\" bifa-shape-academy-1\\\"><\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-floating-shape\" bifa-shape-academy-2\\\"><\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-floating-shape\" bifa-shape-academy-3\\\"><\\\/div>\\n \\n <\\\/div>\\n\\n <\/p>\n<div class=\"\\\"bifa-academy-container\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-section-title-wrapper\\\"\">\\n <\/p>\n<h2 class=\"\\\"bifa-academy-section-title\\\"\">BIFA+ Academy: Future of Football<\\\/h2>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"bifa-academy-video\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-video-wrapper\\\"\">\\n <video autoplay loop muted playsinline>\\n<source src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Futuristic_Classroom_Video_Ready.webm\\\"\" type=\"\\\"video\\\/webm\\\"\">\\n<source src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Futuristic_Classroom_Video_Ready.mp4\\\"\" type=\"\\\"video\\\/mp4\\\"\">\\n <\\\/video>\\n <\\\/div>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"bifa-academy-content\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-content-grid\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-content-block\\\"\">\\n <\/p>\n<h3>Revolutionary Training System<\\\/h3>\\n <\/p>\n<p>\\n BIFA+ creates a revolutionary system for training footballers, with the ability to analyze every aspect of the game \\n by both top-tier coaches and artificial intelligence. Our academy uses \\n machine learning to create individual development programs that take into account the unique characteristics of each player.\\n <\\\/p>\\n <\/p>\n<ul class=\"\\\"bifa-features-list\\\"\">\\n <\/p>\n<li>\\n <span class=\"\\\"bifa-feature-icon\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" xmlns=\"\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\"\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M21\" 10.12h-6.78l2.74-2.82c-2.73-2.7-7.15-2.8-9.88-.1-2.73 2.71-2.73 7.08 0 9.79 2.73 2.71 7.15 9.88 0c18.32 15.65 19 14.08 12.1h2c0 1.98-.88 4.55-2.64 6.29-3.51 3.48-9.21 3.48-12.72 0-3.5-3.47-3.53-9.11-.02-12.58 3.51-3.47 9.14-3.47 12.65 0l21 3v7.12z\\\"\\>\\n <circle cx=\"\\\"12\\\"\" cy=\"\\\"12\\\"\" r=\"\\\"3\\\"\\\/\">\\n <\\\/svg>\\n <\\\/span>\\n <span class=\"\\\"bifa-feature-text\\\"\">Intelligent analysis of game data<\\\/span>\\n <\\\/li>\\n\n<li>\\n <span class=\"\\\"bifa-feature-icon\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" xmlns=\"\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\"\" fill=\"\\\"none\\\"\">\\n <circle cx=\"\\\"12\\\"\" cy=\"\\\"12\\\"\" r=\"\\\"10\\\"\\\/\">\\n <circle cx=\"\\\"12\\\"\" cy=\"\\\"12\\\"\" r=\"\\\"3\\\"\\\/\">\\n <path d=\"\\\"M12\" 2v3m12 19v3m2 12h3m19 12h3\\\"\\>\\n <\\\/svg>\\n <\\\/span>\\n <span class=\"\\\"bifa-feature-text\\\"\">Adaptive training programs<\\\/span>\\n <\\\/li>\\n\n<li>\\n <span class=\"\\\"bifa-feature-icon\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" xmlns=\"\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\"\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M3.5\" 18.5l9 13l4 4l20.5 6\\\"\\>\\n <path d=\"\\\"M20.5\" 6h-5m20.5 6v5\\\"\\>\\n <\\\/svg>\\n <\\\/span>\\n <span class=\"\\\"bifa-feature-text\\\"\">Continuous progress monitoring<\\\/span>\\n <\\\/li>\\n <\\\/ul>\\n <\\\/div>\\n \\n\n<div class=\"\\\"bifa-content-block\\\"\">\\n <\/p>\n<h3>Smart Analytics for Coaches<\\\/h3>\\n <\/p>\n<p>\\n The artificial intelligence system processes training and match data in real-time, \\n providing coaches with detailed information about player progress, tactical patterns and areas for improvement. \\n Personalized dashboards help make decisions based on objective data.\\n <\\\/p>\\n <\/p>\n<ul class=\"\\\"bifa-features-list\\\"\">\\n <\/p>\n<li>\\n <span class=\"\\\"bifa-feature-icon\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" xmlns=\"\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\"\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M13\" 2l3 14h9l-1 8 10-12h-9l1-8z\\\"\\>\\n <\\\/svg>\\n <\\\/span>\\n <span class=\"\\\"bifa-feature-text\\\"\">Real-time performance analysis<\\\/span>\\n <\\\/li>\\n\n<li>\\n <span class=\"\\\"bifa-feature-icon\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" xmlns=\"\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\"\" fill=\"\\\"none\\\"\">\\n <circle cx=\"\\\"12\\\"\" cy=\"\\\"8\\\"\" r=\"\\\"5\\\"\\\/\">\\n <path d=\"\\\"M20\" 21a8 8 0 1 0-16 0\\\"\\>\\n <circle cx=\"\\\"8\\\"\" cy=\"\\\"19\\\"\" r=\"\\\"1\\\"\\\/\">\\n <circle cx=\"\\\"12\\\"\" cy=\"\\\"19\\\"\" r=\"\\\"1\\\"\\\/\">\\n <circle cx=\"\\\"16\\\"\" cy=\"\\\"19\\\"\" r=\"\\\"1\\\"\\\/\">\\n <\\\/svg>\\n <\\\/span>\\n <span class=\"\\\"bifa-feature-text\\\"\">Data-driven decision making<\\\/span>\\n <\\\/li>\\n\n<li>\\n <span class=\"\\\"bifa-feature-icon\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" xmlns=\"\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\"\" fill=\"\\\"none\\\"\">\\n <rect x=\"\\\"3\\\"\" y=\"\\\"3\\\"\" width=\"\\\"18\\\"\" height=\"\\\"14\\\"\" rx=\"\\\"2\\\"\\\/\">\\n <path d=\"\\\"M7\" 21h10m12 17v4\\\"\\>\\n <path d=\"\\\"M8\" 8h8m8 12h5\\\"\\>\\n <\\\/svg>\\n <\\\/span>\\n <span class=\"\\\"bifa-feature-text\\\"\">Personalized coaching dashboards<\\\/span>\\n <\\\/li>\\n <\\\/ul>\\n <\\\/div>\\n <\\\/div>\\n \\n \\n\n<div class=\"\\\"bifa-academy-cta\\\"\">\\n <\/p>\n<h3 class=\"\\\"bifa-cta-title\\\"\">Join the AI-Powered Football Revolution<\\\/h3>\\n <\/p>\n<p class=\"\\\"bifa-cta-text\\\"\">\\n Experience the future of football training with BIFA+. Our cutting-edge AI technology \\n combined with world-class coaching creates unprecedented opportunities for player development.\\n <\\\/p>\\n <a href=\"\\\"https:\\\/\\\/bifa.ai\\\/academy-ai\\\/\\\"\" class=\"\\\"bifa-cta-button\\\"\">\\n <span>Discover Academy<\\\/span>\\n <svg width=\"\\\"20\\\"\" height=\"\\\"20\\\"\" viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M5\" 12h19m19 12l12 5m19 19\\\" stroke =\"\\\"currentColor\\\"\" stroke-width=\"\\\"2.5\\\"\" stroke-linecap=\"\\\"round\\\"\" stroke-linejoin=\"\\\"round\\\"\\\/\">\\n <\\\/svg>\\n <\\\/a>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/section>\\n<\\\/div>\\n\\n<script>\\n\\\/\\\/ BIFA+ Premium Academy Module\\nconst BifaAcademy = {\\n \\\/\\\/ Configuration\\n config: {\\n particleCount: 10,\\n animationDelay: 100\\n },\\n\\n \\\/\\\/ Initialize\\n init() {\\n this.createParticles();\\n this.setupVideoOptimization();\\n this.setupIntersectionObserver();\\n },\\n\\n \\\/\\\/ Create golden particles\\n createParticles() {\\n const particlesContainer = document.querySelector('.bifa-academy-bg-animation');\\n if (!particlesContainer) return;\\n\\n for (let i = 0; i < this.config.particleCount; i++) {\\n const particle = document.createElement('div');\\n particle.className = 'bifa-academy-particle';\\n particle.style.left = Math.random() * 100 + '%';\\n particle.style.animationDelay = Math.random() * 18 + 's';\\n particle.style.animationDuration = (16 + Math.random() * 8) + '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\\n \\\/\\\/ Setup video optimization\\n setupVideoOptimization() {\\n const video = document.querySelector('.bifa-video-wrapper video');\\n if (!video) return;\\n\\n \\\/\\\/ Ensure video plays smoothly\\n video.addEventListener('loadstart', () => {\\n video.play().catch(e => {\\n console.log('Video autoplay prevented:', e);\\n });\\n });\\n\\n \\\/\\\/ Handle video errors gracefully\\n video.addEventListener('error', (e) => {\\n console.warn('Video loading error:', e);\\n \\\/\\\/ Could add fallback image here\\n });\\n\\n \\\/\\\/ Optimize performance\\n video.addEventListener('loadeddata', () => {\\n video.currentTime = 0;\\n });\\n },\\n\\n \\\/\\\/ Setup intersection observer for animations\\n setupIntersectionObserver() {\\n if (!window.IntersectionObserver) return;\\n\\n const observerOptions = {\\n threshold: 0.1,\\n rootMargin: '50px 0px'\\n };\\n\\n const observer = new IntersectionObserver((entries) => {\\n entries.forEach(entry => {\\n if (entry.isIntersecting) {\\n entry.target.classList.add('animate-in');\\n }\\n });\\n }, observerOptions);\\n\\n \\\/\\\/ Observe animated elements\\n const animatedElements = document.querySelectorAll(\\n '.bifa-content-block, .bifa-features-list li, .bifa-academy-cta'\\n );\\n\\n animatedElements.forEach(el => {\\n observer.observe(el);\\n });\\n },\\n\\n \\\/\\\/ Utility method for smooth scrolling to elements\\n scrollToSection(targetId) {\\n const element = document.getElementById(targetId);\\n if (element) {\\n element.scrollIntoView({\\n behavior: 'smooth',\\n block: 'start'\\n });\\n }\\n }\\n};\\n\\n\\\/\\\/ Initialize when DOM is ready\\ndocument.addEventListener('DOMContentLoaded', () => {\\n BifaAcademy.init();\\n});\\n\\n\\\/\\\/ Performance optimization - pause animations when not visible\\ndocument.addEventListener('visibilitychange', () => {\\n const particles = document.querySelectorAll('.bifa-academy-particle');\\n const shapes = document.querySelectorAll('.bifa-floating-shape');\\n \\n if (document.hidden) {\\n particles.forEach(p => p.style.animationPlayState = 'paused');\\n shapes.forEach(s => s.style.animationPlayState = 'paused');\\n } else {\\n particles.forEach(p => p.style.animationPlayState = 'running');\\n shapes.forEach(s => s.style.animationPlayState = 'running');\\n }\\n});\\n<\\\/script>\\n\\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+ Featured Stories \\\/ Ambassadors Block - Dynamic<\\\/title>\\n <link rel=\"\\\"preconnect\\\"\" href=\"\\\"https:\\\/\\\/fonts.googleapis.com\\\"\">\\n <link rel=\"\\\"preconnect\\\"\" href=\"\\\"https:\\\/\\\/fonts.gstatic.com\\\"\" crossorigin>\\n \\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&family=Cairo:wght@300;400;500;600;700;800&family=Tajawal:wght@300;400;500;700;800&display=swap\\\"\" rel=\"\\\"stylesheet\\\"\">\\n\\n<\/p>\n<style>\\n\\\/* ========= \\u0413\\u041b\\u041e\\u0411\\u0410\\u041b\\u042c\\u041d\\u042b\\u0415 \\u041f\\u0415\\u0420\\u0415\\u041c\\u0415\\u041d\\u041d\\u042b\\u0415 BIFA+ ========= *\\\/\\n:root {\\n \\\/* \\u041e\\u0444\\u0438\\u0446\\u0438\\u0430\\u043b\\u044c\\u043d\\u044b\\u0435 \\u0446\\u0432\\u0435\\u0442\\u0430 BIFA+ *\\\/\\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 --bifa-gray-light: #F8F9FA;\\n --bifa-gray: #6C757D;\\n \\n \\\/* \\u041e\\u0444\\u0438\\u0446\\u0438\\u0430\\u043b\\u044c\\u043d\\u044b\\u0435 \\u0448\\u0440\\u0438\\u0444\\u0442\\u044b BIFA+ *\\\/\\n --bifa-font-heading: 'Montserrat', 'Cairo', sans-serif;\\n --bifa-font-body: 'Poppins', 'Tajawal', sans-serif;\\n --bifa-font-arabic: 'Cairo', 'Tajawal', 'GE SS Text', sans-serif;\\n \\n \\\/* \\u041f\\u0440\\u0435\\u043c\\u0438\\u0430\\u043b\\u044c\\u043d\\u044b\\u0435 \\u0442\\u0435\\u043d\\u0438 \\u0438 \\u044d\\u0444\\u0444\\u0435\\u043a\\u0442\\u044b *\\\/\\n --bifa-shadow-premium: 0 25px 80px rgba(10, 31, 68, 0.15);\\n --bifa-shadow-hover: 0 35px 100px rgba(10, 31, 68, 0.2);\\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\\n\\\/* ========= RESET ========= *\\\/\\n* {\\n margin: 0;\\n padding: 0;\\n box-sizing: border-box;\\n}\\n\\nhtml {\\n scroll-behavior: smooth;\\n}\\n\\nbody {\\n font-family: var(--bifa-font-body);\\n overflow-x: hidden;\\n background: var(--bifa-bright-white);\\n text-rendering: optimizeLegibility;\\n -webkit-font-smoothing: antialiased;\\n -moz-osx-font-smoothing: grayscale;\\n color: var(--bifa-soft-black);\\n}\\n\\n\\\/* ========= LOADING STATE ========= *\\\/\\n.bifa-loading-container {\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n justify-content: center;\\n min-height: 400px;\\n gap: 20px;\\n}\\n\\n.bifa-loading-spinner {\\n width: 60px;\\n height: 60px;\\n border: 4px solid rgba(212, 175, 55, 0.1);\\n border-top: 4px solid var(--bifa-heritage-gold);\\n border-radius: 50%;\\n animation: spin 1s linear infinite;\\n}\\n\\n@keyframes spin {\\n 0% { transform: rotate(0deg); }\\n 100% { transform: rotate(360deg); }\\n}\\n\\n.bifa-loading-text {\\n font-family: var(--bifa-font-heading);\\n font-size: 1.2rem;\\n color: var(--bifa-gray);\\n animation: pulse 1.5s ease-in-out infinite;\\n}\\n\\n@keyframes pulse {\\n 0%, 100% { opacity: 1; }\\n 50% { opacity: 0.5; }\\n}\\n\\n\\\/* ========= ERROR STATE ========= *\\\/\\n.bifa-error-container {\\n background: #fff3cd;\\n border: 2px solid #ffc107;\\n border-radius: 15px;\\n padding: 30px;\\n margin: 40px 20px;\\n text-align: center;\\n}\\n\\n.bifa-error-icon {\\n font-size: 3rem;\\n margin-bottom: 20px;\\n}\\n\\n.bifa-error-message {\\n font-family: var(--bifa-font-heading);\\n font-size: 1.3rem;\\n color: #856404;\\n margin-bottom: 15px;\\n}\\n\\n.bifa-error-details {\\n font-family: var(--bifa-font-body);\\n color: #856404;\\n margin-bottom: 20px;\\n}\\n\\n.bifa-retry-button {\\n display: inline-block;\\n padding: 12px 30px;\\n background: var(--bifa-heritage-gold);\\n color: var(--bifa-deep-navy);\\n border: none;\\n border-radius: 50px;\\n font-family: var(--bifa-font-heading);\\n font-weight: 700;\\n cursor: pointer;\\n transition: var(--bifa-transition);\\n}\\n\\n.bifa-retry-button:hover {\\n transform: translateY(-2px);\\n box-shadow: var(--bifa-shadow-gold);\\n}\\n\\n\\\/* ========= EMPTY STATE ========= *\\\/\\n.bifa-empty-container {\\n text-align: center;\\n padding: 60px 20px;\\n}\\n\\n.bifa-empty-icon {\\n font-size: 4rem;\\n color: var(--bifa-gray);\\n margin-bottom: 20px;\\n}\\n\\n.bifa-empty-message {\\n font-family: var(--bifa-font-heading);\\n font-size: 1.5rem;\\n color: var(--bifa-gray);\\n margin-bottom: 10px;\\n}\\n\\n.bifa-empty-submessage {\\n font-family: var(--bifa-font-body);\\n color: var(--bifa-gray);\\n margin-bottom: 30px;\\n}\\n\\n\\\/* ========= AMBASSADORS SECTION WRAPPER ========= *\\\/\\n.bifa-ambassadors-section-wrapper {\\n width: 100vw;\\n position: relative;\\n left: 50%;\\n margin-left: -50vw;\\n background: transparent;\\n overflow: hidden;\\n}\\n\\n\\\/* ========= MAIN AMBASSADORS SECTION ========= *\\\/\\n.bifa-ambassadors-section {\\n padding: 100px 20px 100px;\\n position: relative;\\n background: transparent;\\n}\\n\\n\\\/* ========= ANIMATED BACKGROUND ELEMENTS ========= *\\\/\\n.bifa-ambassadors-bg-animation {\\n position: absolute;\\n width: 100%;\\n height: 100%;\\n overflow: hidden;\\n z-index: 1;\\n top: 0;\\n left: 0;\\n}\\n\\n\\\/* \\u0417\\u043e\\u043b\\u043e\\u0442\\u044b\\u0435 \\u0447\\u0430\\u0441\\u0442\\u0438\\u0446\\u044b BIFA+ *\\\/\\n.bifa-ambassadors-particle {\\n position: absolute;\\n width: 3px;\\n height: 3px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n border-radius: 50%;\\n animation: floatAmbassadors 20s infinite linear;\\n box-shadow: 0 0 6px rgba(212, 175, 55, 0.2);\\n opacity: 0.25;\\n will-change: transform;\\n}\\n\\n@keyframes floatAmbassadors {\\n 0% {\\n transform: translateY(100vh) translateX(0) rotate(0deg);\\n opacity: 0;\\n }\\n 10% { opacity: 0.3; }\\n 90% { opacity: 0.3; }\\n 100% {\\n transform: translateY(-100vh) translateX(70px) rotate(360deg);\\n opacity: 0;\\n }\\n}\\n\\n\\\/* \\u041f\\u043b\\u0430\\u0432\\u0430\\u044e\\u0449\\u0438\\u0435 \\u0433\\u0435\\u043e\\u043c\\u0435\\u0442\\u0440\\u0438\\u0447\\u0435\\u0441\\u043a\\u0438\\u0435 \\u0444\\u0438\\u0433\\u0443\\u0440\\u044b BIFA+ *\\\/\\n.bifa-floating-shape-amb {\\n position: absolute;\\n border-radius: 50%;\\n filter: blur(120px);\\n animation: morphFloatAmbassadors 25s ease-in-out infinite;\\n pointer-events: none;\\n opacity: 0.4;\\n}\\n\\n.bifa-shape-ambassadors-1 {\\n width: 400px;\\n height: 400px;\\n background: radial-gradient(circle at 30% 30%, rgba(212, 175, 55, 0.07), transparent);\\n top: -200px;\\n right: -200px;\\n}\\n\\n.bifa-shape-ambassadors-2 {\\n width: 350px;\\n height: 350px;\\n background: radial-gradient(circle at 70% 70%, rgba(10, 31, 68, 0.05), transparent);\\n bottom: -175px;\\n left: -175px;\\n animation-delay: 8s;\\n}\\n\\n.bifa-shape-ambassadors-3 {\\n width: 300px;\\n height: 300px;\\n background: radial-gradient(circle at 50% 50%, rgba(29, 97, 67, 0.06), transparent);\\n top: 40%;\\n left: 60%;\\n animation-delay: 16s;\\n}\\n\\n@keyframes morphFloatAmbassadors {\\n 0%, 100% { \\n transform: translate(0, 0) scale(1) rotate(0deg);\\n filter: blur(120px);\\n }\\n 25% { \\n transform: translate(100px, -80px) scale(1.2) rotate(90deg);\\n filter: blur(140px);\\n }\\n 50% { \\n transform: translate(-80px, 100px) scale(0.8) rotate(180deg);\\n filter: blur(100px);\\n }\\n 75% { \\n transform: translate(-100px, -60px) scale(1.1) rotate(270deg);\\n filter: blur(130px);\\n }\\n}\\n\\n\\\/* ========= CONTAINER ========= *\\\/\\n.bifa-ambassadors-container {\\n max-width: 1200px;\\n margin: 0 auto;\\n position: relative;\\n z-index: 10;\\n}\\n\\n\\\/* ========= SECTION TITLE - Premium Style ========= *\\\/\\n.bifa-ambassadors-title-wrapper {\\n text-align: center;\\n margin-bottom: 80px;\\n}\\n\\n.bifa-ambassadors-section-title {\\n font-family: var(--bifa-font-heading) !important;\\n font-size: clamp(2.5rem, 4vw, 3.5rem);\\n font-weight: 900 !important;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent !important;\\n position: relative;\\n animation: fadeInUp 1s ease-out 0.3s both;\\n line-height: 1.2;\\n margin-bottom: 20px;\\n text-transform: uppercase;\\n letter-spacing: -0.5px;\\n text-shadow: 0 2px 4px rgba(212, 175, 55, 0.1);\\n}\\n\\n.bifa-ambassadors-section-title::after {\\n content: '';\\n position: absolute;\\n bottom: -15px;\\n left: 50%;\\n transform: translateX(-50%);\\n width: 0;\\n height: 4px;\\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700);\\n animation: expandWidth 0.8s ease-out 1s both;\\n border-radius: 2px;\\n}\\n\\n.bifa-ambassadors-subtitle {\\n font-family: var(--bifa-font-body) !important;\\n font-size: 1.3rem;\\n font-weight: 600 !important;\\n color: var(--bifa-gray) !important;\\n margin-top: 30px;\\n animation: fadeInUp 1s ease-out 0.5s both;\\n line-height: 1.6;\\n max-width: 700px;\\n margin-left: auto;\\n margin-right: auto;\\n}\\n\\n\\\/* ========= JOIN US BUTTONS SECTION ========= *\\\/\\n.bifa-join-buttons-section {\\n text-align: center;\\n margin: 60px auto;\\n padding: 40px 20px;\\n background: linear-gradient(135deg, rgba(212, 175, 55, 0.05), transparent);\\n border-radius: 20px;\\n animation: fadeInUp 1s ease-out 0.7s both;\\n max-width: 100%;\\n}\\n\\n.bifa-join-buttons-container {\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n gap: 20px;\\n flex-wrap: wrap;\\n margin: 30px auto 0;\\n max-width: 100%;\\n}\\n\\n.bifa-join-button {\\n all: initial;\\n font-family: 'Montserrat', sans-serif !important;\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n gap: 10px;\\n padding: 18px 35px !important;\\n background: linear-gradient(135deg, #0A1F44, #162e5a) !important;\\n color: #FFFFFF !important;\\n text-decoration: none !important;\\n border-radius: 50px;\\n font-weight: 700 !important;\\n font-size: 1rem !important;\\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\\n box-shadow: 0 15px 40px rgba(10, 31, 68, 0.2), \\n 0 5px 15px rgba(10, 31, 68, 0.15);\\n position: relative;\\n overflow: hidden;\\n text-transform: uppercase;\\n letter-spacing: 0.5px;\\n border: 2px solid transparent !important;\\n cursor: pointer !important;\\n white-space: nowrap;\\n text-align: center;\\n box-sizing: border-box;\\n}\\n\\n.bifa-join-button:hover {\\n transform: translateY(-3px) scale(1.02);\\n box-shadow: 0 20px 50px rgba(10, 31, 68, 0.3), \\n 0 10px 20px rgba(10, 31, 68, 0.2);\\n background: linear-gradient(135deg, #162e5a, #0A1F44) !important;\\n border-color: rgba(212, 175, 55, 0.3) !important;\\n}\\n\\n.bifa-join-button::before {\\n content: '';\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n width: 0;\\n height: 0;\\n background: radial-gradient(circle, rgba(212, 175, 55, 0.3), transparent);\\n transition: all 0.5s ease;\\n transform: translate(-50%, -50%);\\n}\\n\\n.bifa-join-button:hover::before {\\n width: 100%;\\n height: 100%;\\n}\\n\\n.bifa-join-button svg {\\n width: 18px;\\n height: 18px;\\n fill: currentColor;\\n flex-shrink: 0;\\n}\\n\\n\\\/* ========= AMBASSADORS GRID ========= *\\\/\\n.bifa-ambassadors-grid {\\n display: grid;\\n grid-template-columns: repeat(3, 1fr);\\n gap: 40px;\\n margin-bottom: 60px;\\n position: relative;\\n transition: max-height 0.6s ease-out;\\n}\\n\\n\\\/* Hide cards beyond the first 3 by default *\\\/\\n.bifa-ambassador-card:nth-child(n+4) {\\n display: none;\\n opacity: 0;\\n}\\n\\n\\\/* Show all cards when expanded *\\\/\\n.bifa-ambassadors-grid.expanded .bifa-ambassador-card:nth-child(n+4) {\\n display: block;\\n animation: fadeInUp 0.8s ease-out forwards;\\n}\\n\\n\\\/* Stagger animations for expanded cards *\\\/\\n.bifa-ambassadors-grid.expanded .bifa-ambassador-card:nth-child(4) {\\n animation-delay: 0.1s;\\n}\\n\\n.bifa-ambassadors-grid.expanded .bifa-ambassador-card:nth-child(5) {\\n animation-delay: 0.2s;\\n}\\n\\n.bifa-ambassadors-grid.expanded .bifa-ambassador-card:nth-child(6) {\\n animation-delay: 0.3s;\\n}\\n\\n\\\/* ========= AMBASSADOR CARD - Premium Style ========= *\\\/\\n.bifa-ambassador-card {\\n background: var(--bifa-bright-white) !important;\\n border-radius: 25px;\\n overflow: hidden;\\n box-shadow: var(--bifa-shadow-premium);\\n transition: var(--bifa-transition);\\n animation: fadeInUp 1s ease-out both;\\n border: 1px solid rgba(212, 175, 55, 0.1);\\n position: relative;\\n cursor: pointer;\\n text-decoration: none;\\n color: inherit;\\n display: block;\\n}\\n\\n.bifa-ambassador-card:nth-child(1) {\\n animation-delay: 0.8s;\\n}\\n\\n.bifa-ambassador-card:nth-child(2) {\\n animation-delay: 1s;\\n}\\n\\n.bifa-ambassador-card:nth-child(3) {\\n animation-delay: 1.2s;\\n}\\n\\n.bifa-ambassador-card:hover {\\n transform: translateY(-10px);\\n box-shadow: var(--bifa-shadow-hover);\\n border-color: rgba(212, 175, 55, 0.3);\\n}\\n\\n\\\/* Ambassador Image Container *\\\/\\n.bifa-ambassador-image {\\n position: relative;\\n width: 100%;\\n height: 300px;\\n overflow: hidden;\\n background: linear-gradient(135deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);\\n background-size: 200% 100%;\\n}\\n\\n.bifa-ambassador-image.loading {\\n animation: loading 2s infinite linear;\\n}\\n\\n.bifa-ambassador-image img {\\n width: 100%;\\n height: 100%;\\n object-fit: cover;\\n object-position: center;\\n transition: transform 0.5s ease;\\n}\\n\\n.bifa-ambassador-card:hover .bifa-ambassador-image img {\\n transform: scale(1.1);\\n}\\n\\n\\\/* No image placeholder *\\\/\\n.bifa-ambassador-no-image {\\n width: 100%;\\n height: 100%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(10, 31, 68, 0.05));\\n}\\n\\n.bifa-ambassador-no-image svg {\\n width: 80px;\\n height: 80px;\\n color: var(--bifa-gray);\\n opacity: 0.5;\\n}\\n\\n\\\/* Gold Overlay Effect *\\\/\\n.bifa-ambassador-image::after {\\n content: '';\\n position: absolute;\\n inset: 0;\\n background: linear-gradient(180deg, \\n transparent 50%, \\n rgba(10, 31, 68, 0.7) 100%\\n );\\n opacity: 0;\\n transition: opacity 0.3s ease;\\n}\\n\\n.bifa-ambassador-card:hover .bifa-ambassador-image::after {\\n opacity: 1;\\n}\\n\\n\\\/* Country Flag *\\\/\\n.bifa-ambassador-country {\\n position: absolute;\\n top: 20px;\\n left: 20px;\\n font-size: 32px;\\n z-index: 2;\\n background: rgba(255, 255, 255, 0.9);\\n width: 48px;\\n height: 48px;\\n border-radius: 50%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\\n}\\n\\n\\\/* Ambassador Content *\\\/\\n.bifa-ambassador-content {\\n padding: 35px 30px;\\n position: relative;\\n}\\n\\n.bifa-ambassador-name {\\n font-family: var(--bifa-font-heading) !important;\\n font-size: 1.5rem;\\n font-weight: 900 !important;\\n color: var(--bifa-deep-navy) !important;\\n margin-bottom: 8px;\\n line-height: 1.2;\\n transition: color 0.3s ease;\\n}\\n\\n.bifa-ambassador-card:hover .bifa-ambassador-name {\\n color: var(--bifa-heritage-gold) !important;\\n}\\n\\n.bifa-ambassador-role {\\n font-family: var(--bifa-font-body) !important;\\n font-size: 1rem;\\n font-weight: 700 !important;\\n color: var(--bifa-heritage-gold) !important;\\n margin-bottom: 8px;\\n text-transform: uppercase;\\n letter-spacing: 0.5px;\\n}\\n\\n.bifa-ambassador-organization {\\n font-family: var(--bifa-font-body) !important;\\n font-size: 0.95rem;\\n font-weight: 500 !important;\\n color: var(--bifa-gray) !important;\\n margin-bottom: 20px;\\n}\\n\\n.bifa-ambassador-quote {\\n font-family: var(--bifa-font-body) !important;\\n font-size: 1.05rem;\\n font-weight: 500 !important;\\n line-height: 1.7;\\n color: #4a5568 !important;\\n font-style: italic;\\n position: relative;\\n padding-left: 25px;\\n}\\n\\n.bifa-ambassador-quote::before {\\n content: '\\\"';\\n position: absolute;\\n left: 0;\\n top: -5px;\\n font-size: 2.5rem;\\n color: var(--bifa-heritage-gold);\\n font-family: var(--bifa-font-heading);\\n font-weight: 800;\\n opacity: 0.3;\\n}\\n\\n\\\/* Gold Badge for Special Ambassadors *\\\/\\n.bifa-ambassador-badge {\\n position: absolute;\\n top: 20px;\\n right: 20px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n color: var(--bifa-deep-navy);\\n padding: 8px 16px;\\n border-radius: 50px;\\n font-family: var(--bifa-font-heading);\\n font-size: 0.75rem;\\n font-weight: 700;\\n text-transform: uppercase;\\n letter-spacing: 0.5px;\\n box-shadow: var(--bifa-shadow-gold);\\n z-index: 2;\\n}\\n\\n\\\/* Featured badge style *\\\/\\n.bifa-ambassador-badge.featured {\\n background: linear-gradient(135deg, #ff6b6b, #ff4757);\\n color: white;\\n}\\n\\n\\\/* ========= VIEW ALL BUTTON ========= *\\\/\\n.bifa-ambassadors-cta {\\n text-align: center;\\n margin-top: 60px;\\n animation: fadeInUp 1s ease-out 1.2s both;\\n}\\n\\n.bifa-view-all-button {\\n all: initial;\\n font-family: 'Montserrat', sans-serif !important;\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n gap: 12px;\\n padding: 20px 50px !important;\\n background: linear-gradient(135deg, #0A1F44, #162e5a) !important;\\n color: #FFFFFF !important;\\n text-decoration: none !important;\\n border-radius: 50px;\\n font-weight: 800 !important;\\n font-size: 1.15rem !important;\\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\\n box-shadow: 0 25px 60px rgba(10, 31, 68, 0.3), \\n 0 10px 20px rgba(10, 31, 68, 0.2),\\n inset 0 -2px 4px rgba(0, 0, 0, 0.1);\\n position: relative;\\n overflow: hidden;\\n text-transform: uppercase;\\n letter-spacing: 0.5px;\\n border: 2px solid rgba(212, 175, 55, 0.2) !important;\\n cursor: pointer !important;\\n}\\n\\n.bifa-view-all-button:hover {\\n transform: translateY(-3px);\\n box-shadow: 0 30px 80px rgba(10, 31, 68, 0.4), \\n 0 15px 30px rgba(10, 31, 68, 0.3);\\n background: linear-gradient(135deg, #162e5a, var(--bifa-deep-navy)) !important;\\n}\\n\\n.bifa-button-text {\\n font-weight: 700 !important;\\n color: #FFFFFF !important;\\n}\\n\\n.bifa-ambassador-count {\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n color: var(--bifa-deep-navy) !important;\\n width: 32px;\\n height: 32px;\\n border-radius: 50%;\\n font-size: 1rem !important;\\n font-weight: 900 !important;\\n margin-left: 10px;\\n}\\n\\n\\\/* ========= ANIMATIONS ========= *\\\/\\n@keyframes fadeInUp {\\n from {\\n opacity: 0;\\n transform: translateY(30px);\\n }\\n to {\\n opacity: 1;\\n transform: translateY(0);\\n }\\n}\\n\\n@keyframes expandWidth {\\n from {\\n width: 0;\\n }\\n to {\\n width: 120px;\\n }\\n}\\n\\n@keyframes loading {\\n 0% {\\n background-position: 200% 0;\\n }\\n 100% {\\n background-position: -200% 0;\\n }\\n}\\n\\n\\\/* ========= RESPONSIVE ========= *\\\/\\n@media (max-width: 1024px) {\\n .bifa-ambassadors-grid {\\n grid-template-columns: repeat(2, 1fr);\\n gap: 35px;\\n }\\n \\n .bifa-ambassador-card:nth-child(n+3) {\\n display: none;\\n opacity: 0;\\n }\\n \\n .bifa-ambassadors-grid.expanded .bifa-ambassador-card:nth-child(n+3) {\\n display: block;\\n animation: fadeInUp 0.8s ease-out forwards;\\n }\\n}\\n\\n@media (max-width: 768px) {\\n .bifa-ambassadors-section {\\n padding: 80px 15px 60px;\\n }\\n \\n .bifa-ambassadors-container {\\n padding: 0 10px;\\n }\\n \\n .bifa-ambassadors-grid {\\n grid-template-columns: 1fr;\\n gap: 30px;\\n }\\n \\n .bifa-ambassador-card:nth-child(n+2) {\\n display: none;\\n opacity: 0;\\n }\\n \\n .bifa-ambassadors-grid.expanded .bifa-ambassador-card:nth-child(n+2) {\\n display: block;\\n animation: fadeInUp 0.8s ease-out forwards;\\n }\\n \\n .bifa-ambassador-image {\\n height: 250px;\\n }\\n \\n \\\/* \\u041c\\u043e\\u0431\\u0438\\u043b\\u044c\\u043d\\u0430\\u044f \\u0446\\u0435\\u043d\\u0442\\u0440\\u043e\\u0432\\u043a\\u0430 \\u043a\\u043d\\u043e\\u043f\\u043e\\u043a Join Us *\\\/\\n .bifa-join-buttons-section {\\n padding: 30px 10px;\\n margin: 40px 0;\\n }\\n \\n .bifa-join-buttons-container {\\n flex-direction: column;\\n align-items: center;\\n gap: 15px;\\n width: 100%;\\n padding: 0;\\n }\\n \\n .bifa-join-button {\\n width: 90%;\\n max-width: 320px;\\n padding: 16px 25px !important;\\n font-size: 0.95rem !important;\\n justify-content: center;\\n text-align: center;\\n }\\n \\n \\\/* \\u0426\\u0435\\u043d\\u0442\\u0440\\u043e\\u0432\\u043a\\u0430 \\u0437\\u0430\\u0433\\u043e\\u043b\\u043e\\u0432\\u043a\\u043e\\u0432 *\\\/\\n .bifa-ambassadors-title-wrapper {\\n padding: 0 10px;\\n margin-bottom: 60px;\\n }\\n \\n .bifa-ambassadors-section-title {\\n font-size: 2.2rem;\\n }\\n \\n .bifa-ambassadors-subtitle {\\n font-size: 1.15rem;\\n padding: 0 10px;\\n }\\n \\n \\\/* \\u041a\\u043d\\u043e\\u043f\\u043a\\u0430 View All *\\\/\\n .bifa-ambassadors-cta {\\n padding: 0 10px;\\n }\\n \\n .bifa-view-all-button {\\n padding: 18px 35px !important;\\n font-size: 1rem !important;\\n width: auto;\\n max-width: 90%;\\n }\\n}\\n\\n@media (max-width: 480px) {\\n .bifa-ambassadors-section {\\n padding: 60px 10px 50px;\\n }\\n \\n .bifa-ambassadors-section-title {\\n font-size: 1.8rem;\\n letter-spacing: 0;\\n }\\n \\n .bifa-ambassadors-subtitle {\\n font-size: 1rem;\\n padding: 0 5px;\\n }\\n \\n .bifa-ambassador-content {\\n padding: 25px 20px;\\n }\\n \\n \\\/* \\u0415\\u0449\\u0451 \\u0431\\u043e\\u043b\\u0435\\u0435 \\u043a\\u043e\\u043c\\u043f\\u0430\\u043a\\u0442\\u043d\\u044b\\u0435 \\u043a\\u043d\\u043e\\u043f\\u043a\\u0438 \\u0434\\u043b\\u044f \\u043c\\u0430\\u043b\\u044b\\u0445 \\u044d\\u043a\\u0440\\u0430\\u043d\\u043e\\u0432 *\\\/\\n .bifa-join-buttons-section {\\n padding: 25px 5px;\\n margin: 30px 0;\\n }\\n \\n .bifa-join-button {\\n width: 95%;\\n max-width: 280px;\\n font-size: 0.85rem !important;\\n padding: 14px 20px !important;\\n letter-spacing: 0.3px;\\n }\\n \\n .bifa-join-button svg {\\n width: 16px;\\n height: 16px;\\n }\\n \\n \\\/* View All button \\u043d\\u0430 \\u043c\\u0430\\u043b\\u044b\\u0445 \\u044d\\u043a\\u0440\\u0430\\u043d\\u0430\\u0445 *\\\/\\n .bifa-view-all-button {\\n padding: 16px 30px !important;\\n font-size: 0.95rem !important;\\n }\\n \\n .bifa-ambassador-count {\\n width: 28px;\\n height: 28px;\\n font-size: 0.9rem !important;\\n }\\n}\\n\\n\\\/* \\u0414\\u043e\\u043f\\u043e\\u043b\\u043d\\u0438\\u0442\\u0435\\u043b\\u044c\\u043d\\u044b\\u0435 \\u0441\\u0442\\u0438\\u043b\\u0438 \\u0434\\u043b\\u044f \\u043e\\u0447\\u0435\\u043d\\u044c \\u043c\\u0430\\u043b\\u044b\\u0445 \\u044d\\u043a\\u0440\\u0430\\u043d\\u043e\\u0432 *\\\/\\n@media (max-width: 380px) {\\n .bifa-ambassadors-section-title {\\n font-size: 1.6rem;\\n }\\n \\n .bifa-join-button {\\n width: 98%;\\n font-size: 0.8rem !important;\\n padding: 12px 18px !important;\\n gap: 8px;\\n }\\n \\n \\\/* \\u0423\\u0431\\u0438\\u0440\\u0430\\u0435\\u043c \\u0433\\u043e\\u0440\\u0438\\u0437\\u043e\\u043d\\u0442\\u0430\\u043b\\u044c\\u043d\\u044b\\u0439 \\u0441\\u043a\\u0440\\u043e\\u043b\\u043b *\\\/\\n .bifa-ambassadors-section-wrapper {\\n overflow-x: hidden;\\n }\\n}\\n<\\\/style>\\n<\\\/head>\\n<body>\\n\\n<\/p>\n<div class=\"\\\"bifa-ambassadors-section-wrapper\\\"\">\\n \\n <\/p>\n<section class=\"\\\"bifa-ambassadors-section\\\"\">\\n \\n <\/p>\n<div class=\"\\\"bifa-ambassadors-bg-animation\\\"\">\\n \\n <\/p>\n<div class=\"\\\"bifa-floating-shape-amb\" bifa-shape-ambassadors-1\\\"><\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-floating-shape-amb\" bifa-shape-ambassadors-2\\\"><\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-floating-shape-amb\" bifa-shape-ambassadors-3\\\"><\\\/div>\\n \\n <\\\/div>\\n\\n <\/p>\n<div class=\"\\\"bifa-ambassadors-container\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-ambassadors-title-wrapper\\\"\">\\n <\/p>\n<h2 class=\"\\\"bifa-ambassadors-section-title\\\"\">Be Part of BIFA<\\\/h2>\\n <\/p>\n<p class=\"\\\"bifa-ambassadors-subtitle\\\"\">\\n Whether you're a student, coach, or fan, there's a role for you in building football's future.\\n <\\\/p>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"bifa-join-buttons-section\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-join-buttons-container\\\"\">\\n <a href=\"\\\"https:\\\/\\\/bifa.ai\\\/join\\\/#volunteers\\\"\" class=\"\\\"bifa-join-button\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"currentColor\\\"\">\\n <path d=\"\\\"M12\" 2c6.48 2 6.48 12s4.48 10 10-4.48 10-10s17.52 12 2zm-2 15l-5-5 1.41-1.41l10 14.17l7.59-7.59l19 8l-9 9z\\\"\\>\\n <\\\/svg>\\n Apply as Volunteer\\n <\\\/a>\\n <a href=\"\\\"https:\\\/\\\/bifa.ai\\\/join\\\/#representatives\\\"\" class=\"\\\"bifa-join-button\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"currentColor\\\"\">\\n <path d=\"\\\"M19\" 3h-4.18c14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2h5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2h14c1.1 0 2-.9 2-2v5c0-1.1-.9-2-2-2zm-7 0c.55 .45 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14h7v-2h7v2zm3-4h7v-2h10v2zm0-4h7v7h10v2z\\\"\\>\\n <\\\/svg>\\n Apply as Representative\\n <\\\/a>\\n <a href=\"\\\"https:\\\/\\\/bifa.ai\\\/join\\\/#ambassadors\\\"\" class=\"\\\"bifa-join-button\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"currentColor\\\"\">\\n <path d=\"\\\"M12\" 2l3.09 6.26l22 9.27l-5 4.87 1.18 6.88l12 17.77l-6.18 3.25l7 14.14 2 9.27l6.91-1.01l12 2z\\\"\\>\\n <\\\/svg>\\n Apply as Ambassador\\n <\\\/a>\\n <\\\/div>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"bifa-ambassadors-grid\\\"\" id=\"\\\"bifa-ambassadors-grid\\\"\">\\n \\n <\/p>\n<div class=\"\\\"bifa-loading-container\\\"\" id=\"\\\"bifa-loading\\\"\" style=\"\\\"grid-column:\" 1\\-1;\\\">\\n <\/p>\n<div class=\"\\\"bifa-loading-spinner\\\"\"><\\\/div>\\n <\/p>\n<p class=\"\\\"bifa-loading-text\\\"\">Loading ambassadors...<\\\/p>\\n <\\\/div>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"bifa-ambassadors-cta\\\"\" id=\"\\\"bifa-cta\\\"\" style=\"\\\"display:\" none;\\\">\\n <button class=\"\\\"bifa-view-all-button\\\"\" id=\"\\\"bifa-view-all-button\\\"\" type=\"\\\"button\\\"\">\\n <span class=\"\\\"bifa-button-text\\\"\">View All Ambassadors<\\\/span>\\n <span class=\"\\\"bifa-ambassador-count\\\"\">0<\\\/span>\\n <svg width=\"\\\"20\\\"\" height=\"\\\"20\\\"\" viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\" stroke=\"\\\"#FFFFFF\\\"\" stroke-width=\"\\\"2.5\\\"\">\\n <path d=\"\\\"M5\" 12h19m19 12l12 5m19 19\\\" stroke =\"\\\"#FFFFFF\\\"\" stroke-width=\"\\\"2.5\\\"\" stroke-linecap=\"\\\"round\\\"\" stroke-linejoin=\"\\\"round\\\"\\\/\">\\n <\\\/svg>\\n <\\\/button>\\n <\\\/div>\\n <\\\/div>\\n <\\\/section>\\n<\\\/div>\\n\\n<script>\\n\\\/\\\/ BIFA+ Dynamic Ambassadors Module with REST API Integration - PRODUCTION VERSION\\n(function() {\\n 'use strict';\\n \\n \\\/\\\/ Configuration\\n const CONFIG = {\\n apiUrl: '\\\/wp-json\\\/bifa\\\/v1\\\/ambassadors',\\n particleCount: 12,\\n visibleCardsDesktop: 3,\\n visibleCardsTablet: 2,\\n visibleCardsMobile: 1,\\n isExpanded: false\\n };\\n \\n \\\/\\\/ Country flags mapping\\n const FLAGS = {\\n 'BR': '\\ud83c\\udde7\\ud83c\\uddf7',\\n 'RU': '\\ud83c\\uddf7\\ud83c\\uddfa',\\n 'IN': '\\ud83c\\uddee\\ud83c\\uddf3',\\n 'CN': '\\ud83c\\udde8\\ud83c\\uddf3',\\n 'ZA': '\\ud83c\\uddff\\ud83c\\udde6',\\n 'SA': '\\ud83c\\uddf8\\ud83c\\udde6',\\n 'AE': '\\ud83c\\udde6\\ud83c\\uddea',\\n 'EG': '\\ud83c\\uddea\\ud83c\\uddec',\\n 'IR': '\\ud83c\\uddee\\ud83c\\uddf7',\\n 'ET': '\\ud83c\\uddea\\ud83c\\uddf9',\\n 'ID': '\\ud83c\\uddee\\ud83c\\udde9',\\n 'AR': '\\ud83c\\udde6\\ud83c\\uddf7'\\n };\\n \\n \\\/\\\/ State\\n let ambassadors = [];\\n let visibleCards = CONFIG.visibleCardsDesktop;\\n \\n \\\/\\\/ Initialize\\n function init() {\\n \\\/\\\/ Create particles\\n createParticles();\\n \\n \\\/\\\/ Determine visible cards based on screen size\\n updateVisibleCards();\\n \\n \\\/\\\/ Load ambassadors data\\n loadAmbassadors();\\n \\n \\\/\\\/ Setup event listeners\\n setupEventListeners();\\n \\n \\\/\\\/ Setup resize handler\\n window.addEventListener('resize', debounce(updateVisibleCards, 250));\\n }\\n \\n \\\/\\\/ Create golden particles\\n function createParticles() {\\n const particlesContainer = document.querySelector('.bifa-ambassadors-bg-animation');\\n if (!particlesContainer) return;\\n \\n for (let i = 0; i < CONFIG.particleCount; i++) {\\n const particle = document.createElement('div');\\n particle.className = 'bifa-ambassadors-particle';\\n particle.style.left = Math.random() * 100 + '%';\\n particle.style.animationDelay = Math.random() * 20 + 's';\\n particle.style.animationDuration = (18 + Math.random() * 10) + '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 \\n \\\/\\\/ Update visible cards based on screen size\\n function updateVisibleCards() {\\n const width = window.innerWidth;\\n if (width <= 768) {\\n visibleCards = CONFIG.visibleCardsMobile;\\n } else if (width <= 1024) {\\n visibleCards = CONFIG.visibleCardsTablet;\\n } else {\\n visibleCards = CONFIG.visibleCardsDesktop;\\n }\\n }\\n \\n \\\/\\\/ Load ambassadors from REST API\\n async function loadAmbassadors() {\\n const grid = document.getElementById('bifa-ambassadors-grid');\\n const loadingContainer = document.getElementById('bifa-loading');\\n \\n try {\\n const apiUrl = `${window.location.protocol}\\\/\\\/${window.location.host}${CONFIG.apiUrl}`;\\n const response = await fetch(apiUrl);\\n \\n if (!response.ok) {\\n throw new Error(`API Error: ${response.status} ${response.statusText}`);\\n }\\n \\n ambassadors = await response.json();\\n \\n \\\/\\\/ Remove loading state\\n if (loadingContainer) {\\n loadingContainer.remove();\\n }\\n \\n \\\/\\\/ Check if we have ambassadors\\n if (ambassadors.length === 0) {\\n showEmptyState(grid);\\n return;\\n }\\n \\n \\\/\\\/ Sort ambassadors by order\\n ambassadors.sort((a, b) => {\\n const orderA = parseInt(a.order) || 999;\\n const orderB = parseInt(b.order) || 999;\\n return orderA - orderB;\\n });\\n \\n \\\/\\\/ Render ambassadors\\n renderAmbassadors(grid);\\n \\n \\\/\\\/ Setup view all button\\n setupViewAllButton();\\n \\n } catch (error) {\\n console.error('BIFA Ambassadors: Error loading data:', error);\\n \\n \\\/\\\/ Remove loading state\\n if (loadingContainer) {\\n loadingContainer.remove();\\n }\\n \\n \\\/\\\/ Show error state\\n showErrorState(grid, error);\\n }\\n }\\n \\n \\\/\\\/ Render ambassadors cards\\n function renderAmbassadors(grid) {\\n \\\/\\\/ Clear grid\\n grid.innerHTML = '';\\n \\n \\\/\\\/ Render each ambassador\\n ambassadors.forEach((ambassador, index) => {\\n const card = createAmbassadorCard(ambassador, index);\\n grid.appendChild(card);\\n });\\n }\\n \\n \\\/\\\/ Create ambassador card element - PRODUCTION VERSION\\n function createAmbassadorCard(ambassador, index) {\\n const card = document.createElement('a');\\n card.className = 'bifa-ambassador-card';\\n card.href = ambassador.link || `\\\/ambassadors\\\/${ambassador.slug || ambassador.id}\\\/`;\\n card.setAttribute('data-id', ambassador.id);\\n \\n \\\/\\\/ Add animation delay\\n card.style.animationDelay = `${0.8 + (index * 0.2)}s`;\\n \\n \\\/\\\/ Select best available image\\n let imageUrl = null;\\n \\n \\\/\\\/ Priority: avatar -> featured_image -> portrait -> thumbnail\\n if (ambassador.avatar && ambassador.avatar.length > 0 && ambassador.avatar !== 'false') {\\n imageUrl = ambassador.avatar;\\n } else if (ambassador.featured_image && ambassador.featured_image.length > 0 && ambassador.featured_image !== 'false') {\\n imageUrl = ambassador.featured_image;\\n } else if (ambassador.portrait && ambassador.portrait.length > 0 && ambassador.portrait !== 'false') {\\n imageUrl = ambassador.portrait;\\n } else if (ambassador.thumbnail && ambassador.thumbnail.length > 0 && ambassador.thumbnail !== 'false') {\\n imageUrl = ambassador.thumbnail;\\n }\\n \\n \\\/\\\/ Create image container\\n const imageContainer = document.createElement('div');\\n imageContainer.className = 'bifa-ambassador-image';\\n \\n if (imageUrl && imageUrl !== 'false' && imageUrl !== false) {\\n \\\/\\\/ Create img element programmatically\\n const img = document.createElement('img');\\n img.src = imageUrl;\\n img.alt = ambassador.title || '';\\n img.loading = 'lazy';\\n \\n \\\/\\\/ Add error event listener for fallback\\n img.addEventListener('error', function() {\\n \\\/\\\/ Replace with placeholder on error\\n imageContainer.innerHTML = `\\n <\/p>\n<div class=\"\\\"bifa-ambassador-no-image\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\" stroke=\"\\\"currentColor\\\"\" stroke-width=\"\\\"1\\\"\">\\n <path d=\"\\\"M20\" 21v-2a4 4 0 0-4-4h8a4 0-4 4v2\\\"><\\\/path>\\n <circle cx=\"\\\"12\\\"\" cy=\"\\\"7\\\"\" r=\"\\\"4\\\"\"><\\\/circle>\\n <\\\/svg>\\n <\\\/div>\\n `;\\n });\\n \\n imageContainer.appendChild(img);\\n } else {\\n imageContainer.innerHTML = `\\n <\/p>\n<div class=\"\\\"bifa-ambassador-no-image\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\" stroke=\"\\\"currentColor\\\"\" stroke-width=\"\\\"1\\\"\">\\n <path d=\"\\\"M20\" 21v-2a4 4 0 0-4-4h8a4 0-4 4v2\\\"><\\\/path>\\n <circle cx=\"\\\"12\\\"\" cy=\"\\\"7\\\"\" r=\"\\\"4\\\"\"><\\\/circle>\\n <\\\/svg>\\n <\\\/div>\\n `;\\n }\\n \\n \\\/\\\/ Add country flag\\n let countryHtml = '';\\n if (ambassador.country && FLAGS[ambassador.country]) {\\n countryHtml = `\\n <\/p>\n<div class=\"\\\"bifa-ambassador-country\\\"\">\\n ${FLAGS[ambassador.country]}\\n <\\\/div>\\n `;\\n }\\n \\n \\\/\\\/ Add badge\\n let badgeHtml = '';\\n if (ambassador.badge) {\\n badgeHtml = `\\n <\/p>\n<div class=\"\\\"bifa-ambassador-badge\" ${ambassador.featured ? 'featured' : ''}\\\">\\n ${escapeHtml(ambassador.badge)}\\n <\\\/div>\\n `;\\n } else if (ambassador.featured) {\\n badgeHtml = `\\n <\/p>\n<div class=\"\\\"bifa-ambassador-badge\" featured\\\">\\n Featured\\n <\\\/div>\\n `;\\n }\\n \\n \\\/\\\/ Build other content with innerHTML\\n const contentHtml = `\\n ${badgeHtml}\\n ${countryHtml}\\n <\/p>\n<div class=\"\\\"bifa-ambassador-content\\\"\">\\n <\/p>\n<h3 class=\"\\\"bifa-ambassador-name\\\"\">${escapeHtml(ambassador.title)}<\\\/h3>\\n ${ambassador.role ? `<\/p>\n<p class=\"\\\"bifa-ambassador-role\\\"\">${escapeHtml(ambassador.role)}<\\\/p>` : ''}\\n ${ambassador.organization ? `<\/p>\n<p class=\"\\\"bifa-ambassador-organization\\\"\">${escapeHtml(ambassador.organization)}<\\\/p>` : ''}\\n ${ambassador.quote ? `<\/p>\n<p class=\"\\\"bifa-ambassador-quote\\\"\">${escapeHtml(ambassador.quote)}<\\\/p>` : ''}\\n ${!ambassador.quote && ambassador.bio_short ? `<\/p>\n<p class=\"\\\"bifa-ambassador-quote\\\"\">${escapeHtml(ambassador.bio_short)}<\\\/p>` : ''}\\n <\\\/div>\\n `;\\n \\n \\\/\\\/ Set initial HTML (without image)\\n card.innerHTML = contentHtml;\\n \\n \\\/\\\/ Insert image container at the correct position\\n const contentDiv = card.querySelector('.bifa-ambassador-content');\\n card.insertBefore(imageContainer, contentDiv);\\n \\n return card;\\n }\\n \\n \\\/\\\/ Setup view all button\\n function setupViewAllButton() {\\n const ctaSection = document.getElementById('bifa-cta');\\n const button = document.getElementById('bifa-view-all-button');\\n const countBadge = button.querySelector('.bifa-ambassador-count');\\n \\n \\\/\\\/ Calculate hidden cards\\n const hiddenCards = ambassadors.length - visibleCards;\\n \\n \\\/\\\/ Show\\\/hide button based on card count\\n if (hiddenCards > 0) {\\n ctaSection.style.display = 'block';\\n countBadge.textContent = hiddenCards;\\n } else {\\n ctaSection.style.display = 'none';\\n }\\n }\\n \\n \\\/\\\/ Setup event listeners\\n function setupEventListeners() {\\n const button = document.getElementById('bifa-view-all-button');\\n if (button) {\\n button.addEventListener('click', toggleAllAmbassadors);\\n }\\n }\\n \\n \\\/\\\/ Toggle expand\\\/collapse\\n function toggleAllAmbassadors() {\\n const grid = document.getElementById('bifa-ambassadors-grid');\\n const button = document.getElementById('bifa-view-all-button');\\n const buttonText = button.querySelector('.bifa-button-text');\\n const countBadge = button.querySelector('.bifa-ambassador-count');\\n \\n CONFIG.isExpanded = !CONFIG.isExpanded;\\n \\n if (CONFIG.isExpanded) {\\n \\\/\\\/ Expand\\n grid.classList.add('expanded');\\n button.classList.add('expanded');\\n buttonText.textContent = 'Show Less';\\n countBadge.style.display = 'none';\\n \\n \\\/\\\/ Smooth scroll to newly visible cards\\n setTimeout(() => {\\n const fourthCard = document.querySelector('.bifa-ambassador-card:nth-child(4)');\\n if (fourthCard) {\\n const rect = fourthCard.getBoundingClientRect();\\n const scrollTop = window.pageYOffset || document.documentElement.scrollTop;\\n const targetY = rect.top + scrollTop - 100;\\n \\n window.scrollTo({\\n top: targetY,\\n behavior: 'smooth'\\n });\\n }\\n }, 100);\\n } else {\\n \\\/\\\/ Collapse\\n grid.classList.remove('expanded');\\n button.classList.remove('expanded');\\n buttonText.textContent = 'View All Ambassadors';\\n countBadge.style.display = 'inline-flex';\\n \\n \\\/\\\/ Update count\\n const hiddenCards = ambassadors.length - visibleCards;\\n countBadge.textContent = hiddenCards;\\n \\n \\\/\\\/ Scroll back to top of section\\n const section = document.querySelector('.bifa-ambassadors-section');\\n section.scrollIntoView({ behavior: 'smooth', block: 'start' });\\n }\\n }\\n \\n \\\/\\\/ Show empty state\\n function showEmptyState(grid) {\\n grid.innerHTML = `\\n <\/p>\n<div class=\"\\\"bifa-empty-container\\\"\" style=\"\\\"grid-column:\" 1\\-1;\\\">\\n <\/p>\n<div class=\"\\\"bifa-empty-icon\\\"\">\\ud83d\\udc65<\\\/div>\\n <\/p>\n<h3 class=\"\\\"bifa-empty-message\\\"\">No Ambassadors Yet<\\\/h3>\\n <\/p>\n<p class=\"\\\"bifa-empty-submessage\\\"\">We're currently recruiting ambassadors for BIFA programs.<\\\/p>\\n <\\\/div>\\n `;\\n }\\n \\n \\\/\\\/ Show error state\\n function showErrorState(grid, error) {\\n grid.innerHTML = `\\n <\/p>\n<div class=\"\\\"bifa-error-container\\\"\" style=\"\\\"grid-column:\" 1\\-1;\\\">\\n <\/p>\n<div class=\"\\\"bifa-error-icon\\\"\">\\u26a0\\ufe0f<\\\/div>\\n <\/p>\n<h3 class=\"\\\"bifa-error-message\\\"\">Unable to Load Ambassadors<\\\/h3>\\n <\/p>\n<p class=\"\\\"bifa-error-details\\\"\">${error.message}<\\\/p>\\n <button class=\"\\\"bifa-retry-button\\\"\" onclick=\"\\\"location.reload()\\\"\">\\n Retry\\n <\\\/button>\\n <\\\/div>\\n `;\\n }\\n \\n \\\/\\\/ Utility: Escape HTML\\n function escapeHtml(text) {\\n if (!text) return '';\\n const map = {\\n '&': '&',\\n '<': '<',\\n '>': '>',\\n '\\\"': '"',\\n \\\"'\\\": '''\\n };\\n return text.replace(\\\/[&<>\\\"']\\\/g, m => map[m]);\\n }\\n \\n \\\/\\\/ Utility: Debounce\\n function debounce(func, wait) {\\n let timeout;\\n return function executedFunction(...args) {\\n const later = () => {\\n clearTimeout(timeout);\\n func(...args);\\n };\\n clearTimeout(timeout);\\n timeout = setTimeout(later, wait);\\n };\\n }\\n \\n \\\/\\\/ Initialize when DOM is ready\\n if (document.readyState === 'loading') {\\n document.addEventListener('DOMContentLoaded', init);\\n } else {\\n init();\\n }\\n \\n})();\\n<\\\/script>\\n\\n<\\\/body>\\n<\\\/html>\"}},{\"type\":\"html\",\"props\":{\"content\":\"<!DOCTYPE html>\\n<html lang=\"\\\"ru\\\"\">\\n<head>\\n <meta charset=\"\\\"UTF-8\\\"\">\\n <meta name=\"\\\"viewport\\\"\" content=\"\\\"width=device-width,\" initial-scale=\"1.0\\\"\">\\n <title>BIFA+ - Partners & Sponsors<\\\/title>\\n \\n \\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&family=Cairo:wght@300;400;500;600;700;800&family=Tajawal:wght@300;400;500;700;800&display=swap\\\"\" rel=\"\\\"stylesheet\\\"\">\\n \\n <\/p>\n<style>\\n \\\/* ========= \\u0413\\u041b\\u041e\\u0411\\u0410\\u041b\\u042c\\u041d\\u042b\\u0415 \\u041f\\u0415\\u0420\\u0415\\u041c\\u0415\\u041d\\u041d\\u042b\\u0415 BIFA+ ========= *\\\/\\n :root {\\n \\\/* \\u041e\\u0444\\u0438\\u0446\\u0438\\u0430\\u043b\\u044c\\u043d\\u044b\\u0435 \\u0446\\u0432\\u0435\\u0442\\u0430 BIFA+ *\\\/\\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 \\\/* \\u041e\\u0444\\u0438\\u0446\\u0438\\u0430\\u043b\\u044c\\u043d\\u044b\\u0435 \\u0448\\u0440\\u0438\\u0444\\u0442\\u044b BIFA+ *\\\/\\n --bifa-font-heading: 'Montserrat', 'Cairo', sans-serif;\\n --bifa-font-body: 'Poppins', 'Tajawal', sans-serif;\\n --bifa-font-arabic: 'Cairo', 'Tajawal', 'GE SS Text', sans-serif;\\n }\\n\\n \\\/* ========= RESET ========= *\\\/\\n * {\\n box-sizing: border-box;\\n margin: 0;\\n padding: 0;\\n }\\n \\n body {\\n font-family: var(--bifa-font-body);\\n overflow-x: hidden;\\n background: var(--bifa-bright-white);\\n }\\n\\n \\\/* ========= \\u0410\\u041d\\u0418\\u041c\\u0410\\u0426\\u0418\\u0418 ========= *\\\/\\n @keyframes goldPulse {\\n 0%, 100% { opacity: 0.6; }\\n 50% { opacity: 1; }\\n }\\n\\n @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(50px);\\n opacity: 0;\\n }\\n }\\n \\n @keyframes fadeInDown {\\n from {\\n opacity: 0;\\n transform: translateY(-40px);\\n }\\n to {\\n opacity: 1;\\n transform: translateY(0);\\n }\\n }\\n\\n @keyframes fadeInUp {\\n from {\\n opacity: 0;\\n transform: translateY(40px);\\n }\\n to {\\n opacity: 1;\\n transform: translateY(0);\\n }\\n }\\n\\n @keyframes partners-pulse {\\n 0%, 100% { \\n filter: brightness(1.1) drop-shadow(0 0 10px rgba(212, 175, 55, 0.4)); \\n transform: scale(1);\\n }\\n 50% { \\n filter: brightness(1.3) drop-shadow(0 0 20px rgba(212, 175, 55, 0.6)); \\n transform: scale(1.02);\\n }\\n }\\n\\n @keyframes partners-twinkle {\\n 0%, 100% { \\n opacity: 0.3; \\n transform: scale(1); \\n }\\n 50% { \\n opacity: 1; \\n transform: scale(1.5); \\n }\\n }\\n\\n @keyframes partners-float-neon {\\n 0%, 100% {\\n transform: translate(0, 0) scale(1);\\n }\\n 33% {\\n transform: translate(50px, -80px) scale(1.1);\\n }\\n 66% {\\n transform: translate(-50px, 50px) scale(0.9);\\n }\\n }\\n\\n @keyframes partners-rotate-slow {\\n from { transform: rotate(0deg); }\\n to { transform: rotate(360deg); }\\n }\\n\\n @keyframes textRotate {\\n 0% {\\n opacity: 0;\\n transform: translateY(-50%) translateY(20px);\\n }\\n 10% {\\n opacity: 1;\\n transform: translateY(-50%) translateY(0);\\n }\\n 40% {\\n opacity: 1;\\n transform: translateY(-50%) translateY(0);\\n }\\n 50% {\\n opacity: 0;\\n transform: translateY(-50%) translateY(-20px);\\n }\\n 100% {\\n opacity: 0;\\n transform: translateY(-50%) translateY(-20px);\\n }\\n }\\n\\n @keyframes textGlow {\\n 0%, 100% {\\n text-shadow: \\n 0 0 10px rgba(212, 175, 55, 0.3),\\n 0 0 20px rgba(212, 175, 55, 0.2),\\n 0 0 30px rgba(212, 175, 55, 0.1);\\n filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.2));\\n }\\n 50% {\\n text-shadow: \\n 0 0 15px rgba(212, 175, 55, 0.5),\\n 0 0 30px rgba(212, 175, 55, 0.4),\\n 0 0 45px rgba(212, 175, 55, 0.3),\\n 0 0 60px rgba(212, 175, 55, 0.2);\\n filter: drop-shadow(0 0 25px rgba(212, 175, 55, 0.3));\\n }\\n }\\n\\n \\\/* ========= \\u041e\\u0421\\u041d\\u041e\\u0412\\u041d\\u041e\\u0419 \\u041a\\u041e\\u041d\\u0422\\u0415\\u0419\\u041d\\u0415\\u0420 ========= *\\\/\\n .partners-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 }\\n\\n \\\/* \\u0421\\u0432\\u044f\\u0437\\u0443\\u044e\\u0449\\u0430\\u044f \\u043b\\u0438\\u043d\\u0438\\u044f \\u0441 \\u043f\\u0440\\u0435\\u0434\\u044b\\u0434\\u0443\\u0449\\u0435\\u0439 \\u0441\\u0435\\u043a\\u0446\\u0438\\u0435\\u0439 *\\\/\\n .partners-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 }\\n\\n .bifa-partners-container {\\n position: relative;\\n padding: 80px 0;\\n background: transparent;\\n overflow: hidden;\\n }\\n\\n .bifa-partners-container::before {\\n content: '';\\n position: absolute;\\n inset: 0;\\n background: radial-gradient(circle at 30% 50%, rgba(212, 175, 55, 0.03), transparent 50%),\\n radial-gradient(circle at 70% 80%, rgba(10, 31, 68, 0.03), transparent 50%);\\n z-index: 0;\\n }\\n\\n \\\/* ========= \\u0427\\u0410\\u0421\\u0422\\u0418\\u0426\\u042b \\u0418 \\u0414\\u0415\\u041a\\u041e\\u0420\\u0410\\u0422\\u0418\\u0412\\u041d\\u042b\\u0415 \\u042d\\u041b\\u0415\\u041c\\u0415\\u041d\\u0422\\u042b ========= *\\\/\\n .bg-particles {\\n position: absolute;\\n width: 100%;\\n height: 100%;\\n overflow: hidden;\\n z-index: 2;\\n }\\n\\n .particle {\\n position: absolute;\\n width: 4px;\\n height: 4px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n border-radius: 50%;\\n animation: float 15s infinite linear;\\n box-shadow: 0 0 8px rgba(212, 175, 55, 0.3);\\n opacity: 0.3;\\n }\\n\\n .neon-elements {\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n overflow: hidden;\\n z-index: 0;\\n pointer-events: none;\\n }\\n\\n .neon-circle {\\n position: absolute;\\n border-radius: 50%;\\n filter: blur(40px);\\n animation: partners-float-neon 20s ease-in-out infinite;\\n }\\n\\n .neon-circle:nth-child(1) {\\n width: 300px;\\n height: 300px;\\n background: rgba(212, 175, 55, 0.08);\\n top: -150px;\\n left: -150px;\\n animation: partners-float-neon 18s ease-in-out infinite;\\n }\\n\\n .neon-circle:nth-child(2) {\\n width: 400px;\\n height: 400px;\\n background: rgba(10, 31, 68, 0.06);\\n bottom: -200px;\\n right: -200px;\\n animation: partners-float-neon 25s ease-in-out infinite;\\n animation-delay: 5s;\\n }\\n\\n .neon-circle:nth-child(3) {\\n width: 250px;\\n height: 250px;\\n background: rgba(29, 97, 67, 0.05);\\n top: 50%;\\n left: 50%;\\n transform: translate(-50%, -50%);\\n animation: partners-float-neon 30s ease-in-out infinite;\\n animation-delay: 10s;\\n }\\n\\n .glow-dot {\\n position: absolute;\\n width: 4px;\\n height: 4px;\\n background: rgba(212, 175, 55, 0.8);\\n border-radius: 50%;\\n box-shadow: 0 0 10px rgba(212, 175, 55, 0.8);\\n animation: partners-twinkle 3s ease-in-out infinite;\\n }\\n\\n .glow-dot:nth-child(6) {\\n top: 15%;\\n right: 10%;\\n animation-delay: 0s;\\n }\\n\\n .glow-dot:nth-child(7) {\\n bottom: 25%;\\n left: 8%;\\n animation-delay: 1.5s;\\n }\\n\\n .glow-dot:nth-child(8) {\\n top: 70%;\\n right: 30%;\\n animation-delay: 2.5s;\\n }\\n\\n \\\/* ========= \\u041a\\u041e\\u041d\\u0422\\u0415\\u041d\\u0422 ========= *\\\/\\n .content-wrapper {\\n position: relative;\\n z-index: 2;\\n max-width: 1400px;\\n margin: 0 auto;\\n padding: 0 40px;\\n }\\n\\n \\\/* ========= \\u0417\\u0410\\u0413\\u041e\\u041b\\u041e\\u0412\\u041e\\u041a \\u0421\\u0415\\u041a\\u0426\\u0418\\u0418 ========= *\\\/\\n .section-header {\\n text-align: center;\\n margin-bottom: 60px;\\n position: relative;\\n z-index: 1;\\n animation: fadeInDown 1.2s ease;\\n }\\n\\n .partners-title {\\n font-family: var(--bifa-font-heading);\\n font-size: clamp(3rem, 5vw, 4.5rem);\\n font-weight: 900;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n margin-bottom: 25px;\\n text-transform: uppercase;\\n position: relative;\\n cursor: pointer;\\n transition: all 0.3s ease;\\n text-decoration: none;\\n display: inline-block;\\n }\\n\\n .partners-title::after {\\n content: '';\\n position: absolute;\\n bottom: -10px;\\n left: 50%;\\n transform: translateX(-50%);\\n width: 0;\\n height: 3px;\\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700);\\n transition: width 0.4s ease;\\n }\\n\\n .partners-title:hover {\\n transform: translateY(-3px);\\n }\\n\\n .partners-title:hover::after {\\n width: 100%;\\n }\\n\\n \\\/* \\u041a\\u043e\\u043d\\u0442\\u0435\\u0439\\u043d\\u0435\\u0440 \\u0434\\u043b\\u044f \\u0430\\u043d\\u0438\\u043c\\u0430\\u0446\\u0438\\u0438 \\u0441\\u043c\\u0435\\u043d\\u044b \\u0442\\u0435\\u043a\\u0441\\u0442\\u043e\\u0432 *\\\/\\n .subtitle-container {\\n position: relative;\\n height: 60px;\\n margin-bottom: 20px;\\n overflow: visible;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n }\\n\\n .partners-subtitle,\\n .partners-slogan {\\n font-family: var(--bifa-font-body);\\n font-size: clamp(1.2rem, 2.5vw, 1.8rem);\\n color: var(--bifa-deep-navy);\\n font-weight: 600;\\n letter-spacing: 2px;\\n position: absolute;\\n width: 100%;\\n left: 0;\\n top: 50%;\\n transform: translateY(-50%);\\n margin: 0;\\n text-align: center;\\n opacity: 0;\\n z-index: 2;\\n }\\n\\n .partners-subtitle {\\n animation: textRotate 8s ease-in-out infinite;\\n }\\n\\n .partners-slogan {\\n font-family: var(--bifa-font-heading);\\n font-weight: 700;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n animation: textRotate 8s ease-in-out infinite, textGlow 2s ease-in-out infinite;\\n animation-delay: 4s, 4s;\\n }\\n\\n .partners-description {\\n max-width: 900px;\\n margin: 0 auto;\\n font-family: var(--bifa-font-body);\\n font-size: clamp(1rem, 1.5vw, 1.2rem);\\n line-height: 1.8;\\n color: #4a5568;\\n font-weight: 400;\\n opacity: 0;\\n animation: fadeInUp 1s ease forwards;\\n animation-delay: 2s;\\n }\\n\\n .highlight {\\n font-weight: 700;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n }\\n\\n \\\/* ========= \\u041a\\u0410\\u0422\\u0415\\u0413\\u041e\\u0420\\u0418\\u0418 \\u041f\\u0410\\u0420\\u0422\\u041d\\u0415\\u0420\\u041e\\u0412 ========= *\\\/\\n .partner-categories {\\n margin-bottom: 50px;\\n position: relative;\\n z-index: 1;\\n animation: fadeInUp 1s ease-out 0.2s both;\\n }\\n\\n .category-tabs {\\n display: flex;\\n justify-content: center;\\n gap: 20px;\\n flex-wrap: wrap;\\n }\\n\\n .category-tab {\\n padding: 14px 35px;\\n background: rgba(255, 255, 255, 0.95);\\n backdrop-filter: blur(10px);\\n border: 2px solid rgba(212, 175, 55, 0.2);\\n border-radius: 50px;\\n font-weight: 600;\\n color: var(--bifa-deep-navy);\\n cursor: pointer;\\n transition: all 0.3s ease;\\n font-size: 1rem;\\n text-transform: uppercase;\\n letter-spacing: 0.5px;\\n font-family: var(--bifa-font-heading);\\n box-shadow: 0 2px 10px rgba(212, 175, 55, 0.08);\\n position: relative;\\n overflow: hidden;\\n }\\n\\n .category-tab::before {\\n content: '';\\n position: absolute;\\n top: 0;\\n left: -100%;\\n width: 100%;\\n height: 100%;\\n background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.3), transparent);\\n transition: left 0.5s ease;\\n }\\n\\n .category-tab:hover::before {\\n left: 100%;\\n }\\n\\n .category-tab:hover {\\n transform: translateY(-3px);\\n box-shadow: 0 10px 30px rgba(212, 175, 55, 0.2);\\n border-color: var(--bifa-heritage-gold);\\n background: rgba(255, 255, 255, 1);\\n }\\n\\n .category-tab.active {\\n background: linear-gradient(135deg, var(--bifa-heritage-gold) 0%, #ffd700 100%);\\n color: var(--bifa-deep-navy);\\n border-color: transparent;\\n box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);\\n font-weight: 800;\\n }\\n\\n \\\/* ========= \\u0421\\u0415\\u0422\\u041a\\u0410 \\u041f\\u0410\\u0420\\u0422\\u041d\\u0415\\u0420\\u041e\\u0412 ========= *\\\/\\n .partners-grid {\\n display: grid;\\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\\n gap: 30px;\\n margin-bottom: 60px;\\n position: relative;\\n z-index: 1;\\n animation: fadeInUp 1s ease-out 0.4s both;\\n }\\n\\n .partner-card {\\n background: rgba(255, 255, 255, 0.98);\\n backdrop-filter: blur(10px);\\n border-radius: 20px;\\n overflow: hidden;\\n box-shadow: 0 2px 10px rgba(212, 175, 55, 0.08);\\n cursor: pointer;\\n transition: all 0.3s ease;\\n position: relative;\\n border: 2px solid rgba(212, 175, 55, 0.1);\\n height: 250px;\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n justify-content: center;\\n padding: 40px 30px;\\n }\\n\\n .partner-card::before {\\n content: '';\\n position: absolute;\\n top: 0;\\n left: 0;\\n right: 0;\\n bottom: 0;\\n background: radial-gradient(circle at center, rgba(212, 175, 55, 0.05) 0%, transparent 70%);\\n opacity: 0;\\n transition: opacity 0.4s ease;\\n }\\n\\n .partner-card:hover {\\n transform: translateY(-10px);\\n box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15);\\n border-color: rgba(212, 175, 55, 0.3);\\n }\\n\\n .partner-card:hover::before {\\n opacity: 1;\\n }\\n\\n .partner-tier-badge {\\n position: absolute;\\n top: 15px;\\n right: 15px;\\n padding: 5px 12px;\\n border-radius: 20px;\\n font-size: 10px;\\n font-weight: 700;\\n text-transform: uppercase;\\n letter-spacing: 0.5px;\\n font-family: var(--bifa-font-heading);\\n backdrop-filter: blur(10px);\\n z-index: 2;\\n }\\n\\n .tier-platinum {\\n background: linear-gradient(135deg, #e5e7eb 0%, #9ca3af 100%);\\n color: #1f2937;\\n box-shadow: 0 2px 10px rgba(156, 163, 175, 0.4);\\n }\\n\\n .tier-gold {\\n background: linear-gradient(135deg, var(--bifa-heritage-gold) 0%, #ffd700 100%);\\n color: var(--bifa-deep-navy);\\n box-shadow: 0 2px 10px rgba(212, 175, 55, 0.4);\\n }\\n\\n .tier-silver {\\n background: linear-gradient(135deg, #d1d5db 0%, #e5e7eb 100%);\\n color: #374151;\\n box-shadow: 0 2px 10px rgba(209, 213, 219, 0.4);\\n }\\n\\n .tier-media {\\n background: linear-gradient(135deg, var(--bifa-deep-navy) 0%, #162e5a 100%);\\n color: white;\\n box-shadow: 0 2px 10px rgba(10, 31, 68, 0.4);\\n }\\n .tier-strategic {\\n background: linear-gradient(135deg, var(--bifa-deep-navy) 0%, #162e5a 100%);\\n color: white;\\n box-shadow: 0 2px 10px rgba(10, 31, 68, 0.4);\\n }\\n .tier-institutional {\\n background: linear-gradient(135deg, var(--bifa-deep-navy) 0%, #162e5a 100%);\\n color: white;\\n box-shadow: 0 2px 10px rgba(10, 31, 68, 0.4);\\n }\\n\\n .partner-logo {\\n width: 100%;\\n max-width: 200px;\\n height: 100px;\\n object-fit: contain;\\n filter: grayscale(100%);\\n opacity: 0.7;\\n transition: all 0.3s ease;\\n position: relative;\\n z-index: 1;\\n }\\n\\n .partner-card:hover .partner-logo {\\n filter: grayscale(0%);\\n opacity: 1;\\n transform: scale(1.05);\\n }\\n\\n .partner-info {\\n text-align: center;\\n margin-top: 20px;\\n position: relative;\\n z-index: 1;\\n }\\n\\n .partner-name {\\n font-weight: 700;\\n color: var(--bifa-deep-navy);\\n font-size: 1.2rem;\\n margin-bottom: 5px;\\n transition: color 0.3s ease;\\n font-family: var(--bifa-font-heading);\\n }\\n\\n .partner-card:hover .partner-name {\\n color: var(--bifa-heritage-gold);\\n }\\n\\n .partner-description {\\n font-size: 0.9rem;\\n color: #64748b;\\n line-height: 1.4;\\n font-family: var(--bifa-font-body);\\n }\\n\\n \\\/* ========= CTA \\u0421\\u0415\\u041a\\u0426\\u0418\\u042f ========= *\\\/\\n .partners-cta {\\n text-align: center;\\n padding: 60px 40px;\\n background: linear-gradient(135deg, rgba(212, 175, 55, 0.05) 0%, rgba(212, 175, 55, 0.08) 100%);\\n backdrop-filter: blur(10px);\\n border-radius: 25px;\\n position: relative;\\n z-index: 1;\\n overflow: hidden;\\n animation: fadeInUp 1s ease-out 0.6s both;\\n border: 2px solid rgba(212, 175, 55, 0.2);\\n box-shadow: 0 2px 10px rgba(212, 175, 55, 0.08);\\n }\\n\\n .partners-cta::before {\\n content: '';\\n position: absolute;\\n top: -50%;\\n left: -50%;\\n width: 200%;\\n height: 200%;\\n background: radial-gradient(circle, rgba(212, 175, 55, 0.05) 0%, transparent 50%);\\n animation: partners-rotate-slow 20s linear infinite;\\n }\\n\\n .cta-title {\\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), #ffd700);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n margin-bottom: 20px;\\n position: relative;\\n z-index: 1;\\n }\\n\\n .cta-description {\\n font-size: 1.2rem;\\n color: var(--bifa-deep-navy);\\n margin-bottom: 30px;\\n line-height: 1.6;\\n position: relative;\\n z-index: 1;\\n font-family: var(--bifa-font-body);\\n }\\n\\n .cta-button {\\n display: inline-block;\\n padding: 18px 50px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold) 0%, #ffd700 100%);\\n color: var(--bifa-deep-navy);\\n text-decoration: none;\\n border-radius: 50px;\\n font-weight: 700;\\n font-size: 1.1rem;\\n text-transform: uppercase;\\n letter-spacing: 0.5px;\\n font-family: var(--bifa-font-heading);\\n transition: all 0.3s ease;\\n box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);\\n position: relative;\\n z-index: 1;\\n overflow: hidden;\\n }\\n\\n .cta-button::before {\\n content: '';\\n position: absolute;\\n top: 0;\\n left: -100%;\\n width: 100%;\\n height: 100%;\\n background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);\\n transition: left 0.5s ease;\\n }\\n\\n .cta-button:hover::before {\\n left: 100%;\\n }\\n\\n .cta-button:hover {\\n transform: translateY(-3px);\\n box-shadow: 0 15px 40px rgba(212, 175, 55, 0.4);\\n }\\n\\n \\\/* ========= \\u0421\\u041e\\u0421\\u0422\\u041e\\u042f\\u041d\\u0418\\u0415 \\u0417\\u0410\\u0413\\u0420\\u0423\\u0417\\u041a\\u0418 ========= *\\\/\\n .loading-container {\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n justify-content: center;\\n padding: 80px 20px;\\n text-align: center;\\n }\\n\\n .loading-content {\\n background: rgba(255, 255, 255, 0.95);\\n backdrop-filter: blur(10px);\\n border-radius: 20px;\\n padding: 40px 30px;\\n border: 2px solid rgba(212, 175, 55, 0.2);\\n box-shadow: 0 2px 10px rgba(212, 175, 55, 0.08);\\n position: relative;\\n overflow: hidden;\\n }\\n\\n .loading-icon {\\n font-size: 48px;\\n margin-bottom: 20px;\\n animation: partners-pulse 2s ease-in-out infinite;\\n }\\n\\n .loading-title {\\n font-size: 1.8rem;\\n font-weight: 700;\\n color: var(--bifa-deep-navy);\\n margin-bottom: 10px;\\n font-family: var(--bifa-font-heading);\\n }\\n\\n .loading-subtitle {\\n font-size: 1rem;\\n color: #64748b;\\n font-family: var(--bifa-font-body);\\n }\\n\\n \\\/* ========= RESPONSIVE DESIGN ========= *\\\/\\n @media (max-width: 1024px) {\\n .content-wrapper {\\n padding: 0 30px;\\n }\\n \\n .partners-grid {\\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\\n gap: 25px;\\n }\\n\\n .partners-title {\\n font-size: 3rem;\\n }\\n }\\n\\n @media (max-width: 768px) {\\n .content-wrapper {\\n padding: 0 20px;\\n }\\n\\n .partners-title {\\n font-size: 2.5rem;\\n }\\n\\n .subtitle-container {\\n height: 50px;\\n }\\n\\n .partners-subtitle,\\n .partners-slogan {\\n font-size: 1.2rem;\\n }\\n\\n .partners-grid {\\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\\n gap: 20px;\\n }\\n\\n .partner-card {\\n height: 220px;\\n padding: 30px 20px;\\n }\\n\\n .cta-title {\\n font-size: 2rem;\\n }\\n\\n .cta-button {\\n padding: 15px 40px;\\n font-size: 1rem;\\n }\\n\\n .category-tab {\\n padding: 12px 25px;\\n font-size: 0.9rem;\\n }\\n }\\n\\n @media (max-width: 480px) {\\n .partners-grid {\\n grid-template-columns: 1fr;\\n }\\n\\n .partners-title {\\n font-size: 2rem;\\n }\\n\\n .subtitle-container {\\n height: 30px;\\n margin-bottom: 15px;\\n padding: 10px 0;\\n }\\n\\n .partners-subtitle,\\n .partners-slogan {\\n font-size: 1rem;\\n letter-spacing: 1px;\\n }\\n }\\n <\\\/style>\\n<\\\/head>\\n<body>\\n <\/p>\n<div class=\"\\\"partners-section-wrapper\\\"\">\\n \\n <\/p>\n<div class=\"\\\"bg-particles\\\"\"><\\\/div>\\n\\n \\n <\/p>\n<section class=\"\\\"bifa-partners-container\\\"\">\\n \\n <\/p>\n<div class=\"\\\"neon-elements\\\"\">\\n <\/p>\n<div class=\"\\\"neon-circle\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"neon-circle\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"neon-circle\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"glow-dot\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"glow-dot\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"glow-dot\\\"\"><\\\/div>\\n <\\\/div>\\n\\n <\/p>\n<div class=\"\\\"content-wrapper\\\"\">\\n \\n <\/p>\n<div class=\"\\\"section-header\\\"\">\\n <\/p>\n<div class=\"\\\"partners-title\\\"\">Partners & Sponsors<\\\/div>\\n <\/p>\n<div class=\"\\\"subtitle-container\\\"\">\\n <\/p>\n<p class=\"\\\"partners-subtitle\\\"\">Together we create the future of Global South cooperation<\\\/p>\\n <\/p>\n<p class=\"\\\"partners-slogan\\\"\">Play with Spirit. Leading with Vision.<\\\/p>\\n <\\\/div>\\n <\/p>\n<p class=\"\\\"partners-description\\\"\">\\n A global network of <span class=\"\\\"highlight\\\"\">strategic partners<\\\/span> and \\n <span class=\"\\\"highlight\\\"\">innovative sponsors<\\\/span> supporting BIFA+'s mission to unite the \\n <span class=\"\\\"highlight\\\"\">Global South<\\\/span> through football, cultural exchange, and \\n <span class=\"\\\"highlight\\\"\">sports diplomacy<\\\/span>. From technology innovators to media giants, \\n our partners share our vision of creating bridges between nations and empowering the next generation.\\n <\\\/p>\\n <\\\/div>\\n\\n \\n <\/p>\n<div class=\"\\\"partner-categories\\\"\">\\n <\/p>\n<div class=\"\\\"category-tabs\\\"\">\\n <button class=\"\\\"category-tab\" active\\\" onclick=\"\\\"filterPartners('all')\\\"\">All Partners<\\\/button>\\n <button class=\"\\\"category-tab\\\"\" onclick=\"\\\"filterPartners('platinum')\\\"\">Platinum<\\\/button>\\n <button class=\"\\\"category-tab\\\"\" onclick=\"\\\"filterPartners('gold')\\\"\">Gold<\\\/button>\\n <button class=\"\\\"category-tab\\\"\" onclick=\"\\\"filterPartners('silver')\\\"\">Silver<\\\/button>\\n <button class=\"\\\"category-tab\\\"\" onclick=\"\\\"filterPartners('media')\\\"\">Media Partners<\\\/button>\\n <button class=\"\\\"category-tab\\\"\" onclick=\"\\\"filterPartners('strategic')\\\"\">Strategic Partners<\\\/button>\\n <button class=\"\\\"category-tab\\\"\" onclick=\"\\\"filterPartners('institutional')\\\"\">Institutional Partners<\\\/button>\\n <\\\/div>\\n <\\\/div>\\n\\n \\n <\/p>\n<div class=\"\\\"partners-grid\\\"\" id=\"\\\"partnersGrid\\\"\">\\n <\/p>\n<div class=\"\\\"loading-container\\\"\">\\n <\/p>\n<div class=\"\\\"loading-content\\\"\">\\n <\/p>\n<div class=\"\\\"loading-icon\\\"\">\\u2728<\\\/div>\\n <\/p>\n<h3 class=\"\\\"loading-title\\\"\">Building Together<\\\/h3>\\n <\/p>\n<p class=\"\\\"loading-subtitle\\\"\"> BIFA collaborates with governments, clubs, and innovators to grow football across the Global South. Official partners will be announced soon.<\\\/p>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n\\n \\n <\/p>\n<div class=\"\\\"partners-cta\\\"\">\\n <\/p>\n<h3 class=\"\\\"cta-title\\\"\">Join the Global BIFA+ Movement<\\\/h3>\\n <\/p>\n<p class=\"\\\"cta-description\\\"\">Partner with us to create a new future for international sports cooperation and Global South unity<\\\/p>\\n <a href=\"\\\"https:\\\/\\\/bifa.ai\\\/partners\\\/\\\"\" class=\"\\\"cta-button\\\"\">Partner with Us<\\\/a>\\n <\\\/div>\\n <\\\/div>\\n <\\\/section>\\n <\\\/div>\\n\\n <script>\\n \\\/\\\/ Partner data will be loaded from API\\n let partnersData = [];\\n\\n \\\/\\\/ Function to load partners from backend\\n async function loadPartners() {\\n try {\\n const response = await fetch('\\\/wp-json\\\/bifa\\\/v1\\\/partners');\\n if (!response.ok) {\\n throw new Error('Failed to load partners');\\n }\\n const data = await response.json();\\n partnersData = data;\\n displayPartners('all');\\n } catch (error) {\\n console.error('Error loading partners:', error);\\n showError();\\n }\\n }\\n\\n \\\/\\\/ Function to display partners\\n function displayPartners(filterType = 'all') {\\n const grid = document.getElementById('partnersGrid');\\n grid.innerHTML = '';\\n\\n \\\/\\\/ Filter partners\\n const filteredPartners = filterType === 'all' \\n ? partnersData \\n : partnersData.filter(partner => partner.type === filterType);\\n\\n \\\/\\\/ Sort by order\\n filteredPartners.sort((a, b) => a.order - b.order);\\n\\n if (filteredPartners.length === 0) {\\n grid.innerHTML = `\\n <\/p>\n<div class=\"\\\"loading-container\\\"\" style=\"\\\"grid-column:\" 1 \\>\\n <\/p>\n<div class=\"\\\"loading-content\\\"\">\\n <\/p>\n<div class=\"\\\"loading-icon\\\"\">\\ud83e\\udd1d<\\\/div>\\n <\/p>\n<h3 class=\"\\\"loading-title\\\"\">Building Together<\\\/h3>\\n <\/p>\n<p class=\"\\\"loading-subtitle\\\"\">BIFA collaborates with governments, clubs, and innovators to grow football across the Global South. Official partners will be announced soon<\\\/p>\\n <\\\/div>\\n <\\\/div>\\n `;\\n return;\\n }\\n\\n \\\/\\\/ Create partner cards\\n filteredPartners.forEach(partner => {\\n const card = createPartnerCard(partner);\\n grid.appendChild(card);\\n });\\n\\n \\\/\\\/ Add animation delay to cards\\n const cards = grid.querySelectorAll('.partner-card');\\n cards.forEach((card, index) => {\\n card.style.animationDelay = `${index * 0.1}s`;\\n });\\n }\\n\\n \\\/\\\/ Function to create partner card\\n function createPartnerCard(partner) {\\n const card = document.createElement('div');\\n card.className = 'partner-card';\\n card.style.animation = 'fadeInUp 0.6s ease-out both';\\n\\n \\\/\\\/ Tier badge\\n const tierBadge = document.createElement('div');\\n tierBadge.className = `partner-tier-badge tier-${partner.type}`;\\n tierBadge.textContent = partner.type;\\n\\n \\\/\\\/ Logo\\n const logo = document.createElement('img');\\n logo.className = 'partner-logo';\\n logo.src = partner.logo_url;\\n logo.alt = partner.name;\\n logo.loading = 'lazy';\\n\\n \\\/\\\/ Info container\\n const info = document.createElement('div');\\n info.className = 'partner-info';\\n\\n const name = document.createElement('h3');\\n name.className = 'partner-name';\\n name.textContent = partner.name;\\n\\n const description = document.createElement('p');\\n description.className = 'partner-description';\\n description.textContent = partner.description || '';\\n\\n info.appendChild(name);\\n if (partner.description) {\\n info.appendChild(description);\\n }\\n\\n \\\/\\\/ Assemble card\\n card.appendChild(tierBadge);\\n card.appendChild(logo);\\n card.appendChild(info);\\n\\n \\\/\\\/ Add click handler\\n if (partner.website) {\\n card.style.cursor = 'pointer';\\n card.onclick = () => window.open(partner.website, '_blank');\\n }\\n\\n return card;\\n }\\n\\n \\\/\\\/ Function to filter partners\\n function filterPartners(type) {\\n \\\/\\\/ Update active tab\\n document.querySelectorAll('.category-tab').forEach(tab => {\\n tab.classList.remove('active');\\n });\\n event.target.classList.add('active');\\n\\n \\\/\\\/ Display filtered partners\\n displayPartners(type);\\n }\\n\\n \\\/\\\/ Function to show error state\\n function showError() {\\n const grid = document.getElementById('partnersGrid');\\n grid.innerHTML = `\\n <\/p>\n<div class=\"\\\"loading-container\\\"\" style=\"\\\"grid-column:\" 1 \\>\\n <\/p>\n<div class=\"\\\"loading-content\\\"\">\\n <\/p>\n<div class=\"\\\"loading-icon\\\"\">\\u26a0\\ufe0f<\\\/div>\\n <\/p>\n<h3 class=\"\\\"loading-title\\\"\">Loading Error<\\\/h3>\\n <\/p>\n<p class=\"\\\"loading-subtitle\\\"\">Please refresh the page<\\\/p>\\n <\\\/div>\\n <\\\/div>\\n `;\\n }\\n\\n \\\/\\\/ Initialize on page load\\n document.addEventListener('DOMContentLoaded', function() {\\n loadPartners();\\n\\n \\\/\\\/ Create optimized floating particles (reduced count for performance)\\n const particlesContainer = document.querySelector('.bg-particles');\\n const particleCount = 15; \\\/\\\/ Reduced for better performance\\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() * 15 + 's';\\n particle.style.animationDuration = (12 + Math.random() * 6) + 's';\\n \\n const size = 3 + Math.random() * 3; \\\/\\\/ Smaller particles\\n particle.style.width = size + 'px';\\n particle.style.height = size + 'px';\\n \\n particlesContainer.appendChild(particle);\\n }\\n });\\n <\\\/script>\\n<\\\/body>\\n<\\\/html>\"}}]}]}]},{\"type\":\"section\",\"props\":{\"image_position\":\"center-center\",\"style\":\"default\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"default\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"}}]}]}],\"version\":\"4.5.32\"} --><\/p>","protected":false},"excerpt":{"rendered":"<p>BIFA+ \u2014 Video Section with Enhanced Player Welcome to BIFA+ BRICS International Football Alliance Uniting the Global South through football, youth development, and cultural exchange. A global sports and cultural alliance connecting the Global South through football, innovation, and youth empowerment. Founded by Dr. Salim Humaid Almazaini from the UAE, BIFA+ creates bridges between nations […]<\/p>","protected":false},"author":0,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bifa.ai\/pt\/wp-json\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bifa.ai\/pt\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bifa.ai\/pt\/wp-json\/wp\/v2\/types\/page"}],"replies":[{"embeddable":true,"href":"https:\/\/bifa.ai\/pt\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":102,"href":"https:\/\/bifa.ai\/pt\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":1116,"href":"https:\/\/bifa.ai\/pt\/wp-json\/wp\/v2\/pages\/7\/revisions\/1116"}],"wp:attachment":[{"href":"https:\/\/bifa.ai\/pt\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}