BIFA+ \u2014 Epic Video Experience<\/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=Playfair+Display:wght@400;700;900&family=Lato:wght@300;400;700&family=Open+Sans:wght@300;400;600;700&display=swap\" rel=\"stylesheet\">\n<style>\n\/* ========= RESET ========= *\/\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}<\/p>\n<p>body {\n font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n overflow-x: hidden;\n background: #ffffff;\n}<\/p>\n<p>\/* ========= MAIN WRAPPER ========= *\/\n.video-section-wrapper {\n width: 100vw;\n position: relative;\n left: 50%;\n margin-left: -50vw;\n background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 30%, #ffffff 70%, #f8f9fa 100%);\n overflow: hidden;\n min-height: 100vh;\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>\/* ========= GEOMETRIC BACKGROUND ELEMENTS ========= *\/\n.geometric-bg {\n position: absolute;\n width: 100%;\n height: 100%;\n overflow: hidden;\n z-index: 1;\n}<\/p>\n<p>.geo-shape {\n position: absolute;\n opacity: 0.05;\n animation: floatGeometry 20s infinite ease-in-out;\n}<\/p>\n<p>.geo-shape:nth-child(1) {\n top: 10%;\n left: 5%;\n width: 100px;\n height: 100px;\n background: linear-gradient(45deg, #b8860b, #ffd700);\n border-radius: 20px;\n animation-delay: 0s;\n}<\/p>\n<p>.geo-shape:nth-child(2) {\n top: 20%;\n right: 10%;\n width: 150px;\n height: 150px;\n background: linear-gradient(135deg, #b8860b, #ffd700);\n border-radius: 50%;\n animation-delay: 5s;\n}<\/p>\n<p>.geo-shape:nth-child(3) {\n bottom: 15%;\n left: 15%;\n width: 80px;\n height: 80px;\n background: linear-gradient(225deg, #b8860b, #ffd700);\n transform: rotate(45deg);\n animation-delay: 10s;\n}<\/p>\n<p>.geo-shape:nth-child(4) {\n bottom: 25%;\n right: 5%;\n width: 120px;\n height: 120px;\n background: linear-gradient(315deg, #b8860b, #ffd700);\n border-radius: 30px;\n animation-delay: 15s;\n}<\/p>\n<p>@keyframes floatGeometry {\n 0%, 100% { transform: translateY(0) rotate(0deg); }\n 25% { transform: translateY(-20px) rotate(90deg); }\n 50% { transform: translateY(-10px) rotate(180deg); }\n 75% { transform: translateY(-30px) rotate(270deg); }\n}<\/p>\n<p>\/* Optimized Floating Particles for YooTheme compatibility *\/\n.bg-particles {\n position: absolute;\n width: 100%;\n height: 100%;\n overflow: hidden;\n z-index: 2;\n will-change: auto;\n}<\/p>\n<p>.particle {\n position: absolute;\n width: 4px;\n height: 4px;\n background: linear-gradient(135deg, #b8860b, #ffd700);\n border-radius: 50%;\n animation: float 15s infinite linear;\n box-shadow: 0 0 8px rgba(184, 134, 11, 0.3);\n opacity: 0.3;\n will-change: transform;\n}<\/p>\n<p>@keyframes float {\n 0% {\n transform: translateY(100vh) translateX(0);\n opacity: 0;\n }\n 15% { opacity: 1; }\n 85% { opacity: 1; }\n 100% {\n transform: translateY(-100vh) translateX(50px);\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>\/* ========= COMPACT HEADER SECTION ========= *\/\n.about-header {\n text-align: center;\n margin-bottom: 40px;\n position: relative;\n}<\/p>\n<p>\/* Main Title - BIFA+ *\/\n.about-title {\n font-family: 'Playfair Display', serif;\n font-size: clamp(3.5rem, 6vw, 5.5rem);\n font-weight: 900;\n margin-bottom: 15px;\n text-decoration: none;\n display: inline-block;\n position: relative;\n background: linear-gradient(135deg, #b8860b, #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n text-transform: uppercase;\n letter-spacing: 2px;\n}<\/p>\n<p>.letter {\n display: inline-block;\n animation: letterDrop 0.6s ease-out forwards;\n opacity: 0;\n transform: translateY(-50px) rotateX(90deg);\n}<\/p>\n<p>@keyframes letterDrop {\n 0% {\n opacity: 0;\n transform: translateY(-50px) rotateX(90deg) scale(0.3);\n }\n 50% {\n opacity: 0.7;\n transform: translateY(10px) rotateX(-10deg) scale(1.1);\n }\n 100% {\n opacity: 1;\n transform: translateY(0) rotateX(0deg) scale(1);\n }\n}<\/p>\n<p>.about-title:hover .letter {\n animation: letterBounce 0.3s ease-in-out;\n}<\/p>\n<p>@keyframes letterBounce {\n 0%, 100% { transform: translateY(0) scale(1); }\n 50% { transform: translateY(-10px) scale(1.2); }\n}<\/p>\n<p>\/* Epic Quote\/Slogan - Right Under BIFA+ *\/\n.epic-quote {\n margin-bottom: 50px;\n perspective: 1000px;\n}<\/p>\n<p>.quote-text {\n font-family: 'Playfair Display', serif;\n font-size: clamp(1.8rem, 3.5vw, 2.8rem);\n font-weight: 700;\n font-style: italic;\n color: #2c3e50;\n position: relative;\n display: inline-block;\n animation: quoteReveal 1.5s ease-out 0.8s forwards;\n opacity: 0;\n transform: translateY(30px) rotateX(-15deg);\n max-width: 900px;\n line-height: 1.3;\n}<\/p>\n<p>@keyframes quoteReveal {\n 0% {\n opacity: 0;\n transform: translateY(30px) rotateX(-15deg) scale(0.9);\n }\n 50% {\n opacity: 0.7;\n transform: translateY(-5px) rotateX(2deg) scale(1.02);\n }\n 100% {\n opacity: 1;\n transform: translateY(0) rotateX(0deg) scale(1);\n }\n}<\/p>\n<p>.quote-text::before {\n content: '\"';\n font-size: 4rem;\n color: rgba(184, 134, 11, 0.3);\n position: absolute;\n left: -40px;\n top: -10px;\n font-family: 'Playfair Display', serif;\n font-weight: 900;\n}<\/p>\n<p>.quote-text::after {\n content: '\"';\n font-size: 4rem;\n color: rgba(184, 134, 11, 0.3);\n position: absolute;\n right: -40px;\n bottom: -30px;\n font-family: 'Playfair Display', serif;\n font-weight: 900;\n}<\/p>\n<p>\/* Quote highlight effect *\/\n.quote-text .highlight {\n background: linear-gradient(135deg, #b8860b, #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n position: relative;\n}<\/p>\n<p>.quote-text .highlight::after {\n content: '';\n position: absolute;\n bottom: -3px;\n left: 0;\n width: 100%;\n height: 2px;\n background: linear-gradient(90deg, transparent, #ffd700, transparent);\n animation: quoteHighlight 2s ease-in-out infinite;\n}<\/p>\n<p>@keyframes quoteHighlight {\n 0%, 100% { opacity: 0.4; transform: scaleX(0.8); }\n 50% { opacity: 1; transform: scaleX(1.2); }\n}<\/p>\n<p>\/* ========= VIDEO PLAYER ========= *\/\n.video-wrapper {\n position: relative;\n width: 100%;\n padding-bottom: 56.25%;\n border-radius: 30px;\n background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);\n overflow: hidden;\n box-shadow: \n 0 30px 100px rgba(0, 0, 0, 0.2),\n 0 0 0 1px rgba(184, 134, 11, 0.1),\n inset 0 1px 0 rgba(255, 255, 255, 0.1);\n transition: all 0.4s ease;\n animation: videoReveal 1.5s ease 1.2s forwards;\n opacity: 0;\n transform: translateY(40px) scale(0.96);\n}<\/p>\n<p>@keyframes videoReveal {\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n}<\/p>\n<p>.video-wrapper:hover {\n transform: translateY(-8px) scale(1.02);\n box-shadow: \n 0 40px 120px rgba(0, 0, 0, 0.25),\n 0 0 0 2px rgba(184, 134, 11, 0.2),\n inset 0 1px 0 rgba(255, 255, 255, 0.1);\n}<\/p>\n<p>\/* ========= LOADING SCREEN OVERLAY ========= *\/\n.video-loading-overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: #ffffff;\n border-radius: 30px;\n z-index: 100;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: opacity 0.8s ease, visibility 0.8s ease;\n overflow: hidden;\n}<\/p>\n<p>.video-loading-overlay.hidden {\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n}<\/p>\n<p>.loading-iframe {\n width: 100%;\n height: 100%;\n border: none;\n border-radius: 30px;\n background: transparent;\n}<\/p>\n<p>\/* Fallback loading animation if iframe fails *\/\n.fallback-loader {\n display: none;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);\n}<\/p>\n<p>.fallback-loader.active {\n display: flex;\n}<\/p>\n<p>.loader-logo {\n width: 140px;\n height: 140px;\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: 'Playfair Display', serif;\n font-size: 26px;\n font-weight: 700;\n background: linear-gradient(135deg, #b8860b, #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: 220px;\n height: 4px;\n background: rgba(184, 134, 11, 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, #b8860b, #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 video {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n}<\/p>\n<p>\/* ========= ENHANCED CONTROLS (same as before) ========= *\/\n.controls {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, transparent 100%);\n padding: 25px 20px 15px;\n opacity: 0;\n visibility: hidden;\n transform: translateY(10px);\n transition: all 0.3s ease;\n z-index: 20;\n}<\/p>\n<p>.video-wrapper:hover .controls {\n opacity: 1;\n visibility: visible;\n transform: translateY(0);\n}<\/p>\n<p>.controls-row {\n display: flex;\n align-items: center;\n gap: 15px;\n margin-bottom: 10px;\n}<\/p>\n<p>.ctrl-btn {\n background: rgba(255, 255, 255, 0.9);\n border: none;\n width: 48px;\n height: 48px;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n backdrop-filter: blur(10px);\n transition: all 0.2s ease;\n position: relative;\n}<\/p>\n<p>.ctrl-btn svg {\n width: 24px;\n height: 24px;\n fill: #2c3e50;\n pointer-events: none;\n}<\/p>\n<p>.ctrl-btn:hover {\n transform: scale(1.1);\n background: rgba(255, 215, 0, 0.9);\n}<\/p>\n<p>.ctrl-btn:hover svg {\n fill: #2c3e50;\n}<\/p>\n<p>.ctrl-btn:active {\n transform: scale(0.95);\n}<\/p>\n<p>.progress-container {\n flex: 1;\n margin: 0 15px;\n}<\/p>\n<p>.progress {\n width: 100%;\n height: 8px;\n background: rgba(255, 255, 255, 0.3);\n border-radius: 4px;\n cursor: pointer;\n overflow: hidden;\n position: relative;\n}<\/p>\n<p>.progress-bar {\n width: 0;\n height: 100%;\n background: linear-gradient(90deg, #b8860b, #ffd700);\n transition: width 0.1s linear;\n border-radius: 4px;\n position: relative;\n}<\/p>\n<p>.progress-bar::after {\n content: '';\n position: absolute;\n right: -6px;\n top: 50%;\n transform: translateY(-50%);\n width: 12px;\n height: 12px;\n background: #ffd700;\n border-radius: 50%;\n box-shadow: 0 0 10px rgba(255, 215, 0, 0.6);\n}<\/p>\n<p>.time-display {\n color: white;\n font-size: 14px;\n font-weight: 600;\n font-family: 'Open Sans', sans-serif;\n text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);\n min-width: 60px;\n text-align: center;\n}<\/p>\n<p>.volume-container {\n display: flex;\n align-items: center;\n gap: 10px;\n}<\/p>\n<p>.volume-slider {\n width: 80px;\n height: 4px;\n background: rgba(255, 255, 255, 0.3);\n border-radius: 2px;\n cursor: pointer;\n position: relative;\n}<\/p>\n<p>.volume-bar {\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, #b8860b, #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}<\/p>\n<p>.fullscreen-btn:hover {\n transform: scale(1.1);\n background: rgba(255, 215, 0, 0.9);\n}<\/p>\n<p>\/* ========= CONTENT BELOW VIDEO ========= *\/\n.video-content {\n margin-top: 70px;\n text-align: center;\n animation: contentReveal 1.5s ease 1.8s forwards;\n opacity: 0;\n transform: translateY(40px);\n}<\/p>\n<p>@keyframes contentReveal {\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>\/* About Description Section *\/\n.about-description {\n margin-bottom: 50px;\n animation: fadeInUp 1.5s ease 2.0s forwards;\n opacity: 0;\n transform: translateY(30px);\n}<\/p>\n<p>@keyframes fadeInUp {\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>.highlight {\n font-weight: 700;\n background: linear-gradient(135deg, #b8860b, #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n position: relative;\n}<\/p>\n<p>.highlight::after {\n content: '';\n position: absolute;\n bottom: -2px;\n left: 0;\n width: 100%;\n height: 2px;\n background: linear-gradient(90deg, transparent, #ffd700, transparent);\n animation: highlightGlow 2s ease-in-out infinite;\n}<\/p>\n<p>@keyframes highlightGlow {\n 0%, 100% { opacity: 0.3; transform: scaleX(0.8); }\n 50% { opacity: 1; transform: scaleX(1.2); }\n}<\/p>\n<p>.stats-bar {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n gap: 80px;\n margin-bottom: 60px;\n padding: 50px 0;\n background: linear-gradient(135deg, \n rgba(184, 134, 11, 0.03) 0%, \n rgba(255, 215, 0, 0.06) 50%, \n rgba(184, 134, 11, 0.03) 100%);\n border-radius: 25px;\n backdrop-filter: blur(10px);\n border: 1px solid rgba(184, 134, 11, 0.1);\n position: relative;\n overflow: hidden;\n}<\/p>\n<p>.stats-bar::before {\n content: '';\n position: absolute;\n top: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n background: linear-gradient(45deg, \n transparent 40%, \n rgba(255, 215, 0, 0.03) 50%, \n transparent 60%);\n animation: statsShine 4s ease-in-out infinite;\n}<\/p>\n<p>@keyframes statsShine {\n 0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }\n 100% { transform: translateX(100%) translateY(100%) rotate(45deg); }\n}<\/p>\n<p>.stat-item {\n text-align: center;\n position: relative;\n z-index: 2;\n}<\/p>\n<p>.stat-number {\n font-family: 'Playfair Display', serif;\n font-size: 3.2rem;\n font-weight: 900;\n background: linear-gradient(135deg, #b8860b, #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n margin-bottom: 10px;\n animation: numberPulse 2s ease-in-out infinite;\n}<\/p>\n<p>@keyframes numberPulse {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.05); }\n}<\/p>\n<p>.stat-label {\n font-family: 'Open Sans', sans-serif;\n font-size: 0.95rem;\n font-weight: 700;\n letter-spacing: 1px;\n text-transform: uppercase;\n color: #2c3e50;\n}<\/p>\n<p>.video-slogan {\n max-width: 1000px;\n margin: 0 auto 60px;\n padding: 0 20px;\n font-family: 'Lato', sans-serif;\n font-size: clamp(1.2rem, 2.2vw, 1.6rem);\n line-height: 1.8;\n color: #2c3e50;\n}<\/p>\n<p>.slogan-main {\n display: block;\n font-family: 'Playfair Display', serif;\n font-weight: 700;\n font-size: clamp(1.4rem, 2.4vw, 1.8rem);\n background: linear-gradient(135deg, #b8860b, #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n margin-bottom: 20px;\n position: relative;\n}<\/p>\n<p>.buttons-container {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n gap: 35px;\n}<\/p>\n<p>.cta-button {\n padding: 22px 50px;\n font-family: 'Open Sans', sans-serif;\n font-size: 1.05rem;\n font-weight: 700;\n text-transform: uppercase;\n border-radius: 50px;\n text-decoration: none;\n position: relative;\n overflow: hidden;\n transition: all 0.4s ease;\n letter-spacing: 1.5px;\n color: #fff;\n border: 2px solid transparent;\n animation: buttonReveal 0.6s ease forwards;\n opacity: 0;\n transform: translateY(30px);\n}<\/p>\n<p>.cta-button:nth-child(1) { animation-delay: 2.4s; }\n.cta-button:nth-child(2) { animation-delay: 2.6s; }\n.cta-button:nth-child(3) { animation-delay: 2.8s; }<\/p>\n<p>@keyframes buttonReveal {\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>.cta-button.primary {\n background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);\n box-shadow: 0 15px 40px rgba(44, 62, 80, 0.3);\n}<\/p>\n<p>.cta-button.secondary {\n background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);\n box-shadow: 0 15px 40px rgba(39, 174, 96, 0.3);\n}<\/p>\n<p>.cta-button.gold {\n background: linear-gradient(135deg, #b8860b 0%, #ffd700 100%);\n color: #2c3e50;\n font-weight: 800;\n box-shadow: 0 15px 40px rgba(184, 134, 11, 0.4);\n}<\/p>\n<p>.cta-button::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0;\n height: 0;\n border-radius: 50%;\n background: rgba(255, 255, 255, 0.3);\n transform: translate(-50%, -50%);\n transition: all 0.6s ease;\n}<\/p>\n<p>.cta-button:hover {\n transform: translateY(-8px);\n}<\/p>\n<p>.cta-button:hover::before {\n width: 300px;\n height: 300px;\n}<\/p>\n<p>\/* ========= RESPONSIVE ========= *\/\n@media (max-width: 768px) {\n .bifa-video-section {\n padding: 60px 0;\n }<\/p>\n<p> .slogan-text {\n font-size: 2.2rem;\n }<\/p>\n<p> .about-title {\n font-size: 2.2rem;\n }<\/p>\n<p> .stats-bar {\n gap: 50px;\n padding: 35px 0;\n }<\/p>\n<p> .stat-number {\n font-size: 2.5rem;\n }<\/p>\n<p> .buttons-container {\n flex-direction: column;\n align-items: center;\n }<\/p>\n<p> .cta-button {\n width: 280px;\n text-align: center;\n }<\/p>\n<p> .controls-row {\n gap: 10px;\n }<\/p>\n<p> .ctrl-btn {\n width: 42px;\n height: 42px;\n }<\/p>\n<p> .volume-slider {\n width: 60px;\n }\n}<\/p>\n<p>@media (max-width: 480px) {\n .slogan-text {\n font-size: 1.8rem;\n }<\/p>\n<p> .about-title {\n font-size: 1.8rem;\n }<\/p>\n<p> .video-wrapper {\n border-radius: 20px;\n }<\/p>\n<p> .cta-button {\n width: 250px;\n font-size: 0.9rem;\n padding: 20px 40px;\n }<\/p>\n<p> .controls {\n padding: 20px 15px 10px;\n }<\/p>\n<p> .volume-container {\n display: none;\n }\n}\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"video-section-wrapper\">\n <\/p>\n<div class=\"geometric-bg\">\n<div class=\"geo-shape\"><\/div>\n<div class=\"geo-shape\"><\/div>\n<div class=\"geo-shape\"><\/div>\n<div class=\"geo-shape\"><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"bg-particles\"><\/div>\n<section class=\"bifa-video-section\">\n<div class=\"video-container\">\n <\/p>\n<div class=\"about-header\">\n <br \/>\n <a href=\"\/about\" class=\"about-title\" id=\"mainTitle\">BIFA+<\/a><\/p>\n<p> <\/p>\n<div class=\"epic-quote\">\n<div class=\"quote-text\">\n <span class=\"highlight\">Play with Spirit.<\/span> Lead with Vision.\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"video-wrapper\">\n <\/p>\n<div class=\"video-loading-overlay\" id=\"videoLoadingOverlay\">\n <iframe \n id=\"loadingIframe\"\n class=\"loading-iframe\"\n src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Logo\/Get.html\"\n title=\"BIFA+ \u0932\u094b\u0921\u093f\u0902\u0917 \u0938\u094d\u0915\u094d\u0930\u0940\u0928\"\n onload=\"handleIframeLoad()\"\n onerror=\"handleIframeError()\"><br \/>\n <\/iframe><\/p>\n<p> <\/p>\n<div class=\"fallback-loader\" id=\"fallbackLoader\">\n<div class=\"loader-logo\">\n <svg viewbox=\"0 0 200 200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <defs>\n <lineargradient id=\"logoGradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n <stop offset=\"0%\" style=\"stop-color:#b8860b\"\/>\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=\"white\" font-family=\"Playfair Display\" font-size=\"24\" font-weight=\"bold\">BIFA+<\/text>\n <\/svg>\n <\/div>\n<div class=\"loader-text\">BIFA+ \u0905\u0928\u0941\u092d\u0935 \u0932\u094b\u0921 \u0939\u094b \u0930\u0939\u093e \u0939\u0948\u2026<\/div>\n<div class=\"loader-progress\">\n<div class=\"loader-progress-bar\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <video id=\"heroVideo\" autoplay muted loop playsinline preload=\"metadata\" \nposter=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/video_poster.jpg\"><source src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/video.mp4\" type=\"video\/mp4\">\u0906\u092a\u0915\u093e \u092c\u094d\u0930\u093e\u0909\u091c\u093c\u0930 \u092e\u0947\u0902 \u0935\u0940\u0921\u093f\u092f\u094b \u091f\u0948\u0917 \u0938\u092e\u0930\u094d\u0925\u093f\u0924 \u0928\u0939\u0940\u0902 \u0939\u0948\u0964<\/video><\/p>\n<p> <\/p>\n<div class=\"controls\" id=\"controls\" aria-label=\"\u0935\u0940\u0921\u093f\u092f\u094b \u0928\u093f\u092f\u0902\u0924\u094d\u0930\u0923\">\n<div class=\"controls-row\">\n <button class=\"ctrl-btn\" id=\"playPause\" aria-label=\"\u091a\u0932\u093e\u090f\u0901\/\u0930\u094b\u0915\u0947\u0902\"><br \/>\n <svg viewbox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg><br \/>\n <\/button><\/p>\n<div class=\"progress-container\">\n<div class=\"progress\" id=\"progress\">\n<div class=\"progress-bar\" id=\"progressBar\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"time-display\" id=\"timeDisplay\">0:00<\/div>\n<div class=\"volume-container\">\n <button class=\"ctrl-btn\" id=\"muteToggle\" aria-label=\"\u092e\u094d\u092f\u0942\u091f\/\u0905\u0928\u092e\u094d\u092f\u0942\u091f \u0915\u0930\u0947\u0902\"><br \/>\n <svg viewbox=\"0 0 24 24\"><path d=\"M4 9v6h4l5 5V4L8 9H4z\"\/><\/svg><br \/>\n <\/button><\/p>\n<div class=\"volume-slider\" id=\"volumeSlider\">\n<div class=\"volume-bar\" id=\"volumeBar\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <button class=\"fullscreen-btn\" id=\"fullscreenBtn\" aria-label=\"\u092a\u0942\u0930\u094d\u0923 \u0938\u094d\u0915\u094d\u0930\u0940\u0928\"><br \/>\n <svg viewbox=\"0 0 24 24\"><path d=\"M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z\"\/><\/svg><br \/>\n <\/button>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"video-content\">\n <\/p>\n<div class=\"about-description\">\n<p style=\"font-family: 'Open Sans', sans-serif; font-size: clamp(1.1rem, 2vw, 1.4rem); color: #2c3e50; font-weight: 600; margin-bottom: 15px; letter-spacing: 1px;\">\n \u092c\u094d\u0930\u093f\u0915\u094d\u0938 \u0905\u0902\u0924\u0930\u094d\u0930\u093e\u0937\u094d\u091f\u094d\u0930\u0940\u092f \u092b\u0941\u091f\u092c\u0949\u0932 \u0917\u0920\u092c\u0902\u0927\u0928\n <\/p>\n<p style=\"max-width: 1000px; margin: 0 auto 40px; font-family: 'Lato', sans-serif; font-size: clamp(1rem, 1.5vw, 1.3rem); line-height: 1.8; color: #4a5568;\" class=\" translation-block\">A global sports and cultural alliance connecting the <span class=\"highlight\">Global South<\/span> through football, \r\n innovation, and youth empowerment. Founded by <span class=\"highlight\">Salim Humaid Almazaini<\/span> from the UAE, \r\n BIFA+ creates bridges between nations through <span class=\"highlight\">sports diplomacy<\/span>, \r\n <span class=\"highlight\">cultural exchange<\/span>, and <span class=\"highlight\">technology integration<\/span>.<\/p>\n<\/p><\/div>\n<div class=\"stats-bar\">\n<div class=\"stat-item\">\n<div class=\"stat-number\">11+<\/div>\n<div class=\"stat-label\">\u0935\u0948\u0936\u094d\u0935\u093f\u0915 \u0926\u0915\u094d\u0937\u093f\u0923 \u0930\u093e\u0937\u094d\u091f\u094d\u0930<\/div>\n<\/p><\/div>\n<div class=\"stat-item\">\n<div class=\"stat-number\">3.8\u092c\u0940<\/div>\n<div class=\"stat-label\">\u091c\u0928\u0938\u0902\u0916\u094d\u092f\u093e \u0938\u0902\u092f\u0941\u0915\u094d\u0924<\/div>\n<\/p><\/div>\n<div class=\"stat-item\">\n<div class=\"stat-number\">2024<\/div>\n<div class=\"stat-label\">\u0938\u094d\u0925\u093e\u092a\u0928\u093e \u0935\u0930\u094d\u0937<\/div>\n<\/p><\/div>\n<div class=\"stat-item\">\n<div class=\"stat-number\">\u221e<\/div>\n<div class=\"stat-label\">\u092d\u0935\u093f\u0937\u094d\u092f \u0915\u0940 \u0938\u0902\u092d\u093e\u0935\u0928\u093e\u090f\u0902<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"video-slogan\">\n <span class=\"slogan-main\">BIFA+: \u091c\u0939\u093e\u0902 \u0935\u0948\u0936\u094d\u0935\u093f\u0915 \u0926\u0915\u094d\u0937\u093f\u0923 \u0915\u0940 \u090a\u0930\u094d\u091c\u093e \u0905\u0902\u0924\u0930\u094d\u0930\u093e\u0937\u094d\u091f\u094d\u0930\u0940\u092f \u092b\u0941\u091f\u092c\u0949\u0932 \u0938\u0902\u0935\u093e\u0926 \u092e\u0947\u0902 \u092a\u0930\u093f\u0935\u0930\u094d\u0924\u093f\u0924 \u0939\u094b\u0924\u0940 \u0939\u0948<\/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+ \u092e\u0939\u093f\u0932\u093e<\/strong>, <strong>\u092f\u0941\u0935\u093e \u090f\u0935\u0902 \u0935\u093f\u0936\u094d\u0935\u0935\u093f\u0926\u094d\u092f\u093e\u0932\u092f \u092a\u0939\u0932<\/strong>,<br \/>\n <strong>\u0908\u092b\u0941\u091f\u092c\u0949\u0932 \u0917\u0947\u092e\u093f\u0902\u0917<\/strong>, \u0914\u0930 \u092f\u0939 <strong>\u0936\u0939\u0930\u094b\u0902 \u0915\u093e \u0928\u0947\u091f\u0935\u0930\u094d\u0915<\/strong>, we’re building bridges between cultures<br \/>\n and creating opportunities for the next generation of global leaders across Brazil, UAE, Russia, China, India,<br \/>\n South Africa, Saudi Arabia, Egypt, Ethiopia, Indonesia, and beyond.\n <\/div>\n<div class=\"buttons-container\">\n <a href=\"#join\" class=\"cta-button primary\">Join the Alliance<\/a><br \/>\n <a href=\"#initiatives\" class=\"cta-button secondary\">Our Initiatives<\/a><br \/>\n <a href=\"#partnership\" class=\"cta-button gold\">Become a Partner<\/a>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<\/div>\n<p><script>\n\/\/ Global functions for iframe handling\nfunction handleIframeLoad() {\n console.log('Loading screen iframe loaded successfully');\n}<\/p>\n<p>function handleIframeError() {\n console.log('Loading screen iframe failed, showing fallback');\n document.getElementById('loadingIframe').style.display = 'none';\n document.getElementById('fallbackLoader').classList.add('active');\n}<\/p>\n<p>document.addEventListener('DOMContentLoaded', () => {\n \/\/ Letter Animation for Main Title\n const titleElement = document.getElementById('mainTitle');\n const titleText = titleElement.textContent;\n titleElement.innerHTML = '';<\/p>\n<p> titleText.split('').forEach((letter, index) => {\n const span = document.createElement('span');\n span.className = 'letter';\n span.textContent = letter === ' ' ? '\\u00A0' : letter;\n span.style.animationDelay = `${0.3 + index * 0.15}s`;\n titleElement.appendChild(span);\n });<\/p>\n<p> const video = document.getElementById('heroVideo');\n const playBtn = document.getElementById('playPause');\n const muteBtn = document.getElementById('muteToggle');\n const progress = document.getElementById('progress');\n const progressBar = document.getElementById('progressBar');\n const timeDisplay = document.getElementById('timeDisplay');\n const volumeSlider = document.getElementById('volumeSlider');\n const volumeBar = document.getElementById('volumeBar');\n const fullscreenBtn = document.getElementById('fullscreenBtn');\n const loadingOverlay = document.getElementById('videoLoadingOverlay');<\/p>\n<p> \/\/ Loading screen management\n let videoReady = false;\n let iframeReady = false;<\/p>\n<p> \/\/ Check if video is ready to play\n const checkVideoReady = () => {\n if (video.readyState >= 3) { \/\/ HAVE_FUTURE_DATA or greater\n videoReady = true;\n hideLoadingScreen();\n }\n };<\/p>\n<p> \/\/ Hide loading screen with smooth animation\n const hideLoadingScreen = () => {\n if (videoReady && loadingOverlay) {\n setTimeout(() => {\n loadingOverlay.classList.add('hidden');\n \/\/ Remove overlay completely after animation\n setTimeout(() => {\n if (loadingOverlay.parentNode) {\n loadingOverlay.style.display = 'none';\n }\n }, 800);\n }, 1500); \/\/ Show loading for minimum 1.5 seconds\n }\n };<\/p>\n<p> \/\/ Video event listeners for loading\n video.addEventListener('loadeddata', checkVideoReady);\n video.addEventListener('canplay', checkVideoReady);\n video.addEventListener('canplaythrough', () => {\n videoReady = true;\n hideLoadingScreen();\n });<\/p>\n<p> \/\/ Fallback: hide loading screen after maximum time\n setTimeout(() => {\n if (loadingOverlay && !loadingOverlay.classList.contains('hidden')) {\n console.log('Hiding loading screen after timeout');\n hideLoadingScreen();\n }\n }, 8000); \/\/ Maximum 8 seconds<\/p>\n<p> \/\/ Play\/Pause Icons\n const setPlayIcon = (paused) => {\n playBtn.innerHTML = paused\n ? '<svg viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg>'\n : '<svg viewBox=\"0 0 24 24\"><path d=\"M6 19h4V5H6zm8 0h4V5h-4z\"\/><\/svg>';\n };<\/p>\n<p> \/\/ Mute\/Unmute Icons\n const setMuteIcon = (muted) => {\n muteBtn.innerHTML = muted\n ? '<svg viewBox=\"0 0 24 24\"><path d=\"M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z\"\/><\/svg>'\n : '<svg viewBox=\"0 0 24 24\"><path d=\"M4 9v6h4l5 5V4L8 9H4z\"\/><\/svg>';\n };<\/p>\n<p> \/\/ Format time\n const formatTime = (seconds) => {\n const mins = Math.floor(seconds \/ 60);\n const secs = Math.floor(seconds % 60);\n return `${mins}:${secs.toString().padStart(2, '0')}`;\n };<\/p>\n<p> \/\/ Play\/Pause functionality\n playBtn.addEventListener('click', () => {\n if (video.paused) {\n video.play();\n } else {\n video.pause();\n }\n setPlayIcon(video.paused);\n });<\/p>\n<p> \/\/ Mute\/Unmute functionality\n muteBtn.addEventListener('click', () => {\n video.muted = !video.muted;\n setMuteIcon(video.muted);\n volumeBar.style.width = video.muted ? '0%' : (video.volume * 100) + '%';\n });<\/p>\n<p> \/\/ Progress bar update\n video.addEventListener('timeupdate', () => {\n const progress = (video.currentTime \/ video.duration) * 100;\n progressBar.style.width = progress + '%';\n timeDisplay.textContent = formatTime(video.currentTime);\n });<\/p>\n<p> \/\/ Progress bar click\n progress.addEventListener('click', (e) => {\n const rect = progress.getBoundingClientRect();\n const clickX = e.clientX - rect.left;\n const clickPercent = clickX \/ rect.width;\n video.currentTime = clickPercent * video.duration;\n });<\/p>\n<p> \/\/ Volume control\n volumeSlider.addEventListener('click', (e) => {\n const rect = volumeSlider.getBoundingClientRect();\n const clickX = e.clientX - rect.left;\n const volume = clickX \/ rect.width;\n video.volume = Math.max(0, Math.min(1, volume));\n volumeBar.style.width = (video.volume * 100) + '%';<\/p>\n<p> if (video.volume === 0) {\n video.muted = true;\n } else {\n video.muted = false;\n }\n setMuteIcon(video.muted);\n });<\/p>\n<p> \/\/ Fullscreen functionality\n fullscreenBtn.addEventListener('click', () => {\n if (!document.fullscreenElement) {\n video.parentElement.requestFullscreen();\n } else {\n document.exitFullscreen();\n }\n });<\/p>\n<p> \/\/ Initialize icons\n setPlayIcon(video.paused);\n setMuteIcon(video.muted);\n volumeBar.style.width = (video.volume * 100) + '%';<\/p>\n<p> \/\/ Create optimized floating particles (reduced count for YooTheme compatibility)\n const particlesContainer = document.querySelector('.bg-particles');\n const particleCount = 15; \/\/ Reduced from 25 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<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 Blocks - Final Version<\/title><\/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=Playfair+Display:wght@400;700;900&family=Lato:wght@300;400;700&family=Montserrat:wght@400;600;700;800&family=Cormorant+Garamond:wght@300;400;600;700&display=swap\" rel=\"stylesheet\">\n<style>\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}<\/p>\n<p>body {\n font-family: 'Lato', sans-serif;\n background: #f8f9fa;\n overflow-x: hidden;\n}<\/p>\n<p>\/* Restart Animation Button *\/\n.restart-button {\n position: fixed;\n bottom: 30px;\n right: 30px;\n background: #b8860b;\n color: white;\n border: none;\n padding: 15px 30px;\n border-radius: 50px;\n font-family: 'Montserrat', sans-serif;\n font-weight: 600;\n font-size: 1rem;\n cursor: pointer;\n box-shadow: 0 5px 20px rgba(184, 134, 11, 0.3);\n transition: all 0.3s ease;\n z-index: 1000;\n}<\/p>\n<p>.restart-button:hover {\n background: #9a7209;\n transform: translateY(-2px);\n box-shadow: 0 8px 30px rgba(184, 134, 11, 0.4);\n}<\/p>\n<p>.restart-button:active {\n transform: translateY(0);\n}<\/p>\n<p>\/* VARIANT 1 *\/\n.quote-section-wrapper-v1 {\n width: 100vw;\n position: relative;\n left: 50%;\n right: 50%;\n margin-left: -50vw;\n margin-right: -50vw;\n background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);\n overflow: hidden;\n margin-bottom: 100px;\n}<\/p>\n<p>.quote-section-v1 {\n padding: 80px 0;\n position: relative;\n}<\/p>\n<p>.quote-container-v1 {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 40px;\n position: relative;\n}<\/p>\n<p>.quote-content-v1 {\n position: relative;\n padding: 60px 0;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 300px;\n}<\/p>\n<p>.logo-watermark-v1 {\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n width: 350px;\n height: 350px;\n background-image: url('\/wp-content\/themes\/yootheme-child\/assets\/images\/flag-logo1.svg');\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center right;\n opacity: 0.03;\n z-index: 0;\n}<\/p>\n<p>.bird-animation-v1 {\n position: absolute;\n left: 50px;\n top: 50%;\n transform: translateY(-50%);\n width: 80px;\n height: 80px;\n background-image: url('\/wp-content\/themes\/yootheme-child\/assets\/images\/Logo\/bird.svg');\n background-size: contain;\n background-repeat: no-repeat;\n filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.1));\n animation: fly-to-right 3s ease-in-out forwards;\n z-index: 3;\n}<\/p>\n<p>@keyframes fly-to-right {\n 0% {\n left: -100px;\n opacity: 0;\n transform: translateY(-50%) rotate(-10deg);\n }\n 30% {\n left: 50px;\n opacity: 1;\n transform: translateY(-50%) rotate(0deg);\n }\n 60% {\n left: 150px;\n transform: translateY(-60%) rotate(5deg);\n }\n 100% {\n left: 200px;\n transform: translateY(-50%) rotate(0deg);\n opacity: 0.8;\n }\n}<\/p>\n<p>.bird-trail-v1 {\n position: absolute;\n left: 0;\n top: 50%;\n transform: translateY(-50%);\n width: 250px;\n height: 3px;\n background: linear-gradient(90deg, transparent 0%, rgba(184, 134, 11, 0.3) 50%, transparent 100%);\n opacity: 0;\n animation: trail-appear 3s ease-in-out 0.5s forwards;\n}<\/p>\n<p>@keyframes trail-appear {\n 0% {\n opacity: 0;\n width: 0;\n }\n 100% {\n opacity: 1;\n width: 250px;\n }\n}<\/p>\n<p>.quote-reveal-v1 {\n position: relative;\n z-index: 2;\n text-align: center;\n max-width: 900px;\n opacity: 0;\n animation: reveal-quote 2s ease-out 1.5s forwards;\n}<\/p>\n<p>@keyframes reveal-quote {\n 0% {\n opacity: 0;\n transform: scale(0.9);\n filter: blur(5px);\n }\n 100% {\n opacity: 1;\n transform: scale(1);\n filter: blur(0);\n }\n}<\/p>\n<p>.quote-text-v1 {\n font-family: 'Playfair Display', serif;\n font-size: clamp(2rem, 3vw, 2.8rem);\n font-weight: 400;\n line-height: 1.5;\n color: #1a3a52;\n margin-bottom: 30px;\n position: relative;\n}<\/p>\n<p>.quote-text-v1 .golden-glow {\n color: #b8860b;\n position: relative;\n display: inline-block;\n animation: golden-pulse 3s ease-in-out infinite;\n}<\/p>\n<p>@keyframes golden-pulse {\n 0%, 100% {\n text-shadow: 0 0 5px rgba(184, 134, 11, 0.3);\n }\n 50% {\n text-shadow: 0 0 20px rgba(184, 134, 11, 0.5);\n }\n}<\/p>\n<p>.quote-author-v1 {\n opacity: 0;\n animation: fade-in-up 1s ease-out 2.5s forwards;\n}<\/p>\n<p>@keyframes fade-in-up {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>.author-dash {\n display: inline-block;\n width: 40px;\n height: 2px;\n background: #b8860b;\n margin-right: 15px;\n vertical-align: middle;\n}<\/p>\n<p>.author-name-v1 {\n font-family: 'Montserrat', sans-serif;\n font-size: 1.1rem;\n font-weight: 600;\n color: #5a6c7d;\n letter-spacing: 1px;\n}<\/p>\n<p>\/* VARIANT 2 *\/\n.quote-section-wrapper-v2 {\n width: 100vw;\n position: relative;\n left: 50%;\n right: 50%;\n margin-left: -50vw;\n margin-right: -50vw;\n background: white;\n overflow: hidden;\n margin-bottom: 100px;\n}<\/p>\n<p>.quote-section-v2 {\n padding: 100px 0;\n position: relative;\n}<\/p>\n<p>.logo-watermark-v2 {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 500px;\n height: 500px;\n background-image: url('\/wp-content\/themes\/yootheme-child\/assets\/images\/Logo\/flag-logo.svg');\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center;\n opacity: 0.02;\n z-index: 0;\n animation: subtle-rotate 60s linear infinite;\n}<\/p>\n<p>@keyframes subtle-rotate {\n from { transform: translate(-50%, -50%) rotate(0deg); }\n to { transform: translate(-50%, -50%) rotate(360deg); }\n}<\/p>\n<p>.bird-circle-v2 {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 600px;\n height: 600px;\n animation: circle-rotate 30s linear infinite;\n z-index: 1;\n pointer-events: none;\n}<\/p>\n<p>@keyframes circle-rotate {\n from { transform: translate(-50%, -50%) rotate(0deg); }\n to { transform: translate(-50%, -50%) rotate(360deg); }\n}<\/p>\n<p>.bird-v2 {\n position: absolute;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n width: 50px;\n height: 50px;\n background-image: url('\/wp-content\/themes\/yootheme-child\/assets\/images\/Logo\/bird.svg');\n background-size: contain;\n background-repeat: no-repeat;\n opacity: 0.2;\n filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));\n animation: bird-self-rotate 30s linear infinite reverse;\n}<\/p>\n<p>@keyframes bird-self-rotate {\n from { transform: translateX(-50%) rotate(0deg); }\n to { transform: translateX(-50%) rotate(-360deg); }\n}<\/p>\n<p>.decorative-lines-v2 {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow: hidden;\n z-index: 0;\n}<\/p>\n<p>.line-v2 {\n position: absolute;\n background: rgba(184, 134, 11, 0.1);\n animation: float-line 20s ease-in-out infinite;\n}<\/p>\n<p>.line-v2:nth-child(1) {\n width: 1px;\n height: 200px;\n left: 10%;\n top: 20%;\n animation-duration: 15s;\n}<\/p>\n<p>.line-v2:nth-child(2) {\n width: 200px;\n height: 1px;\n right: 10%;\n top: 70%;\n animation-duration: 25s;\n}<\/p>\n<p>.line-v2:nth-child(3) {\n width: 1px;\n height: 150px;\n right: 20%;\n bottom: 20%;\n animation-duration: 20s;\n}<\/p>\n<p>@keyframes float-line {\n 0%, 100% {\n transform: translate(0, 0) rotate(0deg);\n opacity: 0.1;\n }\n 50% {\n transform: translate(20px, -20px) rotate(5deg);\n opacity: 0.3;\n }\n}<\/p>\n<p>.quote-container-v2 {\n max-width: 1000px;\n margin: 0 auto;\n padding: 0 40px;\n position: relative;\n z-index: 2;\n}<\/p>\n<p>.quote-frame-v2 {\n position: relative;\n padding: 80px 60px;\n opacity: 0;\n animation: fade-in-scale 1.5s ease-out 0.5s forwards;\n}<\/p>\n<p>@keyframes fade-in-scale {\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}<\/p>\n<p>.top-accent-v2 {\n position: absolute;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n align-items: center;\n gap: 20px;\n}<\/p>\n<p>.accent-line {\n width: 60px;\n height: 1px;\n background: #b8860b;\n}<\/p>\n<p>.accent-dot {\n width: 8px;\n height: 8px;\n background: #b8860b;\n border-radius: 50%;\n animation: pulse-dot 2s ease-in-out infinite;\n}<\/p>\n<p>@keyframes pulse-dot {\n 0%, 100% {\n transform: scale(1);\n opacity: 1;\n }\n 50% {\n transform: scale(1.5);\n opacity: 0.6;\n }\n}<\/p>\n<p>.quote-text-v2 {\n font-family: 'Cormorant Garamond', serif;\n font-size: clamp(2.2rem, 3.5vw, 3rem);\n font-weight: 300;\n color: #1a3a52;\n line-height: 1.6;\n text-align: center;\n margin-bottom: 50px;\n letter-spacing: 0.5px;\n}<\/p>\n<p>.quote-text-v2 em {\n font-style: normal;\n font-weight: 600;\n color: #b8860b;\n position: relative;\n display: inline-block;\n animation: glow-text 3s ease-in-out infinite;\n}<\/p>\n<p>@keyframes glow-text {\n 0%, 100% {\n text-shadow: 0 0 5px rgba(184, 134, 11, 0.2);\n }\n 50% {\n text-shadow: 0 0 15px rgba(184, 134, 11, 0.4);\n }\n}<\/p>\n<p>.quote-text-v2 em::after {\n content: '';\n position: absolute;\n bottom: -3px;\n left: 0;\n width: 100%;\n height: 1px;\n background: #b8860b;\n opacity: 0.3;\n}<\/p>\n<p>.author-section-v2 {\n text-align: center;\n position: relative;\n}<\/p>\n<p>.author-section-v2::before {\n content: '';\n position: absolute;\n top: -30px;\n left: 50%;\n transform: translateX(-50%);\n width: 40px;\n height: 1px;\n background: rgba(184, 134, 11, 0.5);\n}<\/p>\n<p>.author-name-v2 {\n font-family: 'Montserrat', sans-serif;\n font-size: 0.9rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 3px;\n color: #b8860b;\n margin-bottom: 8px;\n}<\/p>\n<p>.author-title-v2 {\n font-family: 'Lato', sans-serif;\n font-size: 0.85rem;\n color: #8a8a8a;\n letter-spacing: 1px;\n}<\/p>\n<p>\/* VARIANT 3 *\/\n.quote-section-wrapper-v3 {\n width: 100vw;\n position: relative;\n left: 50%;\n right: 50%;\n margin-left: -50vw;\n margin-right: -50vw;\n background: #f5f7fa;\n overflow: hidden;\n margin-bottom: 100px;\n}<\/p>\n<p>.quote-section-v3 {\n padding: 90px 0;\n position: relative;\n}<\/p>\n<p>.geometric-pattern-v3 {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow: hidden;\n z-index: 0;\n}<\/p>\n<p>.geo-shape {\n position: absolute;\n border: 1px solid rgba(184, 134, 11, 0.1);\n}<\/p>\n<p>.geo-shape:nth-child(1) {\n width: 100px;\n height: 100px;\n border-radius: 50%;\n top: 10%;\n left: 5%;\n animation: rotate-slow 30s linear infinite;\n}<\/p>\n<p>.geo-shape:nth-child(2) {\n width: 80px;\n height: 80px;\n transform: rotate(45deg);\n bottom: 15%;\n right: 10%;\n animation: rotate-slow 25s linear infinite reverse;\n}<\/p>\n<p>.geo-shape:nth-child(3) {\n width: 120px;\n height: 120px;\n border-radius: 30%;\n top: 50%;\n right: 5%;\n animation: rotate-slow 35s linear infinite;\n}<\/p>\n<p>@keyframes rotate-slow {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}<\/p>\n<p>.logo-geometric-v3 {\n position: absolute;\n top: 20%;\n right: 10%;\n width: 150px;\n height: 150px;\n z-index: 1;\n animation: float-geometric 8s ease-in-out infinite;\n}<\/p>\n<p>@keyframes float-geometric {\n 0%, 100% {\n transform: translate(0, 0) rotate(0deg);\n }\n 25% {\n transform: translate(-20px, 10px) rotate(90deg);\n }\n 50% {\n transform: translate(0, 20px) rotate(180deg);\n }\n 75% {\n transform: translate(20px, 10px) rotate(270deg);\n }\n}<\/p>\n<p>.logo-frame-v3 {\n width: 100%;\n height: 100%;\n position: relative;\n background-image: url('\/wp-content\/themes\/yootheme-child\/assets\/images\/flag-logo1.svg');\n background-size: 60%;\n background-repeat: no-repeat;\n background-position: center;\n opacity: 0.05;\n}<\/p>\n<p>.logo-frame-v3::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border: 2px solid rgba(184, 134, 11, 0.1);\n transform: rotate(45deg);\n animation: pulse-frame 4s ease-in-out infinite;\n}<\/p>\n<p>@keyframes pulse-frame {\n 0%, 100% {\n transform: rotate(45deg) scale(1);\n opacity: 0.3;\n }\n 50% {\n transform: rotate(45deg) scale(1.1);\n opacity: 0.1;\n }\n}<\/p>\n<p>.bird-spiral-v3 {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 400px;\n height: 400px;\n animation: spiral-rotate 20s linear infinite;\n z-index: 1;\n pointer-events: none;\n}<\/p>\n<p>@keyframes spiral-rotate {\n from {\n transform: translate(-50%, -50%) rotate(0deg);\n }\n to {\n transform: translate(-50%, -50%) rotate(360deg);\n }\n}<\/p>\n<p>.bird-icon-v3 {\n position: absolute;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n width: 60px;\n height: 60px;\n background-image: url('\/wp-content\/themes\/yootheme-child\/assets\/images\/Logo\/bird.svg');\n background-size: contain;\n background-repeat: no-repeat;\n opacity: 0.15;\n filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.1));\n animation: bird-spiral-move 20s ease-in-out infinite;\n}<\/p>\n<p>@keyframes bird-spiral-move {\n 0%, 100% {\n transform: translateX(-50%) scale(1);\n }\n 25% {\n transform: translateX(-50%) scale(0.8) translateY(20px);\n }\n 50% {\n transform: translateX(-50%) scale(1.2) translateY(0);\n }\n 75% {\n transform: translateX(-50%) scale(0.9) translateY(-20px);\n }\n}<\/p>\n<p>.quote-container-v3 {\n max-width: 1100px;\n margin: 0 auto;\n padding: 0 40px;\n position: relative;\n z-index: 2;\n}<\/p>\n<p>.quote-card-v3 {\n background: white;\n padding: 70px;\n position: relative;\n box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);\n overflow: hidden;\n opacity: 0;\n transform: translateY(30px);\n animation: slide-up 1.2s ease-out 0.3s forwards;\n}<\/p>\n<p>@keyframes slide-up {\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>.corner-accent-v3 {\n position: absolute;\n width: 40px;\n height: 40px;\n}<\/p>\n<p>.corner-accent-v3::before,\n.corner-accent-v3::after {\n content: '';\n position: absolute;\n background: #b8860b;\n animation: corner-glow 3s ease-in-out infinite;\n}<\/p>\n<p>@keyframes corner-glow {\n 0%, 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.5;\n }\n}<\/p>\n<p>.corner-accent-v3.top-left {\n top: 0;\n left: 0;\n}<\/p>\n<p>.corner-accent-v3.top-left::before {\n top: 0;\n left: 0;\n width: 100%;\n height: 2px;\n}<\/p>\n<p>.corner-accent-v3.top-left::after {\n top: 0;\n left: 0;\n width: 2px;\n height: 100%;\n}<\/p>\n<p>.corner-accent-v3.bottom-right {\n bottom: 0;\n right: 0;\n}<\/p>\n<p>.corner-accent-v3.bottom-right::before {\n bottom: 0;\n right: 0;\n width: 100%;\n height: 2px;\n}<\/p>\n<p>.corner-accent-v3.bottom-right::after {\n bottom: 0;\n right: 0;\n width: 2px;\n height: 100%;\n}<\/p>\n<p>.quote-text-v3 {\n font-family: 'Playfair Display', serif;\n font-size: clamp(2rem, 3vw, 2.6rem);\n font-weight: 700;\n color: #1a3a52;\n line-height: 1.4;\n margin-bottom: 40px;\n}<\/p>\n<p>.quote-text-v3 .accent-word {\n position: relative;\n color: #b8860b;\n display: inline-block;\n animation: word-pulse 2s ease-in-out infinite;\n}<\/p>\n<p>@keyframes word-pulse {\n 0%, 100% {\n transform: scale(1);\n }\n 50% {\n transform: scale(1.05);\n }\n}<\/p>\n<p>.quote-text-v3 .accent-word::before {\n content: '';\n position: absolute;\n bottom: -5px;\n left: -5px;\n right: -5px;\n height: 15px;\n background: rgba(184, 134, 11, 0.1);\n z-index: -1;\n transform: skew(-5deg);\n}<\/p>\n<p>.author-wrapper-v3 {\n display: flex;\n align-items: center;\n gap: 20px;\n opacity: 0;\n animation: fade-in 1s ease-out 1s forwards;\n}<\/p>\n<p>@keyframes fade-in {\n to {\n opacity: 1;\n }\n}<\/p>\n<p>.author-avatar-v3 {\n width: 60px;\n height: 60px;\n background: linear-gradient(135deg, #b8860b, #ffd700);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: 'Playfair Display', serif;\n font-size: 1.5rem;\n font-weight: 700;\n color: white;\n animation: avatar-rotate 10s linear infinite;\n}<\/p>\n<p>@keyframes avatar-rotate {\n 0%, 100% {\n transform: rotate(0deg);\n }\n 50% {\n transform: rotate(10deg);\n }\n}<\/p>\n<p>.author-info-v3 {\n text-align: left;\n}<\/p>\n<p>.author-name-v3 {\n font-family: 'Montserrat', sans-serif;\n font-size: 1.1rem;\n font-weight: 700;\n color: #1a3a52;\n margin-bottom: 5px;\n}<\/p>\n<p>.author-title-v3 {\n font-family: 'Lato', sans-serif;\n font-size: 0.9rem;\n color: #6a7a8a;\n}<\/p>\n<p>\/* VARIANT 4 *\/\n.quote-section-wrapper-v4 {\n width: 100vw;\n position: relative;\n left: 50%;\n right: 50%;\n margin-left: -50vw;\n margin-right: -50vw;\n background: linear-gradient(135deg, #1a3a52 0%, #2c5f7c 50%, #1a3a52 100%);\n overflow: hidden;\n margin-bottom: 100px;\n}<\/p>\n<p>.quote-section-v4 {\n padding: 100px 0;\n position: relative;\n}<\/p>\n<p>.particles-v4 {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow: hidden;\n z-index: 0;\n}<\/p>\n<p>.particle {\n position: absolute;\n width: 4px;\n height: 4px;\n background: rgba(255, 215, 0, 0.6);\n border-radius: 50%;\n animation: float-up 15s linear infinite;\n}<\/p>\n<p>.particle:nth-child(1) { left: 10%; animation-delay: 0s; }\n.particle:nth-child(2) { left: 30%; animation-delay: 3s; }\n.particle:nth-child(3) { left: 50%; animation-delay: 6s; }\n.particle:nth-child(4) { left: 70%; animation-delay: 9s; }\n.particle:nth-child(5) { left: 90%; animation-delay: 12s; }<\/p>\n<p>@keyframes float-up {\n 0% {\n bottom: -10px;\n opacity: 0;\n }\n 10% {\n opacity: 1;\n }\n 90% {\n opacity: 1;\n }\n 100% {\n bottom: 100%;\n opacity: 0;\n }\n}<\/p>\n<p>.bird-light-trail-v4 {\n position: absolute;\n top: 20%;\n left: -100px;\n z-index: 2;\n animation: fly-across 15s ease-in-out infinite;\n}<\/p>\n<p>@keyframes fly-across {\n 0% {\n left: -100px;\n opacity: 0;\n }\n 10% {\n opacity: 1;\n }\n 90% {\n opacity: 1;\n }\n 100% {\n left: calc(100% + 100px);\n opacity: 0;\n }\n}<\/p>\n<p>.light-bird-v4 {\n width: 70px;\n height: 70px;\n background-image: url('\/wp-content\/themes\/yootheme-child\/assets\/images\/Logo\/bird.svg');\n background-size: contain;\n background-repeat: no-repeat;\n filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(255, 215, 0, 0.8));\n position: relative;\n z-index: 2;\n}<\/p>\n<p>.trail-light {\n position: absolute;\n top: 50%;\n left: -200px;\n transform: translateY(-50%);\n width: 200px;\n height: 2px;\n background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.8), rgba(255, 215, 0, 0.4), transparent);\n filter: blur(2px);\n animation: trail-fade 15s ease-in-out infinite;\n}<\/p>\n<p>@keyframes trail-fade {\n 0%, 10% {\n opacity: 0;\n }\n 20%, 80% {\n opacity: 1;\n }\n 90%, 100% {\n opacity: 0;\n }\n}<\/p>\n<p>.logo-animated-v4 {\n position: absolute;\n bottom: 10%;\n right: 5%;\n width: 120px;\n height: 120px;\n z-index: 1;\n perspective: 1000px;\n}<\/p>\n<p>.logo-3d-v4 {\n width: 100%;\n height: 100%;\n background-image: url('\/wp-content\/themes\/yootheme-child\/assets\/images\/Logo\/flag-logo.svg');\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center;\n opacity: 0.1;\n filter: brightness(0) invert(1);\n transform-style: preserve-3d;\n animation: logo-3d-rotate 20s linear infinite;\n}<\/p>\n<p>@keyframes logo-3d-rotate {\n 0% {\n transform: rotateY(0deg) rotateX(0deg);\n }\n 25% {\n transform: rotateY(90deg) rotateX(10deg);\n }\n 50% {\n transform: rotateY(180deg) rotateX(-10deg);\n }\n 75% {\n transform: rotateY(270deg) rotateX(10deg);\n }\n 100% {\n transform: rotateY(360deg) rotateX(0deg);\n }\n}<\/p>\n<p>.quote-container-v4 {\n max-width: 900px;\n margin: 0 auto;\n padding: 0 40px;\n position: relative;\n z-index: 3;\n}<\/p>\n<p>.quote-glass-v4 {\n background: rgba(255, 255, 255, 0.05);\n backdrop-filter: blur(20px);\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 20px;\n padding: 80px 60px;\n position: relative;\n overflow: hidden;\n opacity: 0;\n transform: translateY(50px);\n animation: glass-appear 1.5s ease-out 0.5s forwards;\n}<\/p>\n<p>@keyframes glass-appear {\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>.golden-frame-v4 {\n position: absolute;\n top: 20px;\n left: 20px;\n right: 20px;\n bottom: 20px;\n border: 1px solid rgba(255, 215, 0, 0.3);\n border-radius: 15px;\n pointer-events: none;\n}<\/p>\n<p>.golden-frame-v4::before {\n content: '';\n position: absolute;\n top: -1px;\n left: -1px;\n right: -1px;\n bottom: -1px;\n background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.5), transparent);\n border-radius: 15px;\n animation: frame-glow 4s linear infinite;\n}<\/p>\n<p>@keyframes frame-glow {\n 0% { transform: translateX(-100%); }\n 100% { transform: translateX(100%); }\n}<\/p>\n<p>.quote-marks-v4 {\n font-family: 'Playfair Display', serif;\n font-size: 4rem;\n color: rgba(255, 215, 0, 0.2);\n position: absolute;\n top: 30px;\n left: 30px;\n animation: quote-pulse 3s ease-in-out infinite;\n}<\/p>\n<p>@keyframes quote-pulse {\n 0%, 100% {\n opacity: 0.2;\n transform: scale(1);\n }\n 50% {\n opacity: 0.4;\n transform: scale(1.1);\n }\n}<\/p>\n<p>.quote-text-v4 {\n font-family: 'Playfair Display', serif;\n font-size: clamp(2rem, 3vw, 2.8rem);\n font-weight: 400;\n color: white;\n line-height: 1.6;\n text-align: center;\n margin-bottom: 50px;\n text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);\n}<\/p>\n<p>.quote-text-v4 .golden {\n color: #ffd700;\n font-weight: 700;\n display: inline-block;\n animation: golden-shine 3s ease-in-out infinite;\n}<\/p>\n<p>@keyframes golden-shine {\n 0%, 100% {\n text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);\n transform: scale(1);\n }\n 50% {\n text-shadow: 0 0 30px rgba(255, 215, 0, 0.8);\n transform: scale(1.05);\n }\n}<\/p>\n<p>.author-glow-v4 {\n text-align: center;\n position: relative;\n opacity: 0;\n animation: author-fade-in 1s ease-out 1.5s forwards;\n}<\/p>\n<p>@keyframes author-fade-in {\n to {\n opacity: 1;\n }\n}<\/p>\n<p>.author-glow-v4::before {\n content: '';\n position: absolute;\n top: -30px;\n left: 50%;\n transform: translateX(-50%);\n width: 100px;\n height: 1px;\n background: linear-gradient(90deg, transparent, #ffd700, transparent);\n}<\/p>\n<p>.author-name-v4 {\n font-family: 'Montserrat', sans-serif;\n font-size: 1.2rem;\n font-weight: 600;\n color: #ffd700;\n text-transform: uppercase;\n letter-spacing: 2px;\n margin-bottom: 10px;\n text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);\n}<\/p>\n<p>.author-title-v4 {\n font-family: 'Lato', sans-serif;\n font-size: 1rem;\n color: rgba(255, 255, 255, 0.7);\n letter-spacing: 1px;\n}<\/p>\n<p>.variant-title {\n text-align: center;\n font-size: 2.5rem;\n font-weight: 800;\n margin-bottom: 20px;\n font-family: 'Montserrat', sans-serif;\n color: #1a3a52;\n}<\/p>\n<p>.divider {\n height: 1px;\n background: linear-gradient(90deg, transparent, #b8860b, transparent);\n margin: 80px auto;\n max-width: 200px;\n}<\/p>\n<p>\/* Responsive Design *\/\n@media (max-width: 968px) {\n .quote-section-v1,\n .quote-section-v2,\n .quote-section-v3,\n .quote-section-v4 {\n padding: 60px 0;\n }<\/p>\n<p> .quote-frame-v2,\n .quote-card-v3,\n .quote-glass-v4 {\n padding: 50px 40px;\n }<\/p>\n<p> .quote-text-v1,\n .quote-text-v2,\n .quote-text-v3,\n .quote-text-v4 {\n font-size: clamp(1.5rem, 4vw, 2.5rem);\n }<\/p>\n<p> .bird-animation-v1 {\n width: 60px;\n height: 60px;\n }<\/p>\n<p> .logo-watermark-v1,\n .logo-watermark-v2 {\n width: 250px;\n height: 250px;\n }<\/p>\n<p> .bird-circle-v2 {\n width: 400px;\n height: 400px;\n }<\/p>\n<p> .logo-geometric-v3 {\n width: 100px;\n height: 100px;\n }\n}<\/p>\n<p>@media (max-width: 640px) {\n .restart-button {\n bottom: 20px;\n right: 20px;\n padding: 12px 24px;\n font-size: 0.9rem;\n }<\/p>\n<p> .quote-container-v1,\n .quote-container-v2,\n .quote-container-v3,\n .quote-container-v4 {\n padding: 0 20px;\n }<\/p>\n<p> .quote-frame-v2,\n .quote-card-v3,\n .quote-glass-v4 {\n padding: 40px 30px;\n }<\/p>\n<p> .bird-animation-v1 {\n left: 20px;\n }<\/p>\n<p> @keyframes fly-to-right {\n 0% {\n left: -50px;\n opacity: 0;\n transform: translateY(-50%) rotate(-10deg);\n }\n 30% {\n left: 20px;\n opacity: 1;\n transform: translateY(-50%) rotate(0deg);\n }\n 60% {\n left: 60px;\n transform: translateY(-60%) rotate(5deg);\n }\n 100% {\n left: 100px;\n transform: translateY(-50%) rotate(0deg);\n opacity: 0.8;\n }\n }<\/p>\n<p> .bird-circle-v2 {\n width: 300px;\n height: 300px;\n }<\/p>\n<p> .bird-v2 {\n width: 40px;\n height: 40px;\n }<\/p>\n<p> .bird-spiral-v3 {\n width: 300px;\n height: 300px;\n }<\/p>\n<p> .bird-icon-v3 {\n width: 40px;\n height: 40px;\n }<\/p>\n<p> .logo-geometric-v3 {\n display: none;\n }<\/p>\n<p> .bird-light-trail-v4 {\n top: 10%;\n }<\/p>\n<p> .light-bird-v4 {\n width: 50px;\n height: 50px;\n }<\/p>\n<p> .logo-animated-v4 {\n width: 80px;\n height: 80px;\n }<\/p>\n<p> .author-wrapper-v3 {\n flex-direction: column;\n text-align: center;\n }<\/p>\n<p> .author-info-v3 {\n text-align: center;\n }<\/p>\n<p> .side-accent-v3 {\n display: none;\n }\n}\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<p><button class=\"restart-button\" onclick=\"restartAnimations()\">Restart Animations<\/button><\/p>\n<p><\/p>\n<h1 class=\"variant-title\">Variant 1 - Flying Bird Opening<\/h1>\n<div class=\"quote-section-wrapper-v1\">\n<section class=\"quote-section-v1\">\n<div class=\"quote-container-v1\">\n<div class=\"quote-content-v1\">\n<div class=\"logo-watermark-v1\"><\/div>\n<div class=\"bird-animation-v1\"><\/div>\n<div class=\"bird-trail-v1\"><\/div>\n<div class=\"quote-reveal-v1\">\n<h2 class=\"quote-text-v1\">\n We're not just playing a game.<br \/>\n <span class=\"golden-glow\">We're building the future.<\/span><br \/>\n <\/h2>\n<div class=\"quote-author-v1\">\n <span class=\"author-dash\"><\/span><br \/>\n <span class=\"author-name-v1\">Salim Almazaini, Founder & President, BIFA & BIFA+<\/span>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<\/div>\n<div class=\"divider\"><\/div>\n<p><\/p>\n<h1 class=\"variant-title\">Variant 2 - Minimalist Elegance<\/h1>\n<div class=\"quote-section-wrapper-v2\">\n<section class=\"quote-section-v2\">\n<div class=\"decorative-lines-v2\">\n<div class=\"line-v2\"><\/div>\n<div class=\"line-v2\"><\/div>\n<div class=\"line-v2\"><\/div>\n<\/p><\/div>\n<div class=\"logo-watermark-v2\"><\/div>\n<div class=\"bird-circle-v2\">\n<div class=\"bird-v2\"><\/div>\n<\/p><\/div>\n<div class=\"quote-container-v2\">\n<div class=\"quote-frame-v2\">\n<div class=\"top-accent-v2\">\n<div class=\"accent-line\"><\/div>\n<div class=\"accent-dot\"><\/div>\n<div class=\"accent-line\"><\/div>\n<\/p><\/div>\n<h2 class=\"quote-text-v2\">\n We're not just playing a game. <em>We're building the future.<\/em><br \/>\n <\/h2>\n<div class=\"author-section-v2\">\n<p class=\"author-name-v2\">Salim Almazaini<\/p>\n<p class=\"author-title-v2\">\u0938\u0902\u0938\u094d\u0925\u093e\u092a\u0915 \u0914\u0930 \u0905\u0927\u094d\u092f\u0915\u094d\u0937, BIFA \u0914\u0930 BIFA+<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<\/div>\n<div class=\"divider\"><\/div>\n<p><\/p>\n<h1 class=\"variant-title\">Variant 3 - Geometric Modern<\/h1>\n<div class=\"quote-section-wrapper-v3\">\n<section class=\"quote-section-v3\">\n<div class=\"geometric-pattern-v3\">\n<div class=\"geo-shape\"><\/div>\n<div class=\"geo-shape\"><\/div>\n<div class=\"geo-shape\"><\/div>\n<\/p><\/div>\n<div class=\"logo-geometric-v3\">\n<div class=\"logo-frame-v3\"><\/div>\n<\/p><\/div>\n<div class=\"bird-spiral-v3\">\n<div class=\"bird-icon-v3\"><\/div>\n<\/p><\/div>\n<div class=\"quote-container-v3\">\n<div class=\"quote-card-v3\">\n<div class=\"corner-accent-v3 top-left\"><\/div>\n<div class=\"corner-accent-v3 bottom-right\"><\/div>\n<h2 class=\"quote-text-v3\">\n We're not just playing a game.<br \/>\n We're building the <span class=\"accent-word\">future<\/span>.<br \/>\n <\/h2>\n<div class=\"author-wrapper-v3\">\n<div class=\"author-avatar-v3\">SA<\/div>\n<div class=\"author-info-v3\">\n<p class=\"author-name-v3\">Salim Almazaini<\/p>\n<p class=\"author-title-v3\">\u0938\u0902\u0938\u094d\u0925\u093e\u092a\u0915 \u0914\u0930 \u0905\u0927\u094d\u092f\u0915\u094d\u0937, BIFA \u0914\u0930 BIFA+<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<\/div>\n<div class=\"divider\"><\/div>\n<p><\/p>\n<h1 class=\"variant-title\">Variant 4 - Premium Gradient<\/h1>\n<div class=\"quote-section-wrapper-v4\">\n<section class=\"quote-section-v4\">\n<div class=\"particles-v4\">\n<div class=\"particle\"><\/div>\n<div class=\"particle\"><\/div>\n<div class=\"particle\"><\/div>\n<div class=\"particle\"><\/div>\n<div class=\"particle\"><\/div>\n<\/p><\/div>\n<div class=\"bird-light-trail-v4\">\n<div class=\"light-bird-v4\"><\/div>\n<div class=\"trail-light\"><\/div>\n<\/p><\/div>\n<div class=\"logo-animated-v4\">\n<div class=\"logo-3d-v4\"><\/div>\n<\/p><\/div>\n<div class=\"quote-container-v4\">\n<div class=\"quote-glass-v4\">\n<div class=\"golden-frame-v4\"><\/div>\n<p> <span class=\"quote-marks-v4\">\"<\/span><\/p>\n<h2 class=\"quote-text-v4\">\n We're not just playing a game.<br \/>\n We're building the <span class=\"golden\">future<\/span>.<br \/>\n <\/h2>\n<div class=\"author-glow-v4\">\n<p class=\"author-name-v4\">Salim Almazaini<\/p>\n<p class=\"author-title-v4\">\u0938\u0902\u0938\u094d\u0925\u093e\u092a\u0915 \u0914\u0930 \u0905\u0927\u094d\u092f\u0915\u094d\u0937, BIFA \u0914\u0930 BIFA+<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<\/div>\n<p><script>\nfunction restartAnimations() {\n const allAnimatedElements = document.querySelectorAll('*');<\/p>\n<p> allAnimatedElements.forEach(element => {\n const animations = element.getAnimations();\n animations.forEach(animation => {\n animation.cancel();\n animation.play();\n });\n });<\/p>\n<p> const button = document.querySelector('.restart-button');\n button.textContent = 'Restarting...';\n button.style.transform = 'scale(0.95)';<\/p>\n<p> setTimeout(() => {\n button.textContent = 'Restart Animations';\n button.style.transform = 'scale(1)';\n }, 500);\n}<\/p>\n<p>document.addEventListener('DOMContentLoaded', function() {\n const observerOptions = {\n threshold: 0.3,\n rootMargin: '0px 0px -50px 0px'\n };<\/p>\n<p> const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n if (entry.target.classList.contains('quote-section-v1')) {\n const bird = entry.target.querySelector('.bird-animation-v1');\n if (bird) {\n bird.style.animationPlayState = 'running';\n }\n }\n observer.unobserve(entry.target);\n }\n });\n }, observerOptions);<\/p>\n<p> document.querySelectorAll('[class*=\"quote-section-v\"]').forEach(section => {\n observer.observe(section);\n });<\/p>\n<p> document.querySelectorAll('[class*=\"quote-text\"]').forEach(quote => {\n quote.addEventListener('mouseenter', function() {\n this.style.transition = 'transform 0.3s ease';\n this.style.transform = 'scale(1.02)';\n });<\/p>\n<p> quote.addEventListener('mouseleave', function() {\n this.style.transform = 'scale(1)';\n });\n });<\/p>\n<p> let ticking = false;\n function updateParallax() {\n const scrolled = window.pageYOffset;<\/p>\n<p> document.querySelectorAll('.line-v2').forEach((line, index) => {\n const speed = 0.5 + (index * 0.1);\n line.style.transform = `translateY(${scrolled * speed}px)`;\n });<\/p>\n<p> document.querySelectorAll('.geo-shape').forEach((shape, index) => {\n const speed = 0.3 + (index * 0.1);\n shape.style.transform = `translateY(${scrolled * speed}px) rotate(${scrolled * 0.1}deg)`;\n });<\/p>\n<p> ticking = false;\n }<\/p>\n<p> function requestTick() {\n if (!ticking) {\n window.requestAnimationFrame(updateParallax);\n ticking = true;\n }\n }<\/p>\n<p> window.addEventListener('scroll', requestTick);<\/p>\n<p> const glassCard = document.querySelector('.quote-glass-v4');\n if (glassCard) {\n glassCard.addEventListener('mousemove', (e) => {\n const rect = glassCard.getBoundingClientRect();\n const x = ((e.clientX - rect.left) \/ rect.width - 0.5) * 2;\n const y = ((e.clientY - rect.top) \/ rect.height - 0.5) * 2;<\/p>\n<p> glassCard.style.transform = `perspective(1000px) rotateY(${x * 5}deg) rotateX(${-y * 5}deg)`;\n });<\/p>\n<p> glassCard.addEventListener('mouseleave', () => {\n glassCard.style.transform = 'perspective(1000px) rotateY(0deg) rotateX(0deg)';\n });\n }<\/p>\n<p> const quoteReveal = document.querySelector('.quote-reveal-v1');\n if (quoteReveal) {\n const text = quoteReveal.querySelector('.quote-text-v1');\n if (text) {\n text.style.opacity = '0';<\/p>\n<p> setTimeout(() => {\n text.style.opacity = '1';\n text.style.transition = 'opacity 2s ease-out';\n }, 1500);\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 - 3 Design Variants<\/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=Playfair+Display:wght@400;700;900&family=Lato:wght@300;400;700&family=Montserrat:wght@400;600;700;800&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: 'Lato', sans-serif !important;\n background: #d7e9f7;\n overflow-x: hidden;\n position: relative;\n}<\/p>\n<p>\/* Typography *\/\nh1, h2, h3, h4, h5, h6 {\n font-family: 'Playfair Display', serif !important;\n}<\/p>\n<p>p, span, a, button, div {\n font-family: 'Lato', sans-serif !important;\n}<\/p>\n<p>\/* ===== \u0412\u0410\u0420\u0418\u0410\u041d\u0422 1 - \u041e\u0420\u0418\u0413\u0418\u041d\u0410\u041b\u042c\u041d\u042b\u0419 ===== *\/\n.president-section-wrapper-v1 {\n width: 100vw;\n position: relative;\n left: 50%;\n right: 50%;\n margin-left: -50vw;\n margin-right: -50vw;\n background: #d7e9f7;\n overflow: hidden;\n max-width: 100vw;\n margin-bottom: 100px;\n}<\/p>\n<p>.president-section-v1 {\n padding: 80px 0;\n background: #d7e9f7;\n position: relative;\n}<\/p>\n<p>\/* \u041d\u0435\u043e\u043d\u043e\u0432\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0430 \u0444\u043e\u043d\u0435 *\/\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}<\/p>\n<p>.neon-circle {\n position: absolute;\n border-radius: 50%;\n filter: blur(80px);\n animation: 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(184, 134, 11, 0.2);\n top: 10%;\n left: -150px;\n animation-duration: 25s;\n}<\/p>\n<p>.neon-circle:nth-child(2) {\n width: 400px;\n height: 400px;\n background: rgba(255, 215, 0, 0.15);\n bottom: 10%;\n right: -200px;\n animation-duration: 30s;\n animation-delay: 5s;\n}<\/p>\n<p>.neon-circle:nth-child(3) {\n width: 250px;\n height: 250px;\n background: rgba(30, 144, 255, 0.2);\n top: 50%;\n left: 50%;\n animation-duration: 20s;\n animation-delay: 10s;\n}<\/p>\n<p>@keyframes float-neon {\n 0%, 100% {\n transform: translate(0, 0) scale(1);\n }\n 33% {\n transform: translate(100px, -50px) scale(1.2);\n }\n 66% {\n transform: translate(-50px, 100px) scale(0.8);\n }\n}<\/p>\n<p>\/* \u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0437\u043e\u043b\u043e\u0442\u044b\u0435 \u043b\u0438\u043d\u0438\u0438 *\/\n.neon-line {\n position: absolute;\n height: 2px;\n background: linear-gradient(90deg, transparent, rgba(184, 134, 11, 0.6), transparent);\n animation: move-line 10s linear infinite;\n}<\/p>\n<p>.neon-line:nth-child(4) {\n top: 20%;\n width: 200px;\n animation-duration: 8s;\n}<\/p>\n<p>.neon-line:nth-child(5) {\n bottom: 30%;\n width: 150px;\n animation-duration: 12s;\n animation-delay: 3s;\n}<\/p>\n<p>@keyframes move-line {\n 0% {\n left: -200px;\n }\n 100% {\n left: 100%;\n }\n}<\/p>\n<p>\/* \u0421\u0432\u0435\u0442\u044f\u0449\u0438\u0435\u0441\u044f \u0442\u043e\u0447\u043a\u0438 *\/\n.glow-dot {\n position: absolute;\n width: 6px;\n height: 6px;\n background: rgba(255, 215, 0, 0.8);\n border-radius: 50%;\n box-shadow: 0 0 10px rgba(255, 215, 0, 0.8);\n animation: 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 top: 70%;\n left: 15%;\n animation-delay: 1s;\n}<\/p>\n<p>.glow-dot:nth-child(8) {\n bottom: 25%;\n right: 20%;\n animation-delay: 2s;\n}<\/p>\n<p>@keyframes 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>.president-container-v1 {\n max-width: 1400px;\n margin: 0 auto;\n padding: 0 5%;\n display: grid;\n grid-template-columns: 360px 1fr;\n gap: 80px;\n align-items: start;\n position: relative;\n z-index: 1;\n}<\/p>\n<p>\/* President Image Column *\/\n.president-image-column {\n position: relative;\n animation: fadeInLeft 1s ease-out;\n}<\/p>\n<p>.president-photo {\n width: 100%;\n max-width: 360px;\n height: 450px;\n border-radius: 30px;\n box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);\n overflow: hidden;\n position: relative;\n background: white;\n border: 3px solid rgba(255, 255, 255, 0.8);\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n}<\/p>\n<p>.president-photo::before {\n content: '';\n position: absolute;\n top: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);\n transform: rotate(45deg);\n transition: all 0.6s ease;\n z-index: 1;\n}<\/p>\n<p>.president-photo:hover::before {\n animation: shine 0.6s ease;\n}<\/p>\n<p>@keyframes shine {\n 0% { transform: rotate(45deg) translateY(-100%); }\n 100% { transform: rotate(45deg) translateY(100%); }\n}<\/p>\n<p>.president-photo img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.5s ease;\n position: relative;\n z-index: 0;\n}<\/p>\n<p>.president-photo:hover img {\n transform: scale(1.05);\n}<\/p>\n<p>\/* President Info *\/\n.president-info {\n animation: fadeInRight 1s ease-out;\n position: relative;\n}<\/p>\n<p>.president-title {\n font-size: 2rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 4px;\n margin-bottom: 20px;\n font-family: 'Playfair Display', serif !important;\n position: relative;\n display: inline-block;\n cursor: pointer;\n text-decoration: none;\n transition: all 0.3s ease;\n}<\/p>\n<p>.president-title span {\n background: linear-gradient(135deg, #b8860b 0%, #ffd700 50%, #b8860b 100%);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n display: inline-block;\n}<\/p>\n<p>.president-title:hover span {\n transform: translateY(-2px);\n filter: brightness(1.2);\n}<\/p>\n<p>.president-title::after {\n content: '';\n position: absolute;\n bottom: -5px;\n left: 0;\n width: 100%;\n height: 3px;\n background: linear-gradient(90deg, #ffd700 0%, transparent 100%);\n transform: scaleX(0);\n transform-origin: left;\n transition: transform 0.4s ease;\n}<\/p>\n<p>.president-title:hover::after {\n transform: scaleX(1);\n}<\/p>\n<p>.president-name {\n font-size: clamp(2.5rem, 4vw, 3.5rem);\n font-weight: 900;\n color: #1a3a52;\n margin-bottom: 40px;\n line-height: 1.1;\n text-shadow: 2px 2px 4px rgba(0,0,0,0.05);\n font-family: 'Playfair Display', serif !important;\n cursor: pointer;\n text-decoration: none;\n display: block;\n transition: all 0.3s ease;\n}<\/p>\n<p>.president-name:hover {\n color: #b8860b;\n transform: translateX(5px);\n}<\/p>\n<p>.president-description {\n font-size: 1.1rem;\n line-height: 1.9;\n color: #5a6c7d;\n margin-bottom: 50px;\n font-family: 'Lato', sans-serif !important;\n}<\/p>\n<p>.president-description p {\n margin-bottom: 0;\n font-family: 'Lato', sans-serif !important;\n}<\/p>\n<p>.president-description .highlight {\n color: #b8860b;\n font-weight: 600;\n}<\/p>\n<p>\/* Logo and buttons section *\/\n.action-wrapper {\n display: flex;\n align-items: center;\n gap: 40px;\n margin-top: 30px;\n justify-content: flex-start;\n}<\/p>\n<p>\/* BIFA Logo - \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 *\/\n.bifa-logo-wrapper {\n position: relative;\n width: 90px;\n height: 90px;\n flex-shrink: 0;\n margin-left: 20px;\n}<\/p>\n<p>.bifa-logo-bg {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 110px;\n height: 110px;\n background: radial-gradient(circle, rgba(184, 134, 11, 0.06) 0%, transparent 60%);\n border-radius: 50%;\n animation: pulse 4s ease-in-out infinite;\n}<\/p>\n<p>@keyframes pulse {\n 0%, 100% {\n transform: translate(-50%, -50%) scale(1);\n opacity: 0.2;\n }\n 50% {\n transform: translate(-50%, -50%) scale(1.05);\n opacity: 0.4;\n }\n}<\/p>\n<p>.bifa-logo-img {\n width: 90px;\n height: 90px;\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 5px 10px rgba(0, 0, 0, 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);\n filter: drop-shadow(0 8px 20px rgba(184, 134, 11, 0.3));\n}<\/p>\n<p>\/* Action buttons *\/\n.action-buttons {\n display: flex;\n gap: 20px;\n}<\/p>\n<p>.btn-modern {\n padding: 15px 35px;\n text-decoration: none;\n font-size: 1.1rem;\n font-weight: 600;\n border-radius: 30px;\n display: inline-flex;\n align-items: center;\n gap: 10px;\n transition: all 0.3s ease;\n position: relative;\n overflow: hidden;\n font-family: 'Lato', sans-serif !important;\n white-space: nowrap;\n}<\/p>\n<p>.learn-more-btn {\n background: linear-gradient(135deg, #1e90ff 0%, #4169e1 100%);\n color: white;\n border: none;\n box-shadow: 0 6px 20px rgba(30, 144, 255, 0.35);\n}<\/p>\n<p>.learn-more-btn::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, 215, 0, 0.2), transparent);\n transition: left 0.6s ease;\n}<\/p>\n<p>.learn-more-btn:hover::before {\n left: 100%;\n}<\/p>\n<p>.learn-more-btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 8px 30px rgba(30, 144, 255, 0.45);\n background: linear-gradient(135deg, #4169e1 0%, #1e90ff 100%);\n}<\/p>\n<p>.about-btn {\n background: transparent;\n color: #b8860b;\n border: 2px solid #b8860b;\n}<\/p>\n<p>.about-btn:hover {\n background: #b8860b;\n color: white;\n transform: translateY(-2px);\n box-shadow: 0 10px 25px rgba(184, 134, 11, 0.2);\n}<\/p>\n<p>.btn-icon {\n width: 20px;\n height: 20px;\n transition: transform 0.3s ease;\n}<\/p>\n<p>.btn-modern:hover .btn-icon {\n transform: translateX(5px);\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>\/* ===== \u0412\u0410\u0420\u0418\u0410\u041d\u0422 2 - \u041a\u0410\u0420\u0422\u041e\u0427\u041d\u042b\u0419 \u0414\u0418\u0417\u0410\u0419\u041d ===== *\/\n.president-section-wrapper-v2 {\n width: 100vw;\n position: relative;\n left: 50%;\n right: 50%;\n margin-left: -50vw;\n margin-right: -50vw;\n background: linear-gradient(135deg, #e8f3ff 0%, #d7e9f7 100%);\n overflow: hidden;\n max-width: 100vw;\n margin-bottom: 100px;\n}<\/p>\n<p>.president-section-v2 {\n padding: 100px 0;\n position: relative;\n}<\/p>\n<p>.president-container-v2 {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 20px;\n position: relative;\n z-index: 1;\n}<\/p>\n<p>.president-card {\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(10px);\n border-radius: 40px;\n padding: 60px;\n box-shadow: 0 30px 80px rgba(0, 0, 0, 0.1);\n border: 2px solid rgba(184, 134, 11, 0.2);\n position: relative;\n overflow: hidden;\n animation: fadeInUp 1s ease-out;\n}<\/p>\n<p>.president-card::before {\n content: '';\n position: absolute;\n top: -50%;\n right: -50%;\n width: 200%;\n height: 200%;\n background: radial-gradient(circle, rgba(255, 215, 0, 0.05) 0%, transparent 50%);\n animation: rotate-slow 30s linear infinite;\n}<\/p>\n<p>@keyframes rotate-slow {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}<\/p>\n<p>.president-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-v2 {\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, #b8860b, #ffd700, #b8860b) border-box;\n animation: fadeInScale 1s ease-out;\n}<\/p>\n<p>@keyframes 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>.president-photo-v2 img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.6s ease;\n}<\/p>\n<p>.president-photo-v2:hover img {\n transform: scale(1.1);\n}<\/p>\n<p>.president-info-v2 {\n animation: fadeInRight 1s ease-out 0.3s both;\n}<\/p>\n<p>.president-badge {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n background: linear-gradient(135deg, rgba(184, 134, 11, 0.1) 0%, rgba(255, 215, 0, 0.1) 100%);\n padding: 12px 24px;\n border-radius: 50px;\n margin-bottom: 20px;\n}<\/p>\n<p>.badge-icon {\n width: 24px;\n height: 24px;\n fill: #b8860b;\n}<\/p>\n<p>.badge-text {\n font-family: 'Montserrat', sans-serif !important;\n font-size: 0.9rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 2px;\n color: #b8860b;\n}<\/p>\n<p>.president-name-v2 {\n font-size: 3rem;\n font-weight: 900;\n color: #1a3a52;\n margin-bottom: 30px;\n line-height: 1.1;\n font-family: 'Playfair Display', serif !important;\n}<\/p>\n<p>.president-description-v2 {\n font-size: 1.15rem;\n line-height: 1.8;\n color: #5a6c7d;\n margin-bottom: 40px;\n font-family: 'Lato', sans-serif !important;\n}<\/p>\n<p>.president-description-v2 .highlight {\n color: #b8860b;\n font-weight: 600;\n}<\/p>\n<p>.president-actions-v2 {\n display: flex;\n align-items: center;\n gap: 30px;\n}<\/p>\n<p>.btn-gold {\n background: linear-gradient(135deg, #b8860b 0%, #ffd700 100%);\n color: white;\n padding: 16px 40px;\n text-decoration: none;\n font-size: 1.1rem;\n font-weight: 600;\n border-radius: 30px;\n display: inline-flex;\n align-items: center;\n gap: 10px;\n transition: all 0.3s ease;\n box-shadow: 0 6px 25px rgba(184, 134, 11, 0.3);\n}<\/p>\n<p>.btn-gold:hover {\n transform: translateY(-3px);\n box-shadow: 0 10px 35px rgba(184, 134, 11, 0.4);\n}<\/p>\n<p>.btn-outline {\n background: transparent;\n color: #1e90ff;\n padding: 16px 40px;\n text-decoration: none;\n font-size: 1.1rem;\n font-weight: 600;\n border-radius: 30px;\n border: 2px solid #1e90ff;\n display: inline-flex;\n align-items: center;\n gap: 10px;\n transition: all 0.3s ease;\n}<\/p>\n<p>.btn-outline:hover {\n background: #1e90ff;\n color: white;\n transform: translateY(-3px);\n box-shadow: 0 10px 25px rgba(30, 144, 255, 0.3);\n}<\/p>\n<p>\/* Decorative elements *\/\n.gold-accent-v2 {\n position: absolute;\n width: 200px;\n height: 200px;\n background: radial-gradient(circle, rgba(255, 215, 0, 0.2) 0%, transparent 70%);\n border-radius: 50%;\n filter: blur(40px);\n animation: float-accent 15s ease-in-out infinite;\n}<\/p>\n<p>.gold-accent-v2:nth-child(1) {\n top: -100px;\n right: -100px;\n}<\/p>\n<p>.gold-accent-v2:nth-child(2) {\n bottom: -100px;\n left: -100px;\n animation-delay: 7s;\n}<\/p>\n<p>@keyframes float-accent {\n 0%, 100% {\n transform: translate(0, 0);\n }\n 50% {\n transform: translate(-20px, 20px);\n }\n}<\/p>\n<p>\/* ===== \u0412\u0410\u0420\u0418\u0410\u041d\u0422 3 - \u042d\u041b\u0415\u0413\u0410\u041d\u0422\u041d\u042b\u0419 \u041c\u0418\u041d\u0418\u041c\u0410\u041b\u0418\u0417\u041c ===== *\/\n.president-section-wrapper-v3 {\n width: 100vw;\n position: relative;\n left: 50%;\n right: 50%;\n margin-left: -50vw;\n margin-right: -50vw;\n background: white;\n overflow: hidden;\n max-width: 100vw;\n}<\/p>\n<p>.president-section-v3 {\n padding: 120px 0;\n position: relative;\n}<\/p>\n<p>.gold-pattern {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-image: \n radial-gradient(circle at 20% 80%, rgba(184, 134, 11, 0.03) 0%, transparent 50%),\n radial-gradient(circle at 80% 20%, rgba(255, 215, 0, 0.03) 0%, transparent 50%),\n radial-gradient(circle at 80% 80%, rgba(30, 144, 255, 0.03) 0%, transparent 50%);\n z-index: 0;\n}<\/p>\n<p>.president-container-v3 {\n max-width: 800px;\n margin: 0 auto;\n padding: 0 20px;\n text-align: center;\n position: relative;\n z-index: 1;\n}<\/p>\n<p>.president-photo-v3 {\n width: 300px;\n height: 400px;\n margin: 0 auto 50px;\n position: relative;\n animation: fadeInDown 1s ease-out;\n}<\/p>\n<p>.photo-frame {\n width: 100%;\n height: 100%;\n position: relative;\n overflow: hidden;\n border-radius: 0 50% 0 50%;\n box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);\n}<\/p>\n<p>.photo-frame::before {\n content: '';\n position: absolute;\n top: -5px;\n left: -5px;\n right: -5px;\n bottom: -5px;\n background: linear-gradient(135deg, #b8860b, #ffd700, #b8860b);\n border-radius: 0 50% 0 50%;\n z-index: -1;\n animation: gradient-rotate 8s linear infinite;\n}<\/p>\n<p>@keyframes gradient-rotate {\n 0% {\n filter: hue-rotate(0deg);\n }\n 100% {\n filter: hue-rotate(360deg);\n }\n}<\/p>\n<p>.photo-frame img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: all 0.6s ease;\n}<\/p>\n<p>.photo-frame:hover img {\n transform: scale(1.05);\n}<\/p>\n<p>.president-content-v3 {\n animation: fadeInUp 1s ease-out 0.3s both;\n}<\/p>\n<p>.title-decoration {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 20px;\n margin-bottom: 30px;\n}<\/p>\n<p>.gold-line {\n width: 60px;\n height: 3px;\n background: linear-gradient(90deg, transparent, #b8860b, transparent);\n}<\/p>\n<p>.president-title-v3 {\n font-family: 'Montserrat', sans-serif !important;\n font-size: 1rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 5px;\n color: #b8860b;\n}<\/p>\n<p>.president-name-v3 {\n font-size: 3.5rem;\n font-weight: 900;\n color: #1a3a52;\n margin-bottom: 40px;\n line-height: 1.1;\n font-family: 'Playfair Display', serif !important;\n position: relative;\n}<\/p>\n<p>.president-name-v3::after {\n content: '';\n position: absolute;\n bottom: -15px;\n left: 50%;\n transform: translateX(-50%);\n width: 100px;\n height: 4px;\n background: linear-gradient(90deg, transparent, #ffd700, transparent);\n}<\/p>\n<p>.president-description-v3 {\n font-size: 1.2rem;\n line-height: 2;\n color: #5a6c7d;\n margin-bottom: 50px;\n max-width: 700px;\n margin-left: auto;\n margin-right: auto;\n font-family: 'Lato', sans-serif !important;\n}<\/p>\n<p>.president-description-v3 .highlight {\n background: linear-gradient(135deg, #b8860b, #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n font-weight: 600;\n}<\/p>\n<p>.action-row {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 40px;\n}<\/p>\n<p>.btn-elegant {\n padding: 18px 45px;\n text-decoration: none;\n font-size: 1.1rem;\n font-weight: 600;\n border-radius: 5px;\n display: inline-flex;\n align-items: center;\n gap: 12px;\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n position: relative;\n overflow: hidden;\n text-transform: uppercase;\n letter-spacing: 1px;\n}<\/p>\n<p>.btn-primary {\n background: #1a3a52;\n color: white;\n box-shadow: 0 10px 30px rgba(26, 58, 82, 0.3);\n}<\/p>\n<p>.btn-primary::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(135deg, #b8860b, #ffd700);\n opacity: 0;\n transition: opacity 0.4s ease;\n}<\/p>\n<p>.btn-primary:hover::before {\n opacity: 1;\n}<\/p>\n<p>.btn-primary span,\n.btn-primary svg {\n position: relative;\n z-index: 1;\n}<\/p>\n<p>.btn-primary:hover {\n transform: translateY(-3px);\n box-shadow: 0 15px 40px rgba(184, 134, 11, 0.4);\n}<\/p>\n<p>.btn-secondary {\n background: transparent;\n color: #1a3a52;\n border: 3px solid #1a3a52;\n}<\/p>\n<p>.btn-secondary:hover {\n background: #1a3a52;\n color: white;\n transform: translateY(-3px);\n box-shadow: 0 15px 40px rgba(26, 58, 82, 0.3);\n}<\/p>\n<p>.logo-floating {\n position: absolute;\n top: 50px;\n right: 50px;\n width: 80px;\n height: 80px;\n opacity: 0.1;\n animation: float-logo 20s ease-in-out infinite;\n}<\/p>\n<p>@keyframes float-logo {\n 0%, 100% {\n transform: translate(0, 0) rotate(0deg);\n }\n 25% {\n transform: translate(-20px, 20px) rotate(90deg);\n }\n 50% {\n transform: translate(20px, -20px) rotate(180deg);\n }\n 75% {\n transform: translate(-20px, -20px) rotate(270deg);\n }\n}<\/p>\n<p>\/* Responsive Design *\/\n@media (max-width: 1200px) {\n .president-container-v1 {\n padding: 0 40px;\n gap: 60px;\n }<\/p>\n<p> .president-card {\n padding: 40px;\n }\n}<\/p>\n<p>@media (max-width: 968px) {\n .president-section-v1,\n .president-section-v2,\n .president-section-v3 {\n padding: 60px 0;\n }<\/p>\n<p> .president-container-v1 {\n grid-template-columns: 1fr;\n gap: 50px;\n text-align: center;\n padding: 0 30px;\n }<\/p>\n<p> .president-card-content {\n grid-template-columns: 1fr;\n text-align: center;\n }<\/p>\n<p> .president-photo-v2 {\n margin: 0 auto;\n }<\/p>\n<p> .president-actions-v2,\n .action-row {\n justify-content: center;\n }<\/p>\n<p> .president-photo {\n margin: 0 auto;\n max-width: 400px;\n height: 500px;\n }<\/p>\n<p> .president-title::after {\n left: 50%;\n transform: translateX(-50%);\n width: 60px;\n }<\/p>\n<p> .president-title:hover::after {\n transform: translateX(-50%) scaleX(1);\n }<\/p>\n<p> .president-description {\n text-align: left;\n }<\/p>\n<p> .action-wrapper {\n justify-content: center;\n flex-wrap: wrap;\n }\n}<\/p>\n<p>@media (max-width: 640px) {\n .president-container-v1,\n .president-container-v2,\n .president-container-v3 {\n padding: 0 20px;\n }<\/p>\n<p> .president-name,\n .president-name-v2,\n .president-name-v3 {\n font-size: 2rem;\n }<\/p>\n<p> .president-title {\n font-size: 1.3rem;\n letter-spacing: 2px;\n }<\/p>\n<p> .president-description,\n .president-description-v2,\n .president-description-v3 {\n font-size: 1rem;\n }<\/p>\n<p> .action-wrapper {\n flex-direction: row;\n gap: 20px;\n align-items: center;\n justify-content: center;\n }<\/p>\n<p> .action-buttons {\n flex-direction: row;\n gap: 10px;\n }<\/p>\n<p> .btn-modern {\n padding: 12px 20px;\n font-size: 0.95rem;\n }<\/p>\n<p> .bifa-logo-wrapper {\n margin-left: 10px;\n }<\/p>\n<p> .president-photo-v3 {\n width: 250px;\n height: 333px;\n }<\/p>\n<p> .president-actions-v2,\n .action-row {\n flex-direction: column;\n width: 100%;\n }<\/p>\n<p> .btn-gold,\n .btn-outline,\n .btn-elegant {\n width: 100%;\n justify-content: center;\n }\n}<\/p>\n<p>@media (max-width: 480px) {\n .president-photo {\n max-width: 100%;\n height: 400px;\n }<\/p>\n<p> .bifa-logo-wrapper {\n width: 70px;\n height: 70px;\n margin-left: 10px;\n }<\/p>\n<p> .bifa-logo-img {\n width: 70px;\n height: 70px;\n }<\/p>\n<p> .action-wrapper {\n flex-wrap: nowrap;\n }<\/p>\n<p> .btn-modern {\n padding: 10px 15px;\n font-size: 0.9rem;\n }<\/p>\n<p> .btn-modern span {\n display: none;\n }<\/p>\n<p> .btn-modern .btn-icon {\n margin: 0;\n }\n}<\/p>\n<p>\/* Title Styles *\/\n.variant-title {\n text-align: center;\n font-size: 2.5rem;\n font-weight: 800;\n margin-bottom: 20px;\n font-family: 'Montserrat', sans-serif !important;\n color: #1a3a52;\n}<\/p>\n<p>.divider {\n height: 2px;\n background: linear-gradient(90deg, transparent, #b8860b, transparent);\n margin: 80px auto;\n max-width: 200px;\n}\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<p><\/p>\n<h1 class=\"variant-title\">\u0412\u0430\u0440\u0438\u0430\u043d\u0442 1 - \u041e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0439<\/h1>\n<div class=\"president-section-wrapper-v1\">\n<section class=\"president-section-v1\">\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=\"neon-line\"><\/div>\n<div class=\"neon-line\"><\/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=\"president-container-v1\">\n <\/p>\n<div class=\"president-image-column\">\n<div class=\"president-photo\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Mr\/main-photo.jpg\" alt=\"Mr. Salim Humaid Almazaini\">\n <\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"president-info\">\n <a href=\"\/aboutus\" class=\"president-title\"><br \/>\n <span>Founder and President<\/span><br \/>\n <\/a><\/p>\n<p> <a href=\"\/aboutus\" class=\"president-name\"><br \/>\n Mr. Salim Humaid Almazaini<br \/>\n <\/a><\/p>\n<div class=\"president-description\">\n<p>\n \u090f\u0915 \u092a\u094d\u0930\u0924\u093f\u0937\u094d\u0920\u093f\u0924 <span class=\"highlight\">\u0926\u0942\u0930\u0926\u0930\u094d\u0936\u0940 \u0928\u0947\u0924\u093e<\/span> in international sports diplomacy. Through strategic innovation and unwavering commitment, Mr. Almazaini transforms global football <span class=\"highlight\">\u090f\u0915\u0924\u093e \u0914\u0930 \u0938\u0939\u092f\u094b\u0917 \u0915\u0947 \u0932\u093f\u090f \u090f\u0915 \u0936\u0915\u094d\u0924\u093f\u0936\u093e\u0932\u0940 \u0938\u0947\u0924\u0941 \u0915\u0947 \u0930\u0942\u092a \u092e\u0947\u0902<\/span> \u0930\u093e\u0937\u094d\u091f\u094d\u0930\u094b\u0902 \u0915\u0947 \u092c\u0940\u091a.\n <\/p>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"action-wrapper\">\n<div class=\"action-buttons\">\n <a href=\"\/president\" class=\"btn-modern learn-more-btn\"><br \/>\n <span>\u0914\u0930 \u0905\u0927\u093f\u0915 \u091c\u093e\u0928\u0947\u0902<\/span><br \/>\n <svg class=\"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=\"\/aboutus\" class=\"btn-modern about-btn\"><br \/>\n <span>BIFA \u0915\u0947 \u092c\u093e\u0930\u0947 \u092e\u0947\u0902<\/span><br \/>\n <svg class=\"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 16v-4M12 8h.01\"\/>\n <\/svg><br \/>\n <\/a>\n <\/div>\n<div class=\"bifa-logo-wrapper\">\n<div class=\"bifa-logo-bg\"><\/div>\n<div class=\"bifa-logo-img\" role=\"img\" aria-label=\"BIFA \u0932\u094b\u0917\u094b\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<\/div>\n<div class=\"divider\"><\/div>\n<p><\/p>\n<h1 class=\"variant-title\">\u0412\u0430\u0440\u0438\u0430\u043d\u0442 2 - \u041a\u0430\u0440\u0442\u043e\u0447\u043d\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d<\/h1>\n<div class=\"president-section-wrapper-v2\">\n<section class=\"president-section-v2\">\n<div class=\"gold-accent-v2\"><\/div>\n<div class=\"gold-accent-v2\"><\/div>\n<div class=\"president-container-v2\">\n<div class=\"president-card\">\n<div class=\"president-card-content\">\n <\/p>\n<div class=\"president-photo-v2\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Mr\/main-photo.jpg\" alt=\"Mr. Salim Humaid Almazaini\">\n <\/div>\n<p> <\/p>\n<div class=\"president-info-v2\">\n<div class=\"president-badge\">\n <svg class=\"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=\"badge-text\">\u0938\u0902\u0938\u094d\u0925\u093e\u092a\u0915 \u090f\u0935\u0902 \u0905\u0927\u094d\u092f\u0915\u094d\u0937<\/span>\n <\/div>\n<h2 class=\"president-name-v2\">Mr. Salim Humaid Almazaini<\/h2>\n<div class=\"president-description-v2\">\n<p>\n \u090f\u0915 \u092a\u094d\u0930\u0924\u093f\u0937\u094d\u0920\u093f\u0924 <span class=\"highlight\">\u0926\u0942\u0930\u0926\u0930\u094d\u0936\u0940 \u0928\u0947\u0924\u093e<\/span> in international sports diplomacy. Through strategic innovation and unwavering commitment, Mr. Almazaini transforms global football <span class=\"highlight\">\u090f\u0915\u0924\u093e \u0914\u0930 \u0938\u0939\u092f\u094b\u0917 \u0915\u0947 \u0932\u093f\u090f \u090f\u0915 \u0936\u0915\u094d\u0924\u093f\u0936\u093e\u0932\u0940 \u0938\u0947\u0924\u0941 \u0915\u0947 \u0930\u0942\u092a \u092e\u0947\u0902<\/span> \u0930\u093e\u0937\u094d\u091f\u094d\u0930\u094b\u0902 \u0915\u0947 \u092c\u0940\u091a.\n <\/p>\n<\/p><\/div>\n<div class=\"president-actions-v2\">\n <a href=\"\/president\" class=\"btn-gold\"><br \/>\n <span>\u0915\u0939\u093e\u0928\u0940 \u0916\u094b\u091c\u0947\u0902<\/span><br \/>\n <svg class=\"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=\"\/aboutus\" class=\"btn-outline\"><br \/>\n <span>BIFA \u0915\u0947 \u092c\u093e\u0930\u0947 \u092e\u0947\u0902<\/span><br \/>\n <svg class=\"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=\"BIFA \u0932\u094b\u0917\u094b\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<\/div>\n<div class=\"divider\"><\/div>\n<p><\/p>\n<h1 class=\"variant-title\">\u0412\u0430\u0440\u0438\u0430\u043d\u0442 3 - \u042d\u043b\u0435\u0433\u0430\u043d\u0442\u043d\u044b\u0439 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u0438\u0437\u043c<\/h1>\n<div class=\"president-section-wrapper-v3\">\n<section class=\"president-section-v3\">\n<div class=\"gold-pattern\"><\/div>\n<div class=\"logo-floating\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/logo_bifa.svg\" alt=\"BIFA\" style=\"width: 100%; height: 100%; opacity: 0.1;\">\n <\/div>\n<div class=\"president-container-v3\">\n <\/p>\n<div class=\"president-photo-v3\">\n<div class=\"photo-frame\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Mr\/main-photo.jpg\" alt=\"Mr. Salim Humaid Almazaini\">\n <\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"president-content-v3\">\n<div class=\"title-decoration\">\n<div class=\"gold-line\"><\/div>\n<h3 class=\"president-title-v3\">\u0938\u0902\u0938\u094d\u0925\u093e\u092a\u0915 \u090f\u0935\u0902 \u0905\u0927\u094d\u092f\u0915\u094d\u0937<\/h3>\n<div class=\"gold-line\"><\/div>\n<\/p><\/div>\n<h1 class=\"president-name-v3\">Mr. Salim Humaid Almazaini<\/h1>\n<div class=\"president-description-v3\">\n<p>\n \u090f\u0915 \u092a\u094d\u0930\u0924\u093f\u0937\u094d\u0920\u093f\u0924 <span class=\"highlight\">\u0926\u0942\u0930\u0926\u0930\u094d\u0936\u0940 \u0928\u0947\u0924\u093e<\/span> in international sports diplomacy. Through strategic innovation and unwavering commitment, Mr. Almazaini transforms global football <span class=\"highlight\">\u090f\u0915\u0924\u093e \u0914\u0930 \u0938\u0939\u092f\u094b\u0917 \u0915\u0947 \u0932\u093f\u090f \u090f\u0915 \u0936\u0915\u094d\u0924\u093f\u0936\u093e\u0932\u0940 \u0938\u0947\u0924\u0941 \u0915\u0947 \u0930\u0942\u092a \u092e\u0947\u0902<\/span> \u0930\u093e\u0937\u094d\u091f\u094d\u0930\u094b\u0902 \u0915\u0947 \u092c\u0940\u091a.\n <\/p>\n<\/p><\/div>\n<div class=\"action-row\">\n <a href=\"\/president\" class=\"btn-elegant btn-primary\"><br \/>\n <span>\u0914\u0930 \u0905\u0927\u093f\u0915 \u091c\u093e\u0928\u0947\u0902<\/span><br \/>\n <svg viewbox=\"0 0 24 24\" width=\"20\" height=\"20\" 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=\"\/aboutus\" class=\"btn-elegant btn-secondary\"><br \/>\n <span>BIFA \u0915\u0947 \u092c\u093e\u0930\u0947 \u092e\u0947\u0902<\/span><br \/>\n <svg viewbox=\"0 0 24 24\" width=\"20\" height=\"20\" 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 16v-4M12 8h.01\"\/>\n <\/svg><br \/>\n <\/a>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<\/div>\n<p><script>\n\/\/ Animation for all variants\ndocument.addEventListener('DOMContentLoaded', function() {\n \/\/ Smooth scroll reveal\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('[class*=\"fadeIn\"], .president-card, .president-photo-v2, .president-photo-v3').forEach(el => {\n if (el) {\n el.style.animationPlayState = 'paused';\n observer.observe(el);\n }\n });<\/p>\n<p> \/\/ Logo hover effects for all variants\n document.querySelectorAll('.bifa-logo-wrapper').forEach(logoWrapper => {\n logoWrapper.addEventListener('mouseenter', () => {\n const logo = logoWrapper.querySelector('.bifa-logo-img');\n if (logo) {\n logo.style.transform = 'scale(1.1)';\n }\n });<\/p>\n<p> logoWrapper.addEventListener('mouseleave', () => {\n const logo = logoWrapper.querySelector('.bifa-logo-img');\n if (logo) {\n logo.style.transform = 'scale(1)';\n }\n });\n });<\/p>\n<p> \/\/ Button glow effects\n document.querySelectorAll('.btn-modern, .btn-gold, .btn-outline, .btn-elegant').forEach(button => {\n button.addEventListener('mouseenter', (e) => {\n const rect = button.getBoundingClientRect();\n const x = e.clientX - rect.left;\n const y = e.clientY - rect.top;<\/p>\n<p> const glow = document.createElement('div');\n glow.style.cssText = `\n position: absolute;\n width: 100px;\n height: 100px;\n background: radial-gradient(circle, rgba(255, 215, 0, 0.2) 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(glow);\n setTimeout(() => { glow.style.opacity = '1'; }, 10);<\/p>\n<p> button.addEventListener('mouseleave', () => {\n glow.style.opacity = '0';\n setTimeout(() => glow.remove(), 300);\n }, { once: true });\n });\n });<\/p>\n<p> \/\/ Image loading animation\n document.querySelectorAll('img').forEach(img => {\n img.style.opacity = '0';\n img.style.transition = 'opacity 0.5s ease';<\/p>\n<p> if (img.complete) {\n img.style.opacity = '1';\n } else {\n img.addEventListener('load', function() {\n this.style.opacity = '1';\n });\n }\n });<\/p>\n<p> \/\/ Preload images\n function preloadImages() {\n const imageUrls = [\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> 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 President - 3 Design Variants<\/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=Playfair+Display:wght@400;700;900&family=Lato:wght@300;400;700&family=Montserrat:wght@400;600;700;800&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: 'Lato', sans-serif !important;\n background: #d7e9f7;\n overflow-x: hidden;\n position: relative;\n}<\/p>\n<p>\/* Typography *\/\nh1, h2, h3, h4, h5, h6 {\n font-family: 'Playfair Display', serif !important;\n}<\/p>\n<p>p, span, a, button, div {\n font-family: 'Lato', sans-serif !important;\n}<\/p>\n<p>\/* ===== \u0412\u0410\u0420\u0418\u0410\u041d\u0422 1 - \u041e\u0420\u0418\u0413\u0418\u041d\u0410\u041b\u042c\u041d\u042b\u0419 ===== *\/\n.president-section-wrapper-v1 {\n width: 100vw;\n position: relative;\n left: 50%;\n right: 50%;\n margin-left: -50vw;\n margin-right: -50vw;\n background: #d7e9f7;\n overflow: hidden;\n max-width: 100vw;\n margin-bottom: 100px;\n}<\/p>\n<p>.president-section-v1 {\n padding: 80px 0;\n background: #d7e9f7;\n position: relative;\n}<\/p>\n<p>\/* \u041d\u0435\u043e\u043d\u043e\u0432\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0430 \u0444\u043e\u043d\u0435 *\/\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}<\/p>\n<p>.neon-circle {\n position: absolute;\n border-radius: 50%;\n filter: blur(80px);\n animation: 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(184, 134, 11, 0.2);\n top: 10%;\n left: -150px;\n animation-duration: 25s;\n}<\/p>\n<p>.neon-circle:nth-child(2) {\n width: 400px;\n height: 400px;\n background: rgba(255, 215, 0, 0.15);\n bottom: 10%;\n right: -200px;\n animation-duration: 30s;\n animation-delay: 5s;\n}<\/p>\n<p>.neon-circle:nth-child(3) {\n width: 250px;\n height: 250px;\n background: rgba(30, 144, 255, 0.2);\n top: 50%;\n left: 50%;\n animation-duration: 20s;\n animation-delay: 10s;\n}<\/p>\n<p>@keyframes float-neon {\n 0%, 100% {\n transform: translate(0, 0) scale(1);\n }\n 33% {\n transform: translate(100px, -50px) scale(1.2);\n }\n 66% {\n transform: translate(-50px, 100px) scale(0.8);\n }\n}<\/p>\n<p>\/* \u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0437\u043e\u043b\u043e\u0442\u044b\u0435 \u043b\u0438\u043d\u0438\u0438 *\/\n.neon-line {\n position: absolute;\n height: 2px;\n background: linear-gradient(90deg, transparent, rgba(184, 134, 11, 0.6), transparent);\n animation: move-line 10s linear infinite;\n}<\/p>\n<p>.neon-line:nth-child(4) {\n top: 20%;\n width: 200px;\n animation-duration: 8s;\n}<\/p>\n<p>.neon-line:nth-child(5) {\n bottom: 30%;\n width: 150px;\n animation-duration: 12s;\n animation-delay: 3s;\n}<\/p>\n<p>@keyframes move-line {\n 0% {\n left: -200px;\n }\n 100% {\n left: 100%;\n }\n}<\/p>\n<p>\/* \u0421\u0432\u0435\u0442\u044f\u0449\u0438\u0435\u0441\u044f \u0442\u043e\u0447\u043a\u0438 *\/\n.glow-dot {\n position: absolute;\n width: 6px;\n height: 6px;\n background: rgba(255, 215, 0, 0.8);\n border-radius: 50%;\n box-shadow: 0 0 10px rgba(255, 215, 0, 0.8);\n animation: 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 top: 70%;\n left: 15%;\n animation-delay: 1s;\n}<\/p>\n<p>.glow-dot:nth-child(8) {\n bottom: 25%;\n right: 20%;\n animation-delay: 2s;\n}<\/p>\n<p>@keyframes 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>.president-container-v1 {\n max-width: 1400px;\n margin: 0 auto;\n padding: 0 5%;\n display: grid;\n grid-template-columns: 360px 1fr;\n gap: 80px;\n align-items: start;\n position: relative;\n z-index: 1;\n}<\/p>\n<p>\/* President Image Column *\/\n.president-image-column {\n position: relative;\n animation: fadeInLeft 1s ease-out;\n}<\/p>\n<p>.president-photo {\n width: 100%;\n max-width: 360px;\n height: 450px;\n border-radius: 30px;\n box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);\n overflow: hidden;\n position: relative;\n background: white;\n border: 3px solid rgba(255, 255, 255, 0.8);\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n}<\/p>\n<p>.president-photo::before {\n content: '';\n position: absolute;\n top: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);\n transform: rotate(45deg);\n transition: all 0.6s ease;\n z-index: 1;\n}<\/p>\n<p>.president-photo:hover::before {\n animation: shine 0.6s ease;\n}<\/p>\n<p>@keyframes shine {\n 0% { transform: rotate(45deg) translateY(-100%); }\n 100% { transform: rotate(45deg) translateY(100%); }\n}<\/p>\n<p>.president-photo img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.5s ease;\n position: relative;\n z-index: 0;\n}<\/p>\n<p>.president-photo:hover img {\n transform: scale(1.05);\n}<\/p>\n<p>\/* President Info *\/\n.president-info {\n animation: fadeInRight 1s ease-out;\n position: relative;\n}<\/p>\n<p>.president-title {\n font-size: 2rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 4px;\n margin-bottom: 20px;\n font-family: 'Playfair Display', serif !important;\n position: relative;\n display: inline-block;\n cursor: pointer;\n text-decoration: none;\n transition: all 0.3s ease;\n}<\/p>\n<p>.president-title span {\n background: linear-gradient(135deg, #b8860b 0%, #ffd700 50%, #b8860b 100%);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n display: inline-block;\n}<\/p>\n<p>.president-title:hover span {\n transform: translateY(-2px);\n filter: brightness(1.2);\n}<\/p>\n<p>.president-title::after {\n content: '';\n position: absolute;\n bottom: -5px;\n left: 0;\n width: 100%;\n height: 3px;\n background: linear-gradient(90deg, #ffd700 0%, transparent 100%);\n transform: scaleX(0);\n transform-origin: left;\n transition: transform 0.4s ease;\n}<\/p>\n<p>.president-title:hover::after {\n transform: scaleX(1);\n}<\/p>\n<p>.president-name {\n font-size: clamp(2.5rem, 4vw, 3.5rem);\n font-weight: 900;\n color: #1a3a52;\n margin-bottom: 40px;\n line-height: 1.1;\n text-shadow: 2px 2px 4px rgba(0,0,0,0.05);\n font-family: 'Playfair Display', serif !important;\n cursor: pointer;\n text-decoration: none;\n display: block;\n transition: all 0.3s ease;\n}<\/p>\n<p>.president-name:hover {\n color: #b8860b;\n transform: translateX(5px);\n}<\/p>\n<p>.president-description {\n font-size: 1.1rem;\n line-height: 1.9;\n color: #5a6c7d;\n margin-bottom: 50px;\n font-family: 'Lato', sans-serif !important;\n}<\/p>\n<p>.president-description p {\n margin-bottom: 0;\n font-family: 'Lato', sans-serif !important;\n}<\/p>\n<p>.president-description .highlight {\n color: #b8860b;\n font-weight: 600;\n}<\/p>\n<p>\/* Logo and buttons section *\/\n.action-wrapper {\n display: flex;\n align-items: center;\n gap: 40px;\n margin-top: 30px;\n justify-content: flex-start;\n}<\/p>\n<p>\/* BIFA Logo - \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 *\/\n.bifa-logo-wrapper {\n position: relative;\n width: 90px;\n height: 90px;\n flex-shrink: 0;\n margin-left: 20px;\n}<\/p>\n<p>.bifa-logo-bg {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 110px;\n height: 110px;\n background: radial-gradient(circle, rgba(184, 134, 11, 0.06) 0%, transparent 60%);\n border-radius: 50%;\n animation: pulse 4s ease-in-out infinite;\n}<\/p>\n<p>@keyframes pulse {\n 0%, 100% {\n transform: translate(-50%, -50%) scale(1);\n opacity: 0.2;\n }\n 50% {\n transform: translate(-50%, -50%) scale(1.05);\n opacity: 0.4;\n }\n}<\/p>\n<p>.bifa-logo-img {\n width: 90px;\n height: 90px;\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 5px 10px rgba(0, 0, 0, 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);\n filter: drop-shadow(0 8px 20px rgba(184, 134, 11, 0.3));\n}<\/p>\n<p>\/* Action buttons *\/\n.action-buttons {\n display: flex;\n gap: 20px;\n}<\/p>\n<p>.btn-modern {\n padding: 15px 35px;\n text-decoration: none;\n font-size: 1.1rem;\n font-weight: 600;\n border-radius: 30px;\n display: inline-flex;\n align-items: center;\n gap: 10px;\n transition: all 0.3s ease;\n position: relative;\n overflow: hidden;\n font-family: 'Lato', sans-serif !important;\n white-space: nowrap;\n}<\/p>\n<p>.learn-more-btn {\n background: linear-gradient(135deg, #1e90ff 0%, #4169e1 100%);\n color: white;\n border: none;\n box-shadow: 0 6px 20px rgba(30, 144, 255, 0.35);\n}<\/p>\n<p>.learn-more-btn::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, 215, 0, 0.2), transparent);\n transition: left 0.6s ease;\n}<\/p>\n<p>.learn-more-btn:hover::before {\n left: 100%;\n}<\/p>\n<p>.learn-more-btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 8px 30px rgba(30, 144, 255, 0.45);\n background: linear-gradient(135deg, #4169e1 0%, #1e90ff 100%);\n}<\/p>\n<p>.about-btn {\n background: transparent;\n color: #b8860b;\n border: 2px solid #b8860b;\n}<\/p>\n<p>.about-btn:hover {\n background: #b8860b;\n color: white;\n transform: translateY(-2px);\n box-shadow: 0 10px 25px rgba(184, 134, 11, 0.2);\n}<\/p>\n<p>.btn-icon {\n width: 20px;\n height: 20px;\n transition: transform 0.3s ease;\n}<\/p>\n<p>.btn-modern:hover .btn-icon {\n transform: translateX(5px);\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>\/* ===== \u0412\u0410\u0420\u0418\u0410\u041d\u0422 2 - \u041a\u0410\u0420\u0422\u041e\u0427\u041d\u042b\u0419 \u0414\u0418\u0417\u0410\u0419\u041d ===== *\/\n.president-section-wrapper-v2 {\n width: 100vw;\n position: relative;\n left: 50%;\n right: 50%;\n margin-left: -50vw;\n margin-right: -50vw;\n background: linear-gradient(135deg, #e8f3ff 0%, #d7e9f7 100%);\n overflow: hidden;\n max-width: 100vw;\n margin-bottom: 100px;\n}<\/p>\n<p>.president-section-v2 {\n padding: 100px 0;\n position: relative;\n}<\/p>\n<p>.president-container-v2 {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 20px;\n position: relative;\n z-index: 1;\n}<\/p>\n<p>.president-card {\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(10px);\n border-radius: 40px;\n padding: 60px;\n box-shadow: 0 30px 80px rgba(0, 0, 0, 0.1);\n border: 2px solid rgba(184, 134, 11, 0.2);\n position: relative;\n overflow: hidden;\n animation: fadeInUp 1s ease-out;\n}<\/p>\n<p>.president-card::before {\n content: '';\n position: absolute;\n top: -50%;\n right: -50%;\n width: 200%;\n height: 200%;\n background: radial-gradient(circle, rgba(255, 215, 0, 0.05) 0%, transparent 50%);\n animation: rotate-slow 30s linear infinite;\n}<\/p>\n<p>@keyframes rotate-slow {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}<\/p>\n<p>.president-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-v2 {\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, #b8860b, #ffd700, #b8860b) border-box;\n animation: fadeInScale 1s ease-out;\n}<\/p>\n<p>@keyframes 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>.president-photo-v2 img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.6s ease;\n}<\/p>\n<p>.president-photo-v2:hover img {\n transform: scale(1.1);\n}<\/p>\n<p>.president-info-v2 {\n animation: fadeInRight 1s ease-out 0.3s both;\n}<\/p>\n<p>.president-badge {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n background: linear-gradient(135deg, rgba(184, 134, 11, 0.1) 0%, rgba(255, 215, 0, 0.1) 100%);\n padding: 12px 24px;\n border-radius: 50px;\n margin-bottom: 20px;\n}<\/p>\n<p>.badge-icon {\n width: 24px;\n height: 24px;\n fill: #b8860b;\n}<\/p>\n<p>.badge-text {\n font-family: 'Montserrat', sans-serif !important;\n font-size: 0.9rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 2px;\n color: #b8860b;\n}<\/p>\n<p>.president-name-v2 {\n font-size: 3rem;\n font-weight: 900;\n color: #1a3a52;\n margin-bottom: 30px;\n line-height: 1.1;\n font-family: 'Playfair Display', serif !important;\n}<\/p>\n<p>.president-description-v2 {\n font-size: 1.15rem;\n line-height: 1.8;\n color: #5a6c7d;\n margin-bottom: 40px;\n font-family: 'Lato', sans-serif !important;\n}<\/p>\n<p>.president-description-v2 .highlight {\n color: #b8860b;\n font-weight: 600;\n}<\/p>\n<p>.president-actions-v2 {\n display: flex;\n align-items: center;\n gap: 30px;\n}<\/p>\n<p>.btn-gold {\n background: linear-gradient(135deg, #b8860b 0%, #ffd700 100%);\n color: white;\n padding: 16px 40px;\n text-decoration: none;\n font-size: 1.1rem;\n font-weight: 600;\n border-radius: 30px;\n display: inline-flex;\n align-items: center;\n gap: 10px;\n transition: all 0.3s ease;\n box-shadow: 0 6px 25px rgba(184, 134, 11, 0.3);\n}<\/p>\n<p>.btn-gold:hover {\n transform: translateY(-3px);\n box-shadow: 0 10px 35px rgba(184, 134, 11, 0.4);\n}<\/p>\n<p>.btn-outline {\n background: transparent;\n color: #1e90ff;\n padding: 16px 40px;\n text-decoration: none;\n font-size: 1.1rem;\n font-weight: 600;\n border-radius: 30px;\n border: 2px solid #1e90ff;\n display: inline-flex;\n align-items: center;\n gap: 10px;\n transition: all 0.3s ease;\n}<\/p>\n<p>.btn-outline:hover {\n background: #1e90ff;\n color: white;\n transform: translateY(-3px);\n box-shadow: 0 10px 25px rgba(30, 144, 255, 0.3);\n}<\/p>\n<p>\/* Decorative elements *\/\n.gold-accent-v2 {\n position: absolute;\n width: 200px;\n height: 200px;\n background: radial-gradient(circle, rgba(255, 215, 0, 0.2) 0%, transparent 70%);\n border-radius: 50%;\n filter: blur(40px);\n animation: float-accent 15s ease-in-out infinite;\n}<\/p>\n<p>.gold-accent-v2:nth-child(1) {\n top: -100px;\n right: -100px;\n}<\/p>\n<p>.gold-accent-v2:nth-child(2) {\n bottom: -100px;\n left: -100px;\n animation-delay: 7s;\n}<\/p>\n<p>@keyframes float-accent {\n 0%, 100% {\n transform: translate(0, 0);\n }\n 50% {\n transform: translate(-20px, 20px);\n }\n}<\/p>\n<p>\/* ===== \u0412\u0410\u0420\u0418\u0410\u041d\u0422 3 - \u042d\u041b\u0415\u0413\u0410\u041d\u0422\u041d\u042b\u0419 \u041c\u0418\u041d\u0418\u041c\u0410\u041b\u0418\u0417\u041c ===== *\/\n.president-section-wrapper-v3 {\n width: 100vw;\n position: relative;\n left: 50%;\n right: 50%;\n margin-left: -50vw;\n margin-right: -50vw;\n background: white;\n overflow: hidden;\n max-width: 100vw;\n}<\/p>\n<p>.president-section-v3 {\n padding: 120px 0;\n position: relative;\n}<\/p>\n<p>.gold-pattern {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-image: \n radial-gradient(circle at 20% 80%, rgba(184, 134, 11, 0.03) 0%, transparent 50%),\n radial-gradient(circle at 80% 20%, rgba(255, 215, 0, 0.03) 0%, transparent 50%),\n radial-gradient(circle at 80% 80%, rgba(30, 144, 255, 0.03) 0%, transparent 50%);\n z-index: 0;\n}<\/p>\n<p>.president-container-v3 {\n max-width: 800px;\n margin: 0 auto;\n padding: 0 20px;\n text-align: center;\n position: relative;\n z-index: 1;\n}<\/p>\n<p>.president-photo-v3 {\n width: 300px;\n height: 400px;\n margin: 0 auto 50px;\n position: relative;\n animation: fadeInDown 1s ease-out;\n}<\/p>\n<p>.photo-frame {\n width: 100%;\n height: 100%;\n position: relative;\n overflow: hidden;\n border-radius: 0 50% 0 50%;\n box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);\n}<\/p>\n<p>.photo-frame::before {\n content: '';\n position: absolute;\n top: -5px;\n left: -5px;\n right: -5px;\n bottom: -5px;\n background: linear-gradient(135deg, #b8860b, #ffd700, #b8860b);\n border-radius: 0 50% 0 50%;\n z-index: -1;\n animation: gradient-rotate 8s linear infinite;\n}<\/p>\n<p>@keyframes gradient-rotate {\n 0% {\n filter: hue-rotate(0deg);\n }\n 100% {\n filter: hue-rotate(360deg);\n }\n}<\/p>\n<p>.photo-frame img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: all 0.6s ease;\n}<\/p>\n<p>.photo-frame:hover img {\n transform: scale(1.05);\n}<\/p>\n<p>.president-content-v3 {\n animation: fadeInUp 1s ease-out 0.3s both;\n}<\/p>\n<p>.title-decoration {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 20px;\n margin-bottom: 30px;\n}<\/p>\n<p>.gold-line {\n width: 60px;\n height: 3px;\n background: linear-gradient(90deg, transparent, #b8860b, transparent);\n}<\/p>\n<p>.president-title-v3 {\n font-family: 'Montserrat', sans-serif !important;\n font-size: 1rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 5px;\n color: #b8860b;\n}<\/p>\n<p>.president-name-v3 {\n font-size: 3.5rem;\n font-weight: 900;\n color: #1a3a52;\n margin-bottom: 40px;\n line-height: 1.1;\n font-family: 'Playfair Display', serif !important;\n position: relative;\n}<\/p>\n<p>.president-name-v3::after {\n content: '';\n position: absolute;\n bottom: -15px;\n left: 50%;\n transform: translateX(-50%);\n width: 100px;\n height: 4px;\n background: linear-gradient(90deg, transparent, #ffd700, transparent);\n}<\/p>\n<p>.president-description-v3 {\n font-size: 1.2rem;\n line-height: 2;\n color: #5a6c7d;\n margin-bottom: 50px;\n max-width: 700px;\n margin-left: auto;\n margin-right: auto;\n font-family: 'Lato', sans-serif !important;\n}<\/p>\n<p>.president-description-v3 .highlight {\n background: linear-gradient(135deg, #b8860b, #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n font-weight: 600;\n}<\/p>\n<p>.action-row {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 40px;\n}<\/p>\n<p>.btn-elegant {\n padding: 18px 45px;\n text-decoration: none;\n font-size: 1.1rem;\n font-weight: 600;\n border-radius: 5px;\n display: inline-flex;\n align-items: center;\n gap: 12px;\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n position: relative;\n overflow: hidden;\n text-transform: uppercase;\n letter-spacing: 1px;\n}<\/p>\n<p>.btn-primary {\n background: #1a3a52;\n color: white;\n box-shadow: 0 10px 30px rgba(26, 58, 82, 0.3);\n}<\/p>\n<p>.btn-primary::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(135deg, #b8860b, #ffd700);\n opacity: 0;\n transition: opacity 0.4s ease;\n}<\/p>\n<p>.btn-primary:hover::before {\n opacity: 1;\n}<\/p>\n<p>.btn-primary span,\n.btn-primary svg {\n position: relative;\n z-index: 1;\n}<\/p>\n<p>.btn-primary:hover {\n transform: translateY(-3px);\n box-shadow: 0 15px 40px rgba(184, 134, 11, 0.4);\n}<\/p>\n<p>.btn-secondary {\n background: transparent;\n color: #1a3a52;\n border: 3px solid #1a3a52;\n}<\/p>\n<p>.btn-secondary:hover {\n background: #1a3a52;\n color: white;\n transform: translateY(-3px);\n box-shadow: 0 15px 40px rgba(26, 58, 82, 0.3);\n}<\/p>\n<p>.logo-floating {\n position: absolute;\n top: 50px;\n right: 50px;\n width: 80px;\n height: 80px;\n opacity: 0.1;\n animation: float-logo 20s ease-in-out infinite;\n}<\/p>\n<p>@keyframes float-logo {\n 0%, 100% {\n transform: translate(0, 0) rotate(0deg);\n }\n 25% {\n transform: translate(-20px, 20px) rotate(90deg);\n }\n 50% {\n transform: translate(20px, -20px) rotate(180deg);\n }\n 75% {\n transform: translate(-20px, -20px) rotate(270deg);\n }\n}<\/p>\n<p>\/* Responsive Design *\/\n@media (max-width: 1200px) {\n .president-container-v1 {\n padding: 0 40px;\n gap: 60px;\n }<\/p>\n<p> .president-card {\n padding: 40px;\n }\n}<\/p>\n<p>@media (max-width: 968px) {\n .president-section-v1,\n .president-section-v2,\n .president-section-v3 {\n padding: 60px 0;\n }<\/p>\n<p> .president-container-v1 {\n grid-template-columns: 1fr;\n gap: 50px;\n text-align: center;\n padding: 0 30px;\n }<\/p>\n<p> .president-card-content {\n grid-template-columns: 1fr;\n text-align: center;\n }<\/p>\n<p> .president-photo-v2 {\n margin: 0 auto;\n }<\/p>\n<p> .president-actions-v2,\n .action-row {\n justify-content: center;\n }<\/p>\n<p> .president-photo {\n margin: 0 auto;\n max-width: 400px;\n height: 500px;\n }<\/p>\n<p> .president-title::after {\n left: 50%;\n transform: translateX(-50%);\n width: 60px;\n }<\/p>\n<p> .president-title:hover::after {\n transform: translateX(-50%) scaleX(1);\n }<\/p>\n<p> .president-description {\n text-align: left;\n }<\/p>\n<p> .action-wrapper {\n justify-content: center;\n flex-wrap: wrap;\n }\n}<\/p>\n<p>@media (max-width: 640px) {\n .president-container-v1,\n .president-container-v2,\n .president-container-v3 {\n padding: 0 20px;\n }<\/p>\n<p> .president-name,\n .president-name-v2,\n .president-name-v3 {\n font-size: 2rem;\n }<\/p>\n<p> .president-title {\n font-size: 1.3rem;\n letter-spacing: 2px;\n }<\/p>\n<p> .president-description,\n .president-description-v2,\n .president-description-v3 {\n font-size: 1rem;\n }<\/p>\n<p> .action-wrapper {\n flex-direction: row;\n gap: 20px;\n align-items: center;\n justify-content: center;\n }<\/p>\n<p> .action-buttons {\n flex-direction: row;\n gap: 10px;\n }<\/p>\n<p> .btn-modern {\n padding: 12px 20px;\n font-size: 0.95rem;\n }<\/p>\n<p> .bifa-logo-wrapper {\n margin-left: 10px;\n }<\/p>\n<p> .president-photo-v3 {\n width: 250px;\n height: 333px;\n }<\/p>\n<p> .president-actions-v2,\n .action-row {\n flex-direction: column;\n width: 100%;\n }<\/p>\n<p> .btn-gold,\n .btn-outline,\n .btn-elegant {\n width: 100%;\n justify-content: center;\n }\n}<\/p>\n<p>@media (max-width: 480px) {\n .president-photo {\n max-width: 100%;\n height: 400px;\n }<\/p>\n<p> .bifa-logo-wrapper {\n width: 70px;\n height: 70px;\n margin-left: 10px;\n }<\/p>\n<p> .bifa-logo-img {\n width: 70px;\n height: 70px;\n }<\/p>\n<p> .action-wrapper {\n flex-wrap: nowrap;\n }<\/p>\n<p> .btn-modern {\n padding: 10px 15px;\n font-size: 0.9rem;\n }<\/p>\n<p> .btn-modern span {\n display: none;\n }<\/p>\n<p> .btn-modern .btn-icon {\n margin: 0;\n }\n}<\/p>\n<p>\/* Title Styles *\/\n.variant-title {\n text-align: center;\n font-size: 2.5rem;\n font-weight: 800;\n margin-bottom: 20px;\n font-family: 'Montserrat', sans-serif !important;\n color: #1a3a52;\n}<\/p>\n<p>.divider {\n height: 2px;\n background: linear-gradient(90deg, transparent, #b8860b, transparent);\n margin: 80px auto;\n max-width: 200px;\n}\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<p><\/p>\n<h1 class=\"variant-title\">\u0412\u0430\u0440\u0438\u0430\u043d\u0442 1 - \u041e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0439<\/h1>\n<div class=\"president-section-wrapper-v1\">\n<section class=\"president-section-v1\">\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=\"neon-line\"><\/div>\n<div class=\"neon-line\"><\/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=\"president-container-v1\">\n <\/p>\n<div class=\"president-image-column\">\n<div class=\"president-photo\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Mr\/main-photo.jpg\" alt=\"Mr. Salim Humaid Almazaini\">\n <\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"president-info\">\n <a href=\"\/aboutus\" class=\"president-title\"><br \/>\n <span>Founder and President<\/span><br \/>\n <\/a><\/p>\n<p> <a href=\"\/aboutus\" class=\"president-name\"><br \/>\n Mr. Salim Humaid Almazaini<br \/>\n <\/a><\/p>\n<div class=\"president-description\">\n<p>\n \u090f\u0915 \u092a\u094d\u0930\u0924\u093f\u0937\u094d\u0920\u093f\u0924 <span class=\"highlight\">\u0926\u0942\u0930\u0926\u0930\u094d\u0936\u0940 \u0928\u0947\u0924\u093e<\/span> in international sports diplomacy. Through strategic innovation and unwavering commitment, Mr. Almazaini transforms global football <span class=\"highlight\">\u090f\u0915\u0924\u093e \u0914\u0930 \u0938\u0939\u092f\u094b\u0917 \u0915\u0947 \u0932\u093f\u090f \u090f\u0915 \u0936\u0915\u094d\u0924\u093f\u0936\u093e\u0932\u0940 \u0938\u0947\u0924\u0941 \u0915\u0947 \u0930\u0942\u092a \u092e\u0947\u0902<\/span> \u0930\u093e\u0937\u094d\u091f\u094d\u0930\u094b\u0902 \u0915\u0947 \u092c\u0940\u091a.\n <\/p>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"action-wrapper\">\n<div class=\"action-buttons\">\n <a href=\"\/president\" class=\"btn-modern learn-more-btn\"><br \/>\n <span>\u0914\u0930 \u0905\u0927\u093f\u0915 \u091c\u093e\u0928\u0947\u0902<\/span><br \/>\n <svg class=\"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=\"\/aboutus\" class=\"btn-modern about-btn\"><br \/>\n <span>BIFA \u0915\u0947 \u092c\u093e\u0930\u0947 \u092e\u0947\u0902<\/span><br \/>\n <svg class=\"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 16v-4M12 8h.01\"\/>\n <\/svg><br \/>\n <\/a>\n <\/div>\n<div class=\"bifa-logo-wrapper\">\n<div class=\"bifa-logo-bg\"><\/div>\n<div class=\"bifa-logo-img\" role=\"img\" aria-label=\"BIFA \u0932\u094b\u0917\u094b\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<\/div>\n<div class=\"divider\"><\/div>\n<p><\/p>\n<h1 class=\"variant-title\">\u0412\u0430\u0440\u0438\u0430\u043d\u0442 2 - \u041a\u0430\u0440\u0442\u043e\u0447\u043d\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d<\/h1>\n<div class=\"president-section-wrapper-v2\">\n<section class=\"president-section-v2\">\n<div class=\"gold-accent-v2\"><\/div>\n<div class=\"gold-accent-v2\"><\/div>\n<div class=\"president-container-v2\">\n<div class=\"president-card\">\n<div class=\"president-card-content\">\n <\/p>\n<div class=\"president-photo-v2\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Mr\/main-photo.jpg\" alt=\"Mr. Salim Humaid Almazaini\">\n <\/div>\n<p> <\/p>\n<div class=\"president-info-v2\">\n<div class=\"president-badge\">\n <svg class=\"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=\"badge-text\">\u0938\u0902\u0938\u094d\u0925\u093e\u092a\u0915 \u090f\u0935\u0902 \u0905\u0927\u094d\u092f\u0915\u094d\u0937<\/span>\n <\/div>\n<h2 class=\"president-name-v2\">Mr. Salim Humaid Almazaini<\/h2>\n<div class=\"president-description-v2\">\n<p>\n \u090f\u0915 \u092a\u094d\u0930\u0924\u093f\u0937\u094d\u0920\u093f\u0924 <span class=\"highlight\">\u0926\u0942\u0930\u0926\u0930\u094d\u0936\u0940 \u0928\u0947\u0924\u093e<\/span> in international sports diplomacy. Through strategic innovation and unwavering commitment, Mr. Almazaini transforms global football <span class=\"highlight\">\u090f\u0915\u0924\u093e \u0914\u0930 \u0938\u0939\u092f\u094b\u0917 \u0915\u0947 \u0932\u093f\u090f \u090f\u0915 \u0936\u0915\u094d\u0924\u093f\u0936\u093e\u0932\u0940 \u0938\u0947\u0924\u0941 \u0915\u0947 \u0930\u0942\u092a \u092e\u0947\u0902<\/span> \u0930\u093e\u0937\u094d\u091f\u094d\u0930\u094b\u0902 \u0915\u0947 \u092c\u0940\u091a.\n <\/p>\n<\/p><\/div>\n<div class=\"president-actions-v2\">\n <a href=\"\/president\" class=\"btn-gold\"><br \/>\n <span>\u0915\u0939\u093e\u0928\u0940 \u0916\u094b\u091c\u0947\u0902<\/span><br \/>\n <svg class=\"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=\"\/aboutus\" class=\"btn-outline\"><br \/>\n <span>BIFA \u0915\u0947 \u092c\u093e\u0930\u0947 \u092e\u0947\u0902<\/span><br \/>\n <svg class=\"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=\"BIFA \u0932\u094b\u0917\u094b\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<\/div>\n<div class=\"divider\"><\/div>\n<p><\/p>\n<h1 class=\"variant-title\">\u0412\u0430\u0440\u0438\u0430\u043d\u0442 3 - \u042d\u043b\u0435\u0433\u0430\u043d\u0442\u043d\u044b\u0439 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u0438\u0437\u043c<\/h1>\n<div class=\"president-section-wrapper-v3\">\n<section class=\"president-section-v3\">\n<div class=\"gold-pattern\"><\/div>\n<div class=\"logo-floating\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/logo_bifa.svg\" alt=\"BIFA\" style=\"width: 100%; height: 100%; opacity: 0.1;\">\n <\/div>\n<div class=\"president-container-v3\">\n <\/p>\n<div class=\"president-photo-v3\">\n<div class=\"photo-frame\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Mr\/main-photo.jpg\" alt=\"Mr. Salim Humaid Almazaini\">\n <\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"president-content-v3\">\n<div class=\"title-decoration\">\n<div class=\"gold-line\"><\/div>\n<h3 class=\"president-title-v3\">\u0938\u0902\u0938\u094d\u0925\u093e\u092a\u0915 \u090f\u0935\u0902 \u0905\u0927\u094d\u092f\u0915\u094d\u0937<\/h3>\n<div class=\"gold-line\"><\/div>\n<\/p><\/div>\n<h1 class=\"president-name-v3\">Mr. Salim Humaid Almazaini<\/h1>\n<div class=\"president-description-v3\">\n<p>\n \u090f\u0915 \u092a\u094d\u0930\u0924\u093f\u0937\u094d\u0920\u093f\u0924 <span class=\"highlight\">\u0926\u0942\u0930\u0926\u0930\u094d\u0936\u0940 \u0928\u0947\u0924\u093e<\/span> in international sports diplomacy. Through strategic innovation and unwavering commitment, Mr. Almazaini transforms global football <span class=\"highlight\">\u090f\u0915\u0924\u093e \u0914\u0930 \u0938\u0939\u092f\u094b\u0917 \u0915\u0947 \u0932\u093f\u090f \u090f\u0915 \u0936\u0915\u094d\u0924\u093f\u0936\u093e\u0932\u0940 \u0938\u0947\u0924\u0941 \u0915\u0947 \u0930\u0942\u092a \u092e\u0947\u0902<\/span> \u0930\u093e\u0937\u094d\u091f\u094d\u0930\u094b\u0902 \u0915\u0947 \u092c\u0940\u091a.\n <\/p>\n<\/p><\/div>\n<div class=\"action-row\">\n <a href=\"\/president\" class=\"btn-elegant btn-primary\"><br \/>\n <span>\u0914\u0930 \u0905\u0927\u093f\u0915 \u091c\u093e\u0928\u0947\u0902<\/span><br \/>\n <svg viewbox=\"0 0 24 24\" width=\"20\" height=\"20\" 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=\"\/aboutus\" class=\"btn-elegant btn-secondary\"><br \/>\n <span>BIFA \u0915\u0947 \u092c\u093e\u0930\u0947 \u092e\u0947\u0902<\/span><br \/>\n <svg viewbox=\"0 0 24 24\" width=\"20\" height=\"20\" 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 16v-4M12 8h.01\"\/>\n <\/svg><br \/>\n <\/a>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<\/div>\n<p><script>\n\/\/ Animation for all variants\ndocument.addEventListener('DOMContentLoaded', function() {\n \/\/ Smooth scroll reveal\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('[class*=\"fadeIn\"], .president-card, .president-photo-v2, .president-photo-v3').forEach(el => {\n if (el) {\n el.style.animationPlayState = 'paused';\n observer.observe(el);\n }\n });<\/p>\n<p> \/\/ Logo hover effects for all variants\n document.querySelectorAll('.bifa-logo-wrapper').forEach(logoWrapper => {\n logoWrapper.addEventListener('mouseenter', () => {\n const logo = logoWrapper.querySelector('.bifa-logo-img');\n if (logo) {\n logo.style.transform = 'scale(1.1)';\n }\n });<\/p>\n<p> logoWrapper.addEventListener('mouseleave', () => {\n const logo = logoWrapper.querySelector('.bifa-logo-img');\n if (logo) {\n logo.style.transform = 'scale(1)';\n }\n });\n });<\/p>\n<p> \/\/ Button glow effects\n document.querySelectorAll('.btn-modern, .btn-gold, .btn-outline, .btn-elegant').forEach(button => {\n button.addEventListener('mouseenter', (e) => {\n const rect = button.getBoundingClientRect();\n const x = e.clientX - rect.left;\n const y = e.clientY - rect.top;<\/p>\n<p> const glow = document.createElement('div');\n glow.style.cssText = `\n position: absolute;\n width: 100px;\n height: 100px;\n background: radial-gradient(circle, rgba(255, 215, 0, 0.2) 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(glow);\n setTimeout(() => { glow.style.opacity = '1'; }, 10);<\/p>\n<p> button.addEventListener('mouseleave', () => {\n glow.style.opacity = '0';\n setTimeout(() => glow.remove(), 300);\n }, { once: true });\n });\n });<\/p>\n<p> \/\/ Image loading animation\n document.querySelectorAll('img').forEach(img => {\n img.style.opacity = '0';\n img.style.transition = 'opacity 0.5s ease';<\/p>\n<p> if (img.complete) {\n img.style.opacity = '1';\n } else {\n img.addEventListener('load', function() {\n this.style.opacity = '1';\n });\n }\n });<\/p>\n<p> \/\/ Preload images\n function preloadImages() {\n const imageUrls = [\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> 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 Quote Blocks - 4 Design Variants<\/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=Playfair+Display:wght@400;700;900&family=Lato:wght@300;400;700&family=Montserrat:wght@400;600;700;800&family=Merriweather:wght@300;400;700;900&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: 'Lato', sans-serif !important;\n background: #f5f5f5;\n overflow-x: hidden;\n position: relative;\n}<\/p>\n<p>\/* ===== \u0412\u0410\u0420\u0418\u0410\u041d\u0422 1 - \u041a\u041b\u0410\u0421\u0421\u0418\u0427\u0415\u0421\u041a\u0418\u0419 ===== *\/\n.quote-section-wrapper-v1 {\n width: 100vw;\n position: relative;\n left: 50%;\n right: 50%;\n margin-left: -50vw;\n margin-right: -50vw;\n background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);\n overflow: hidden;\n max-width: 100vw;\n margin-bottom: 100px;\n}<\/p>\n<p>.quote-section-v1 {\n padding: 120px 0;\n position: relative;\n}<\/p>\n<p>\/* \u0412\u043e\u0434\u044f\u043d\u044b\u0435 \u0437\u043d\u0430\u043a\u0438 *\/\n.watermark-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>.bird-watermark {\n position: absolute;\n width: 300px;\n height: 300px;\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.03;\n top: 20%;\n right: 10%;\n animation: float-gentle 20s ease-in-out infinite;\n}<\/p>\n<p>.logo-watermark {\n position: absolute;\n width: 400px;\n height: 400px;\n background-image: url('\/wp-content\/themes\/yootheme-child\/assets\/images\/flag-logo1.svg');\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center;\n opacity: 0.03;\n bottom: 10%;\n left: 5%;\n animation: float-gentle 25s ease-in-out infinite reverse;\n}<\/p>\n<p>@keyframes float-gentle {\n 0%, 100% {\n transform: translate(0, 0) rotate(0deg);\n }\n 50% {\n transform: translate(30px, -30px) rotate(5deg);\n }\n}<\/p>\n<p>.quote-container-v1 {\n max-width: 1000px;\n margin: 0 auto;\n padding: 0 40px;\n text-align: center;\n position: relative;\n z-index: 1;\n}<\/p>\n<p>\/* \u0414\u0435\u043a\u043e\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u043a\u0430\u0432\u044b\u0447\u043a\u0438 *\/\n.quote-marks {\n position: relative;\n display: inline-block;\n margin-bottom: 40px;\n}<\/p>\n<p>.quote-mark-left,\n.quote-mark-right {\n font-family: 'Playfair Display', serif;\n font-size: 120px;\n line-height: 1;\n color: #b8860b;\n opacity: 0.2;\n position: absolute;\n}<\/p>\n<p>.quote-mark-left {\n top: -40px;\n left: -80px;\n}<\/p>\n<p>.quote-mark-right {\n bottom: -80px;\n right: -80px;\n transform: rotate(180deg);\n}<\/p>\n<p>\/* \u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0442\u0435\u043a\u0441\u0442 \u0446\u0438\u0442\u0430\u0442\u044b *\/\n.quote-text-v1 {\n font-family: 'Playfair Display', serif !important;\n font-size: clamp(2rem, 3.5vw, 3rem);\n font-weight: 700;\n line-height: 1.4;\n color: #1a3a52;\n margin-bottom: 40px;\n position: relative;\n animation: fadeInUp 1s ease-out;\n}<\/p>\n<p>.quote-highlight {\n background: linear-gradient(135deg, #b8860b, #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n font-weight: 900;\n}<\/p>\n<p>\/* \u0410\u0432\u0442\u043e\u0440 \u0446\u0438\u0442\u0430\u0442\u044b *\/\n.quote-author-v1 {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 15px;\n margin-top: 50px;\n animation: fadeInUp 1s ease-out 0.3s both;\n}<\/p>\n<p>.author-dash {\n width: 50px;\n height: 3px;\n background: linear-gradient(90deg, #b8860b, #ffd700);\n}<\/p>\n<p>.author-info {\n font-family: 'Montserrat', sans-serif !important;\n}<\/p>\n<p>.author-name {\n font-size: 1.3rem;\n font-weight: 700;\n color: #1a3a52;\n margin-bottom: 5px;\n}<\/p>\n<p>.author-title {\n font-size: 1rem;\n color: #5a6c7d;\n font-weight: 400;\n}<\/p>\n<p>\/* \u0414\u0435\u043a\u043e\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u0433\u043e\u043b\u0443\u0431\u044c *\/\n.bird-decoration {\n position: absolute;\n top: 50px;\n left: 50px;\n width: 80px;\n height: 80px;\n background-image: url('\/wp-content\/themes\/yootheme-child\/assets\/images\/Logo\/bird.svg');\n background-size: contain;\n background-repeat: no-repeat;\n opacity: 0.1;\n animation: fly-bird 30s linear infinite;\n}<\/p>\n<p>@keyframes fly-bird {\n 0% {\n transform: translate(0, 0) rotate(0deg);\n }\n 25% {\n transform: translate(200px, -50px) rotate(10deg);\n }\n 50% {\n transform: translate(400px, 0) rotate(0deg);\n }\n 75% {\n transform: translate(200px, 50px) rotate(-10deg);\n }\n 100% {\n transform: translate(0, 0) rotate(0deg);\n }\n}<\/p>\n<p>\/* ===== \u0412\u0410\u0420\u0418\u0410\u041d\u0422 2 - \u0421\u041e\u0412\u0420\u0415\u041c\u0415\u041d\u041d\u042b\u0419 \u041c\u0418\u041d\u0418\u041c\u0410\u041b\u0418\u0417\u041c ===== *\/\n.quote-section-wrapper-v2 {\n width: 100vw;\n position: relative;\n left: 50%;\n right: 50%;\n margin-left: -50vw;\n margin-right: -50vw;\n background: #ffffff;\n overflow: hidden;\n max-width: 100vw;\n margin-bottom: 100px;\n}<\/p>\n<p>.quote-section-v2 {\n padding: 100px 0;\n position: relative;\n}<\/p>\n<p>.quote-container-v2 {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 40px;\n position: relative;\n}<\/p>\n<p>\/* \u041b\u0435\u0432\u0430\u044f \u043f\u0430\u043d\u0435\u043b\u044c \u0441 \u043f\u0442\u0438\u0446\u0435\u0439 *\/\n.quote-layout-v2 {\n display: grid;\n grid-template-columns: 300px 1fr;\n gap: 80px;\n align-items: center;\n}<\/p>\n<p>.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(184, 134, 11, 0.05) 0%, rgba(255, 215, 0, 0.05) 100%);\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>\/* \u041f\u0440\u0430\u0432\u0430\u044f \u043f\u0430\u043d\u0435\u043b\u044c \u0441 \u0446\u0438\u0442\u0430\u0442\u043e\u0439 *\/\n.quote-content-v2 {\n animation: fadeInRight 1s ease-out;\n}<\/p>\n<p>.quote-text-v2 {\n font-family: 'Merriweather', serif !important;\n font-size: 2.5rem;\n font-weight: 300;\n line-height: 1.5;\n color: #1a3a52;\n margin-bottom: 40px;\n position: relative;\n}<\/p>\n<p>.quote-text-v2::before {\n content: '\"';\n position: absolute;\n top: -30px;\n left: -50px;\n font-size: 100px;\n color: #b8860b;\n opacity: 0.3;\n font-family: 'Playfair Display', serif;\n}<\/p>\n<p>.author-block-v2 {\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\/flag-logo1.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 #b8860b;\n padding-left: 20px;\n}<\/p>\n<p>\/* ===== \u0412\u0410\u0420\u0418\u0410\u041d\u0422 3 - \u041a\u0410\u0420\u0422\u041e\u0427\u041a\u0410 \u0421 \u0413\u0420\u0410\u0414\u0418\u0415\u041d\u0422\u041e\u041c ===== *\/\n.quote-section-wrapper-v3 {\n width: 100vw;\n position: relative;\n left: 50%;\n right: 50%;\n margin-left: -50vw;\n margin-right: -50vw;\n background: #f0f5fa;\n overflow: hidden;\n max-width: 100vw;\n margin-bottom: 100px;\n}<\/p>\n<p>.quote-section-v3 {\n padding: 120px 0;\n position: relative;\n}<\/p>\n<p>.quote-container-v3 {\n max-width: 900px;\n margin: 0 auto;\n padding: 0 20px;\n position: relative;\n z-index: 1;\n}<\/p>\n<p>.quote-card {\n background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);\n border-radius: 30px;\n padding: 80px;\n box-shadow: 0 30px 80px rgba(0, 0, 0, 0.08);\n position: relative;\n overflow: hidden;\n animation: fadeInScale 1s ease-out;\n}<\/p>\n<p>\/* \u0413\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043d\u0430\u044f \u0440\u0430\u043c\u043a\u0430 *\/\n.quote-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-radius: 30px;\n padding: 3px;\n background: linear-gradient(135deg, #b8860b, #ffd700, #1e90ff);\n -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n -webkit-mask-composite: exclude;\n mask-composite: exclude;\n opacity: 0.3;\n}<\/p>\n<p>\/* \u0424\u043e\u043d\u043e\u0432\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b *\/\n.card-bg-elements {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow: hidden;\n opacity: 0.05;\n}<\/p>\n<p>.bg-bird {\n position: absolute;\n width: 200px;\n height: 200px;\n background-image: url('\/wp-content\/themes\/yootheme-child\/assets\/images\/Logo\/bird.svg');\n background-size: contain;\n background-repeat: no-repeat;\n top: -50px;\n right: -50px;\n transform: rotate(15deg);\n}<\/p>\n<p>.bg-logo {\n position: absolute;\n width: 300px;\n height: 300px;\n background-image: url('\/wp-content\/themes\/yootheme-child\/assets\/images\/flag-logo1.svg');\n background-size: contain;\n background-repeat: no-repeat;\n bottom: -100px;\n left: -100px;\n transform: rotate(-15deg);\n}<\/p>\n<p>.quote-content-v3 {\n position: relative;\n text-align: center;\n}<\/p>\n<p>.quote-icon {\n width: 60px;\n height: 60px;\n margin: 0 auto 30px;\n background: linear-gradient(135deg, #b8860b, #ffd700);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n animation: pulse-icon 3s ease-in-out infinite;\n}<\/p>\n<p>@keyframes pulse-icon {\n 0%, 100% {\n transform: scale(1);\n box-shadow: 0 5px 20px rgba(184, 134, 11, 0.3);\n }\n 50% {\n transform: scale(1.05);\n box-shadow: 0 8px 30px rgba(184, 134, 11, 0.4);\n }\n}<\/p>\n<p>.quote-icon::before {\n content: '\"';\n font-family: 'Playfair Display', serif;\n font-size: 30px;\n color: white;\n font-weight: 900;\n}<\/p>\n<p>.quote-text-v3 {\n font-family: 'Playfair Display', serif !important;\n font-size: 2.2rem;\n font-weight: 400;\n line-height: 1.6;\n color: #1a3a52;\n margin-bottom: 50px;\n}<\/p>\n<p>.quote-footer {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 30px;\n}<\/p>\n<p>.footer-line {\n width: 80px;\n height: 2px;\n background: linear-gradient(90deg, transparent, #b8860b, transparent);\n}<\/p>\n<p>\/* ===== \u0412\u0410\u0420\u0418\u0410\u041d\u0422 4 - \u042d\u041b\u0415\u0413\u0410\u041d\u0422\u041d\u042b\u0419 \u0421 \u041f\u0422\u0418\u0426\u0415\u0419 ===== *\/\n.quote-section-wrapper-v4 {\n width: 100vw;\n position: relative;\n left: 50%;\n right: 50%;\n margin-left: -50vw;\n margin-right: -50vw;\n background: linear-gradient(180deg, #ffffff 0%, #d7e9f7 100%);\n overflow: hidden;\n max-width: 100vw;\n}<\/p>\n<p>.quote-section-v4 {\n padding: 150px 0;\n position: relative;\n}<\/p>\n<p>\/* \u0410\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0444\u043e\u043d *\/\n.animated-bg {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow: hidden;\n z-index: 0;\n}<\/p>\n<p>.floating-bird {\n position: absolute;\n width: 100px;\n height: 100px;\n background-image: url('\/wp-content\/themes\/yootheme-child\/assets\/images\/Logo\/bird.svg');\n background-size: contain;\n background-repeat: no-repeat;\n opacity: 0.05;\n animation: float-diagonal 20s linear infinite;\n}<\/p>\n<p>.floating-bird:nth-child(1) {\n top: 10%;\n left: -100px;\n animation-delay: 0s;\n}<\/p>\n<p>.floating-bird:nth-child(2) {\n top: 40%;\n left: -100px;\n animation-delay: 5s;\n}<\/p>\n<p>.floating-bird:nth-child(3) {\n top: 70%;\n left: -100px;\n animation-delay: 10s;\n}<\/p>\n<p>@keyframes float-diagonal {\n 0% {\n transform: translate(0, 0) rotate(10deg);\n }\n 100% {\n transform: translate(calc(100vw + 200px), -200px) rotate(10deg);\n }\n}<\/p>\n<p>.quote-container-v4 {\n max-width: 1100px;\n margin: 0 auto;\n padding: 0 40px;\n position: relative;\n z-index: 1;\n}<\/p>\n<p>.quote-wrapper-v4 {\n display: flex;\n align-items: center;\n gap: 60px;\n background: rgba(255, 255, 255, 0.9);\n backdrop-filter: blur(10px);\n border-radius: 40px;\n padding: 60px;\n box-shadow: 0 25px 70px rgba(0, 0, 0, 0.1);\n border: 1px solid rgba(184, 134, 11, 0.1);\n animation: fadeInUp 1s ease-out;\n}<\/p>\n<p>\/* \u041b\u0435\u0432\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0441 \u043f\u0442\u0438\u0446\u0435\u0439 *\/\n.bird-showcase {\n flex-shrink: 0;\n width: 200px;\n height: 200px;\n position: relative;\n}<\/p>\n<p>.bird-main {\n width: 100%;\n height: 100%;\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.8;\n animation: bird-fly 6s ease-in-out infinite;\n}<\/p>\n<p>@keyframes bird-fly {\n 0%, 100% {\n transform: translateY(0) rotate(0deg);\n }\n 25% {\n transform: translateY(-10px) rotate(-5deg);\n }\n 75% {\n transform: translateY(10px) rotate(5deg);\n }\n}<\/p>\n<p>.bird-glow {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 150%;\n height: 150%;\n background: radial-gradient(circle, rgba(184, 134, 11, 0.1) 0%, transparent 70%);\n border-radius: 50%;\n animation: glow-pulse 4s ease-in-out infinite;\n}<\/p>\n<p>@keyframes glow-pulse {\n 0%, 100% {\n opacity: 0.5;\n transform: translate(-50%, -50%) scale(1);\n }\n 50% {\n opacity: 0.8;\n transform: translate(-50%, -50%) scale(1.1);\n }\n}<\/p>\n<p>\/* \u041f\u0440\u0430\u0432\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0441 \u0446\u0438\u0442\u0430\u0442\u043e\u0439 *\/\n.quote-main-v4 {\n flex: 1;\n}<\/p>\n<p>.quote-text-v4 {\n font-family: 'Merriweather', serif !important;\n font-size: 2.3rem;\n font-weight: 400;\n line-height: 1.5;\n color: #1a3a52;\n margin-bottom: 40px;\n font-style: italic;\n}<\/p>\n<p>.quote-text-v4 em {\n font-style: normal;\n color: #b8860b;\n font-weight: 700;\n}<\/p>\n<p>.author-signature {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}<\/p>\n<p>.signature-left {\n display: flex;\n align-items: center;\n gap: 20px;\n}<\/p>\n<p>.signature-line {\n width: 60px;\n height: 3px;\n background: #b8860b;\n}<\/p>\n<p>.signature-text {\n font-family: 'Montserrat', sans-serif !important;\n}<\/p>\n<p>.signature-name {\n font-size: 1.2rem;\n font-weight: 700;\n color: #1a3a52;\n margin-bottom: 3px;\n}<\/p>\n<p>.signature-role {\n font-size: 0.95rem;\n color: #5a6c7d;\n}<\/p>\n<p>.signature-logo {\n width: 50px;\n height: 50px;\n background-image: url('\/wp-content\/themes\/yootheme-child\/assets\/images\/flag-logo1.svg');\n background-size: contain;\n background-repeat: no-repeat;\n opacity: 0.7;\n transition: all 0.3s ease;\n}<\/p>\n<p>.signature-logo:hover {\n opacity: 1;\n transform: scale(1.1);\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 fadeInScale {\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}<\/p>\n<p>@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-v2 {\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-wrapper-v4 {\n flex-direction: column;\n text-align: center;\n }<\/p>\n<p> .bird-showcase {\n width: 150px;\n height: 150px;\n }<\/p>\n<p> .author-signature {\n flex-direction: column;\n gap: 20px;\n }<\/p>\n<p> .quote-text-v1,\n .quote-text-v2,\n .quote-text-v3,\n .quote-text-v4 {\n font-size: 1.8rem;\n }\n}<\/p>\n<p>@media (max-width: 640px) {\n .quote-section-v1,\n .quote-section-v2,\n .quote-section-v3,\n .quote-section-v4 {\n padding: 80px 0;\n }<\/p>\n<p> .quote-card {\n padding: 40px;\n }<\/p>\n<p> .quote-wrapper-v4 {\n padding: 40px;\n }<\/p>\n<p> .quote-mark-left,\n .quote-mark-right {\n font-size: 80px;\n }<\/p>\n<p> .quote-mark-left {\n left: -40px;\n top: -20px;\n }<\/p>\n<p> .quote-mark-right {\n right: -40px;\n bottom: -40px;\n }<\/p>\n<p> .bird-decoration {\n display: none;\n }<\/p>\n<p> .quote-text-v1,\n .quote-text-v2,\n .quote-text-v3,\n .quote-text-v4 {\n font-size: 1.5rem;\n }\n}<\/p>\n<p>\/* Title Styles *\/\n.variant-title {\n text-align: center;\n font-size: 2.5rem;\n font-weight: 800;\n margin-bottom: 20px;\n font-family: 'Montserrat', sans-serif !important;\n color: #1a3a52;\n}<\/p>\n<p>.divider {\n height: 2px;\n background: linear-gradient(90deg, transparent, #b8860b, transparent);\n margin: 80px auto;\n max-width: 200px;\n}\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<p><\/p>\n<h1 class=\"variant-title\">\u0412\u0430\u0440\u0438\u0430\u043d\u0442 1 - \u041a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0439<\/h1>\n<div class=\"quote-section-wrapper-v1\">\n<section class=\"quote-section-v1\">\n <\/p>\n<div class=\"watermark-elements\">\n<div class=\"bird-watermark\"><\/div>\n<div class=\"logo-watermark\"><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"bird-decoration\"><\/div>\n<div class=\"quote-container-v1\">\n<div class=\"quote-marks\">\n <span class=\"quote-mark-left\">\"<\/span><br \/>\n <span class=\"quote-mark-right\">\"<\/span><\/p>\n<blockquote class=\"quote-text-v1\"><p>\n We're not just playing a game. <span class=\"quote-highlight\">We're building the future.<\/span>\n <\/p><\/blockquote><\/div>\n<div class=\"quote-author-v1\">\n<div class=\"author-dash\"><\/div>\n<div class=\"author-info\">\n<div class=\"author-name\">Salim Almazaini<\/div>\n<div class=\"author-title\">\u0938\u0902\u0938\u094d\u0925\u093e\u092a\u0915 \u0914\u0930 \u0905\u0927\u094d\u092f\u0915\u094d\u0937, BIFA \u0914\u0930 BIFA+<\/div>\n<\/p><\/div>\n<div class=\"author-dash\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<\/div>\n<div class=\"divider\"><\/div>\n<p><\/p>\n<h1 class=\"variant-title\">\u0412\u0430\u0440\u0438\u0430\u043d\u0442 2 - \u0421\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u0438\u0437\u043c<\/h1>\n<div class=\"quote-section-wrapper-v2\">\n<section class=\"quote-section-v2\">\n<div class=\"quote-container-v2\">\n<div class=\"quote-layout-v2\">\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-v2\">\n<blockquote class=\"quote-text-v2\"><p>\n \u0939\u092e \u0938\u093f\u0930\u094d\u092b\u093c \u0916\u0947\u0932 \u0928\u0939\u0940\u0902 \u0916\u0947\u0932 \u0930\u0939\u0947 \u0939\u0948\u0902\u0964 \u0939\u092e \u092d\u0935\u093f\u0937\u094d\u092f \u0915\u093e \u0928\u093f\u0930\u094d\u092e\u093e\u0923 \u0915\u0930 \u0930\u0939\u0947 \u0939\u0948\u0902\u0964\n <\/p><\/blockquote>\n<div class=\"author-block-v2\">\n<div class=\"author-logo\"><\/div>\n<div class=\"author-details\">\n<div class=\"author-name\">Salim Almazaini<\/div>\n<div class=\"author-title\">\u0938\u0902\u0938\u094d\u0925\u093e\u092a\u0915 \u0914\u0930 \u0905\u0927\u094d\u092f\u0915\u094d\u0937, BIFA \u0914\u0930 BIFA+<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<\/div>\n<div class=\"divider\"><\/div>\n<p><\/p>\n<h1 class=\"variant-title\">\u0412\u0430\u0440\u0438\u0430\u043d\u0442 3 - \u041a\u0430\u0440\u0442\u043e\u0447\u043a\u0430 \u0441 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u043c<\/h1>\n<div class=\"quote-section-wrapper-v3\">\n<section class=\"quote-section-v3\">\n<div class=\"quote-container-v3\">\n<div class=\"quote-card\">\n <\/p>\n<div class=\"card-bg-elements\">\n<div class=\"bg-bird\"><\/div>\n<div class=\"bg-logo\"><\/div>\n<\/p><\/div>\n<div class=\"quote-content-v3\">\n<div class=\"quote-icon\"><\/div>\n<blockquote class=\"quote-text-v3\"><p>\n We're not just playing a game.<br \/>\n <strong>We're building the future.<\/strong>\n <\/p><\/blockquote>\n<div class=\"quote-footer\">\n<div class=\"footer-line\"><\/div>\n<div class=\"author-info\">\n<div class=\"author-name\">Salim Almazaini<\/div>\n<div class=\"author-title\">\u0938\u0902\u0938\u094d\u0925\u093e\u092a\u0915 \u0914\u0930 \u0905\u0927\u094d\u092f\u0915\u094d\u0937, BIFA \u0914\u0930 BIFA+<\/div>\n<\/p><\/div>\n<div class=\"footer-line\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<\/div>\n<div class=\"divider\"><\/div>\n<p><\/p>\n<h1 class=\"variant-title\">\u0412\u0430\u0440\u0438\u0430\u043d\u0442 4 - \u042d\u043b\u0435\u0433\u0430\u043d\u0442\u043d\u044b\u0439 \u0441 \u043f\u0442\u0438\u0446\u0435\u0439<\/h1>\n<div class=\"quote-section-wrapper-v4\">\n<section class=\"quote-section-v4\">\n <\/p>\n<div class=\"animated-bg\">\n<div class=\"floating-bird\"><\/div>\n<div class=\"floating-bird\"><\/div>\n<div class=\"floating-bird\"><\/div>\n<\/p><\/div>\n<div class=\"quote-container-v4\">\n<div class=\"quote-wrapper-v4\">\n <\/p>\n<div class=\"bird-showcase\">\n<div class=\"bird-glow\"><\/div>\n<div class=\"bird-main\"><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"quote-main-v4\">\n<blockquote class=\"quote-text-v4\"><p>\n We're not just playing a game. <em>We're building the future.<\/em>\n <\/p><\/blockquote>\n<div class=\"author-signature\">\n<div class=\"signature-left\">\n<div class=\"signature-line\"><\/div>\n<div class=\"signature-text\">\n<div class=\"signature-name\">Salim Almazaini<\/div>\n<div class=\"signature-role\">\u0938\u0902\u0938\u094d\u0925\u093e\u092a\u0915 \u0914\u0930 \u0905\u0927\u094d\u092f\u0915\u094d\u0937, BIFA \u0914\u0930 BIFA+<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"signature-logo\"><\/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('[class*=\"quote-text\"], [class*=\"quote-author\"], .quote-card, .quote-wrapper-v4, .bird-panel, .quote-content-v2').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> \/\/ Parallax effect for watermarks\n let ticking = false;\n function updateParallax() {\n const scrolled = window.pageYOffset;<\/p>\n<p> document.querySelectorAll('.bird-watermark').forEach(el => {\n el.style.transform = `translateY(${scrolled * 0.1}px)`;\n });<\/p>\n<p> document.querySelectorAll('.logo-watermark').forEach(el => {\n el.style.transform = `translateY(${scrolled * -0.1}px)`;\n });<\/p>\n<p> ticking = false;\n }<\/p>\n<p> function requestTick() {\n if (!ticking) {\n window.requestAnimationFrame(updateParallax);\n ticking = true;\n }\n }<\/p>\n<p> window.addEventListener('scroll', requestTick);<\/p>\n<p> \/\/ Hover effects\n document.querySelectorAll('.quote-card, .quote-wrapper-v4').forEach(card => {\n card.addEventListener('mouseenter', function() {\n this.style.transform = 'translateY(-5px)';\n });<\/p>\n<p> card.addEventListener('mouseleave', function() {\n this.style.transform = 'translateY(0)';\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<p><br \/>\n\\n <\/p>\n<div class=\"\\\"geometric-bg\\\"\">\\n <\/p>\n<div class=\"\\\"geo-shape\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"geo-shape\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"geo-shape\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"geo-shape\\\"\"><\\\/div>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"bg-particles\\\"\"><\\\/div>\\n\\n <\/p>\n<section class=\"\\\"bifa-video-section\\\"\">\\n <\/p>\n<div class=\"\\\"video-container\\\"\">\\n \\n <\/p>\n<div class=\"\\\"about-header\\\"\">\\n \\n <a href=\"\\\"\\\/about\\\"\" class=\"\\\"about-title\\\"\" id=\"\\\"mainTitle\\\"\">BIFA+<\\\/a>\\n \\n \\n <\/p>\n<div class=\"\\\"epic-quote\\\"\">\\n <\/p>\n<div class=\"\\\"quote-text\\\"\">\\n <span class=\"\\\"highlight\\\"\">Play with Spirit.<\\\/span> Lead with Vision.\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n\\n \\n <\/p>\n<div class=\"\\\"video-wrapper\\\"\">\\n \\n <\/p>\n<div class=\"\\\"video-loading-overlay\\\"\" id=\"\\\"videoLoadingOverlay\\\"\">\\n <iframe \\n id=\"\\\"loadingIframe\\\"\\n\" class=\"\\\"loading-iframe\\\"\\n\" src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Logo\\\/Get.html\\\"\\n\" title=\"\\\"BIFA+\" loading screen\\\"\\n onload=\"\\\"handleIframeLoad()\\\"\\n\" onerror=\"\\\"handleIframeError()\\\"\">\\n <\\\/iframe>\\n \\n \\n <\/p>\n<div class=\"\\\"fallback-loader\\\"\" id=\"\\\"fallbackLoader\\\"\">\\n <\/p>\n<div class=\"\\\"loader-logo\\\"\">\\n <svg viewbox=\"\\\"0\" 0 200 200\\\" xmlns=\"\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\"\">\\n <defs>\\n <lineargradient id=\"\\\"logoGradient\\\"\" x1=\"\\\"0%\\\"\" y1=\"\\\"0%\\\"\" x2=\"\\\"100%\\\"\" y2=\"\\\"100%\\\"\">\\n <stop offset=\"\\\"0%\\\"\" style=\"\\\"stop-color:#b8860b\\\"\\\/\">\\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=\"\\\"white\\\"\" font-family=\"\\\"Playfair\" display\\\" 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 <video id=\"\\\"heroVideo\\\"\" autoplay muted loop playsinline preload=\"\\\"metadata\\\"\\n\" poster=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/video_poster.jpg\\\"\">\\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 \\n <\/p>\n<div class=\"\\\"controls\\\"\" id=\"\\\"controls\\\"\" aria-label=\"\\\"Video\" controls\\\">\\n <\/p>\n<div class=\"\\\"controls-row\\\"\">\\n <button class=\"\\\"ctrl-btn\\\"\" id=\"\\\"playPause\\\"\" aria-label=\"\\\"Play\\\/Pause\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\"><path d=\"\\\"M8\" 5v14l11-7z\\\"\\><\\\/svg>\\n <\\\/button>\\n \\n <\/p>\n<div class=\"\\\"progress-container\\\"\">\\n <\/p>\n<div class=\"\\\"progress\\\"\" id=\"\\\"progress\\\"\">\\n <\/p>\n<div class=\"\\\"progress-bar\\\"\" id=\"\\\"progressBar\\\"\"><\\\/div>\\n <\\\/div>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"time-display\\\"\" id=\"\\\"timeDisplay\\\"\">0:00<\\\/div>\\n \\n <\/p>\n<div class=\"\\\"volume-container\\\"\">\\n <button class=\"\\\"ctrl-btn\\\"\" id=\"\\\"muteToggle\\\"\" aria-label=\"\\\"Mute\\\/Unmute\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\"><path d=\"\\\"M4\" 9v6h4l5 5v4l8 9h4z\\\"\\><\\\/svg>\\n <\\\/button>\\n <\/p>\n<div class=\"\\\"volume-slider\\\"\" id=\"\\\"volumeSlider\\\"\">\\n <\/p>\n<div class=\"\\\"volume-bar\\\"\" id=\"\\\"volumeBar\\\"\"><\\\/div>\\n <\\\/div>\\n <\\\/div>\\n \\n <button class=\"\\\"fullscreen-btn\\\"\" id=\"\\\"fullscreenBtn\\\"\" aria-label=\"\\\"Fullscreen\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\"><path d=\"\\\"M7\" 14h5v5h5v-2h7v-3zm-2-4h2v7h3v5h5v5zm12 7h-3v2h5v-5h-2v3zm14 5v2h3v3h2v5h-5z\\\"\\><\\\/svg>\\n <\\\/button>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n\\n \\n <\/p>\n<div class=\"\\\"video-content\\\"\">\\n \\n <\/p>\n<div class=\"\\\"about-description\\\"\">\\n <\/p>\n<p style=\"\\\"font-family:\" 'open sans', sans-serif; font-size: clamp(1.1rem, 2vw, 1.4rem); color: #2c3e50; font-weight: 600; margin-bottom: 15px; letter-spacing: 1px;\\\">\\n BRICS International Football Alliance\\n <\\\/p>\\n <\/p>\n<p style=\"\\\"max-width:\" 1000px; margin: 0 auto 40px; font-family: 'lato', sans-serif; font-size: clamp(1rem, 1.5vw, 1.3rem); line-height: 1.8; color: #4a5568;\\\">\\n A global sports and cultural alliance connecting the <span class=\"\\\"highlight\\\"\">\u0935\u0948\u0936\u094d\u0935\u093f\u0915 \u0926\u0915\u094d\u0937\u093f\u0923<\\\/span> through football, \\n innovation, and youth empowerment. Founded by <span class=\"\\\"highlight\\\"\">\u0938\u0932\u0940\u092e \u0939\u0941\u092e\u0948\u0926 \u0905\u0932\u092e\u091c\u093c\u0948\u0928\u0940<\\\/span> from the UAE, \\n BIFA+ creates bridges between nations through <span class=\"\\\"highlight\\\"\">\u0916\u0947\u0932 \u0915\u0942\u091f\u0928\u0940\u0924\u093f<\\\/span>, \\n <span class=\"\\\"highlight\\\"\">\u0938\u093e\u0902\u0938\u094d\u0915\u0943\u0924\u093f\u0915 \u0935\u093f\u0928\u093f\u092f\u092e\u0928<\\\/span>, \u0914\u0930 <span class=\"\\\"highlight\\\"\">\u092a\u094d\u0930\u094c\u0926\u094d\u092f\u094b\u0917\u093f\u0915\u0940 \u090f\u0915\u0940\u0915\u0930\u0923<\\\/span>.\\n <\\\/p>\\n <\\\/div>\\n\\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\\\"\">\u0935\u0948\u0936\u094d\u0935\u093f\u0915 \u0926\u0915\u094d\u0937\u093f\u0923 \u0930\u093e\u0937\u094d\u091f\u094d\u0930<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"stat-item\\\"\">\\n <\/p>\n<div class=\"\\\"stat-number\\\"\">3.8\u092c\u0940<\\\/div>\\n <\/p>\n<div class=\"\\\"stat-label\\\"\">\u091c\u0928\u0938\u0902\u0916\u094d\u092f\u093e \u0938\u0902\u092f\u0941\u0915\u094d\u0924<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"stat-item\\\"\">\\n <\/p>\n<div class=\"\\\"stat-number\\\"\">2024<\\\/div>\\n <\/p>\n<div class=\"\\\"stat-label\\\"\">\u0938\u094d\u0925\u093e\u092a\u0928\u093e \u0935\u0930\u094d\u0937<\\\/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\\\"\">\u092d\u0935\u093f\u0937\u094d\u092f \u0915\u0940 \u0938\u0902\u092d\u093e\u0935\u0928\u093e\u090f\u0902<\\\/div>\\n <\\\/div>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"video-slogan\\\"\">\\n <span class=\"\\\"slogan-main\\\"\">BIFA+: \u091c\u0939\u093e\u0902 \u0935\u0948\u0936\u094d\u0935\u093f\u0915 \u0926\u0915\u094d\u0937\u093f\u0923 \u0915\u0940 \u090a\u0930\u094d\u091c\u093e \u0905\u0902\u0924\u0930\u094d\u0930\u093e\u0937\u094d\u091f\u094d\u0930\u0940\u092f \u092b\u0941\u091f\u092c\u0949\u0932 \u0938\u0902\u0935\u093e\u0926 \u092e\u0947\u0902 \u092a\u0930\u093f\u0935\u0930\u094d\u0924\u093f\u0924 \u0939\u094b\u0924\u0940 \u0939\u0948<\\\/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+ \u092e\u0939\u093f\u0932\u093e<\\\/strong>, <strong>Youth & University initiatives<\\\/strong>, \\n <strong>\u0908\u092b\u0941\u091f\u092c\u0949\u0932 \u0917\u0947\u092e\u093f\u0902\u0917<\\\/strong>, \u0914\u0930 \u092f\u0939 <strong>\u0936\u0939\u0930\u094b\u0902 \u0915\u093e \u0928\u0947\u091f\u0935\u0930\u094d\u0915<\\\/strong>, we're building bridges between cultures \\n and creating opportunities for the next generation of global leaders across Brazil, UAE, Russia, China, India, \\n South Africa, Saudi Arabia, Egypt, Ethiopia, Indonesia, and beyond.\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"buttons-container\\\"\">\\n <a href=\"\\\"#join\\\"\" class=\"\\\"cta-button\" primary\\\">Join the Alliance<\\\/a>\\n <a href=\"\\\"#initiatives\\\"\" class=\"\\\"cta-button\" secondary\\\">Our Initiatives<\\\/a>\\n <a href=\"\\\"#partnership\\\"\" class=\"\\\"cta-button\" gold\\\">Become a Partner<\\\/a>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/section>\\n<\\\/div>\\n\\n<script>\\n\\\/\\\/ Global functions for iframe handling\\nfunction handleIframeLoad() {\\n console.log('Loading screen iframe loaded successfully');\\n}\\n\\nfunction handleIframeError() {\\n console.log('Loading screen iframe failed, showing fallback');\\n document.getElementById('loadingIframe').style.display = 'none';\\n document.getElementById('fallbackLoader').classList.add('active');\\n}\\n\\ndocument.addEventListener('DOMContentLoaded', () => {\\n \\\/\\\/ Letter Animation for Main Title\\n const titleElement = document.getElementById('mainTitle');\\n const titleText = titleElement.textContent;\\n titleElement.innerHTML = '';\\n \\n titleText.split('').forEach((letter, index) => {\\n const span = document.createElement('span');\\n span.className = 'letter';\\n span.textContent = letter === ' ' ? '\\\\u00A0' : letter;\\n span.style.animationDelay = `${0.3 + index * 0.15}s`;\\n titleElement.appendChild(span);\\n });\\n\\n const video = document.getElementById('heroVideo');\\n const playBtn = document.getElementById('playPause');\\n const muteBtn = document.getElementById('muteToggle');\\n const progress = document.getElementById('progress');\\n const progressBar = document.getElementById('progressBar');\\n const timeDisplay = document.getElementById('timeDisplay');\\n const volumeSlider = document.getElementById('volumeSlider');\\n const volumeBar = document.getElementById('volumeBar');\\n const fullscreenBtn = document.getElementById('fullscreenBtn');\\n const loadingOverlay = document.getElementById('videoLoadingOverlay');\\n\\n \\\/\\\/ Loading screen management\\n let videoReady = false;\\n let iframeReady = false;\\n\\n \\\/\\\/ Check if video is ready to play\\n const checkVideoReady = () => {\\n if (video.readyState >= 3) { \\\/\\\/ HAVE_FUTURE_DATA or greater\\n videoReady = true;\\n hideLoadingScreen();\\n }\\n };\\n\\n \\\/\\\/ Hide loading screen with smooth animation\\n const hideLoadingScreen = () => {\\n if (videoReady && loadingOverlay) {\\n setTimeout(() => {\\n loadingOverlay.classList.add('hidden');\\n \\\/\\\/ Remove overlay completely after animation\\n setTimeout(() => {\\n if (loadingOverlay.parentNode) {\\n loadingOverlay.style.display = 'none';\\n }\\n }, 800);\\n }, 1500); \\\/\\\/ Show loading for minimum 1.5 seconds\\n }\\n };\\n\\n \\\/\\\/ Video event listeners for loading\\n video.addEventListener('loadeddata', checkVideoReady);\\n video.addEventListener('canplay', checkVideoReady);\\n video.addEventListener('canplaythrough', () => {\\n videoReady = true;\\n hideLoadingScreen();\\n });\\n\\n \\\/\\\/ Fallback: hide loading screen after maximum time\\n setTimeout(() => {\\n if (loadingOverlay && !loadingOverlay.classList.contains('hidden')) {\\n console.log('Hiding loading screen after timeout');\\n hideLoadingScreen();\\n }\\n }, 8000); \\\/\\\/ Maximum 8 seconds\\n\\n \\\/\\\/ Play\\\/Pause Icons\\n const setPlayIcon = (paused) => {\\n playBtn.innerHTML = paused\\n ? '<svg viewbox=\"\\\"0\" 0 24 24\\\"><path d=\"\\\"M8\" 5v14l11-7z\\\"\\><\\\/svg>'\\n : '<svg viewbox=\"\\\"0\" 0 24 24\\\"><path d=\"\\\"M6\" 19h4v5h6zm8 0h4v5h-4z\\\"\\><\\\/svg>';\\n };\\n\\n \\\/\\\/ Mute\\\/Unmute Icons\\n const setMuteIcon = (muted) => {\\n muteBtn.innerHTML = muted\\n ? '<svg viewbox=\"\\\"0\" 0 24 24\\\"><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 : '<svg viewbox=\"\\\"0\" 0 24 24\\\"><path d=\"\\\"M4\" 9v6h4l5 5v4l8 9h4z\\\"\\><\\\/svg>';\\n };\\n\\n \\\/\\\/ Format time\\n const formatTime = (seconds) => {\\n const mins = Math.floor(seconds \\\/ 60);\\n const secs = Math.floor(seconds % 60);\\n return `${mins}:${secs.toString().padStart(2, '0')}`;\\n };\\n\\n \\\/\\\/ Play\\\/Pause functionality\\n playBtn.addEventListener('click', () => {\\n if (video.paused) {\\n video.play();\\n } else {\\n video.pause();\\n }\\n setPlayIcon(video.paused);\\n });\\n\\n \\\/\\\/ Mute\\\/Unmute functionality\\n muteBtn.addEventListener('click', () => {\\n video.muted = !video.muted;\\n setMuteIcon(video.muted);\\n volumeBar.style.width = video.muted ? '0%' : (video.volume * 100) + '%';\\n });\\n\\n \\\/\\\/ Progress bar update\\n video.addEventListener('timeupdate', () => {\\n const progress = (video.currentTime \\\/ video.duration) * 100;\\n progressBar.style.width = progress + '%';\\n timeDisplay.textContent = formatTime(video.currentTime);\\n });\\n\\n \\\/\\\/ Progress bar click\\n progress.addEventListener('click', (e) => {\\n const rect = progress.getBoundingClientRect();\\n const clickX = e.clientX - rect.left;\\n const clickPercent = clickX \\\/ rect.width;\\n video.currentTime = clickPercent * video.duration;\\n });\\n\\n \\\/\\\/ Volume control\\n volumeSlider.addEventListener('click', (e) => {\\n const rect = volumeSlider.getBoundingClientRect();\\n const clickX = e.clientX - rect.left;\\n const volume = clickX \\\/ rect.width;\\n video.volume = Math.max(0, Math.min(1, volume));\\n volumeBar.style.width = (video.volume * 100) + '%';\\n \\n if (video.volume === 0) {\\n video.muted = true;\\n } else {\\n video.muted = false;\\n }\\n setMuteIcon(video.muted);\\n });\\n\\n \\\/\\\/ Fullscreen functionality\\n fullscreenBtn.addEventListener('click', () => {\\n if (!document.fullscreenElement) {\\n video.parentElement.requestFullscreen();\\n } else {\\n document.exitFullscreen();\\n }\\n });\\n\\n \\\/\\\/ Initialize icons\\n setPlayIcon(video.paused);\\n setMuteIcon(video.muted);\\n volumeBar.style.width = (video.volume * 100) + '%';\\n\\n \\\/\\\/ Create optimized floating particles (reduced count for YooTheme compatibility)\\n const particlesContainer = document.querySelector('.bg-particles');\\n const particleCount = 15; \\\/\\\/ Reduced from 25 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\"},\"children\":[{\"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 Blocks - Final Version<\\\/title>\\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=Playfair+Display:wght@400;700;900&family=Lato:wght@300;400;700&family=Montserrat:wght@400;600;700;800&family=Cormorant+Garamond:wght@300;400;600;700&display=swap\\\"\" rel=\"\\\"stylesheet\\\"\">\\n\\n<\/p>\n<style>\\n* {\\n margin: 0;\\n padding: 0;\\n box-sizing: border-box;\\n}\\n\\nbody {\\n font-family: 'Lato', sans-serif;\\n background: #f8f9fa;\\n overflow-x: hidden;\\n}\\n\\n\\\/* Restart Animation Button *\\\/\\n.restart-button {\\n position: fixed;\\n bottom: 30px;\\n right: 30px;\\n background: #b8860b;\\n color: white;\\n border: none;\\n padding: 15px 30px;\\n border-radius: 50px;\\n font-family: 'Montserrat', sans-serif;\\n font-weight: 600;\\n font-size: 1rem;\\n cursor: pointer;\\n box-shadow: 0 5px 20px rgba(184, 134, 11, 0.3);\\n transition: all 0.3s ease;\\n z-index: 1000;\\n}\\n\\n.restart-button:hover {\\n background: #9a7209;\\n transform: translateY(-2px);\\n box-shadow: 0 8px 30px rgba(184, 134, 11, 0.4);\\n}\\n\\n.restart-button:active {\\n transform: translateY(0);\\n}\\n\\n\\\/* VARIANT 1 *\\\/\\n.quote-section-wrapper-v1 {\\n width: 100vw;\\n position: relative;\\n left: 50%;\\n right: 50%;\\n margin-left: -50vw;\\n margin-right: -50vw;\\n background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);\\n overflow: hidden;\\n margin-bottom: 100px;\\n}\\n\\n.quote-section-v1 {\\n padding: 80px 0;\\n position: relative;\\n}\\n\\n.quote-container-v1 {\\n max-width: 1200px;\\n margin: 0 auto;\\n padding: 0 40px;\\n position: relative;\\n}\\n\\n.quote-content-v1 {\\n position: relative;\\n padding: 60px 0;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n min-height: 300px;\\n}\\n\\n.logo-watermark-v1 {\\n position: absolute;\\n right: 0;\\n top: 50%;\\n transform: translateY(-50%);\\n width: 350px;\\n height: 350px;\\n background-image: url('\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/flag-logo1.svg');\\n background-size: contain;\\n background-repeat: no-repeat;\\n background-position: center right;\\n opacity: 0.03;\\n z-index: 0;\\n}\\n\\n.bird-animation-v1 {\\n position: absolute;\\n left: 50px;\\n top: 50%;\\n transform: translateY(-50%);\\n width: 80px;\\n height: 80px;\\n background-image: url('\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Logo\\\/bird.svg');\\n background-size: contain;\\n background-repeat: no-repeat;\\n filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.1));\\n animation: fly-to-right 3s ease-in-out forwards;\\n z-index: 3;\\n}\\n\\n@keyframes fly-to-right {\\n 0% {\\n left: -100px;\\n opacity: 0;\\n transform: translateY(-50%) rotate(-10deg);\\n }\\n 30% {\\n left: 50px;\\n opacity: 1;\\n transform: translateY(-50%) rotate(0deg);\\n }\\n 60% {\\n left: 150px;\\n transform: translateY(-60%) rotate(5deg);\\n }\\n 100% {\\n left: 200px;\\n transform: translateY(-50%) rotate(0deg);\\n opacity: 0.8;\\n }\\n}\\n\\n.bird-trail-v1 {\\n position: absolute;\\n left: 0;\\n top: 50%;\\n transform: translateY(-50%);\\n width: 250px;\\n height: 3px;\\n background: linear-gradient(90deg, transparent 0%, rgba(184, 134, 11, 0.3) 50%, transparent 100%);\\n opacity: 0;\\n animation: trail-appear 3s ease-in-out 0.5s forwards;\\n}\\n\\n@keyframes trail-appear {\\n 0% {\\n opacity: 0;\\n width: 0;\\n }\\n 100% {\\n opacity: 1;\\n width: 250px;\\n }\\n}\\n\\n.quote-reveal-v1 {\\n position: relative;\\n z-index: 2;\\n text-align: center;\\n max-width: 900px;\\n opacity: 0;\\n animation: reveal-quote 2s ease-out 1.5s forwards;\\n}\\n\\n@keyframes reveal-quote {\\n 0% {\\n opacity: 0;\\n transform: scale(0.9);\\n filter: blur(5px);\\n }\\n 100% {\\n opacity: 1;\\n transform: scale(1);\\n filter: blur(0);\\n }\\n}\\n\\n.quote-text-v1 {\\n font-family: 'Playfair Display', serif;\\n font-size: clamp(2rem, 3vw, 2.8rem);\\n font-weight: 400;\\n line-height: 1.5;\\n color: #1a3a52;\\n margin-bottom: 30px;\\n position: relative;\\n}\\n\\n.quote-text-v1 .golden-glow {\\n color: #b8860b;\\n position: relative;\\n display: inline-block;\\n animation: golden-pulse 3s ease-in-out infinite;\\n}\\n\\n@keyframes golden-pulse {\\n 0%, 100% {\\n text-shadow: 0 0 5px rgba(184, 134, 11, 0.3);\\n }\\n 50% {\\n text-shadow: 0 0 20px rgba(184, 134, 11, 0.5);\\n }\\n}\\n\\n.quote-author-v1 {\\n opacity: 0;\\n animation: fade-in-up 1s ease-out 2.5s forwards;\\n}\\n\\n@keyframes fade-in-up {\\n from {\\n opacity: 0;\\n transform: translateY(20px);\\n }\\n to {\\n opacity: 1;\\n transform: translateY(0);\\n }\\n}\\n\\n.author-dash {\\n display: inline-block;\\n width: 40px;\\n height: 2px;\\n background: #b8860b;\\n margin-right: 15px;\\n vertical-align: middle;\\n}\\n\\n.author-name-v1 {\\n font-family: 'Montserrat', sans-serif;\\n font-size: 1.1rem;\\n font-weight: 600;\\n color: #5a6c7d;\\n letter-spacing: 1px;\\n}\\n\\n\\\/* VARIANT 2 *\\\/\\n.quote-section-wrapper-v2 {\\n width: 100vw;\\n position: relative;\\n left: 50%;\\n right: 50%;\\n margin-left: -50vw;\\n margin-right: -50vw;\\n background: white;\\n overflow: hidden;\\n margin-bottom: 100px;\\n}\\n\\n.quote-section-v2 {\\n padding: 100px 0;\\n position: relative;\\n}\\n\\n.logo-watermark-v2 {\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n transform: translate(-50%, -50%);\\n width: 500px;\\n height: 500px;\\n background-image: url('\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Logo\\\/flag-logo.svg');\\n background-size: contain;\\n background-repeat: no-repeat;\\n background-position: center;\\n opacity: 0.02;\\n z-index: 0;\\n animation: subtle-rotate 60s linear infinite;\\n}\\n\\n@keyframes subtle-rotate {\\n from { transform: translate(-50%, -50%) rotate(0deg); }\\n to { transform: translate(-50%, -50%) rotate(360deg); }\\n}\\n\\n.bird-circle-v2 {\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n transform: translate(-50%, -50%);\\n width: 600px;\\n height: 600px;\\n animation: circle-rotate 30s linear infinite;\\n z-index: 1;\\n pointer-events: none;\\n}\\n\\n@keyframes circle-rotate {\\n from { transform: translate(-50%, -50%) rotate(0deg); }\\n to { transform: translate(-50%, -50%) rotate(360deg); }\\n}\\n\\n.bird-v2 {\\n position: absolute;\\n top: 0;\\n left: 50%;\\n transform: translateX(-50%);\\n width: 50px;\\n height: 50px;\\n background-image: url('\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Logo\\\/bird.svg');\\n background-size: contain;\\n background-repeat: no-repeat;\\n opacity: 0.2;\\n filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));\\n animation: bird-self-rotate 30s linear infinite reverse;\\n}\\n\\n@keyframes bird-self-rotate {\\n from { transform: translateX(-50%) rotate(0deg); }\\n to { transform: translateX(-50%) rotate(-360deg); }\\n}\\n\\n.decorative-lines-v2 {\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n overflow: hidden;\\n z-index: 0;\\n}\\n\\n.line-v2 {\\n position: absolute;\\n background: rgba(184, 134, 11, 0.1);\\n animation: float-line 20s ease-in-out infinite;\\n}\\n\\n.line-v2:nth-child(1) {\\n width: 1px;\\n height: 200px;\\n left: 10%;\\n top: 20%;\\n animation-duration: 15s;\\n}\\n\\n.line-v2:nth-child(2) {\\n width: 200px;\\n height: 1px;\\n right: 10%;\\n top: 70%;\\n animation-duration: 25s;\\n}\\n\\n.line-v2:nth-child(3) {\\n width: 1px;\\n height: 150px;\\n right: 20%;\\n bottom: 20%;\\n animation-duration: 20s;\\n}\\n\\n@keyframes float-line {\\n 0%, 100% {\\n transform: translate(0, 0) rotate(0deg);\\n opacity: 0.1;\\n }\\n 50% {\\n transform: translate(20px, -20px) rotate(5deg);\\n opacity: 0.3;\\n }\\n}\\n\\n.quote-container-v2 {\\n max-width: 1000px;\\n margin: 0 auto;\\n padding: 0 40px;\\n position: relative;\\n z-index: 2;\\n}\\n\\n.quote-frame-v2 {\\n position: relative;\\n padding: 80px 60px;\\n opacity: 0;\\n animation: fade-in-scale 1.5s ease-out 0.5s forwards;\\n}\\n\\n@keyframes fade-in-scale {\\n from {\\n opacity: 0;\\n transform: scale(0.95);\\n }\\n to {\\n opacity: 1;\\n transform: scale(1);\\n }\\n}\\n\\n.top-accent-v2 {\\n position: absolute;\\n top: 0;\\n left: 50%;\\n transform: translateX(-50%);\\n display: flex;\\n align-items: center;\\n gap: 20px;\\n}\\n\\n.accent-line {\\n width: 60px;\\n height: 1px;\\n background: #b8860b;\\n}\\n\\n.accent-dot {\\n width: 8px;\\n height: 8px;\\n background: #b8860b;\\n border-radius: 50%;\\n animation: pulse-dot 2s ease-in-out infinite;\\n}\\n\\n@keyframes pulse-dot {\\n 0%, 100% {\\n transform: scale(1);\\n opacity: 1;\\n }\\n 50% {\\n transform: scale(1.5);\\n opacity: 0.6;\\n }\\n}\\n\\n.quote-text-v2 {\\n font-family: 'Cormorant Garamond', serif;\\n font-size: clamp(2.2rem, 3.5vw, 3rem);\\n font-weight: 300;\\n color: #1a3a52;\\n line-height: 1.6;\\n text-align: center;\\n margin-bottom: 50px;\\n letter-spacing: 0.5px;\\n}\\n\\n.quote-text-v2 em {\\n font-style: normal;\\n font-weight: 600;\\n color: #b8860b;\\n position: relative;\\n display: inline-block;\\n animation: glow-text 3s ease-in-out infinite;\\n}\\n\\n@keyframes glow-text {\\n 0%, 100% {\\n text-shadow: 0 0 5px rgba(184, 134, 11, 0.2);\\n }\\n 50% {\\n text-shadow: 0 0 15px rgba(184, 134, 11, 0.4);\\n }\\n}\\n\\n.quote-text-v2 em::after {\\n content: '';\\n position: absolute;\\n bottom: -3px;\\n left: 0;\\n width: 100%;\\n height: 1px;\\n background: #b8860b;\\n opacity: 0.3;\\n}\\n\\n.author-section-v2 {\\n text-align: center;\\n position: relative;\\n}\\n\\n.author-section-v2::before {\\n content: '';\\n position: absolute;\\n top: -30px;\\n left: 50%;\\n transform: translateX(-50%);\\n width: 40px;\\n height: 1px;\\n background: rgba(184, 134, 11, 0.5);\\n}\\n\\n.author-name-v2 {\\n font-family: 'Montserrat', sans-serif;\\n font-size: 0.9rem;\\n font-weight: 700;\\n text-transform: uppercase;\\n letter-spacing: 3px;\\n color: #b8860b;\\n margin-bottom: 8px;\\n}\\n\\n.author-title-v2 {\\n font-family: 'Lato', sans-serif;\\n font-size: 0.85rem;\\n color: #8a8a8a;\\n letter-spacing: 1px;\\n}\\n\\n\\\/* VARIANT 3 *\\\/\\n.quote-section-wrapper-v3 {\\n width: 100vw;\\n position: relative;\\n left: 50%;\\n right: 50%;\\n margin-left: -50vw;\\n margin-right: -50vw;\\n background: #f5f7fa;\\n overflow: hidden;\\n margin-bottom: 100px;\\n}\\n\\n.quote-section-v3 {\\n padding: 90px 0;\\n position: relative;\\n}\\n\\n.geometric-pattern-v3 {\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n overflow: hidden;\\n z-index: 0;\\n}\\n\\n.geo-shape {\\n position: absolute;\\n border: 1px solid rgba(184, 134, 11, 0.1);\\n}\\n\\n.geo-shape:nth-child(1) {\\n width: 100px;\\n height: 100px;\\n border-radius: 50%;\\n top: 10%;\\n left: 5%;\\n animation: rotate-slow 30s linear infinite;\\n}\\n\\n.geo-shape:nth-child(2) {\\n width: 80px;\\n height: 80px;\\n transform: rotate(45deg);\\n bottom: 15%;\\n right: 10%;\\n animation: rotate-slow 25s linear infinite reverse;\\n}\\n\\n.geo-shape:nth-child(3) {\\n width: 120px;\\n height: 120px;\\n border-radius: 30%;\\n top: 50%;\\n right: 5%;\\n animation: rotate-slow 35s linear infinite;\\n}\\n\\n@keyframes rotate-slow {\\n from { transform: rotate(0deg); }\\n to { transform: rotate(360deg); }\\n}\\n\\n.logo-geometric-v3 {\\n position: absolute;\\n top: 20%;\\n right: 10%;\\n width: 150px;\\n height: 150px;\\n z-index: 1;\\n animation: float-geometric 8s ease-in-out infinite;\\n}\\n\\n@keyframes float-geometric {\\n 0%, 100% {\\n transform: translate(0, 0) rotate(0deg);\\n }\\n 25% {\\n transform: translate(-20px, 10px) rotate(90deg);\\n }\\n 50% {\\n transform: translate(0, 20px) rotate(180deg);\\n }\\n 75% {\\n transform: translate(20px, 10px) rotate(270deg);\\n }\\n}\\n\\n.logo-frame-v3 {\\n width: 100%;\\n height: 100%;\\n position: relative;\\n background-image: url('\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/flag-logo1.svg');\\n background-size: 60%;\\n background-repeat: no-repeat;\\n background-position: center;\\n opacity: 0.05;\\n}\\n\\n.logo-frame-v3::before {\\n content: '';\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n border: 2px solid rgba(184, 134, 11, 0.1);\\n transform: rotate(45deg);\\n animation: pulse-frame 4s ease-in-out infinite;\\n}\\n\\n@keyframes pulse-frame {\\n 0%, 100% {\\n transform: rotate(45deg) scale(1);\\n opacity: 0.3;\\n }\\n 50% {\\n transform: rotate(45deg) scale(1.1);\\n opacity: 0.1;\\n }\\n}\\n\\n.bird-spiral-v3 {\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n transform: translate(-50%, -50%);\\n width: 400px;\\n height: 400px;\\n animation: spiral-rotate 20s linear infinite;\\n z-index: 1;\\n pointer-events: none;\\n}\\n\\n@keyframes spiral-rotate {\\n from {\\n transform: translate(-50%, -50%) rotate(0deg);\\n }\\n to {\\n transform: translate(-50%, -50%) rotate(360deg);\\n }\\n}\\n\\n.bird-icon-v3 {\\n position: absolute;\\n top: 0;\\n left: 50%;\\n transform: translateX(-50%);\\n width: 60px;\\n height: 60px;\\n background-image: url('\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Logo\\\/bird.svg');\\n background-size: contain;\\n background-repeat: no-repeat;\\n opacity: 0.15;\\n filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.1));\\n animation: bird-spiral-move 20s ease-in-out infinite;\\n}\\n\\n@keyframes bird-spiral-move {\\n 0%, 100% {\\n transform: translateX(-50%) scale(1);\\n }\\n 25% {\\n transform: translateX(-50%) scale(0.8) translateY(20px);\\n }\\n 50% {\\n transform: translateX(-50%) scale(1.2) translateY(0);\\n }\\n 75% {\\n transform: translateX(-50%) scale(0.9) translateY(-20px);\\n }\\n}\\n\\n.quote-container-v3 {\\n max-width: 1100px;\\n margin: 0 auto;\\n padding: 0 40px;\\n position: relative;\\n z-index: 2;\\n}\\n\\n.quote-card-v3 {\\n background: white;\\n padding: 70px;\\n position: relative;\\n box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);\\n overflow: hidden;\\n opacity: 0;\\n transform: translateY(30px);\\n animation: slide-up 1.2s ease-out 0.3s forwards;\\n}\\n\\n@keyframes slide-up {\\n to {\\n opacity: 1;\\n transform: translateY(0);\\n }\\n}\\n\\n.corner-accent-v3 {\\n position: absolute;\\n width: 40px;\\n height: 40px;\\n}\\n\\n.corner-accent-v3::before,\\n.corner-accent-v3::after {\\n content: '';\\n position: absolute;\\n background: #b8860b;\\n animation: corner-glow 3s ease-in-out infinite;\\n}\\n\\n@keyframes corner-glow {\\n 0%, 100% {\\n opacity: 1;\\n }\\n 50% {\\n opacity: 0.5;\\n }\\n}\\n\\n.corner-accent-v3.top-left {\\n top: 0;\\n left: 0;\\n}\\n\\n.corner-accent-v3.top-left::before {\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 2px;\\n}\\n\\n.corner-accent-v3.top-left::after {\\n top: 0;\\n left: 0;\\n width: 2px;\\n height: 100%;\\n}\\n\\n.corner-accent-v3.bottom-right {\\n bottom: 0;\\n right: 0;\\n}\\n\\n.corner-accent-v3.bottom-right::before {\\n bottom: 0;\\n right: 0;\\n width: 100%;\\n height: 2px;\\n}\\n\\n.corner-accent-v3.bottom-right::after {\\n bottom: 0;\\n right: 0;\\n width: 2px;\\n height: 100%;\\n}\\n\\n.quote-text-v3 {\\n font-family: 'Playfair Display', serif;\\n font-size: clamp(2rem, 3vw, 2.6rem);\\n font-weight: 700;\\n color: #1a3a52;\\n line-height: 1.4;\\n margin-bottom: 40px;\\n}\\n\\n.quote-text-v3 .accent-word {\\n position: relative;\\n color: #b8860b;\\n display: inline-block;\\n animation: word-pulse 2s ease-in-out infinite;\\n}\\n\\n@keyframes word-pulse {\\n 0%, 100% {\\n transform: scale(1);\\n }\\n 50% {\\n transform: scale(1.05);\\n }\\n}\\n\\n.quote-text-v3 .accent-word::before {\\n content: '';\\n position: absolute;\\n bottom: -5px;\\n left: -5px;\\n right: -5px;\\n height: 15px;\\n background: rgba(184, 134, 11, 0.1);\\n z-index: -1;\\n transform: skew(-5deg);\\n}\\n\\n.author-wrapper-v3 {\\n display: flex;\\n align-items: center;\\n gap: 20px;\\n opacity: 0;\\n animation: fade-in 1s ease-out 1s forwards;\\n}\\n\\n@keyframes fade-in {\\n to {\\n opacity: 1;\\n }\\n}\\n\\n.author-avatar-v3 {\\n width: 60px;\\n height: 60px;\\n background: linear-gradient(135deg, #b8860b, #ffd700);\\n border-radius: 50%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n font-family: 'Playfair Display', serif;\\n font-size: 1.5rem;\\n font-weight: 700;\\n color: white;\\n animation: avatar-rotate 10s linear infinite;\\n}\\n\\n@keyframes avatar-rotate {\\n 0%, 100% {\\n transform: rotate(0deg);\\n }\\n 50% {\\n transform: rotate(10deg);\\n }\\n}\\n\\n.author-info-v3 {\\n text-align: left;\\n}\\n\\n.author-name-v3 {\\n font-family: 'Montserrat', sans-serif;\\n font-size: 1.1rem;\\n font-weight: 700;\\n color: #1a3a52;\\n margin-bottom: 5px;\\n}\\n\\n.author-title-v3 {\\n font-family: 'Lato', sans-serif;\\n font-size: 0.9rem;\\n color: #6a7a8a;\\n}\\n\\n\\\/* VARIANT 4 *\\\/\\n.quote-section-wrapper-v4 {\\n width: 100vw;\\n position: relative;\\n left: 50%;\\n right: 50%;\\n margin-left: -50vw;\\n margin-right: -50vw;\\n background: linear-gradient(135deg, #1a3a52 0%, #2c5f7c 50%, #1a3a52 100%);\\n overflow: hidden;\\n margin-bottom: 100px;\\n}\\n\\n.quote-section-v4 {\\n padding: 100px 0;\\n position: relative;\\n}\\n\\n.particles-v4 {\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n overflow: hidden;\\n z-index: 0;\\n}\\n\\n.particle {\\n position: absolute;\\n width: 4px;\\n height: 4px;\\n background: rgba(255, 215, 0, 0.6);\\n border-radius: 50%;\\n animation: float-up 15s linear infinite;\\n}\\n\\n.particle:nth-child(1) { left: 10%; animation-delay: 0s; }\\n.particle:nth-child(2) { left: 30%; animation-delay: 3s; }\\n.particle:nth-child(3) { left: 50%; animation-delay: 6s; }\\n.particle:nth-child(4) { left: 70%; animation-delay: 9s; }\\n.particle:nth-child(5) { left: 90%; animation-delay: 12s; }\\n\\n@keyframes float-up {\\n 0% {\\n bottom: -10px;\\n opacity: 0;\\n }\\n 10% {\\n opacity: 1;\\n }\\n 90% {\\n opacity: 1;\\n }\\n 100% {\\n bottom: 100%;\\n opacity: 0;\\n }\\n}\\n\\n.bird-light-trail-v4 {\\n position: absolute;\\n top: 20%;\\n left: -100px;\\n z-index: 2;\\n animation: fly-across 15s ease-in-out infinite;\\n}\\n\\n@keyframes fly-across {\\n 0% {\\n left: -100px;\\n opacity: 0;\\n }\\n 10% {\\n opacity: 1;\\n }\\n 90% {\\n opacity: 1;\\n }\\n 100% {\\n left: calc(100% + 100px);\\n opacity: 0;\\n }\\n}\\n\\n.light-bird-v4 {\\n width: 70px;\\n height: 70px;\\n background-image: url('\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Logo\\\/bird.svg');\\n background-size: contain;\\n background-repeat: no-repeat;\\n filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(255, 215, 0, 0.8));\\n position: relative;\\n z-index: 2;\\n}\\n\\n.trail-light {\\n position: absolute;\\n top: 50%;\\n left: -200px;\\n transform: translateY(-50%);\\n width: 200px;\\n height: 2px;\\n background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.8), rgba(255, 215, 0, 0.4), transparent);\\n filter: blur(2px);\\n animation: trail-fade 15s ease-in-out infinite;\\n}\\n\\n@keyframes trail-fade {\\n 0%, 10% {\\n opacity: 0;\\n }\\n 20%, 80% {\\n opacity: 1;\\n }\\n 90%, 100% {\\n opacity: 0;\\n }\\n}\\n\\n.logo-animated-v4 {\\n position: absolute;\\n bottom: 10%;\\n right: 5%;\\n width: 120px;\\n height: 120px;\\n z-index: 1;\\n perspective: 1000px;\\n}\\n\\n.logo-3d-v4 {\\n width: 100%;\\n height: 100%;\\n background-image: url('\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Logo\\\/flag-logo.svg');\\n background-size: contain;\\n background-repeat: no-repeat;\\n background-position: center;\\n opacity: 0.1;\\n filter: brightness(0) invert(1);\\n transform-style: preserve-3d;\\n animation: logo-3d-rotate 20s linear infinite;\\n}\\n\\n@keyframes logo-3d-rotate {\\n 0% {\\n transform: rotateY(0deg) rotateX(0deg);\\n }\\n 25% {\\n transform: rotateY(90deg) rotateX(10deg);\\n }\\n 50% {\\n transform: rotateY(180deg) rotateX(-10deg);\\n }\\n 75% {\\n transform: rotateY(270deg) rotateX(10deg);\\n }\\n 100% {\\n transform: rotateY(360deg) rotateX(0deg);\\n }\\n}\\n\\n.quote-container-v4 {\\n max-width: 900px;\\n margin: 0 auto;\\n padding: 0 40px;\\n position: relative;\\n z-index: 3;\\n}\\n\\n.quote-glass-v4 {\\n background: rgba(255, 255, 255, 0.05);\\n backdrop-filter: blur(20px);\\n border: 1px solid rgba(255, 255, 255, 0.1);\\n border-radius: 20px;\\n padding: 80px 60px;\\n position: relative;\\n overflow: hidden;\\n opacity: 0;\\n transform: translateY(50px);\\n animation: glass-appear 1.5s ease-out 0.5s forwards;\\n}\\n\\n@keyframes glass-appear {\\n to {\\n opacity: 1;\\n transform: translateY(0);\\n }\\n}\\n\\n.golden-frame-v4 {\\n position: absolute;\\n top: 20px;\\n left: 20px;\\n right: 20px;\\n bottom: 20px;\\n border: 1px solid rgba(255, 215, 0, 0.3);\\n border-radius: 15px;\\n pointer-events: none;\\n}\\n\\n.golden-frame-v4::before {\\n content: '';\\n position: absolute;\\n top: -1px;\\n left: -1px;\\n right: -1px;\\n bottom: -1px;\\n background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.5), transparent);\\n border-radius: 15px;\\n animation: frame-glow 4s linear infinite;\\n}\\n\\n@keyframes frame-glow {\\n 0% { transform: translateX(-100%); }\\n 100% { transform: translateX(100%); }\\n}\\n\\n.quote-marks-v4 {\\n font-family: 'Playfair Display', serif;\\n font-size: 4rem;\\n color: rgba(255, 215, 0, 0.2);\\n position: absolute;\\n top: 30px;\\n left: 30px;\\n animation: quote-pulse 3s ease-in-out infinite;\\n}\\n\\n@keyframes quote-pulse {\\n 0%, 100% {\\n opacity: 0.2;\\n transform: scale(1);\\n }\\n 50% {\\n opacity: 0.4;\\n transform: scale(1.1);\\n }\\n}\\n\\n.quote-text-v4 {\\n font-family: 'Playfair Display', serif;\\n font-size: clamp(2rem, 3vw, 2.8rem);\\n font-weight: 400;\\n color: white;\\n line-height: 1.6;\\n text-align: center;\\n margin-bottom: 50px;\\n text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);\\n}\\n\\n.quote-text-v4 .golden {\\n color: #ffd700;\\n font-weight: 700;\\n display: inline-block;\\n animation: golden-shine 3s ease-in-out infinite;\\n}\\n\\n@keyframes golden-shine {\\n 0%, 100% {\\n text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);\\n transform: scale(1);\\n }\\n 50% {\\n text-shadow: 0 0 30px rgba(255, 215, 0, 0.8);\\n transform: scale(1.05);\\n }\\n}\\n\\n.author-glow-v4 {\\n text-align: center;\\n position: relative;\\n opacity: 0;\\n animation: author-fade-in 1s ease-out 1.5s forwards;\\n}\\n\\n@keyframes author-fade-in {\\n to {\\n opacity: 1;\\n }\\n}\\n\\n.author-glow-v4::before {\\n content: '';\\n position: absolute;\\n top: -30px;\\n left: 50%;\\n transform: translateX(-50%);\\n width: 100px;\\n height: 1px;\\n background: linear-gradient(90deg, transparent, #ffd700, transparent);\\n}\\n\\n.author-name-v4 {\\n font-family: 'Montserrat', sans-serif;\\n font-size: 1.2rem;\\n font-weight: 600;\\n color: #ffd700;\\n text-transform: uppercase;\\n letter-spacing: 2px;\\n margin-bottom: 10px;\\n text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);\\n}\\n\\n.author-title-v4 {\\n font-family: 'Lato', sans-serif;\\n font-size: 1rem;\\n color: rgba(255, 255, 255, 0.7);\\n letter-spacing: 1px;\\n}\\n\\n.variant-title {\\n text-align: center;\\n font-size: 2.5rem;\\n font-weight: 800;\\n margin-bottom: 20px;\\n font-family: 'Montserrat', sans-serif;\\n color: #1a3a52;\\n}\\n\\n.divider {\\n height: 1px;\\n background: linear-gradient(90deg, transparent, #b8860b, transparent);\\n margin: 80px auto;\\n max-width: 200px;\\n}\\n\\n\\\/* Responsive Design *\\\/\\n@media (max-width: 968px) {\\n .quote-section-v1,\\n .quote-section-v2,\\n .quote-section-v3,\\n .quote-section-v4 {\\n padding: 60px 0;\\n }\\n \\n .quote-frame-v2,\\n .quote-card-v3,\\n .quote-glass-v4 {\\n padding: 50px 40px;\\n }\\n \\n .quote-text-v1,\\n .quote-text-v2,\\n .quote-text-v3,\\n .quote-text-v4 {\\n font-size: clamp(1.5rem, 4vw, 2.5rem);\\n }\\n \\n .bird-animation-v1 {\\n width: 60px;\\n height: 60px;\\n }\\n \\n .logo-watermark-v1,\\n .logo-watermark-v2 {\\n width: 250px;\\n height: 250px;\\n }\\n \\n .bird-circle-v2 {\\n width: 400px;\\n height: 400px;\\n }\\n \\n .logo-geometric-v3 {\\n width: 100px;\\n height: 100px;\\n }\\n}\\n\\n@media (max-width: 640px) {\\n .restart-button {\\n bottom: 20px;\\n right: 20px;\\n padding: 12px 24px;\\n font-size: 0.9rem;\\n }\\n\\n .quote-container-v1,\\n .quote-container-v2,\\n .quote-container-v3,\\n .quote-container-v4 {\\n padding: 0 20px;\\n }\\n \\n .quote-frame-v2,\\n .quote-card-v3,\\n .quote-glass-v4 {\\n padding: 40px 30px;\\n }\\n \\n .bird-animation-v1 {\\n left: 20px;\\n }\\n \\n @keyframes fly-to-right {\\n 0% {\\n left: -50px;\\n opacity: 0;\\n transform: translateY(-50%) rotate(-10deg);\\n }\\n 30% {\\n left: 20px;\\n opacity: 1;\\n transform: translateY(-50%) rotate(0deg);\\n }\\n 60% {\\n left: 60px;\\n transform: translateY(-60%) rotate(5deg);\\n }\\n 100% {\\n left: 100px;\\n transform: translateY(-50%) rotate(0deg);\\n opacity: 0.8;\\n }\\n }\\n \\n .bird-circle-v2 {\\n width: 300px;\\n height: 300px;\\n }\\n \\n .bird-v2 {\\n width: 40px;\\n height: 40px;\\n }\\n \\n .bird-spiral-v3 {\\n width: 300px;\\n height: 300px;\\n }\\n \\n .bird-icon-v3 {\\n width: 40px;\\n height: 40px;\\n }\\n \\n .logo-geometric-v3 {\\n display: none;\\n }\\n \\n .bird-light-trail-v4 {\\n top: 10%;\\n }\\n \\n .light-bird-v4 {\\n width: 50px;\\n height: 50px;\\n }\\n \\n .logo-animated-v4 {\\n width: 80px;\\n height: 80px;\\n }\\n \\n .author-wrapper-v3 {\\n flex-direction: column;\\n text-align: center;\\n }\\n \\n .author-info-v3 {\\n text-align: center;\\n }\\n \\n .side-accent-v3 {\\n display: none;\\n }\\n}\\n<\\\/style>\\n<\\\/head>\\n<body>\\n\\n<button class=\"\\\"restart-button\\\"\" onclick=\"\\\"restartAnimations()\\\"\">Restart Animations<\\\/button>\\n\\n\\n<\/p>\n<h1 class=\"\\\"variant-title\\\"\">Variant 1 - Flying Bird Opening<\\\/h1>\\n<\/p>\n<div class=\"\\\"quote-section-wrapper-v1\\\"\">\\n <\/p>\n<section class=\"\\\"quote-section-v1\\\"\">\\n <\/p>\n<div class=\"\\\"quote-container-v1\\\"\">\\n <\/p>\n<div class=\"\\\"quote-content-v1\\\"\">\\n <\/p>\n<div class=\"\\\"logo-watermark-v1\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"bird-animation-v1\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"bird-trail-v1\\\"\"><\\\/div>\\n \\n <\/p>\n<div class=\"\\\"quote-reveal-v1\\\"\">\\n <\/p>\n<h2 class=\"\\\"quote-text-v1\\\"\">\\n We're not just playing a game.<br \/>\\n <span class=\"\\\"golden-glow\\\"\">We're building the future.<\\\/span>\\n <\\\/h2>\\n \\n <\/p>\n<div class=\"\\\"quote-author-v1\\\"\">\\n <span class=\"\\\"author-dash\\\"\"><\\\/span>\\n <span class=\"\\\"author-name-v1\\\"\">Salim Almazaini, Founder & President, BIFA & BIFA+<\\\/span>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/section>\\n<\\\/div>\\n\\n<\/p>\n<div class=\"\\\"divider\\\"\"><\\\/div>\\n\\n\\n<\/p>\n<h1 class=\"\\\"variant-title\\\"\">Variant 2 - Minimalist Elegance<\\\/h1>\\n<\/p>\n<div class=\"\\\"quote-section-wrapper-v2\\\"\">\\n <\/p>\n<section class=\"\\\"quote-section-v2\\\"\">\\n <\/p>\n<div class=\"\\\"decorative-lines-v2\\\"\">\\n <\/p>\n<div class=\"\\\"line-v2\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"line-v2\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"line-v2\\\"\"><\\\/div>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"logo-watermark-v2\\\"\"><\\\/div>\\n \\n <\/p>\n<div class=\"\\\"bird-circle-v2\\\"\">\\n <\/p>\n<div class=\"\\\"bird-v2\\\"\"><\\\/div>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"quote-container-v2\\\"\">\\n <\/p>\n<div class=\"\\\"quote-frame-v2\\\"\">\\n <\/p>\n<div class=\"\\\"top-accent-v2\\\"\">\\n <\/p>\n<div class=\"\\\"accent-line\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"accent-dot\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"accent-line\\\"\"><\\\/div>\\n <\\\/div>\\n \\n <\/p>\n<h2 class=\"\\\"quote-text-v2\\\"\">\\n We're not just playing a game. <em>We're building the future.<\\\/em>\\n <\\\/h2>\\n \\n <\/p>\n<div class=\"\\\"author-section-v2\\\"\">\\n <\/p>\n<p class=\"\\\"author-name-v2\\\"\">Salim Almazaini<\\\/p>\\n <\/p>\n<p class=\"\\\"author-title-v2\\\"\">Founder & President, BIFA & BIFA+<\\\/p>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/section>\\n<\\\/div>\\n\\n<\/p>\n<div class=\"\\\"divider\\\"\"><\\\/div>\\n\\n\\n<\/p>\n<h1 class=\"\\\"variant-title\\\"\">Variant 3 - Geometric Modern<\\\/h1>\\n<\/p>\n<div class=\"\\\"quote-section-wrapper-v3\\\"\">\\n <\/p>\n<section class=\"\\\"quote-section-v3\\\"\">\\n <\/p>\n<div class=\"\\\"geometric-pattern-v3\\\"\">\\n <\/p>\n<div class=\"\\\"geo-shape\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"geo-shape\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"geo-shape\\\"\"><\\\/div>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"logo-geometric-v3\\\"\">\\n <\/p>\n<div class=\"\\\"logo-frame-v3\\\"\"><\\\/div>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"bird-spiral-v3\\\"\">\\n <\/p>\n<div class=\"\\\"bird-icon-v3\\\"\"><\\\/div>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"quote-container-v3\\\"\">\\n <\/p>\n<div class=\"\\\"quote-card-v3\\\"\">\\n <\/p>\n<div class=\"\\\"corner-accent-v3\" top-left\\\"><\\\/div>\\n <\/p>\n<div class=\"\\\"corner-accent-v3\" bottom-right\\\"><\\\/div>\\n \\n <\/p>\n<h2 class=\"\\\"quote-text-v3\\\"\">\\n We're not just playing a game.<br \/>\\n We're building the <span class=\"\\\"accent-word\\\"\">future<\\\/span>.\\n <\\\/h2>\\n \\n <\/p>\n<div class=\"\\\"author-wrapper-v3\\\"\">\\n <\/p>\n<div class=\"\\\"author-avatar-v3\\\"\">SA<\\\/div>\\n <\/p>\n<div class=\"\\\"author-info-v3\\\"\">\\n <\/p>\n<p class=\"\\\"author-name-v3\\\"\">Salim Almazaini<\\\/p>\\n <\/p>\n<p class=\"\\\"author-title-v3\\\"\">Founder & President, BIFA & BIFA+<\\\/p>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/section>\\n<\\\/div>\\n\\n<\/p>\n<div class=\"\\\"divider\\\"\"><\\\/div>\\n\\n\\n<\/p>\n<h1 class=\"\\\"variant-title\\\"\">Variant 4 - Premium Gradient<\\\/h1>\\n<\/p>\n<div class=\"\\\"quote-section-wrapper-v4\\\"\">\\n <\/p>\n<section class=\"\\\"quote-section-v4\\\"\">\\n <\/p>\n<div class=\"\\\"particles-v4\\\"\">\\n <\/p>\n<div class=\"\\\"particle\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"particle\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"particle\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"particle\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"particle\\\"\"><\\\/div>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"bird-light-trail-v4\\\"\">\\n <\/p>\n<div class=\"\\\"light-bird-v4\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"trail-light\\\"\"><\\\/div>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"logo-animated-v4\\\"\">\\n <\/p>\n<div class=\"\\\"logo-3d-v4\\\"\"><\\\/div>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"quote-container-v4\\\"\">\\n <\/p>\n<div class=\"\\\"quote-glass-v4\\\"\">\\n <\/p>\n<div class=\"\\\"golden-frame-v4\\\"\"><\\\/div>\\n <span class=\"\\\"quote-marks-v4\\\"\">\\\"<\\\/span>\\n \\n <\/p>\n<h2 class=\"\\\"quote-text-v4\\\"\">\\n We're not just playing a game.<br \/>\\n We're building the <span class=\"\\\"golden\\\"\">future<\\\/span>.\\n <\\\/h2>\\n \\n <\/p>\n<div class=\"\\\"author-glow-v4\\\"\">\\n <\/p>\n<p class=\"\\\"author-name-v4\\\"\">Salim Almazaini<\\\/p>\\n <\/p>\n<p class=\"\\\"author-title-v4\\\"\">Founder & President, BIFA & BIFA+<\\\/p>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/section>\\n<\\\/div>\\n\\n<script>\\nfunction restartAnimations() {\\n const allAnimatedElements = document.querySelectorAll('*');\\n \\n allAnimatedElements.forEach(element => {\\n const animations = element.getAnimations();\\n animations.forEach(animation => {\\n animation.cancel();\\n animation.play();\\n });\\n });\\n\\n const button = document.querySelector('.restart-button');\\n button.textContent = 'Restarting...';\\n button.style.transform = 'scale(0.95)';\\n \\n setTimeout(() => {\\n button.textContent = 'Restart Animations';\\n button.style.transform = 'scale(1)';\\n }, 500);\\n}\\n\\ndocument.addEventListener('DOMContentLoaded', function() {\\n const observerOptions = {\\n threshold: 0.3,\\n rootMargin: '0px 0px -50px 0px'\\n };\\n\\n const observer = new IntersectionObserver((entries) => {\\n entries.forEach(entry => {\\n if (entry.isIntersecting) {\\n if (entry.target.classList.contains('quote-section-v1')) {\\n const bird = entry.target.querySelector('.bird-animation-v1');\\n if (bird) {\\n bird.style.animationPlayState = 'running';\\n }\\n }\\n observer.unobserve(entry.target);\\n }\\n });\\n }, observerOptions);\\n\\n document.querySelectorAll('[class*=\\\"quote-section-v\\\"]').forEach(section => {\\n observer.observe(section);\\n });\\n\\n document.querySelectorAll('[class*=\\\"quote-text\\\"]').forEach(quote => {\\n quote.addEventListener('mouseenter', function() {\\n this.style.transition = 'transform 0.3s ease';\\n this.style.transform = 'scale(1.02)';\\n });\\n \\n quote.addEventListener('mouseleave', function() {\\n this.style.transform = 'scale(1)';\\n });\\n });\\n\\n let ticking = false;\\n function updateParallax() {\\n const scrolled = window.pageYOffset;\\n \\n document.querySelectorAll('.line-v2').forEach((line, index) => {\\n const speed = 0.5 + (index * 0.1);\\n line.style.transform = `translateY(${scrolled * speed}px)`;\\n });\\n \\n document.querySelectorAll('.geo-shape').forEach((shape, index) => {\\n const speed = 0.3 + (index * 0.1);\\n shape.style.transform = `translateY(${scrolled * speed}px) rotate(${scrolled * 0.1}deg)`;\\n });\\n \\n ticking = false;\\n }\\n\\n function requestTick() {\\n if (!ticking) {\\n window.requestAnimationFrame(updateParallax);\\n ticking = true;\\n }\\n }\\n\\n window.addEventListener('scroll', requestTick);\\n\\n const glassCard = document.querySelector('.quote-glass-v4');\\n if (glassCard) {\\n glassCard.addEventListener('mousemove', (e) => {\\n const rect = glassCard.getBoundingClientRect();\\n const x = ((e.clientX - rect.left) \\\/ rect.width - 0.5) * 2;\\n const y = ((e.clientY - rect.top) \\\/ rect.height - 0.5) * 2;\\n \\n glassCard.style.transform = `perspective(1000px) rotateY(${x * 5}deg) rotateX(${-y * 5}deg)`;\\n });\\n \\n glassCard.addEventListener('mouseleave', () => {\\n glassCard.style.transform = 'perspective(1000px) rotateY(0deg) rotateX(0deg)';\\n });\\n }\\n\\n const quoteReveal = document.querySelector('.quote-reveal-v1');\\n if (quoteReveal) {\\n const text = quoteReveal.querySelector('.quote-text-v1');\\n if (text) {\\n text.style.opacity = '0';\\n \\n setTimeout(() => {\\n text.style.opacity = '1';\\n text.style.transition = 'opacity 2s ease-out';\\n }, 1500);\\n }\\n }\\n});\\n<\\\/script>\\n\\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\"},\"children\":[{\"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 - 3 Design Variants<\\\/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=Playfair+Display:wght@400;700;900&family=Lato:wght@300;400;700&family=Montserrat:wght@400;600;700;800&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: 'Lato', sans-serif !important;\\n background: #d7e9f7;\\n overflow-x: hidden;\\n position: relative;\\n}\\n\\n\\\/* Typography *\\\/\\nh1, h2, h3, h4, h5, h6 {\\n font-family: 'Playfair Display', serif !important;\\n}\\n\\np, span, a, button, div {\\n font-family: 'Lato', sans-serif !important;\\n}\\n\\n\\\/* ===== \\u0412\\u0410\\u0420\\u0418\\u0410\\u041d\\u0422 1 - \\u041e\\u0420\\u0418\\u0413\\u0418\\u041d\\u0410\\u041b\\u042c\\u041d\\u042b\\u0419 ===== *\\\/\\n.president-section-wrapper-v1 {\\n width: 100vw;\\n position: relative;\\n left: 50%;\\n right: 50%;\\n margin-left: -50vw;\\n margin-right: -50vw;\\n background: #d7e9f7;\\n overflow: hidden;\\n max-width: 100vw;\\n margin-bottom: 100px;\\n}\\n\\n.president-section-v1 {\\n padding: 80px 0;\\n background: #d7e9f7;\\n position: relative;\\n}\\n\\n\\\/* \\u041d\\u0435\\u043e\\u043d\\u043e\\u0432\\u044b\\u0435 \\u044d\\u043b\\u0435\\u043c\\u0435\\u043d\\u0442\\u044b \\u043d\\u0430 \\u0444\\u043e\\u043d\\u0435 *\\\/\\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(80px);\\n animation: float-neon 20s ease-in-out infinite;\\n}\\n\\n.neon-circle:nth-child(1) {\\n width: 300px;\\n height: 300px;\\n background: rgba(184, 134, 11, 0.2);\\n top: 10%;\\n left: -150px;\\n animation-duration: 25s;\\n}\\n\\n.neon-circle:nth-child(2) {\\n width: 400px;\\n height: 400px;\\n background: rgba(255, 215, 0, 0.15);\\n bottom: 10%;\\n right: -200px;\\n animation-duration: 30s;\\n animation-delay: 5s;\\n}\\n\\n.neon-circle:nth-child(3) {\\n width: 250px;\\n height: 250px;\\n background: rgba(30, 144, 255, 0.2);\\n top: 50%;\\n left: 50%;\\n animation-duration: 20s;\\n animation-delay: 10s;\\n}\\n\\n@keyframes float-neon {\\n 0%, 100% {\\n transform: translate(0, 0) scale(1);\\n }\\n 33% {\\n transform: translate(100px, -50px) scale(1.2);\\n }\\n 66% {\\n transform: translate(-50px, 100px) scale(0.8);\\n }\\n}\\n\\n\\\/* \\u0414\\u043e\\u043f\\u043e\\u043b\\u043d\\u0438\\u0442\\u0435\\u043b\\u044c\\u043d\\u044b\\u0435 \\u0437\\u043e\\u043b\\u043e\\u0442\\u044b\\u0435 \\u043b\\u0438\\u043d\\u0438\\u0438 *\\\/\\n.neon-line {\\n position: absolute;\\n height: 2px;\\n background: linear-gradient(90deg, transparent, rgba(184, 134, 11, 0.6), transparent);\\n animation: move-line 10s linear infinite;\\n}\\n\\n.neon-line:nth-child(4) {\\n top: 20%;\\n width: 200px;\\n animation-duration: 8s;\\n}\\n\\n.neon-line:nth-child(5) {\\n bottom: 30%;\\n width: 150px;\\n animation-duration: 12s;\\n animation-delay: 3s;\\n}\\n\\n@keyframes move-line {\\n 0% {\\n left: -200px;\\n }\\n 100% {\\n left: 100%;\\n }\\n}\\n\\n\\\/* \\u0421\\u0432\\u0435\\u0442\\u044f\\u0449\\u0438\\u0435\\u0441\\u044f \\u0442\\u043e\\u0447\\u043a\\u0438 *\\\/\\n.glow-dot {\\n position: absolute;\\n width: 6px;\\n height: 6px;\\n background: rgba(255, 215, 0, 0.8);\\n border-radius: 50%;\\n box-shadow: 0 0 10px rgba(255, 215, 0, 0.8);\\n animation: 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 top: 70%;\\n left: 15%;\\n animation-delay: 1s;\\n}\\n\\n.glow-dot:nth-child(8) {\\n bottom: 25%;\\n right: 20%;\\n animation-delay: 2s;\\n}\\n\\n@keyframes 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.president-container-v1 {\\n max-width: 1400px;\\n margin: 0 auto;\\n padding: 0 5%;\\n display: grid;\\n grid-template-columns: 360px 1fr;\\n gap: 80px;\\n align-items: start;\\n position: relative;\\n z-index: 1;\\n}\\n\\n\\\/* President Image Column *\\\/\\n.president-image-column {\\n position: relative;\\n animation: fadeInLeft 1s ease-out;\\n}\\n\\n.president-photo {\\n width: 100%;\\n max-width: 360px;\\n height: 450px;\\n border-radius: 30px;\\n box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);\\n overflow: hidden;\\n position: relative;\\n background: white;\\n border: 3px solid rgba(255, 255, 255, 0.8);\\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\\n}\\n\\n.president-photo::before {\\n content: '';\\n position: absolute;\\n top: -50%;\\n left: -50%;\\n width: 200%;\\n height: 200%;\\n background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);\\n transform: rotate(45deg);\\n transition: all 0.6s ease;\\n z-index: 1;\\n}\\n\\n.president-photo:hover::before {\\n animation: shine 0.6s ease;\\n}\\n\\n@keyframes shine {\\n 0% { transform: rotate(45deg) translateY(-100%); }\\n 100% { transform: rotate(45deg) translateY(100%); }\\n}\\n\\n.president-photo img {\\n width: 100%;\\n height: 100%;\\n object-fit: cover;\\n transition: transform 0.5s ease;\\n position: relative;\\n z-index: 0;\\n}\\n\\n.president-photo:hover img {\\n transform: scale(1.05);\\n}\\n\\n\\\/* President Info *\\\/\\n.president-info {\\n animation: fadeInRight 1s ease-out;\\n position: relative;\\n}\\n\\n.president-title {\\n font-size: 2rem;\\n font-weight: 700;\\n text-transform: uppercase;\\n letter-spacing: 4px;\\n margin-bottom: 20px;\\n font-family: 'Playfair Display', serif !important;\\n position: relative;\\n display: inline-block;\\n cursor: pointer;\\n text-decoration: none;\\n transition: all 0.3s ease;\\n}\\n\\n.president-title span {\\n background: linear-gradient(135deg, #b8860b 0%, #ffd700 50%, #b8860b 100%);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n display: inline-block;\\n}\\n\\n.president-title:hover span {\\n transform: translateY(-2px);\\n filter: brightness(1.2);\\n}\\n\\n.president-title::after {\\n content: '';\\n position: absolute;\\n bottom: -5px;\\n left: 0;\\n width: 100%;\\n height: 3px;\\n background: linear-gradient(90deg, #ffd700 0%, transparent 100%);\\n transform: scaleX(0);\\n transform-origin: left;\\n transition: transform 0.4s ease;\\n}\\n\\n.president-title:hover::after {\\n transform: scaleX(1);\\n}\\n\\n.president-name {\\n font-size: clamp(2.5rem, 4vw, 3.5rem);\\n font-weight: 900;\\n color: #1a3a52;\\n margin-bottom: 40px;\\n line-height: 1.1;\\n text-shadow: 2px 2px 4px rgba(0,0,0,0.05);\\n font-family: 'Playfair Display', serif !important;\\n cursor: pointer;\\n text-decoration: none;\\n display: block;\\n transition: all 0.3s ease;\\n}\\n\\n.president-name:hover {\\n color: #b8860b;\\n transform: translateX(5px);\\n}\\n\\n.president-description {\\n font-size: 1.1rem;\\n line-height: 1.9;\\n color: #5a6c7d;\\n margin-bottom: 50px;\\n font-family: 'Lato', sans-serif !important;\\n}\\n\\n.president-description p {\\n margin-bottom: 0;\\n font-family: 'Lato', sans-serif !important;\\n}\\n\\n.president-description .highlight {\\n color: #b8860b;\\n font-weight: 600;\\n}\\n\\n\\\/* Logo and buttons section *\\\/\\n.action-wrapper {\\n display: flex;\\n align-items: center;\\n gap: 40px;\\n margin-top: 30px;\\n justify-content: flex-start;\\n}\\n\\n\\\/* BIFA Logo - \\u0431\\u0435\\u0437\\u043e\\u043f\\u0430\\u0441\\u043d\\u044b\\u0439 \\u043f\\u043e\\u0434\\u0445\\u043e\\u0434 *\\\/\\n.bifa-logo-wrapper {\\n position: relative;\\n width: 90px;\\n height: 90px;\\n flex-shrink: 0;\\n margin-left: 20px;\\n}\\n\\n.bifa-logo-bg {\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n transform: translate(-50%, -50%);\\n width: 110px;\\n height: 110px;\\n background: radial-gradient(circle, rgba(184, 134, 11, 0.06) 0%, transparent 60%);\\n border-radius: 50%;\\n animation: pulse 4s ease-in-out infinite;\\n}\\n\\n@keyframes pulse {\\n 0%, 100% {\\n transform: translate(-50%, -50%) scale(1);\\n opacity: 0.2;\\n }\\n 50% {\\n transform: translate(-50%, -50%) scale(1.05);\\n opacity: 0.4;\\n }\\n}\\n\\n.bifa-logo-img {\\n width: 90px;\\n height: 90px;\\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 5px 10px rgba(0, 0, 0, 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);\\n filter: drop-shadow(0 8px 20px rgba(184, 134, 11, 0.3));\\n}\\n\\n\\\/* Action buttons *\\\/\\n.action-buttons {\\n display: flex;\\n gap: 20px;\\n}\\n\\n.btn-modern {\\n padding: 15px 35px;\\n text-decoration: none;\\n font-size: 1.1rem;\\n font-weight: 600;\\n border-radius: 30px;\\n display: inline-flex;\\n align-items: center;\\n gap: 10px;\\n transition: all 0.3s ease;\\n position: relative;\\n overflow: hidden;\\n font-family: 'Lato', sans-serif !important;\\n white-space: nowrap;\\n}\\n\\n.learn-more-btn {\\n background: linear-gradient(135deg, #1e90ff 0%, #4169e1 100%);\\n color: white;\\n border: none;\\n box-shadow: 0 6px 20px rgba(30, 144, 255, 0.35);\\n}\\n\\n.learn-more-btn::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, 215, 0, 0.2), transparent);\\n transition: left 0.6s ease;\\n}\\n\\n.learn-more-btn:hover::before {\\n left: 100%;\\n}\\n\\n.learn-more-btn:hover {\\n transform: translateY(-2px);\\n box-shadow: 0 8px 30px rgba(30, 144, 255, 0.45);\\n background: linear-gradient(135deg, #4169e1 0%, #1e90ff 100%);\\n}\\n\\n.about-btn {\\n background: transparent;\\n color: #b8860b;\\n border: 2px solid #b8860b;\\n}\\n\\n.about-btn:hover {\\n background: #b8860b;\\n color: white;\\n transform: translateY(-2px);\\n box-shadow: 0 10px 25px rgba(184, 134, 11, 0.2);\\n}\\n\\n.btn-icon {\\n width: 20px;\\n height: 20px;\\n transition: transform 0.3s ease;\\n}\\n\\n.btn-modern:hover .btn-icon {\\n transform: translateX(5px);\\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\\\/* ===== \\u0412\\u0410\\u0420\\u0418\\u0410\\u041d\\u0422 2 - \\u041a\\u0410\\u0420\\u0422\\u041e\\u0427\\u041d\\u042b\\u0419 \\u0414\\u0418\\u0417\\u0410\\u0419\\u041d ===== *\\\/\\n.president-section-wrapper-v2 {\\n width: 100vw;\\n position: relative;\\n left: 50%;\\n right: 50%;\\n margin-left: -50vw;\\n margin-right: -50vw;\\n background: linear-gradient(135deg, #e8f3ff 0%, #d7e9f7 100%);\\n overflow: hidden;\\n max-width: 100vw;\\n margin-bottom: 100px;\\n}\\n\\n.president-section-v2 {\\n padding: 100px 0;\\n position: relative;\\n}\\n\\n.president-container-v2 {\\n max-width: 1200px;\\n margin: 0 auto;\\n padding: 0 20px;\\n position: relative;\\n z-index: 1;\\n}\\n\\n.president-card {\\n background: rgba(255, 255, 255, 0.95);\\n backdrop-filter: blur(10px);\\n border-radius: 40px;\\n padding: 60px;\\n box-shadow: 0 30px 80px rgba(0, 0, 0, 0.1);\\n border: 2px solid rgba(184, 134, 11, 0.2);\\n position: relative;\\n overflow: hidden;\\n animation: fadeInUp 1s ease-out;\\n}\\n\\n.president-card::before {\\n content: '';\\n position: absolute;\\n top: -50%;\\n right: -50%;\\n width: 200%;\\n height: 200%;\\n background: radial-gradient(circle, rgba(255, 215, 0, 0.05) 0%, transparent 50%);\\n animation: rotate-slow 30s linear infinite;\\n}\\n\\n@keyframes rotate-slow {\\n from { transform: rotate(0deg); }\\n to { transform: rotate(360deg); }\\n}\\n\\n.president-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-v2 {\\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, #b8860b, #ffd700, #b8860b) border-box;\\n animation: fadeInScale 1s ease-out;\\n}\\n\\n@keyframes 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.president-photo-v2 img {\\n width: 100%;\\n height: 100%;\\n object-fit: cover;\\n transition: transform 0.6s ease;\\n}\\n\\n.president-photo-v2:hover img {\\n transform: scale(1.1);\\n}\\n\\n.president-info-v2 {\\n animation: fadeInRight 1s ease-out 0.3s both;\\n}\\n\\n.president-badge {\\n display: inline-flex;\\n align-items: center;\\n gap: 10px;\\n background: linear-gradient(135deg, rgba(184, 134, 11, 0.1) 0%, rgba(255, 215, 0, 0.1) 100%);\\n padding: 12px 24px;\\n border-radius: 50px;\\n margin-bottom: 20px;\\n}\\n\\n.badge-icon {\\n width: 24px;\\n height: 24px;\\n fill: #b8860b;\\n}\\n\\n.badge-text {\\n font-family: 'Montserrat', sans-serif !important;\\n font-size: 0.9rem;\\n font-weight: 700;\\n text-transform: uppercase;\\n letter-spacing: 2px;\\n color: #b8860b;\\n}\\n\\n.president-name-v2 {\\n font-size: 3rem;\\n font-weight: 900;\\n color: #1a3a52;\\n margin-bottom: 30px;\\n line-height: 1.1;\\n font-family: 'Playfair Display', serif !important;\\n}\\n\\n.president-description-v2 {\\n font-size: 1.15rem;\\n line-height: 1.8;\\n color: #5a6c7d;\\n margin-bottom: 40px;\\n font-family: 'Lato', sans-serif !important;\\n}\\n\\n.president-description-v2 .highlight {\\n color: #b8860b;\\n font-weight: 600;\\n}\\n\\n.president-actions-v2 {\\n display: flex;\\n align-items: center;\\n gap: 30px;\\n}\\n\\n.btn-gold {\\n background: linear-gradient(135deg, #b8860b 0%, #ffd700 100%);\\n color: white;\\n padding: 16px 40px;\\n text-decoration: none;\\n font-size: 1.1rem;\\n font-weight: 600;\\n border-radius: 30px;\\n display: inline-flex;\\n align-items: center;\\n gap: 10px;\\n transition: all 0.3s ease;\\n box-shadow: 0 6px 25px rgba(184, 134, 11, 0.3);\\n}\\n\\n.btn-gold:hover {\\n transform: translateY(-3px);\\n box-shadow: 0 10px 35px rgba(184, 134, 11, 0.4);\\n}\\n\\n.btn-outline {\\n background: transparent;\\n color: #1e90ff;\\n padding: 16px 40px;\\n text-decoration: none;\\n font-size: 1.1rem;\\n font-weight: 600;\\n border-radius: 30px;\\n border: 2px solid #1e90ff;\\n display: inline-flex;\\n align-items: center;\\n gap: 10px;\\n transition: all 0.3s ease;\\n}\\n\\n.btn-outline:hover {\\n background: #1e90ff;\\n color: white;\\n transform: translateY(-3px);\\n box-shadow: 0 10px 25px rgba(30, 144, 255, 0.3);\\n}\\n\\n\\\/* Decorative elements *\\\/\\n.gold-accent-v2 {\\n position: absolute;\\n width: 200px;\\n height: 200px;\\n background: radial-gradient(circle, rgba(255, 215, 0, 0.2) 0%, transparent 70%);\\n border-radius: 50%;\\n filter: blur(40px);\\n animation: float-accent 15s ease-in-out infinite;\\n}\\n\\n.gold-accent-v2:nth-child(1) {\\n top: -100px;\\n right: -100px;\\n}\\n\\n.gold-accent-v2:nth-child(2) {\\n bottom: -100px;\\n left: -100px;\\n animation-delay: 7s;\\n}\\n\\n@keyframes float-accent {\\n 0%, 100% {\\n transform: translate(0, 0);\\n }\\n 50% {\\n transform: translate(-20px, 20px);\\n }\\n}\\n\\n\\\/* ===== \\u0412\\u0410\\u0420\\u0418\\u0410\\u041d\\u0422 3 - \\u042d\\u041b\\u0415\\u0413\\u0410\\u041d\\u0422\\u041d\\u042b\\u0419 \\u041c\\u0418\\u041d\\u0418\\u041c\\u0410\\u041b\\u0418\\u0417\\u041c ===== *\\\/\\n.president-section-wrapper-v3 {\\n width: 100vw;\\n position: relative;\\n left: 50%;\\n right: 50%;\\n margin-left: -50vw;\\n margin-right: -50vw;\\n background: white;\\n overflow: hidden;\\n max-width: 100vw;\\n}\\n\\n.president-section-v3 {\\n padding: 120px 0;\\n position: relative;\\n}\\n\\n.gold-pattern {\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n background-image: \\n radial-gradient(circle at 20% 80%, rgba(184, 134, 11, 0.03) 0%, transparent 50%),\\n radial-gradient(circle at 80% 20%, rgba(255, 215, 0, 0.03) 0%, transparent 50%),\\n radial-gradient(circle at 80% 80%, rgba(30, 144, 255, 0.03) 0%, transparent 50%);\\n z-index: 0;\\n}\\n\\n.president-container-v3 {\\n max-width: 800px;\\n margin: 0 auto;\\n padding: 0 20px;\\n text-align: center;\\n position: relative;\\n z-index: 1;\\n}\\n\\n.president-photo-v3 {\\n width: 300px;\\n height: 400px;\\n margin: 0 auto 50px;\\n position: relative;\\n animation: fadeInDown 1s ease-out;\\n}\\n\\n.photo-frame {\\n width: 100%;\\n height: 100%;\\n position: relative;\\n overflow: hidden;\\n border-radius: 0 50% 0 50%;\\n box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);\\n}\\n\\n.photo-frame::before {\\n content: '';\\n position: absolute;\\n top: -5px;\\n left: -5px;\\n right: -5px;\\n bottom: -5px;\\n background: linear-gradient(135deg, #b8860b, #ffd700, #b8860b);\\n border-radius: 0 50% 0 50%;\\n z-index: -1;\\n animation: gradient-rotate 8s linear infinite;\\n}\\n\\n@keyframes gradient-rotate {\\n 0% {\\n filter: hue-rotate(0deg);\\n }\\n 100% {\\n filter: hue-rotate(360deg);\\n }\\n}\\n\\n.photo-frame img {\\n width: 100%;\\n height: 100%;\\n object-fit: cover;\\n transition: all 0.6s ease;\\n}\\n\\n.photo-frame:hover img {\\n transform: scale(1.05);\\n}\\n\\n.president-content-v3 {\\n animation: fadeInUp 1s ease-out 0.3s both;\\n}\\n\\n.title-decoration {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n gap: 20px;\\n margin-bottom: 30px;\\n}\\n\\n.gold-line {\\n width: 60px;\\n height: 3px;\\n background: linear-gradient(90deg, transparent, #b8860b, transparent);\\n}\\n\\n.president-title-v3 {\\n font-family: 'Montserrat', sans-serif !important;\\n font-size: 1rem;\\n font-weight: 700;\\n text-transform: uppercase;\\n letter-spacing: 5px;\\n color: #b8860b;\\n}\\n\\n.president-name-v3 {\\n font-size: 3.5rem;\\n font-weight: 900;\\n color: #1a3a52;\\n margin-bottom: 40px;\\n line-height: 1.1;\\n font-family: 'Playfair Display', serif !important;\\n position: relative;\\n}\\n\\n.president-name-v3::after {\\n content: '';\\n position: absolute;\\n bottom: -15px;\\n left: 50%;\\n transform: translateX(-50%);\\n width: 100px;\\n height: 4px;\\n background: linear-gradient(90deg, transparent, #ffd700, transparent);\\n}\\n\\n.president-description-v3 {\\n font-size: 1.2rem;\\n line-height: 2;\\n color: #5a6c7d;\\n margin-bottom: 50px;\\n max-width: 700px;\\n margin-left: auto;\\n margin-right: auto;\\n font-family: 'Lato', sans-serif !important;\\n}\\n\\n.president-description-v3 .highlight {\\n background: linear-gradient(135deg, #b8860b, #ffd700);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n font-weight: 600;\\n}\\n\\n.action-row {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n gap: 40px;\\n}\\n\\n.btn-elegant {\\n padding: 18px 45px;\\n text-decoration: none;\\n font-size: 1.1rem;\\n font-weight: 600;\\n border-radius: 5px;\\n display: inline-flex;\\n align-items: center;\\n gap: 12px;\\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\\n position: relative;\\n overflow: hidden;\\n text-transform: uppercase;\\n letter-spacing: 1px;\\n}\\n\\n.btn-primary {\\n background: #1a3a52;\\n color: white;\\n box-shadow: 0 10px 30px rgba(26, 58, 82, 0.3);\\n}\\n\\n.btn-primary::before {\\n content: '';\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n background: linear-gradient(135deg, #b8860b, #ffd700);\\n opacity: 0;\\n transition: opacity 0.4s ease;\\n}\\n\\n.btn-primary:hover::before {\\n opacity: 1;\\n}\\n\\n.btn-primary span,\\n.btn-primary svg {\\n position: relative;\\n z-index: 1;\\n}\\n\\n.btn-primary:hover {\\n transform: translateY(-3px);\\n box-shadow: 0 15px 40px rgba(184, 134, 11, 0.4);\\n}\\n\\n.btn-secondary {\\n background: transparent;\\n color: #1a3a52;\\n border: 3px solid #1a3a52;\\n}\\n\\n.btn-secondary:hover {\\n background: #1a3a52;\\n color: white;\\n transform: translateY(-3px);\\n box-shadow: 0 15px 40px rgba(26, 58, 82, 0.3);\\n}\\n\\n.logo-floating {\\n position: absolute;\\n top: 50px;\\n right: 50px;\\n width: 80px;\\n height: 80px;\\n opacity: 0.1;\\n animation: float-logo 20s ease-in-out infinite;\\n}\\n\\n@keyframes float-logo {\\n 0%, 100% {\\n transform: translate(0, 0) rotate(0deg);\\n }\\n 25% {\\n transform: translate(-20px, 20px) rotate(90deg);\\n }\\n 50% {\\n transform: translate(20px, -20px) rotate(180deg);\\n }\\n 75% {\\n transform: translate(-20px, -20px) rotate(270deg);\\n }\\n}\\n\\n\\\/* Responsive Design *\\\/\\n@media (max-width: 1200px) {\\n .president-container-v1 {\\n padding: 0 40px;\\n gap: 60px;\\n }\\n \\n .president-card {\\n padding: 40px;\\n }\\n}\\n\\n@media (max-width: 968px) {\\n .president-section-v1,\\n .president-section-v2,\\n .president-section-v3 {\\n padding: 60px 0;\\n }\\n \\n .president-container-v1 {\\n grid-template-columns: 1fr;\\n gap: 50px;\\n text-align: center;\\n padding: 0 30px;\\n }\\n \\n .president-card-content {\\n grid-template-columns: 1fr;\\n text-align: center;\\n }\\n \\n .president-photo-v2 {\\n margin: 0 auto;\\n }\\n \\n .president-actions-v2,\\n .action-row {\\n justify-content: center;\\n }\\n \\n .president-photo {\\n margin: 0 auto;\\n max-width: 400px;\\n height: 500px;\\n }\\n \\n .president-title::after {\\n left: 50%;\\n transform: translateX(-50%);\\n width: 60px;\\n }\\n \\n .president-title:hover::after {\\n transform: translateX(-50%) scaleX(1);\\n }\\n \\n .president-description {\\n text-align: left;\\n }\\n \\n .action-wrapper {\\n justify-content: center;\\n flex-wrap: wrap;\\n }\\n}\\n\\n@media (max-width: 640px) {\\n .president-container-v1,\\n .president-container-v2,\\n .president-container-v3 {\\n padding: 0 20px;\\n }\\n \\n .president-name,\\n .president-name-v2,\\n .president-name-v3 {\\n font-size: 2rem;\\n }\\n \\n .president-title {\\n font-size: 1.3rem;\\n letter-spacing: 2px;\\n }\\n \\n .president-description,\\n .president-description-v2,\\n .president-description-v3 {\\n font-size: 1rem;\\n }\\n \\n .action-wrapper {\\n flex-direction: row;\\n gap: 20px;\\n align-items: center;\\n justify-content: center;\\n }\\n \\n .action-buttons {\\n flex-direction: row;\\n gap: 10px;\\n }\\n \\n .btn-modern {\\n padding: 12px 20px;\\n font-size: 0.95rem;\\n }\\n \\n .bifa-logo-wrapper {\\n margin-left: 10px;\\n }\\n \\n .president-photo-v3 {\\n width: 250px;\\n height: 333px;\\n }\\n \\n .president-actions-v2,\\n .action-row {\\n flex-direction: column;\\n width: 100%;\\n }\\n \\n .btn-gold,\\n .btn-outline,\\n .btn-elegant {\\n width: 100%;\\n justify-content: center;\\n }\\n}\\n\\n@media (max-width: 480px) {\\n .president-photo {\\n max-width: 100%;\\n height: 400px;\\n }\\n \\n .bifa-logo-wrapper {\\n width: 70px;\\n height: 70px;\\n margin-left: 10px;\\n }\\n \\n .bifa-logo-img {\\n width: 70px;\\n height: 70px;\\n }\\n \\n .action-wrapper {\\n flex-wrap: nowrap;\\n }\\n \\n .btn-modern {\\n padding: 10px 15px;\\n font-size: 0.9rem;\\n }\\n \\n .btn-modern span {\\n display: none;\\n }\\n \\n .btn-modern .btn-icon {\\n margin: 0;\\n }\\n}\\n\\n\\\/* Title Styles *\\\/\\n.variant-title {\\n text-align: center;\\n font-size: 2.5rem;\\n font-weight: 800;\\n margin-bottom: 20px;\\n font-family: 'Montserrat', sans-serif !important;\\n color: #1a3a52;\\n}\\n\\n.divider {\\n height: 2px;\\n background: linear-gradient(90deg, transparent, #b8860b, transparent);\\n margin: 80px auto;\\n max-width: 200px;\\n}\\n<\\\/style>\\n<\\\/head>\\n<body>\\n\\n\\n<\/p>\n<h1 class=\"\\\"variant-title\\\"\">\\u0412\\u0430\\u0440\\u0438\\u0430\\u043d\\u0442 1 - \\u041e\\u0440\\u0438\\u0433\\u0438\\u043d\\u0430\\u043b\\u044c\\u043d\\u044b\\u0439<\\\/h1>\\n<\/p>\n<div class=\"\\\"president-section-wrapper-v1\\\"\">\\n <\/p>\n<section class=\"\\\"president-section-v1\\\"\">\\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=\"\\\"neon-line\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"neon-line\\\"\"><\\\/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=\"\\\"president-container-v1\\\"\">\\n \\n <\/p>\n<div class=\"\\\"president-image-column\\\"\">\\n <\/p>\n<div class=\"\\\"president-photo\\\"\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Mr\\\/main-photo.jpg\\\"\" alt=\"\\\"Mr.\" salim humaid almazaini\\\">\\n <\\\/div>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"president-info\\\"\">\\n <a href=\"\\\"\\\/aboutus\\\"\" class=\"\\\"president-title\\\"\">\\n <span>Founder and President<\\\/span>\\n <\\\/a>\\n \\n <a href=\"\\\"\\\/aboutus\\\"\" class=\"\\\"president-name\\\"\">\\n Mr. Salim Humaid Almazaini\\n <\\\/a>\\n \\n <\/p>\n<div class=\"\\\"president-description\\\"\">\\n <\/p>\n<p>\\n A distinguished <span class=\"\\\"highlight\\\"\">visionary leader<\\\/span> in international sports diplomacy. Through strategic innovation and unwavering commitment, Mr. Almazaini transforms global football <span class=\"\\\"highlight\\\"\">into a powerful bridge for unity and cooperation<\\\/span> between nations.\\n <\\\/p>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"action-wrapper\\\"\">\\n <\/p>\n<div class=\"\\\"action-buttons\\\"\">\\n <a href=\"\\\"\\\/president\\\"\" class=\"\\\"btn-modern\" learn-more-btn\\\">\\n <span>Learn More<\\\/span>\\n <svg class=\"\\\"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=\"\\\"\\\/aboutus\\\"\" class=\"\\\"btn-modern\" about-btn\\\">\\n <span>About BIFA<\\\/span>\\n <svg class=\"\\\"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\" 16v-4m12 8h.01\\\"\\>\\n <\\\/svg>\\n <\\\/a>\\n <\\\/div>\\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 <\\\/section>\\n<\\\/div>\\n\\n<\/p>\n<div class=\"\\\"divider\\\"\"><\\\/div>\\n\\n\\n<\/p>\n<h1 class=\"\\\"variant-title\\\"\">\\u0412\\u0430\\u0440\\u0438\\u0430\\u043d\\u0442 2 - \\u041a\\u0430\\u0440\\u0442\\u043e\\u0447\\u043d\\u044b\\u0439 \\u0434\\u0438\\u0437\\u0430\\u0439\\u043d<\\\/h1>\\n<\/p>\n<div class=\"\\\"president-section-wrapper-v2\\\"\">\\n <\/p>\n<section class=\"\\\"president-section-v2\\\"\">\\n <\/p>\n<div class=\"\\\"gold-accent-v2\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"gold-accent-v2\\\"\"><\\\/div>\\n \\n <\/p>\n<div class=\"\\\"president-container-v2\\\"\">\\n <\/p>\n<div class=\"\\\"president-card\\\"\">\\n <\/p>\n<div class=\"\\\"president-card-content\\\"\">\\n \\n <\/p>\n<div class=\"\\\"president-photo-v2\\\"\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Mr\\\/main-photo.jpg\\\"\" alt=\"\\\"Mr.\" salim humaid almazaini\\\">\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"president-info-v2\\\"\">\\n <\/p>\n<div class=\"\\\"president-badge\\\"\">\\n <svg class=\"\\\"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=\"\\\"badge-text\\\"\">Founder & President<\\\/span>\\n <\\\/div>\\n \\n <\/p>\n<h2 class=\"\\\"president-name-v2\\\"\">Mr. Salim Humaid Almazaini<\\\/h2>\\n \\n <\/p>\n<div class=\"\\\"president-description-v2\\\"\">\\n <\/p>\n<p>\\n A distinguished <span class=\"\\\"highlight\\\"\">visionary leader<\\\/span> in international sports diplomacy. Through strategic innovation and unwavering commitment, Mr. Almazaini transforms global football <span class=\"\\\"highlight\\\"\">into a powerful bridge for unity and cooperation<\\\/span> between nations.\\n <\\\/p>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"president-actions-v2\\\"\">\\n <a href=\"\\\"\\\/president\\\"\" class=\"\\\"btn-gold\\\"\">\\n <span>Discover Story<\\\/span>\\n <svg class=\"\\\"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=\"\\\"\\\/aboutus\\\"\" class=\"\\\"btn-outline\\\"\">\\n <span>About BIFA<\\\/span>\\n <svg class=\"\\\"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 <\\\/section>\\n<\\\/div>\\n\\n<\/p>\n<div class=\"\\\"divider\\\"\"><\\\/div>\\n\\n\\n<\/p>\n<h1 class=\"\\\"variant-title\\\"\">\\u0412\\u0430\\u0440\\u0438\\u0430\\u043d\\u0442 3 - \\u042d\\u043b\\u0435\\u0433\\u0430\\u043d\\u0442\\u043d\\u044b\\u0439 \\u043c\\u0438\\u043d\\u0438\\u043c\\u0430\\u043b\\u0438\\u0437\\u043c<\\\/h1>\\n<\/p>\n<div class=\"\\\"president-section-wrapper-v3\\\"\">\\n <\/p>\n<section class=\"\\\"president-section-v3\\\"\">\\n <\/p>\n<div class=\"\\\"gold-pattern\\\"\"><\\\/div>\\n \\n <\/p>\n<div class=\"\\\"logo-floating\\\"\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/logo_bifa.svg\\\"\" alt=\"\\\"BIFA\\\"\" style=\"\\\"width:\" 100%; height: opacity: 0.1;\\\">\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"president-container-v3\\\"\">\\n \\n <\/p>\n<div class=\"\\\"president-photo-v3\\\"\">\\n <\/p>\n<div class=\"\\\"photo-frame\\\"\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Mr\\\/main-photo.jpg\\\"\" alt=\"\\\"Mr.\" salim humaid almazaini\\\">\\n <\\\/div>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"president-content-v3\\\"\">\\n <\/p>\n<div class=\"\\\"title-decoration\\\"\">\\n <\/p>\n<div class=\"\\\"gold-line\\\"\"><\\\/div>\\n <\/p>\n<h3 class=\"\\\"president-title-v3\\\"\">Founder & President<\\\/h3>\\n <\/p>\n<div class=\"\\\"gold-line\\\"\"><\\\/div>\\n <\\\/div>\\n \\n <\/p>\n<h1 class=\"\\\"president-name-v3\\\"\">Mr. Salim Humaid Almazaini<\\\/h1>\\n \\n <\/p>\n<div class=\"\\\"president-description-v3\\\"\">\\n <\/p>\n<p>\\n A distinguished <span class=\"\\\"highlight\\\"\">visionary leader<\\\/span> in international sports diplomacy. Through strategic innovation and unwavering commitment, Mr. Almazaini transforms global football <span class=\"\\\"highlight\\\"\">into a powerful bridge for unity and cooperation<\\\/span> between nations.\\n <\\\/p>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"action-row\\\"\">\\n <a href=\"\\\"\\\/president\\\"\" class=\"\\\"btn-elegant\" btn-primary\\\">\\n <span>Learn More<\\\/span>\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" width=\"\\\"20\\\"\" height=\"\\\"20\\\"\" 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=\"\\\"\\\/aboutus\\\"\" class=\"\\\"btn-elegant\" btn-secondary\\\">\\n <span>About BIFA<\\\/span>\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" width=\"\\\"20\\\"\" height=\"\\\"20\\\"\" 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\" 16v-4m12 8h.01\\\"\\>\\n <\\\/svg>\\n <\\\/a>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/section>\\n<\\\/div>\\n\\n<script>\\n\\\/\\\/ Animation for all variants\\ndocument.addEventListener('DOMContentLoaded', function() {\\n \\\/\\\/ Smooth scroll reveal\\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('[class*=\\\"fadeIn\\\"], .president-card, .president-photo-v2, .president-photo-v3').forEach(el => {\\n if (el) {\\n el.style.animationPlayState = 'paused';\\n observer.observe(el);\\n }\\n });\\n\\n \\\/\\\/ Logo hover effects for all variants\\n document.querySelectorAll('.bifa-logo-wrapper').forEach(logoWrapper => {\\n logoWrapper.addEventListener('mouseenter', () => {\\n const logo = logoWrapper.querySelector('.bifa-logo-img');\\n if (logo) {\\n logo.style.transform = 'scale(1.1)';\\n }\\n });\\n \\n logoWrapper.addEventListener('mouseleave', () => {\\n const logo = logoWrapper.querySelector('.bifa-logo-img');\\n if (logo) {\\n logo.style.transform = 'scale(1)';\\n }\\n });\\n });\\n\\n \\\/\\\/ Button glow effects\\n document.querySelectorAll('.btn-modern, .btn-gold, .btn-outline, .btn-elegant').forEach(button => {\\n button.addEventListener('mouseenter', (e) => {\\n const rect = button.getBoundingClientRect();\\n const x = e.clientX - rect.left;\\n const y = e.clientY - rect.top;\\n \\n const glow = document.createElement('div');\\n glow.style.cssText = `\\n position: absolute;\\n width: 100px;\\n height: 100px;\\n background: radial-gradient(circle, rgba(255, 215, 0, 0.2) 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(glow);\\n setTimeout(() => { glow.style.opacity = '1'; }, 10);\\n \\n button.addEventListener('mouseleave', () => {\\n glow.style.opacity = '0';\\n setTimeout(() => glow.remove(), 300);\\n }, { once: true });\\n });\\n });\\n\\n \\\/\\\/ Image loading animation\\n document.querySelectorAll('img').forEach(img => {\\n img.style.opacity = '0';\\n img.style.transition = 'opacity 0.5s ease';\\n \\n if (img.complete) {\\n img.style.opacity = '1';\\n } else {\\n img.addEventListener('load', function() {\\n this.style.opacity = '1';\\n });\\n }\\n });\\n\\n \\\/\\\/ Preload images\\n function preloadImages() {\\n const imageUrls = [\\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 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\":\"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\"},\"children\":[{\"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 - 3 Design Variants<\\\/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=Playfair+Display:wght@400;700;900&family=Lato:wght@300;400;700&family=Montserrat:wght@400;600;700;800&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: 'Lato', sans-serif !important;\\n background: #d7e9f7;\\n overflow-x: hidden;\\n position: relative;\\n}\\n\\n\\\/* Typography *\\\/\\nh1, h2, h3, h4, h5, h6 {\\n font-family: 'Playfair Display', serif !important;\\n}\\n\\np, span, a, button, div {\\n font-family: 'Lato', sans-serif !important;\\n}\\n\\n\\\/* ===== \\u0412\\u0410\\u0420\\u0418\\u0410\\u041d\\u0422 1 - \\u041e\\u0420\\u0418\\u0413\\u0418\\u041d\\u0410\\u041b\\u042c\\u041d\\u042b\\u0419 ===== *\\\/\\n.president-section-wrapper-v1 {\\n width: 100vw;\\n position: relative;\\n left: 50%;\\n right: 50%;\\n margin-left: -50vw;\\n margin-right: -50vw;\\n background: #d7e9f7;\\n overflow: hidden;\\n max-width: 100vw;\\n margin-bottom: 100px;\\n}\\n\\n.president-section-v1 {\\n padding: 80px 0;\\n background: #d7e9f7;\\n position: relative;\\n}\\n\\n\\\/* \\u041d\\u0435\\u043e\\u043d\\u043e\\u0432\\u044b\\u0435 \\u044d\\u043b\\u0435\\u043c\\u0435\\u043d\\u0442\\u044b \\u043d\\u0430 \\u0444\\u043e\\u043d\\u0435 *\\\/\\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(80px);\\n animation: float-neon 20s ease-in-out infinite;\\n}\\n\\n.neon-circle:nth-child(1) {\\n width: 300px;\\n height: 300px;\\n background: rgba(184, 134, 11, 0.2);\\n top: 10%;\\n left: -150px;\\n animation-duration: 25s;\\n}\\n\\n.neon-circle:nth-child(2) {\\n width: 400px;\\n height: 400px;\\n background: rgba(255, 215, 0, 0.15);\\n bottom: 10%;\\n right: -200px;\\n animation-duration: 30s;\\n animation-delay: 5s;\\n}\\n\\n.neon-circle:nth-child(3) {\\n width: 250px;\\n height: 250px;\\n background: rgba(30, 144, 255, 0.2);\\n top: 50%;\\n left: 50%;\\n animation-duration: 20s;\\n animation-delay: 10s;\\n}\\n\\n@keyframes float-neon {\\n 0%, 100% {\\n transform: translate(0, 0) scale(1);\\n }\\n 33% {\\n transform: translate(100px, -50px) scale(1.2);\\n }\\n 66% {\\n transform: translate(-50px, 100px) scale(0.8);\\n }\\n}\\n\\n\\\/* \\u0414\\u043e\\u043f\\u043e\\u043b\\u043d\\u0438\\u0442\\u0435\\u043b\\u044c\\u043d\\u044b\\u0435 \\u0437\\u043e\\u043b\\u043e\\u0442\\u044b\\u0435 \\u043b\\u0438\\u043d\\u0438\\u0438 *\\\/\\n.neon-line {\\n position: absolute;\\n height: 2px;\\n background: linear-gradient(90deg, transparent, rgba(184, 134, 11, 0.6), transparent);\\n animation: move-line 10s linear infinite;\\n}\\n\\n.neon-line:nth-child(4) {\\n top: 20%;\\n width: 200px;\\n animation-duration: 8s;\\n}\\n\\n.neon-line:nth-child(5) {\\n bottom: 30%;\\n width: 150px;\\n animation-duration: 12s;\\n animation-delay: 3s;\\n}\\n\\n@keyframes move-line {\\n 0% {\\n left: -200px;\\n }\\n 100% {\\n left: 100%;\\n }\\n}\\n\\n\\\/* \\u0421\\u0432\\u0435\\u0442\\u044f\\u0449\\u0438\\u0435\\u0441\\u044f \\u0442\\u043e\\u0447\\u043a\\u0438 *\\\/\\n.glow-dot {\\n position: absolute;\\n width: 6px;\\n height: 6px;\\n background: rgba(255, 215, 0, 0.8);\\n border-radius: 50%;\\n box-shadow: 0 0 10px rgba(255, 215, 0, 0.8);\\n animation: 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 top: 70%;\\n left: 15%;\\n animation-delay: 1s;\\n}\\n\\n.glow-dot:nth-child(8) {\\n bottom: 25%;\\n right: 20%;\\n animation-delay: 2s;\\n}\\n\\n@keyframes 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.president-container-v1 {\\n max-width: 1400px;\\n margin: 0 auto;\\n padding: 0 5%;\\n display: grid;\\n grid-template-columns: 360px 1fr;\\n gap: 80px;\\n align-items: start;\\n position: relative;\\n z-index: 1;\\n}\\n\\n\\\/* President Image Column *\\\/\\n.president-image-column {\\n position: relative;\\n animation: fadeInLeft 1s ease-out;\\n}\\n\\n.president-photo {\\n width: 100%;\\n max-width: 360px;\\n height: 450px;\\n border-radius: 30px;\\n box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);\\n overflow: hidden;\\n position: relative;\\n background: white;\\n border: 3px solid rgba(255, 255, 255, 0.8);\\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\\n}\\n\\n.president-photo::before {\\n content: '';\\n position: absolute;\\n top: -50%;\\n left: -50%;\\n width: 200%;\\n height: 200%;\\n background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);\\n transform: rotate(45deg);\\n transition: all 0.6s ease;\\n z-index: 1;\\n}\\n\\n.president-photo:hover::before {\\n animation: shine 0.6s ease;\\n}\\n\\n@keyframes shine {\\n 0% { transform: rotate(45deg) translateY(-100%); }\\n 100% { transform: rotate(45deg) translateY(100%); }\\n}\\n\\n.president-photo img {\\n width: 100%;\\n height: 100%;\\n object-fit: cover;\\n transition: transform 0.5s ease;\\n position: relative;\\n z-index: 0;\\n}\\n\\n.president-photo:hover img {\\n transform: scale(1.05);\\n}\\n\\n\\\/* President Info *\\\/\\n.president-info {\\n animation: fadeInRight 1s ease-out;\\n position: relative;\\n}\\n\\n.president-title {\\n font-size: 2rem;\\n font-weight: 700;\\n text-transform: uppercase;\\n letter-spacing: 4px;\\n margin-bottom: 20px;\\n font-family: 'Playfair Display', serif !important;\\n position: relative;\\n display: inline-block;\\n cursor: pointer;\\n text-decoration: none;\\n transition: all 0.3s ease;\\n}\\n\\n.president-title span {\\n background: linear-gradient(135deg, #b8860b 0%, #ffd700 50%, #b8860b 100%);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n display: inline-block;\\n}\\n\\n.president-title:hover span {\\n transform: translateY(-2px);\\n filter: brightness(1.2);\\n}\\n\\n.president-title::after {\\n content: '';\\n position: absolute;\\n bottom: -5px;\\n left: 0;\\n width: 100%;\\n height: 3px;\\n background: linear-gradient(90deg, #ffd700 0%, transparent 100%);\\n transform: scaleX(0);\\n transform-origin: left;\\n transition: transform 0.4s ease;\\n}\\n\\n.president-title:hover::after {\\n transform: scaleX(1);\\n}\\n\\n.president-name {\\n font-size: clamp(2.5rem, 4vw, 3.5rem);\\n font-weight: 900;\\n color: #1a3a52;\\n margin-bottom: 40px;\\n line-height: 1.1;\\n text-shadow: 2px 2px 4px rgba(0,0,0,0.05);\\n font-family: 'Playfair Display', serif !important;\\n cursor: pointer;\\n text-decoration: none;\\n display: block;\\n transition: all 0.3s ease;\\n}\\n\\n.president-name:hover {\\n color: #b8860b;\\n transform: translateX(5px);\\n}\\n\\n.president-description {\\n font-size: 1.1rem;\\n line-height: 1.9;\\n color: #5a6c7d;\\n margin-bottom: 50px;\\n font-family: 'Lato', sans-serif !important;\\n}\\n\\n.president-description p {\\n margin-bottom: 0;\\n font-family: 'Lato', sans-serif !important;\\n}\\n\\n.president-description .highlight {\\n color: #b8860b;\\n font-weight: 600;\\n}\\n\\n\\\/* Logo and buttons section *\\\/\\n.action-wrapper {\\n display: flex;\\n align-items: center;\\n gap: 40px;\\n margin-top: 30px;\\n justify-content: flex-start;\\n}\\n\\n\\\/* BIFA Logo - \\u0431\\u0435\\u0437\\u043e\\u043f\\u0430\\u0441\\u043d\\u044b\\u0439 \\u043f\\u043e\\u0434\\u0445\\u043e\\u0434 *\\\/\\n.bifa-logo-wrapper {\\n position: relative;\\n width: 90px;\\n height: 90px;\\n flex-shrink: 0;\\n margin-left: 20px;\\n}\\n\\n.bifa-logo-bg {\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n transform: translate(-50%, -50%);\\n width: 110px;\\n height: 110px;\\n background: radial-gradient(circle, rgba(184, 134, 11, 0.06) 0%, transparent 60%);\\n border-radius: 50%;\\n animation: pulse 4s ease-in-out infinite;\\n}\\n\\n@keyframes pulse {\\n 0%, 100% {\\n transform: translate(-50%, -50%) scale(1);\\n opacity: 0.2;\\n }\\n 50% {\\n transform: translate(-50%, -50%) scale(1.05);\\n opacity: 0.4;\\n }\\n}\\n\\n.bifa-logo-img {\\n width: 90px;\\n height: 90px;\\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 5px 10px rgba(0, 0, 0, 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);\\n filter: drop-shadow(0 8px 20px rgba(184, 134, 11, 0.3));\\n}\\n\\n\\\/* Action buttons *\\\/\\n.action-buttons {\\n display: flex;\\n gap: 20px;\\n}\\n\\n.btn-modern {\\n padding: 15px 35px;\\n text-decoration: none;\\n font-size: 1.1rem;\\n font-weight: 600;\\n border-radius: 30px;\\n display: inline-flex;\\n align-items: center;\\n gap: 10px;\\n transition: all 0.3s ease;\\n position: relative;\\n overflow: hidden;\\n font-family: 'Lato', sans-serif !important;\\n white-space: nowrap;\\n}\\n\\n.learn-more-btn {\\n background: linear-gradient(135deg, #1e90ff 0%, #4169e1 100%);\\n color: white;\\n border: none;\\n box-shadow: 0 6px 20px rgba(30, 144, 255, 0.35);\\n}\\n\\n.learn-more-btn::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, 215, 0, 0.2), transparent);\\n transition: left 0.6s ease;\\n}\\n\\n.learn-more-btn:hover::before {\\n left: 100%;\\n}\\n\\n.learn-more-btn:hover {\\n transform: translateY(-2px);\\n box-shadow: 0 8px 30px rgba(30, 144, 255, 0.45);\\n background: linear-gradient(135deg, #4169e1 0%, #1e90ff 100%);\\n}\\n\\n.about-btn {\\n background: transparent;\\n color: #b8860b;\\n border: 2px solid #b8860b;\\n}\\n\\n.about-btn:hover {\\n background: #b8860b;\\n color: white;\\n transform: translateY(-2px);\\n box-shadow: 0 10px 25px rgba(184, 134, 11, 0.2);\\n}\\n\\n.btn-icon {\\n width: 20px;\\n height: 20px;\\n transition: transform 0.3s ease;\\n}\\n\\n.btn-modern:hover .btn-icon {\\n transform: translateX(5px);\\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\\\/* ===== \\u0412\\u0410\\u0420\\u0418\\u0410\\u041d\\u0422 2 - \\u041a\\u0410\\u0420\\u0422\\u041e\\u0427\\u041d\\u042b\\u0419 \\u0414\\u0418\\u0417\\u0410\\u0419\\u041d ===== *\\\/\\n.president-section-wrapper-v2 {\\n width: 100vw;\\n position: relative;\\n left: 50%;\\n right: 50%;\\n margin-left: -50vw;\\n margin-right: -50vw;\\n background: linear-gradient(135deg, #e8f3ff 0%, #d7e9f7 100%);\\n overflow: hidden;\\n max-width: 100vw;\\n margin-bottom: 100px;\\n}\\n\\n.president-section-v2 {\\n padding: 100px 0;\\n position: relative;\\n}\\n\\n.president-container-v2 {\\n max-width: 1200px;\\n margin: 0 auto;\\n padding: 0 20px;\\n position: relative;\\n z-index: 1;\\n}\\n\\n.president-card {\\n background: rgba(255, 255, 255, 0.95);\\n backdrop-filter: blur(10px);\\n border-radius: 40px;\\n padding: 60px;\\n box-shadow: 0 30px 80px rgba(0, 0, 0, 0.1);\\n border: 2px solid rgba(184, 134, 11, 0.2);\\n position: relative;\\n overflow: hidden;\\n animation: fadeInUp 1s ease-out;\\n}\\n\\n.president-card::before {\\n content: '';\\n position: absolute;\\n top: -50%;\\n right: -50%;\\n width: 200%;\\n height: 200%;\\n background: radial-gradient(circle, rgba(255, 215, 0, 0.05) 0%, transparent 50%);\\n animation: rotate-slow 30s linear infinite;\\n}\\n\\n@keyframes rotate-slow {\\n from { transform: rotate(0deg); }\\n to { transform: rotate(360deg); }\\n}\\n\\n.president-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-v2 {\\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, #b8860b, #ffd700, #b8860b) border-box;\\n animation: fadeInScale 1s ease-out;\\n}\\n\\n@keyframes 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.president-photo-v2 img {\\n width: 100%;\\n height: 100%;\\n object-fit: cover;\\n transition: transform 0.6s ease;\\n}\\n\\n.president-photo-v2:hover img {\\n transform: scale(1.1);\\n}\\n\\n.president-info-v2 {\\n animation: fadeInRight 1s ease-out 0.3s both;\\n}\\n\\n.president-badge {\\n display: inline-flex;\\n align-items: center;\\n gap: 10px;\\n background: linear-gradient(135deg, rgba(184, 134, 11, 0.1) 0%, rgba(255, 215, 0, 0.1) 100%);\\n padding: 12px 24px;\\n border-radius: 50px;\\n margin-bottom: 20px;\\n}\\n\\n.badge-icon {\\n width: 24px;\\n height: 24px;\\n fill: #b8860b;\\n}\\n\\n.badge-text {\\n font-family: 'Montserrat', sans-serif !important;\\n font-size: 0.9rem;\\n font-weight: 700;\\n text-transform: uppercase;\\n letter-spacing: 2px;\\n color: #b8860b;\\n}\\n\\n.president-name-v2 {\\n font-size: 3rem;\\n font-weight: 900;\\n color: #1a3a52;\\n margin-bottom: 30px;\\n line-height: 1.1;\\n font-family: 'Playfair Display', serif !important;\\n}\\n\\n.president-description-v2 {\\n font-size: 1.15rem;\\n line-height: 1.8;\\n color: #5a6c7d;\\n margin-bottom: 40px;\\n font-family: 'Lato', sans-serif !important;\\n}\\n\\n.president-description-v2 .highlight {\\n color: #b8860b;\\n font-weight: 600;\\n}\\n\\n.president-actions-v2 {\\n display: flex;\\n align-items: center;\\n gap: 30px;\\n}\\n\\n.btn-gold {\\n background: linear-gradient(135deg, #b8860b 0%, #ffd700 100%);\\n color: white;\\n padding: 16px 40px;\\n text-decoration: none;\\n font-size: 1.1rem;\\n font-weight: 600;\\n border-radius: 30px;\\n display: inline-flex;\\n align-items: center;\\n gap: 10px;\\n transition: all 0.3s ease;\\n box-shadow: 0 6px 25px rgba(184, 134, 11, 0.3);\\n}\\n\\n.btn-gold:hover {\\n transform: translateY(-3px);\\n box-shadow: 0 10px 35px rgba(184, 134, 11, 0.4);\\n}\\n\\n.btn-outline {\\n background: transparent;\\n color: #1e90ff;\\n padding: 16px 40px;\\n text-decoration: none;\\n font-size: 1.1rem;\\n font-weight: 600;\\n border-radius: 30px;\\n border: 2px solid #1e90ff;\\n display: inline-flex;\\n align-items: center;\\n gap: 10px;\\n transition: all 0.3s ease;\\n}\\n\\n.btn-outline:hover {\\n background: #1e90ff;\\n color: white;\\n transform: translateY(-3px);\\n box-shadow: 0 10px 25px rgba(30, 144, 255, 0.3);\\n}\\n\\n\\\/* Decorative elements *\\\/\\n.gold-accent-v2 {\\n position: absolute;\\n width: 200px;\\n height: 200px;\\n background: radial-gradient(circle, rgba(255, 215, 0, 0.2) 0%, transparent 70%);\\n border-radius: 50%;\\n filter: blur(40px);\\n animation: float-accent 15s ease-in-out infinite;\\n}\\n\\n.gold-accent-v2:nth-child(1) {\\n top: -100px;\\n right: -100px;\\n}\\n\\n.gold-accent-v2:nth-child(2) {\\n bottom: -100px;\\n left: -100px;\\n animation-delay: 7s;\\n}\\n\\n@keyframes float-accent {\\n 0%, 100% {\\n transform: translate(0, 0);\\n }\\n 50% {\\n transform: translate(-20px, 20px);\\n }\\n}\\n\\n\\\/* ===== \\u0412\\u0410\\u0420\\u0418\\u0410\\u041d\\u0422 3 - \\u042d\\u041b\\u0415\\u0413\\u0410\\u041d\\u0422\\u041d\\u042b\\u0419 \\u041c\\u0418\\u041d\\u0418\\u041c\\u0410\\u041b\\u0418\\u0417\\u041c ===== *\\\/\\n.president-section-wrapper-v3 {\\n width: 100vw;\\n position: relative;\\n left: 50%;\\n right: 50%;\\n margin-left: -50vw;\\n margin-right: -50vw;\\n background: white;\\n overflow: hidden;\\n max-width: 100vw;\\n}\\n\\n.president-section-v3 {\\n padding: 120px 0;\\n position: relative;\\n}\\n\\n.gold-pattern {\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n background-image: \\n radial-gradient(circle at 20% 80%, rgba(184, 134, 11, 0.03) 0%, transparent 50%),\\n radial-gradient(circle at 80% 20%, rgba(255, 215, 0, 0.03) 0%, transparent 50%),\\n radial-gradient(circle at 80% 80%, rgba(30, 144, 255, 0.03) 0%, transparent 50%);\\n z-index: 0;\\n}\\n\\n.president-container-v3 {\\n max-width: 800px;\\n margin: 0 auto;\\n padding: 0 20px;\\n text-align: center;\\n position: relative;\\n z-index: 1;\\n}\\n\\n.president-photo-v3 {\\n width: 300px;\\n height: 400px;\\n margin: 0 auto 50px;\\n position: relative;\\n animation: fadeInDown 1s ease-out;\\n}\\n\\n.photo-frame {\\n width: 100%;\\n height: 100%;\\n position: relative;\\n overflow: hidden;\\n border-radius: 0 50% 0 50%;\\n box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);\\n}\\n\\n.photo-frame::before {\\n content: '';\\n position: absolute;\\n top: -5px;\\n left: -5px;\\n right: -5px;\\n bottom: -5px;\\n background: linear-gradient(135deg, #b8860b, #ffd700, #b8860b);\\n border-radius: 0 50% 0 50%;\\n z-index: -1;\\n animation: gradient-rotate 8s linear infinite;\\n}\\n\\n@keyframes gradient-rotate {\\n 0% {\\n filter: hue-rotate(0deg);\\n }\\n 100% {\\n filter: hue-rotate(360deg);\\n }\\n}\\n\\n.photo-frame img {\\n width: 100%;\\n height: 100%;\\n object-fit: cover;\\n transition: all 0.6s ease;\\n}\\n\\n.photo-frame:hover img {\\n transform: scale(1.05);\\n}\\n\\n.president-content-v3 {\\n animation: fadeInUp 1s ease-out 0.3s both;\\n}\\n\\n.title-decoration {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n gap: 20px;\\n margin-bottom: 30px;\\n}\\n\\n.gold-line {\\n width: 60px;\\n height: 3px;\\n background: linear-gradient(90deg, transparent, #b8860b, transparent);\\n}\\n\\n.president-title-v3 {\\n font-family: 'Montserrat', sans-serif !important;\\n font-size: 1rem;\\n font-weight: 700;\\n text-transform: uppercase;\\n letter-spacing: 5px;\\n color: #b8860b;\\n}\\n\\n.president-name-v3 {\\n font-size: 3.5rem;\\n font-weight: 900;\\n color: #1a3a52;\\n margin-bottom: 40px;\\n line-height: 1.1;\\n font-family: 'Playfair Display', serif !important;\\n position: relative;\\n}\\n\\n.president-name-v3::after {\\n content: '';\\n position: absolute;\\n bottom: -15px;\\n left: 50%;\\n transform: translateX(-50%);\\n width: 100px;\\n height: 4px;\\n background: linear-gradient(90deg, transparent, #ffd700, transparent);\\n}\\n\\n.president-description-v3 {\\n font-size: 1.2rem;\\n line-height: 2;\\n color: #5a6c7d;\\n margin-bottom: 50px;\\n max-width: 700px;\\n margin-left: auto;\\n margin-right: auto;\\n font-family: 'Lato', sans-serif !important;\\n}\\n\\n.president-description-v3 .highlight {\\n background: linear-gradient(135deg, #b8860b, #ffd700);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n font-weight: 600;\\n}\\n\\n.action-row {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n gap: 40px;\\n}\\n\\n.btn-elegant {\\n padding: 18px 45px;\\n text-decoration: none;\\n font-size: 1.1rem;\\n font-weight: 600;\\n border-radius: 5px;\\n display: inline-flex;\\n align-items: center;\\n gap: 12px;\\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\\n position: relative;\\n overflow: hidden;\\n text-transform: uppercase;\\n letter-spacing: 1px;\\n}\\n\\n.btn-primary {\\n background: #1a3a52;\\n color: white;\\n box-shadow: 0 10px 30px rgba(26, 58, 82, 0.3);\\n}\\n\\n.btn-primary::before {\\n content: '';\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n background: linear-gradient(135deg, #b8860b, #ffd700);\\n opacity: 0;\\n transition: opacity 0.4s ease;\\n}\\n\\n.btn-primary:hover::before {\\n opacity: 1;\\n}\\n\\n.btn-primary span,\\n.btn-primary svg {\\n position: relative;\\n z-index: 1;\\n}\\n\\n.btn-primary:hover {\\n transform: translateY(-3px);\\n box-shadow: 0 15px 40px rgba(184, 134, 11, 0.4);\\n}\\n\\n.btn-secondary {\\n background: transparent;\\n color: #1a3a52;\\n border: 3px solid #1a3a52;\\n}\\n\\n.btn-secondary:hover {\\n background: #1a3a52;\\n color: white;\\n transform: translateY(-3px);\\n box-shadow: 0 15px 40px rgba(26, 58, 82, 0.3);\\n}\\n\\n.logo-floating {\\n position: absolute;\\n top: 50px;\\n right: 50px;\\n width: 80px;\\n height: 80px;\\n opacity: 0.1;\\n animation: float-logo 20s ease-in-out infinite;\\n}\\n\\n@keyframes float-logo {\\n 0%, 100% {\\n transform: translate(0, 0) rotate(0deg);\\n }\\n 25% {\\n transform: translate(-20px, 20px) rotate(90deg);\\n }\\n 50% {\\n transform: translate(20px, -20px) rotate(180deg);\\n }\\n 75% {\\n transform: translate(-20px, -20px) rotate(270deg);\\n }\\n}\\n\\n\\\/* Responsive Design *\\\/\\n@media (max-width: 1200px) {\\n .president-container-v1 {\\n padding: 0 40px;\\n gap: 60px;\\n }\\n \\n .president-card {\\n padding: 40px;\\n }\\n}\\n\\n@media (max-width: 968px) {\\n .president-section-v1,\\n .president-section-v2,\\n .president-section-v3 {\\n padding: 60px 0;\\n }\\n \\n .president-container-v1 {\\n grid-template-columns: 1fr;\\n gap: 50px;\\n text-align: center;\\n padding: 0 30px;\\n }\\n \\n .president-card-content {\\n grid-template-columns: 1fr;\\n text-align: center;\\n }\\n \\n .president-photo-v2 {\\n margin: 0 auto;\\n }\\n \\n .president-actions-v2,\\n .action-row {\\n justify-content: center;\\n }\\n \\n .president-photo {\\n margin: 0 auto;\\n max-width: 400px;\\n height: 500px;\\n }\\n \\n .president-title::after {\\n left: 50%;\\n transform: translateX(-50%);\\n width: 60px;\\n }\\n \\n .president-title:hover::after {\\n transform: translateX(-50%) scaleX(1);\\n }\\n \\n .president-description {\\n text-align: left;\\n }\\n \\n .action-wrapper {\\n justify-content: center;\\n flex-wrap: wrap;\\n }\\n}\\n\\n@media (max-width: 640px) {\\n .president-container-v1,\\n .president-container-v2,\\n .president-container-v3 {\\n padding: 0 20px;\\n }\\n \\n .president-name,\\n .president-name-v2,\\n .president-name-v3 {\\n font-size: 2rem;\\n }\\n \\n .president-title {\\n font-size: 1.3rem;\\n letter-spacing: 2px;\\n }\\n \\n .president-description,\\n .president-description-v2,\\n .president-description-v3 {\\n font-size: 1rem;\\n }\\n \\n .action-wrapper {\\n flex-direction: row;\\n gap: 20px;\\n align-items: center;\\n justify-content: center;\\n }\\n \\n .action-buttons {\\n flex-direction: row;\\n gap: 10px;\\n }\\n \\n .btn-modern {\\n padding: 12px 20px;\\n font-size: 0.95rem;\\n }\\n \\n .bifa-logo-wrapper {\\n margin-left: 10px;\\n }\\n \\n .president-photo-v3 {\\n width: 250px;\\n height: 333px;\\n }\\n \\n .president-actions-v2,\\n .action-row {\\n flex-direction: column;\\n width: 100%;\\n }\\n \\n .btn-gold,\\n .btn-outline,\\n .btn-elegant {\\n width: 100%;\\n justify-content: center;\\n }\\n}\\n\\n@media (max-width: 480px) {\\n .president-photo {\\n max-width: 100%;\\n height: 400px;\\n }\\n \\n .bifa-logo-wrapper {\\n width: 70px;\\n height: 70px;\\n margin-left: 10px;\\n }\\n \\n .bifa-logo-img {\\n width: 70px;\\n height: 70px;\\n }\\n \\n .action-wrapper {\\n flex-wrap: nowrap;\\n }\\n \\n .btn-modern {\\n padding: 10px 15px;\\n font-size: 0.9rem;\\n }\\n \\n .btn-modern span {\\n display: none;\\n }\\n \\n .btn-modern .btn-icon {\\n margin: 0;\\n }\\n}\\n\\n\\\/* Title Styles *\\\/\\n.variant-title {\\n text-align: center;\\n font-size: 2.5rem;\\n font-weight: 800;\\n margin-bottom: 20px;\\n font-family: 'Montserrat', sans-serif !important;\\n color: #1a3a52;\\n}\\n\\n.divider {\\n height: 2px;\\n background: linear-gradient(90deg, transparent, #b8860b, transparent);\\n margin: 80px auto;\\n max-width: 200px;\\n}\\n<\\\/style>\\n<\\\/head>\\n<body>\\n\\n\\n<\/p>\n<h1 class=\"\\\"variant-title\\\"\">\\u0412\\u0430\\u0440\\u0438\\u0430\\u043d\\u0442 1 - \\u041e\\u0440\\u0438\\u0433\\u0438\\u043d\\u0430\\u043b\\u044c\\u043d\\u044b\\u0439<\\\/h1>\\n<\/p>\n<div class=\"\\\"president-section-wrapper-v1\\\"\">\\n <\/p>\n<section class=\"\\\"president-section-v1\\\"\">\\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=\"\\\"neon-line\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"neon-line\\\"\"><\\\/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=\"\\\"president-container-v1\\\"\">\\n \\n <\/p>\n<div class=\"\\\"president-image-column\\\"\">\\n <\/p>\n<div class=\"\\\"president-photo\\\"\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Mr\\\/main-photo.jpg\\\"\" alt=\"\\\"Mr.\" salim humaid almazaini\\\">\\n <\\\/div>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"president-info\\\"\">\\n <a href=\"\\\"\\\/aboutus\\\"\" class=\"\\\"president-title\\\"\">\\n <span>Founder and President<\\\/span>\\n <\\\/a>\\n \\n <a href=\"\\\"\\\/aboutus\\\"\" class=\"\\\"president-name\\\"\">\\n Mr. Salim Humaid Almazaini\\n <\\\/a>\\n \\n <\/p>\n<div class=\"\\\"president-description\\\"\">\\n <\/p>\n<p>\\n A distinguished <span class=\"\\\"highlight\\\"\">visionary leader<\\\/span> in international sports diplomacy. Through strategic innovation and unwavering commitment, Mr. Almazaini transforms global football <span class=\"\\\"highlight\\\"\">into a powerful bridge for unity and cooperation<\\\/span> between nations.\\n <\\\/p>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"action-wrapper\\\"\">\\n <\/p>\n<div class=\"\\\"action-buttons\\\"\">\\n <a href=\"\\\"\\\/president\\\"\" class=\"\\\"btn-modern\" learn-more-btn\\\">\\n <span>Learn More<\\\/span>\\n <svg class=\"\\\"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=\"\\\"\\\/aboutus\\\"\" class=\"\\\"btn-modern\" about-btn\\\">\\n <span>About BIFA<\\\/span>\\n <svg class=\"\\\"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\" 16v-4m12 8h.01\\\"\\>\\n <\\\/svg>\\n <\\\/a>\\n <\\\/div>\\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 <\\\/section>\\n<\\\/div>\\n\\n<\/p>\n<div class=\"\\\"divider\\\"\"><\\\/div>\\n\\n\\n<\/p>\n<h1 class=\"\\\"variant-title\\\"\">\\u0412\\u0430\\u0440\\u0438\\u0430\\u043d\\u0442 2 - \\u041a\\u0430\\u0440\\u0442\\u043e\\u0447\\u043d\\u044b\\u0439 \\u0434\\u0438\\u0437\\u0430\\u0439\\u043d<\\\/h1>\\n<\/p>\n<div class=\"\\\"president-section-wrapper-v2\\\"\">\\n <\/p>\n<section class=\"\\\"president-section-v2\\\"\">\\n <\/p>\n<div class=\"\\\"gold-accent-v2\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"gold-accent-v2\\\"\"><\\\/div>\\n \\n <\/p>\n<div class=\"\\\"president-container-v2\\\"\">\\n <\/p>\n<div class=\"\\\"president-card\\\"\">\\n <\/p>\n<div class=\"\\\"president-card-content\\\"\">\\n \\n <\/p>\n<div class=\"\\\"president-photo-v2\\\"\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Mr\\\/main-photo.jpg\\\"\" alt=\"\\\"Mr.\" salim humaid almazaini\\\">\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"president-info-v2\\\"\">\\n <\/p>\n<div class=\"\\\"president-badge\\\"\">\\n <svg class=\"\\\"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=\"\\\"badge-text\\\"\">Founder & President<\\\/span>\\n <\\\/div>\\n \\n <\/p>\n<h2 class=\"\\\"president-name-v2\\\"\">Mr. Salim Humaid Almazaini<\\\/h2>\\n \\n <\/p>\n<div class=\"\\\"president-description-v2\\\"\">\\n <\/p>\n<p>\\n A distinguished <span class=\"\\\"highlight\\\"\">visionary leader<\\\/span> in international sports diplomacy. Through strategic innovation and unwavering commitment, Mr. Almazaini transforms global football <span class=\"\\\"highlight\\\"\">into a powerful bridge for unity and cooperation<\\\/span> between nations.\\n <\\\/p>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"president-actions-v2\\\"\">\\n <a href=\"\\\"\\\/president\\\"\" class=\"\\\"btn-gold\\\"\">\\n <span>Discover Story<\\\/span>\\n <svg class=\"\\\"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=\"\\\"\\\/aboutus\\\"\" class=\"\\\"btn-outline\\\"\">\\n <span>About BIFA<\\\/span>\\n <svg class=\"\\\"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 <\\\/section>\\n<\\\/div>\\n\\n<\/p>\n<div class=\"\\\"divider\\\"\"><\\\/div>\\n\\n\\n<\/p>\n<h1 class=\"\\\"variant-title\\\"\">\\u0412\\u0430\\u0440\\u0438\\u0430\\u043d\\u0442 3 - \\u042d\\u043b\\u0435\\u0433\\u0430\\u043d\\u0442\\u043d\\u044b\\u0439 \\u043c\\u0438\\u043d\\u0438\\u043c\\u0430\\u043b\\u0438\\u0437\\u043c<\\\/h1>\\n<\/p>\n<div class=\"\\\"president-section-wrapper-v3\\\"\">\\n <\/p>\n<section class=\"\\\"president-section-v3\\\"\">\\n <\/p>\n<div class=\"\\\"gold-pattern\\\"\"><\\\/div>\\n \\n <\/p>\n<div class=\"\\\"logo-floating\\\"\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/logo_bifa.svg\\\"\" alt=\"\\\"BIFA\\\"\" style=\"\\\"width:\" 100%; height: opacity: 0.1;\\\">\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"president-container-v3\\\"\">\\n \\n <\/p>\n<div class=\"\\\"president-photo-v3\\\"\">\\n <\/p>\n<div class=\"\\\"photo-frame\\\"\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Mr\\\/main-photo.jpg\\\"\" alt=\"\\\"Mr.\" salim humaid almazaini\\\">\\n <\\\/div>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"president-content-v3\\\"\">\\n <\/p>\n<div class=\"\\\"title-decoration\\\"\">\\n <\/p>\n<div class=\"\\\"gold-line\\\"\"><\\\/div>\\n <\/p>\n<h3 class=\"\\\"president-title-v3\\\"\">Founder & President<\\\/h3>\\n <\/p>\n<div class=\"\\\"gold-line\\\"\"><\\\/div>\\n <\\\/div>\\n \\n <\/p>\n<h1 class=\"\\\"president-name-v3\\\"\">Mr. Salim Humaid Almazaini<\\\/h1>\\n \\n <\/p>\n<div class=\"\\\"president-description-v3\\\"\">\\n <\/p>\n<p>\\n A distinguished <span class=\"\\\"highlight\\\"\">visionary leader<\\\/span> in international sports diplomacy. Through strategic innovation and unwavering commitment, Mr. Almazaini transforms global football <span class=\"\\\"highlight\\\"\">into a powerful bridge for unity and cooperation<\\\/span> between nations.\\n <\\\/p>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"action-row\\\"\">\\n <a href=\"\\\"\\\/president\\\"\" class=\"\\\"btn-elegant\" btn-primary\\\">\\n <span>Learn More<\\\/span>\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" width=\"\\\"20\\\"\" height=\"\\\"20\\\"\" 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=\"\\\"\\\/aboutus\\\"\" class=\"\\\"btn-elegant\" btn-secondary\\\">\\n <span>About BIFA<\\\/span>\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" width=\"\\\"20\\\"\" height=\"\\\"20\\\"\" 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\" 16v-4m12 8h.01\\\"\\>\\n <\\\/svg>\\n <\\\/a>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/section>\\n<\\\/div>\\n\\n<script>\\n\\\/\\\/ Animation for all variants\\ndocument.addEventListener('DOMContentLoaded', function() {\\n \\\/\\\/ Smooth scroll reveal\\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('[class*=\\\"fadeIn\\\"], .president-card, .president-photo-v2, .president-photo-v3').forEach(el => {\\n if (el) {\\n el.style.animationPlayState = 'paused';\\n observer.observe(el);\\n }\\n });\\n\\n \\\/\\\/ Logo hover effects for all variants\\n document.querySelectorAll('.bifa-logo-wrapper').forEach(logoWrapper => {\\n logoWrapper.addEventListener('mouseenter', () => {\\n const logo = logoWrapper.querySelector('.bifa-logo-img');\\n if (logo) {\\n logo.style.transform = 'scale(1.1)';\\n }\\n });\\n \\n logoWrapper.addEventListener('mouseleave', () => {\\n const logo = logoWrapper.querySelector('.bifa-logo-img');\\n if (logo) {\\n logo.style.transform = 'scale(1)';\\n }\\n });\\n });\\n\\n \\\/\\\/ Button glow effects\\n document.querySelectorAll('.btn-modern, .btn-gold, .btn-outline, .btn-elegant').forEach(button => {\\n button.addEventListener('mouseenter', (e) => {\\n const rect = button.getBoundingClientRect();\\n const x = e.clientX - rect.left;\\n const y = e.clientY - rect.top;\\n \\n const glow = document.createElement('div');\\n glow.style.cssText = `\\n position: absolute;\\n width: 100px;\\n height: 100px;\\n background: radial-gradient(circle, rgba(255, 215, 0, 0.2) 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(glow);\\n setTimeout(() => { glow.style.opacity = '1'; }, 10);\\n \\n button.addEventListener('mouseleave', () => {\\n glow.style.opacity = '0';\\n setTimeout(() => glow.remove(), 300);\\n }, { once: true });\\n });\\n });\\n\\n \\\/\\\/ Image loading animation\\n document.querySelectorAll('img').forEach(img => {\\n img.style.opacity = '0';\\n img.style.transition = 'opacity 0.5s ease';\\n \\n if (img.complete) {\\n img.style.opacity = '1';\\n } else {\\n img.addEventListener('load', function() {\\n this.style.opacity = '1';\\n });\\n }\\n });\\n\\n \\\/\\\/ Preload images\\n function preloadImages() {\\n const imageUrls = [\\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 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 Quote Blocks - 4 Design Variants<\\\/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=Playfair+Display:wght@400;700;900&family=Lato:wght@300;400;700&family=Montserrat:wght@400;600;700;800&family=Merriweather:wght@300;400;700;900&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: 'Lato', sans-serif !important;\\n background: #f5f5f5;\\n overflow-x: hidden;\\n position: relative;\\n}\\n\\n\\\/* ===== \\u0412\\u0410\\u0420\\u0418\\u0410\\u041d\\u0422 1 - \\u041a\\u041b\\u0410\\u0421\\u0421\\u0418\\u0427\\u0415\\u0421\\u041a\\u0418\\u0419 ===== *\\\/\\n.quote-section-wrapper-v1 {\\n width: 100vw;\\n position: relative;\\n left: 50%;\\n right: 50%;\\n margin-left: -50vw;\\n margin-right: -50vw;\\n background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);\\n overflow: hidden;\\n max-width: 100vw;\\n margin-bottom: 100px;\\n}\\n\\n.quote-section-v1 {\\n padding: 120px 0;\\n position: relative;\\n}\\n\\n\\\/* \\u0412\\u043e\\u0434\\u044f\\u043d\\u044b\\u0435 \\u0437\\u043d\\u0430\\u043a\\u0438 *\\\/\\n.watermark-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.bird-watermark {\\n position: absolute;\\n width: 300px;\\n height: 300px;\\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.03;\\n top: 20%;\\n right: 10%;\\n animation: float-gentle 20s ease-in-out infinite;\\n}\\n\\n.logo-watermark {\\n position: absolute;\\n width: 400px;\\n height: 400px;\\n background-image: url('\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/flag-logo1.svg');\\n background-size: contain;\\n background-repeat: no-repeat;\\n background-position: center;\\n opacity: 0.03;\\n bottom: 10%;\\n left: 5%;\\n animation: float-gentle 25s ease-in-out infinite reverse;\\n}\\n\\n@keyframes float-gentle {\\n 0%, 100% {\\n transform: translate(0, 0) rotate(0deg);\\n }\\n 50% {\\n transform: translate(30px, -30px) rotate(5deg);\\n }\\n}\\n\\n.quote-container-v1 {\\n max-width: 1000px;\\n margin: 0 auto;\\n padding: 0 40px;\\n text-align: center;\\n position: relative;\\n z-index: 1;\\n}\\n\\n\\\/* \\u0414\\u0435\\u043a\\u043e\\u0440\\u0430\\u0442\\u0438\\u0432\\u043d\\u044b\\u0435 \\u043a\\u0430\\u0432\\u044b\\u0447\\u043a\\u0438 *\\\/\\n.quote-marks {\\n position: relative;\\n display: inline-block;\\n margin-bottom: 40px;\\n}\\n\\n.quote-mark-left,\\n.quote-mark-right {\\n font-family: 'Playfair Display', serif;\\n font-size: 120px;\\n line-height: 1;\\n color: #b8860b;\\n opacity: 0.2;\\n position: absolute;\\n}\\n\\n.quote-mark-left {\\n top: -40px;\\n left: -80px;\\n}\\n\\n.quote-mark-right {\\n bottom: -80px;\\n right: -80px;\\n transform: rotate(180deg);\\n}\\n\\n\\\/* \\u041e\\u0441\\u043d\\u043e\\u0432\\u043d\\u043e\\u0439 \\u0442\\u0435\\u043a\\u0441\\u0442 \\u0446\\u0438\\u0442\\u0430\\u0442\\u044b *\\\/\\n.quote-text-v1 {\\n font-family: 'Playfair Display', serif !important;\\n font-size: clamp(2rem, 3.5vw, 3rem);\\n font-weight: 700;\\n line-height: 1.4;\\n color: #1a3a52;\\n margin-bottom: 40px;\\n position: relative;\\n animation: fadeInUp 1s ease-out;\\n}\\n\\n.quote-highlight {\\n background: linear-gradient(135deg, #b8860b, #ffd700);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n font-weight: 900;\\n}\\n\\n\\\/* \\u0410\\u0432\\u0442\\u043e\\u0440 \\u0446\\u0438\\u0442\\u0430\\u0442\\u044b *\\\/\\n.quote-author-v1 {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n gap: 15px;\\n margin-top: 50px;\\n animation: fadeInUp 1s ease-out 0.3s both;\\n}\\n\\n.author-dash {\\n width: 50px;\\n height: 3px;\\n background: linear-gradient(90deg, #b8860b, #ffd700);\\n}\\n\\n.author-info {\\n font-family: 'Montserrat', sans-serif !important;\\n}\\n\\n.author-name {\\n font-size: 1.3rem;\\n font-weight: 700;\\n color: #1a3a52;\\n margin-bottom: 5px;\\n}\\n\\n.author-title {\\n font-size: 1rem;\\n color: #5a6c7d;\\n font-weight: 400;\\n}\\n\\n\\\/* \\u0414\\u0435\\u043a\\u043e\\u0440\\u0430\\u0442\\u0438\\u0432\\u043d\\u044b\\u0439 \\u0433\\u043e\\u043b\\u0443\\u0431\\u044c *\\\/\\n.bird-decoration {\\n position: absolute;\\n top: 50px;\\n left: 50px;\\n width: 80px;\\n height: 80px;\\n background-image: url('\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Logo\\\/bird.svg');\\n background-size: contain;\\n background-repeat: no-repeat;\\n opacity: 0.1;\\n animation: fly-bird 30s linear infinite;\\n}\\n\\n@keyframes fly-bird {\\n 0% {\\n transform: translate(0, 0) rotate(0deg);\\n }\\n 25% {\\n transform: translate(200px, -50px) rotate(10deg);\\n }\\n 50% {\\n transform: translate(400px, 0) rotate(0deg);\\n }\\n 75% {\\n transform: translate(200px, 50px) rotate(-10deg);\\n }\\n 100% {\\n transform: translate(0, 0) rotate(0deg);\\n }\\n}\\n\\n\\\/* ===== \\u0412\\u0410\\u0420\\u0418\\u0410\\u041d\\u0422 2 - \\u0421\\u041e\\u0412\\u0420\\u0415\\u041c\\u0415\\u041d\\u041d\\u042b\\u0419 \\u041c\\u0418\\u041d\\u0418\\u041c\\u0410\\u041b\\u0418\\u0417\\u041c ===== *\\\/\\n.quote-section-wrapper-v2 {\\n width: 100vw;\\n position: relative;\\n left: 50%;\\n right: 50%;\\n margin-left: -50vw;\\n margin-right: -50vw;\\n background: #ffffff;\\n overflow: hidden;\\n max-width: 100vw;\\n margin-bottom: 100px;\\n}\\n\\n.quote-section-v2 {\\n padding: 100px 0;\\n position: relative;\\n}\\n\\n.quote-container-v2 {\\n max-width: 1200px;\\n margin: 0 auto;\\n padding: 0 40px;\\n position: relative;\\n}\\n\\n\\\/* \\u041b\\u0435\\u0432\\u0430\\u044f \\u043f\\u0430\\u043d\\u0435\\u043b\\u044c \\u0441 \\u043f\\u0442\\u0438\\u0446\\u0435\\u0439 *\\\/\\n.quote-layout-v2 {\\n display: grid;\\n grid-template-columns: 300px 1fr;\\n gap: 80px;\\n align-items: center;\\n}\\n\\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(184, 134, 11, 0.05) 0%, rgba(255, 215, 0, 0.05) 100%);\\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\\\/* \\u041f\\u0440\\u0430\\u0432\\u0430\\u044f \\u043f\\u0430\\u043d\\u0435\\u043b\\u044c \\u0441 \\u0446\\u0438\\u0442\\u0430\\u0442\\u043e\\u0439 *\\\/\\n.quote-content-v2 {\\n animation: fadeInRight 1s ease-out;\\n}\\n\\n.quote-text-v2 {\\n font-family: 'Merriweather', serif !important;\\n font-size: 2.5rem;\\n font-weight: 300;\\n line-height: 1.5;\\n color: #1a3a52;\\n margin-bottom: 40px;\\n position: relative;\\n}\\n\\n.quote-text-v2::before {\\n content: '\\\"';\\n position: absolute;\\n top: -30px;\\n left: -50px;\\n font-size: 100px;\\n color: #b8860b;\\n opacity: 0.3;\\n font-family: 'Playfair Display', serif;\\n}\\n\\n.author-block-v2 {\\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\\\/flag-logo1.svg');\\n background-size: contain;\\n background-repeat: no-repeat;\\n opacity: 0.8;\\n}\\n\\n.author-details {\\n border-left: 3px solid #b8860b;\\n padding-left: 20px;\\n}\\n\\n\\\/* ===== \\u0412\\u0410\\u0420\\u0418\\u0410\\u041d\\u0422 3 - \\u041a\\u0410\\u0420\\u0422\\u041e\\u0427\\u041a\\u0410 \\u0421 \\u0413\\u0420\\u0410\\u0414\\u0418\\u0415\\u041d\\u0422\\u041e\\u041c ===== *\\\/\\n.quote-section-wrapper-v3 {\\n width: 100vw;\\n position: relative;\\n left: 50%;\\n right: 50%;\\n margin-left: -50vw;\\n margin-right: -50vw;\\n background: #f0f5fa;\\n overflow: hidden;\\n max-width: 100vw;\\n margin-bottom: 100px;\\n}\\n\\n.quote-section-v3 {\\n padding: 120px 0;\\n position: relative;\\n}\\n\\n.quote-container-v3 {\\n max-width: 900px;\\n margin: 0 auto;\\n padding: 0 20px;\\n position: relative;\\n z-index: 1;\\n}\\n\\n.quote-card {\\n background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);\\n border-radius: 30px;\\n padding: 80px;\\n box-shadow: 0 30px 80px rgba(0, 0, 0, 0.08);\\n position: relative;\\n overflow: hidden;\\n animation: fadeInScale 1s ease-out;\\n}\\n\\n\\\/* \\u0413\\u0440\\u0430\\u0434\\u0438\\u0435\\u043d\\u0442\\u043d\\u0430\\u044f \\u0440\\u0430\\u043c\\u043a\\u0430 *\\\/\\n.quote-card::before {\\n content: '';\\n position: absolute;\\n top: 0;\\n left: 0;\\n right: 0;\\n bottom: 0;\\n border-radius: 30px;\\n padding: 3px;\\n background: linear-gradient(135deg, #b8860b, #ffd700, #1e90ff);\\n -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\\n -webkit-mask-composite: exclude;\\n mask-composite: exclude;\\n opacity: 0.3;\\n}\\n\\n\\\/* \\u0424\\u043e\\u043d\\u043e\\u0432\\u044b\\u0435 \\u044d\\u043b\\u0435\\u043c\\u0435\\u043d\\u0442\\u044b *\\\/\\n.card-bg-elements {\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n overflow: hidden;\\n opacity: 0.05;\\n}\\n\\n.bg-bird {\\n position: absolute;\\n width: 200px;\\n height: 200px;\\n background-image: url('\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Logo\\\/bird.svg');\\n background-size: contain;\\n background-repeat: no-repeat;\\n top: -50px;\\n right: -50px;\\n transform: rotate(15deg);\\n}\\n\\n.bg-logo {\\n position: absolute;\\n width: 300px;\\n height: 300px;\\n background-image: url('\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/flag-logo1.svg');\\n background-size: contain;\\n background-repeat: no-repeat;\\n bottom: -100px;\\n left: -100px;\\n transform: rotate(-15deg);\\n}\\n\\n.quote-content-v3 {\\n position: relative;\\n text-align: center;\\n}\\n\\n.quote-icon {\\n width: 60px;\\n height: 60px;\\n margin: 0 auto 30px;\\n background: linear-gradient(135deg, #b8860b, #ffd700);\\n border-radius: 50%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n animation: pulse-icon 3s ease-in-out infinite;\\n}\\n\\n@keyframes pulse-icon {\\n 0%, 100% {\\n transform: scale(1);\\n box-shadow: 0 5px 20px rgba(184, 134, 11, 0.3);\\n }\\n 50% {\\n transform: scale(1.05);\\n box-shadow: 0 8px 30px rgba(184, 134, 11, 0.4);\\n }\\n}\\n\\n.quote-icon::before {\\n content: '\\\"';\\n font-family: 'Playfair Display', serif;\\n font-size: 30px;\\n color: white;\\n font-weight: 900;\\n}\\n\\n.quote-text-v3 {\\n font-family: 'Playfair Display', serif !important;\\n font-size: 2.2rem;\\n font-weight: 400;\\n line-height: 1.6;\\n color: #1a3a52;\\n margin-bottom: 50px;\\n}\\n\\n.quote-footer {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n gap: 30px;\\n}\\n\\n.footer-line {\\n width: 80px;\\n height: 2px;\\n background: linear-gradient(90deg, transparent, #b8860b, transparent);\\n}\\n\\n\\\/* ===== \\u0412\\u0410\\u0420\\u0418\\u0410\\u041d\\u0422 4 - \\u042d\\u041b\\u0415\\u0413\\u0410\\u041d\\u0422\\u041d\\u042b\\u0419 \\u0421 \\u041f\\u0422\\u0418\\u0426\\u0415\\u0419 ===== *\\\/\\n.quote-section-wrapper-v4 {\\n width: 100vw;\\n position: relative;\\n left: 50%;\\n right: 50%;\\n margin-left: -50vw;\\n margin-right: -50vw;\\n background: linear-gradient(180deg, #ffffff 0%, #d7e9f7 100%);\\n overflow: hidden;\\n max-width: 100vw;\\n}\\n\\n.quote-section-v4 {\\n padding: 150px 0;\\n position: relative;\\n}\\n\\n\\\/* \\u0410\\u043d\\u0438\\u043c\\u0438\\u0440\\u043e\\u0432\\u0430\\u043d\\u043d\\u044b\\u0439 \\u0444\\u043e\\u043d *\\\/\\n.animated-bg {\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n overflow: hidden;\\n z-index: 0;\\n}\\n\\n.floating-bird {\\n position: absolute;\\n width: 100px;\\n height: 100px;\\n background-image: url('\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Logo\\\/bird.svg');\\n background-size: contain;\\n background-repeat: no-repeat;\\n opacity: 0.05;\\n animation: float-diagonal 20s linear infinite;\\n}\\n\\n.floating-bird:nth-child(1) {\\n top: 10%;\\n left: -100px;\\n animation-delay: 0s;\\n}\\n\\n.floating-bird:nth-child(2) {\\n top: 40%;\\n left: -100px;\\n animation-delay: 5s;\\n}\\n\\n.floating-bird:nth-child(3) {\\n top: 70%;\\n left: -100px;\\n animation-delay: 10s;\\n}\\n\\n@keyframes float-diagonal {\\n 0% {\\n transform: translate(0, 0) rotate(10deg);\\n }\\n 100% {\\n transform: translate(calc(100vw + 200px), -200px) rotate(10deg);\\n }\\n}\\n\\n.quote-container-v4 {\\n max-width: 1100px;\\n margin: 0 auto;\\n padding: 0 40px;\\n position: relative;\\n z-index: 1;\\n}\\n\\n.quote-wrapper-v4 {\\n display: flex;\\n align-items: center;\\n gap: 60px;\\n background: rgba(255, 255, 255, 0.9);\\n backdrop-filter: blur(10px);\\n border-radius: 40px;\\n padding: 60px;\\n box-shadow: 0 25px 70px rgba(0, 0, 0, 0.1);\\n border: 1px solid rgba(184, 134, 11, 0.1);\\n animation: fadeInUp 1s ease-out;\\n}\\n\\n\\\/* \\u041b\\u0435\\u0432\\u0430\\u044f \\u0447\\u0430\\u0441\\u0442\\u044c \\u0441 \\u043f\\u0442\\u0438\\u0446\\u0435\\u0439 *\\\/\\n.bird-showcase {\\n flex-shrink: 0;\\n width: 200px;\\n height: 200px;\\n position: relative;\\n}\\n\\n.bird-main {\\n width: 100%;\\n height: 100%;\\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.8;\\n animation: bird-fly 6s ease-in-out infinite;\\n}\\n\\n@keyframes bird-fly {\\n 0%, 100% {\\n transform: translateY(0) rotate(0deg);\\n }\\n 25% {\\n transform: translateY(-10px) rotate(-5deg);\\n }\\n 75% {\\n transform: translateY(10px) rotate(5deg);\\n }\\n}\\n\\n.bird-glow {\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n transform: translate(-50%, -50%);\\n width: 150%;\\n height: 150%;\\n background: radial-gradient(circle, rgba(184, 134, 11, 0.1) 0%, transparent 70%);\\n border-radius: 50%;\\n animation: glow-pulse 4s ease-in-out infinite;\\n}\\n\\n@keyframes glow-pulse {\\n 0%, 100% {\\n opacity: 0.5;\\n transform: translate(-50%, -50%) scale(1);\\n }\\n 50% {\\n opacity: 0.8;\\n transform: translate(-50%, -50%) scale(1.1);\\n }\\n}\\n\\n\\\/* \\u041f\\u0440\\u0430\\u0432\\u0430\\u044f \\u0447\\u0430\\u0441\\u0442\\u044c \\u0441 \\u0446\\u0438\\u0442\\u0430\\u0442\\u043e\\u0439 *\\\/\\n.quote-main-v4 {\\n flex: 1;\\n}\\n\\n.quote-text-v4 {\\n font-family: 'Merriweather', serif !important;\\n font-size: 2.3rem;\\n font-weight: 400;\\n line-height: 1.5;\\n color: #1a3a52;\\n margin-bottom: 40px;\\n font-style: italic;\\n}\\n\\n.quote-text-v4 em {\\n font-style: normal;\\n color: #b8860b;\\n font-weight: 700;\\n}\\n\\n.author-signature {\\n display: flex;\\n align-items: center;\\n justify-content: space-between;\\n}\\n\\n.signature-left {\\n display: flex;\\n align-items: center;\\n gap: 20px;\\n}\\n\\n.signature-line {\\n width: 60px;\\n height: 3px;\\n background: #b8860b;\\n}\\n\\n.signature-text {\\n font-family: 'Montserrat', sans-serif !important;\\n}\\n\\n.signature-name {\\n font-size: 1.2rem;\\n font-weight: 700;\\n color: #1a3a52;\\n margin-bottom: 3px;\\n}\\n\\n.signature-role {\\n font-size: 0.95rem;\\n color: #5a6c7d;\\n}\\n\\n.signature-logo {\\n width: 50px;\\n height: 50px;\\n background-image: url('\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/flag-logo1.svg');\\n background-size: contain;\\n background-repeat: no-repeat;\\n opacity: 0.7;\\n transition: all 0.3s ease;\\n}\\n\\n.signature-logo:hover {\\n opacity: 1;\\n transform: scale(1.1);\\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 fadeInScale {\\n from {\\n opacity: 0;\\n transform: scale(0.95);\\n }\\n to {\\n opacity: 1;\\n transform: scale(1);\\n }\\n}\\n\\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-v2 {\\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-wrapper-v4 {\\n flex-direction: column;\\n text-align: center;\\n }\\n \\n .bird-showcase {\\n width: 150px;\\n height: 150px;\\n }\\n \\n .author-signature {\\n flex-direction: column;\\n gap: 20px;\\n }\\n \\n .quote-text-v1,\\n .quote-text-v2,\\n .quote-text-v3,\\n .quote-text-v4 {\\n font-size: 1.8rem;\\n }\\n}\\n\\n@media (max-width: 640px) {\\n .quote-section-v1,\\n .quote-section-v2,\\n .quote-section-v3,\\n .quote-section-v4 {\\n padding: 80px 0;\\n }\\n \\n .quote-card {\\n padding: 40px;\\n }\\n \\n .quote-wrapper-v4 {\\n padding: 40px;\\n }\\n \\n .quote-mark-left,\\n .quote-mark-right {\\n font-size: 80px;\\n }\\n \\n .quote-mark-left {\\n left: -40px;\\n top: -20px;\\n }\\n \\n .quote-mark-right {\\n right: -40px;\\n bottom: -40px;\\n }\\n \\n .bird-decoration {\\n display: none;\\n }\\n \\n .quote-text-v1,\\n .quote-text-v2,\\n .quote-text-v3,\\n .quote-text-v4 {\\n font-size: 1.5rem;\\n }\\n}\\n\\n\\\/* Title Styles *\\\/\\n.variant-title {\\n text-align: center;\\n font-size: 2.5rem;\\n font-weight: 800;\\n margin-bottom: 20px;\\n font-family: 'Montserrat', sans-serif !important;\\n color: #1a3a52;\\n}\\n\\n.divider {\\n height: 2px;\\n background: linear-gradient(90deg, transparent, #b8860b, transparent);\\n margin: 80px auto;\\n max-width: 200px;\\n}\\n<\\\/style>\\n<\\\/head>\\n<body>\\n\\n\\n<\/p>\n<h1 class=\"\\\"variant-title\\\"\">\\u0412\\u0430\\u0440\\u0438\\u0430\\u043d\\u0442 1 - \\u041a\\u043b\\u0430\\u0441\\u0441\\u0438\\u0447\\u0435\\u0441\\u043a\\u0438\\u0439<\\\/h1>\\n<\/p>\n<div class=\"\\\"quote-section-wrapper-v1\\\"\">\\n <\/p>\n<section class=\"\\\"quote-section-v1\\\"\">\\n \\n <\/p>\n<div class=\"\\\"watermark-elements\\\"\">\\n <\/p>\n<div class=\"\\\"bird-watermark\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"logo-watermark\\\"\"><\\\/div>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"bird-decoration\\\"\"><\\\/div>\\n \\n <\/p>\n<div class=\"\\\"quote-container-v1\\\"\">\\n <\/p>\n<div class=\"\\\"quote-marks\\\"\">\\n <span class=\"\\\"quote-mark-left\\\"\">\\\"<\\\/span>\\n <span class=\"\\\"quote-mark-right\\\"\">\\\"<\\\/span>\\n \\n <\/p>\n<blockquote class=\"\\\"quote-text-v1\\\"\"><p>\\n We're not just playing a game. <span class=\"\\\"quote-highlight\\\"\">We're building the future.<\\\/span>\\n <\\\/blockquote>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"quote-author-v1\\\"\">\\n <\/p>\n<div class=\"\\\"author-dash\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"author-info\\\"\">\\n <\/p>\n<div class=\"\\\"author-name\\\"\">Salim Almazaini<\\\/div>\\n <\/p>\n<div class=\"\\\"author-title\\\"\">Founder & President, BIFA & BIFA+<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"author-dash\\\"\"><\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/section>\\n<\\\/div>\\n\\n<\/p>\n<div class=\"\\\"divider\\\"\"><\\\/div>\\n\\n\\n<\/p>\n<h1 class=\"\\\"variant-title\\\"\">\\u0412\\u0430\\u0440\\u0438\\u0430\\u043d\\u0442 2 - \\u0421\\u043e\\u0432\\u0440\\u0435\\u043c\\u0435\\u043d\\u043d\\u044b\\u0439 \\u043c\\u0438\\u043d\\u0438\\u043c\\u0430\\u043b\\u0438\\u0437\\u043c<\\\/h1>\\n<\/p>\n<div class=\"\\\"quote-section-wrapper-v2\\\"\">\\n <\/p>\n<section class=\"\\\"quote-section-v2\\\"\">\\n <\/p>\n<div class=\"\\\"quote-container-v2\\\"\">\\n <\/p>\n<div class=\"\\\"quote-layout-v2\\\"\">\\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-v2\\\"\">\\n <\/p>\n<blockquote class=\"\\\"quote-text-v2\\\"\"><p>\\n We're not just playing a game. We're building the future.\\n <\\\/blockquote>\\n \\n <\/p>\n<div class=\"\\\"author-block-v2\\\"\">\\n <\/p>\n<div class=\"\\\"author-logo\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"author-details\\\"\">\\n <\/p>\n<div class=\"\\\"author-name\\\"\">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<\/p>\n<div class=\"\\\"divider\\\"\"><\\\/div>\\n\\n\\n<\/p>\n<h1 class=\"\\\"variant-title\\\"\">\\u0412\\u0430\\u0440\\u0438\\u0430\\u043d\\u0442 3 - \\u041a\\u0430\\u0440\\u0442\\u043e\\u0447\\u043a\\u0430 \\u0441 \\u0433\\u0440\\u0430\\u0434\\u0438\\u0435\\u043d\\u0442\\u043e\\u043c<\\\/h1>\\n<\/p>\n<div class=\"\\\"quote-section-wrapper-v3\\\"\">\\n <\/p>\n<section class=\"\\\"quote-section-v3\\\"\">\\n <\/p>\n<div class=\"\\\"quote-container-v3\\\"\">\\n <\/p>\n<div class=\"\\\"quote-card\\\"\">\\n \\n <\/p>\n<div class=\"\\\"card-bg-elements\\\"\">\\n <\/p>\n<div class=\"\\\"bg-bird\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"bg-logo\\\"\"><\\\/div>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"quote-content-v3\\\"\">\\n <\/p>\n<div class=\"\\\"quote-icon\\\"\"><\\\/div>\\n \\n <\/p>\n<blockquote class=\"\\\"quote-text-v3\\\"\"><p>\\n We're not just playing a game.<br \/>\\n <strong>We're building the future.<\\\/strong>\\n <\\\/blockquote>\\n \\n <\/p>\n<div class=\"\\\"quote-footer\\\"\">\\n <\/p>\n<div class=\"\\\"footer-line\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"author-info\\\"\">\\n <\/p>\n<div class=\"\\\"author-name\\\"\">Salim Almazaini<\\\/div>\\n <\/p>\n<div class=\"\\\"author-title\\\"\">Founder & President, BIFA & BIFA+<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"footer-line\\\"\"><\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/section>\\n<\\\/div>\\n\\n<\/p>\n<div class=\"\\\"divider\\\"\"><\\\/div>\\n\\n\\n<\/p>\n<h1 class=\"\\\"variant-title\\\"\">\\u0412\\u0430\\u0440\\u0438\\u0430\\u043d\\u0442 4 - \\u042d\\u043b\\u0435\\u0433\\u0430\\u043d\\u0442\\u043d\\u044b\\u0439 \\u0441 \\u043f\\u0442\\u0438\\u0446\\u0435\\u0439<\\\/h1>\\n<\/p>\n<div class=\"\\\"quote-section-wrapper-v4\\\"\">\\n <\/p>\n<section class=\"\\\"quote-section-v4\\\"\">\\n \\n <\/p>\n<div class=\"\\\"animated-bg\\\"\">\\n <\/p>\n<div class=\"\\\"floating-bird\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"floating-bird\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"floating-bird\\\"\"><\\\/div>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"quote-container-v4\\\"\">\\n <\/p>\n<div class=\"\\\"quote-wrapper-v4\\\"\">\\n \\n <\/p>\n<div class=\"\\\"bird-showcase\\\"\">\\n <\/p>\n<div class=\"\\\"bird-glow\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"bird-main\\\"\"><\\\/div>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"quote-main-v4\\\"\">\\n <\/p>\n<blockquote class=\"\\\"quote-text-v4\\\"\"><p>\\n We're not just playing a game. <em>We're building the future.<\\\/em>\\n <\\\/blockquote>\\n \\n <\/p>\n<div class=\"\\\"author-signature\\\"\">\\n <\/p>\n<div class=\"\\\"signature-left\\\"\">\\n <\/p>\n<div class=\"\\\"signature-line\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"signature-text\\\"\">\\n <\/p>\n<div class=\"\\\"signature-name\\\"\">Salim Almazaini<\\\/div>\\n <\/p>\n<div class=\"\\\"signature-role\\\"\">Founder & President, BIFA & BIFA+<\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"signature-logo\\\"\"><\\\/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('[class*=\\\"quote-text\\\"], [class*=\\\"quote-author\\\"], .quote-card, .quote-wrapper-v4, .bird-panel, .quote-content-v2').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 \\\/\\\/ Parallax effect for watermarks\\n let ticking = false;\\n function updateParallax() {\\n const scrolled = window.pageYOffset;\\n \\n document.querySelectorAll('.bird-watermark').forEach(el => {\\n el.style.transform = `translateY(${scrolled * 0.1}px)`;\\n });\\n \\n document.querySelectorAll('.logo-watermark').forEach(el => {\\n el.style.transform = `translateY(${scrolled * -0.1}px)`;\\n });\\n \\n ticking = false;\\n }\\n\\n function requestTick() {\\n if (!ticking) {\\n window.requestAnimationFrame(updateParallax);\\n ticking = true;\\n }\\n }\\n\\n window.addEventListener('scroll', requestTick);\\n\\n \\\/\\\/ Hover effects\\n document.querySelectorAll('.quote-card, .quote-wrapper-v4').forEach(card => {\\n card.addEventListener('mouseenter', function() {\\n this.style.transform = 'translateY(-5px)';\\n });\\n \\n card.addEventListener('mouseleave', function() {\\n this.style.transform = 'translateY(0)';\\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\":\"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.20\"} --><\/p>","protected":false},"excerpt":{"rendered":"<p>BIFA+ \u2014 Epic Video Experience BIFA+ Play with Spirit. Lead with Vision. BIFA+ Loading BIFA+ Experience… Your browser does not support the video tag. 0:00 BRICS International Football Alliance A global sports and cultural alliance connecting the Global South through football, innovation, and youth empowerment. Founded by Salim Humaid Almazaini from the UAE, BIFA+ creates […]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-175","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bifa.ai\/hi\/wp-json\/wp\/v2\/pages\/175","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bifa.ai\/hi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bifa.ai\/hi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bifa.ai\/hi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bifa.ai\/hi\/wp-json\/wp\/v2\/comments?post=175"}],"version-history":[{"count":31,"href":"https:\/\/bifa.ai\/hi\/wp-json\/wp\/v2\/pages\/175\/revisions"}],"predecessor-version":[{"id":462,"href":"https:\/\/bifa.ai\/hi\/wp-json\/wp\/v2\/pages\/175\/revisions\/462"}],"wp:attachment":[{"href":"https:\/\/bifa.ai\/hi\/wp-json\/wp\/v2\/media?parent=175"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n
\n
\n
\n
\nBIFA+ \u2014 Epic Video Experience<\/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=Playfair+Display:wght@400;700;900&family=Lato:wght@300;400;700&family=Open+Sans:wght@300;400;600;700&display=swap\" rel=\"stylesheet\">\n<style>\n\/* ========= RESET ========= *\/\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}<\/p>\n<p>body {\n font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n overflow-x: hidden;\n background: #ffffff;\n}<\/p>\n<p>\/* ========= MAIN WRAPPER ========= *\/\n.video-section-wrapper {\n width: 100vw;\n position: relative;\n left: 50%;\n margin-left: -50vw;\n background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 30%, #ffffff 70%, #f8f9fa 100%);\n overflow: hidden;\n min-height: 100vh;\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>\/* ========= GEOMETRIC BACKGROUND ELEMENTS ========= *\/\n.geometric-bg {\n position: absolute;\n width: 100%;\n height: 100%;\n overflow: hidden;\n z-index: 1;\n}<\/p>\n<p>.geo-shape {\n position: absolute;\n opacity: 0.05;\n animation: floatGeometry 20s infinite ease-in-out;\n}<\/p>\n<p>.geo-shape:nth-child(1) {\n top: 10%;\n left: 5%;\n width: 100px;\n height: 100px;\n background: linear-gradient(45deg, #b8860b, #ffd700);\n border-radius: 20px;\n animation-delay: 0s;\n}<\/p>\n<p>.geo-shape:nth-child(2) {\n top: 20%;\n right: 10%;\n width: 150px;\n height: 150px;\n background: linear-gradient(135deg, #b8860b, #ffd700);\n border-radius: 50%;\n animation-delay: 5s;\n}<\/p>\n<p>.geo-shape:nth-child(3) {\n bottom: 15%;\n left: 15%;\n width: 80px;\n height: 80px;\n background: linear-gradient(225deg, #b8860b, #ffd700);\n transform: rotate(45deg);\n animation-delay: 10s;\n}<\/p>\n<p>.geo-shape:nth-child(4) {\n bottom: 25%;\n right: 5%;\n width: 120px;\n height: 120px;\n background: linear-gradient(315deg, #b8860b, #ffd700);\n border-radius: 30px;\n animation-delay: 15s;\n}<\/p>\n<p>@keyframes floatGeometry {\n 0%, 100% { transform: translateY(0) rotate(0deg); }\n 25% { transform: translateY(-20px) rotate(90deg); }\n 50% { transform: translateY(-10px) rotate(180deg); }\n 75% { transform: translateY(-30px) rotate(270deg); }\n}<\/p>\n<p>\/* Optimized Floating Particles for YooTheme compatibility *\/\n.bg-particles {\n position: absolute;\n width: 100%;\n height: 100%;\n overflow: hidden;\n z-index: 2;\n will-change: auto;\n}<\/p>\n<p>.particle {\n position: absolute;\n width: 4px;\n height: 4px;\n background: linear-gradient(135deg, #b8860b, #ffd700);\n border-radius: 50%;\n animation: float 15s infinite linear;\n box-shadow: 0 0 8px rgba(184, 134, 11, 0.3);\n opacity: 0.3;\n will-change: transform;\n}<\/p>\n<p>@keyframes float {\n 0% {\n transform: translateY(100vh) translateX(0);\n opacity: 0;\n }\n 15% { opacity: 1; }\n 85% { opacity: 1; }\n 100% {\n transform: translateY(-100vh) translateX(50px);\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>\/* ========= COMPACT HEADER SECTION ========= *\/\n.about-header {\n text-align: center;\n margin-bottom: 40px;\n position: relative;\n}<\/p>\n<p>\/* Main Title - BIFA+ *\/\n.about-title {\n font-family: 'Playfair Display', serif;\n font-size: clamp(3.5rem, 6vw, 5.5rem);\n font-weight: 900;\n margin-bottom: 15px;\n text-decoration: none;\n display: inline-block;\n position: relative;\n background: linear-gradient(135deg, #b8860b, #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n text-transform: uppercase;\n letter-spacing: 2px;\n}<\/p>\n<p>.letter {\n display: inline-block;\n animation: letterDrop 0.6s ease-out forwards;\n opacity: 0;\n transform: translateY(-50px) rotateX(90deg);\n}<\/p>\n<p>@keyframes letterDrop {\n 0% {\n opacity: 0;\n transform: translateY(-50px) rotateX(90deg) scale(0.3);\n }\n 50% {\n opacity: 0.7;\n transform: translateY(10px) rotateX(-10deg) scale(1.1);\n }\n 100% {\n opacity: 1;\n transform: translateY(0) rotateX(0deg) scale(1);\n }\n}<\/p>\n<p>.about-title:hover .letter {\n animation: letterBounce 0.3s ease-in-out;\n}<\/p>\n<p>@keyframes letterBounce {\n 0%, 100% { transform: translateY(0) scale(1); }\n 50% { transform: translateY(-10px) scale(1.2); }\n}<\/p>\n<p>\/* Epic Quote\/Slogan - Right Under BIFA+ *\/\n.epic-quote {\n margin-bottom: 50px;\n perspective: 1000px;\n}<\/p>\n<p>.quote-text {\n font-family: 'Playfair Display', serif;\n font-size: clamp(1.8rem, 3.5vw, 2.8rem);\n font-weight: 700;\n font-style: italic;\n color: #2c3e50;\n position: relative;\n display: inline-block;\n animation: quoteReveal 1.5s ease-out 0.8s forwards;\n opacity: 0;\n transform: translateY(30px) rotateX(-15deg);\n max-width: 900px;\n line-height: 1.3;\n}<\/p>\n<p>@keyframes quoteReveal {\n 0% {\n opacity: 0;\n transform: translateY(30px) rotateX(-15deg) scale(0.9);\n }\n 50% {\n opacity: 0.7;\n transform: translateY(-5px) rotateX(2deg) scale(1.02);\n }\n 100% {\n opacity: 1;\n transform: translateY(0) rotateX(0deg) scale(1);\n }\n}<\/p>\n<p>.quote-text::before {\n content: '\"';\n font-size: 4rem;\n color: rgba(184, 134, 11, 0.3);\n position: absolute;\n left: -40px;\n top: -10px;\n font-family: 'Playfair Display', serif;\n font-weight: 900;\n}<\/p>\n<p>.quote-text::after {\n content: '\"';\n font-size: 4rem;\n color: rgba(184, 134, 11, 0.3);\n position: absolute;\n right: -40px;\n bottom: -30px;\n font-family: 'Playfair Display', serif;\n font-weight: 900;\n}<\/p>\n<p>\/* Quote highlight effect *\/\n.quote-text .highlight {\n background: linear-gradient(135deg, #b8860b, #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n position: relative;\n}<\/p>\n<p>.quote-text .highlight::after {\n content: '';\n position: absolute;\n bottom: -3px;\n left: 0;\n width: 100%;\n height: 2px;\n background: linear-gradient(90deg, transparent, #ffd700, transparent);\n animation: quoteHighlight 2s ease-in-out infinite;\n}<\/p>\n<p>@keyframes quoteHighlight {\n 0%, 100% { opacity: 0.4; transform: scaleX(0.8); }\n 50% { opacity: 1; transform: scaleX(1.2); }\n}<\/p>\n<p>\/* ========= VIDEO PLAYER ========= *\/\n.video-wrapper {\n position: relative;\n width: 100%;\n padding-bottom: 56.25%;\n border-radius: 30px;\n background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);\n overflow: hidden;\n box-shadow: \n 0 30px 100px rgba(0, 0, 0, 0.2),\n 0 0 0 1px rgba(184, 134, 11, 0.1),\n inset 0 1px 0 rgba(255, 255, 255, 0.1);\n transition: all 0.4s ease;\n animation: videoReveal 1.5s ease 1.2s forwards;\n opacity: 0;\n transform: translateY(40px) scale(0.96);\n}<\/p>\n<p>@keyframes videoReveal {\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n}<\/p>\n<p>.video-wrapper:hover {\n transform: translateY(-8px) scale(1.02);\n box-shadow: \n 0 40px 120px rgba(0, 0, 0, 0.25),\n 0 0 0 2px rgba(184, 134, 11, 0.2),\n inset 0 1px 0 rgba(255, 255, 255, 0.1);\n}<\/p>\n<p>\/* ========= LOADING SCREEN OVERLAY ========= *\/\n.video-loading-overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: #ffffff;\n border-radius: 30px;\n z-index: 100;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: opacity 0.8s ease, visibility 0.8s ease;\n overflow: hidden;\n}<\/p>\n<p>.video-loading-overlay.hidden {\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n}<\/p>\n<p>.loading-iframe {\n width: 100%;\n height: 100%;\n border: none;\n border-radius: 30px;\n background: transparent;\n}<\/p>\n<p>\/* Fallback loading animation if iframe fails *\/\n.fallback-loader {\n display: none;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);\n}<\/p>\n<p>.fallback-loader.active {\n display: flex;\n}<\/p>\n<p>.loader-logo {\n width: 140px;\n height: 140px;\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: 'Playfair Display', serif;\n font-size: 26px;\n font-weight: 700;\n background: linear-gradient(135deg, #b8860b, #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: 220px;\n height: 4px;\n background: rgba(184, 134, 11, 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, #b8860b, #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 video {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n}<\/p>\n<p>\/* ========= ENHANCED CONTROLS (same as before) ========= *\/\n.controls {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, transparent 100%);\n padding: 25px 20px 15px;\n opacity: 0;\n visibility: hidden;\n transform: translateY(10px);\n transition: all 0.3s ease;\n z-index: 20;\n}<\/p>\n<p>.video-wrapper:hover .controls {\n opacity: 1;\n visibility: visible;\n transform: translateY(0);\n}<\/p>\n<p>.controls-row {\n display: flex;\n align-items: center;\n gap: 15px;\n margin-bottom: 10px;\n}<\/p>\n<p>.ctrl-btn {\n background: rgba(255, 255, 255, 0.9);\n border: none;\n width: 48px;\n height: 48px;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n backdrop-filter: blur(10px);\n transition: all 0.2s ease;\n position: relative;\n}<\/p>\n<p>.ctrl-btn svg {\n width: 24px;\n height: 24px;\n fill: #2c3e50;\n pointer-events: none;\n}<\/p>\n<p>.ctrl-btn:hover {\n transform: scale(1.1);\n background: rgba(255, 215, 0, 0.9);\n}<\/p>\n<p>.ctrl-btn:hover svg {\n fill: #2c3e50;\n}<\/p>\n<p>.ctrl-btn:active {\n transform: scale(0.95);\n}<\/p>\n<p>.progress-container {\n flex: 1;\n margin: 0 15px;\n}<\/p>\n<p>.progress {\n width: 100%;\n height: 8px;\n background: rgba(255, 255, 255, 0.3);\n border-radius: 4px;\n cursor: pointer;\n overflow: hidden;\n position: relative;\n}<\/p>\n<p>.progress-bar {\n width: 0;\n height: 100%;\n background: linear-gradient(90deg, #b8860b, #ffd700);\n transition: width 0.1s linear;\n border-radius: 4px;\n position: relative;\n}<\/p>\n<p>.progress-bar::after {\n content: '';\n position: absolute;\n right: -6px;\n top: 50%;\n transform: translateY(-50%);\n width: 12px;\n height: 12px;\n background: #ffd700;\n border-radius: 50%;\n box-shadow: 0 0 10px rgba(255, 215, 0, 0.6);\n}<\/p>\n<p>.time-display {\n color: white;\n font-size: 14px;\n font-weight: 600;\n font-family: 'Open Sans', sans-serif;\n text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);\n min-width: 60px;\n text-align: center;\n}<\/p>\n<p>.volume-container {\n display: flex;\n align-items: center;\n gap: 10px;\n}<\/p>\n<p>.volume-slider {\n width: 80px;\n height: 4px;\n background: rgba(255, 255, 255, 0.3);\n border-radius: 2px;\n cursor: pointer;\n position: relative;\n}<\/p>\n<p>.volume-bar {\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, #b8860b, #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}<\/p>\n<p>.fullscreen-btn:hover {\n transform: scale(1.1);\n background: rgba(255, 215, 0, 0.9);\n}<\/p>\n<p>\/* ========= CONTENT BELOW VIDEO ========= *\/\n.video-content {\n margin-top: 70px;\n text-align: center;\n animation: contentReveal 1.5s ease 1.8s forwards;\n opacity: 0;\n transform: translateY(40px);\n}<\/p>\n<p>@keyframes contentReveal {\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>\/* About Description Section *\/\n.about-description {\n margin-bottom: 50px;\n animation: fadeInUp 1.5s ease 2.0s forwards;\n opacity: 0;\n transform: translateY(30px);\n}<\/p>\n<p>@keyframes fadeInUp {\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>.highlight {\n font-weight: 700;\n background: linear-gradient(135deg, #b8860b, #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n position: relative;\n}<\/p>\n<p>.highlight::after {\n content: '';\n position: absolute;\n bottom: -2px;\n left: 0;\n width: 100%;\n height: 2px;\n background: linear-gradient(90deg, transparent, #ffd700, transparent);\n animation: highlightGlow 2s ease-in-out infinite;\n}<\/p>\n<p>@keyframes highlightGlow {\n 0%, 100% { opacity: 0.3; transform: scaleX(0.8); }\n 50% { opacity: 1; transform: scaleX(1.2); }\n}<\/p>\n<p>.stats-bar {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n gap: 80px;\n margin-bottom: 60px;\n padding: 50px 0;\n background: linear-gradient(135deg, \n rgba(184, 134, 11, 0.03) 0%, \n rgba(255, 215, 0, 0.06) 50%, \n rgba(184, 134, 11, 0.03) 100%);\n border-radius: 25px;\n backdrop-filter: blur(10px);\n border: 1px solid rgba(184, 134, 11, 0.1);\n position: relative;\n overflow: hidden;\n}<\/p>\n<p>.stats-bar::before {\n content: '';\n position: absolute;\n top: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n background: linear-gradient(45deg, \n transparent 40%, \n rgba(255, 215, 0, 0.03) 50%, \n transparent 60%);\n animation: statsShine 4s ease-in-out infinite;\n}<\/p>\n<p>@keyframes statsShine {\n 0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }\n 100% { transform: translateX(100%) translateY(100%) rotate(45deg); }\n}<\/p>\n<p>.stat-item {\n text-align: center;\n position: relative;\n z-index: 2;\n}<\/p>\n<p>.stat-number {\n font-family: 'Playfair Display', serif;\n font-size: 3.2rem;\n font-weight: 900;\n background: linear-gradient(135deg, #b8860b, #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n margin-bottom: 10px;\n animation: numberPulse 2s ease-in-out infinite;\n}<\/p>\n<p>@keyframes numberPulse {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.05); }\n}<\/p>\n<p>.stat-label {\n font-family: 'Open Sans', sans-serif;\n font-size: 0.95rem;\n font-weight: 700;\n letter-spacing: 1px;\n text-transform: uppercase;\n color: #2c3e50;\n}<\/p>\n<p>.video-slogan {\n max-width: 1000px;\n margin: 0 auto 60px;\n padding: 0 20px;\n font-family: 'Lato', sans-serif;\n font-size: clamp(1.2rem, 2.2vw, 1.6rem);\n line-height: 1.8;\n color: #2c3e50;\n}<\/p>\n<p>.slogan-main {\n display: block;\n font-family: 'Playfair Display', serif;\n font-weight: 700;\n font-size: clamp(1.4rem, 2.4vw, 1.8rem);\n background: linear-gradient(135deg, #b8860b, #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n margin-bottom: 20px;\n position: relative;\n}<\/p>\n<p>.buttons-container {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n gap: 35px;\n}<\/p>\n<p>.cta-button {\n padding: 22px 50px;\n font-family: 'Open Sans', sans-serif;\n font-size: 1.05rem;\n font-weight: 700;\n text-transform: uppercase;\n border-radius: 50px;\n text-decoration: none;\n position: relative;\n overflow: hidden;\n transition: all 0.4s ease;\n letter-spacing: 1.5px;\n color: #fff;\n border: 2px solid transparent;\n animation: buttonReveal 0.6s ease forwards;\n opacity: 0;\n transform: translateY(30px);\n}<\/p>\n<p>.cta-button:nth-child(1) { animation-delay: 2.4s; }\n.cta-button:nth-child(2) { animation-delay: 2.6s; }\n.cta-button:nth-child(3) { animation-delay: 2.8s; }<\/p>\n<p>@keyframes buttonReveal {\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>.cta-button.primary {\n background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);\n box-shadow: 0 15px 40px rgba(44, 62, 80, 0.3);\n}<\/p>\n<p>.cta-button.secondary {\n background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);\n box-shadow: 0 15px 40px rgba(39, 174, 96, 0.3);\n}<\/p>\n<p>.cta-button.gold {\n background: linear-gradient(135deg, #b8860b 0%, #ffd700 100%);\n color: #2c3e50;\n font-weight: 800;\n box-shadow: 0 15px 40px rgba(184, 134, 11, 0.4);\n}<\/p>\n<p>.cta-button::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0;\n height: 0;\n border-radius: 50%;\n background: rgba(255, 255, 255, 0.3);\n transform: translate(-50%, -50%);\n transition: all 0.6s ease;\n}<\/p>\n<p>.cta-button:hover {\n transform: translateY(-8px);\n}<\/p>\n<p>.cta-button:hover::before {\n width: 300px;\n height: 300px;\n}<\/p>\n<p>\/* ========= RESPONSIVE ========= *\/\n@media (max-width: 768px) {\n .bifa-video-section {\n padding: 60px 0;\n }<\/p>\n<p> .slogan-text {\n font-size: 2.2rem;\n }<\/p>\n<p> .about-title {\n font-size: 2.2rem;\n }<\/p>\n<p> .stats-bar {\n gap: 50px;\n padding: 35px 0;\n }<\/p>\n<p> .stat-number {\n font-size: 2.5rem;\n }<\/p>\n<p> .buttons-container {\n flex-direction: column;\n align-items: center;\n }<\/p>\n<p> .cta-button {\n width: 280px;\n text-align: center;\n }<\/p>\n<p> .controls-row {\n gap: 10px;\n }<\/p>\n<p> .ctrl-btn {\n width: 42px;\n height: 42px;\n }<\/p>\n<p> .volume-slider {\n width: 60px;\n }\n}<\/p>\n<p>@media (max-width: 480px) {\n .slogan-text {\n font-size: 1.8rem;\n }<\/p>\n<p> .about-title {\n font-size: 1.8rem;\n }<\/p>\n<p> .video-wrapper {\n border-radius: 20px;\n }<\/p>\n<p> .cta-button {\n width: 250px;\n font-size: 0.9rem;\n padding: 20px 40px;\n }<\/p>\n<p> .controls {\n padding: 20px 15px 10px;\n }<\/p>\n<p> .volume-container {\n display: none;\n }\n}\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"video-section-wrapper\">\n <\/p>\n<div class=\"geometric-bg\">\n<div class=\"geo-shape\"><\/div>\n<div class=\"geo-shape\"><\/div>\n<div class=\"geo-shape\"><\/div>\n<div class=\"geo-shape\"><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"bg-particles\"><\/div>\n<section class=\"bifa-video-section\">\n<div class=\"video-container\">\n <\/p>\n<div class=\"about-header\">\n <br \/>\n <a href=\"\/about\" class=\"about-title\" id=\"mainTitle\">BIFA+<\/a><\/p>\n<p> <\/p>\n<div class=\"epic-quote\">\n<div class=\"quote-text\">\n <span class=\"highlight\">Play with Spirit.<\/span> Lead with Vision.\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"video-wrapper\">\n <\/p>\n<div class=\"video-loading-overlay\" id=\"videoLoadingOverlay\">\n <iframe \n id=\"loadingIframe\"\n class=\"loading-iframe\"\n src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Logo\/Get.html\"\n title=\"BIFA+ \u0932\u094b\u0921\u093f\u0902\u0917 \u0938\u094d\u0915\u094d\u0930\u0940\u0928\"\n onload=\"handleIframeLoad()\"\n onerror=\"handleIframeError()\"><br \/>\n <\/iframe><\/p>\n<p> <\/p>\n<div class=\"fallback-loader\" id=\"fallbackLoader\">\n<div class=\"loader-logo\">\n <svg viewbox=\"0 0 200 200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <defs>\n <lineargradient id=\"logoGradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n <stop offset=\"0%\" style=\"stop-color:#b8860b\"\/>\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=\"white\" font-family=\"Playfair Display\" font-size=\"24\" font-weight=\"bold\">BIFA+<\/text>\n <\/svg>\n <\/div>\n<div class=\"loader-text\">BIFA+ \u0905\u0928\u0941\u092d\u0935 \u0932\u094b\u0921 \u0939\u094b \u0930\u0939\u093e \u0939\u0948\u2026<\/div>\n<div class=\"loader-progress\">\n<div class=\"loader-progress-bar\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <video id=\"heroVideo\" autoplay muted loop playsinline preload=\"metadata\" \nposter=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/video_poster.jpg\"><source src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/video.mp4\" type=\"video\/mp4\">\u0906\u092a\u0915\u093e \u092c\u094d\u0930\u093e\u0909\u091c\u093c\u0930 \u092e\u0947\u0902 \u0935\u0940\u0921\u093f\u092f\u094b \u091f\u0948\u0917 \u0938\u092e\u0930\u094d\u0925\u093f\u0924 \u0928\u0939\u0940\u0902 \u0939\u0948\u0964<\/video><\/p>\n<p> <\/p>\n<div class=\"controls\" id=\"controls\" aria-label=\"\u0935\u0940\u0921\u093f\u092f\u094b \u0928\u093f\u092f\u0902\u0924\u094d\u0930\u0923\">\n<div class=\"controls-row\">\n <button class=\"ctrl-btn\" id=\"playPause\" aria-label=\"\u091a\u0932\u093e\u090f\u0901\/\u0930\u094b\u0915\u0947\u0902\"><br \/>\n <svg viewbox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg><br \/>\n <\/button><\/p>\n<div class=\"progress-container\">\n<div class=\"progress\" id=\"progress\">\n<div class=\"progress-bar\" id=\"progressBar\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"time-display\" id=\"timeDisplay\">0:00<\/div>\n<div class=\"volume-container\">\n <button class=\"ctrl-btn\" id=\"muteToggle\" aria-label=\"\u092e\u094d\u092f\u0942\u091f\/\u0905\u0928\u092e\u094d\u092f\u0942\u091f \u0915\u0930\u0947\u0902\"><br \/>\n <svg viewbox=\"0 0 24 24\"><path d=\"M4 9v6h4l5 5V4L8 9H4z\"\/><\/svg><br \/>\n <\/button><\/p>\n<div class=\"volume-slider\" id=\"volumeSlider\">\n<div class=\"volume-bar\" id=\"volumeBar\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <button class=\"fullscreen-btn\" id=\"fullscreenBtn\" aria-label=\"\u092a\u0942\u0930\u094d\u0923 \u0938\u094d\u0915\u094d\u0930\u0940\u0928\"><br \/>\n <svg viewbox=\"0 0 24 24\"><path d=\"M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z\"\/><\/svg><br \/>\n <\/button>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"video-content\">\n <\/p>\n<div class=\"about-description\">\n<p style=\"font-family: 'Open Sans', sans-serif; font-size: clamp(1.1rem, 2vw, 1.4rem); color: #2c3e50; font-weight: 600; margin-bottom: 15px; letter-spacing: 1px;\">\n \u092c\u094d\u0930\u093f\u0915\u094d\u0938 \u0905\u0902\u0924\u0930\u094d\u0930\u093e\u0937\u094d\u091f\u094d\u0930\u0940\u092f \u092b\u0941\u091f\u092c\u0949\u0932 \u0917\u0920\u092c\u0902\u0927\u0928\n <\/p>\n<p style=\"max-width: 1000px; margin: 0 auto 40px; font-family: 'Lato', sans-serif; font-size: clamp(1rem, 1.5vw, 1.3rem); line-height: 1.8; color: #4a5568;\" class=\" translation-block\">A global sports and cultural alliance connecting the <span class=\"highlight\">Global South<\/span> through football, \r\n innovation, and youth empowerment. Founded by <span class=\"highlight\">Salim Humaid Almazaini<\/span> from the UAE, \r\n BIFA+ creates bridges between nations through <span class=\"highlight\">sports diplomacy<\/span>, \r\n <span class=\"highlight\">cultural exchange<\/span>, and <span class=\"highlight\">technology integration<\/span>.<\/p>\n<\/p><\/div>\n<div class=\"stats-bar\">\n<div class=\"stat-item\">\n<div class=\"stat-number\">11+<\/div>\n<div class=\"stat-label\">\u0935\u0948\u0936\u094d\u0935\u093f\u0915 \u0926\u0915\u094d\u0937\u093f\u0923 \u0930\u093e\u0937\u094d\u091f\u094d\u0930<\/div>\n<\/p><\/div>\n<div class=\"stat-item\">\n<div class=\"stat-number\">3.8\u092c\u0940<\/div>\n<div class=\"stat-label\">\u091c\u0928\u0938\u0902\u0916\u094d\u092f\u093e \u0938\u0902\u092f\u0941\u0915\u094d\u0924<\/div>\n<\/p><\/div>\n<div class=\"stat-item\">\n<div class=\"stat-number\">2024<\/div>\n<div class=\"stat-label\">\u0938\u094d\u0925\u093e\u092a\u0928\u093e \u0935\u0930\u094d\u0937<\/div>\n<\/p><\/div>\n<div class=\"stat-item\">\n<div class=\"stat-number\">\u221e<\/div>\n<div class=\"stat-label\">\u092d\u0935\u093f\u0937\u094d\u092f \u0915\u0940 \u0938\u0902\u092d\u093e\u0935\u0928\u093e\u090f\u0902<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"video-slogan\">\n <span class=\"slogan-main\">BIFA+: \u091c\u0939\u093e\u0902 \u0935\u0948\u0936\u094d\u0935\u093f\u0915 \u0926\u0915\u094d\u0937\u093f\u0923 \u0915\u0940 \u090a\u0930\u094d\u091c\u093e \u0905\u0902\u0924\u0930\u094d\u0930\u093e\u0937\u094d\u091f\u094d\u0930\u0940\u092f \u092b\u0941\u091f\u092c\u0949\u0932 \u0938\u0902\u0935\u093e\u0926 \u092e\u0947\u0902 \u092a\u0930\u093f\u0935\u0930\u094d\u0924\u093f\u0924 \u0939\u094b\u0924\u0940 \u0939\u0948<\/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+ \u092e\u0939\u093f\u0932\u093e<\/strong>, <strong>\u092f\u0941\u0935\u093e \u090f\u0935\u0902 \u0935\u093f\u0936\u094d\u0935\u0935\u093f\u0926\u094d\u092f\u093e\u0932\u092f \u092a\u0939\u0932<\/strong>,<br \/>\n <strong>\u0908\u092b\u0941\u091f\u092c\u0949\u0932 \u0917\u0947\u092e\u093f\u0902\u0917<\/strong>, \u0914\u0930 \u092f\u0939 <strong>\u0936\u0939\u0930\u094b\u0902 \u0915\u093e \u0928\u0947\u091f\u0935\u0930\u094d\u0915<\/strong>, we’re building bridges between cultures<br \/>\n and creating opportunities for the next generation of global leaders across Brazil, UAE, Russia, China, India,<br \/>\n South Africa, Saudi Arabia, Egypt, Ethiopia, Indonesia, and beyond.\n <\/div>\n<div class=\"buttons-container\">\n <a href=\"#join\" class=\"cta-button primary\">Join the Alliance<\/a><br \/>\n <a href=\"#initiatives\" class=\"cta-button secondary\">Our Initiatives<\/a><br \/>\n <a href=\"#partnership\" class=\"cta-button gold\">Become a Partner<\/a>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<\/div>\n<p><script>\n\/\/ Global functions for iframe handling\nfunction handleIframeLoad() {\n console.log('Loading screen iframe loaded successfully');\n}<\/p>\n<p>function handleIframeError() {\n console.log('Loading screen iframe failed, showing fallback');\n document.getElementById('loadingIframe').style.display = 'none';\n document.getElementById('fallbackLoader').classList.add('active');\n}<\/p>\n<p>document.addEventListener('DOMContentLoaded', () => {\n \/\/ Letter Animation for Main Title\n const titleElement = document.getElementById('mainTitle');\n const titleText = titleElement.textContent;\n titleElement.innerHTML = '';<\/p>\n<p> titleText.split('').forEach((letter, index) => {\n const span = document.createElement('span');\n span.className = 'letter';\n span.textContent = letter === ' ' ? '\\u00A0' : letter;\n span.style.animationDelay = `${0.3 + index * 0.15}s`;\n titleElement.appendChild(span);\n });<\/p>\n<p> const video = document.getElementById('heroVideo');\n const playBtn = document.getElementById('playPause');\n const muteBtn = document.getElementById('muteToggle');\n const progress = document.getElementById('progress');\n const progressBar = document.getElementById('progressBar');\n const timeDisplay = document.getElementById('timeDisplay');\n const volumeSlider = document.getElementById('volumeSlider');\n const volumeBar = document.getElementById('volumeBar');\n const fullscreenBtn = document.getElementById('fullscreenBtn');\n const loadingOverlay = document.getElementById('videoLoadingOverlay');<\/p>\n<p> \/\/ Loading screen management\n let videoReady = false;\n let iframeReady = false;<\/p>\n<p> \/\/ Check if video is ready to play\n const checkVideoReady = () => {\n if (video.readyState >= 3) { \/\/ HAVE_FUTURE_DATA or greater\n videoReady = true;\n hideLoadingScreen();\n }\n };<\/p>\n<p> \/\/ Hide loading screen with smooth animation\n const hideLoadingScreen = () => {\n if (videoReady && loadingOverlay) {\n setTimeout(() => {\n loadingOverlay.classList.add('hidden');\n \/\/ Remove overlay completely after animation\n setTimeout(() => {\n if (loadingOverlay.parentNode) {\n loadingOverlay.style.display = 'none';\n }\n }, 800);\n }, 1500); \/\/ Show loading for minimum 1.5 seconds\n }\n };<\/p>\n<p> \/\/ Video event listeners for loading\n video.addEventListener('loadeddata', checkVideoReady);\n video.addEventListener('canplay', checkVideoReady);\n video.addEventListener('canplaythrough', () => {\n videoReady = true;\n hideLoadingScreen();\n });<\/p>\n<p> \/\/ Fallback: hide loading screen after maximum time\n setTimeout(() => {\n if (loadingOverlay && !loadingOverlay.classList.contains('hidden')) {\n console.log('Hiding loading screen after timeout');\n hideLoadingScreen();\n }\n }, 8000); \/\/ Maximum 8 seconds<\/p>\n<p> \/\/ Play\/Pause Icons\n const setPlayIcon = (paused) => {\n playBtn.innerHTML = paused\n ? '<svg viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg>'\n : '<svg viewBox=\"0 0 24 24\"><path d=\"M6 19h4V5H6zm8 0h4V5h-4z\"\/><\/svg>';\n };<\/p>\n<p> \/\/ Mute\/Unmute Icons\n const setMuteIcon = (muted) => {\n muteBtn.innerHTML = muted\n ? '<svg viewBox=\"0 0 24 24\"><path d=\"M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z\"\/><\/svg>'\n : '<svg viewBox=\"0 0 24 24\"><path d=\"M4 9v6h4l5 5V4L8 9H4z\"\/><\/svg>';\n };<\/p>\n<p> \/\/ Format time\n const formatTime = (seconds) => {\n const mins = Math.floor(seconds \/ 60);\n const secs = Math.floor(seconds % 60);\n return `${mins}:${secs.toString().padStart(2, '0')}`;\n };<\/p>\n<p> \/\/ Play\/Pause functionality\n playBtn.addEventListener('click', () => {\n if (video.paused) {\n video.play();\n } else {\n video.pause();\n }\n setPlayIcon(video.paused);\n });<\/p>\n<p> \/\/ Mute\/Unmute functionality\n muteBtn.addEventListener('click', () => {\n video.muted = !video.muted;\n setMuteIcon(video.muted);\n volumeBar.style.width = video.muted ? '0%' : (video.volume * 100) + '%';\n });<\/p>\n<p> \/\/ Progress bar update\n video.addEventListener('timeupdate', () => {\n const progress = (video.currentTime \/ video.duration) * 100;\n progressBar.style.width = progress + '%';\n timeDisplay.textContent = formatTime(video.currentTime);\n });<\/p>\n<p> \/\/ Progress bar click\n progress.addEventListener('click', (e) => {\n const rect = progress.getBoundingClientRect();\n const clickX = e.clientX - rect.left;\n const clickPercent = clickX \/ rect.width;\n video.currentTime = clickPercent * video.duration;\n });<\/p>\n<p> \/\/ Volume control\n volumeSlider.addEventListener('click', (e) => {\n const rect = volumeSlider.getBoundingClientRect();\n const clickX = e.clientX - rect.left;\n const volume = clickX \/ rect.width;\n video.volume = Math.max(0, Math.min(1, volume));\n volumeBar.style.width = (video.volume * 100) + '%';<\/p>\n<p> if (video.volume === 0) {\n video.muted = true;\n } else {\n video.muted = false;\n }\n setMuteIcon(video.muted);\n });<\/p>\n<p> \/\/ Fullscreen functionality\n fullscreenBtn.addEventListener('click', () => {\n if (!document.fullscreenElement) {\n video.parentElement.requestFullscreen();\n } else {\n document.exitFullscreen();\n }\n });<\/p>\n<p> \/\/ Initialize icons\n setPlayIcon(video.paused);\n setMuteIcon(video.muted);\n volumeBar.style.width = (video.volume * 100) + '%';<\/p>\n<p> \/\/ Create optimized floating particles (reduced count for YooTheme compatibility)\n const particlesContainer = document.querySelector('.bg-particles');\n const particleCount = 15; \/\/ Reduced from 25 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<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 Blocks - Final Version<\/title><\/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=Playfair+Display:wght@400;700;900&family=Lato:wght@300;400;700&family=Montserrat:wght@400;600;700;800&family=Cormorant+Garamond:wght@300;400;600;700&display=swap\" rel=\"stylesheet\">\n<style>\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}<\/p>\n<p>body {\n font-family: 'Lato', sans-serif;\n background: #f8f9fa;\n overflow-x: hidden;\n}<\/p>\n<p>\/* Restart Animation Button *\/\n.restart-button {\n position: fixed;\n bottom: 30px;\n right: 30px;\n background: #b8860b;\n color: white;\n border: none;\n padding: 15px 30px;\n border-radius: 50px;\n font-family: 'Montserrat', sans-serif;\n font-weight: 600;\n font-size: 1rem;\n cursor: pointer;\n box-shadow: 0 5px 20px rgba(184, 134, 11, 0.3);\n transition: all 0.3s ease;\n z-index: 1000;\n}<\/p>\n<p>.restart-button:hover {\n background: #9a7209;\n transform: translateY(-2px);\n box-shadow: 0 8px 30px rgba(184, 134, 11, 0.4);\n}<\/p>\n<p>.restart-button:active {\n transform: translateY(0);\n}<\/p>\n<p>\/* VARIANT 1 *\/\n.quote-section-wrapper-v1 {\n width: 100vw;\n position: relative;\n left: 50%;\n right: 50%;\n margin-left: -50vw;\n margin-right: -50vw;\n background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);\n overflow: hidden;\n margin-bottom: 100px;\n}<\/p>\n<p>.quote-section-v1 {\n padding: 80px 0;\n position: relative;\n}<\/p>\n<p>.quote-container-v1 {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 40px;\n position: relative;\n}<\/p>\n<p>.quote-content-v1 {\n position: relative;\n padding: 60px 0;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 300px;\n}<\/p>\n<p>.logo-watermark-v1 {\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n width: 350px;\n height: 350px;\n background-image: url('\/wp-content\/themes\/yootheme-child\/assets\/images\/flag-logo1.svg');\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center right;\n opacity: 0.03;\n z-index: 0;\n}<\/p>\n<p>.bird-animation-v1 {\n position: absolute;\n left: 50px;\n top: 50%;\n transform: translateY(-50%);\n width: 80px;\n height: 80px;\n background-image: url('\/wp-content\/themes\/yootheme-child\/assets\/images\/Logo\/bird.svg');\n background-size: contain;\n background-repeat: no-repeat;\n filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.1));\n animation: fly-to-right 3s ease-in-out forwards;\n z-index: 3;\n}<\/p>\n<p>@keyframes fly-to-right {\n 0% {\n left: -100px;\n opacity: 0;\n transform: translateY(-50%) rotate(-10deg);\n }\n 30% {\n left: 50px;\n opacity: 1;\n transform: translateY(-50%) rotate(0deg);\n }\n 60% {\n left: 150px;\n transform: translateY(-60%) rotate(5deg);\n }\n 100% {\n left: 200px;\n transform: translateY(-50%) rotate(0deg);\n opacity: 0.8;\n }\n}<\/p>\n<p>.bird-trail-v1 {\n position: absolute;\n left: 0;\n top: 50%;\n transform: translateY(-50%);\n width: 250px;\n height: 3px;\n background: linear-gradient(90deg, transparent 0%, rgba(184, 134, 11, 0.3) 50%, transparent 100%);\n opacity: 0;\n animation: trail-appear 3s ease-in-out 0.5s forwards;\n}<\/p>\n<p>@keyframes trail-appear {\n 0% {\n opacity: 0;\n width: 0;\n }\n 100% {\n opacity: 1;\n width: 250px;\n }\n}<\/p>\n<p>.quote-reveal-v1 {\n position: relative;\n z-index: 2;\n text-align: center;\n max-width: 900px;\n opacity: 0;\n animation: reveal-quote 2s ease-out 1.5s forwards;\n}<\/p>\n<p>@keyframes reveal-quote {\n 0% {\n opacity: 0;\n transform: scale(0.9);\n filter: blur(5px);\n }\n 100% {\n opacity: 1;\n transform: scale(1);\n filter: blur(0);\n }\n}<\/p>\n<p>.quote-text-v1 {\n font-family: 'Playfair Display', serif;\n font-size: clamp(2rem, 3vw, 2.8rem);\n font-weight: 400;\n line-height: 1.5;\n color: #1a3a52;\n margin-bottom: 30px;\n position: relative;\n}<\/p>\n<p>.quote-text-v1 .golden-glow {\n color: #b8860b;\n position: relative;\n display: inline-block;\n animation: golden-pulse 3s ease-in-out infinite;\n}<\/p>\n<p>@keyframes golden-pulse {\n 0%, 100% {\n text-shadow: 0 0 5px rgba(184, 134, 11, 0.3);\n }\n 50% {\n text-shadow: 0 0 20px rgba(184, 134, 11, 0.5);\n }\n}<\/p>\n<p>.quote-author-v1 {\n opacity: 0;\n animation: fade-in-up 1s ease-out 2.5s forwards;\n}<\/p>\n<p>@keyframes fade-in-up {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>.author-dash {\n display: inline-block;\n width: 40px;\n height: 2px;\n background: #b8860b;\n margin-right: 15px;\n vertical-align: middle;\n}<\/p>\n<p>.author-name-v1 {\n font-family: 'Montserrat', sans-serif;\n font-size: 1.1rem;\n font-weight: 600;\n color: #5a6c7d;\n letter-spacing: 1px;\n}<\/p>\n<p>\/* VARIANT 2 *\/\n.quote-section-wrapper-v2 {\n width: 100vw;\n position: relative;\n left: 50%;\n right: 50%;\n margin-left: -50vw;\n margin-right: -50vw;\n background: white;\n overflow: hidden;\n margin-bottom: 100px;\n}<\/p>\n<p>.quote-section-v2 {\n padding: 100px 0;\n position: relative;\n}<\/p>\n<p>.logo-watermark-v2 {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 500px;\n height: 500px;\n background-image: url('\/wp-content\/themes\/yootheme-child\/assets\/images\/Logo\/flag-logo.svg');\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center;\n opacity: 0.02;\n z-index: 0;\n animation: subtle-rotate 60s linear infinite;\n}<\/p>\n<p>@keyframes subtle-rotate {\n from { transform: translate(-50%, -50%) rotate(0deg); }\n to { transform: translate(-50%, -50%) rotate(360deg); }\n}<\/p>\n<p>.bird-circle-v2 {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 600px;\n height: 600px;\n animation: circle-rotate 30s linear infinite;\n z-index: 1;\n pointer-events: none;\n}<\/p>\n<p>@keyframes circle-rotate {\n from { transform: translate(-50%, -50%) rotate(0deg); }\n to { transform: translate(-50%, -50%) rotate(360deg); }\n}<\/p>\n<p>.bird-v2 {\n position: absolute;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n width: 50px;\n height: 50px;\n background-image: url('\/wp-content\/themes\/yootheme-child\/assets\/images\/Logo\/bird.svg');\n background-size: contain;\n background-repeat: no-repeat;\n opacity: 0.2;\n filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));\n animation: bird-self-rotate 30s linear infinite reverse;\n}<\/p>\n<p>@keyframes bird-self-rotate {\n from { transform: translateX(-50%) rotate(0deg); }\n to { transform: translateX(-50%) rotate(-360deg); }\n}<\/p>\n<p>.decorative-lines-v2 {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow: hidden;\n z-index: 0;\n}<\/p>\n<p>.line-v2 {\n position: absolute;\n background: rgba(184, 134, 11, 0.1);\n animation: float-line 20s ease-in-out infinite;\n}<\/p>\n<p>.line-v2:nth-child(1) {\n width: 1px;\n height: 200px;\n left: 10%;\n top: 20%;\n animation-duration: 15s;\n}<\/p>\n<p>.line-v2:nth-child(2) {\n width: 200px;\n height: 1px;\n right: 10%;\n top: 70%;\n animation-duration: 25s;\n}<\/p>\n<p>.line-v2:nth-child(3) {\n width: 1px;\n height: 150px;\n right: 20%;\n bottom: 20%;\n animation-duration: 20s;\n}<\/p>\n<p>@keyframes float-line {\n 0%, 100% {\n transform: translate(0, 0) rotate(0deg);\n opacity: 0.1;\n }\n 50% {\n transform: translate(20px, -20px) rotate(5deg);\n opacity: 0.3;\n }\n}<\/p>\n<p>.quote-container-v2 {\n max-width: 1000px;\n margin: 0 auto;\n padding: 0 40px;\n position: relative;\n z-index: 2;\n}<\/p>\n<p>.quote-frame-v2 {\n position: relative;\n padding: 80px 60px;\n opacity: 0;\n animation: fade-in-scale 1.5s ease-out 0.5s forwards;\n}<\/p>\n<p>@keyframes fade-in-scale {\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}<\/p>\n<p>.top-accent-v2 {\n position: absolute;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n align-items: center;\n gap: 20px;\n}<\/p>\n<p>.accent-line {\n width: 60px;\n height: 1px;\n background: #b8860b;\n}<\/p>\n<p>.accent-dot {\n width: 8px;\n height: 8px;\n background: #b8860b;\n border-radius: 50%;\n animation: pulse-dot 2s ease-in-out infinite;\n}<\/p>\n<p>@keyframes pulse-dot {\n 0%, 100% {\n transform: scale(1);\n opacity: 1;\n }\n 50% {\n transform: scale(1.5);\n opacity: 0.6;\n }\n}<\/p>\n<p>.quote-text-v2 {\n font-family: 'Cormorant Garamond', serif;\n font-size: clamp(2.2rem, 3.5vw, 3rem);\n font-weight: 300;\n color: #1a3a52;\n line-height: 1.6;\n text-align: center;\n margin-bottom: 50px;\n letter-spacing: 0.5px;\n}<\/p>\n<p>.quote-text-v2 em {\n font-style: normal;\n font-weight: 600;\n color: #b8860b;\n position: relative;\n display: inline-block;\n animation: glow-text 3s ease-in-out infinite;\n}<\/p>\n<p>@keyframes glow-text {\n 0%, 100% {\n text-shadow: 0 0 5px rgba(184, 134, 11, 0.2);\n }\n 50% {\n text-shadow: 0 0 15px rgba(184, 134, 11, 0.4);\n }\n}<\/p>\n<p>.quote-text-v2 em::after {\n content: '';\n position: absolute;\n bottom: -3px;\n left: 0;\n width: 100%;\n height: 1px;\n background: #b8860b;\n opacity: 0.3;\n}<\/p>\n<p>.author-section-v2 {\n text-align: center;\n position: relative;\n}<\/p>\n<p>.author-section-v2::before {\n content: '';\n position: absolute;\n top: -30px;\n left: 50%;\n transform: translateX(-50%);\n width: 40px;\n height: 1px;\n background: rgba(184, 134, 11, 0.5);\n}<\/p>\n<p>.author-name-v2 {\n font-family: 'Montserrat', sans-serif;\n font-size: 0.9rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 3px;\n color: #b8860b;\n margin-bottom: 8px;\n}<\/p>\n<p>.author-title-v2 {\n font-family: 'Lato', sans-serif;\n font-size: 0.85rem;\n color: #8a8a8a;\n letter-spacing: 1px;\n}<\/p>\n<p>\/* VARIANT 3 *\/\n.quote-section-wrapper-v3 {\n width: 100vw;\n position: relative;\n left: 50%;\n right: 50%;\n margin-left: -50vw;\n margin-right: -50vw;\n background: #f5f7fa;\n overflow: hidden;\n margin-bottom: 100px;\n}<\/p>\n<p>.quote-section-v3 {\n padding: 90px 0;\n position: relative;\n}<\/p>\n<p>.geometric-pattern-v3 {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow: hidden;\n z-index: 0;\n}<\/p>\n<p>.geo-shape {\n position: absolute;\n border: 1px solid rgba(184, 134, 11, 0.1);\n}<\/p>\n<p>.geo-shape:nth-child(1) {\n width: 100px;\n height: 100px;\n border-radius: 50%;\n top: 10%;\n left: 5%;\n animation: rotate-slow 30s linear infinite;\n}<\/p>\n<p>.geo-shape:nth-child(2) {\n width: 80px;\n height: 80px;\n transform: rotate(45deg);\n bottom: 15%;\n right: 10%;\n animation: rotate-slow 25s linear infinite reverse;\n}<\/p>\n<p>.geo-shape:nth-child(3) {\n width: 120px;\n height: 120px;\n border-radius: 30%;\n top: 50%;\n right: 5%;\n animation: rotate-slow 35s linear infinite;\n}<\/p>\n<p>@keyframes rotate-slow {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}<\/p>\n<p>.logo-geometric-v3 {\n position: absolute;\n top: 20%;\n right: 10%;\n width: 150px;\n height: 150px;\n z-index: 1;\n animation: float-geometric 8s ease-in-out infinite;\n}<\/p>\n<p>@keyframes float-geometric {\n 0%, 100% {\n transform: translate(0, 0) rotate(0deg);\n }\n 25% {\n transform: translate(-20px, 10px) rotate(90deg);\n }\n 50% {\n transform: translate(0, 20px) rotate(180deg);\n }\n 75% {\n transform: translate(20px, 10px) rotate(270deg);\n }\n}<\/p>\n<p>.logo-frame-v3 {\n width: 100%;\n height: 100%;\n position: relative;\n background-image: url('\/wp-content\/themes\/yootheme-child\/assets\/images\/flag-logo1.svg');\n background-size: 60%;\n background-repeat: no-repeat;\n background-position: center;\n opacity: 0.05;\n}<\/p>\n<p>.logo-frame-v3::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border: 2px solid rgba(184, 134, 11, 0.1);\n transform: rotate(45deg);\n animation: pulse-frame 4s ease-in-out infinite;\n}<\/p>\n<p>@keyframes pulse-frame {\n 0%, 100% {\n transform: rotate(45deg) scale(1);\n opacity: 0.3;\n }\n 50% {\n transform: rotate(45deg) scale(1.1);\n opacity: 0.1;\n }\n}<\/p>\n<p>.bird-spiral-v3 {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 400px;\n height: 400px;\n animation: spiral-rotate 20s linear infinite;\n z-index: 1;\n pointer-events: none;\n}<\/p>\n<p>@keyframes spiral-rotate {\n from {\n transform: translate(-50%, -50%) rotate(0deg);\n }\n to {\n transform: translate(-50%, -50%) rotate(360deg);\n }\n}<\/p>\n<p>.bird-icon-v3 {\n position: absolute;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n width: 60px;\n height: 60px;\n background-image: url('\/wp-content\/themes\/yootheme-child\/assets\/images\/Logo\/bird.svg');\n background-size: contain;\n background-repeat: no-repeat;\n opacity: 0.15;\n filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.1));\n animation: bird-spiral-move 20s ease-in-out infinite;\n}<\/p>\n<p>@keyframes bird-spiral-move {\n 0%, 100% {\n transform: translateX(-50%) scale(1);\n }\n 25% {\n transform: translateX(-50%) scale(0.8) translateY(20px);\n }\n 50% {\n transform: translateX(-50%) scale(1.2) translateY(0);\n }\n 75% {\n transform: translateX(-50%) scale(0.9) translateY(-20px);\n }\n}<\/p>\n<p>.quote-container-v3 {\n max-width: 1100px;\n margin: 0 auto;\n padding: 0 40px;\n position: relative;\n z-index: 2;\n}<\/p>\n<p>.quote-card-v3 {\n background: white;\n padding: 70px;\n position: relative;\n box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);\n overflow: hidden;\n opacity: 0;\n transform: translateY(30px);\n animation: slide-up 1.2s ease-out 0.3s forwards;\n}<\/p>\n<p>@keyframes slide-up {\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>.corner-accent-v3 {\n position: absolute;\n width: 40px;\n height: 40px;\n}<\/p>\n<p>.corner-accent-v3::before,\n.corner-accent-v3::after {\n content: '';\n position: absolute;\n background: #b8860b;\n animation: corner-glow 3s ease-in-out infinite;\n}<\/p>\n<p>@keyframes corner-glow {\n 0%, 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.5;\n }\n}<\/p>\n<p>.corner-accent-v3.top-left {\n top: 0;\n left: 0;\n}<\/p>\n<p>.corner-accent-v3.top-left::before {\n top: 0;\n left: 0;\n width: 100%;\n height: 2px;\n}<\/p>\n<p>.corner-accent-v3.top-left::after {\n top: 0;\n left: 0;\n width: 2px;\n height: 100%;\n}<\/p>\n<p>.corner-accent-v3.bottom-right {\n bottom: 0;\n right: 0;\n}<\/p>\n<p>.corner-accent-v3.bottom-right::before {\n bottom: 0;\n right: 0;\n width: 100%;\n height: 2px;\n}<\/p>\n<p>.corner-accent-v3.bottom-right::after {\n bottom: 0;\n right: 0;\n width: 2px;\n height: 100%;\n}<\/p>\n<p>.quote-text-v3 {\n font-family: 'Playfair Display', serif;\n font-size: clamp(2rem, 3vw, 2.6rem);\n font-weight: 700;\n color: #1a3a52;\n line-height: 1.4;\n margin-bottom: 40px;\n}<\/p>\n<p>.quote-text-v3 .accent-word {\n position: relative;\n color: #b8860b;\n display: inline-block;\n animation: word-pulse 2s ease-in-out infinite;\n}<\/p>\n<p>@keyframes word-pulse {\n 0%, 100% {\n transform: scale(1);\n }\n 50% {\n transform: scale(1.05);\n }\n}<\/p>\n<p>.quote-text-v3 .accent-word::before {\n content: '';\n position: absolute;\n bottom: -5px;\n left: -5px;\n right: -5px;\n height: 15px;\n background: rgba(184, 134, 11, 0.1);\n z-index: -1;\n transform: skew(-5deg);\n}<\/p>\n<p>.author-wrapper-v3 {\n display: flex;\n align-items: center;\n gap: 20px;\n opacity: 0;\n animation: fade-in 1s ease-out 1s forwards;\n}<\/p>\n<p>@keyframes fade-in {\n to {\n opacity: 1;\n }\n}<\/p>\n<p>.author-avatar-v3 {\n width: 60px;\n height: 60px;\n background: linear-gradient(135deg, #b8860b, #ffd700);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: 'Playfair Display', serif;\n font-size: 1.5rem;\n font-weight: 700;\n color: white;\n animation: avatar-rotate 10s linear infinite;\n}<\/p>\n<p>@keyframes avatar-rotate {\n 0%, 100% {\n transform: rotate(0deg);\n }\n 50% {\n transform: rotate(10deg);\n }\n}<\/p>\n<p>.author-info-v3 {\n text-align: left;\n}<\/p>\n<p>.author-name-v3 {\n font-family: 'Montserrat', sans-serif;\n font-size: 1.1rem;\n font-weight: 700;\n color: #1a3a52;\n margin-bottom: 5px;\n}<\/p>\n<p>.author-title-v3 {\n font-family: 'Lato', sans-serif;\n font-size: 0.9rem;\n color: #6a7a8a;\n}<\/p>\n<p>\/* VARIANT 4 *\/\n.quote-section-wrapper-v4 {\n width: 100vw;\n position: relative;\n left: 50%;\n right: 50%;\n margin-left: -50vw;\n margin-right: -50vw;\n background: linear-gradient(135deg, #1a3a52 0%, #2c5f7c 50%, #1a3a52 100%);\n overflow: hidden;\n margin-bottom: 100px;\n}<\/p>\n<p>.quote-section-v4 {\n padding: 100px 0;\n position: relative;\n}<\/p>\n<p>.particles-v4 {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow: hidden;\n z-index: 0;\n}<\/p>\n<p>.particle {\n position: absolute;\n width: 4px;\n height: 4px;\n background: rgba(255, 215, 0, 0.6);\n border-radius: 50%;\n animation: float-up 15s linear infinite;\n}<\/p>\n<p>.particle:nth-child(1) { left: 10%; animation-delay: 0s; }\n.particle:nth-child(2) { left: 30%; animation-delay: 3s; }\n.particle:nth-child(3) { left: 50%; animation-delay: 6s; }\n.particle:nth-child(4) { left: 70%; animation-delay: 9s; }\n.particle:nth-child(5) { left: 90%; animation-delay: 12s; }<\/p>\n<p>@keyframes float-up {\n 0% {\n bottom: -10px;\n opacity: 0;\n }\n 10% {\n opacity: 1;\n }\n 90% {\n opacity: 1;\n }\n 100% {\n bottom: 100%;\n opacity: 0;\n }\n}<\/p>\n<p>.bird-light-trail-v4 {\n position: absolute;\n top: 20%;\n left: -100px;\n z-index: 2;\n animation: fly-across 15s ease-in-out infinite;\n}<\/p>\n<p>@keyframes fly-across {\n 0% {\n left: -100px;\n opacity: 0;\n }\n 10% {\n opacity: 1;\n }\n 90% {\n opacity: 1;\n }\n 100% {\n left: calc(100% + 100px);\n opacity: 0;\n }\n}<\/p>\n<p>.light-bird-v4 {\n width: 70px;\n height: 70px;\n background-image: url('\/wp-content\/themes\/yootheme-child\/assets\/images\/Logo\/bird.svg');\n background-size: contain;\n background-repeat: no-repeat;\n filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(255, 215, 0, 0.8));\n position: relative;\n z-index: 2;\n}<\/p>\n<p>.trail-light {\n position: absolute;\n top: 50%;\n left: -200px;\n transform: translateY(-50%);\n width: 200px;\n height: 2px;\n background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.8), rgba(255, 215, 0, 0.4), transparent);\n filter: blur(2px);\n animation: trail-fade 15s ease-in-out infinite;\n}<\/p>\n<p>@keyframes trail-fade {\n 0%, 10% {\n opacity: 0;\n }\n 20%, 80% {\n opacity: 1;\n }\n 90%, 100% {\n opacity: 0;\n }\n}<\/p>\n<p>.logo-animated-v4 {\n position: absolute;\n bottom: 10%;\n right: 5%;\n width: 120px;\n height: 120px;\n z-index: 1;\n perspective: 1000px;\n}<\/p>\n<p>.logo-3d-v4 {\n width: 100%;\n height: 100%;\n background-image: url('\/wp-content\/themes\/yootheme-child\/assets\/images\/Logo\/flag-logo.svg');\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center;\n opacity: 0.1;\n filter: brightness(0) invert(1);\n transform-style: preserve-3d;\n animation: logo-3d-rotate 20s linear infinite;\n}<\/p>\n<p>@keyframes logo-3d-rotate {\n 0% {\n transform: rotateY(0deg) rotateX(0deg);\n }\n 25% {\n transform: rotateY(90deg) rotateX(10deg);\n }\n 50% {\n transform: rotateY(180deg) rotateX(-10deg);\n }\n 75% {\n transform: rotateY(270deg) rotateX(10deg);\n }\n 100% {\n transform: rotateY(360deg) rotateX(0deg);\n }\n}<\/p>\n<p>.quote-container-v4 {\n max-width: 900px;\n margin: 0 auto;\n padding: 0 40px;\n position: relative;\n z-index: 3;\n}<\/p>\n<p>.quote-glass-v4 {\n background: rgba(255, 255, 255, 0.05);\n backdrop-filter: blur(20px);\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 20px;\n padding: 80px 60px;\n position: relative;\n overflow: hidden;\n opacity: 0;\n transform: translateY(50px);\n animation: glass-appear 1.5s ease-out 0.5s forwards;\n}<\/p>\n<p>@keyframes glass-appear {\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>.golden-frame-v4 {\n position: absolute;\n top: 20px;\n left: 20px;\n right: 20px;\n bottom: 20px;\n border: 1px solid rgba(255, 215, 0, 0.3);\n border-radius: 15px;\n pointer-events: none;\n}<\/p>\n<p>.golden-frame-v4::before {\n content: '';\n position: absolute;\n top: -1px;\n left: -1px;\n right: -1px;\n bottom: -1px;\n background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.5), transparent);\n border-radius: 15px;\n animation: frame-glow 4s linear infinite;\n}<\/p>\n<p>@keyframes frame-glow {\n 0% { transform: translateX(-100%); }\n 100% { transform: translateX(100%); }\n}<\/p>\n<p>.quote-marks-v4 {\n font-family: 'Playfair Display', serif;\n font-size: 4rem;\n color: rgba(255, 215, 0, 0.2);\n position: absolute;\n top: 30px;\n left: 30px;\n animation: quote-pulse 3s ease-in-out infinite;\n}<\/p>\n<p>@keyframes quote-pulse {\n 0%, 100% {\n opacity: 0.2;\n transform: scale(1);\n }\n 50% {\n opacity: 0.4;\n transform: scale(1.1);\n }\n}<\/p>\n<p>.quote-text-v4 {\n font-family: 'Playfair Display', serif;\n font-size: clamp(2rem, 3vw, 2.8rem);\n font-weight: 400;\n color: white;\n line-height: 1.6;\n text-align: center;\n margin-bottom: 50px;\n text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);\n}<\/p>\n<p>.quote-text-v4 .golden {\n color: #ffd700;\n font-weight: 700;\n display: inline-block;\n animation: golden-shine 3s ease-in-out infinite;\n}<\/p>\n<p>@keyframes golden-shine {\n 0%, 100% {\n text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);\n transform: scale(1);\n }\n 50% {\n text-shadow: 0 0 30px rgba(255, 215, 0, 0.8);\n transform: scale(1.05);\n }\n}<\/p>\n<p>.author-glow-v4 {\n text-align: center;\n position: relative;\n opacity: 0;\n animation: author-fade-in 1s ease-out 1.5s forwards;\n}<\/p>\n<p>@keyframes author-fade-in {\n to {\n opacity: 1;\n }\n}<\/p>\n<p>.author-glow-v4::before {\n content: '';\n position: absolute;\n top: -30px;\n left: 50%;\n transform: translateX(-50%);\n width: 100px;\n height: 1px;\n background: linear-gradient(90deg, transparent, #ffd700, transparent);\n}<\/p>\n<p>.author-name-v4 {\n font-family: 'Montserrat', sans-serif;\n font-size: 1.2rem;\n font-weight: 600;\n color: #ffd700;\n text-transform: uppercase;\n letter-spacing: 2px;\n margin-bottom: 10px;\n text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);\n}<\/p>\n<p>.author-title-v4 {\n font-family: 'Lato', sans-serif;\n font-size: 1rem;\n color: rgba(255, 255, 255, 0.7);\n letter-spacing: 1px;\n}<\/p>\n<p>.variant-title {\n text-align: center;\n font-size: 2.5rem;\n font-weight: 800;\n margin-bottom: 20px;\n font-family: 'Montserrat', sans-serif;\n color: #1a3a52;\n}<\/p>\n<p>.divider {\n height: 1px;\n background: linear-gradient(90deg, transparent, #b8860b, transparent);\n margin: 80px auto;\n max-width: 200px;\n}<\/p>\n<p>\/* Responsive Design *\/\n@media (max-width: 968px) {\n .quote-section-v1,\n .quote-section-v2,\n .quote-section-v3,\n .quote-section-v4 {\n padding: 60px 0;\n }<\/p>\n<p> .quote-frame-v2,\n .quote-card-v3,\n .quote-glass-v4 {\n padding: 50px 40px;\n }<\/p>\n<p> .quote-text-v1,\n .quote-text-v2,\n .quote-text-v3,\n .quote-text-v4 {\n font-size: clamp(1.5rem, 4vw, 2.5rem);\n }<\/p>\n<p> .bird-animation-v1 {\n width: 60px;\n height: 60px;\n }<\/p>\n<p> .logo-watermark-v1,\n .logo-watermark-v2 {\n width: 250px;\n height: 250px;\n }<\/p>\n<p> .bird-circle-v2 {\n width: 400px;\n height: 400px;\n }<\/p>\n<p> .logo-geometric-v3 {\n width: 100px;\n height: 100px;\n }\n}<\/p>\n<p>@media (max-width: 640px) {\n .restart-button {\n bottom: 20px;\n right: 20px;\n padding: 12px 24px;\n font-size: 0.9rem;\n }<\/p>\n<p> .quote-container-v1,\n .quote-container-v2,\n .quote-container-v3,\n .quote-container-v4 {\n padding: 0 20px;\n }<\/p>\n<p> .quote-frame-v2,\n .quote-card-v3,\n .quote-glass-v4 {\n padding: 40px 30px;\n }<\/p>\n<p> .bird-animation-v1 {\n left: 20px;\n }<\/p>\n<p> @keyframes fly-to-right {\n 0% {\n left: -50px;\n opacity: 0;\n transform: translateY(-50%) rotate(-10deg);\n }\n 30% {\n left: 20px;\n opacity: 1;\n transform: translateY(-50%) rotate(0deg);\n }\n 60% {\n left: 60px;\n transform: translateY(-60%) rotate(5deg);\n }\n 100% {\n left: 100px;\n transform: translateY(-50%) rotate(0deg);\n opacity: 0.8;\n }\n }<\/p>\n<p> .bird-circle-v2 {\n width: 300px;\n height: 300px;\n }<\/p>\n<p> .bird-v2 {\n width: 40px;\n height: 40px;\n }<\/p>\n<p> .bird-spiral-v3 {\n width: 300px;\n height: 300px;\n }<\/p>\n<p> .bird-icon-v3 {\n width: 40px;\n height: 40px;\n }<\/p>\n<p> .logo-geometric-v3 {\n display: none;\n }<\/p>\n<p> .bird-light-trail-v4 {\n top: 10%;\n }<\/p>\n<p> .light-bird-v4 {\n width: 50px;\n height: 50px;\n }<\/p>\n<p> .logo-animated-v4 {\n width: 80px;\n height: 80px;\n }<\/p>\n<p> .author-wrapper-v3 {\n flex-direction: column;\n text-align: center;\n }<\/p>\n<p> .author-info-v3 {\n text-align: center;\n }<\/p>\n<p> .side-accent-v3 {\n display: none;\n }\n}\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<p><button class=\"restart-button\" onclick=\"restartAnimations()\">Restart Animations<\/button><\/p>\n<p><\/p>\n<h1 class=\"variant-title\">Variant 1 - Flying Bird Opening<\/h1>\n<div class=\"quote-section-wrapper-v1\">\n<section class=\"quote-section-v1\">\n<div class=\"quote-container-v1\">\n<div class=\"quote-content-v1\">\n<div class=\"logo-watermark-v1\"><\/div>\n<div class=\"bird-animation-v1\"><\/div>\n<div class=\"bird-trail-v1\"><\/div>\n<div class=\"quote-reveal-v1\">\n<h2 class=\"quote-text-v1\">\n We're not just playing a game.<br \/>\n <span class=\"golden-glow\">We're building the future.<\/span><br \/>\n <\/h2>\n<div class=\"quote-author-v1\">\n <span class=\"author-dash\"><\/span><br \/>\n <span class=\"author-name-v1\">Salim Almazaini, Founder & President, BIFA & BIFA+<\/span>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<\/div>\n<div class=\"divider\"><\/div>\n<p><\/p>\n<h1 class=\"variant-title\">Variant 2 - Minimalist Elegance<\/h1>\n<div class=\"quote-section-wrapper-v2\">\n<section class=\"quote-section-v2\">\n<div class=\"decorative-lines-v2\">\n<div class=\"line-v2\"><\/div>\n<div class=\"line-v2\"><\/div>\n<div class=\"line-v2\"><\/div>\n<\/p><\/div>\n<div class=\"logo-watermark-v2\"><\/div>\n<div class=\"bird-circle-v2\">\n<div class=\"bird-v2\"><\/div>\n<\/p><\/div>\n<div class=\"quote-container-v2\">\n<div class=\"quote-frame-v2\">\n<div class=\"top-accent-v2\">\n<div class=\"accent-line\"><\/div>\n<div class=\"accent-dot\"><\/div>\n<div class=\"accent-line\"><\/div>\n<\/p><\/div>\n<h2 class=\"quote-text-v2\">\n We're not just playing a game. <em>We're building the future.<\/em><br \/>\n <\/h2>\n<div class=\"author-section-v2\">\n<p class=\"author-name-v2\">Salim Almazaini<\/p>\n<p class=\"author-title-v2\">\u0938\u0902\u0938\u094d\u0925\u093e\u092a\u0915 \u0914\u0930 \u0905\u0927\u094d\u092f\u0915\u094d\u0937, BIFA \u0914\u0930 BIFA+<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<\/div>\n<div class=\"divider\"><\/div>\n<p><\/p>\n<h1 class=\"variant-title\">Variant 3 - Geometric Modern<\/h1>\n<div class=\"quote-section-wrapper-v3\">\n<section class=\"quote-section-v3\">\n<div class=\"geometric-pattern-v3\">\n<div class=\"geo-shape\"><\/div>\n<div class=\"geo-shape\"><\/div>\n<div class=\"geo-shape\"><\/div>\n<\/p><\/div>\n<div class=\"logo-geometric-v3\">\n<div class=\"logo-frame-v3\"><\/div>\n<\/p><\/div>\n<div class=\"bird-spiral-v3\">\n<div class=\"bird-icon-v3\"><\/div>\n<\/p><\/div>\n<div class=\"quote-container-v3\">\n<div class=\"quote-card-v3\">\n<div class=\"corner-accent-v3 top-left\"><\/div>\n<div class=\"corner-accent-v3 bottom-right\"><\/div>\n<h2 class=\"quote-text-v3\">\n We're not just playing a game.<br \/>\n We're building the <span class=\"accent-word\">future<\/span>.<br \/>\n <\/h2>\n<div class=\"author-wrapper-v3\">\n<div class=\"author-avatar-v3\">SA<\/div>\n<div class=\"author-info-v3\">\n<p class=\"author-name-v3\">Salim Almazaini<\/p>\n<p class=\"author-title-v3\">\u0938\u0902\u0938\u094d\u0925\u093e\u092a\u0915 \u0914\u0930 \u0905\u0927\u094d\u092f\u0915\u094d\u0937, BIFA \u0914\u0930 BIFA+<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<\/div>\n<div class=\"divider\"><\/div>\n<p><\/p>\n<h1 class=\"variant-title\">Variant 4 - Premium Gradient<\/h1>\n<div class=\"quote-section-wrapper-v4\">\n<section class=\"quote-section-v4\">\n<div class=\"particles-v4\">\n<div class=\"particle\"><\/div>\n<div class=\"particle\"><\/div>\n<div class=\"particle\"><\/div>\n<div class=\"particle\"><\/div>\n<div class=\"particle\"><\/div>\n<\/p><\/div>\n<div class=\"bird-light-trail-v4\">\n<div class=\"light-bird-v4\"><\/div>\n<div class=\"trail-light\"><\/div>\n<\/p><\/div>\n<div class=\"logo-animated-v4\">\n<div class=\"logo-3d-v4\"><\/div>\n<\/p><\/div>\n<div class=\"quote-container-v4\">\n<div class=\"quote-glass-v4\">\n<div class=\"golden-frame-v4\"><\/div>\n<p> <span class=\"quote-marks-v4\">\"<\/span><\/p>\n<h2 class=\"quote-text-v4\">\n We're not just playing a game.<br \/>\n We're building the <span class=\"golden\">future<\/span>.<br \/>\n <\/h2>\n<div class=\"author-glow-v4\">\n<p class=\"author-name-v4\">Salim Almazaini<\/p>\n<p class=\"author-title-v4\">\u0938\u0902\u0938\u094d\u0925\u093e\u092a\u0915 \u0914\u0930 \u0905\u0927\u094d\u092f\u0915\u094d\u0937, BIFA \u0914\u0930 BIFA+<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<\/div>\n<p><script>\nfunction restartAnimations() {\n const allAnimatedElements = document.querySelectorAll('*');<\/p>\n<p> allAnimatedElements.forEach(element => {\n const animations = element.getAnimations();\n animations.forEach(animation => {\n animation.cancel();\n animation.play();\n });\n });<\/p>\n<p> const button = document.querySelector('.restart-button');\n button.textContent = 'Restarting...';\n button.style.transform = 'scale(0.95)';<\/p>\n<p> setTimeout(() => {\n button.textContent = 'Restart Animations';\n button.style.transform = 'scale(1)';\n }, 500);\n}<\/p>\n<p>document.addEventListener('DOMContentLoaded', function() {\n const observerOptions = {\n threshold: 0.3,\n rootMargin: '0px 0px -50px 0px'\n };<\/p>\n<p> const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n if (entry.target.classList.contains('quote-section-v1')) {\n const bird = entry.target.querySelector('.bird-animation-v1');\n if (bird) {\n bird.style.animationPlayState = 'running';\n }\n }\n observer.unobserve(entry.target);\n }\n });\n }, observerOptions);<\/p>\n<p> document.querySelectorAll('[class*=\"quote-section-v\"]').forEach(section => {\n observer.observe(section);\n });<\/p>\n<p> document.querySelectorAll('[class*=\"quote-text\"]').forEach(quote => {\n quote.addEventListener('mouseenter', function() {\n this.style.transition = 'transform 0.3s ease';\n this.style.transform = 'scale(1.02)';\n });<\/p>\n<p> quote.addEventListener('mouseleave', function() {\n this.style.transform = 'scale(1)';\n });\n });<\/p>\n<p> let ticking = false;\n function updateParallax() {\n const scrolled = window.pageYOffset;<\/p>\n<p> document.querySelectorAll('.line-v2').forEach((line, index) => {\n const speed = 0.5 + (index * 0.1);\n line.style.transform = `translateY(${scrolled * speed}px)`;\n });<\/p>\n<p> document.querySelectorAll('.geo-shape').forEach((shape, index) => {\n const speed = 0.3 + (index * 0.1);\n shape.style.transform = `translateY(${scrolled * speed}px) rotate(${scrolled * 0.1}deg)`;\n });<\/p>\n<p> ticking = false;\n }<\/p>\n<p> function requestTick() {\n if (!ticking) {\n window.requestAnimationFrame(updateParallax);\n ticking = true;\n }\n }<\/p>\n<p> window.addEventListener('scroll', requestTick);<\/p>\n<p> const glassCard = document.querySelector('.quote-glass-v4');\n if (glassCard) {\n glassCard.addEventListener('mousemove', (e) => {\n const rect = glassCard.getBoundingClientRect();\n const x = ((e.clientX - rect.left) \/ rect.width - 0.5) * 2;\n const y = ((e.clientY - rect.top) \/ rect.height - 0.5) * 2;<\/p>\n<p> glassCard.style.transform = `perspective(1000px) rotateY(${x * 5}deg) rotateX(${-y * 5}deg)`;\n });<\/p>\n<p> glassCard.addEventListener('mouseleave', () => {\n glassCard.style.transform = 'perspective(1000px) rotateY(0deg) rotateX(0deg)';\n });\n }<\/p>\n<p> const quoteReveal = document.querySelector('.quote-reveal-v1');\n if (quoteReveal) {\n const text = quoteReveal.querySelector('.quote-text-v1');\n if (text) {\n text.style.opacity = '0';<\/p>\n<p> setTimeout(() => {\n text.style.opacity = '1';\n text.style.transition = 'opacity 2s ease-out';\n }, 1500);\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 - 3 Design Variants<\/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=Playfair+Display:wght@400;700;900&family=Lato:wght@300;400;700&family=Montserrat:wght@400;600;700;800&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: 'Lato', sans-serif !important;\n background: #d7e9f7;\n overflow-x: hidden;\n position: relative;\n}<\/p>\n<p>\/* Typography *\/\nh1, h2, h3, h4, h5, h6 {\n font-family: 'Playfair Display', serif !important;\n}<\/p>\n<p>p, span, a, button, div {\n font-family: 'Lato', sans-serif !important;\n}<\/p>\n<p>\/* ===== \u0412\u0410\u0420\u0418\u0410\u041d\u0422 1 - \u041e\u0420\u0418\u0413\u0418\u041d\u0410\u041b\u042c\u041d\u042b\u0419 ===== *\/\n.president-section-wrapper-v1 {\n width: 100vw;\n position: relative;\n left: 50%;\n right: 50%;\n margin-left: -50vw;\n margin-right: -50vw;\n background: #d7e9f7;\n overflow: hidden;\n max-width: 100vw;\n margin-bottom: 100px;\n}<\/p>\n<p>.president-section-v1 {\n padding: 80px 0;\n background: #d7e9f7;\n position: relative;\n}<\/p>\n<p>\/* \u041d\u0435\u043e\u043d\u043e\u0432\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0430 \u0444\u043e\u043d\u0435 *\/\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}<\/p>\n<p>.neon-circle {\n position: absolute;\n border-radius: 50%;\n filter: blur(80px);\n animation: 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(184, 134, 11, 0.2);\n top: 10%;\n left: -150px;\n animation-duration: 25s;\n}<\/p>\n<p>.neon-circle:nth-child(2) {\n width: 400px;\n height: 400px;\n background: rgba(255, 215, 0, 0.15);\n bottom: 10%;\n right: -200px;\n animation-duration: 30s;\n animation-delay: 5s;\n}<\/p>\n<p>.neon-circle:nth-child(3) {\n width: 250px;\n height: 250px;\n background: rgba(30, 144, 255, 0.2);\n top: 50%;\n left: 50%;\n animation-duration: 20s;\n animation-delay: 10s;\n}<\/p>\n<p>@keyframes float-neon {\n 0%, 100% {\n transform: translate(0, 0) scale(1);\n }\n 33% {\n transform: translate(100px, -50px) scale(1.2);\n }\n 66% {\n transform: translate(-50px, 100px) scale(0.8);\n }\n}<\/p>\n<p>\/* \u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0437\u043e\u043b\u043e\u0442\u044b\u0435 \u043b\u0438\u043d\u0438\u0438 *\/\n.neon-line {\n position: absolute;\n height: 2px;\n background: linear-gradient(90deg, transparent, rgba(184, 134, 11, 0.6), transparent);\n animation: move-line 10s linear infinite;\n}<\/p>\n<p>.neon-line:nth-child(4) {\n top: 20%;\n width: 200px;\n animation-duration: 8s;\n}<\/p>\n<p>.neon-line:nth-child(5) {\n bottom: 30%;\n width: 150px;\n animation-duration: 12s;\n animation-delay: 3s;\n}<\/p>\n<p>@keyframes move-line {\n 0% {\n left: -200px;\n }\n 100% {\n left: 100%;\n }\n}<\/p>\n<p>\/* \u0421\u0432\u0435\u0442\u044f\u0449\u0438\u0435\u0441\u044f \u0442\u043e\u0447\u043a\u0438 *\/\n.glow-dot {\n position: absolute;\n width: 6px;\n height: 6px;\n background: rgba(255, 215, 0, 0.8);\n border-radius: 50%;\n box-shadow: 0 0 10px rgba(255, 215, 0, 0.8);\n animation: 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 top: 70%;\n left: 15%;\n animation-delay: 1s;\n}<\/p>\n<p>.glow-dot:nth-child(8) {\n bottom: 25%;\n right: 20%;\n animation-delay: 2s;\n}<\/p>\n<p>@keyframes 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>.president-container-v1 {\n max-width: 1400px;\n margin: 0 auto;\n padding: 0 5%;\n display: grid;\n grid-template-columns: 360px 1fr;\n gap: 80px;\n align-items: start;\n position: relative;\n z-index: 1;\n}<\/p>\n<p>\/* President Image Column *\/\n.president-image-column {\n position: relative;\n animation: fadeInLeft 1s ease-out;\n}<\/p>\n<p>.president-photo {\n width: 100%;\n max-width: 360px;\n height: 450px;\n border-radius: 30px;\n box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);\n overflow: hidden;\n position: relative;\n background: white;\n border: 3px solid rgba(255, 255, 255, 0.8);\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n}<\/p>\n<p>.president-photo::before {\n content: '';\n position: absolute;\n top: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);\n transform: rotate(45deg);\n transition: all 0.6s ease;\n z-index: 1;\n}<\/p>\n<p>.president-photo:hover::before {\n animation: shine 0.6s ease;\n}<\/p>\n<p>@keyframes shine {\n 0% { transform: rotate(45deg) translateY(-100%); }\n 100% { transform: rotate(45deg) translateY(100%); }\n}<\/p>\n<p>.president-photo img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.5s ease;\n position: relative;\n z-index: 0;\n}<\/p>\n<p>.president-photo:hover img {\n transform: scale(1.05);\n}<\/p>\n<p>\/* President Info *\/\n.president-info {\n animation: fadeInRight 1s ease-out;\n position: relative;\n}<\/p>\n<p>.president-title {\n font-size: 2rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 4px;\n margin-bottom: 20px;\n font-family: 'Playfair Display', serif !important;\n position: relative;\n display: inline-block;\n cursor: pointer;\n text-decoration: none;\n transition: all 0.3s ease;\n}<\/p>\n<p>.president-title span {\n background: linear-gradient(135deg, #b8860b 0%, #ffd700 50%, #b8860b 100%);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n display: inline-block;\n}<\/p>\n<p>.president-title:hover span {\n transform: translateY(-2px);\n filter: brightness(1.2);\n}<\/p>\n<p>.president-title::after {\n content: '';\n position: absolute;\n bottom: -5px;\n left: 0;\n width: 100%;\n height: 3px;\n background: linear-gradient(90deg, #ffd700 0%, transparent 100%);\n transform: scaleX(0);\n transform-origin: left;\n transition: transform 0.4s ease;\n}<\/p>\n<p>.president-title:hover::after {\n transform: scaleX(1);\n}<\/p>\n<p>.president-name {\n font-size: clamp(2.5rem, 4vw, 3.5rem);\n font-weight: 900;\n color: #1a3a52;\n margin-bottom: 40px;\n line-height: 1.1;\n text-shadow: 2px 2px 4px rgba(0,0,0,0.05);\n font-family: 'Playfair Display', serif !important;\n cursor: pointer;\n text-decoration: none;\n display: block;\n transition: all 0.3s ease;\n}<\/p>\n<p>.president-name:hover {\n color: #b8860b;\n transform: translateX(5px);\n}<\/p>\n<p>.president-description {\n font-size: 1.1rem;\n line-height: 1.9;\n color: #5a6c7d;\n margin-bottom: 50px;\n font-family: 'Lato', sans-serif !important;\n}<\/p>\n<p>.president-description p {\n margin-bottom: 0;\n font-family: 'Lato', sans-serif !important;\n}<\/p>\n<p>.president-description .highlight {\n color: #b8860b;\n font-weight: 600;\n}<\/p>\n<p>\/* Logo and buttons section *\/\n.action-wrapper {\n display: flex;\n align-items: center;\n gap: 40px;\n margin-top: 30px;\n justify-content: flex-start;\n}<\/p>\n<p>\/* BIFA Logo - \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 *\/\n.bifa-logo-wrapper {\n position: relative;\n width: 90px;\n height: 90px;\n flex-shrink: 0;\n margin-left: 20px;\n}<\/p>\n<p>.bifa-logo-bg {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 110px;\n height: 110px;\n background: radial-gradient(circle, rgba(184, 134, 11, 0.06) 0%, transparent 60%);\n border-radius: 50%;\n animation: pulse 4s ease-in-out infinite;\n}<\/p>\n<p>@keyframes pulse {\n 0%, 100% {\n transform: translate(-50%, -50%) scale(1);\n opacity: 0.2;\n }\n 50% {\n transform: translate(-50%, -50%) scale(1.05);\n opacity: 0.4;\n }\n}<\/p>\n<p>.bifa-logo-img {\n width: 90px;\n height: 90px;\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 5px 10px rgba(0, 0, 0, 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);\n filter: drop-shadow(0 8px 20px rgba(184, 134, 11, 0.3));\n}<\/p>\n<p>\/* Action buttons *\/\n.action-buttons {\n display: flex;\n gap: 20px;\n}<\/p>\n<p>.btn-modern {\n padding: 15px 35px;\n text-decoration: none;\n font-size: 1.1rem;\n font-weight: 600;\n border-radius: 30px;\n display: inline-flex;\n align-items: center;\n gap: 10px;\n transition: all 0.3s ease;\n position: relative;\n overflow: hidden;\n font-family: 'Lato', sans-serif !important;\n white-space: nowrap;\n}<\/p>\n<p>.learn-more-btn {\n background: linear-gradient(135deg, #1e90ff 0%, #4169e1 100%);\n color: white;\n border: none;\n box-shadow: 0 6px 20px rgba(30, 144, 255, 0.35);\n}<\/p>\n<p>.learn-more-btn::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, 215, 0, 0.2), transparent);\n transition: left 0.6s ease;\n}<\/p>\n<p>.learn-more-btn:hover::before {\n left: 100%;\n}<\/p>\n<p>.learn-more-btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 8px 30px rgba(30, 144, 255, 0.45);\n background: linear-gradient(135deg, #4169e1 0%, #1e90ff 100%);\n}<\/p>\n<p>.about-btn {\n background: transparent;\n color: #b8860b;\n border: 2px solid #b8860b;\n}<\/p>\n<p>.about-btn:hover {\n background: #b8860b;\n color: white;\n transform: translateY(-2px);\n box-shadow: 0 10px 25px rgba(184, 134, 11, 0.2);\n}<\/p>\n<p>.btn-icon {\n width: 20px;\n height: 20px;\n transition: transform 0.3s ease;\n}<\/p>\n<p>.btn-modern:hover .btn-icon {\n transform: translateX(5px);\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>\/* ===== \u0412\u0410\u0420\u0418\u0410\u041d\u0422 2 - \u041a\u0410\u0420\u0422\u041e\u0427\u041d\u042b\u0419 \u0414\u0418\u0417\u0410\u0419\u041d ===== *\/\n.president-section-wrapper-v2 {\n width: 100vw;\n position: relative;\n left: 50%;\n right: 50%;\n margin-left: -50vw;\n margin-right: -50vw;\n background: linear-gradient(135deg, #e8f3ff 0%, #d7e9f7 100%);\n overflow: hidden;\n max-width: 100vw;\n margin-bottom: 100px;\n}<\/p>\n<p>.president-section-v2 {\n padding: 100px 0;\n position: relative;\n}<\/p>\n<p>.president-container-v2 {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 20px;\n position: relative;\n z-index: 1;\n}<\/p>\n<p>.president-card {\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(10px);\n border-radius: 40px;\n padding: 60px;\n box-shadow: 0 30px 80px rgba(0, 0, 0, 0.1);\n border: 2px solid rgba(184, 134, 11, 0.2);\n position: relative;\n overflow: hidden;\n animation: fadeInUp 1s ease-out;\n}<\/p>\n<p>.president-card::before {\n content: '';\n position: absolute;\n top: -50%;\n right: -50%;\n width: 200%;\n height: 200%;\n background: radial-gradient(circle, rgba(255, 215, 0, 0.05) 0%, transparent 50%);\n animation: rotate-slow 30s linear infinite;\n}<\/p>\n<p>@keyframes rotate-slow {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}<\/p>\n<p>.president-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-v2 {\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, #b8860b, #ffd700, #b8860b) border-box;\n animation: fadeInScale 1s ease-out;\n}<\/p>\n<p>@keyframes 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>.president-photo-v2 img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.6s ease;\n}<\/p>\n<p>.president-photo-v2:hover img {\n transform: scale(1.1);\n}<\/p>\n<p>.president-info-v2 {\n animation: fadeInRight 1s ease-out 0.3s both;\n}<\/p>\n<p>.president-badge {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n background: linear-gradient(135deg, rgba(184, 134, 11, 0.1) 0%, rgba(255, 215, 0, 0.1) 100%);\n padding: 12px 24px;\n border-radius: 50px;\n margin-bottom: 20px;\n}<\/p>\n<p>.badge-icon {\n width: 24px;\n height: 24px;\n fill: #b8860b;\n}<\/p>\n<p>.badge-text {\n font-family: 'Montserrat', sans-serif !important;\n font-size: 0.9rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 2px;\n color: #b8860b;\n}<\/p>\n<p>.president-name-v2 {\n font-size: 3rem;\n font-weight: 900;\n color: #1a3a52;\n margin-bottom: 30px;\n line-height: 1.1;\n font-family: 'Playfair Display', serif !important;\n}<\/p>\n<p>.president-description-v2 {\n font-size: 1.15rem;\n line-height: 1.8;\n color: #5a6c7d;\n margin-bottom: 40px;\n font-family: 'Lato', sans-serif !important;\n}<\/p>\n<p>.president-description-v2 .highlight {\n color: #b8860b;\n font-weight: 600;\n}<\/p>\n<p>.president-actions-v2 {\n display: flex;\n align-items: center;\n gap: 30px;\n}<\/p>\n<p>.btn-gold {\n background: linear-gradient(135deg, #b8860b 0%, #ffd700 100%);\n color: white;\n padding: 16px 40px;\n text-decoration: none;\n font-size: 1.1rem;\n font-weight: 600;\n border-radius: 30px;\n display: inline-flex;\n align-items: center;\n gap: 10px;\n transition: all 0.3s ease;\n box-shadow: 0 6px 25px rgba(184, 134, 11, 0.3);\n}<\/p>\n<p>.btn-gold:hover {\n transform: translateY(-3px);\n box-shadow: 0 10px 35px rgba(184, 134, 11, 0.4);\n}<\/p>\n<p>.btn-outline {\n background: transparent;\n color: #1e90ff;\n padding: 16px 40px;\n text-decoration: none;\n font-size: 1.1rem;\n font-weight: 600;\n border-radius: 30px;\n border: 2px solid #1e90ff;\n display: inline-flex;\n align-items: center;\n gap: 10px;\n transition: all 0.3s ease;\n}<\/p>\n<p>.btn-outline:hover {\n background: #1e90ff;\n color: white;\n transform: translateY(-3px);\n box-shadow: 0 10px 25px rgba(30, 144, 255, 0.3);\n}<\/p>\n<p>\/* Decorative elements *\/\n.gold-accent-v2 {\n position: absolute;\n width: 200px;\n height: 200px;\n background: radial-gradient(circle, rgba(255, 215, 0, 0.2) 0%, transparent 70%);\n border-radius: 50%;\n filter: blur(40px);\n animation: float-accent 15s ease-in-out infinite;\n}<\/p>\n<p>.gold-accent-v2:nth-child(1) {\n top: -100px;\n right: -100px;\n}<\/p>\n<p>.gold-accent-v2:nth-child(2) {\n bottom: -100px;\n left: -100px;\n animation-delay: 7s;\n}<\/p>\n<p>@keyframes float-accent {\n 0%, 100% {\n transform: translate(0, 0);\n }\n 50% {\n transform: translate(-20px, 20px);\n }\n}<\/p>\n<p>\/* ===== \u0412\u0410\u0420\u0418\u0410\u041d\u0422 3 - \u042d\u041b\u0415\u0413\u0410\u041d\u0422\u041d\u042b\u0419 \u041c\u0418\u041d\u0418\u041c\u0410\u041b\u0418\u0417\u041c ===== *\/\n.president-section-wrapper-v3 {\n width: 100vw;\n position: relative;\n left: 50%;\n right: 50%;\n margin-left: -50vw;\n margin-right: -50vw;\n background: white;\n overflow: hidden;\n max-width: 100vw;\n}<\/p>\n<p>.president-section-v3 {\n padding: 120px 0;\n position: relative;\n}<\/p>\n<p>.gold-pattern {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-image: \n radial-gradient(circle at 20% 80%, rgba(184, 134, 11, 0.03) 0%, transparent 50%),\n radial-gradient(circle at 80% 20%, rgba(255, 215, 0, 0.03) 0%, transparent 50%),\n radial-gradient(circle at 80% 80%, rgba(30, 144, 255, 0.03) 0%, transparent 50%);\n z-index: 0;\n}<\/p>\n<p>.president-container-v3 {\n max-width: 800px;\n margin: 0 auto;\n padding: 0 20px;\n text-align: center;\n position: relative;\n z-index: 1;\n}<\/p>\n<p>.president-photo-v3 {\n width: 300px;\n height: 400px;\n margin: 0 auto 50px;\n position: relative;\n animation: fadeInDown 1s ease-out;\n}<\/p>\n<p>.photo-frame {\n width: 100%;\n height: 100%;\n position: relative;\n overflow: hidden;\n border-radius: 0 50% 0 50%;\n box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);\n}<\/p>\n<p>.photo-frame::before {\n content: '';\n position: absolute;\n top: -5px;\n left: -5px;\n right: -5px;\n bottom: -5px;\n background: linear-gradient(135deg, #b8860b, #ffd700, #b8860b);\n border-radius: 0 50% 0 50%;\n z-index: -1;\n animation: gradient-rotate 8s linear infinite;\n}<\/p>\n<p>@keyframes gradient-rotate {\n 0% {\n filter: hue-rotate(0deg);\n }\n 100% {\n filter: hue-rotate(360deg);\n }\n}<\/p>\n<p>.photo-frame img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: all 0.6s ease;\n}<\/p>\n<p>.photo-frame:hover img {\n transform: scale(1.05);\n}<\/p>\n<p>.president-content-v3 {\n animation: fadeInUp 1s ease-out 0.3s both;\n}<\/p>\n<p>.title-decoration {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 20px;\n margin-bottom: 30px;\n}<\/p>\n<p>.gold-line {\n width: 60px;\n height: 3px;\n background: linear-gradient(90deg, transparent, #b8860b, transparent);\n}<\/p>\n<p>.president-title-v3 {\n font-family: 'Montserrat', sans-serif !important;\n font-size: 1rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 5px;\n color: #b8860b;\n}<\/p>\n<p>.president-name-v3 {\n font-size: 3.5rem;\n font-weight: 900;\n color: #1a3a52;\n margin-bottom: 40px;\n line-height: 1.1;\n font-family: 'Playfair Display', serif !important;\n position: relative;\n}<\/p>\n<p>.president-name-v3::after {\n content: '';\n position: absolute;\n bottom: -15px;\n left: 50%;\n transform: translateX(-50%);\n width: 100px;\n height: 4px;\n background: linear-gradient(90deg, transparent, #ffd700, transparent);\n}<\/p>\n<p>.president-description-v3 {\n font-size: 1.2rem;\n line-height: 2;\n color: #5a6c7d;\n margin-bottom: 50px;\n max-width: 700px;\n margin-left: auto;\n margin-right: auto;\n font-family: 'Lato', sans-serif !important;\n}<\/p>\n<p>.president-description-v3 .highlight {\n background: linear-gradient(135deg, #b8860b, #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n font-weight: 600;\n}<\/p>\n<p>.action-row {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 40px;\n}<\/p>\n<p>.btn-elegant {\n padding: 18px 45px;\n text-decoration: none;\n font-size: 1.1rem;\n font-weight: 600;\n border-radius: 5px;\n display: inline-flex;\n align-items: center;\n gap: 12px;\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n position: relative;\n overflow: hidden;\n text-transform: uppercase;\n letter-spacing: 1px;\n}<\/p>\n<p>.btn-primary {\n background: #1a3a52;\n color: white;\n box-shadow: 0 10px 30px rgba(26, 58, 82, 0.3);\n}<\/p>\n<p>.btn-primary::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(135deg, #b8860b, #ffd700);\n opacity: 0;\n transition: opacity 0.4s ease;\n}<\/p>\n<p>.btn-primary:hover::before {\n opacity: 1;\n}<\/p>\n<p>.btn-primary span,\n.btn-primary svg {\n position: relative;\n z-index: 1;\n}<\/p>\n<p>.btn-primary:hover {\n transform: translateY(-3px);\n box-shadow: 0 15px 40px rgba(184, 134, 11, 0.4);\n}<\/p>\n<p>.btn-secondary {\n background: transparent;\n color: #1a3a52;\n border: 3px solid #1a3a52;\n}<\/p>\n<p>.btn-secondary:hover {\n background: #1a3a52;\n color: white;\n transform: translateY(-3px);\n box-shadow: 0 15px 40px rgba(26, 58, 82, 0.3);\n}<\/p>\n<p>.logo-floating {\n position: absolute;\n top: 50px;\n right: 50px;\n width: 80px;\n height: 80px;\n opacity: 0.1;\n animation: float-logo 20s ease-in-out infinite;\n}<\/p>\n<p>@keyframes float-logo {\n 0%, 100% {\n transform: translate(0, 0) rotate(0deg);\n }\n 25% {\n transform: translate(-20px, 20px) rotate(90deg);\n }\n 50% {\n transform: translate(20px, -20px) rotate(180deg);\n }\n 75% {\n transform: translate(-20px, -20px) rotate(270deg);\n }\n}<\/p>\n<p>\/* Responsive Design *\/\n@media (max-width: 1200px) {\n .president-container-v1 {\n padding: 0 40px;\n gap: 60px;\n }<\/p>\n<p> .president-card {\n padding: 40px;\n }\n}<\/p>\n<p>@media (max-width: 968px) {\n .president-section-v1,\n .president-section-v2,\n .president-section-v3 {\n padding: 60px 0;\n }<\/p>\n<p> .president-container-v1 {\n grid-template-columns: 1fr;\n gap: 50px;\n text-align: center;\n padding: 0 30px;\n }<\/p>\n<p> .president-card-content {\n grid-template-columns: 1fr;\n text-align: center;\n }<\/p>\n<p> .president-photo-v2 {\n margin: 0 auto;\n }<\/p>\n<p> .president-actions-v2,\n .action-row {\n justify-content: center;\n }<\/p>\n<p> .president-photo {\n margin: 0 auto;\n max-width: 400px;\n height: 500px;\n }<\/p>\n<p> .president-title::after {\n left: 50%;\n transform: translateX(-50%);\n width: 60px;\n }<\/p>\n<p> .president-title:hover::after {\n transform: translateX(-50%) scaleX(1);\n }<\/p>\n<p> .president-description {\n text-align: left;\n }<\/p>\n<p> .action-wrapper {\n justify-content: center;\n flex-wrap: wrap;\n }\n}<\/p>\n<p>@media (max-width: 640px) {\n .president-container-v1,\n .president-container-v2,\n .president-container-v3 {\n padding: 0 20px;\n }<\/p>\n<p> .president-name,\n .president-name-v2,\n .president-name-v3 {\n font-size: 2rem;\n }<\/p>\n<p> .president-title {\n font-size: 1.3rem;\n letter-spacing: 2px;\n }<\/p>\n<p> .president-description,\n .president-description-v2,\n .president-description-v3 {\n font-size: 1rem;\n }<\/p>\n<p> .action-wrapper {\n flex-direction: row;\n gap: 20px;\n align-items: center;\n justify-content: center;\n }<\/p>\n<p> .action-buttons {\n flex-direction: row;\n gap: 10px;\n }<\/p>\n<p> .btn-modern {\n padding: 12px 20px;\n font-size: 0.95rem;\n }<\/p>\n<p> .bifa-logo-wrapper {\n margin-left: 10px;\n }<\/p>\n<p> .president-photo-v3 {\n width: 250px;\n height: 333px;\n }<\/p>\n<p> .president-actions-v2,\n .action-row {\n flex-direction: column;\n width: 100%;\n }<\/p>\n<p> .btn-gold,\n .btn-outline,\n .btn-elegant {\n width: 100%;\n justify-content: center;\n }\n}<\/p>\n<p>@media (max-width: 480px) {\n .president-photo {\n max-width: 100%;\n height: 400px;\n }<\/p>\n<p> .bifa-logo-wrapper {\n width: 70px;\n height: 70px;\n margin-left: 10px;\n }<\/p>\n<p> .bifa-logo-img {\n width: 70px;\n height: 70px;\n }<\/p>\n<p> .action-wrapper {\n flex-wrap: nowrap;\n }<\/p>\n<p> .btn-modern {\n padding: 10px 15px;\n font-size: 0.9rem;\n }<\/p>\n<p> .btn-modern span {\n display: none;\n }<\/p>\n<p> .btn-modern .btn-icon {\n margin: 0;\n }\n}<\/p>\n<p>\/* Title Styles *\/\n.variant-title {\n text-align: center;\n font-size: 2.5rem;\n font-weight: 800;\n margin-bottom: 20px;\n font-family: 'Montserrat', sans-serif !important;\n color: #1a3a52;\n}<\/p>\n<p>.divider {\n height: 2px;\n background: linear-gradient(90deg, transparent, #b8860b, transparent);\n margin: 80px auto;\n max-width: 200px;\n}\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<p><\/p>\n<h1 class=\"variant-title\">\u0412\u0430\u0440\u0438\u0430\u043d\u0442 1 - \u041e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0439<\/h1>\n<div class=\"president-section-wrapper-v1\">\n<section class=\"president-section-v1\">\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=\"neon-line\"><\/div>\n<div class=\"neon-line\"><\/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=\"president-container-v1\">\n <\/p>\n<div class=\"president-image-column\">\n<div class=\"president-photo\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Mr\/main-photo.jpg\" alt=\"Mr. Salim Humaid Almazaini\">\n <\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"president-info\">\n <a href=\"\/aboutus\" class=\"president-title\"><br \/>\n <span>Founder and President<\/span><br \/>\n <\/a><\/p>\n<p> <a href=\"\/aboutus\" class=\"president-name\"><br \/>\n Mr. Salim Humaid Almazaini<br \/>\n <\/a><\/p>\n<div class=\"president-description\">\n<p>\n \u090f\u0915 \u092a\u094d\u0930\u0924\u093f\u0937\u094d\u0920\u093f\u0924 <span class=\"highlight\">\u0926\u0942\u0930\u0926\u0930\u094d\u0936\u0940 \u0928\u0947\u0924\u093e<\/span> in international sports diplomacy. Through strategic innovation and unwavering commitment, Mr. Almazaini transforms global football <span class=\"highlight\">\u090f\u0915\u0924\u093e \u0914\u0930 \u0938\u0939\u092f\u094b\u0917 \u0915\u0947 \u0932\u093f\u090f \u090f\u0915 \u0936\u0915\u094d\u0924\u093f\u0936\u093e\u0932\u0940 \u0938\u0947\u0924\u0941 \u0915\u0947 \u0930\u0942\u092a \u092e\u0947\u0902<\/span> \u0930\u093e\u0937\u094d\u091f\u094d\u0930\u094b\u0902 \u0915\u0947 \u092c\u0940\u091a.\n <\/p>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"action-wrapper\">\n<div class=\"action-buttons\">\n <a href=\"\/president\" class=\"btn-modern learn-more-btn\"><br \/>\n <span>\u0914\u0930 \u0905\u0927\u093f\u0915 \u091c\u093e\u0928\u0947\u0902<\/span><br \/>\n <svg class=\"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=\"\/aboutus\" class=\"btn-modern about-btn\"><br \/>\n <span>BIFA \u0915\u0947 \u092c\u093e\u0930\u0947 \u092e\u0947\u0902<\/span><br \/>\n <svg class=\"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 16v-4M12 8h.01\"\/>\n <\/svg><br \/>\n <\/a>\n <\/div>\n<div class=\"bifa-logo-wrapper\">\n<div class=\"bifa-logo-bg\"><\/div>\n<div class=\"bifa-logo-img\" role=\"img\" aria-label=\"BIFA \u0932\u094b\u0917\u094b\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<\/div>\n<div class=\"divider\"><\/div>\n<p><\/p>\n<h1 class=\"variant-title\">\u0412\u0430\u0440\u0438\u0430\u043d\u0442 2 - \u041a\u0430\u0440\u0442\u043e\u0447\u043d\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d<\/h1>\n<div class=\"president-section-wrapper-v2\">\n<section class=\"president-section-v2\">\n<div class=\"gold-accent-v2\"><\/div>\n<div class=\"gold-accent-v2\"><\/div>\n<div class=\"president-container-v2\">\n<div class=\"president-card\">\n<div class=\"president-card-content\">\n <\/p>\n<div class=\"president-photo-v2\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Mr\/main-photo.jpg\" alt=\"Mr. Salim Humaid Almazaini\">\n <\/div>\n<p> <\/p>\n<div class=\"president-info-v2\">\n<div class=\"president-badge\">\n <svg class=\"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=\"badge-text\">\u0938\u0902\u0938\u094d\u0925\u093e\u092a\u0915 \u090f\u0935\u0902 \u0905\u0927\u094d\u092f\u0915\u094d\u0937<\/span>\n <\/div>\n<h2 class=\"president-name-v2\">Mr. Salim Humaid Almazaini<\/h2>\n<div class=\"president-description-v2\">\n<p>\n \u090f\u0915 \u092a\u094d\u0930\u0924\u093f\u0937\u094d\u0920\u093f\u0924 <span class=\"highlight\">\u0926\u0942\u0930\u0926\u0930\u094d\u0936\u0940 \u0928\u0947\u0924\u093e<\/span> in international sports diplomacy. Through strategic innovation and unwavering commitment, Mr. Almazaini transforms global football <span class=\"highlight\">\u090f\u0915\u0924\u093e \u0914\u0930 \u0938\u0939\u092f\u094b\u0917 \u0915\u0947 \u0932\u093f\u090f \u090f\u0915 \u0936\u0915\u094d\u0924\u093f\u0936\u093e\u0932\u0940 \u0938\u0947\u0924\u0941 \u0915\u0947 \u0930\u0942\u092a \u092e\u0947\u0902<\/span> \u0930\u093e\u0937\u094d\u091f\u094d\u0930\u094b\u0902 \u0915\u0947 \u092c\u0940\u091a.\n <\/p>\n<\/p><\/div>\n<div class=\"president-actions-v2\">\n <a href=\"\/president\" class=\"btn-gold\"><br \/>\n <span>\u0915\u0939\u093e\u0928\u0940 \u0916\u094b\u091c\u0947\u0902<\/span><br \/>\n <svg class=\"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=\"\/aboutus\" class=\"btn-outline\"><br \/>\n <span>BIFA \u0915\u0947 \u092c\u093e\u0930\u0947 \u092e\u0947\u0902<\/span><br \/>\n <svg class=\"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=\"BIFA \u0932\u094b\u0917\u094b\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<\/div>\n<div class=\"divider\"><\/div>\n<p><\/p>\n<h1 class=\"variant-title\">\u0412\u0430\u0440\u0438\u0430\u043d\u0442 3 - \u042d\u043b\u0435\u0433\u0430\u043d\u0442\u043d\u044b\u0439 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u0438\u0437\u043c<\/h1>\n<div class=\"president-section-wrapper-v3\">\n<section class=\"president-section-v3\">\n<div class=\"gold-pattern\"><\/div>\n<div class=\"logo-floating\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/logo_bifa.svg\" alt=\"BIFA\" style=\"width: 100%; height: 100%; opacity: 0.1;\">\n <\/div>\n<div class=\"president-container-v3\">\n <\/p>\n<div class=\"president-photo-v3\">\n<div class=\"photo-frame\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Mr\/main-photo.jpg\" alt=\"Mr. Salim Humaid Almazaini\">\n <\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"president-content-v3\">\n<div class=\"title-decoration\">\n<div class=\"gold-line\"><\/div>\n<h3 class=\"president-title-v3\">\u0938\u0902\u0938\u094d\u0925\u093e\u092a\u0915 \u090f\u0935\u0902 \u0905\u0927\u094d\u092f\u0915\u094d\u0937<\/h3>\n<div class=\"gold-line\"><\/div>\n<\/p><\/div>\n<h1 class=\"president-name-v3\">Mr. Salim Humaid Almazaini<\/h1>\n<div class=\"president-description-v3\">\n<p>\n \u090f\u0915 \u092a\u094d\u0930\u0924\u093f\u0937\u094d\u0920\u093f\u0924 <span class=\"highlight\">\u0926\u0942\u0930\u0926\u0930\u094d\u0936\u0940 \u0928\u0947\u0924\u093e<\/span> in international sports diplomacy. Through strategic innovation and unwavering commitment, Mr. Almazaini transforms global football <span class=\"highlight\">\u090f\u0915\u0924\u093e \u0914\u0930 \u0938\u0939\u092f\u094b\u0917 \u0915\u0947 \u0932\u093f\u090f \u090f\u0915 \u0936\u0915\u094d\u0924\u093f\u0936\u093e\u0932\u0940 \u0938\u0947\u0924\u0941 \u0915\u0947 \u0930\u0942\u092a \u092e\u0947\u0902<\/span> \u0930\u093e\u0937\u094d\u091f\u094d\u0930\u094b\u0902 \u0915\u0947 \u092c\u0940\u091a.\n <\/p>\n<\/p><\/div>\n<div class=\"action-row\">\n <a href=\"\/president\" class=\"btn-elegant btn-primary\"><br \/>\n <span>\u0914\u0930 \u0905\u0927\u093f\u0915 \u091c\u093e\u0928\u0947\u0902<\/span><br \/>\n <svg viewbox=\"0 0 24 24\" width=\"20\" height=\"20\" 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=\"\/aboutus\" class=\"btn-elegant btn-secondary\"><br \/>\n <span>BIFA \u0915\u0947 \u092c\u093e\u0930\u0947 \u092e\u0947\u0902<\/span><br \/>\n <svg viewbox=\"0 0 24 24\" width=\"20\" height=\"20\" 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 16v-4M12 8h.01\"\/>\n <\/svg><br \/>\n <\/a>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<\/div>\n<p><script>\n\/\/ Animation for all variants\ndocument.addEventListener('DOMContentLoaded', function() {\n \/\/ Smooth scroll reveal\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('[class*=\"fadeIn\"], .president-card, .president-photo-v2, .president-photo-v3').forEach(el => {\n if (el) {\n el.style.animationPlayState = 'paused';\n observer.observe(el);\n }\n });<\/p>\n<p> \/\/ Logo hover effects for all variants\n document.querySelectorAll('.bifa-logo-wrapper').forEach(logoWrapper => {\n logoWrapper.addEventListener('mouseenter', () => {\n const logo = logoWrapper.querySelector('.bifa-logo-img');\n if (logo) {\n logo.style.transform = 'scale(1.1)';\n }\n });<\/p>\n<p> logoWrapper.addEventListener('mouseleave', () => {\n const logo = logoWrapper.querySelector('.bifa-logo-img');\n if (logo) {\n logo.style.transform = 'scale(1)';\n }\n });\n });<\/p>\n<p> \/\/ Button glow effects\n document.querySelectorAll('.btn-modern, .btn-gold, .btn-outline, .btn-elegant').forEach(button => {\n button.addEventListener('mouseenter', (e) => {\n const rect = button.getBoundingClientRect();\n const x = e.clientX - rect.left;\n const y = e.clientY - rect.top;<\/p>\n<p> const glow = document.createElement('div');\n glow.style.cssText = `\n position: absolute;\n width: 100px;\n height: 100px;\n background: radial-gradient(circle, rgba(255, 215, 0, 0.2) 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(glow);\n setTimeout(() => { glow.style.opacity = '1'; }, 10);<\/p>\n<p> button.addEventListener('mouseleave', () => {\n glow.style.opacity = '0';\n setTimeout(() => glow.remove(), 300);\n }, { once: true });\n });\n });<\/p>\n<p> \/\/ Image loading animation\n document.querySelectorAll('img').forEach(img => {\n img.style.opacity = '0';\n img.style.transition = 'opacity 0.5s ease';<\/p>\n<p> if (img.complete) {\n img.style.opacity = '1';\n } else {\n img.addEventListener('load', function() {\n this.style.opacity = '1';\n });\n }\n });<\/p>\n<p> \/\/ Preload images\n function preloadImages() {\n const imageUrls = [\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> 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 President - 3 Design Variants<\/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=Playfair+Display:wght@400;700;900&family=Lato:wght@300;400;700&family=Montserrat:wght@400;600;700;800&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: 'Lato', sans-serif !important;\n background: #d7e9f7;\n overflow-x: hidden;\n position: relative;\n}<\/p>\n<p>\/* Typography *\/\nh1, h2, h3, h4, h5, h6 {\n font-family: 'Playfair Display', serif !important;\n}<\/p>\n<p>p, span, a, button, div {\n font-family: 'Lato', sans-serif !important;\n}<\/p>\n<p>\/* ===== \u0412\u0410\u0420\u0418\u0410\u041d\u0422 1 - \u041e\u0420\u0418\u0413\u0418\u041d\u0410\u041b\u042c\u041d\u042b\u0419 ===== *\/\n.president-section-wrapper-v1 {\n width: 100vw;\n position: relative;\n left: 50%;\n right: 50%;\n margin-left: -50vw;\n margin-right: -50vw;\n background: #d7e9f7;\n overflow: hidden;\n max-width: 100vw;\n margin-bottom: 100px;\n}<\/p>\n<p>.president-section-v1 {\n padding: 80px 0;\n background: #d7e9f7;\n position: relative;\n}<\/p>\n<p>\/* \u041d\u0435\u043e\u043d\u043e\u0432\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0430 \u0444\u043e\u043d\u0435 *\/\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}<\/p>\n<p>.neon-circle {\n position: absolute;\n border-radius: 50%;\n filter: blur(80px);\n animation: 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(184, 134, 11, 0.2);\n top: 10%;\n left: -150px;\n animation-duration: 25s;\n}<\/p>\n<p>.neon-circle:nth-child(2) {\n width: 400px;\n height: 400px;\n background: rgba(255, 215, 0, 0.15);\n bottom: 10%;\n right: -200px;\n animation-duration: 30s;\n animation-delay: 5s;\n}<\/p>\n<p>.neon-circle:nth-child(3) {\n width: 250px;\n height: 250px;\n background: rgba(30, 144, 255, 0.2);\n top: 50%;\n left: 50%;\n animation-duration: 20s;\n animation-delay: 10s;\n}<\/p>\n<p>@keyframes float-neon {\n 0%, 100% {\n transform: translate(0, 0) scale(1);\n }\n 33% {\n transform: translate(100px, -50px) scale(1.2);\n }\n 66% {\n transform: translate(-50px, 100px) scale(0.8);\n }\n}<\/p>\n<p>\/* \u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0437\u043e\u043b\u043e\u0442\u044b\u0435 \u043b\u0438\u043d\u0438\u0438 *\/\n.neon-line {\n position: absolute;\n height: 2px;\n background: linear-gradient(90deg, transparent, rgba(184, 134, 11, 0.6), transparent);\n animation: move-line 10s linear infinite;\n}<\/p>\n<p>.neon-line:nth-child(4) {\n top: 20%;\n width: 200px;\n animation-duration: 8s;\n}<\/p>\n<p>.neon-line:nth-child(5) {\n bottom: 30%;\n width: 150px;\n animation-duration: 12s;\n animation-delay: 3s;\n}<\/p>\n<p>@keyframes move-line {\n 0% {\n left: -200px;\n }\n 100% {\n left: 100%;\n }\n}<\/p>\n<p>\/* \u0421\u0432\u0435\u0442\u044f\u0449\u0438\u0435\u0441\u044f \u0442\u043e\u0447\u043a\u0438 *\/\n.glow-dot {\n position: absolute;\n width: 6px;\n height: 6px;\n background: rgba(255, 215, 0, 0.8);\n border-radius: 50%;\n box-shadow: 0 0 10px rgba(255, 215, 0, 0.8);\n animation: 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 top: 70%;\n left: 15%;\n animation-delay: 1s;\n}<\/p>\n<p>.glow-dot:nth-child(8) {\n bottom: 25%;\n right: 20%;\n animation-delay: 2s;\n}<\/p>\n<p>@keyframes 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>.president-container-v1 {\n max-width: 1400px;\n margin: 0 auto;\n padding: 0 5%;\n display: grid;\n grid-template-columns: 360px 1fr;\n gap: 80px;\n align-items: start;\n position: relative;\n z-index: 1;\n}<\/p>\n<p>\/* President Image Column *\/\n.president-image-column {\n position: relative;\n animation: fadeInLeft 1s ease-out;\n}<\/p>\n<p>.president-photo {\n width: 100%;\n max-width: 360px;\n height: 450px;\n border-radius: 30px;\n box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);\n overflow: hidden;\n position: relative;\n background: white;\n border: 3px solid rgba(255, 255, 255, 0.8);\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n}<\/p>\n<p>.president-photo::before {\n content: '';\n position: absolute;\n top: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);\n transform: rotate(45deg);\n transition: all 0.6s ease;\n z-index: 1;\n}<\/p>\n<p>.president-photo:hover::before {\n animation: shine 0.6s ease;\n}<\/p>\n<p>@keyframes shine {\n 0% { transform: rotate(45deg) translateY(-100%); }\n 100% { transform: rotate(45deg) translateY(100%); }\n}<\/p>\n<p>.president-photo img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.5s ease;\n position: relative;\n z-index: 0;\n}<\/p>\n<p>.president-photo:hover img {\n transform: scale(1.05);\n}<\/p>\n<p>\/* President Info *\/\n.president-info {\n animation: fadeInRight 1s ease-out;\n position: relative;\n}<\/p>\n<p>.president-title {\n font-size: 2rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 4px;\n margin-bottom: 20px;\n font-family: 'Playfair Display', serif !important;\n position: relative;\n display: inline-block;\n cursor: pointer;\n text-decoration: none;\n transition: all 0.3s ease;\n}<\/p>\n<p>.president-title span {\n background: linear-gradient(135deg, #b8860b 0%, #ffd700 50%, #b8860b 100%);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n display: inline-block;\n}<\/p>\n<p>.president-title:hover span {\n transform: translateY(-2px);\n filter: brightness(1.2);\n}<\/p>\n<p>.president-title::after {\n content: '';\n position: absolute;\n bottom: -5px;\n left: 0;\n width: 100%;\n height: 3px;\n background: linear-gradient(90deg, #ffd700 0%, transparent 100%);\n transform: scaleX(0);\n transform-origin: left;\n transition: transform 0.4s ease;\n}<\/p>\n<p>.president-title:hover::after {\n transform: scaleX(1);\n}<\/p>\n<p>.president-name {\n font-size: clamp(2.5rem, 4vw, 3.5rem);\n font-weight: 900;\n color: #1a3a52;\n margin-bottom: 40px;\n line-height: 1.1;\n text-shadow: 2px 2px 4px rgba(0,0,0,0.05);\n font-family: 'Playfair Display', serif !important;\n cursor: pointer;\n text-decoration: none;\n display: block;\n transition: all 0.3s ease;\n}<\/p>\n<p>.president-name:hover {\n color: #b8860b;\n transform: translateX(5px);\n}<\/p>\n<p>.president-description {\n font-size: 1.1rem;\n line-height: 1.9;\n color: #5a6c7d;\n margin-bottom: 50px;\n font-family: 'Lato', sans-serif !important;\n}<\/p>\n<p>.president-description p {\n margin-bottom: 0;\n font-family: 'Lato', sans-serif !important;\n}<\/p>\n<p>.president-description .highlight {\n color: #b8860b;\n font-weight: 600;\n}<\/p>\n<p>\/* Logo and buttons section *\/\n.action-wrapper {\n display: flex;\n align-items: center;\n gap: 40px;\n margin-top: 30px;\n justify-content: flex-start;\n}<\/p>\n<p>\/* BIFA Logo - \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 *\/\n.bifa-logo-wrapper {\n position: relative;\n width: 90px;\n height: 90px;\n flex-shrink: 0;\n margin-left: 20px;\n}<\/p>\n<p>.bifa-logo-bg {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 110px;\n height: 110px;\n background: radial-gradient(circle, rgba(184, 134, 11, 0.06) 0%, transparent 60%);\n border-radius: 50%;\n animation: pulse 4s ease-in-out infinite;\n}<\/p>\n<p>@keyframes pulse {\n 0%, 100% {\n transform: translate(-50%, -50%) scale(1);\n opacity: 0.2;\n }\n 50% {\n transform: translate(-50%, -50%) scale(1.05);\n opacity: 0.4;\n }\n}<\/p>\n<p>.bifa-logo-img {\n width: 90px;\n height: 90px;\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 5px 10px rgba(0, 0, 0, 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);\n filter: drop-shadow(0 8px 20px rgba(184, 134, 11, 0.3));\n}<\/p>\n<p>\/* Action buttons *\/\n.action-buttons {\n display: flex;\n gap: 20px;\n}<\/p>\n<p>.btn-modern {\n padding: 15px 35px;\n text-decoration: none;\n font-size: 1.1rem;\n font-weight: 600;\n border-radius: 30px;\n display: inline-flex;\n align-items: center;\n gap: 10px;\n transition: all 0.3s ease;\n position: relative;\n overflow: hidden;\n font-family: 'Lato', sans-serif !important;\n white-space: nowrap;\n}<\/p>\n<p>.learn-more-btn {\n background: linear-gradient(135deg, #1e90ff 0%, #4169e1 100%);\n color: white;\n border: none;\n box-shadow: 0 6px 20px rgba(30, 144, 255, 0.35);\n}<\/p>\n<p>.learn-more-btn::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, 215, 0, 0.2), transparent);\n transition: left 0.6s ease;\n}<\/p>\n<p>.learn-more-btn:hover::before {\n left: 100%;\n}<\/p>\n<p>.learn-more-btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 8px 30px rgba(30, 144, 255, 0.45);\n background: linear-gradient(135deg, #4169e1 0%, #1e90ff 100%);\n}<\/p>\n<p>.about-btn {\n background: transparent;\n color: #b8860b;\n border: 2px solid #b8860b;\n}<\/p>\n<p>.about-btn:hover {\n background: #b8860b;\n color: white;\n transform: translateY(-2px);\n box-shadow: 0 10px 25px rgba(184, 134, 11, 0.2);\n}<\/p>\n<p>.btn-icon {\n width: 20px;\n height: 20px;\n transition: transform 0.3s ease;\n}<\/p>\n<p>.btn-modern:hover .btn-icon {\n transform: translateX(5px);\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>\/* ===== \u0412\u0410\u0420\u0418\u0410\u041d\u0422 2 - \u041a\u0410\u0420\u0422\u041e\u0427\u041d\u042b\u0419 \u0414\u0418\u0417\u0410\u0419\u041d ===== *\/\n.president-section-wrapper-v2 {\n width: 100vw;\n position: relative;\n left: 50%;\n right: 50%;\n margin-left: -50vw;\n margin-right: -50vw;\n background: linear-gradient(135deg, #e8f3ff 0%, #d7e9f7 100%);\n overflow: hidden;\n max-width: 100vw;\n margin-bottom: 100px;\n}<\/p>\n<p>.president-section-v2 {\n padding: 100px 0;\n position: relative;\n}<\/p>\n<p>.president-container-v2 {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 20px;\n position: relative;\n z-index: 1;\n}<\/p>\n<p>.president-card {\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(10px);\n border-radius: 40px;\n padding: 60px;\n box-shadow: 0 30px 80px rgba(0, 0, 0, 0.1);\n border: 2px solid rgba(184, 134, 11, 0.2);\n position: relative;\n overflow: hidden;\n animation: fadeInUp 1s ease-out;\n}<\/p>\n<p>.president-card::before {\n content: '';\n position: absolute;\n top: -50%;\n right: -50%;\n width: 200%;\n height: 200%;\n background: radial-gradient(circle, rgba(255, 215, 0, 0.05) 0%, transparent 50%);\n animation: rotate-slow 30s linear infinite;\n}<\/p>\n<p>@keyframes rotate-slow {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}<\/p>\n<p>.president-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-v2 {\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, #b8860b, #ffd700, #b8860b) border-box;\n animation: fadeInScale 1s ease-out;\n}<\/p>\n<p>@keyframes 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>.president-photo-v2 img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.6s ease;\n}<\/p>\n<p>.president-photo-v2:hover img {\n transform: scale(1.1);\n}<\/p>\n<p>.president-info-v2 {\n animation: fadeInRight 1s ease-out 0.3s both;\n}<\/p>\n<p>.president-badge {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n background: linear-gradient(135deg, rgba(184, 134, 11, 0.1) 0%, rgba(255, 215, 0, 0.1) 100%);\n padding: 12px 24px;\n border-radius: 50px;\n margin-bottom: 20px;\n}<\/p>\n<p>.badge-icon {\n width: 24px;\n height: 24px;\n fill: #b8860b;\n}<\/p>\n<p>.badge-text {\n font-family: 'Montserrat', sans-serif !important;\n font-size: 0.9rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 2px;\n color: #b8860b;\n}<\/p>\n<p>.president-name-v2 {\n font-size: 3rem;\n font-weight: 900;\n color: #1a3a52;\n margin-bottom: 30px;\n line-height: 1.1;\n font-family: 'Playfair Display', serif !important;\n}<\/p>\n<p>.president-description-v2 {\n font-size: 1.15rem;\n line-height: 1.8;\n color: #5a6c7d;\n margin-bottom: 40px;\n font-family: 'Lato', sans-serif !important;\n}<\/p>\n<p>.president-description-v2 .highlight {\n color: #b8860b;\n font-weight: 600;\n}<\/p>\n<p>.president-actions-v2 {\n display: flex;\n align-items: center;\n gap: 30px;\n}<\/p>\n<p>.btn-gold {\n background: linear-gradient(135deg, #b8860b 0%, #ffd700 100%);\n color: white;\n padding: 16px 40px;\n text-decoration: none;\n font-size: 1.1rem;\n font-weight: 600;\n border-radius: 30px;\n display: inline-flex;\n align-items: center;\n gap: 10px;\n transition: all 0.3s ease;\n box-shadow: 0 6px 25px rgba(184, 134, 11, 0.3);\n}<\/p>\n<p>.btn-gold:hover {\n transform: translateY(-3px);\n box-shadow: 0 10px 35px rgba(184, 134, 11, 0.4);\n}<\/p>\n<p>.btn-outline {\n background: transparent;\n color: #1e90ff;\n padding: 16px 40px;\n text-decoration: none;\n font-size: 1.1rem;\n font-weight: 600;\n border-radius: 30px;\n border: 2px solid #1e90ff;\n display: inline-flex;\n align-items: center;\n gap: 10px;\n transition: all 0.3s ease;\n}<\/p>\n<p>.btn-outline:hover {\n background: #1e90ff;\n color: white;\n transform: translateY(-3px);\n box-shadow: 0 10px 25px rgba(30, 144, 255, 0.3);\n}<\/p>\n<p>\/* Decorative elements *\/\n.gold-accent-v2 {\n position: absolute;\n width: 200px;\n height: 200px;\n background: radial-gradient(circle, rgba(255, 215, 0, 0.2) 0%, transparent 70%);\n border-radius: 50%;\n filter: blur(40px);\n animation: float-accent 15s ease-in-out infinite;\n}<\/p>\n<p>.gold-accent-v2:nth-child(1) {\n top: -100px;\n right: -100px;\n}<\/p>\n<p>.gold-accent-v2:nth-child(2) {\n bottom: -100px;\n left: -100px;\n animation-delay: 7s;\n}<\/p>\n<p>@keyframes float-accent {\n 0%, 100% {\n transform: translate(0, 0);\n }\n 50% {\n transform: translate(-20px, 20px);\n }\n}<\/p>\n<p>\/* ===== \u0412\u0410\u0420\u0418\u0410\u041d\u0422 3 - \u042d\u041b\u0415\u0413\u0410\u041d\u0422\u041d\u042b\u0419 \u041c\u0418\u041d\u0418\u041c\u0410\u041b\u0418\u0417\u041c ===== *\/\n.president-section-wrapper-v3 {\n width: 100vw;\n position: relative;\n left: 50%;\n right: 50%;\n margin-left: -50vw;\n margin-right: -50vw;\n background: white;\n overflow: hidden;\n max-width: 100vw;\n}<\/p>\n<p>.president-section-v3 {\n padding: 120px 0;\n position: relative;\n}<\/p>\n<p>.gold-pattern {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-image: \n radial-gradient(circle at 20% 80%, rgba(184, 134, 11, 0.03) 0%, transparent 50%),\n radial-gradient(circle at 80% 20%, rgba(255, 215, 0, 0.03) 0%, transparent 50%),\n radial-gradient(circle at 80% 80%, rgba(30, 144, 255, 0.03) 0%, transparent 50%);\n z-index: 0;\n}<\/p>\n<p>.president-container-v3 {\n max-width: 800px;\n margin: 0 auto;\n padding: 0 20px;\n text-align: center;\n position: relative;\n z-index: 1;\n}<\/p>\n<p>.president-photo-v3 {\n width: 300px;\n height: 400px;\n margin: 0 auto 50px;\n position: relative;\n animation: fadeInDown 1s ease-out;\n}<\/p>\n<p>.photo-frame {\n width: 100%;\n height: 100%;\n position: relative;\n overflow: hidden;\n border-radius: 0 50% 0 50%;\n box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);\n}<\/p>\n<p>.photo-frame::before {\n content: '';\n position: absolute;\n top: -5px;\n left: -5px;\n right: -5px;\n bottom: -5px;\n background: linear-gradient(135deg, #b8860b, #ffd700, #b8860b);\n border-radius: 0 50% 0 50%;\n z-index: -1;\n animation: gradient-rotate 8s linear infinite;\n}<\/p>\n<p>@keyframes gradient-rotate {\n 0% {\n filter: hue-rotate(0deg);\n }\n 100% {\n filter: hue-rotate(360deg);\n }\n}<\/p>\n<p>.photo-frame img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: all 0.6s ease;\n}<\/p>\n<p>.photo-frame:hover img {\n transform: scale(1.05);\n}<\/p>\n<p>.president-content-v3 {\n animation: fadeInUp 1s ease-out 0.3s both;\n}<\/p>\n<p>.title-decoration {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 20px;\n margin-bottom: 30px;\n}<\/p>\n<p>.gold-line {\n width: 60px;\n height: 3px;\n background: linear-gradient(90deg, transparent, #b8860b, transparent);\n}<\/p>\n<p>.president-title-v3 {\n font-family: 'Montserrat', sans-serif !important;\n font-size: 1rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 5px;\n color: #b8860b;\n}<\/p>\n<p>.president-name-v3 {\n font-size: 3.5rem;\n font-weight: 900;\n color: #1a3a52;\n margin-bottom: 40px;\n line-height: 1.1;\n font-family: 'Playfair Display', serif !important;\n position: relative;\n}<\/p>\n<p>.president-name-v3::after {\n content: '';\n position: absolute;\n bottom: -15px;\n left: 50%;\n transform: translateX(-50%);\n width: 100px;\n height: 4px;\n background: linear-gradient(90deg, transparent, #ffd700, transparent);\n}<\/p>\n<p>.president-description-v3 {\n font-size: 1.2rem;\n line-height: 2;\n color: #5a6c7d;\n margin-bottom: 50px;\n max-width: 700px;\n margin-left: auto;\n margin-right: auto;\n font-family: 'Lato', sans-serif !important;\n}<\/p>\n<p>.president-description-v3 .highlight {\n background: linear-gradient(135deg, #b8860b, #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n font-weight: 600;\n}<\/p>\n<p>.action-row {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 40px;\n}<\/p>\n<p>.btn-elegant {\n padding: 18px 45px;\n text-decoration: none;\n font-size: 1.1rem;\n font-weight: 600;\n border-radius: 5px;\n display: inline-flex;\n align-items: center;\n gap: 12px;\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n position: relative;\n overflow: hidden;\n text-transform: uppercase;\n letter-spacing: 1px;\n}<\/p>\n<p>.btn-primary {\n background: #1a3a52;\n color: white;\n box-shadow: 0 10px 30px rgba(26, 58, 82, 0.3);\n}<\/p>\n<p>.btn-primary::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(135deg, #b8860b, #ffd700);\n opacity: 0;\n transition: opacity 0.4s ease;\n}<\/p>\n<p>.btn-primary:hover::before {\n opacity: 1;\n}<\/p>\n<p>.btn-primary span,\n.btn-primary svg {\n position: relative;\n z-index: 1;\n}<\/p>\n<p>.btn-primary:hover {\n transform: translateY(-3px);\n box-shadow: 0 15px 40px rgba(184, 134, 11, 0.4);\n}<\/p>\n<p>.btn-secondary {\n background: transparent;\n color: #1a3a52;\n border: 3px solid #1a3a52;\n}<\/p>\n<p>.btn-secondary:hover {\n background: #1a3a52;\n color: white;\n transform: translateY(-3px);\n box-shadow: 0 15px 40px rgba(26, 58, 82, 0.3);\n}<\/p>\n<p>.logo-floating {\n position: absolute;\n top: 50px;\n right: 50px;\n width: 80px;\n height: 80px;\n opacity: 0.1;\n animation: float-logo 20s ease-in-out infinite;\n}<\/p>\n<p>@keyframes float-logo {\n 0%, 100% {\n transform: translate(0, 0) rotate(0deg);\n }\n 25% {\n transform: translate(-20px, 20px) rotate(90deg);\n }\n 50% {\n transform: translate(20px, -20px) rotate(180deg);\n }\n 75% {\n transform: translate(-20px, -20px) rotate(270deg);\n }\n}<\/p>\n<p>\/* Responsive Design *\/\n@media (max-width: 1200px) {\n .president-container-v1 {\n padding: 0 40px;\n gap: 60px;\n }<\/p>\n<p> .president-card {\n padding: 40px;\n }\n}<\/p>\n<p>@media (max-width: 968px) {\n .president-section-v1,\n .president-section-v2,\n .president-section-v3 {\n padding: 60px 0;\n }<\/p>\n<p> .president-container-v1 {\n grid-template-columns: 1fr;\n gap: 50px;\n text-align: center;\n padding: 0 30px;\n }<\/p>\n<p> .president-card-content {\n grid-template-columns: 1fr;\n text-align: center;\n }<\/p>\n<p> .president-photo-v2 {\n margin: 0 auto;\n }<\/p>\n<p> .president-actions-v2,\n .action-row {\n justify-content: center;\n }<\/p>\n<p> .president-photo {\n margin: 0 auto;\n max-width: 400px;\n height: 500px;\n }<\/p>\n<p> .president-title::after {\n left: 50%;\n transform: translateX(-50%);\n width: 60px;\n }<\/p>\n<p> .president-title:hover::after {\n transform: translateX(-50%) scaleX(1);\n }<\/p>\n<p> .president-description {\n text-align: left;\n }<\/p>\n<p> .action-wrapper {\n justify-content: center;\n flex-wrap: wrap;\n }\n}<\/p>\n<p>@media (max-width: 640px) {\n .president-container-v1,\n .president-container-v2,\n .president-container-v3 {\n padding: 0 20px;\n }<\/p>\n<p> .president-name,\n .president-name-v2,\n .president-name-v3 {\n font-size: 2rem;\n }<\/p>\n<p> .president-title {\n font-size: 1.3rem;\n letter-spacing: 2px;\n }<\/p>\n<p> .president-description,\n .president-description-v2,\n .president-description-v3 {\n font-size: 1rem;\n }<\/p>\n<p> .action-wrapper {\n flex-direction: row;\n gap: 20px;\n align-items: center;\n justify-content: center;\n }<\/p>\n<p> .action-buttons {\n flex-direction: row;\n gap: 10px;\n }<\/p>\n<p> .btn-modern {\n padding: 12px 20px;\n font-size: 0.95rem;\n }<\/p>\n<p> .bifa-logo-wrapper {\n margin-left: 10px;\n }<\/p>\n<p> .president-photo-v3 {\n width: 250px;\n height: 333px;\n }<\/p>\n<p> .president-actions-v2,\n .action-row {\n flex-direction: column;\n width: 100%;\n }<\/p>\n<p> .btn-gold,\n .btn-outline,\n .btn-elegant {\n width: 100%;\n justify-content: center;\n }\n}<\/p>\n<p>@media (max-width: 480px) {\n .president-photo {\n max-width: 100%;\n height: 400px;\n }<\/p>\n<p> .bifa-logo-wrapper {\n width: 70px;\n height: 70px;\n margin-left: 10px;\n }<\/p>\n<p> .bifa-logo-img {\n width: 70px;\n height: 70px;\n }<\/p>\n<p> .action-wrapper {\n flex-wrap: nowrap;\n }<\/p>\n<p> .btn-modern {\n padding: 10px 15px;\n font-size: 0.9rem;\n }<\/p>\n<p> .btn-modern span {\n display: none;\n }<\/p>\n<p> .btn-modern .btn-icon {\n margin: 0;\n }\n}<\/p>\n<p>\/* Title Styles *\/\n.variant-title {\n text-align: center;\n font-size: 2.5rem;\n font-weight: 800;\n margin-bottom: 20px;\n font-family: 'Montserrat', sans-serif !important;\n color: #1a3a52;\n}<\/p>\n<p>.divider {\n height: 2px;\n background: linear-gradient(90deg, transparent, #b8860b, transparent);\n margin: 80px auto;\n max-width: 200px;\n}\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<p><\/p>\n<h1 class=\"variant-title\">\u0412\u0430\u0440\u0438\u0430\u043d\u0442 1 - \u041e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0439<\/h1>\n<div class=\"president-section-wrapper-v1\">\n<section class=\"president-section-v1\">\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=\"neon-line\"><\/div>\n<div class=\"neon-line\"><\/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=\"president-container-v1\">\n <\/p>\n<div class=\"president-image-column\">\n<div class=\"president-photo\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Mr\/main-photo.jpg\" alt=\"Mr. Salim Humaid Almazaini\">\n <\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"president-info\">\n <a href=\"\/aboutus\" class=\"president-title\"><br \/>\n <span>Founder and President<\/span><br \/>\n <\/a><\/p>\n<p> <a href=\"\/aboutus\" class=\"president-name\"><br \/>\n Mr. Salim Humaid Almazaini<br \/>\n <\/a><\/p>\n<div class=\"president-description\">\n<p>\n \u090f\u0915 \u092a\u094d\u0930\u0924\u093f\u0937\u094d\u0920\u093f\u0924 <span class=\"highlight\">\u0926\u0942\u0930\u0926\u0930\u094d\u0936\u0940 \u0928\u0947\u0924\u093e<\/span> in international sports diplomacy. Through strategic innovation and unwavering commitment, Mr. Almazaini transforms global football <span class=\"highlight\">\u090f\u0915\u0924\u093e \u0914\u0930 \u0938\u0939\u092f\u094b\u0917 \u0915\u0947 \u0932\u093f\u090f \u090f\u0915 \u0936\u0915\u094d\u0924\u093f\u0936\u093e\u0932\u0940 \u0938\u0947\u0924\u0941 \u0915\u0947 \u0930\u0942\u092a \u092e\u0947\u0902<\/span> \u0930\u093e\u0937\u094d\u091f\u094d\u0930\u094b\u0902 \u0915\u0947 \u092c\u0940\u091a.\n <\/p>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"action-wrapper\">\n<div class=\"action-buttons\">\n <a href=\"\/president\" class=\"btn-modern learn-more-btn\"><br \/>\n <span>\u0914\u0930 \u0905\u0927\u093f\u0915 \u091c\u093e\u0928\u0947\u0902<\/span><br \/>\n <svg class=\"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=\"\/aboutus\" class=\"btn-modern about-btn\"><br \/>\n <span>BIFA \u0915\u0947 \u092c\u093e\u0930\u0947 \u092e\u0947\u0902<\/span><br \/>\n <svg class=\"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 16v-4M12 8h.01\"\/>\n <\/svg><br \/>\n <\/a>\n <\/div>\n<div class=\"bifa-logo-wrapper\">\n<div class=\"bifa-logo-bg\"><\/div>\n<div class=\"bifa-logo-img\" role=\"img\" aria-label=\"BIFA \u0932\u094b\u0917\u094b\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<\/div>\n<div class=\"divider\"><\/div>\n<p><\/p>\n<h1 class=\"variant-title\">\u0412\u0430\u0440\u0438\u0430\u043d\u0442 2 - \u041a\u0430\u0440\u0442\u043e\u0447\u043d\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d<\/h1>\n<div class=\"president-section-wrapper-v2\">\n<section class=\"president-section-v2\">\n<div class=\"gold-accent-v2\"><\/div>\n<div class=\"gold-accent-v2\"><\/div>\n<div class=\"president-container-v2\">\n<div class=\"president-card\">\n<div class=\"president-card-content\">\n <\/p>\n<div class=\"president-photo-v2\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Mr\/main-photo.jpg\" alt=\"Mr. Salim Humaid Almazaini\">\n <\/div>\n<p> <\/p>\n<div class=\"president-info-v2\">\n<div class=\"president-badge\">\n <svg class=\"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=\"badge-text\">\u0938\u0902\u0938\u094d\u0925\u093e\u092a\u0915 \u090f\u0935\u0902 \u0905\u0927\u094d\u092f\u0915\u094d\u0937<\/span>\n <\/div>\n<h2 class=\"president-name-v2\">Mr. Salim Humaid Almazaini<\/h2>\n<div class=\"president-description-v2\">\n<p>\n \u090f\u0915 \u092a\u094d\u0930\u0924\u093f\u0937\u094d\u0920\u093f\u0924 <span class=\"highlight\">\u0926\u0942\u0930\u0926\u0930\u094d\u0936\u0940 \u0928\u0947\u0924\u093e<\/span> in international sports diplomacy. Through strategic innovation and unwavering commitment, Mr. Almazaini transforms global football <span class=\"highlight\">\u090f\u0915\u0924\u093e \u0914\u0930 \u0938\u0939\u092f\u094b\u0917 \u0915\u0947 \u0932\u093f\u090f \u090f\u0915 \u0936\u0915\u094d\u0924\u093f\u0936\u093e\u0932\u0940 \u0938\u0947\u0924\u0941 \u0915\u0947 \u0930\u0942\u092a \u092e\u0947\u0902<\/span> \u0930\u093e\u0937\u094d\u091f\u094d\u0930\u094b\u0902 \u0915\u0947 \u092c\u0940\u091a.\n <\/p>\n<\/p><\/div>\n<div class=\"president-actions-v2\">\n <a href=\"\/president\" class=\"btn-gold\"><br \/>\n <span>\u0915\u0939\u093e\u0928\u0940 \u0916\u094b\u091c\u0947\u0902<\/span><br \/>\n <svg class=\"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=\"\/aboutus\" class=\"btn-outline\"><br \/>\n <span>BIFA \u0915\u0947 \u092c\u093e\u0930\u0947 \u092e\u0947\u0902<\/span><br \/>\n <svg class=\"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=\"BIFA \u0932\u094b\u0917\u094b\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<\/div>\n<div class=\"divider\"><\/div>\n<p><\/p>\n<h1 class=\"variant-title\">\u0412\u0430\u0440\u0438\u0430\u043d\u0442 3 - \u042d\u043b\u0435\u0433\u0430\u043d\u0442\u043d\u044b\u0439 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u0438\u0437\u043c<\/h1>\n<div class=\"president-section-wrapper-v3\">\n<section class=\"president-section-v3\">\n<div class=\"gold-pattern\"><\/div>\n<div class=\"logo-floating\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/logo_bifa.svg\" alt=\"BIFA\" style=\"width: 100%; height: 100%; opacity: 0.1;\">\n <\/div>\n<div class=\"president-container-v3\">\n <\/p>\n<div class=\"president-photo-v3\">\n<div class=\"photo-frame\">\n <img decoding=\"async\" src=\"\/wp-content\/themes\/yootheme-child\/assets\/images\/Mr\/main-photo.jpg\" alt=\"Mr. Salim Humaid Almazaini\">\n <\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"president-content-v3\">\n<div class=\"title-decoration\">\n<div class=\"gold-line\"><\/div>\n<h3 class=\"president-title-v3\">\u0938\u0902\u0938\u094d\u0925\u093e\u092a\u0915 \u090f\u0935\u0902 \u0905\u0927\u094d\u092f\u0915\u094d\u0937<\/h3>\n<div class=\"gold-line\"><\/div>\n<\/p><\/div>\n<h1 class=\"president-name-v3\">Mr. Salim Humaid Almazaini<\/h1>\n<div class=\"president-description-v3\">\n<p>\n \u090f\u0915 \u092a\u094d\u0930\u0924\u093f\u0937\u094d\u0920\u093f\u0924 <span class=\"highlight\">\u0926\u0942\u0930\u0926\u0930\u094d\u0936\u0940 \u0928\u0947\u0924\u093e<\/span> in international sports diplomacy. Through strategic innovation and unwavering commitment, Mr. Almazaini transforms global football <span class=\"highlight\">\u090f\u0915\u0924\u093e \u0914\u0930 \u0938\u0939\u092f\u094b\u0917 \u0915\u0947 \u0932\u093f\u090f \u090f\u0915 \u0936\u0915\u094d\u0924\u093f\u0936\u093e\u0932\u0940 \u0938\u0947\u0924\u0941 \u0915\u0947 \u0930\u0942\u092a \u092e\u0947\u0902<\/span> \u0930\u093e\u0937\u094d\u091f\u094d\u0930\u094b\u0902 \u0915\u0947 \u092c\u0940\u091a.\n <\/p>\n<\/p><\/div>\n<div class=\"action-row\">\n <a href=\"\/president\" class=\"btn-elegant btn-primary\"><br \/>\n <span>\u0914\u0930 \u0905\u0927\u093f\u0915 \u091c\u093e\u0928\u0947\u0902<\/span><br \/>\n <svg viewbox=\"0 0 24 24\" width=\"20\" height=\"20\" 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=\"\/aboutus\" class=\"btn-elegant btn-secondary\"><br \/>\n <span>BIFA \u0915\u0947 \u092c\u093e\u0930\u0947 \u092e\u0947\u0902<\/span><br \/>\n <svg viewbox=\"0 0 24 24\" width=\"20\" height=\"20\" 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 16v-4M12 8h.01\"\/>\n <\/svg><br \/>\n <\/a>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<\/div>\n<p><script>\n\/\/ Animation for all variants\ndocument.addEventListener('DOMContentLoaded', function() {\n \/\/ Smooth scroll reveal\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('[class*=\"fadeIn\"], .president-card, .president-photo-v2, .president-photo-v3').forEach(el => {\n if (el) {\n el.style.animationPlayState = 'paused';\n observer.observe(el);\n }\n });<\/p>\n<p> \/\/ Logo hover effects for all variants\n document.querySelectorAll('.bifa-logo-wrapper').forEach(logoWrapper => {\n logoWrapper.addEventListener('mouseenter', () => {\n const logo = logoWrapper.querySelector('.bifa-logo-img');\n if (logo) {\n logo.style.transform = 'scale(1.1)';\n }\n });<\/p>\n<p> logoWrapper.addEventListener('mouseleave', () => {\n const logo = logoWrapper.querySelector('.bifa-logo-img');\n if (logo) {\n logo.style.transform = 'scale(1)';\n }\n });\n });<\/p>\n<p> \/\/ Button glow effects\n document.querySelectorAll('.btn-modern, .btn-gold, .btn-outline, .btn-elegant').forEach(button => {\n button.addEventListener('mouseenter', (e) => {\n const rect = button.getBoundingClientRect();\n const x = e.clientX - rect.left;\n const y = e.clientY - rect.top;<\/p>\n<p> const glow = document.createElement('div');\n glow.style.cssText = `\n position: absolute;\n width: 100px;\n height: 100px;\n background: radial-gradient(circle, rgba(255, 215, 0, 0.2) 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(glow);\n setTimeout(() => { glow.style.opacity = '1'; }, 10);<\/p>\n<p> button.addEventListener('mouseleave', () => {\n glow.style.opacity = '0';\n setTimeout(() => glow.remove(), 300);\n }, { once: true });\n });\n });<\/p>\n<p> \/\/ Image loading animation\n document.querySelectorAll('img').forEach(img => {\n img.style.opacity = '0';\n img.style.transition = 'opacity 0.5s ease';<\/p>\n<p> if (img.complete) {\n img.style.opacity = '1';\n } else {\n img.addEventListener('load', function() {\n this.style.opacity = '1';\n });\n }\n });<\/p>\n<p> \/\/ Preload images\n function preloadImages() {\n const imageUrls = [\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> 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 Quote Blocks - 4 Design Variants<\/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=Playfair+Display:wght@400;700;900&family=Lato:wght@300;400;700&family=Montserrat:wght@400;600;700;800&family=Merriweather:wght@300;400;700;900&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: 'Lato', sans-serif !important;\n background: #f5f5f5;\n overflow-x: hidden;\n position: relative;\n}<\/p>\n<p>\/* ===== \u0412\u0410\u0420\u0418\u0410\u041d\u0422 1 - \u041a\u041b\u0410\u0421\u0421\u0418\u0427\u0415\u0421\u041a\u0418\u0419 ===== *\/\n.quote-section-wrapper-v1 {\n width: 100vw;\n position: relative;\n left: 50%;\n right: 50%;\n margin-left: -50vw;\n margin-right: -50vw;\n background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);\n overflow: hidden;\n max-width: 100vw;\n margin-bottom: 100px;\n}<\/p>\n<p>.quote-section-v1 {\n padding: 120px 0;\n position: relative;\n}<\/p>\n<p>\/* \u0412\u043e\u0434\u044f\u043d\u044b\u0435 \u0437\u043d\u0430\u043a\u0438 *\/\n.watermark-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>.bird-watermark {\n position: absolute;\n width: 300px;\n height: 300px;\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.03;\n top: 20%;\n right: 10%;\n animation: float-gentle 20s ease-in-out infinite;\n}<\/p>\n<p>.logo-watermark {\n position: absolute;\n width: 400px;\n height: 400px;\n background-image: url('\/wp-content\/themes\/yootheme-child\/assets\/images\/flag-logo1.svg');\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center;\n opacity: 0.03;\n bottom: 10%;\n left: 5%;\n animation: float-gentle 25s ease-in-out infinite reverse;\n}<\/p>\n<p>@keyframes float-gentle {\n 0%, 100% {\n transform: translate(0, 0) rotate(0deg);\n }\n 50% {\n transform: translate(30px, -30px) rotate(5deg);\n }\n}<\/p>\n<p>.quote-container-v1 {\n max-width: 1000px;\n margin: 0 auto;\n padding: 0 40px;\n text-align: center;\n position: relative;\n z-index: 1;\n}<\/p>\n<p>\/* \u0414\u0435\u043a\u043e\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u043a\u0430\u0432\u044b\u0447\u043a\u0438 *\/\n.quote-marks {\n position: relative;\n display: inline-block;\n margin-bottom: 40px;\n}<\/p>\n<p>.quote-mark-left,\n.quote-mark-right {\n font-family: 'Playfair Display', serif;\n font-size: 120px;\n line-height: 1;\n color: #b8860b;\n opacity: 0.2;\n position: absolute;\n}<\/p>\n<p>.quote-mark-left {\n top: -40px;\n left: -80px;\n}<\/p>\n<p>.quote-mark-right {\n bottom: -80px;\n right: -80px;\n transform: rotate(180deg);\n}<\/p>\n<p>\/* \u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0442\u0435\u043a\u0441\u0442 \u0446\u0438\u0442\u0430\u0442\u044b *\/\n.quote-text-v1 {\n font-family: 'Playfair Display', serif !important;\n font-size: clamp(2rem, 3.5vw, 3rem);\n font-weight: 700;\n line-height: 1.4;\n color: #1a3a52;\n margin-bottom: 40px;\n position: relative;\n animation: fadeInUp 1s ease-out;\n}<\/p>\n<p>.quote-highlight {\n background: linear-gradient(135deg, #b8860b, #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n font-weight: 900;\n}<\/p>\n<p>\/* \u0410\u0432\u0442\u043e\u0440 \u0446\u0438\u0442\u0430\u0442\u044b *\/\n.quote-author-v1 {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 15px;\n margin-top: 50px;\n animation: fadeInUp 1s ease-out 0.3s both;\n}<\/p>\n<p>.author-dash {\n width: 50px;\n height: 3px;\n background: linear-gradient(90deg, #b8860b, #ffd700);\n}<\/p>\n<p>.author-info {\n font-family: 'Montserrat', sans-serif !important;\n}<\/p>\n<p>.author-name {\n font-size: 1.3rem;\n font-weight: 700;\n color: #1a3a52;\n margin-bottom: 5px;\n}<\/p>\n<p>.author-title {\n font-size: 1rem;\n color: #5a6c7d;\n font-weight: 400;\n}<\/p>\n<p>\/* \u0414\u0435\u043a\u043e\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u0433\u043e\u043b\u0443\u0431\u044c *\/\n.bird-decoration {\n position: absolute;\n top: 50px;\n left: 50px;\n width: 80px;\n height: 80px;\n background-image: url('\/wp-content\/themes\/yootheme-child\/assets\/images\/Logo\/bird.svg');\n background-size: contain;\n background-repeat: no-repeat;\n opacity: 0.1;\n animation: fly-bird 30s linear infinite;\n}<\/p>\n<p>@keyframes fly-bird {\n 0% {\n transform: translate(0, 0) rotate(0deg);\n }\n 25% {\n transform: translate(200px, -50px) rotate(10deg);\n }\n 50% {\n transform: translate(400px, 0) rotate(0deg);\n }\n 75% {\n transform: translate(200px, 50px) rotate(-10deg);\n }\n 100% {\n transform: translate(0, 0) rotate(0deg);\n }\n}<\/p>\n<p>\/* ===== \u0412\u0410\u0420\u0418\u0410\u041d\u0422 2 - \u0421\u041e\u0412\u0420\u0415\u041c\u0415\u041d\u041d\u042b\u0419 \u041c\u0418\u041d\u0418\u041c\u0410\u041b\u0418\u0417\u041c ===== *\/\n.quote-section-wrapper-v2 {\n width: 100vw;\n position: relative;\n left: 50%;\n right: 50%;\n margin-left: -50vw;\n margin-right: -50vw;\n background: #ffffff;\n overflow: hidden;\n max-width: 100vw;\n margin-bottom: 100px;\n}<\/p>\n<p>.quote-section-v2 {\n padding: 100px 0;\n position: relative;\n}<\/p>\n<p>.quote-container-v2 {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 40px;\n position: relative;\n}<\/p>\n<p>\/* \u041b\u0435\u0432\u0430\u044f \u043f\u0430\u043d\u0435\u043b\u044c \u0441 \u043f\u0442\u0438\u0446\u0435\u0439 *\/\n.quote-layout-v2 {\n display: grid;\n grid-template-columns: 300px 1fr;\n gap: 80px;\n align-items: center;\n}<\/p>\n<p>.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(184, 134, 11, 0.05) 0%, rgba(255, 215, 0, 0.05) 100%);\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>\/* \u041f\u0440\u0430\u0432\u0430\u044f \u043f\u0430\u043d\u0435\u043b\u044c \u0441 \u0446\u0438\u0442\u0430\u0442\u043e\u0439 *\/\n.quote-content-v2 {\n animation: fadeInRight 1s ease-out;\n}<\/p>\n<p>.quote-text-v2 {\n font-family: 'Merriweather', serif !important;\n font-size: 2.5rem;\n font-weight: 300;\n line-height: 1.5;\n color: #1a3a52;\n margin-bottom: 40px;\n position: relative;\n}<\/p>\n<p>.quote-text-v2::before {\n content: '\"';\n position: absolute;\n top: -30px;\n left: -50px;\n font-size: 100px;\n color: #b8860b;\n opacity: 0.3;\n font-family: 'Playfair Display', serif;\n}<\/p>\n<p>.author-block-v2 {\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\/flag-logo1.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 #b8860b;\n padding-left: 20px;\n}<\/p>\n<p>\/* ===== \u0412\u0410\u0420\u0418\u0410\u041d\u0422 3 - \u041a\u0410\u0420\u0422\u041e\u0427\u041a\u0410 \u0421 \u0413\u0420\u0410\u0414\u0418\u0415\u041d\u0422\u041e\u041c ===== *\/\n.quote-section-wrapper-v3 {\n width: 100vw;\n position: relative;\n left: 50%;\n right: 50%;\n margin-left: -50vw;\n margin-right: -50vw;\n background: #f0f5fa;\n overflow: hidden;\n max-width: 100vw;\n margin-bottom: 100px;\n}<\/p>\n<p>.quote-section-v3 {\n padding: 120px 0;\n position: relative;\n}<\/p>\n<p>.quote-container-v3 {\n max-width: 900px;\n margin: 0 auto;\n padding: 0 20px;\n position: relative;\n z-index: 1;\n}<\/p>\n<p>.quote-card {\n background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);\n border-radius: 30px;\n padding: 80px;\n box-shadow: 0 30px 80px rgba(0, 0, 0, 0.08);\n position: relative;\n overflow: hidden;\n animation: fadeInScale 1s ease-out;\n}<\/p>\n<p>\/* \u0413\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043d\u0430\u044f \u0440\u0430\u043c\u043a\u0430 *\/\n.quote-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-radius: 30px;\n padding: 3px;\n background: linear-gradient(135deg, #b8860b, #ffd700, #1e90ff);\n -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n -webkit-mask-composite: exclude;\n mask-composite: exclude;\n opacity: 0.3;\n}<\/p>\n<p>\/* \u0424\u043e\u043d\u043e\u0432\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b *\/\n.card-bg-elements {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow: hidden;\n opacity: 0.05;\n}<\/p>\n<p>.bg-bird {\n position: absolute;\n width: 200px;\n height: 200px;\n background-image: url('\/wp-content\/themes\/yootheme-child\/assets\/images\/Logo\/bird.svg');\n background-size: contain;\n background-repeat: no-repeat;\n top: -50px;\n right: -50px;\n transform: rotate(15deg);\n}<\/p>\n<p>.bg-logo {\n position: absolute;\n width: 300px;\n height: 300px;\n background-image: url('\/wp-content\/themes\/yootheme-child\/assets\/images\/flag-logo1.svg');\n background-size: contain;\n background-repeat: no-repeat;\n bottom: -100px;\n left: -100px;\n transform: rotate(-15deg);\n}<\/p>\n<p>.quote-content-v3 {\n position: relative;\n text-align: center;\n}<\/p>\n<p>.quote-icon {\n width: 60px;\n height: 60px;\n margin: 0 auto 30px;\n background: linear-gradient(135deg, #b8860b, #ffd700);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n animation: pulse-icon 3s ease-in-out infinite;\n}<\/p>\n<p>@keyframes pulse-icon {\n 0%, 100% {\n transform: scale(1);\n box-shadow: 0 5px 20px rgba(184, 134, 11, 0.3);\n }\n 50% {\n transform: scale(1.05);\n box-shadow: 0 8px 30px rgba(184, 134, 11, 0.4);\n }\n}<\/p>\n<p>.quote-icon::before {\n content: '\"';\n font-family: 'Playfair Display', serif;\n font-size: 30px;\n color: white;\n font-weight: 900;\n}<\/p>\n<p>.quote-text-v3 {\n font-family: 'Playfair Display', serif !important;\n font-size: 2.2rem;\n font-weight: 400;\n line-height: 1.6;\n color: #1a3a52;\n margin-bottom: 50px;\n}<\/p>\n<p>.quote-footer {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 30px;\n}<\/p>\n<p>.footer-line {\n width: 80px;\n height: 2px;\n background: linear-gradient(90deg, transparent, #b8860b, transparent);\n}<\/p>\n<p>\/* ===== \u0412\u0410\u0420\u0418\u0410\u041d\u0422 4 - \u042d\u041b\u0415\u0413\u0410\u041d\u0422\u041d\u042b\u0419 \u0421 \u041f\u0422\u0418\u0426\u0415\u0419 ===== *\/\n.quote-section-wrapper-v4 {\n width: 100vw;\n position: relative;\n left: 50%;\n right: 50%;\n margin-left: -50vw;\n margin-right: -50vw;\n background: linear-gradient(180deg, #ffffff 0%, #d7e9f7 100%);\n overflow: hidden;\n max-width: 100vw;\n}<\/p>\n<p>.quote-section-v4 {\n padding: 150px 0;\n position: relative;\n}<\/p>\n<p>\/* \u0410\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0444\u043e\u043d *\/\n.animated-bg {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow: hidden;\n z-index: 0;\n}<\/p>\n<p>.floating-bird {\n position: absolute;\n width: 100px;\n height: 100px;\n background-image: url('\/wp-content\/themes\/yootheme-child\/assets\/images\/Logo\/bird.svg');\n background-size: contain;\n background-repeat: no-repeat;\n opacity: 0.05;\n animation: float-diagonal 20s linear infinite;\n}<\/p>\n<p>.floating-bird:nth-child(1) {\n top: 10%;\n left: -100px;\n animation-delay: 0s;\n}<\/p>\n<p>.floating-bird:nth-child(2) {\n top: 40%;\n left: -100px;\n animation-delay: 5s;\n}<\/p>\n<p>.floating-bird:nth-child(3) {\n top: 70%;\n left: -100px;\n animation-delay: 10s;\n}<\/p>\n<p>@keyframes float-diagonal {\n 0% {\n transform: translate(0, 0) rotate(10deg);\n }\n 100% {\n transform: translate(calc(100vw + 200px), -200px) rotate(10deg);\n }\n}<\/p>\n<p>.quote-container-v4 {\n max-width: 1100px;\n margin: 0 auto;\n padding: 0 40px;\n position: relative;\n z-index: 1;\n}<\/p>\n<p>.quote-wrapper-v4 {\n display: flex;\n align-items: center;\n gap: 60px;\n background: rgba(255, 255, 255, 0.9);\n backdrop-filter: blur(10px);\n border-radius: 40px;\n padding: 60px;\n box-shadow: 0 25px 70px rgba(0, 0, 0, 0.1);\n border: 1px solid rgba(184, 134, 11, 0.1);\n animation: fadeInUp 1s ease-out;\n}<\/p>\n<p>\/* \u041b\u0435\u0432\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0441 \u043f\u0442\u0438\u0446\u0435\u0439 *\/\n.bird-showcase {\n flex-shrink: 0;\n width: 200px;\n height: 200px;\n position: relative;\n}<\/p>\n<p>.bird-main {\n width: 100%;\n height: 100%;\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.8;\n animation: bird-fly 6s ease-in-out infinite;\n}<\/p>\n<p>@keyframes bird-fly {\n 0%, 100% {\n transform: translateY(0) rotate(0deg);\n }\n 25% {\n transform: translateY(-10px) rotate(-5deg);\n }\n 75% {\n transform: translateY(10px) rotate(5deg);\n }\n}<\/p>\n<p>.bird-glow {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 150%;\n height: 150%;\n background: radial-gradient(circle, rgba(184, 134, 11, 0.1) 0%, transparent 70%);\n border-radius: 50%;\n animation: glow-pulse 4s ease-in-out infinite;\n}<\/p>\n<p>@keyframes glow-pulse {\n 0%, 100% {\n opacity: 0.5;\n transform: translate(-50%, -50%) scale(1);\n }\n 50% {\n opacity: 0.8;\n transform: translate(-50%, -50%) scale(1.1);\n }\n}<\/p>\n<p>\/* \u041f\u0440\u0430\u0432\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0441 \u0446\u0438\u0442\u0430\u0442\u043e\u0439 *\/\n.quote-main-v4 {\n flex: 1;\n}<\/p>\n<p>.quote-text-v4 {\n font-family: 'Merriweather', serif !important;\n font-size: 2.3rem;\n font-weight: 400;\n line-height: 1.5;\n color: #1a3a52;\n margin-bottom: 40px;\n font-style: italic;\n}<\/p>\n<p>.quote-text-v4 em {\n font-style: normal;\n color: #b8860b;\n font-weight: 700;\n}<\/p>\n<p>.author-signature {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}<\/p>\n<p>.signature-left {\n display: flex;\n align-items: center;\n gap: 20px;\n}<\/p>\n<p>.signature-line {\n width: 60px;\n height: 3px;\n background: #b8860b;\n}<\/p>\n<p>.signature-text {\n font-family: 'Montserrat', sans-serif !important;\n}<\/p>\n<p>.signature-name {\n font-size: 1.2rem;\n font-weight: 700;\n color: #1a3a52;\n margin-bottom: 3px;\n}<\/p>\n<p>.signature-role {\n font-size: 0.95rem;\n color: #5a6c7d;\n}<\/p>\n<p>.signature-logo {\n width: 50px;\n height: 50px;\n background-image: url('\/wp-content\/themes\/yootheme-child\/assets\/images\/flag-logo1.svg');\n background-size: contain;\n background-repeat: no-repeat;\n opacity: 0.7;\n transition: all 0.3s ease;\n}<\/p>\n<p>.signature-logo:hover {\n opacity: 1;\n transform: scale(1.1);\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 fadeInScale {\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}<\/p>\n<p>@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-v2 {\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-wrapper-v4 {\n flex-direction: column;\n text-align: center;\n }<\/p>\n<p> .bird-showcase {\n width: 150px;\n height: 150px;\n }<\/p>\n<p> .author-signature {\n flex-direction: column;\n gap: 20px;\n }<\/p>\n<p> .quote-text-v1,\n .quote-text-v2,\n .quote-text-v3,\n .quote-text-v4 {\n font-size: 1.8rem;\n }\n}<\/p>\n<p>@media (max-width: 640px) {\n .quote-section-v1,\n .quote-section-v2,\n .quote-section-v3,\n .quote-section-v4 {\n padding: 80px 0;\n }<\/p>\n<p> .quote-card {\n padding: 40px;\n }<\/p>\n<p> .quote-wrapper-v4 {\n padding: 40px;\n }<\/p>\n<p> .quote-mark-left,\n .quote-mark-right {\n font-size: 80px;\n }<\/p>\n<p> .quote-mark-left {\n left: -40px;\n top: -20px;\n }<\/p>\n<p> .quote-mark-right {\n right: -40px;\n bottom: -40px;\n }<\/p>\n<p> .bird-decoration {\n display: none;\n }<\/p>\n<p> .quote-text-v1,\n .quote-text-v2,\n .quote-text-v3,\n .quote-text-v4 {\n font-size: 1.5rem;\n }\n}<\/p>\n<p>\/* Title Styles *\/\n.variant-title {\n text-align: center;\n font-size: 2.5rem;\n font-weight: 800;\n margin-bottom: 20px;\n font-family: 'Montserrat', sans-serif !important;\n color: #1a3a52;\n}<\/p>\n<p>.divider {\n height: 2px;\n background: linear-gradient(90deg, transparent, #b8860b, transparent);\n margin: 80px auto;\n max-width: 200px;\n}\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<p><\/p>\n<h1 class=\"variant-title\">\u0412\u0430\u0440\u0438\u0430\u043d\u0442 1 - \u041a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0439<\/h1>\n<div class=\"quote-section-wrapper-v1\">\n<section class=\"quote-section-v1\">\n <\/p>\n<div class=\"watermark-elements\">\n<div class=\"bird-watermark\"><\/div>\n<div class=\"logo-watermark\"><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"bird-decoration\"><\/div>\n<div class=\"quote-container-v1\">\n<div class=\"quote-marks\">\n <span class=\"quote-mark-left\">\"<\/span><br \/>\n <span class=\"quote-mark-right\">\"<\/span><\/p>\n<blockquote class=\"quote-text-v1\"><p>\n We're not just playing a game. <span class=\"quote-highlight\">We're building the future.<\/span>\n <\/p><\/blockquote><\/div>\n<div class=\"quote-author-v1\">\n<div class=\"author-dash\"><\/div>\n<div class=\"author-info\">\n<div class=\"author-name\">Salim Almazaini<\/div>\n<div class=\"author-title\">\u0938\u0902\u0938\u094d\u0925\u093e\u092a\u0915 \u0914\u0930 \u0905\u0927\u094d\u092f\u0915\u094d\u0937, BIFA \u0914\u0930 BIFA+<\/div>\n<\/p><\/div>\n<div class=\"author-dash\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<\/div>\n<div class=\"divider\"><\/div>\n<p><\/p>\n<h1 class=\"variant-title\">\u0412\u0430\u0440\u0438\u0430\u043d\u0442 2 - \u0421\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u0438\u0437\u043c<\/h1>\n<div class=\"quote-section-wrapper-v2\">\n<section class=\"quote-section-v2\">\n<div class=\"quote-container-v2\">\n<div class=\"quote-layout-v2\">\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-v2\">\n<blockquote class=\"quote-text-v2\"><p>\n \u0939\u092e \u0938\u093f\u0930\u094d\u092b\u093c \u0916\u0947\u0932 \u0928\u0939\u0940\u0902 \u0916\u0947\u0932 \u0930\u0939\u0947 \u0939\u0948\u0902\u0964 \u0939\u092e \u092d\u0935\u093f\u0937\u094d\u092f \u0915\u093e \u0928\u093f\u0930\u094d\u092e\u093e\u0923 \u0915\u0930 \u0930\u0939\u0947 \u0939\u0948\u0902\u0964\n <\/p><\/blockquote>\n<div class=\"author-block-v2\">\n<div class=\"author-logo\"><\/div>\n<div class=\"author-details\">\n<div class=\"author-name\">Salim Almazaini<\/div>\n<div class=\"author-title\">\u0938\u0902\u0938\u094d\u0925\u093e\u092a\u0915 \u0914\u0930 \u0905\u0927\u094d\u092f\u0915\u094d\u0937, BIFA \u0914\u0930 BIFA+<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<\/div>\n<div class=\"divider\"><\/div>\n<p><\/p>\n<h1 class=\"variant-title\">\u0412\u0430\u0440\u0438\u0430\u043d\u0442 3 - \u041a\u0430\u0440\u0442\u043e\u0447\u043a\u0430 \u0441 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u043c<\/h1>\n<div class=\"quote-section-wrapper-v3\">\n<section class=\"quote-section-v3\">\n<div class=\"quote-container-v3\">\n<div class=\"quote-card\">\n <\/p>\n<div class=\"card-bg-elements\">\n<div class=\"bg-bird\"><\/div>\n<div class=\"bg-logo\"><\/div>\n<\/p><\/div>\n<div class=\"quote-content-v3\">\n<div class=\"quote-icon\"><\/div>\n<blockquote class=\"quote-text-v3\"><p>\n We're not just playing a game.<br \/>\n <strong>We're building the future.<\/strong>\n <\/p><\/blockquote>\n<div class=\"quote-footer\">\n<div class=\"footer-line\"><\/div>\n<div class=\"author-info\">\n<div class=\"author-name\">Salim Almazaini<\/div>\n<div class=\"author-title\">\u0938\u0902\u0938\u094d\u0925\u093e\u092a\u0915 \u0914\u0930 \u0905\u0927\u094d\u092f\u0915\u094d\u0937, BIFA \u0914\u0930 BIFA+<\/div>\n<\/p><\/div>\n<div class=\"footer-line\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<\/div>\n<div class=\"divider\"><\/div>\n<p><\/p>\n<h1 class=\"variant-title\">\u0412\u0430\u0440\u0438\u0430\u043d\u0442 4 - \u042d\u043b\u0435\u0433\u0430\u043d\u0442\u043d\u044b\u0439 \u0441 \u043f\u0442\u0438\u0446\u0435\u0439<\/h1>\n<div class=\"quote-section-wrapper-v4\">\n<section class=\"quote-section-v4\">\n <\/p>\n<div class=\"animated-bg\">\n<div class=\"floating-bird\"><\/div>\n<div class=\"floating-bird\"><\/div>\n<div class=\"floating-bird\"><\/div>\n<\/p><\/div>\n<div class=\"quote-container-v4\">\n<div class=\"quote-wrapper-v4\">\n <\/p>\n<div class=\"bird-showcase\">\n<div class=\"bird-glow\"><\/div>\n<div class=\"bird-main\"><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"quote-main-v4\">\n<blockquote class=\"quote-text-v4\"><p>\n We're not just playing a game. <em>We're building the future.<\/em>\n <\/p><\/blockquote>\n<div class=\"author-signature\">\n<div class=\"signature-left\">\n<div class=\"signature-line\"><\/div>\n<div class=\"signature-text\">\n<div class=\"signature-name\">Salim Almazaini<\/div>\n<div class=\"signature-role\">\u0938\u0902\u0938\u094d\u0925\u093e\u092a\u0915 \u0914\u0930 \u0905\u0927\u094d\u092f\u0915\u094d\u0937, BIFA \u0914\u0930 BIFA+<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"signature-logo\"><\/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('[class*=\"quote-text\"], [class*=\"quote-author\"], .quote-card, .quote-wrapper-v4, .bird-panel, .quote-content-v2').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> \/\/ Parallax effect for watermarks\n let ticking = false;\n function updateParallax() {\n const scrolled = window.pageYOffset;<\/p>\n<p> document.querySelectorAll('.bird-watermark').forEach(el => {\n el.style.transform = `translateY(${scrolled * 0.1}px)`;\n });<\/p>\n<p> document.querySelectorAll('.logo-watermark').forEach(el => {\n el.style.transform = `translateY(${scrolled * -0.1}px)`;\n });<\/p>\n<p> ticking = false;\n }<\/p>\n<p> function requestTick() {\n if (!ticking) {\n window.requestAnimationFrame(updateParallax);\n ticking = true;\n }\n }<\/p>\n<p> window.addEventListener('scroll', requestTick);<\/p>\n<p> \/\/ Hover effects\n document.querySelectorAll('.quote-card, .quote-wrapper-v4').forEach(card => {\n card.addEventListener('mouseenter', function() {\n this.style.transform = 'translateY(-5px)';\n });<\/p>\n<p> card.addEventListener('mouseleave', function() {\n this.style.transform = 'translateY(0)';\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<p><br \/>\n\\n <\/p>\n<div class=\"\\\"geometric-bg\\\"\">\\n <\/p>\n<div class=\"\\\"geo-shape\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"geo-shape\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"geo-shape\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"geo-shape\\\"\"><\\\/div>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"bg-particles\\\"\"><\\\/div>\\n\\n <\/p>\n<section class=\"\\\"bifa-video-section\\\"\">\\n <\/p>\n<div class=\"\\\"video-container\\\"\">\\n \\n <\/p>\n<div class=\"\\\"about-header\\\"\">\\n \\n <a href=\"\\\"\\\/about\\\"\" class=\"\\\"about-title\\\"\" id=\"\\\"mainTitle\\\"\">BIFA+<\\\/a>\\n \\n \\n <\/p>\n<div class=\"\\\"epic-quote\\\"\">\\n <\/p>\n<div class=\"\\\"quote-text\\\"\">\\n <span class=\"\\\"highlight\\\"\">Play with Spirit.<\\\/span> Lead with Vision.\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n\\n \\n <\/p>\n<div class=\"\\\"video-wrapper\\\"\">\\n \\n <\/p>\n<div class=\"\\\"video-loading-overlay\\\"\" id=\"\\\"videoLoadingOverlay\\\"\">\\n <iframe \\n id=\"\\\"loadingIframe\\\"\\n\" class=\"\\\"loading-iframe\\\"\\n\" src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Logo\\\/Get.html\\\"\\n\" title=\"\\\"BIFA+\" loading screen\\\"\\n onload=\"\\\"handleIframeLoad()\\\"\\n\" onerror=\"\\\"handleIframeError()\\\"\">\\n <\\\/iframe>\\n \\n \\n <\/p>\n<div class=\"\\\"fallback-loader\\\"\" id=\"\\\"fallbackLoader\\\"\">\\n <\/p>\n<div class=\"\\\"loader-logo\\\"\">\\n <svg viewbox=\"\\\"0\" 0 200 200\\\" xmlns=\"\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\"\">\\n <defs>\\n <lineargradient id=\"\\\"logoGradient\\\"\" x1=\"\\\"0%\\\"\" y1=\"\\\"0%\\\"\" x2=\"\\\"100%\\\"\" y2=\"\\\"100%\\\"\">\\n <stop offset=\"\\\"0%\\\"\" style=\"\\\"stop-color:#b8860b\\\"\\\/\">\\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=\"\\\"white\\\"\" font-family=\"\\\"Playfair\" display\\\" 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 <video id=\"\\\"heroVideo\\\"\" autoplay muted loop playsinline preload=\"\\\"metadata\\\"\\n\" poster=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/video_poster.jpg\\\"\">\\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 \\n <\/p>\n<div class=\"\\\"controls\\\"\" id=\"\\\"controls\\\"\" aria-label=\"\\\"Video\" controls\\\">\\n <\/p>\n<div class=\"\\\"controls-row\\\"\">\\n <button class=\"\\\"ctrl-btn\\\"\" id=\"\\\"playPause\\\"\" aria-label=\"\\\"Play\\\/Pause\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\"><path d=\"\\\"M8\" 5v14l11-7z\\\"\\><\\\/svg>\\n <\\\/button>\\n \\n <\/p>\n<div class=\"\\\"progress-container\\\"\">\\n <\/p>\n<div class=\"\\\"progress\\\"\" id=\"\\\"progress\\\"\">\\n <\/p>\n<div class=\"\\\"progress-bar\\\"\" id=\"\\\"progressBar\\\"\"><\\\/div>\\n <\\\/div>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"time-display\\\"\" id=\"\\\"timeDisplay\\\"\">0:00<\\\/div>\\n \\n <\/p>\n<div class=\"\\\"volume-container\\\"\">\\n <button class=\"\\\"ctrl-btn\\\"\" id=\"\\\"muteToggle\\\"\" aria-label=\"\\\"Mute\\\/Unmute\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\"><path d=\"\\\"M4\" 9v6h4l5 5v4l8 9h4z\\\"\\><\\\/svg>\\n <\\\/button>\\n <\/p>\n<div class=\"\\\"volume-slider\\\"\" id=\"\\\"volumeSlider\\\"\">\\n <\/p>\n<div class=\"\\\"volume-bar\\\"\" id=\"\\\"volumeBar\\\"\"><\\\/div>\\n <\\\/div>\\n <\\\/div>\\n \\n <button class=\"\\\"fullscreen-btn\\\"\" id=\"\\\"fullscreenBtn\\\"\" aria-label=\"\\\"Fullscreen\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\"><path d=\"\\\"M7\" 14h5v5h5v-2h7v-3zm-2-4h2v7h3v5h5v5zm12 7h-3v2h5v-5h-2v3zm14 5v2h3v3h2v5h-5z\\\"\\><\\\/svg>\\n <\\\/button>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n\\n \\n <\/p>\n<div class=\"\\\"video-content\\\"\">\\n \\n <\/p>\n<div class=\"\\\"about-description\\\"\">\\n <\/p>\n<p style=\"\\\"font-family:\" 'open sans', sans-serif; font-size: clamp(1.1rem, 2vw, 1.4rem); color: #2c3e50; font-weight: 600; margin-bottom: 15px; letter-spacing: 1px;\\\">\\n BRICS International Football Alliance\\n <\\\/p>\\n <\/p>\n<p style=\"\\\"max-width:\" 1000px; margin: 0 auto 40px; font-family: 'lato', sans-serif; font-size: clamp(1rem, 1.5vw, 1.3rem); line-height: 1.8; color: #4a5568;\\\">\\n A global sports and cultural alliance connecting the <span class=\"\\\"highlight\\\"\">\u0935\u0948\u0936\u094d\u0935\u093f\u0915 \u0926\u0915\u094d\u0937\u093f\u0923<\\\/span> through football, \\n innovation, and youth empowerment. Founded by <span class=\"\\\"highlight\\\"\">\u0938\u0932\u0940\u092e \u0939\u0941\u092e\u0948\u0926 \u0905\u0932\u092e\u091c\u093c\u0948\u0928\u0940<\\\/span> from the UAE, \\n BIFA+ creates bridges between nations through <span class=\"\\\"highlight\\\"\">\u0916\u0947\u0932 \u0915\u0942\u091f\u0928\u0940\u0924\u093f<\\\/span>, \\n <span class=\"\\\"highlight\\\"\">\u0938\u093e\u0902\u0938\u094d\u0915\u0943\u0924\u093f\u0915 \u0935\u093f\u0928\u093f\u092f\u092e\u0928<\\\/span>, \u0914\u0930 <span class=\"\\\"highlight\\\"\">\u092a\u094d\u0930\u094c\u0926\u094d\u092f\u094b\u0917\u093f\u0915\u0940 \u090f\u0915\u0940\u0915\u0930\u0923<\\\/span>.\\n <\\\/p>\\n <\\\/div>\\n\\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\\\"\">\u0935\u0948\u0936\u094d\u0935\u093f\u0915 \u0926\u0915\u094d\u0937\u093f\u0923 \u0930\u093e\u0937\u094d\u091f\u094d\u0930<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"stat-item\\\"\">\\n <\/p>\n<div class=\"\\\"stat-number\\\"\">3.8\u092c\u0940<\\\/div>\\n <\/p>\n<div class=\"\\\"stat-label\\\"\">\u091c\u0928\u0938\u0902\u0916\u094d\u092f\u093e \u0938\u0902\u092f\u0941\u0915\u094d\u0924<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"stat-item\\\"\">\\n <\/p>\n<div class=\"\\\"stat-number\\\"\">2024<\\\/div>\\n <\/p>\n<div class=\"\\\"stat-label\\\"\">\u0938\u094d\u0925\u093e\u092a\u0928\u093e \u0935\u0930\u094d\u0937<\\\/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\\\"\">\u092d\u0935\u093f\u0937\u094d\u092f \u0915\u0940 \u0938\u0902\u092d\u093e\u0935\u0928\u093e\u090f\u0902<\\\/div>\\n <\\\/div>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"video-slogan\\\"\">\\n <span class=\"\\\"slogan-main\\\"\">BIFA+: \u091c\u0939\u093e\u0902 \u0935\u0948\u0936\u094d\u0935\u093f\u0915 \u0926\u0915\u094d\u0937\u093f\u0923 \u0915\u0940 \u090a\u0930\u094d\u091c\u093e \u0905\u0902\u0924\u0930\u094d\u0930\u093e\u0937\u094d\u091f\u094d\u0930\u0940\u092f \u092b\u0941\u091f\u092c\u0949\u0932 \u0938\u0902\u0935\u093e\u0926 \u092e\u0947\u0902 \u092a\u0930\u093f\u0935\u0930\u094d\u0924\u093f\u0924 \u0939\u094b\u0924\u0940 \u0939\u0948<\\\/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+ \u092e\u0939\u093f\u0932\u093e<\\\/strong>, <strong>Youth & University initiatives<\\\/strong>, \\n <strong>\u0908\u092b\u0941\u091f\u092c\u0949\u0932 \u0917\u0947\u092e\u093f\u0902\u0917<\\\/strong>, \u0914\u0930 \u092f\u0939 <strong>\u0936\u0939\u0930\u094b\u0902 \u0915\u093e \u0928\u0947\u091f\u0935\u0930\u094d\u0915<\\\/strong>, we're building bridges between cultures \\n and creating opportunities for the next generation of global leaders across Brazil, UAE, Russia, China, India, \\n South Africa, Saudi Arabia, Egypt, Ethiopia, Indonesia, and beyond.\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"buttons-container\\\"\">\\n <a href=\"\\\"#join\\\"\" class=\"\\\"cta-button\" primary\\\">Join the Alliance<\\\/a>\\n <a href=\"\\\"#initiatives\\\"\" class=\"\\\"cta-button\" secondary\\\">Our Initiatives<\\\/a>\\n <a href=\"\\\"#partnership\\\"\" class=\"\\\"cta-button\" gold\\\">Become a Partner<\\\/a>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/section>\\n<\\\/div>\\n\\n<script>\\n\\\/\\\/ Global functions for iframe handling\\nfunction handleIframeLoad() {\\n console.log('Loading screen iframe loaded successfully');\\n}\\n\\nfunction handleIframeError() {\\n console.log('Loading screen iframe failed, showing fallback');\\n document.getElementById('loadingIframe').style.display = 'none';\\n document.getElementById('fallbackLoader').classList.add('active');\\n}\\n\\ndocument.addEventListener('DOMContentLoaded', () => {\\n \\\/\\\/ Letter Animation for Main Title\\n const titleElement = document.getElementById('mainTitle');\\n const titleText = titleElement.textContent;\\n titleElement.innerHTML = '';\\n \\n titleText.split('').forEach((letter, index) => {\\n const span = document.createElement('span');\\n span.className = 'letter';\\n span.textContent = letter === ' ' ? '\\\\u00A0' : letter;\\n span.style.animationDelay = `${0.3 + index * 0.15}s`;\\n titleElement.appendChild(span);\\n });\\n\\n const video = document.getElementById('heroVideo');\\n const playBtn = document.getElementById('playPause');\\n const muteBtn = document.getElementById('muteToggle');\\n const progress = document.getElementById('progress');\\n const progressBar = document.getElementById('progressBar');\\n const timeDisplay = document.getElementById('timeDisplay');\\n const volumeSlider = document.getElementById('volumeSlider');\\n const volumeBar = document.getElementById('volumeBar');\\n const fullscreenBtn = document.getElementById('fullscreenBtn');\\n const loadingOverlay = document.getElementById('videoLoadingOverlay');\\n\\n \\\/\\\/ Loading screen management\\n let videoReady = false;\\n let iframeReady = false;\\n\\n \\\/\\\/ Check if video is ready to play\\n const checkVideoReady = () => {\\n if (video.readyState >= 3) { \\\/\\\/ HAVE_FUTURE_DATA or greater\\n videoReady = true;\\n hideLoadingScreen();\\n }\\n };\\n\\n \\\/\\\/ Hide loading screen with smooth animation\\n const hideLoadingScreen = () => {\\n if (videoReady && loadingOverlay) {\\n setTimeout(() => {\\n loadingOverlay.classList.add('hidden');\\n \\\/\\\/ Remove overlay completely after animation\\n setTimeout(() => {\\n if (loadingOverlay.parentNode) {\\n loadingOverlay.style.display = 'none';\\n }\\n }, 800);\\n }, 1500); \\\/\\\/ Show loading for minimum 1.5 seconds\\n }\\n };\\n\\n \\\/\\\/ Video event listeners for loading\\n video.addEventListener('loadeddata', checkVideoReady);\\n video.addEventListener('canplay', checkVideoReady);\\n video.addEventListener('canplaythrough', () => {\\n videoReady = true;\\n hideLoadingScreen();\\n });\\n\\n \\\/\\\/ Fallback: hide loading screen after maximum time\\n setTimeout(() => {\\n if (loadingOverlay && !loadingOverlay.classList.contains('hidden')) {\\n console.log('Hiding loading screen after timeout');\\n hideLoadingScreen();\\n }\\n }, 8000); \\\/\\\/ Maximum 8 seconds\\n\\n \\\/\\\/ Play\\\/Pause Icons\\n const setPlayIcon = (paused) => {\\n playBtn.innerHTML = paused\\n ? '<svg viewbox=\"\\\"0\" 0 24 24\\\"><path d=\"\\\"M8\" 5v14l11-7z\\\"\\><\\\/svg>'\\n : '<svg viewbox=\"\\\"0\" 0 24 24\\\"><path d=\"\\\"M6\" 19h4v5h6zm8 0h4v5h-4z\\\"\\><\\\/svg>';\\n };\\n\\n \\\/\\\/ Mute\\\/Unmute Icons\\n const setMuteIcon = (muted) => {\\n muteBtn.innerHTML = muted\\n ? '<svg viewbox=\"\\\"0\" 0 24 24\\\"><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 : '<svg viewbox=\"\\\"0\" 0 24 24\\\"><path d=\"\\\"M4\" 9v6h4l5 5v4l8 9h4z\\\"\\><\\\/svg>';\\n };\\n\\n \\\/\\\/ Format time\\n const formatTime = (seconds) => {\\n const mins = Math.floor(seconds \\\/ 60);\\n const secs = Math.floor(seconds % 60);\\n return `${mins}:${secs.toString().padStart(2, '0')}`;\\n };\\n\\n \\\/\\\/ Play\\\/Pause functionality\\n playBtn.addEventListener('click', () => {\\n if (video.paused) {\\n video.play();\\n } else {\\n video.pause();\\n }\\n setPlayIcon(video.paused);\\n });\\n\\n \\\/\\\/ Mute\\\/Unmute functionality\\n muteBtn.addEventListener('click', () => {\\n video.muted = !video.muted;\\n setMuteIcon(video.muted);\\n volumeBar.style.width = video.muted ? '0%' : (video.volume * 100) + '%';\\n });\\n\\n \\\/\\\/ Progress bar update\\n video.addEventListener('timeupdate', () => {\\n const progress = (video.currentTime \\\/ video.duration) * 100;\\n progressBar.style.width = progress + '%';\\n timeDisplay.textContent = formatTime(video.currentTime);\\n });\\n\\n \\\/\\\/ Progress bar click\\n progress.addEventListener('click', (e) => {\\n const rect = progress.getBoundingClientRect();\\n const clickX = e.clientX - rect.left;\\n const clickPercent = clickX \\\/ rect.width;\\n video.currentTime = clickPercent * video.duration;\\n });\\n\\n \\\/\\\/ Volume control\\n volumeSlider.addEventListener('click', (e) => {\\n const rect = volumeSlider.getBoundingClientRect();\\n const clickX = e.clientX - rect.left;\\n const volume = clickX \\\/ rect.width;\\n video.volume = Math.max(0, Math.min(1, volume));\\n volumeBar.style.width = (video.volume * 100) + '%';\\n \\n if (video.volume === 0) {\\n video.muted = true;\\n } else {\\n video.muted = false;\\n }\\n setMuteIcon(video.muted);\\n });\\n\\n \\\/\\\/ Fullscreen functionality\\n fullscreenBtn.addEventListener('click', () => {\\n if (!document.fullscreenElement) {\\n video.parentElement.requestFullscreen();\\n } else {\\n document.exitFullscreen();\\n }\\n });\\n\\n \\\/\\\/ Initialize icons\\n setPlayIcon(video.paused);\\n setMuteIcon(video.muted);\\n volumeBar.style.width = (video.volume * 100) + '%';\\n\\n \\\/\\\/ Create optimized floating particles (reduced count for YooTheme compatibility)\\n const particlesContainer = document.querySelector('.bg-particles');\\n const particleCount = 15; \\\/\\\/ Reduced from 25 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\"},\"children\":[{\"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 Blocks - Final Version<\\\/title>\\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=Playfair+Display:wght@400;700;900&family=Lato:wght@300;400;700&family=Montserrat:wght@400;600;700;800&family=Cormorant+Garamond:wght@300;400;600;700&display=swap\\\"\" rel=\"\\\"stylesheet\\\"\">\\n\\n<\/p>\n<style>\\n* {\\n margin: 0;\\n padding: 0;\\n box-sizing: border-box;\\n}\\n\\nbody {\\n font-family: 'Lato', sans-serif;\\n background: #f8f9fa;\\n overflow-x: hidden;\\n}\\n\\n\\\/* Restart Animation Button *\\\/\\n.restart-button {\\n position: fixed;\\n bottom: 30px;\\n right: 30px;\\n background: #b8860b;\\n color: white;\\n border: none;\\n padding: 15px 30px;\\n border-radius: 50px;\\n font-family: 'Montserrat', sans-serif;\\n font-weight: 600;\\n font-size: 1rem;\\n cursor: pointer;\\n box-shadow: 0 5px 20px rgba(184, 134, 11, 0.3);\\n transition: all 0.3s ease;\\n z-index: 1000;\\n}\\n\\n.restart-button:hover {\\n background: #9a7209;\\n transform: translateY(-2px);\\n box-shadow: 0 8px 30px rgba(184, 134, 11, 0.4);\\n}\\n\\n.restart-button:active {\\n transform: translateY(0);\\n}\\n\\n\\\/* VARIANT 1 *\\\/\\n.quote-section-wrapper-v1 {\\n width: 100vw;\\n position: relative;\\n left: 50%;\\n right: 50%;\\n margin-left: -50vw;\\n margin-right: -50vw;\\n background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);\\n overflow: hidden;\\n margin-bottom: 100px;\\n}\\n\\n.quote-section-v1 {\\n padding: 80px 0;\\n position: relative;\\n}\\n\\n.quote-container-v1 {\\n max-width: 1200px;\\n margin: 0 auto;\\n padding: 0 40px;\\n position: relative;\\n}\\n\\n.quote-content-v1 {\\n position: relative;\\n padding: 60px 0;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n min-height: 300px;\\n}\\n\\n.logo-watermark-v1 {\\n position: absolute;\\n right: 0;\\n top: 50%;\\n transform: translateY(-50%);\\n width: 350px;\\n height: 350px;\\n background-image: url('\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/flag-logo1.svg');\\n background-size: contain;\\n background-repeat: no-repeat;\\n background-position: center right;\\n opacity: 0.03;\\n z-index: 0;\\n}\\n\\n.bird-animation-v1 {\\n position: absolute;\\n left: 50px;\\n top: 50%;\\n transform: translateY(-50%);\\n width: 80px;\\n height: 80px;\\n background-image: url('\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Logo\\\/bird.svg');\\n background-size: contain;\\n background-repeat: no-repeat;\\n filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.1));\\n animation: fly-to-right 3s ease-in-out forwards;\\n z-index: 3;\\n}\\n\\n@keyframes fly-to-right {\\n 0% {\\n left: -100px;\\n opacity: 0;\\n transform: translateY(-50%) rotate(-10deg);\\n }\\n 30% {\\n left: 50px;\\n opacity: 1;\\n transform: translateY(-50%) rotate(0deg);\\n }\\n 60% {\\n left: 150px;\\n transform: translateY(-60%) rotate(5deg);\\n }\\n 100% {\\n left: 200px;\\n transform: translateY(-50%) rotate(0deg);\\n opacity: 0.8;\\n }\\n}\\n\\n.bird-trail-v1 {\\n position: absolute;\\n left: 0;\\n top: 50%;\\n transform: translateY(-50%);\\n width: 250px;\\n height: 3px;\\n background: linear-gradient(90deg, transparent 0%, rgba(184, 134, 11, 0.3) 50%, transparent 100%);\\n opacity: 0;\\n animation: trail-appear 3s ease-in-out 0.5s forwards;\\n}\\n\\n@keyframes trail-appear {\\n 0% {\\n opacity: 0;\\n width: 0;\\n }\\n 100% {\\n opacity: 1;\\n width: 250px;\\n }\\n}\\n\\n.quote-reveal-v1 {\\n position: relative;\\n z-index: 2;\\n text-align: center;\\n max-width: 900px;\\n opacity: 0;\\n animation: reveal-quote 2s ease-out 1.5s forwards;\\n}\\n\\n@keyframes reveal-quote {\\n 0% {\\n opacity: 0;\\n transform: scale(0.9);\\n filter: blur(5px);\\n }\\n 100% {\\n opacity: 1;\\n transform: scale(1);\\n filter: blur(0);\\n }\\n}\\n\\n.quote-text-v1 {\\n font-family: 'Playfair Display', serif;\\n font-size: clamp(2rem, 3vw, 2.8rem);\\n font-weight: 400;\\n line-height: 1.5;\\n color: #1a3a52;\\n margin-bottom: 30px;\\n position: relative;\\n}\\n\\n.quote-text-v1 .golden-glow {\\n color: #b8860b;\\n position: relative;\\n display: inline-block;\\n animation: golden-pulse 3s ease-in-out infinite;\\n}\\n\\n@keyframes golden-pulse {\\n 0%, 100% {\\n text-shadow: 0 0 5px rgba(184, 134, 11, 0.3);\\n }\\n 50% {\\n text-shadow: 0 0 20px rgba(184, 134, 11, 0.5);\\n }\\n}\\n\\n.quote-author-v1 {\\n opacity: 0;\\n animation: fade-in-up 1s ease-out 2.5s forwards;\\n}\\n\\n@keyframes fade-in-up {\\n from {\\n opacity: 0;\\n transform: translateY(20px);\\n }\\n to {\\n opacity: 1;\\n transform: translateY(0);\\n }\\n}\\n\\n.author-dash {\\n display: inline-block;\\n width: 40px;\\n height: 2px;\\n background: #b8860b;\\n margin-right: 15px;\\n vertical-align: middle;\\n}\\n\\n.author-name-v1 {\\n font-family: 'Montserrat', sans-serif;\\n font-size: 1.1rem;\\n font-weight: 600;\\n color: #5a6c7d;\\n letter-spacing: 1px;\\n}\\n\\n\\\/* VARIANT 2 *\\\/\\n.quote-section-wrapper-v2 {\\n width: 100vw;\\n position: relative;\\n left: 50%;\\n right: 50%;\\n margin-left: -50vw;\\n margin-right: -50vw;\\n background: white;\\n overflow: hidden;\\n margin-bottom: 100px;\\n}\\n\\n.quote-section-v2 {\\n padding: 100px 0;\\n position: relative;\\n}\\n\\n.logo-watermark-v2 {\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n transform: translate(-50%, -50%);\\n width: 500px;\\n height: 500px;\\n background-image: url('\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Logo\\\/flag-logo.svg');\\n background-size: contain;\\n background-repeat: no-repeat;\\n background-position: center;\\n opacity: 0.02;\\n z-index: 0;\\n animation: subtle-rotate 60s linear infinite;\\n}\\n\\n@keyframes subtle-rotate {\\n from { transform: translate(-50%, -50%) rotate(0deg); }\\n to { transform: translate(-50%, -50%) rotate(360deg); }\\n}\\n\\n.bird-circle-v2 {\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n transform: translate(-50%, -50%);\\n width: 600px;\\n height: 600px;\\n animation: circle-rotate 30s linear infinite;\\n z-index: 1;\\n pointer-events: none;\\n}\\n\\n@keyframes circle-rotate {\\n from { transform: translate(-50%, -50%) rotate(0deg); }\\n to { transform: translate(-50%, -50%) rotate(360deg); }\\n}\\n\\n.bird-v2 {\\n position: absolute;\\n top: 0;\\n left: 50%;\\n transform: translateX(-50%);\\n width: 50px;\\n height: 50px;\\n background-image: url('\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Logo\\\/bird.svg');\\n background-size: contain;\\n background-repeat: no-repeat;\\n opacity: 0.2;\\n filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));\\n animation: bird-self-rotate 30s linear infinite reverse;\\n}\\n\\n@keyframes bird-self-rotate {\\n from { transform: translateX(-50%) rotate(0deg); }\\n to { transform: translateX(-50%) rotate(-360deg); }\\n}\\n\\n.decorative-lines-v2 {\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n overflow: hidden;\\n z-index: 0;\\n}\\n\\n.line-v2 {\\n position: absolute;\\n background: rgba(184, 134, 11, 0.1);\\n animation: float-line 20s ease-in-out infinite;\\n}\\n\\n.line-v2:nth-child(1) {\\n width: 1px;\\n height: 200px;\\n left: 10%;\\n top: 20%;\\n animation-duration: 15s;\\n}\\n\\n.line-v2:nth-child(2) {\\n width: 200px;\\n height: 1px;\\n right: 10%;\\n top: 70%;\\n animation-duration: 25s;\\n}\\n\\n.line-v2:nth-child(3) {\\n width: 1px;\\n height: 150px;\\n right: 20%;\\n bottom: 20%;\\n animation-duration: 20s;\\n}\\n\\n@keyframes float-line {\\n 0%, 100% {\\n transform: translate(0, 0) rotate(0deg);\\n opacity: 0.1;\\n }\\n 50% {\\n transform: translate(20px, -20px) rotate(5deg);\\n opacity: 0.3;\\n }\\n}\\n\\n.quote-container-v2 {\\n max-width: 1000px;\\n margin: 0 auto;\\n padding: 0 40px;\\n position: relative;\\n z-index: 2;\\n}\\n\\n.quote-frame-v2 {\\n position: relative;\\n padding: 80px 60px;\\n opacity: 0;\\n animation: fade-in-scale 1.5s ease-out 0.5s forwards;\\n}\\n\\n@keyframes fade-in-scale {\\n from {\\n opacity: 0;\\n transform: scale(0.95);\\n }\\n to {\\n opacity: 1;\\n transform: scale(1);\\n }\\n}\\n\\n.top-accent-v2 {\\n position: absolute;\\n top: 0;\\n left: 50%;\\n transform: translateX(-50%);\\n display: flex;\\n align-items: center;\\n gap: 20px;\\n}\\n\\n.accent-line {\\n width: 60px;\\n height: 1px;\\n background: #b8860b;\\n}\\n\\n.accent-dot {\\n width: 8px;\\n height: 8px;\\n background: #b8860b;\\n border-radius: 50%;\\n animation: pulse-dot 2s ease-in-out infinite;\\n}\\n\\n@keyframes pulse-dot {\\n 0%, 100% {\\n transform: scale(1);\\n opacity: 1;\\n }\\n 50% {\\n transform: scale(1.5);\\n opacity: 0.6;\\n }\\n}\\n\\n.quote-text-v2 {\\n font-family: 'Cormorant Garamond', serif;\\n font-size: clamp(2.2rem, 3.5vw, 3rem);\\n font-weight: 300;\\n color: #1a3a52;\\n line-height: 1.6;\\n text-align: center;\\n margin-bottom: 50px;\\n letter-spacing: 0.5px;\\n}\\n\\n.quote-text-v2 em {\\n font-style: normal;\\n font-weight: 600;\\n color: #b8860b;\\n position: relative;\\n display: inline-block;\\n animation: glow-text 3s ease-in-out infinite;\\n}\\n\\n@keyframes glow-text {\\n 0%, 100% {\\n text-shadow: 0 0 5px rgba(184, 134, 11, 0.2);\\n }\\n 50% {\\n text-shadow: 0 0 15px rgba(184, 134, 11, 0.4);\\n }\\n}\\n\\n.quote-text-v2 em::after {\\n content: '';\\n position: absolute;\\n bottom: -3px;\\n left: 0;\\n width: 100%;\\n height: 1px;\\n background: #b8860b;\\n opacity: 0.3;\\n}\\n\\n.author-section-v2 {\\n text-align: center;\\n position: relative;\\n}\\n\\n.author-section-v2::before {\\n content: '';\\n position: absolute;\\n top: -30px;\\n left: 50%;\\n transform: translateX(-50%);\\n width: 40px;\\n height: 1px;\\n background: rgba(184, 134, 11, 0.5);\\n}\\n\\n.author-name-v2 {\\n font-family: 'Montserrat', sans-serif;\\n font-size: 0.9rem;\\n font-weight: 700;\\n text-transform: uppercase;\\n letter-spacing: 3px;\\n color: #b8860b;\\n margin-bottom: 8px;\\n}\\n\\n.author-title-v2 {\\n font-family: 'Lato', sans-serif;\\n font-size: 0.85rem;\\n color: #8a8a8a;\\n letter-spacing: 1px;\\n}\\n\\n\\\/* VARIANT 3 *\\\/\\n.quote-section-wrapper-v3 {\\n width: 100vw;\\n position: relative;\\n left: 50%;\\n right: 50%;\\n margin-left: -50vw;\\n margin-right: -50vw;\\n background: #f5f7fa;\\n overflow: hidden;\\n margin-bottom: 100px;\\n}\\n\\n.quote-section-v3 {\\n padding: 90px 0;\\n position: relative;\\n}\\n\\n.geometric-pattern-v3 {\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n overflow: hidden;\\n z-index: 0;\\n}\\n\\n.geo-shape {\\n position: absolute;\\n border: 1px solid rgba(184, 134, 11, 0.1);\\n}\\n\\n.geo-shape:nth-child(1) {\\n width: 100px;\\n height: 100px;\\n border-radius: 50%;\\n top: 10%;\\n left: 5%;\\n animation: rotate-slow 30s linear infinite;\\n}\\n\\n.geo-shape:nth-child(2) {\\n width: 80px;\\n height: 80px;\\n transform: rotate(45deg);\\n bottom: 15%;\\n right: 10%;\\n animation: rotate-slow 25s linear infinite reverse;\\n}\\n\\n.geo-shape:nth-child(3) {\\n width: 120px;\\n height: 120px;\\n border-radius: 30%;\\n top: 50%;\\n right: 5%;\\n animation: rotate-slow 35s linear infinite;\\n}\\n\\n@keyframes rotate-slow {\\n from { transform: rotate(0deg); }\\n to { transform: rotate(360deg); }\\n}\\n\\n.logo-geometric-v3 {\\n position: absolute;\\n top: 20%;\\n right: 10%;\\n width: 150px;\\n height: 150px;\\n z-index: 1;\\n animation: float-geometric 8s ease-in-out infinite;\\n}\\n\\n@keyframes float-geometric {\\n 0%, 100% {\\n transform: translate(0, 0) rotate(0deg);\\n }\\n 25% {\\n transform: translate(-20px, 10px) rotate(90deg);\\n }\\n 50% {\\n transform: translate(0, 20px) rotate(180deg);\\n }\\n 75% {\\n transform: translate(20px, 10px) rotate(270deg);\\n }\\n}\\n\\n.logo-frame-v3 {\\n width: 100%;\\n height: 100%;\\n position: relative;\\n background-image: url('\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/flag-logo1.svg');\\n background-size: 60%;\\n background-repeat: no-repeat;\\n background-position: center;\\n opacity: 0.05;\\n}\\n\\n.logo-frame-v3::before {\\n content: '';\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n border: 2px solid rgba(184, 134, 11, 0.1);\\n transform: rotate(45deg);\\n animation: pulse-frame 4s ease-in-out infinite;\\n}\\n\\n@keyframes pulse-frame {\\n 0%, 100% {\\n transform: rotate(45deg) scale(1);\\n opacity: 0.3;\\n }\\n 50% {\\n transform: rotate(45deg) scale(1.1);\\n opacity: 0.1;\\n }\\n}\\n\\n.bird-spiral-v3 {\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n transform: translate(-50%, -50%);\\n width: 400px;\\n height: 400px;\\n animation: spiral-rotate 20s linear infinite;\\n z-index: 1;\\n pointer-events: none;\\n}\\n\\n@keyframes spiral-rotate {\\n from {\\n transform: translate(-50%, -50%) rotate(0deg);\\n }\\n to {\\n transform: translate(-50%, -50%) rotate(360deg);\\n }\\n}\\n\\n.bird-icon-v3 {\\n position: absolute;\\n top: 0;\\n left: 50%;\\n transform: translateX(-50%);\\n width: 60px;\\n height: 60px;\\n background-image: url('\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Logo\\\/bird.svg');\\n background-size: contain;\\n background-repeat: no-repeat;\\n opacity: 0.15;\\n filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.1));\\n animation: bird-spiral-move 20s ease-in-out infinite;\\n}\\n\\n@keyframes bird-spiral-move {\\n 0%, 100% {\\n transform: translateX(-50%) scale(1);\\n }\\n 25% {\\n transform: translateX(-50%) scale(0.8) translateY(20px);\\n }\\n 50% {\\n transform: translateX(-50%) scale(1.2) translateY(0);\\n }\\n 75% {\\n transform: translateX(-50%) scale(0.9) translateY(-20px);\\n }\\n}\\n\\n.quote-container-v3 {\\n max-width: 1100px;\\n margin: 0 auto;\\n padding: 0 40px;\\n position: relative;\\n z-index: 2;\\n}\\n\\n.quote-card-v3 {\\n background: white;\\n padding: 70px;\\n position: relative;\\n box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);\\n overflow: hidden;\\n opacity: 0;\\n transform: translateY(30px);\\n animation: slide-up 1.2s ease-out 0.3s forwards;\\n}\\n\\n@keyframes slide-up {\\n to {\\n opacity: 1;\\n transform: translateY(0);\\n }\\n}\\n\\n.corner-accent-v3 {\\n position: absolute;\\n width: 40px;\\n height: 40px;\\n}\\n\\n.corner-accent-v3::before,\\n.corner-accent-v3::after {\\n content: '';\\n position: absolute;\\n background: #b8860b;\\n animation: corner-glow 3s ease-in-out infinite;\\n}\\n\\n@keyframes corner-glow {\\n 0%, 100% {\\n opacity: 1;\\n }\\n 50% {\\n opacity: 0.5;\\n }\\n}\\n\\n.corner-accent-v3.top-left {\\n top: 0;\\n left: 0;\\n}\\n\\n.corner-accent-v3.top-left::before {\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 2px;\\n}\\n\\n.corner-accent-v3.top-left::after {\\n top: 0;\\n left: 0;\\n width: 2px;\\n height: 100%;\\n}\\n\\n.corner-accent-v3.bottom-right {\\n bottom: 0;\\n right: 0;\\n}\\n\\n.corner-accent-v3.bottom-right::before {\\n bottom: 0;\\n right: 0;\\n width: 100%;\\n height: 2px;\\n}\\n\\n.corner-accent-v3.bottom-right::after {\\n bottom: 0;\\n right: 0;\\n width: 2px;\\n height: 100%;\\n}\\n\\n.quote-text-v3 {\\n font-family: 'Playfair Display', serif;\\n font-size: clamp(2rem, 3vw, 2.6rem);\\n font-weight: 700;\\n color: #1a3a52;\\n line-height: 1.4;\\n margin-bottom: 40px;\\n}\\n\\n.quote-text-v3 .accent-word {\\n position: relative;\\n color: #b8860b;\\n display: inline-block;\\n animation: word-pulse 2s ease-in-out infinite;\\n}\\n\\n@keyframes word-pulse {\\n 0%, 100% {\\n transform: scale(1);\\n }\\n 50% {\\n transform: scale(1.05);\\n }\\n}\\n\\n.quote-text-v3 .accent-word::before {\\n content: '';\\n position: absolute;\\n bottom: -5px;\\n left: -5px;\\n right: -5px;\\n height: 15px;\\n background: rgba(184, 134, 11, 0.1);\\n z-index: -1;\\n transform: skew(-5deg);\\n}\\n\\n.author-wrapper-v3 {\\n display: flex;\\n align-items: center;\\n gap: 20px;\\n opacity: 0;\\n animation: fade-in 1s ease-out 1s forwards;\\n}\\n\\n@keyframes fade-in {\\n to {\\n opacity: 1;\\n }\\n}\\n\\n.author-avatar-v3 {\\n width: 60px;\\n height: 60px;\\n background: linear-gradient(135deg, #b8860b, #ffd700);\\n border-radius: 50%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n font-family: 'Playfair Display', serif;\\n font-size: 1.5rem;\\n font-weight: 700;\\n color: white;\\n animation: avatar-rotate 10s linear infinite;\\n}\\n\\n@keyframes avatar-rotate {\\n 0%, 100% {\\n transform: rotate(0deg);\\n }\\n 50% {\\n transform: rotate(10deg);\\n }\\n}\\n\\n.author-info-v3 {\\n text-align: left;\\n}\\n\\n.author-name-v3 {\\n font-family: 'Montserrat', sans-serif;\\n font-size: 1.1rem;\\n font-weight: 700;\\n color: #1a3a52;\\n margin-bottom: 5px;\\n}\\n\\n.author-title-v3 {\\n font-family: 'Lato', sans-serif;\\n font-size: 0.9rem;\\n color: #6a7a8a;\\n}\\n\\n\\\/* VARIANT 4 *\\\/\\n.quote-section-wrapper-v4 {\\n width: 100vw;\\n position: relative;\\n left: 50%;\\n right: 50%;\\n margin-left: -50vw;\\n margin-right: -50vw;\\n background: linear-gradient(135deg, #1a3a52 0%, #2c5f7c 50%, #1a3a52 100%);\\n overflow: hidden;\\n margin-bottom: 100px;\\n}\\n\\n.quote-section-v4 {\\n padding: 100px 0;\\n position: relative;\\n}\\n\\n.particles-v4 {\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n overflow: hidden;\\n z-index: 0;\\n}\\n\\n.particle {\\n position: absolute;\\n width: 4px;\\n height: 4px;\\n background: rgba(255, 215, 0, 0.6);\\n border-radius: 50%;\\n animation: float-up 15s linear infinite;\\n}\\n\\n.particle:nth-child(1) { left: 10%; animation-delay: 0s; }\\n.particle:nth-child(2) { left: 30%; animation-delay: 3s; }\\n.particle:nth-child(3) { left: 50%; animation-delay: 6s; }\\n.particle:nth-child(4) { left: 70%; animation-delay: 9s; }\\n.particle:nth-child(5) { left: 90%; animation-delay: 12s; }\\n\\n@keyframes float-up {\\n 0% {\\n bottom: -10px;\\n opacity: 0;\\n }\\n 10% {\\n opacity: 1;\\n }\\n 90% {\\n opacity: 1;\\n }\\n 100% {\\n bottom: 100%;\\n opacity: 0;\\n }\\n}\\n\\n.bird-light-trail-v4 {\\n position: absolute;\\n top: 20%;\\n left: -100px;\\n z-index: 2;\\n animation: fly-across 15s ease-in-out infinite;\\n}\\n\\n@keyframes fly-across {\\n 0% {\\n left: -100px;\\n opacity: 0;\\n }\\n 10% {\\n opacity: 1;\\n }\\n 90% {\\n opacity: 1;\\n }\\n 100% {\\n left: calc(100% + 100px);\\n opacity: 0;\\n }\\n}\\n\\n.light-bird-v4 {\\n width: 70px;\\n height: 70px;\\n background-image: url('\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Logo\\\/bird.svg');\\n background-size: contain;\\n background-repeat: no-repeat;\\n filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(255, 215, 0, 0.8));\\n position: relative;\\n z-index: 2;\\n}\\n\\n.trail-light {\\n position: absolute;\\n top: 50%;\\n left: -200px;\\n transform: translateY(-50%);\\n width: 200px;\\n height: 2px;\\n background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.8), rgba(255, 215, 0, 0.4), transparent);\\n filter: blur(2px);\\n animation: trail-fade 15s ease-in-out infinite;\\n}\\n\\n@keyframes trail-fade {\\n 0%, 10% {\\n opacity: 0;\\n }\\n 20%, 80% {\\n opacity: 1;\\n }\\n 90%, 100% {\\n opacity: 0;\\n }\\n}\\n\\n.logo-animated-v4 {\\n position: absolute;\\n bottom: 10%;\\n right: 5%;\\n width: 120px;\\n height: 120px;\\n z-index: 1;\\n perspective: 1000px;\\n}\\n\\n.logo-3d-v4 {\\n width: 100%;\\n height: 100%;\\n background-image: url('\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Logo\\\/flag-logo.svg');\\n background-size: contain;\\n background-repeat: no-repeat;\\n background-position: center;\\n opacity: 0.1;\\n filter: brightness(0) invert(1);\\n transform-style: preserve-3d;\\n animation: logo-3d-rotate 20s linear infinite;\\n}\\n\\n@keyframes logo-3d-rotate {\\n 0% {\\n transform: rotateY(0deg) rotateX(0deg);\\n }\\n 25% {\\n transform: rotateY(90deg) rotateX(10deg);\\n }\\n 50% {\\n transform: rotateY(180deg) rotateX(-10deg);\\n }\\n 75% {\\n transform: rotateY(270deg) rotateX(10deg);\\n }\\n 100% {\\n transform: rotateY(360deg) rotateX(0deg);\\n }\\n}\\n\\n.quote-container-v4 {\\n max-width: 900px;\\n margin: 0 auto;\\n padding: 0 40px;\\n position: relative;\\n z-index: 3;\\n}\\n\\n.quote-glass-v4 {\\n background: rgba(255, 255, 255, 0.05);\\n backdrop-filter: blur(20px);\\n border: 1px solid rgba(255, 255, 255, 0.1);\\n border-radius: 20px;\\n padding: 80px 60px;\\n position: relative;\\n overflow: hidden;\\n opacity: 0;\\n transform: translateY(50px);\\n animation: glass-appear 1.5s ease-out 0.5s forwards;\\n}\\n\\n@keyframes glass-appear {\\n to {\\n opacity: 1;\\n transform: translateY(0);\\n }\\n}\\n\\n.golden-frame-v4 {\\n position: absolute;\\n top: 20px;\\n left: 20px;\\n right: 20px;\\n bottom: 20px;\\n border: 1px solid rgba(255, 215, 0, 0.3);\\n border-radius: 15px;\\n pointer-events: none;\\n}\\n\\n.golden-frame-v4::before {\\n content: '';\\n position: absolute;\\n top: -1px;\\n left: -1px;\\n right: -1px;\\n bottom: -1px;\\n background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.5), transparent);\\n border-radius: 15px;\\n animation: frame-glow 4s linear infinite;\\n}\\n\\n@keyframes frame-glow {\\n 0% { transform: translateX(-100%); }\\n 100% { transform: translateX(100%); }\\n}\\n\\n.quote-marks-v4 {\\n font-family: 'Playfair Display', serif;\\n font-size: 4rem;\\n color: rgba(255, 215, 0, 0.2);\\n position: absolute;\\n top: 30px;\\n left: 30px;\\n animation: quote-pulse 3s ease-in-out infinite;\\n}\\n\\n@keyframes quote-pulse {\\n 0%, 100% {\\n opacity: 0.2;\\n transform: scale(1);\\n }\\n 50% {\\n opacity: 0.4;\\n transform: scale(1.1);\\n }\\n}\\n\\n.quote-text-v4 {\\n font-family: 'Playfair Display', serif;\\n font-size: clamp(2rem, 3vw, 2.8rem);\\n font-weight: 400;\\n color: white;\\n line-height: 1.6;\\n text-align: center;\\n margin-bottom: 50px;\\n text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);\\n}\\n\\n.quote-text-v4 .golden {\\n color: #ffd700;\\n font-weight: 700;\\n display: inline-block;\\n animation: golden-shine 3s ease-in-out infinite;\\n}\\n\\n@keyframes golden-shine {\\n 0%, 100% {\\n text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);\\n transform: scale(1);\\n }\\n 50% {\\n text-shadow: 0 0 30px rgba(255, 215, 0, 0.8);\\n transform: scale(1.05);\\n }\\n}\\n\\n.author-glow-v4 {\\n text-align: center;\\n position: relative;\\n opacity: 0;\\n animation: author-fade-in 1s ease-out 1.5s forwards;\\n}\\n\\n@keyframes author-fade-in {\\n to {\\n opacity: 1;\\n }\\n}\\n\\n.author-glow-v4::before {\\n content: '';\\n position: absolute;\\n top: -30px;\\n left: 50%;\\n transform: translateX(-50%);\\n width: 100px;\\n height: 1px;\\n background: linear-gradient(90deg, transparent, #ffd700, transparent);\\n}\\n\\n.author-name-v4 {\\n font-family: 'Montserrat', sans-serif;\\n font-size: 1.2rem;\\n font-weight: 600;\\n color: #ffd700;\\n text-transform: uppercase;\\n letter-spacing: 2px;\\n margin-bottom: 10px;\\n text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);\\n}\\n\\n.author-title-v4 {\\n font-family: 'Lato', sans-serif;\\n font-size: 1rem;\\n color: rgba(255, 255, 255, 0.7);\\n letter-spacing: 1px;\\n}\\n\\n.variant-title {\\n text-align: center;\\n font-size: 2.5rem;\\n font-weight: 800;\\n margin-bottom: 20px;\\n font-family: 'Montserrat', sans-serif;\\n color: #1a3a52;\\n}\\n\\n.divider {\\n height: 1px;\\n background: linear-gradient(90deg, transparent, #b8860b, transparent);\\n margin: 80px auto;\\n max-width: 200px;\\n}\\n\\n\\\/* Responsive Design *\\\/\\n@media (max-width: 968px) {\\n .quote-section-v1,\\n .quote-section-v2,\\n .quote-section-v3,\\n .quote-section-v4 {\\n padding: 60px 0;\\n }\\n \\n .quote-frame-v2,\\n .quote-card-v3,\\n .quote-glass-v4 {\\n padding: 50px 40px;\\n }\\n \\n .quote-text-v1,\\n .quote-text-v2,\\n .quote-text-v3,\\n .quote-text-v4 {\\n font-size: clamp(1.5rem, 4vw, 2.5rem);\\n }\\n \\n .bird-animation-v1 {\\n width: 60px;\\n height: 60px;\\n }\\n \\n .logo-watermark-v1,\\n .logo-watermark-v2 {\\n width: 250px;\\n height: 250px;\\n }\\n \\n .bird-circle-v2 {\\n width: 400px;\\n height: 400px;\\n }\\n \\n .logo-geometric-v3 {\\n width: 100px;\\n height: 100px;\\n }\\n}\\n\\n@media (max-width: 640px) {\\n .restart-button {\\n bottom: 20px;\\n right: 20px;\\n padding: 12px 24px;\\n font-size: 0.9rem;\\n }\\n\\n .quote-container-v1,\\n .quote-container-v2,\\n .quote-container-v3,\\n .quote-container-v4 {\\n padding: 0 20px;\\n }\\n \\n .quote-frame-v2,\\n .quote-card-v3,\\n .quote-glass-v4 {\\n padding: 40px 30px;\\n }\\n \\n .bird-animation-v1 {\\n left: 20px;\\n }\\n \\n @keyframes fly-to-right {\\n 0% {\\n left: -50px;\\n opacity: 0;\\n transform: translateY(-50%) rotate(-10deg);\\n }\\n 30% {\\n left: 20px;\\n opacity: 1;\\n transform: translateY(-50%) rotate(0deg);\\n }\\n 60% {\\n left: 60px;\\n transform: translateY(-60%) rotate(5deg);\\n }\\n 100% {\\n left: 100px;\\n transform: translateY(-50%) rotate(0deg);\\n opacity: 0.8;\\n }\\n }\\n \\n .bird-circle-v2 {\\n width: 300px;\\n height: 300px;\\n }\\n \\n .bird-v2 {\\n width: 40px;\\n height: 40px;\\n }\\n \\n .bird-spiral-v3 {\\n width: 300px;\\n height: 300px;\\n }\\n \\n .bird-icon-v3 {\\n width: 40px;\\n height: 40px;\\n }\\n \\n .logo-geometric-v3 {\\n display: none;\\n }\\n \\n .bird-light-trail-v4 {\\n top: 10%;\\n }\\n \\n .light-bird-v4 {\\n width: 50px;\\n height: 50px;\\n }\\n \\n .logo-animated-v4 {\\n width: 80px;\\n height: 80px;\\n }\\n \\n .author-wrapper-v3 {\\n flex-direction: column;\\n text-align: center;\\n }\\n \\n .author-info-v3 {\\n text-align: center;\\n }\\n \\n .side-accent-v3 {\\n display: none;\\n }\\n}\\n<\\\/style>\\n<\\\/head>\\n<body>\\n\\n<button class=\"\\\"restart-button\\\"\" onclick=\"\\\"restartAnimations()\\\"\">Restart Animations<\\\/button>\\n\\n\\n<\/p>\n<h1 class=\"\\\"variant-title\\\"\">Variant 1 - Flying Bird Opening<\\\/h1>\\n<\/p>\n<div class=\"\\\"quote-section-wrapper-v1\\\"\">\\n <\/p>\n<section class=\"\\\"quote-section-v1\\\"\">\\n <\/p>\n<div class=\"\\\"quote-container-v1\\\"\">\\n <\/p>\n<div class=\"\\\"quote-content-v1\\\"\">\\n <\/p>\n<div class=\"\\\"logo-watermark-v1\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"bird-animation-v1\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"bird-trail-v1\\\"\"><\\\/div>\\n \\n <\/p>\n<div class=\"\\\"quote-reveal-v1\\\"\">\\n <\/p>\n<h2 class=\"\\\"quote-text-v1\\\"\">\\n We're not just playing a game.<br \/>\\n <span class=\"\\\"golden-glow\\\"\">We're building the future.<\\\/span>\\n <\\\/h2>\\n \\n <\/p>\n<div class=\"\\\"quote-author-v1\\\"\">\\n <span class=\"\\\"author-dash\\\"\"><\\\/span>\\n <span class=\"\\\"author-name-v1\\\"\">Salim Almazaini, Founder & President, BIFA & BIFA+<\\\/span>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/section>\\n<\\\/div>\\n\\n<\/p>\n<div class=\"\\\"divider\\\"\"><\\\/div>\\n\\n\\n<\/p>\n<h1 class=\"\\\"variant-title\\\"\">Variant 2 - Minimalist Elegance<\\\/h1>\\n<\/p>\n<div class=\"\\\"quote-section-wrapper-v2\\\"\">\\n <\/p>\n<section class=\"\\\"quote-section-v2\\\"\">\\n <\/p>\n<div class=\"\\\"decorative-lines-v2\\\"\">\\n <\/p>\n<div class=\"\\\"line-v2\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"line-v2\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"line-v2\\\"\"><\\\/div>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"logo-watermark-v2\\\"\"><\\\/div>\\n \\n <\/p>\n<div class=\"\\\"bird-circle-v2\\\"\">\\n <\/p>\n<div class=\"\\\"bird-v2\\\"\"><\\\/div>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"quote-container-v2\\\"\">\\n <\/p>\n<div class=\"\\\"quote-frame-v2\\\"\">\\n <\/p>\n<div class=\"\\\"top-accent-v2\\\"\">\\n <\/p>\n<div class=\"\\\"accent-line\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"accent-dot\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"accent-line\\\"\"><\\\/div>\\n <\\\/div>\\n \\n <\/p>\n<h2 class=\"\\\"quote-text-v2\\\"\">\\n We're not just playing a game. <em>We're building the future.<\\\/em>\\n <\\\/h2>\\n \\n <\/p>\n<div class=\"\\\"author-section-v2\\\"\">\\n <\/p>\n<p class=\"\\\"author-name-v2\\\"\">Salim Almazaini<\\\/p>\\n <\/p>\n<p class=\"\\\"author-title-v2\\\"\">Founder & President, BIFA & BIFA+<\\\/p>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/section>\\n<\\\/div>\\n\\n<\/p>\n<div class=\"\\\"divider\\\"\"><\\\/div>\\n\\n\\n<\/p>\n<h1 class=\"\\\"variant-title\\\"\">Variant 3 - Geometric Modern<\\\/h1>\\n<\/p>\n<div class=\"\\\"quote-section-wrapper-v3\\\"\">\\n <\/p>\n<section class=\"\\\"quote-section-v3\\\"\">\\n <\/p>\n<div class=\"\\\"geometric-pattern-v3\\\"\">\\n <\/p>\n<div class=\"\\\"geo-shape\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"geo-shape\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"geo-shape\\\"\"><\\\/div>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"logo-geometric-v3\\\"\">\\n <\/p>\n<div class=\"\\\"logo-frame-v3\\\"\"><\\\/div>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"bird-spiral-v3\\\"\">\\n <\/p>\n<div class=\"\\\"bird-icon-v3\\\"\"><\\\/div>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"quote-container-v3\\\"\">\\n <\/p>\n<div class=\"\\\"quote-card-v3\\\"\">\\n <\/p>\n<div class=\"\\\"corner-accent-v3\" top-left\\\"><\\\/div>\\n <\/p>\n<div class=\"\\\"corner-accent-v3\" bottom-right\\\"><\\\/div>\\n \\n <\/p>\n<h2 class=\"\\\"quote-text-v3\\\"\">\\n We're not just playing a game.<br \/>\\n We're building the <span class=\"\\\"accent-word\\\"\">future<\\\/span>.\\n <\\\/h2>\\n \\n <\/p>\n<div class=\"\\\"author-wrapper-v3\\\"\">\\n <\/p>\n<div class=\"\\\"author-avatar-v3\\\"\">SA<\\\/div>\\n <\/p>\n<div class=\"\\\"author-info-v3\\\"\">\\n <\/p>\n<p class=\"\\\"author-name-v3\\\"\">Salim Almazaini<\\\/p>\\n <\/p>\n<p class=\"\\\"author-title-v3\\\"\">Founder & President, BIFA & BIFA+<\\\/p>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/section>\\n<\\\/div>\\n\\n<\/p>\n<div class=\"\\\"divider\\\"\"><\\\/div>\\n\\n\\n<\/p>\n<h1 class=\"\\\"variant-title\\\"\">Variant 4 - Premium Gradient<\\\/h1>\\n<\/p>\n<div class=\"\\\"quote-section-wrapper-v4\\\"\">\\n <\/p>\n<section class=\"\\\"quote-section-v4\\\"\">\\n <\/p>\n<div class=\"\\\"particles-v4\\\"\">\\n <\/p>\n<div class=\"\\\"particle\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"particle\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"particle\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"particle\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"particle\\\"\"><\\\/div>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"bird-light-trail-v4\\\"\">\\n <\/p>\n<div class=\"\\\"light-bird-v4\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"trail-light\\\"\"><\\\/div>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"logo-animated-v4\\\"\">\\n <\/p>\n<div class=\"\\\"logo-3d-v4\\\"\"><\\\/div>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"quote-container-v4\\\"\">\\n <\/p>\n<div class=\"\\\"quote-glass-v4\\\"\">\\n <\/p>\n<div class=\"\\\"golden-frame-v4\\\"\"><\\\/div>\\n <span class=\"\\\"quote-marks-v4\\\"\">\\\"<\\\/span>\\n \\n <\/p>\n<h2 class=\"\\\"quote-text-v4\\\"\">\\n We're not just playing a game.<br \/>\\n We're building the <span class=\"\\\"golden\\\"\">future<\\\/span>.\\n <\\\/h2>\\n \\n <\/p>\n<div class=\"\\\"author-glow-v4\\\"\">\\n <\/p>\n<p class=\"\\\"author-name-v4\\\"\">Salim Almazaini<\\\/p>\\n <\/p>\n<p class=\"\\\"author-title-v4\\\"\">Founder & President, BIFA & BIFA+<\\\/p>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/section>\\n<\\\/div>\\n\\n<script>\\nfunction restartAnimations() {\\n const allAnimatedElements = document.querySelectorAll('*');\\n \\n allAnimatedElements.forEach(element => {\\n const animations = element.getAnimations();\\n animations.forEach(animation => {\\n animation.cancel();\\n animation.play();\\n });\\n });\\n\\n const button = document.querySelector('.restart-button');\\n button.textContent = 'Restarting...';\\n button.style.transform = 'scale(0.95)';\\n \\n setTimeout(() => {\\n button.textContent = 'Restart Animations';\\n button.style.transform = 'scale(1)';\\n }, 500);\\n}\\n\\ndocument.addEventListener('DOMContentLoaded', function() {\\n const observerOptions = {\\n threshold: 0.3,\\n rootMargin: '0px 0px -50px 0px'\\n };\\n\\n const observer = new IntersectionObserver((entries) => {\\n entries.forEach(entry => {\\n if (entry.isIntersecting) {\\n if (entry.target.classList.contains('quote-section-v1')) {\\n const bird = entry.target.querySelector('.bird-animation-v1');\\n if (bird) {\\n bird.style.animationPlayState = 'running';\\n }\\n }\\n observer.unobserve(entry.target);\\n }\\n });\\n }, observerOptions);\\n\\n document.querySelectorAll('[class*=\\\"quote-section-v\\\"]').forEach(section => {\\n observer.observe(section);\\n });\\n\\n document.querySelectorAll('[class*=\\\"quote-text\\\"]').forEach(quote => {\\n quote.addEventListener('mouseenter', function() {\\n this.style.transition = 'transform 0.3s ease';\\n this.style.transform = 'scale(1.02)';\\n });\\n \\n quote.addEventListener('mouseleave', function() {\\n this.style.transform = 'scale(1)';\\n });\\n });\\n\\n let ticking = false;\\n function updateParallax() {\\n const scrolled = window.pageYOffset;\\n \\n document.querySelectorAll('.line-v2').forEach((line, index) => {\\n const speed = 0.5 + (index * 0.1);\\n line.style.transform = `translateY(${scrolled * speed}px)`;\\n });\\n \\n document.querySelectorAll('.geo-shape').forEach((shape, index) => {\\n const speed = 0.3 + (index * 0.1);\\n shape.style.transform = `translateY(${scrolled * speed}px) rotate(${scrolled * 0.1}deg)`;\\n });\\n \\n ticking = false;\\n }\\n\\n function requestTick() {\\n if (!ticking) {\\n window.requestAnimationFrame(updateParallax);\\n ticking = true;\\n }\\n }\\n\\n window.addEventListener('scroll', requestTick);\\n\\n const glassCard = document.querySelector('.quote-glass-v4');\\n if (glassCard) {\\n glassCard.addEventListener('mousemove', (e) => {\\n const rect = glassCard.getBoundingClientRect();\\n const x = ((e.clientX - rect.left) \\\/ rect.width - 0.5) * 2;\\n const y = ((e.clientY - rect.top) \\\/ rect.height - 0.5) * 2;\\n \\n glassCard.style.transform = `perspective(1000px) rotateY(${x * 5}deg) rotateX(${-y * 5}deg)`;\\n });\\n \\n glassCard.addEventListener('mouseleave', () => {\\n glassCard.style.transform = 'perspective(1000px) rotateY(0deg) rotateX(0deg)';\\n });\\n }\\n\\n const quoteReveal = document.querySelector('.quote-reveal-v1');\\n if (quoteReveal) {\\n const text = quoteReveal.querySelector('.quote-text-v1');\\n if (text) {\\n text.style.opacity = '0';\\n \\n setTimeout(() => {\\n text.style.opacity = '1';\\n text.style.transition = 'opacity 2s ease-out';\\n }, 1500);\\n }\\n }\\n});\\n<\\\/script>\\n\\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\"},\"children\":[{\"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 - 3 Design Variants<\\\/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=Playfair+Display:wght@400;700;900&family=Lato:wght@300;400;700&family=Montserrat:wght@400;600;700;800&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: 'Lato', sans-serif !important;\\n background: #d7e9f7;\\n overflow-x: hidden;\\n position: relative;\\n}\\n\\n\\\/* Typography *\\\/\\nh1, h2, h3, h4, h5, h6 {\\n font-family: 'Playfair Display', serif !important;\\n}\\n\\np, span, a, button, div {\\n font-family: 'Lato', sans-serif !important;\\n}\\n\\n\\\/* ===== \\u0412\\u0410\\u0420\\u0418\\u0410\\u041d\\u0422 1 - \\u041e\\u0420\\u0418\\u0413\\u0418\\u041d\\u0410\\u041b\\u042c\\u041d\\u042b\\u0419 ===== *\\\/\\n.president-section-wrapper-v1 {\\n width: 100vw;\\n position: relative;\\n left: 50%;\\n right: 50%;\\n margin-left: -50vw;\\n margin-right: -50vw;\\n background: #d7e9f7;\\n overflow: hidden;\\n max-width: 100vw;\\n margin-bottom: 100px;\\n}\\n\\n.president-section-v1 {\\n padding: 80px 0;\\n background: #d7e9f7;\\n position: relative;\\n}\\n\\n\\\/* \\u041d\\u0435\\u043e\\u043d\\u043e\\u0432\\u044b\\u0435 \\u044d\\u043b\\u0435\\u043c\\u0435\\u043d\\u0442\\u044b \\u043d\\u0430 \\u0444\\u043e\\u043d\\u0435 *\\\/\\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(80px);\\n animation: float-neon 20s ease-in-out infinite;\\n}\\n\\n.neon-circle:nth-child(1) {\\n width: 300px;\\n height: 300px;\\n background: rgba(184, 134, 11, 0.2);\\n top: 10%;\\n left: -150px;\\n animation-duration: 25s;\\n}\\n\\n.neon-circle:nth-child(2) {\\n width: 400px;\\n height: 400px;\\n background: rgba(255, 215, 0, 0.15);\\n bottom: 10%;\\n right: -200px;\\n animation-duration: 30s;\\n animation-delay: 5s;\\n}\\n\\n.neon-circle:nth-child(3) {\\n width: 250px;\\n height: 250px;\\n background: rgba(30, 144, 255, 0.2);\\n top: 50%;\\n left: 50%;\\n animation-duration: 20s;\\n animation-delay: 10s;\\n}\\n\\n@keyframes float-neon {\\n 0%, 100% {\\n transform: translate(0, 0) scale(1);\\n }\\n 33% {\\n transform: translate(100px, -50px) scale(1.2);\\n }\\n 66% {\\n transform: translate(-50px, 100px) scale(0.8);\\n }\\n}\\n\\n\\\/* \\u0414\\u043e\\u043f\\u043e\\u043b\\u043d\\u0438\\u0442\\u0435\\u043b\\u044c\\u043d\\u044b\\u0435 \\u0437\\u043e\\u043b\\u043e\\u0442\\u044b\\u0435 \\u043b\\u0438\\u043d\\u0438\\u0438 *\\\/\\n.neon-line {\\n position: absolute;\\n height: 2px;\\n background: linear-gradient(90deg, transparent, rgba(184, 134, 11, 0.6), transparent);\\n animation: move-line 10s linear infinite;\\n}\\n\\n.neon-line:nth-child(4) {\\n top: 20%;\\n width: 200px;\\n animation-duration: 8s;\\n}\\n\\n.neon-line:nth-child(5) {\\n bottom: 30%;\\n width: 150px;\\n animation-duration: 12s;\\n animation-delay: 3s;\\n}\\n\\n@keyframes move-line {\\n 0% {\\n left: -200px;\\n }\\n 100% {\\n left: 100%;\\n }\\n}\\n\\n\\\/* \\u0421\\u0432\\u0435\\u0442\\u044f\\u0449\\u0438\\u0435\\u0441\\u044f \\u0442\\u043e\\u0447\\u043a\\u0438 *\\\/\\n.glow-dot {\\n position: absolute;\\n width: 6px;\\n height: 6px;\\n background: rgba(255, 215, 0, 0.8);\\n border-radius: 50%;\\n box-shadow: 0 0 10px rgba(255, 215, 0, 0.8);\\n animation: 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 top: 70%;\\n left: 15%;\\n animation-delay: 1s;\\n}\\n\\n.glow-dot:nth-child(8) {\\n bottom: 25%;\\n right: 20%;\\n animation-delay: 2s;\\n}\\n\\n@keyframes 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.president-container-v1 {\\n max-width: 1400px;\\n margin: 0 auto;\\n padding: 0 5%;\\n display: grid;\\n grid-template-columns: 360px 1fr;\\n gap: 80px;\\n align-items: start;\\n position: relative;\\n z-index: 1;\\n}\\n\\n\\\/* President Image Column *\\\/\\n.president-image-column {\\n position: relative;\\n animation: fadeInLeft 1s ease-out;\\n}\\n\\n.president-photo {\\n width: 100%;\\n max-width: 360px;\\n height: 450px;\\n border-radius: 30px;\\n box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);\\n overflow: hidden;\\n position: relative;\\n background: white;\\n border: 3px solid rgba(255, 255, 255, 0.8);\\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\\n}\\n\\n.president-photo::before {\\n content: '';\\n position: absolute;\\n top: -50%;\\n left: -50%;\\n width: 200%;\\n height: 200%;\\n background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);\\n transform: rotate(45deg);\\n transition: all 0.6s ease;\\n z-index: 1;\\n}\\n\\n.president-photo:hover::before {\\n animation: shine 0.6s ease;\\n}\\n\\n@keyframes shine {\\n 0% { transform: rotate(45deg) translateY(-100%); }\\n 100% { transform: rotate(45deg) translateY(100%); }\\n}\\n\\n.president-photo img {\\n width: 100%;\\n height: 100%;\\n object-fit: cover;\\n transition: transform 0.5s ease;\\n position: relative;\\n z-index: 0;\\n}\\n\\n.president-photo:hover img {\\n transform: scale(1.05);\\n}\\n\\n\\\/* President Info *\\\/\\n.president-info {\\n animation: fadeInRight 1s ease-out;\\n position: relative;\\n}\\n\\n.president-title {\\n font-size: 2rem;\\n font-weight: 700;\\n text-transform: uppercase;\\n letter-spacing: 4px;\\n margin-bottom: 20px;\\n font-family: 'Playfair Display', serif !important;\\n position: relative;\\n display: inline-block;\\n cursor: pointer;\\n text-decoration: none;\\n transition: all 0.3s ease;\\n}\\n\\n.president-title span {\\n background: linear-gradient(135deg, #b8860b 0%, #ffd700 50%, #b8860b 100%);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n display: inline-block;\\n}\\n\\n.president-title:hover span {\\n transform: translateY(-2px);\\n filter: brightness(1.2);\\n}\\n\\n.president-title::after {\\n content: '';\\n position: absolute;\\n bottom: -5px;\\n left: 0;\\n width: 100%;\\n height: 3px;\\n background: linear-gradient(90deg, #ffd700 0%, transparent 100%);\\n transform: scaleX(0);\\n transform-origin: left;\\n transition: transform 0.4s ease;\\n}\\n\\n.president-title:hover::after {\\n transform: scaleX(1);\\n}\\n\\n.president-name {\\n font-size: clamp(2.5rem, 4vw, 3.5rem);\\n font-weight: 900;\\n color: #1a3a52;\\n margin-bottom: 40px;\\n line-height: 1.1;\\n text-shadow: 2px 2px 4px rgba(0,0,0,0.05);\\n font-family: 'Playfair Display', serif !important;\\n cursor: pointer;\\n text-decoration: none;\\n display: block;\\n transition: all 0.3s ease;\\n}\\n\\n.president-name:hover {\\n color: #b8860b;\\n transform: translateX(5px);\\n}\\n\\n.president-description {\\n font-size: 1.1rem;\\n line-height: 1.9;\\n color: #5a6c7d;\\n margin-bottom: 50px;\\n font-family: 'Lato', sans-serif !important;\\n}\\n\\n.president-description p {\\n margin-bottom: 0;\\n font-family: 'Lato', sans-serif !important;\\n}\\n\\n.president-description .highlight {\\n color: #b8860b;\\n font-weight: 600;\\n}\\n\\n\\\/* Logo and buttons section *\\\/\\n.action-wrapper {\\n display: flex;\\n align-items: center;\\n gap: 40px;\\n margin-top: 30px;\\n justify-content: flex-start;\\n}\\n\\n\\\/* BIFA Logo - \\u0431\\u0435\\u0437\\u043e\\u043f\\u0430\\u0441\\u043d\\u044b\\u0439 \\u043f\\u043e\\u0434\\u0445\\u043e\\u0434 *\\\/\\n.bifa-logo-wrapper {\\n position: relative;\\n width: 90px;\\n height: 90px;\\n flex-shrink: 0;\\n margin-left: 20px;\\n}\\n\\n.bifa-logo-bg {\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n transform: translate(-50%, -50%);\\n width: 110px;\\n height: 110px;\\n background: radial-gradient(circle, rgba(184, 134, 11, 0.06) 0%, transparent 60%);\\n border-radius: 50%;\\n animation: pulse 4s ease-in-out infinite;\\n}\\n\\n@keyframes pulse {\\n 0%, 100% {\\n transform: translate(-50%, -50%) scale(1);\\n opacity: 0.2;\\n }\\n 50% {\\n transform: translate(-50%, -50%) scale(1.05);\\n opacity: 0.4;\\n }\\n}\\n\\n.bifa-logo-img {\\n width: 90px;\\n height: 90px;\\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 5px 10px rgba(0, 0, 0, 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);\\n filter: drop-shadow(0 8px 20px rgba(184, 134, 11, 0.3));\\n}\\n\\n\\\/* Action buttons *\\\/\\n.action-buttons {\\n display: flex;\\n gap: 20px;\\n}\\n\\n.btn-modern {\\n padding: 15px 35px;\\n text-decoration: none;\\n font-size: 1.1rem;\\n font-weight: 600;\\n border-radius: 30px;\\n display: inline-flex;\\n align-items: center;\\n gap: 10px;\\n transition: all 0.3s ease;\\n position: relative;\\n overflow: hidden;\\n font-family: 'Lato', sans-serif !important;\\n white-space: nowrap;\\n}\\n\\n.learn-more-btn {\\n background: linear-gradient(135deg, #1e90ff 0%, #4169e1 100%);\\n color: white;\\n border: none;\\n box-shadow: 0 6px 20px rgba(30, 144, 255, 0.35);\\n}\\n\\n.learn-more-btn::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, 215, 0, 0.2), transparent);\\n transition: left 0.6s ease;\\n}\\n\\n.learn-more-btn:hover::before {\\n left: 100%;\\n}\\n\\n.learn-more-btn:hover {\\n transform: translateY(-2px);\\n box-shadow: 0 8px 30px rgba(30, 144, 255, 0.45);\\n background: linear-gradient(135deg, #4169e1 0%, #1e90ff 100%);\\n}\\n\\n.about-btn {\\n background: transparent;\\n color: #b8860b;\\n border: 2px solid #b8860b;\\n}\\n\\n.about-btn:hover {\\n background: #b8860b;\\n color: white;\\n transform: translateY(-2px);\\n box-shadow: 0 10px 25px rgba(184, 134, 11, 0.2);\\n}\\n\\n.btn-icon {\\n width: 20px;\\n height: 20px;\\n transition: transform 0.3s ease;\\n}\\n\\n.btn-modern:hover .btn-icon {\\n transform: translateX(5px);\\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\\\/* ===== \\u0412\\u0410\\u0420\\u0418\\u0410\\u041d\\u0422 2 - \\u041a\\u0410\\u0420\\u0422\\u041e\\u0427\\u041d\\u042b\\u0419 \\u0414\\u0418\\u0417\\u0410\\u0419\\u041d ===== *\\\/\\n.president-section-wrapper-v2 {\\n width: 100vw;\\n position: relative;\\n left: 50%;\\n right: 50%;\\n margin-left: -50vw;\\n margin-right: -50vw;\\n background: linear-gradient(135deg, #e8f3ff 0%, #d7e9f7 100%);\\n overflow: hidden;\\n max-width: 100vw;\\n margin-bottom: 100px;\\n}\\n\\n.president-section-v2 {\\n padding: 100px 0;\\n position: relative;\\n}\\n\\n.president-container-v2 {\\n max-width: 1200px;\\n margin: 0 auto;\\n padding: 0 20px;\\n position: relative;\\n z-index: 1;\\n}\\n\\n.president-card {\\n background: rgba(255, 255, 255, 0.95);\\n backdrop-filter: blur(10px);\\n border-radius: 40px;\\n padding: 60px;\\n box-shadow: 0 30px 80px rgba(0, 0, 0, 0.1);\\n border: 2px solid rgba(184, 134, 11, 0.2);\\n position: relative;\\n overflow: hidden;\\n animation: fadeInUp 1s ease-out;\\n}\\n\\n.president-card::before {\\n content: '';\\n position: absolute;\\n top: -50%;\\n right: -50%;\\n width: 200%;\\n height: 200%;\\n background: radial-gradient(circle, rgba(255, 215, 0, 0.05) 0%, transparent 50%);\\n animation: rotate-slow 30s linear infinite;\\n}\\n\\n@keyframes rotate-slow {\\n from { transform: rotate(0deg); }\\n to { transform: rotate(360deg); }\\n}\\n\\n.president-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-v2 {\\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, #b8860b, #ffd700, #b8860b) border-box;\\n animation: fadeInScale 1s ease-out;\\n}\\n\\n@keyframes 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.president-photo-v2 img {\\n width: 100%;\\n height: 100%;\\n object-fit: cover;\\n transition: transform 0.6s ease;\\n}\\n\\n.president-photo-v2:hover img {\\n transform: scale(1.1);\\n}\\n\\n.president-info-v2 {\\n animation: fadeInRight 1s ease-out 0.3s both;\\n}\\n\\n.president-badge {\\n display: inline-flex;\\n align-items: center;\\n gap: 10px;\\n background: linear-gradient(135deg, rgba(184, 134, 11, 0.1) 0%, rgba(255, 215, 0, 0.1) 100%);\\n padding: 12px 24px;\\n border-radius: 50px;\\n margin-bottom: 20px;\\n}\\n\\n.badge-icon {\\n width: 24px;\\n height: 24px;\\n fill: #b8860b;\\n}\\n\\n.badge-text {\\n font-family: 'Montserrat', sans-serif !important;\\n font-size: 0.9rem;\\n font-weight: 700;\\n text-transform: uppercase;\\n letter-spacing: 2px;\\n color: #b8860b;\\n}\\n\\n.president-name-v2 {\\n font-size: 3rem;\\n font-weight: 900;\\n color: #1a3a52;\\n margin-bottom: 30px;\\n line-height: 1.1;\\n font-family: 'Playfair Display', serif !important;\\n}\\n\\n.president-description-v2 {\\n font-size: 1.15rem;\\n line-height: 1.8;\\n color: #5a6c7d;\\n margin-bottom: 40px;\\n font-family: 'Lato', sans-serif !important;\\n}\\n\\n.president-description-v2 .highlight {\\n color: #b8860b;\\n font-weight: 600;\\n}\\n\\n.president-actions-v2 {\\n display: flex;\\n align-items: center;\\n gap: 30px;\\n}\\n\\n.btn-gold {\\n background: linear-gradient(135deg, #b8860b 0%, #ffd700 100%);\\n color: white;\\n padding: 16px 40px;\\n text-decoration: none;\\n font-size: 1.1rem;\\n font-weight: 600;\\n border-radius: 30px;\\n display: inline-flex;\\n align-items: center;\\n gap: 10px;\\n transition: all 0.3s ease;\\n box-shadow: 0 6px 25px rgba(184, 134, 11, 0.3);\\n}\\n\\n.btn-gold:hover {\\n transform: translateY(-3px);\\n box-shadow: 0 10px 35px rgba(184, 134, 11, 0.4);\\n}\\n\\n.btn-outline {\\n background: transparent;\\n color: #1e90ff;\\n padding: 16px 40px;\\n text-decoration: none;\\n font-size: 1.1rem;\\n font-weight: 600;\\n border-radius: 30px;\\n border: 2px solid #1e90ff;\\n display: inline-flex;\\n align-items: center;\\n gap: 10px;\\n transition: all 0.3s ease;\\n}\\n\\n.btn-outline:hover {\\n background: #1e90ff;\\n color: white;\\n transform: translateY(-3px);\\n box-shadow: 0 10px 25px rgba(30, 144, 255, 0.3);\\n}\\n\\n\\\/* Decorative elements *\\\/\\n.gold-accent-v2 {\\n position: absolute;\\n width: 200px;\\n height: 200px;\\n background: radial-gradient(circle, rgba(255, 215, 0, 0.2) 0%, transparent 70%);\\n border-radius: 50%;\\n filter: blur(40px);\\n animation: float-accent 15s ease-in-out infinite;\\n}\\n\\n.gold-accent-v2:nth-child(1) {\\n top: -100px;\\n right: -100px;\\n}\\n\\n.gold-accent-v2:nth-child(2) {\\n bottom: -100px;\\n left: -100px;\\n animation-delay: 7s;\\n}\\n\\n@keyframes float-accent {\\n 0%, 100% {\\n transform: translate(0, 0);\\n }\\n 50% {\\n transform: translate(-20px, 20px);\\n }\\n}\\n\\n\\\/* ===== \\u0412\\u0410\\u0420\\u0418\\u0410\\u041d\\u0422 3 - \\u042d\\u041b\\u0415\\u0413\\u0410\\u041d\\u0422\\u041d\\u042b\\u0419 \\u041c\\u0418\\u041d\\u0418\\u041c\\u0410\\u041b\\u0418\\u0417\\u041c ===== *\\\/\\n.president-section-wrapper-v3 {\\n width: 100vw;\\n position: relative;\\n left: 50%;\\n right: 50%;\\n margin-left: -50vw;\\n margin-right: -50vw;\\n background: white;\\n overflow: hidden;\\n max-width: 100vw;\\n}\\n\\n.president-section-v3 {\\n padding: 120px 0;\\n position: relative;\\n}\\n\\n.gold-pattern {\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n background-image: \\n radial-gradient(circle at 20% 80%, rgba(184, 134, 11, 0.03) 0%, transparent 50%),\\n radial-gradient(circle at 80% 20%, rgba(255, 215, 0, 0.03) 0%, transparent 50%),\\n radial-gradient(circle at 80% 80%, rgba(30, 144, 255, 0.03) 0%, transparent 50%);\\n z-index: 0;\\n}\\n\\n.president-container-v3 {\\n max-width: 800px;\\n margin: 0 auto;\\n padding: 0 20px;\\n text-align: center;\\n position: relative;\\n z-index: 1;\\n}\\n\\n.president-photo-v3 {\\n width: 300px;\\n height: 400px;\\n margin: 0 auto 50px;\\n position: relative;\\n animation: fadeInDown 1s ease-out;\\n}\\n\\n.photo-frame {\\n width: 100%;\\n height: 100%;\\n position: relative;\\n overflow: hidden;\\n border-radius: 0 50% 0 50%;\\n box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);\\n}\\n\\n.photo-frame::before {\\n content: '';\\n position: absolute;\\n top: -5px;\\n left: -5px;\\n right: -5px;\\n bottom: -5px;\\n background: linear-gradient(135deg, #b8860b, #ffd700, #b8860b);\\n border-radius: 0 50% 0 50%;\\n z-index: -1;\\n animation: gradient-rotate 8s linear infinite;\\n}\\n\\n@keyframes gradient-rotate {\\n 0% {\\n filter: hue-rotate(0deg);\\n }\\n 100% {\\n filter: hue-rotate(360deg);\\n }\\n}\\n\\n.photo-frame img {\\n width: 100%;\\n height: 100%;\\n object-fit: cover;\\n transition: all 0.6s ease;\\n}\\n\\n.photo-frame:hover img {\\n transform: scale(1.05);\\n}\\n\\n.president-content-v3 {\\n animation: fadeInUp 1s ease-out 0.3s both;\\n}\\n\\n.title-decoration {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n gap: 20px;\\n margin-bottom: 30px;\\n}\\n\\n.gold-line {\\n width: 60px;\\n height: 3px;\\n background: linear-gradient(90deg, transparent, #b8860b, transparent);\\n}\\n\\n.president-title-v3 {\\n font-family: 'Montserrat', sans-serif !important;\\n font-size: 1rem;\\n font-weight: 700;\\n text-transform: uppercase;\\n letter-spacing: 5px;\\n color: #b8860b;\\n}\\n\\n.president-name-v3 {\\n font-size: 3.5rem;\\n font-weight: 900;\\n color: #1a3a52;\\n margin-bottom: 40px;\\n line-height: 1.1;\\n font-family: 'Playfair Display', serif !important;\\n position: relative;\\n}\\n\\n.president-name-v3::after {\\n content: '';\\n position: absolute;\\n bottom: -15px;\\n left: 50%;\\n transform: translateX(-50%);\\n width: 100px;\\n height: 4px;\\n background: linear-gradient(90deg, transparent, #ffd700, transparent);\\n}\\n\\n.president-description-v3 {\\n font-size: 1.2rem;\\n line-height: 2;\\n color: #5a6c7d;\\n margin-bottom: 50px;\\n max-width: 700px;\\n margin-left: auto;\\n margin-right: auto;\\n font-family: 'Lato', sans-serif !important;\\n}\\n\\n.president-description-v3 .highlight {\\n background: linear-gradient(135deg, #b8860b, #ffd700);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n font-weight: 600;\\n}\\n\\n.action-row {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n gap: 40px;\\n}\\n\\n.btn-elegant {\\n padding: 18px 45px;\\n text-decoration: none;\\n font-size: 1.1rem;\\n font-weight: 600;\\n border-radius: 5px;\\n display: inline-flex;\\n align-items: center;\\n gap: 12px;\\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\\n position: relative;\\n overflow: hidden;\\n text-transform: uppercase;\\n letter-spacing: 1px;\\n}\\n\\n.btn-primary {\\n background: #1a3a52;\\n color: white;\\n box-shadow: 0 10px 30px rgba(26, 58, 82, 0.3);\\n}\\n\\n.btn-primary::before {\\n content: '';\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n background: linear-gradient(135deg, #b8860b, #ffd700);\\n opacity: 0;\\n transition: opacity 0.4s ease;\\n}\\n\\n.btn-primary:hover::before {\\n opacity: 1;\\n}\\n\\n.btn-primary span,\\n.btn-primary svg {\\n position: relative;\\n z-index: 1;\\n}\\n\\n.btn-primary:hover {\\n transform: translateY(-3px);\\n box-shadow: 0 15px 40px rgba(184, 134, 11, 0.4);\\n}\\n\\n.btn-secondary {\\n background: transparent;\\n color: #1a3a52;\\n border: 3px solid #1a3a52;\\n}\\n\\n.btn-secondary:hover {\\n background: #1a3a52;\\n color: white;\\n transform: translateY(-3px);\\n box-shadow: 0 15px 40px rgba(26, 58, 82, 0.3);\\n}\\n\\n.logo-floating {\\n position: absolute;\\n top: 50px;\\n right: 50px;\\n width: 80px;\\n height: 80px;\\n opacity: 0.1;\\n animation: float-logo 20s ease-in-out infinite;\\n}\\n\\n@keyframes float-logo {\\n 0%, 100% {\\n transform: translate(0, 0) rotate(0deg);\\n }\\n 25% {\\n transform: translate(-20px, 20px) rotate(90deg);\\n }\\n 50% {\\n transform: translate(20px, -20px) rotate(180deg);\\n }\\n 75% {\\n transform: translate(-20px, -20px) rotate(270deg);\\n }\\n}\\n\\n\\\/* Responsive Design *\\\/\\n@media (max-width: 1200px) {\\n .president-container-v1 {\\n padding: 0 40px;\\n gap: 60px;\\n }\\n \\n .president-card {\\n padding: 40px;\\n }\\n}\\n\\n@media (max-width: 968px) {\\n .president-section-v1,\\n .president-section-v2,\\n .president-section-v3 {\\n padding: 60px 0;\\n }\\n \\n .president-container-v1 {\\n grid-template-columns: 1fr;\\n gap: 50px;\\n text-align: center;\\n padding: 0 30px;\\n }\\n \\n .president-card-content {\\n grid-template-columns: 1fr;\\n text-align: center;\\n }\\n \\n .president-photo-v2 {\\n margin: 0 auto;\\n }\\n \\n .president-actions-v2,\\n .action-row {\\n justify-content: center;\\n }\\n \\n .president-photo {\\n margin: 0 auto;\\n max-width: 400px;\\n height: 500px;\\n }\\n \\n .president-title::after {\\n left: 50%;\\n transform: translateX(-50%);\\n width: 60px;\\n }\\n \\n .president-title:hover::after {\\n transform: translateX(-50%) scaleX(1);\\n }\\n \\n .president-description {\\n text-align: left;\\n }\\n \\n .action-wrapper {\\n justify-content: center;\\n flex-wrap: wrap;\\n }\\n}\\n\\n@media (max-width: 640px) {\\n .president-container-v1,\\n .president-container-v2,\\n .president-container-v3 {\\n padding: 0 20px;\\n }\\n \\n .president-name,\\n .president-name-v2,\\n .president-name-v3 {\\n font-size: 2rem;\\n }\\n \\n .president-title {\\n font-size: 1.3rem;\\n letter-spacing: 2px;\\n }\\n \\n .president-description,\\n .president-description-v2,\\n .president-description-v3 {\\n font-size: 1rem;\\n }\\n \\n .action-wrapper {\\n flex-direction: row;\\n gap: 20px;\\n align-items: center;\\n justify-content: center;\\n }\\n \\n .action-buttons {\\n flex-direction: row;\\n gap: 10px;\\n }\\n \\n .btn-modern {\\n padding: 12px 20px;\\n font-size: 0.95rem;\\n }\\n \\n .bifa-logo-wrapper {\\n margin-left: 10px;\\n }\\n \\n .president-photo-v3 {\\n width: 250px;\\n height: 333px;\\n }\\n \\n .president-actions-v2,\\n .action-row {\\n flex-direction: column;\\n width: 100%;\\n }\\n \\n .btn-gold,\\n .btn-outline,\\n .btn-elegant {\\n width: 100%;\\n justify-content: center;\\n }\\n}\\n\\n@media (max-width: 480px) {\\n .president-photo {\\n max-width: 100%;\\n height: 400px;\\n }\\n \\n .bifa-logo-wrapper {\\n width: 70px;\\n height: 70px;\\n margin-left: 10px;\\n }\\n \\n .bifa-logo-img {\\n width: 70px;\\n height: 70px;\\n }\\n \\n .action-wrapper {\\n flex-wrap: nowrap;\\n }\\n \\n .btn-modern {\\n padding: 10px 15px;\\n font-size: 0.9rem;\\n }\\n \\n .btn-modern span {\\n display: none;\\n }\\n \\n .btn-modern .btn-icon {\\n margin: 0;\\n }\\n}\\n\\n\\\/* Title Styles *\\\/\\n.variant-title {\\n text-align: center;\\n font-size: 2.5rem;\\n font-weight: 800;\\n margin-bottom: 20px;\\n font-family: 'Montserrat', sans-serif !important;\\n color: #1a3a52;\\n}\\n\\n.divider {\\n height: 2px;\\n background: linear-gradient(90deg, transparent, #b8860b, transparent);\\n margin: 80px auto;\\n max-width: 200px;\\n}\\n<\\\/style>\\n<\\\/head>\\n<body>\\n\\n\\n<\/p>\n<h1 class=\"\\\"variant-title\\\"\">\\u0412\\u0430\\u0440\\u0438\\u0430\\u043d\\u0442 1 - \\u041e\\u0440\\u0438\\u0433\\u0438\\u043d\\u0430\\u043b\\u044c\\u043d\\u044b\\u0439<\\\/h1>\\n<\/p>\n<div class=\"\\\"president-section-wrapper-v1\\\"\">\\n <\/p>\n<section class=\"\\\"president-section-v1\\\"\">\\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=\"\\\"neon-line\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"neon-line\\\"\"><\\\/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=\"\\\"president-container-v1\\\"\">\\n \\n <\/p>\n<div class=\"\\\"president-image-column\\\"\">\\n <\/p>\n<div class=\"\\\"president-photo\\\"\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Mr\\\/main-photo.jpg\\\"\" alt=\"\\\"Mr.\" salim humaid almazaini\\\">\\n <\\\/div>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"president-info\\\"\">\\n <a href=\"\\\"\\\/aboutus\\\"\" class=\"\\\"president-title\\\"\">\\n <span>Founder and President<\\\/span>\\n <\\\/a>\\n \\n <a href=\"\\\"\\\/aboutus\\\"\" class=\"\\\"president-name\\\"\">\\n Mr. Salim Humaid Almazaini\\n <\\\/a>\\n \\n <\/p>\n<div class=\"\\\"president-description\\\"\">\\n <\/p>\n<p>\\n A distinguished <span class=\"\\\"highlight\\\"\">visionary leader<\\\/span> in international sports diplomacy. Through strategic innovation and unwavering commitment, Mr. Almazaini transforms global football <span class=\"\\\"highlight\\\"\">into a powerful bridge for unity and cooperation<\\\/span> between nations.\\n <\\\/p>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"action-wrapper\\\"\">\\n <\/p>\n<div class=\"\\\"action-buttons\\\"\">\\n <a href=\"\\\"\\\/president\\\"\" class=\"\\\"btn-modern\" learn-more-btn\\\">\\n <span>Learn More<\\\/span>\\n <svg class=\"\\\"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=\"\\\"\\\/aboutus\\\"\" class=\"\\\"btn-modern\" about-btn\\\">\\n <span>About BIFA<\\\/span>\\n <svg class=\"\\\"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\" 16v-4m12 8h.01\\\"\\>\\n <\\\/svg>\\n <\\\/a>\\n <\\\/div>\\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 <\\\/section>\\n<\\\/div>\\n\\n<\/p>\n<div class=\"\\\"divider\\\"\"><\\\/div>\\n\\n\\n<\/p>\n<h1 class=\"\\\"variant-title\\\"\">\\u0412\\u0430\\u0440\\u0438\\u0430\\u043d\\u0442 2 - \\u041a\\u0430\\u0440\\u0442\\u043e\\u0447\\u043d\\u044b\\u0439 \\u0434\\u0438\\u0437\\u0430\\u0439\\u043d<\\\/h1>\\n<\/p>\n<div class=\"\\\"president-section-wrapper-v2\\\"\">\\n <\/p>\n<section class=\"\\\"president-section-v2\\\"\">\\n <\/p>\n<div class=\"\\\"gold-accent-v2\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"gold-accent-v2\\\"\"><\\\/div>\\n \\n <\/p>\n<div class=\"\\\"president-container-v2\\\"\">\\n <\/p>\n<div class=\"\\\"president-card\\\"\">\\n <\/p>\n<div class=\"\\\"president-card-content\\\"\">\\n \\n <\/p>\n<div class=\"\\\"president-photo-v2\\\"\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Mr\\\/main-photo.jpg\\\"\" alt=\"\\\"Mr.\" salim humaid almazaini\\\">\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"president-info-v2\\\"\">\\n <\/p>\n<div class=\"\\\"president-badge\\\"\">\\n <svg class=\"\\\"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=\"\\\"badge-text\\\"\">Founder & President<\\\/span>\\n <\\\/div>\\n \\n <\/p>\n<h2 class=\"\\\"president-name-v2\\\"\">Mr. Salim Humaid Almazaini<\\\/h2>\\n \\n <\/p>\n<div class=\"\\\"president-description-v2\\\"\">\\n <\/p>\n<p>\\n A distinguished <span class=\"\\\"highlight\\\"\">visionary leader<\\\/span> in international sports diplomacy. Through strategic innovation and unwavering commitment, Mr. Almazaini transforms global football <span class=\"\\\"highlight\\\"\">into a powerful bridge for unity and cooperation<\\\/span> between nations.\\n <\\\/p>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"president-actions-v2\\\"\">\\n <a href=\"\\\"\\\/president\\\"\" class=\"\\\"btn-gold\\\"\">\\n <span>Discover Story<\\\/span>\\n <svg class=\"\\\"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=\"\\\"\\\/aboutus\\\"\" class=\"\\\"btn-outline\\\"\">\\n <span>About BIFA<\\\/span>\\n <svg class=\"\\\"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 <\\\/section>\\n<\\\/div>\\n\\n<\/p>\n<div class=\"\\\"divider\\\"\"><\\\/div>\\n\\n\\n<\/p>\n<h1 class=\"\\\"variant-title\\\"\">\\u0412\\u0430\\u0440\\u0438\\u0430\\u043d\\u0442 3 - \\u042d\\u043b\\u0435\\u0433\\u0430\\u043d\\u0442\\u043d\\u044b\\u0439 \\u043c\\u0438\\u043d\\u0438\\u043c\\u0430\\u043b\\u0438\\u0437\\u043c<\\\/h1>\\n<\/p>\n<div class=\"\\\"president-section-wrapper-v3\\\"\">\\n <\/p>\n<section class=\"\\\"president-section-v3\\\"\">\\n <\/p>\n<div class=\"\\\"gold-pattern\\\"\"><\\\/div>\\n \\n <\/p>\n<div class=\"\\\"logo-floating\\\"\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/logo_bifa.svg\\\"\" alt=\"\\\"BIFA\\\"\" style=\"\\\"width:\" 100%; height: opacity: 0.1;\\\">\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"president-container-v3\\\"\">\\n \\n <\/p>\n<div class=\"\\\"president-photo-v3\\\"\">\\n <\/p>\n<div class=\"\\\"photo-frame\\\"\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Mr\\\/main-photo.jpg\\\"\" alt=\"\\\"Mr.\" salim humaid almazaini\\\">\\n <\\\/div>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"president-content-v3\\\"\">\\n <\/p>\n<div class=\"\\\"title-decoration\\\"\">\\n <\/p>\n<div class=\"\\\"gold-line\\\"\"><\\\/div>\\n <\/p>\n<h3 class=\"\\\"president-title-v3\\\"\">Founder & President<\\\/h3>\\n <\/p>\n<div class=\"\\\"gold-line\\\"\"><\\\/div>\\n <\\\/div>\\n \\n <\/p>\n<h1 class=\"\\\"president-name-v3\\\"\">Mr. Salim Humaid Almazaini<\\\/h1>\\n \\n <\/p>\n<div class=\"\\\"president-description-v3\\\"\">\\n <\/p>\n<p>\\n A distinguished <span class=\"\\\"highlight\\\"\">visionary leader<\\\/span> in international sports diplomacy. Through strategic innovation and unwavering commitment, Mr. Almazaini transforms global football <span class=\"\\\"highlight\\\"\">into a powerful bridge for unity and cooperation<\\\/span> between nations.\\n <\\\/p>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"action-row\\\"\">\\n <a href=\"\\\"\\\/president\\\"\" class=\"\\\"btn-elegant\" btn-primary\\\">\\n <span>Learn More<\\\/span>\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" width=\"\\\"20\\\"\" height=\"\\\"20\\\"\" 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=\"\\\"\\\/aboutus\\\"\" class=\"\\\"btn-elegant\" btn-secondary\\\">\\n <span>About BIFA<\\\/span>\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" width=\"\\\"20\\\"\" height=\"\\\"20\\\"\" 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\" 16v-4m12 8h.01\\\"\\>\\n <\\\/svg>\\n <\\\/a>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/section>\\n<\\\/div>\\n\\n<script>\\n\\\/\\\/ Animation for all variants\\ndocument.addEventListener('DOMContentLoaded', function() {\\n \\\/\\\/ Smooth scroll reveal\\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('[class*=\\\"fadeIn\\\"], .president-card, .president-photo-v2, .president-photo-v3').forEach(el => {\\n if (el) {\\n el.style.animationPlayState = 'paused';\\n observer.observe(el);\\n }\\n });\\n\\n \\\/\\\/ Logo hover effects for all variants\\n document.querySelectorAll('.bifa-logo-wrapper').forEach(logoWrapper => {\\n logoWrapper.addEventListener('mouseenter', () => {\\n const logo = logoWrapper.querySelector('.bifa-logo-img');\\n if (logo) {\\n logo.style.transform = 'scale(1.1)';\\n }\\n });\\n \\n logoWrapper.addEventListener('mouseleave', () => {\\n const logo = logoWrapper.querySelector('.bifa-logo-img');\\n if (logo) {\\n logo.style.transform = 'scale(1)';\\n }\\n });\\n });\\n\\n \\\/\\\/ Button glow effects\\n document.querySelectorAll('.btn-modern, .btn-gold, .btn-outline, .btn-elegant').forEach(button => {\\n button.addEventListener('mouseenter', (e) => {\\n const rect = button.getBoundingClientRect();\\n const x = e.clientX - rect.left;\\n const y = e.clientY - rect.top;\\n \\n const glow = document.createElement('div');\\n glow.style.cssText = `\\n position: absolute;\\n width: 100px;\\n height: 100px;\\n background: radial-gradient(circle, rgba(255, 215, 0, 0.2) 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(glow);\\n setTimeout(() => { glow.style.opacity = '1'; }, 10);\\n \\n button.addEventListener('mouseleave', () => {\\n glow.style.opacity = '0';\\n setTimeout(() => glow.remove(), 300);\\n }, { once: true });\\n });\\n });\\n\\n \\\/\\\/ Image loading animation\\n document.querySelectorAll('img').forEach(img => {\\n img.style.opacity = '0';\\n img.style.transition = 'opacity 0.5s ease';\\n \\n if (img.complete) {\\n img.style.opacity = '1';\\n } else {\\n img.addEventListener('load', function() {\\n this.style.opacity = '1';\\n });\\n }\\n });\\n\\n \\\/\\\/ Preload images\\n function preloadImages() {\\n const imageUrls = [\\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 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\":\"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\"},\"children\":[{\"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 - 3 Design Variants<\\\/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=Playfair+Display:wght@400;700;900&family=Lato:wght@300;400;700&family=Montserrat:wght@400;600;700;800&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: 'Lato', sans-serif !important;\\n background: #d7e9f7;\\n overflow-x: hidden;\\n position: relative;\\n}\\n\\n\\\/* Typography *\\\/\\nh1, h2, h3, h4, h5, h6 {\\n font-family: 'Playfair Display', serif !important;\\n}\\n\\np, span, a, button, div {\\n font-family: 'Lato', sans-serif !important;\\n}\\n\\n\\\/* ===== \\u0412\\u0410\\u0420\\u0418\\u0410\\u041d\\u0422 1 - \\u041e\\u0420\\u0418\\u0413\\u0418\\u041d\\u0410\\u041b\\u042c\\u041d\\u042b\\u0419 ===== *\\\/\\n.president-section-wrapper-v1 {\\n width: 100vw;\\n position: relative;\\n left: 50%;\\n right: 50%;\\n margin-left: -50vw;\\n margin-right: -50vw;\\n background: #d7e9f7;\\n overflow: hidden;\\n max-width: 100vw;\\n margin-bottom: 100px;\\n}\\n\\n.president-section-v1 {\\n padding: 80px 0;\\n background: #d7e9f7;\\n position: relative;\\n}\\n\\n\\\/* \\u041d\\u0435\\u043e\\u043d\\u043e\\u0432\\u044b\\u0435 \\u044d\\u043b\\u0435\\u043c\\u0435\\u043d\\u0442\\u044b \\u043d\\u0430 \\u0444\\u043e\\u043d\\u0435 *\\\/\\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(80px);\\n animation: float-neon 20s ease-in-out infinite;\\n}\\n\\n.neon-circle:nth-child(1) {\\n width: 300px;\\n height: 300px;\\n background: rgba(184, 134, 11, 0.2);\\n top: 10%;\\n left: -150px;\\n animation-duration: 25s;\\n}\\n\\n.neon-circle:nth-child(2) {\\n width: 400px;\\n height: 400px;\\n background: rgba(255, 215, 0, 0.15);\\n bottom: 10%;\\n right: -200px;\\n animation-duration: 30s;\\n animation-delay: 5s;\\n}\\n\\n.neon-circle:nth-child(3) {\\n width: 250px;\\n height: 250px;\\n background: rgba(30, 144, 255, 0.2);\\n top: 50%;\\n left: 50%;\\n animation-duration: 20s;\\n animation-delay: 10s;\\n}\\n\\n@keyframes float-neon {\\n 0%, 100% {\\n transform: translate(0, 0) scale(1);\\n }\\n 33% {\\n transform: translate(100px, -50px) scale(1.2);\\n }\\n 66% {\\n transform: translate(-50px, 100px) scale(0.8);\\n }\\n}\\n\\n\\\/* \\u0414\\u043e\\u043f\\u043e\\u043b\\u043d\\u0438\\u0442\\u0435\\u043b\\u044c\\u043d\\u044b\\u0435 \\u0437\\u043e\\u043b\\u043e\\u0442\\u044b\\u0435 \\u043b\\u0438\\u043d\\u0438\\u0438 *\\\/\\n.neon-line {\\n position: absolute;\\n height: 2px;\\n background: linear-gradient(90deg, transparent, rgba(184, 134, 11, 0.6), transparent);\\n animation: move-line 10s linear infinite;\\n}\\n\\n.neon-line:nth-child(4) {\\n top: 20%;\\n width: 200px;\\n animation-duration: 8s;\\n}\\n\\n.neon-line:nth-child(5) {\\n bottom: 30%;\\n width: 150px;\\n animation-duration: 12s;\\n animation-delay: 3s;\\n}\\n\\n@keyframes move-line {\\n 0% {\\n left: -200px;\\n }\\n 100% {\\n left: 100%;\\n }\\n}\\n\\n\\\/* \\u0421\\u0432\\u0435\\u0442\\u044f\\u0449\\u0438\\u0435\\u0441\\u044f \\u0442\\u043e\\u0447\\u043a\\u0438 *\\\/\\n.glow-dot {\\n position: absolute;\\n width: 6px;\\n height: 6px;\\n background: rgba(255, 215, 0, 0.8);\\n border-radius: 50%;\\n box-shadow: 0 0 10px rgba(255, 215, 0, 0.8);\\n animation: 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 top: 70%;\\n left: 15%;\\n animation-delay: 1s;\\n}\\n\\n.glow-dot:nth-child(8) {\\n bottom: 25%;\\n right: 20%;\\n animation-delay: 2s;\\n}\\n\\n@keyframes 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.president-container-v1 {\\n max-width: 1400px;\\n margin: 0 auto;\\n padding: 0 5%;\\n display: grid;\\n grid-template-columns: 360px 1fr;\\n gap: 80px;\\n align-items: start;\\n position: relative;\\n z-index: 1;\\n}\\n\\n\\\/* President Image Column *\\\/\\n.president-image-column {\\n position: relative;\\n animation: fadeInLeft 1s ease-out;\\n}\\n\\n.president-photo {\\n width: 100%;\\n max-width: 360px;\\n height: 450px;\\n border-radius: 30px;\\n box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);\\n overflow: hidden;\\n position: relative;\\n background: white;\\n border: 3px solid rgba(255, 255, 255, 0.8);\\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\\n}\\n\\n.president-photo::before {\\n content: '';\\n position: absolute;\\n top: -50%;\\n left: -50%;\\n width: 200%;\\n height: 200%;\\n background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);\\n transform: rotate(45deg);\\n transition: all 0.6s ease;\\n z-index: 1;\\n}\\n\\n.president-photo:hover::before {\\n animation: shine 0.6s ease;\\n}\\n\\n@keyframes shine {\\n 0% { transform: rotate(45deg) translateY(-100%); }\\n 100% { transform: rotate(45deg) translateY(100%); }\\n}\\n\\n.president-photo img {\\n width: 100%;\\n height: 100%;\\n object-fit: cover;\\n transition: transform 0.5s ease;\\n position: relative;\\n z-index: 0;\\n}\\n\\n.president-photo:hover img {\\n transform: scale(1.05);\\n}\\n\\n\\\/* President Info *\\\/\\n.president-info {\\n animation: fadeInRight 1s ease-out;\\n position: relative;\\n}\\n\\n.president-title {\\n font-size: 2rem;\\n font-weight: 700;\\n text-transform: uppercase;\\n letter-spacing: 4px;\\n margin-bottom: 20px;\\n font-family: 'Playfair Display', serif !important;\\n position: relative;\\n display: inline-block;\\n cursor: pointer;\\n text-decoration: none;\\n transition: all 0.3s ease;\\n}\\n\\n.president-title span {\\n background: linear-gradient(135deg, #b8860b 0%, #ffd700 50%, #b8860b 100%);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n display: inline-block;\\n}\\n\\n.president-title:hover span {\\n transform: translateY(-2px);\\n filter: brightness(1.2);\\n}\\n\\n.president-title::after {\\n content: '';\\n position: absolute;\\n bottom: -5px;\\n left: 0;\\n width: 100%;\\n height: 3px;\\n background: linear-gradient(90deg, #ffd700 0%, transparent 100%);\\n transform: scaleX(0);\\n transform-origin: left;\\n transition: transform 0.4s ease;\\n}\\n\\n.president-title:hover::after {\\n transform: scaleX(1);\\n}\\n\\n.president-name {\\n font-size: clamp(2.5rem, 4vw, 3.5rem);\\n font-weight: 900;\\n color: #1a3a52;\\n margin-bottom: 40px;\\n line-height: 1.1;\\n text-shadow: 2px 2px 4px rgba(0,0,0,0.05);\\n font-family: 'Playfair Display', serif !important;\\n cursor: pointer;\\n text-decoration: none;\\n display: block;\\n transition: all 0.3s ease;\\n}\\n\\n.president-name:hover {\\n color: #b8860b;\\n transform: translateX(5px);\\n}\\n\\n.president-description {\\n font-size: 1.1rem;\\n line-height: 1.9;\\n color: #5a6c7d;\\n margin-bottom: 50px;\\n font-family: 'Lato', sans-serif !important;\\n}\\n\\n.president-description p {\\n margin-bottom: 0;\\n font-family: 'Lato', sans-serif !important;\\n}\\n\\n.president-description .highlight {\\n color: #b8860b;\\n font-weight: 600;\\n}\\n\\n\\\/* Logo and buttons section *\\\/\\n.action-wrapper {\\n display: flex;\\n align-items: center;\\n gap: 40px;\\n margin-top: 30px;\\n justify-content: flex-start;\\n}\\n\\n\\\/* BIFA Logo - \\u0431\\u0435\\u0437\\u043e\\u043f\\u0430\\u0441\\u043d\\u044b\\u0439 \\u043f\\u043e\\u0434\\u0445\\u043e\\u0434 *\\\/\\n.bifa-logo-wrapper {\\n position: relative;\\n width: 90px;\\n height: 90px;\\n flex-shrink: 0;\\n margin-left: 20px;\\n}\\n\\n.bifa-logo-bg {\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n transform: translate(-50%, -50%);\\n width: 110px;\\n height: 110px;\\n background: radial-gradient(circle, rgba(184, 134, 11, 0.06) 0%, transparent 60%);\\n border-radius: 50%;\\n animation: pulse 4s ease-in-out infinite;\\n}\\n\\n@keyframes pulse {\\n 0%, 100% {\\n transform: translate(-50%, -50%) scale(1);\\n opacity: 0.2;\\n }\\n 50% {\\n transform: translate(-50%, -50%) scale(1.05);\\n opacity: 0.4;\\n }\\n}\\n\\n.bifa-logo-img {\\n width: 90px;\\n height: 90px;\\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 5px 10px rgba(0, 0, 0, 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);\\n filter: drop-shadow(0 8px 20px rgba(184, 134, 11, 0.3));\\n}\\n\\n\\\/* Action buttons *\\\/\\n.action-buttons {\\n display: flex;\\n gap: 20px;\\n}\\n\\n.btn-modern {\\n padding: 15px 35px;\\n text-decoration: none;\\n font-size: 1.1rem;\\n font-weight: 600;\\n border-radius: 30px;\\n display: inline-flex;\\n align-items: center;\\n gap: 10px;\\n transition: all 0.3s ease;\\n position: relative;\\n overflow: hidden;\\n font-family: 'Lato', sans-serif !important;\\n white-space: nowrap;\\n}\\n\\n.learn-more-btn {\\n background: linear-gradient(135deg, #1e90ff 0%, #4169e1 100%);\\n color: white;\\n border: none;\\n box-shadow: 0 6px 20px rgba(30, 144, 255, 0.35);\\n}\\n\\n.learn-more-btn::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, 215, 0, 0.2), transparent);\\n transition: left 0.6s ease;\\n}\\n\\n.learn-more-btn:hover::before {\\n left: 100%;\\n}\\n\\n.learn-more-btn:hover {\\n transform: translateY(-2px);\\n box-shadow: 0 8px 30px rgba(30, 144, 255, 0.45);\\n background: linear-gradient(135deg, #4169e1 0%, #1e90ff 100%);\\n}\\n\\n.about-btn {\\n background: transparent;\\n color: #b8860b;\\n border: 2px solid #b8860b;\\n}\\n\\n.about-btn:hover {\\n background: #b8860b;\\n color: white;\\n transform: translateY(-2px);\\n box-shadow: 0 10px 25px rgba(184, 134, 11, 0.2);\\n}\\n\\n.btn-icon {\\n width: 20px;\\n height: 20px;\\n transition: transform 0.3s ease;\\n}\\n\\n.btn-modern:hover .btn-icon {\\n transform: translateX(5px);\\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\\\/* ===== \\u0412\\u0410\\u0420\\u0418\\u0410\\u041d\\u0422 2 - \\u041a\\u0410\\u0420\\u0422\\u041e\\u0427\\u041d\\u042b\\u0419 \\u0414\\u0418\\u0417\\u0410\\u0419\\u041d ===== *\\\/\\n.president-section-wrapper-v2 {\\n width: 100vw;\\n position: relative;\\n left: 50%;\\n right: 50%;\\n margin-left: -50vw;\\n margin-right: -50vw;\\n background: linear-gradient(135deg, #e8f3ff 0%, #d7e9f7 100%);\\n overflow: hidden;\\n max-width: 100vw;\\n margin-bottom: 100px;\\n}\\n\\n.president-section-v2 {\\n padding: 100px 0;\\n position: relative;\\n}\\n\\n.president-container-v2 {\\n max-width: 1200px;\\n margin: 0 auto;\\n padding: 0 20px;\\n position: relative;\\n z-index: 1;\\n}\\n\\n.president-card {\\n background: rgba(255, 255, 255, 0.95);\\n backdrop-filter: blur(10px);\\n border-radius: 40px;\\n padding: 60px;\\n box-shadow: 0 30px 80px rgba(0, 0, 0, 0.1);\\n border: 2px solid rgba(184, 134, 11, 0.2);\\n position: relative;\\n overflow: hidden;\\n animation: fadeInUp 1s ease-out;\\n}\\n\\n.president-card::before {\\n content: '';\\n position: absolute;\\n top: -50%;\\n right: -50%;\\n width: 200%;\\n height: 200%;\\n background: radial-gradient(circle, rgba(255, 215, 0, 0.05) 0%, transparent 50%);\\n animation: rotate-slow 30s linear infinite;\\n}\\n\\n@keyframes rotate-slow {\\n from { transform: rotate(0deg); }\\n to { transform: rotate(360deg); }\\n}\\n\\n.president-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-v2 {\\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, #b8860b, #ffd700, #b8860b) border-box;\\n animation: fadeInScale 1s ease-out;\\n}\\n\\n@keyframes 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.president-photo-v2 img {\\n width: 100%;\\n height: 100%;\\n object-fit: cover;\\n transition: transform 0.6s ease;\\n}\\n\\n.president-photo-v2:hover img {\\n transform: scale(1.1);\\n}\\n\\n.president-info-v2 {\\n animation: fadeInRight 1s ease-out 0.3s both;\\n}\\n\\n.president-badge {\\n display: inline-flex;\\n align-items: center;\\n gap: 10px;\\n background: linear-gradient(135deg, rgba(184, 134, 11, 0.1) 0%, rgba(255, 215, 0, 0.1) 100%);\\n padding: 12px 24px;\\n border-radius: 50px;\\n margin-bottom: 20px;\\n}\\n\\n.badge-icon {\\n width: 24px;\\n height: 24px;\\n fill: #b8860b;\\n}\\n\\n.badge-text {\\n font-family: 'Montserrat', sans-serif !important;\\n font-size: 0.9rem;\\n font-weight: 700;\\n text-transform: uppercase;\\n letter-spacing: 2px;\\n color: #b8860b;\\n}\\n\\n.president-name-v2 {\\n font-size: 3rem;\\n font-weight: 900;\\n color: #1a3a52;\\n margin-bottom: 30px;\\n line-height: 1.1;\\n font-family: 'Playfair Display', serif !important;\\n}\\n\\n.president-description-v2 {\\n font-size: 1.15rem;\\n line-height: 1.8;\\n color: #5a6c7d;\\n margin-bottom: 40px;\\n font-family: 'Lato', sans-serif !important;\\n}\\n\\n.president-description-v2 .highlight {\\n color: #b8860b;\\n font-weight: 600;\\n}\\n\\n.president-actions-v2 {\\n display: flex;\\n align-items: center;\\n gap: 30px;\\n}\\n\\n.btn-gold {\\n background: linear-gradient(135deg, #b8860b 0%, #ffd700 100%);\\n color: white;\\n padding: 16px 40px;\\n text-decoration: none;\\n font-size: 1.1rem;\\n font-weight: 600;\\n border-radius: 30px;\\n display: inline-flex;\\n align-items: center;\\n gap: 10px;\\n transition: all 0.3s ease;\\n box-shadow: 0 6px 25px rgba(184, 134, 11, 0.3);\\n}\\n\\n.btn-gold:hover {\\n transform: translateY(-3px);\\n box-shadow: 0 10px 35px rgba(184, 134, 11, 0.4);\\n}\\n\\n.btn-outline {\\n background: transparent;\\n color: #1e90ff;\\n padding: 16px 40px;\\n text-decoration: none;\\n font-size: 1.1rem;\\n font-weight: 600;\\n border-radius: 30px;\\n border: 2px solid #1e90ff;\\n display: inline-flex;\\n align-items: center;\\n gap: 10px;\\n transition: all 0.3s ease;\\n}\\n\\n.btn-outline:hover {\\n background: #1e90ff;\\n color: white;\\n transform: translateY(-3px);\\n box-shadow: 0 10px 25px rgba(30, 144, 255, 0.3);\\n}\\n\\n\\\/* Decorative elements *\\\/\\n.gold-accent-v2 {\\n position: absolute;\\n width: 200px;\\n height: 200px;\\n background: radial-gradient(circle, rgba(255, 215, 0, 0.2) 0%, transparent 70%);\\n border-radius: 50%;\\n filter: blur(40px);\\n animation: float-accent 15s ease-in-out infinite;\\n}\\n\\n.gold-accent-v2:nth-child(1) {\\n top: -100px;\\n right: -100px;\\n}\\n\\n.gold-accent-v2:nth-child(2) {\\n bottom: -100px;\\n left: -100px;\\n animation-delay: 7s;\\n}\\n\\n@keyframes float-accent {\\n 0%, 100% {\\n transform: translate(0, 0);\\n }\\n 50% {\\n transform: translate(-20px, 20px);\\n }\\n}\\n\\n\\\/* ===== \\u0412\\u0410\\u0420\\u0418\\u0410\\u041d\\u0422 3 - \\u042d\\u041b\\u0415\\u0413\\u0410\\u041d\\u0422\\u041d\\u042b\\u0419 \\u041c\\u0418\\u041d\\u0418\\u041c\\u0410\\u041b\\u0418\\u0417\\u041c ===== *\\\/\\n.president-section-wrapper-v3 {\\n width: 100vw;\\n position: relative;\\n left: 50%;\\n right: 50%;\\n margin-left: -50vw;\\n margin-right: -50vw;\\n background: white;\\n overflow: hidden;\\n max-width: 100vw;\\n}\\n\\n.president-section-v3 {\\n padding: 120px 0;\\n position: relative;\\n}\\n\\n.gold-pattern {\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n background-image: \\n radial-gradient(circle at 20% 80%, rgba(184, 134, 11, 0.03) 0%, transparent 50%),\\n radial-gradient(circle at 80% 20%, rgba(255, 215, 0, 0.03) 0%, transparent 50%),\\n radial-gradient(circle at 80% 80%, rgba(30, 144, 255, 0.03) 0%, transparent 50%);\\n z-index: 0;\\n}\\n\\n.president-container-v3 {\\n max-width: 800px;\\n margin: 0 auto;\\n padding: 0 20px;\\n text-align: center;\\n position: relative;\\n z-index: 1;\\n}\\n\\n.president-photo-v3 {\\n width: 300px;\\n height: 400px;\\n margin: 0 auto 50px;\\n position: relative;\\n animation: fadeInDown 1s ease-out;\\n}\\n\\n.photo-frame {\\n width: 100%;\\n height: 100%;\\n position: relative;\\n overflow: hidden;\\n border-radius: 0 50% 0 50%;\\n box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);\\n}\\n\\n.photo-frame::before {\\n content: '';\\n position: absolute;\\n top: -5px;\\n left: -5px;\\n right: -5px;\\n bottom: -5px;\\n background: linear-gradient(135deg, #b8860b, #ffd700, #b8860b);\\n border-radius: 0 50% 0 50%;\\n z-index: -1;\\n animation: gradient-rotate 8s linear infinite;\\n}\\n\\n@keyframes gradient-rotate {\\n 0% {\\n filter: hue-rotate(0deg);\\n }\\n 100% {\\n filter: hue-rotate(360deg);\\n }\\n}\\n\\n.photo-frame img {\\n width: 100%;\\n height: 100%;\\n object-fit: cover;\\n transition: all 0.6s ease;\\n}\\n\\n.photo-frame:hover img {\\n transform: scale(1.05);\\n}\\n\\n.president-content-v3 {\\n animation: fadeInUp 1s ease-out 0.3s both;\\n}\\n\\n.title-decoration {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n gap: 20px;\\n margin-bottom: 30px;\\n}\\n\\n.gold-line {\\n width: 60px;\\n height: 3px;\\n background: linear-gradient(90deg, transparent, #b8860b, transparent);\\n}\\n\\n.president-title-v3 {\\n font-family: 'Montserrat', sans-serif !important;\\n font-size: 1rem;\\n font-weight: 700;\\n text-transform: uppercase;\\n letter-spacing: 5px;\\n color: #b8860b;\\n}\\n\\n.president-name-v3 {\\n font-size: 3.5rem;\\n font-weight: 900;\\n color: #1a3a52;\\n margin-bottom: 40px;\\n line-height: 1.1;\\n font-family: 'Playfair Display', serif !important;\\n position: relative;\\n}\\n\\n.president-name-v3::after {\\n content: '';\\n position: absolute;\\n bottom: -15px;\\n left: 50%;\\n transform: translateX(-50%);\\n width: 100px;\\n height: 4px;\\n background: linear-gradient(90deg, transparent, #ffd700, transparent);\\n}\\n\\n.president-description-v3 {\\n font-size: 1.2rem;\\n line-height: 2;\\n color: #5a6c7d;\\n margin-bottom: 50px;\\n max-width: 700px;\\n margin-left: auto;\\n margin-right: auto;\\n font-family: 'Lato', sans-serif !important;\\n}\\n\\n.president-description-v3 .highlight {\\n background: linear-gradient(135deg, #b8860b, #ffd700);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n font-weight: 600;\\n}\\n\\n.action-row {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n gap: 40px;\\n}\\n\\n.btn-elegant {\\n padding: 18px 45px;\\n text-decoration: none;\\n font-size: 1.1rem;\\n font-weight: 600;\\n border-radius: 5px;\\n display: inline-flex;\\n align-items: center;\\n gap: 12px;\\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\\n position: relative;\\n overflow: hidden;\\n text-transform: uppercase;\\n letter-spacing: 1px;\\n}\\n\\n.btn-primary {\\n background: #1a3a52;\\n color: white;\\n box-shadow: 0 10px 30px rgba(26, 58, 82, 0.3);\\n}\\n\\n.btn-primary::before {\\n content: '';\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n background: linear-gradient(135deg, #b8860b, #ffd700);\\n opacity: 0;\\n transition: opacity 0.4s ease;\\n}\\n\\n.btn-primary:hover::before {\\n opacity: 1;\\n}\\n\\n.btn-primary span,\\n.btn-primary svg {\\n position: relative;\\n z-index: 1;\\n}\\n\\n.btn-primary:hover {\\n transform: translateY(-3px);\\n box-shadow: 0 15px 40px rgba(184, 134, 11, 0.4);\\n}\\n\\n.btn-secondary {\\n background: transparent;\\n color: #1a3a52;\\n border: 3px solid #1a3a52;\\n}\\n\\n.btn-secondary:hover {\\n background: #1a3a52;\\n color: white;\\n transform: translateY(-3px);\\n box-shadow: 0 15px 40px rgba(26, 58, 82, 0.3);\\n}\\n\\n.logo-floating {\\n position: absolute;\\n top: 50px;\\n right: 50px;\\n width: 80px;\\n height: 80px;\\n opacity: 0.1;\\n animation: float-logo 20s ease-in-out infinite;\\n}\\n\\n@keyframes float-logo {\\n 0%, 100% {\\n transform: translate(0, 0) rotate(0deg);\\n }\\n 25% {\\n transform: translate(-20px, 20px) rotate(90deg);\\n }\\n 50% {\\n transform: translate(20px, -20px) rotate(180deg);\\n }\\n 75% {\\n transform: translate(-20px, -20px) rotate(270deg);\\n }\\n}\\n\\n\\\/* Responsive Design *\\\/\\n@media (max-width: 1200px) {\\n .president-container-v1 {\\n padding: 0 40px;\\n gap: 60px;\\n }\\n \\n .president-card {\\n padding: 40px;\\n }\\n}\\n\\n@media (max-width: 968px) {\\n .president-section-v1,\\n .president-section-v2,\\n .president-section-v3 {\\n padding: 60px 0;\\n }\\n \\n .president-container-v1 {\\n grid-template-columns: 1fr;\\n gap: 50px;\\n text-align: center;\\n padding: 0 30px;\\n }\\n \\n .president-card-content {\\n grid-template-columns: 1fr;\\n text-align: center;\\n }\\n \\n .president-photo-v2 {\\n margin: 0 auto;\\n }\\n \\n .president-actions-v2,\\n .action-row {\\n justify-content: center;\\n }\\n \\n .president-photo {\\n margin: 0 auto;\\n max-width: 400px;\\n height: 500px;\\n }\\n \\n .president-title::after {\\n left: 50%;\\n transform: translateX(-50%);\\n width: 60px;\\n }\\n \\n .president-title:hover::after {\\n transform: translateX(-50%) scaleX(1);\\n }\\n \\n .president-description {\\n text-align: left;\\n }\\n \\n .action-wrapper {\\n justify-content: center;\\n flex-wrap: wrap;\\n }\\n}\\n\\n@media (max-width: 640px) {\\n .president-container-v1,\\n .president-container-v2,\\n .president-container-v3 {\\n padding: 0 20px;\\n }\\n \\n .president-name,\\n .president-name-v2,\\n .president-name-v3 {\\n font-size: 2rem;\\n }\\n \\n .president-title {\\n font-size: 1.3rem;\\n letter-spacing: 2px;\\n }\\n \\n .president-description,\\n .president-description-v2,\\n .president-description-v3 {\\n font-size: 1rem;\\n }\\n \\n .action-wrapper {\\n flex-direction: row;\\n gap: 20px;\\n align-items: center;\\n justify-content: center;\\n }\\n \\n .action-buttons {\\n flex-direction: row;\\n gap: 10px;\\n }\\n \\n .btn-modern {\\n padding: 12px 20px;\\n font-size: 0.95rem;\\n }\\n \\n .bifa-logo-wrapper {\\n margin-left: 10px;\\n }\\n \\n .president-photo-v3 {\\n width: 250px;\\n height: 333px;\\n }\\n \\n .president-actions-v2,\\n .action-row {\\n flex-direction: column;\\n width: 100%;\\n }\\n \\n .btn-gold,\\n .btn-outline,\\n .btn-elegant {\\n width: 100%;\\n justify-content: center;\\n }\\n}\\n\\n@media (max-width: 480px) {\\n .president-photo {\\n max-width: 100%;\\n height: 400px;\\n }\\n \\n .bifa-logo-wrapper {\\n width: 70px;\\n height: 70px;\\n margin-left: 10px;\\n }\\n \\n .bifa-logo-img {\\n width: 70px;\\n height: 70px;\\n }\\n \\n .action-wrapper {\\n flex-wrap: nowrap;\\n }\\n \\n .btn-modern {\\n padding: 10px 15px;\\n font-size: 0.9rem;\\n }\\n \\n .btn-modern span {\\n display: none;\\n }\\n \\n .btn-modern .btn-icon {\\n margin: 0;\\n }\\n}\\n\\n\\\/* Title Styles *\\\/\\n.variant-title {\\n text-align: center;\\n font-size: 2.5rem;\\n font-weight: 800;\\n margin-bottom: 20px;\\n font-family: 'Montserrat', sans-serif !important;\\n color: #1a3a52;\\n}\\n\\n.divider {\\n height: 2px;\\n background: linear-gradient(90deg, transparent, #b8860b, transparent);\\n margin: 80px auto;\\n max-width: 200px;\\n}\\n<\\\/style>\\n<\\\/head>\\n<body>\\n\\n\\n<\/p>\n<h1 class=\"\\\"variant-title\\\"\">\\u0412\\u0430\\u0440\\u0438\\u0430\\u043d\\u0442 1 - \\u041e\\u0440\\u0438\\u0433\\u0438\\u043d\\u0430\\u043b\\u044c\\u043d\\u044b\\u0439<\\\/h1>\\n<\/p>\n<div class=\"\\\"president-section-wrapper-v1\\\"\">\\n <\/p>\n<section class=\"\\\"president-section-v1\\\"\">\\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=\"\\\"neon-line\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"neon-line\\\"\"><\\\/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=\"\\\"president-container-v1\\\"\">\\n \\n <\/p>\n<div class=\"\\\"president-image-column\\\"\">\\n <\/p>\n<div class=\"\\\"president-photo\\\"\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Mr\\\/main-photo.jpg\\\"\" alt=\"\\\"Mr.\" salim humaid almazaini\\\">\\n <\\\/div>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"president-info\\\"\">\\n <a href=\"\\\"\\\/aboutus\\\"\" class=\"\\\"president-title\\\"\">\\n <span>Founder and President<\\\/span>\\n <\\\/a>\\n \\n <a href=\"\\\"\\\/aboutus\\\"\" class=\"\\\"president-name\\\"\">\\n Mr. Salim Humaid Almazaini\\n <\\\/a>\\n \\n <\/p>\n<div class=\"\\\"president-description\\\"\">\\n <\/p>\n<p>\\n A distinguished <span class=\"\\\"highlight\\\"\">visionary leader<\\\/span> in international sports diplomacy. Through strategic innovation and unwavering commitment, Mr. Almazaini transforms global football <span class=\"\\\"highlight\\\"\">into a powerful bridge for unity and cooperation<\\\/span> between nations.\\n <\\\/p>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"action-wrapper\\\"\">\\n <\/p>\n<div class=\"\\\"action-buttons\\\"\">\\n <a href=\"\\\"\\\/president\\\"\" class=\"\\\"btn-modern\" learn-more-btn\\\">\\n <span>Learn More<\\\/span>\\n <svg class=\"\\\"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=\"\\\"\\\/aboutus\\\"\" class=\"\\\"btn-modern\" about-btn\\\">\\n <span>About BIFA<\\\/span>\\n <svg class=\"\\\"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\" 16v-4m12 8h.01\\\"\\>\\n <\\\/svg>\\n <\\\/a>\\n <\\\/div>\\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 <\\\/section>\\n<\\\/div>\\n\\n<\/p>\n<div class=\"\\\"divider\\\"\"><\\\/div>\\n\\n\\n<\/p>\n<h1 class=\"\\\"variant-title\\\"\">\\u0412\\u0430\\u0440\\u0438\\u0430\\u043d\\u0442 2 - \\u041a\\u0430\\u0440\\u0442\\u043e\\u0447\\u043d\\u044b\\u0439 \\u0434\\u0438\\u0437\\u0430\\u0439\\u043d<\\\/h1>\\n<\/p>\n<div class=\"\\\"president-section-wrapper-v2\\\"\">\\n <\/p>\n<section class=\"\\\"president-section-v2\\\"\">\\n <\/p>\n<div class=\"\\\"gold-accent-v2\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"gold-accent-v2\\\"\"><\\\/div>\\n \\n <\/p>\n<div class=\"\\\"president-container-v2\\\"\">\\n <\/p>\n<div class=\"\\\"president-card\\\"\">\\n <\/p>\n<div class=\"\\\"president-card-content\\\"\">\\n \\n <\/p>\n<div class=\"\\\"president-photo-v2\\\"\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Mr\\\/main-photo.jpg\\\"\" alt=\"\\\"Mr.\" salim humaid almazaini\\\">\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"president-info-v2\\\"\">\\n <\/p>\n<div class=\"\\\"president-badge\\\"\">\\n <svg class=\"\\\"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=\"\\\"badge-text\\\"\">Founder & President<\\\/span>\\n <\\\/div>\\n \\n <\/p>\n<h2 class=\"\\\"president-name-v2\\\"\">Mr. Salim Humaid Almazaini<\\\/h2>\\n \\n <\/p>\n<div class=\"\\\"president-description-v2\\\"\">\\n <\/p>\n<p>\\n A distinguished <span class=\"\\\"highlight\\\"\">visionary leader<\\\/span> in international sports diplomacy. Through strategic innovation and unwavering commitment, Mr. Almazaini transforms global football <span class=\"\\\"highlight\\\"\">into a powerful bridge for unity and cooperation<\\\/span> between nations.\\n <\\\/p>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"president-actions-v2\\\"\">\\n <a href=\"\\\"\\\/president\\\"\" class=\"\\\"btn-gold\\\"\">\\n <span>Discover Story<\\\/span>\\n <svg class=\"\\\"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=\"\\\"\\\/aboutus\\\"\" class=\"\\\"btn-outline\\\"\">\\n <span>About BIFA<\\\/span>\\n <svg class=\"\\\"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 <\\\/section>\\n<\\\/div>\\n\\n<\/p>\n<div class=\"\\\"divider\\\"\"><\\\/div>\\n\\n\\n<\/p>\n<h1 class=\"\\\"variant-title\\\"\">\\u0412\\u0430\\u0440\\u0438\\u0430\\u043d\\u0442 3 - \\u042d\\u043b\\u0435\\u0433\\u0430\\u043d\\u0442\\u043d\\u044b\\u0439 \\u043c\\u0438\\u043d\\u0438\\u043c\\u0430\\u043b\\u0438\\u0437\\u043c<\\\/h1>\\n<\/p>\n<div class=\"\\\"president-section-wrapper-v3\\\"\">\\n <\/p>\n<section class=\"\\\"president-section-v3\\\"\">\\n <\/p>\n<div class=\"\\\"gold-pattern\\\"\"><\\\/div>\\n \\n <\/p>\n<div class=\"\\\"logo-floating\\\"\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/logo_bifa.svg\\\"\" alt=\"\\\"BIFA\\\"\" style=\"\\\"width:\" 100%; height: opacity: 0.1;\\\">\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"president-container-v3\\\"\">\\n \\n <\/p>\n<div class=\"\\\"president-photo-v3\\\"\">\\n <\/p>\n<div class=\"\\\"photo-frame\\\"\">\\n <img src=\"\\\"\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Mr\\\/main-photo.jpg\\\"\" alt=\"\\\"Mr.\" salim humaid almazaini\\\">\\n <\\\/div>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"president-content-v3\\\"\">\\n <\/p>\n<div class=\"\\\"title-decoration\\\"\">\\n <\/p>\n<div class=\"\\\"gold-line\\\"\"><\\\/div>\\n <\/p>\n<h3 class=\"\\\"president-title-v3\\\"\">Founder & President<\\\/h3>\\n <\/p>\n<div class=\"\\\"gold-line\\\"\"><\\\/div>\\n <\\\/div>\\n \\n <\/p>\n<h1 class=\"\\\"president-name-v3\\\"\">Mr. Salim Humaid Almazaini<\\\/h1>\\n \\n <\/p>\n<div class=\"\\\"president-description-v3\\\"\">\\n <\/p>\n<p>\\n A distinguished <span class=\"\\\"highlight\\\"\">visionary leader<\\\/span> in international sports diplomacy. Through strategic innovation and unwavering commitment, Mr. Almazaini transforms global football <span class=\"\\\"highlight\\\"\">into a powerful bridge for unity and cooperation<\\\/span> between nations.\\n <\\\/p>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"action-row\\\"\">\\n <a href=\"\\\"\\\/president\\\"\" class=\"\\\"btn-elegant\" btn-primary\\\">\\n <span>Learn More<\\\/span>\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" width=\"\\\"20\\\"\" height=\"\\\"20\\\"\" 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=\"\\\"\\\/aboutus\\\"\" class=\"\\\"btn-elegant\" btn-secondary\\\">\\n <span>About BIFA<\\\/span>\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" width=\"\\\"20\\\"\" height=\"\\\"20\\\"\" 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\" 16v-4m12 8h.01\\\"\\>\\n <\\\/svg>\\n <\\\/a>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/section>\\n<\\\/div>\\n\\n<script>\\n\\\/\\\/ Animation for all variants\\ndocument.addEventListener('DOMContentLoaded', function() {\\n \\\/\\\/ Smooth scroll reveal\\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('[class*=\\\"fadeIn\\\"], .president-card, .president-photo-v2, .president-photo-v3').forEach(el => {\\n if (el) {\\n el.style.animationPlayState = 'paused';\\n observer.observe(el);\\n }\\n });\\n\\n \\\/\\\/ Logo hover effects for all variants\\n document.querySelectorAll('.bifa-logo-wrapper').forEach(logoWrapper => {\\n logoWrapper.addEventListener('mouseenter', () => {\\n const logo = logoWrapper.querySelector('.bifa-logo-img');\\n if (logo) {\\n logo.style.transform = 'scale(1.1)';\\n }\\n });\\n \\n logoWrapper.addEventListener('mouseleave', () => {\\n const logo = logoWrapper.querySelector('.bifa-logo-img');\\n if (logo) {\\n logo.style.transform = 'scale(1)';\\n }\\n });\\n });\\n\\n \\\/\\\/ Button glow effects\\n document.querySelectorAll('.btn-modern, .btn-gold, .btn-outline, .btn-elegant').forEach(button => {\\n button.addEventListener('mouseenter', (e) => {\\n const rect = button.getBoundingClientRect();\\n const x = e.clientX - rect.left;\\n const y = e.clientY - rect.top;\\n \\n const glow = document.createElement('div');\\n glow.style.cssText = `\\n position: absolute;\\n width: 100px;\\n height: 100px;\\n background: radial-gradient(circle, rgba(255, 215, 0, 0.2) 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(glow);\\n setTimeout(() => { glow.style.opacity = '1'; }, 10);\\n \\n button.addEventListener('mouseleave', () => {\\n glow.style.opacity = '0';\\n setTimeout(() => glow.remove(), 300);\\n }, { once: true });\\n });\\n });\\n\\n \\\/\\\/ Image loading animation\\n document.querySelectorAll('img').forEach(img => {\\n img.style.opacity = '0';\\n img.style.transition = 'opacity 0.5s ease';\\n \\n if (img.complete) {\\n img.style.opacity = '1';\\n } else {\\n img.addEventListener('load', function() {\\n this.style.opacity = '1';\\n });\\n }\\n });\\n\\n \\\/\\\/ Preload images\\n function preloadImages() {\\n const imageUrls = [\\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 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 Quote Blocks - 4 Design Variants<\\\/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=Playfair+Display:wght@400;700;900&family=Lato:wght@300;400;700&family=Montserrat:wght@400;600;700;800&family=Merriweather:wght@300;400;700;900&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: 'Lato', sans-serif !important;\\n background: #f5f5f5;\\n overflow-x: hidden;\\n position: relative;\\n}\\n\\n\\\/* ===== \\u0412\\u0410\\u0420\\u0418\\u0410\\u041d\\u0422 1 - \\u041a\\u041b\\u0410\\u0421\\u0421\\u0418\\u0427\\u0415\\u0421\\u041a\\u0418\\u0419 ===== *\\\/\\n.quote-section-wrapper-v1 {\\n width: 100vw;\\n position: relative;\\n left: 50%;\\n right: 50%;\\n margin-left: -50vw;\\n margin-right: -50vw;\\n background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);\\n overflow: hidden;\\n max-width: 100vw;\\n margin-bottom: 100px;\\n}\\n\\n.quote-section-v1 {\\n padding: 120px 0;\\n position: relative;\\n}\\n\\n\\\/* \\u0412\\u043e\\u0434\\u044f\\u043d\\u044b\\u0435 \\u0437\\u043d\\u0430\\u043a\\u0438 *\\\/\\n.watermark-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.bird-watermark {\\n position: absolute;\\n width: 300px;\\n height: 300px;\\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.03;\\n top: 20%;\\n right: 10%;\\n animation: float-gentle 20s ease-in-out infinite;\\n}\\n\\n.logo-watermark {\\n position: absolute;\\n width: 400px;\\n height: 400px;\\n background-image: url('\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/flag-logo1.svg');\\n background-size: contain;\\n background-repeat: no-repeat;\\n background-position: center;\\n opacity: 0.03;\\n bottom: 10%;\\n left: 5%;\\n animation: float-gentle 25s ease-in-out infinite reverse;\\n}\\n\\n@keyframes float-gentle {\\n 0%, 100% {\\n transform: translate(0, 0) rotate(0deg);\\n }\\n 50% {\\n transform: translate(30px, -30px) rotate(5deg);\\n }\\n}\\n\\n.quote-container-v1 {\\n max-width: 1000px;\\n margin: 0 auto;\\n padding: 0 40px;\\n text-align: center;\\n position: relative;\\n z-index: 1;\\n}\\n\\n\\\/* \\u0414\\u0435\\u043a\\u043e\\u0440\\u0430\\u0442\\u0438\\u0432\\u043d\\u044b\\u0435 \\u043a\\u0430\\u0432\\u044b\\u0447\\u043a\\u0438 *\\\/\\n.quote-marks {\\n position: relative;\\n display: inline-block;\\n margin-bottom: 40px;\\n}\\n\\n.quote-mark-left,\\n.quote-mark-right {\\n font-family: 'Playfair Display', serif;\\n font-size: 120px;\\n line-height: 1;\\n color: #b8860b;\\n opacity: 0.2;\\n position: absolute;\\n}\\n\\n.quote-mark-left {\\n top: -40px;\\n left: -80px;\\n}\\n\\n.quote-mark-right {\\n bottom: -80px;\\n right: -80px;\\n transform: rotate(180deg);\\n}\\n\\n\\\/* \\u041e\\u0441\\u043d\\u043e\\u0432\\u043d\\u043e\\u0439 \\u0442\\u0435\\u043a\\u0441\\u0442 \\u0446\\u0438\\u0442\\u0430\\u0442\\u044b *\\\/\\n.quote-text-v1 {\\n font-family: 'Playfair Display', serif !important;\\n font-size: clamp(2rem, 3.5vw, 3rem);\\n font-weight: 700;\\n line-height: 1.4;\\n color: #1a3a52;\\n margin-bottom: 40px;\\n position: relative;\\n animation: fadeInUp 1s ease-out;\\n}\\n\\n.quote-highlight {\\n background: linear-gradient(135deg, #b8860b, #ffd700);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n font-weight: 900;\\n}\\n\\n\\\/* \\u0410\\u0432\\u0442\\u043e\\u0440 \\u0446\\u0438\\u0442\\u0430\\u0442\\u044b *\\\/\\n.quote-author-v1 {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n gap: 15px;\\n margin-top: 50px;\\n animation: fadeInUp 1s ease-out 0.3s both;\\n}\\n\\n.author-dash {\\n width: 50px;\\n height: 3px;\\n background: linear-gradient(90deg, #b8860b, #ffd700);\\n}\\n\\n.author-info {\\n font-family: 'Montserrat', sans-serif !important;\\n}\\n\\n.author-name {\\n font-size: 1.3rem;\\n font-weight: 700;\\n color: #1a3a52;\\n margin-bottom: 5px;\\n}\\n\\n.author-title {\\n font-size: 1rem;\\n color: #5a6c7d;\\n font-weight: 400;\\n}\\n\\n\\\/* \\u0414\\u0435\\u043a\\u043e\\u0440\\u0430\\u0442\\u0438\\u0432\\u043d\\u044b\\u0439 \\u0433\\u043e\\u043b\\u0443\\u0431\\u044c *\\\/\\n.bird-decoration {\\n position: absolute;\\n top: 50px;\\n left: 50px;\\n width: 80px;\\n height: 80px;\\n background-image: url('\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Logo\\\/bird.svg');\\n background-size: contain;\\n background-repeat: no-repeat;\\n opacity: 0.1;\\n animation: fly-bird 30s linear infinite;\\n}\\n\\n@keyframes fly-bird {\\n 0% {\\n transform: translate(0, 0) rotate(0deg);\\n }\\n 25% {\\n transform: translate(200px, -50px) rotate(10deg);\\n }\\n 50% {\\n transform: translate(400px, 0) rotate(0deg);\\n }\\n 75% {\\n transform: translate(200px, 50px) rotate(-10deg);\\n }\\n 100% {\\n transform: translate(0, 0) rotate(0deg);\\n }\\n}\\n\\n\\\/* ===== \\u0412\\u0410\\u0420\\u0418\\u0410\\u041d\\u0422 2 - \\u0421\\u041e\\u0412\\u0420\\u0415\\u041c\\u0415\\u041d\\u041d\\u042b\\u0419 \\u041c\\u0418\\u041d\\u0418\\u041c\\u0410\\u041b\\u0418\\u0417\\u041c ===== *\\\/\\n.quote-section-wrapper-v2 {\\n width: 100vw;\\n position: relative;\\n left: 50%;\\n right: 50%;\\n margin-left: -50vw;\\n margin-right: -50vw;\\n background: #ffffff;\\n overflow: hidden;\\n max-width: 100vw;\\n margin-bottom: 100px;\\n}\\n\\n.quote-section-v2 {\\n padding: 100px 0;\\n position: relative;\\n}\\n\\n.quote-container-v2 {\\n max-width: 1200px;\\n margin: 0 auto;\\n padding: 0 40px;\\n position: relative;\\n}\\n\\n\\\/* \\u041b\\u0435\\u0432\\u0430\\u044f \\u043f\\u0430\\u043d\\u0435\\u043b\\u044c \\u0441 \\u043f\\u0442\\u0438\\u0446\\u0435\\u0439 *\\\/\\n.quote-layout-v2 {\\n display: grid;\\n grid-template-columns: 300px 1fr;\\n gap: 80px;\\n align-items: center;\\n}\\n\\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(184, 134, 11, 0.05) 0%, rgba(255, 215, 0, 0.05) 100%);\\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\\\/* \\u041f\\u0440\\u0430\\u0432\\u0430\\u044f \\u043f\\u0430\\u043d\\u0435\\u043b\\u044c \\u0441 \\u0446\\u0438\\u0442\\u0430\\u0442\\u043e\\u0439 *\\\/\\n.quote-content-v2 {\\n animation: fadeInRight 1s ease-out;\\n}\\n\\n.quote-text-v2 {\\n font-family: 'Merriweather', serif !important;\\n font-size: 2.5rem;\\n font-weight: 300;\\n line-height: 1.5;\\n color: #1a3a52;\\n margin-bottom: 40px;\\n position: relative;\\n}\\n\\n.quote-text-v2::before {\\n content: '\\\"';\\n position: absolute;\\n top: -30px;\\n left: -50px;\\n font-size: 100px;\\n color: #b8860b;\\n opacity: 0.3;\\n font-family: 'Playfair Display', serif;\\n}\\n\\n.author-block-v2 {\\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\\\/flag-logo1.svg');\\n background-size: contain;\\n background-repeat: no-repeat;\\n opacity: 0.8;\\n}\\n\\n.author-details {\\n border-left: 3px solid #b8860b;\\n padding-left: 20px;\\n}\\n\\n\\\/* ===== \\u0412\\u0410\\u0420\\u0418\\u0410\\u041d\\u0422 3 - \\u041a\\u0410\\u0420\\u0422\\u041e\\u0427\\u041a\\u0410 \\u0421 \\u0413\\u0420\\u0410\\u0414\\u0418\\u0415\\u041d\\u0422\\u041e\\u041c ===== *\\\/\\n.quote-section-wrapper-v3 {\\n width: 100vw;\\n position: relative;\\n left: 50%;\\n right: 50%;\\n margin-left: -50vw;\\n margin-right: -50vw;\\n background: #f0f5fa;\\n overflow: hidden;\\n max-width: 100vw;\\n margin-bottom: 100px;\\n}\\n\\n.quote-section-v3 {\\n padding: 120px 0;\\n position: relative;\\n}\\n\\n.quote-container-v3 {\\n max-width: 900px;\\n margin: 0 auto;\\n padding: 0 20px;\\n position: relative;\\n z-index: 1;\\n}\\n\\n.quote-card {\\n background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);\\n border-radius: 30px;\\n padding: 80px;\\n box-shadow: 0 30px 80px rgba(0, 0, 0, 0.08);\\n position: relative;\\n overflow: hidden;\\n animation: fadeInScale 1s ease-out;\\n}\\n\\n\\\/* \\u0413\\u0440\\u0430\\u0434\\u0438\\u0435\\u043d\\u0442\\u043d\\u0430\\u044f \\u0440\\u0430\\u043c\\u043a\\u0430 *\\\/\\n.quote-card::before {\\n content: '';\\n position: absolute;\\n top: 0;\\n left: 0;\\n right: 0;\\n bottom: 0;\\n border-radius: 30px;\\n padding: 3px;\\n background: linear-gradient(135deg, #b8860b, #ffd700, #1e90ff);\\n -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\\n -webkit-mask-composite: exclude;\\n mask-composite: exclude;\\n opacity: 0.3;\\n}\\n\\n\\\/* \\u0424\\u043e\\u043d\\u043e\\u0432\\u044b\\u0435 \\u044d\\u043b\\u0435\\u043c\\u0435\\u043d\\u0442\\u044b *\\\/\\n.card-bg-elements {\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n overflow: hidden;\\n opacity: 0.05;\\n}\\n\\n.bg-bird {\\n position: absolute;\\n width: 200px;\\n height: 200px;\\n background-image: url('\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Logo\\\/bird.svg');\\n background-size: contain;\\n background-repeat: no-repeat;\\n top: -50px;\\n right: -50px;\\n transform: rotate(15deg);\\n}\\n\\n.bg-logo {\\n position: absolute;\\n width: 300px;\\n height: 300px;\\n background-image: url('\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/flag-logo1.svg');\\n background-size: contain;\\n background-repeat: no-repeat;\\n bottom: -100px;\\n left: -100px;\\n transform: rotate(-15deg);\\n}\\n\\n.quote-content-v3 {\\n position: relative;\\n text-align: center;\\n}\\n\\n.quote-icon {\\n width: 60px;\\n height: 60px;\\n margin: 0 auto 30px;\\n background: linear-gradient(135deg, #b8860b, #ffd700);\\n border-radius: 50%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n animation: pulse-icon 3s ease-in-out infinite;\\n}\\n\\n@keyframes pulse-icon {\\n 0%, 100% {\\n transform: scale(1);\\n box-shadow: 0 5px 20px rgba(184, 134, 11, 0.3);\\n }\\n 50% {\\n transform: scale(1.05);\\n box-shadow: 0 8px 30px rgba(184, 134, 11, 0.4);\\n }\\n}\\n\\n.quote-icon::before {\\n content: '\\\"';\\n font-family: 'Playfair Display', serif;\\n font-size: 30px;\\n color: white;\\n font-weight: 900;\\n}\\n\\n.quote-text-v3 {\\n font-family: 'Playfair Display', serif !important;\\n font-size: 2.2rem;\\n font-weight: 400;\\n line-height: 1.6;\\n color: #1a3a52;\\n margin-bottom: 50px;\\n}\\n\\n.quote-footer {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n gap: 30px;\\n}\\n\\n.footer-line {\\n width: 80px;\\n height: 2px;\\n background: linear-gradient(90deg, transparent, #b8860b, transparent);\\n}\\n\\n\\\/* ===== \\u0412\\u0410\\u0420\\u0418\\u0410\\u041d\\u0422 4 - \\u042d\\u041b\\u0415\\u0413\\u0410\\u041d\\u0422\\u041d\\u042b\\u0419 \\u0421 \\u041f\\u0422\\u0418\\u0426\\u0415\\u0419 ===== *\\\/\\n.quote-section-wrapper-v4 {\\n width: 100vw;\\n position: relative;\\n left: 50%;\\n right: 50%;\\n margin-left: -50vw;\\n margin-right: -50vw;\\n background: linear-gradient(180deg, #ffffff 0%, #d7e9f7 100%);\\n overflow: hidden;\\n max-width: 100vw;\\n}\\n\\n.quote-section-v4 {\\n padding: 150px 0;\\n position: relative;\\n}\\n\\n\\\/* \\u0410\\u043d\\u0438\\u043c\\u0438\\u0440\\u043e\\u0432\\u0430\\u043d\\u043d\\u044b\\u0439 \\u0444\\u043e\\u043d *\\\/\\n.animated-bg {\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n overflow: hidden;\\n z-index: 0;\\n}\\n\\n.floating-bird {\\n position: absolute;\\n width: 100px;\\n height: 100px;\\n background-image: url('\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/Logo\\\/bird.svg');\\n background-size: contain;\\n background-repeat: no-repeat;\\n opacity: 0.05;\\n animation: float-diagonal 20s linear infinite;\\n}\\n\\n.floating-bird:nth-child(1) {\\n top: 10%;\\n left: -100px;\\n animation-delay: 0s;\\n}\\n\\n.floating-bird:nth-child(2) {\\n top: 40%;\\n left: -100px;\\n animation-delay: 5s;\\n}\\n\\n.floating-bird:nth-child(3) {\\n top: 70%;\\n left: -100px;\\n animation-delay: 10s;\\n}\\n\\n@keyframes float-diagonal {\\n 0% {\\n transform: translate(0, 0) rotate(10deg);\\n }\\n 100% {\\n transform: translate(calc(100vw + 200px), -200px) rotate(10deg);\\n }\\n}\\n\\n.quote-container-v4 {\\n max-width: 1100px;\\n margin: 0 auto;\\n padding: 0 40px;\\n position: relative;\\n z-index: 1;\\n}\\n\\n.quote-wrapper-v4 {\\n display: flex;\\n align-items: center;\\n gap: 60px;\\n background: rgba(255, 255, 255, 0.9);\\n backdrop-filter: blur(10px);\\n border-radius: 40px;\\n padding: 60px;\\n box-shadow: 0 25px 70px rgba(0, 0, 0, 0.1);\\n border: 1px solid rgba(184, 134, 11, 0.1);\\n animation: fadeInUp 1s ease-out;\\n}\\n\\n\\\/* \\u041b\\u0435\\u0432\\u0430\\u044f \\u0447\\u0430\\u0441\\u0442\\u044c \\u0441 \\u043f\\u0442\\u0438\\u0446\\u0435\\u0439 *\\\/\\n.bird-showcase {\\n flex-shrink: 0;\\n width: 200px;\\n height: 200px;\\n position: relative;\\n}\\n\\n.bird-main {\\n width: 100%;\\n height: 100%;\\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.8;\\n animation: bird-fly 6s ease-in-out infinite;\\n}\\n\\n@keyframes bird-fly {\\n 0%, 100% {\\n transform: translateY(0) rotate(0deg);\\n }\\n 25% {\\n transform: translateY(-10px) rotate(-5deg);\\n }\\n 75% {\\n transform: translateY(10px) rotate(5deg);\\n }\\n}\\n\\n.bird-glow {\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n transform: translate(-50%, -50%);\\n width: 150%;\\n height: 150%;\\n background: radial-gradient(circle, rgba(184, 134, 11, 0.1) 0%, transparent 70%);\\n border-radius: 50%;\\n animation: glow-pulse 4s ease-in-out infinite;\\n}\\n\\n@keyframes glow-pulse {\\n 0%, 100% {\\n opacity: 0.5;\\n transform: translate(-50%, -50%) scale(1);\\n }\\n 50% {\\n opacity: 0.8;\\n transform: translate(-50%, -50%) scale(1.1);\\n }\\n}\\n\\n\\\/* \\u041f\\u0440\\u0430\\u0432\\u0430\\u044f \\u0447\\u0430\\u0441\\u0442\\u044c \\u0441 \\u0446\\u0438\\u0442\\u0430\\u0442\\u043e\\u0439 *\\\/\\n.quote-main-v4 {\\n flex: 1;\\n}\\n\\n.quote-text-v4 {\\n font-family: 'Merriweather', serif !important;\\n font-size: 2.3rem;\\n font-weight: 400;\\n line-height: 1.5;\\n color: #1a3a52;\\n margin-bottom: 40px;\\n font-style: italic;\\n}\\n\\n.quote-text-v4 em {\\n font-style: normal;\\n color: #b8860b;\\n font-weight: 700;\\n}\\n\\n.author-signature {\\n display: flex;\\n align-items: center;\\n justify-content: space-between;\\n}\\n\\n.signature-left {\\n display: flex;\\n align-items: center;\\n gap: 20px;\\n}\\n\\n.signature-line {\\n width: 60px;\\n height: 3px;\\n background: #b8860b;\\n}\\n\\n.signature-text {\\n font-family: 'Montserrat', sans-serif !important;\\n}\\n\\n.signature-name {\\n font-size: 1.2rem;\\n font-weight: 700;\\n color: #1a3a52;\\n margin-bottom: 3px;\\n}\\n\\n.signature-role {\\n font-size: 0.95rem;\\n color: #5a6c7d;\\n}\\n\\n.signature-logo {\\n width: 50px;\\n height: 50px;\\n background-image: url('\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/flag-logo1.svg');\\n background-size: contain;\\n background-repeat: no-repeat;\\n opacity: 0.7;\\n transition: all 0.3s ease;\\n}\\n\\n.signature-logo:hover {\\n opacity: 1;\\n transform: scale(1.1);\\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 fadeInScale {\\n from {\\n opacity: 0;\\n transform: scale(0.95);\\n }\\n to {\\n opacity: 1;\\n transform: scale(1);\\n }\\n}\\n\\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-v2 {\\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-wrapper-v4 {\\n flex-direction: column;\\n text-align: center;\\n }\\n \\n .bird-showcase {\\n width: 150px;\\n height: 150px;\\n }\\n \\n .author-signature {\\n flex-direction: column;\\n gap: 20px;\\n }\\n \\n .quote-text-v1,\\n .quote-text-v2,\\n .quote-text-v3,\\n .quote-text-v4 {\\n font-size: 1.8rem;\\n }\\n}\\n\\n@media (max-width: 640px) {\\n .quote-section-v1,\\n .quote-section-v2,\\n .quote-section-v3,\\n .quote-section-v4 {\\n padding: 80px 0;\\n }\\n \\n .quote-card {\\n padding: 40px;\\n }\\n \\n .quote-wrapper-v4 {\\n padding: 40px;\\n }\\n \\n .quote-mark-left,\\n .quote-mark-right {\\n font-size: 80px;\\n }\\n \\n .quote-mark-left {\\n left: -40px;\\n top: -20px;\\n }\\n \\n .quote-mark-right {\\n right: -40px;\\n bottom: -40px;\\n }\\n \\n .bird-decoration {\\n display: none;\\n }\\n \\n .quote-text-v1,\\n .quote-text-v2,\\n .quote-text-v3,\\n .quote-text-v4 {\\n font-size: 1.5rem;\\n }\\n}\\n\\n\\\/* Title Styles *\\\/\\n.variant-title {\\n text-align: center;\\n font-size: 2.5rem;\\n font-weight: 800;\\n margin-bottom: 20px;\\n font-family: 'Montserrat', sans-serif !important;\\n color: #1a3a52;\\n}\\n\\n.divider {\\n height: 2px;\\n background: linear-gradient(90deg, transparent, #b8860b, transparent);\\n margin: 80px auto;\\n max-width: 200px;\\n}\\n<\\\/style>\\n<\\\/head>\\n<body>\\n\\n\\n<\/p>\n<h1 class=\"\\\"variant-title\\\"\">\\u0412\\u0430\\u0440\\u0438\\u0430\\u043d\\u0442 1 - \\u041a\\u043b\\u0430\\u0441\\u0441\\u0438\\u0447\\u0435\\u0441\\u043a\\u0438\\u0439<\\\/h1>\\n<\/p>\n<div class=\"\\\"quote-section-wrapper-v1\\\"\">\\n <\/p>\n<section class=\"\\\"quote-section-v1\\\"\">\\n \\n <\/p>\n<div class=\"\\\"watermark-elements\\\"\">\\n <\/p>\n<div class=\"\\\"bird-watermark\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"logo-watermark\\\"\"><\\\/div>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"bird-decoration\\\"\"><\\\/div>\\n \\n <\/p>\n<div class=\"\\\"quote-container-v1\\\"\">\\n <\/p>\n<div class=\"\\\"quote-marks\\\"\">\\n <span class=\"\\\"quote-mark-left\\\"\">\\\"<\\\/span>\\n <span class=\"\\\"quote-mark-right\\\"\">\\\"<\\\/span>\\n \\n <\/p>\n<blockquote class=\"\\\"quote-text-v1\\\"\"><p>\\n We're not just playing a game. <span class=\"\\\"quote-highlight\\\"\">We're building the future.<\\\/span>\\n <\\\/blockquote>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"quote-author-v1\\\"\">\\n <\/p>\n<div class=\"\\\"author-dash\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"author-info\\\"\">\\n <\/p>\n<div class=\"\\\"author-name\\\"\">Salim Almazaini<\\\/div>\\n <\/p>\n<div class=\"\\\"author-title\\\"\">Founder & President, BIFA & BIFA+<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"author-dash\\\"\"><\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/section>\\n<\\\/div>\\n\\n<\/p>\n<div class=\"\\\"divider\\\"\"><\\\/div>\\n\\n\\n<\/p>\n<h1 class=\"\\\"variant-title\\\"\">\\u0412\\u0430\\u0440\\u0438\\u0430\\u043d\\u0442 2 - \\u0421\\u043e\\u0432\\u0440\\u0435\\u043c\\u0435\\u043d\\u043d\\u044b\\u0439 \\u043c\\u0438\\u043d\\u0438\\u043c\\u0430\\u043b\\u0438\\u0437\\u043c<\\\/h1>\\n<\/p>\n<div class=\"\\\"quote-section-wrapper-v2\\\"\">\\n <\/p>\n<section class=\"\\\"quote-section-v2\\\"\">\\n <\/p>\n<div class=\"\\\"quote-container-v2\\\"\">\\n <\/p>\n<div class=\"\\\"quote-layout-v2\\\"\">\\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-v2\\\"\">\\n <\/p>\n<blockquote class=\"\\\"quote-text-v2\\\"\"><p>\\n We're not just playing a game. We're building the future.\\n <\\\/blockquote>\\n \\n <\/p>\n<div class=\"\\\"author-block-v2\\\"\">\\n <\/p>\n<div class=\"\\\"author-logo\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"author-details\\\"\">\\n <\/p>\n<div class=\"\\\"author-name\\\"\">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<\/p>\n<div class=\"\\\"divider\\\"\"><\\\/div>\\n\\n\\n<\/p>\n<h1 class=\"\\\"variant-title\\\"\">\\u0412\\u0430\\u0440\\u0438\\u0430\\u043d\\u0442 3 - \\u041a\\u0430\\u0440\\u0442\\u043e\\u0447\\u043a\\u0430 \\u0441 \\u0433\\u0440\\u0430\\u0434\\u0438\\u0435\\u043d\\u0442\\u043e\\u043c<\\\/h1>\\n<\/p>\n<div class=\"\\\"quote-section-wrapper-v3\\\"\">\\n <\/p>\n<section class=\"\\\"quote-section-v3\\\"\">\\n <\/p>\n<div class=\"\\\"quote-container-v3\\\"\">\\n <\/p>\n<div class=\"\\\"quote-card\\\"\">\\n \\n <\/p>\n<div class=\"\\\"card-bg-elements\\\"\">\\n <\/p>\n<div class=\"\\\"bg-bird\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"bg-logo\\\"\"><\\\/div>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"quote-content-v3\\\"\">\\n <\/p>\n<div class=\"\\\"quote-icon\\\"\"><\\\/div>\\n \\n <\/p>\n<blockquote class=\"\\\"quote-text-v3\\\"\"><p>\\n We're not just playing a game.<br \/>\\n <strong>We're building the future.<\\\/strong>\\n <\\\/blockquote>\\n \\n <\/p>\n<div class=\"\\\"quote-footer\\\"\">\\n <\/p>\n<div class=\"\\\"footer-line\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"author-info\\\"\">\\n <\/p>\n<div class=\"\\\"author-name\\\"\">Salim Almazaini<\\\/div>\\n <\/p>\n<div class=\"\\\"author-title\\\"\">Founder & President, BIFA & BIFA+<\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"footer-line\\\"\"><\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/section>\\n<\\\/div>\\n\\n<\/p>\n<div class=\"\\\"divider\\\"\"><\\\/div>\\n\\n\\n<\/p>\n<h1 class=\"\\\"variant-title\\\"\">\\u0412\\u0430\\u0440\\u0438\\u0430\\u043d\\u0442 4 - \\u042d\\u043b\\u0435\\u0433\\u0430\\u043d\\u0442\\u043d\\u044b\\u0439 \\u0441 \\u043f\\u0442\\u0438\\u0446\\u0435\\u0439<\\\/h1>\\n<\/p>\n<div class=\"\\\"quote-section-wrapper-v4\\\"\">\\n <\/p>\n<section class=\"\\\"quote-section-v4\\\"\">\\n \\n <\/p>\n<div class=\"\\\"animated-bg\\\"\">\\n <\/p>\n<div class=\"\\\"floating-bird\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"floating-bird\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"floating-bird\\\"\"><\\\/div>\\n <\\\/div>\\n \\n <\/p>\n<div class=\"\\\"quote-container-v4\\\"\">\\n <\/p>\n<div class=\"\\\"quote-wrapper-v4\\\"\">\\n \\n <\/p>\n<div class=\"\\\"bird-showcase\\\"\">\\n <\/p>\n<div class=\"\\\"bird-glow\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"bird-main\\\"\"><\\\/div>\\n <\\\/div>\\n \\n \\n <\/p>\n<div class=\"\\\"quote-main-v4\\\"\">\\n <\/p>\n<blockquote class=\"\\\"quote-text-v4\\\"\"><p>\\n We're not just playing a game. <em>We're building the future.<\\\/em>\\n <\\\/blockquote>\\n \\n <\/p>\n<div class=\"\\\"author-signature\\\"\">\\n <\/p>\n<div class=\"\\\"signature-left\\\"\">\\n <\/p>\n<div class=\"\\\"signature-line\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"signature-text\\\"\">\\n <\/p>\n<div class=\"\\\"signature-name\\\"\">Salim Almazaini<\\\/div>\\n <\/p>\n<div class=\"\\\"signature-role\\\"\">Founder & President, BIFA & BIFA+<\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"signature-logo\\\"\"><\\\/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('[class*=\\\"quote-text\\\"], [class*=\\\"quote-author\\\"], .quote-card, .quote-wrapper-v4, .bird-panel, .quote-content-v2').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 \\\/\\\/ Parallax effect for watermarks\\n let ticking = false;\\n function updateParallax() {\\n const scrolled = window.pageYOffset;\\n \\n document.querySelectorAll('.bird-watermark').forEach(el => {\\n el.style.transform = `translateY(${scrolled * 0.1}px)`;\\n });\\n \\n document.querySelectorAll('.logo-watermark').forEach(el => {\\n el.style.transform = `translateY(${scrolled * -0.1}px)`;\\n });\\n \\n ticking = false;\\n }\\n\\n function requestTick() {\\n if (!ticking) {\\n window.requestAnimationFrame(updateParallax);\\n ticking = true;\\n }\\n }\\n\\n window.addEventListener('scroll', requestTick);\\n\\n \\\/\\\/ Hover effects\\n document.querySelectorAll('.quote-card, .quote-wrapper-v4').forEach(card => {\\n card.addEventListener('mouseenter', function() {\\n this.style.transform = 'translateY(-5px)';\\n });\\n \\n card.addEventListener('mouseleave', function() {\\n this.style.transform = 'translateY(0)';\\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\":\"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.20\"} --><\/p>","protected":false},"excerpt":{"rendered":"<p>BIFA+ \u2014 Epic Video Experience BIFA+ Play with Spirit. Lead with Vision. BIFA+ Loading BIFA+ Experience… Your browser does not support the video tag. 0:00 BRICS International Football Alliance A global sports and cultural alliance connecting the Global South through football, innovation, and youth empowerment. Founded by Salim Humaid Almazaini from the UAE, BIFA+ creates […]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-175","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bifa.ai\/hi\/wp-json\/wp\/v2\/pages\/175","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bifa.ai\/hi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bifa.ai\/hi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bifa.ai\/hi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bifa.ai\/hi\/wp-json\/wp\/v2\/comments?post=175"}],"version-history":[{"count":31,"href":"https:\/\/bifa.ai\/hi\/wp-json\/wp\/v2\/pages\/175\/revisions"}],"predecessor-version":[{"id":462,"href":"https:\/\/bifa.ai\/hi\/wp-json\/wp\/v2\/pages\/175\/revisions\/462"}],"wp:attachment":[{"href":"https:\/\/bifa.ai\/hi\/wp-json\/wp\/v2\/media?parent=175"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}