{"id":10084,"date":"2026-01-13T09:36:20","date_gmt":"2026-01-13T09:36:20","guid":{"rendered":"https:\/\/blueshirtskw.com\/?page_id=10084"},"modified":"2026-01-13T10:26:09","modified_gmt":"2026-01-13T10:26:09","slug":"%d9%85%d9%88%d9%82%d8%b9-%d8%a7%d9%84%d8%ac%d9%85%d8%b9%d9%8a%d9%87","status":"publish","type":"page","link":"https:\/\/blueshirtskw.com\/ar\/%d9%85%d9%88%d9%82%d8%b9-%d8%a7%d9%84%d8%ac%d9%85%d8%b9%d9%8a%d9%87\/","title":{"rendered":"\u0645\u0648\u0642\u0639 \u0627\u0644\u062c\u0645\u0639\u064a\u0647"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\n \n \n \n \u0627\u0644\u062c\u0645\u0639\u064a\u0629 \u0627\u0644\u0643\u0648\u064a\u062a\u064a\u0629 \u0644\u062d\u0645\u0627\u064a\u0629 \u062d\u0642\u0648\u0642 \u0627\u0644\u0645\u0644\u0643\u064a\u0629 \u0627\u0644\u0641\u0643\u0631\u064a\u0629<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"\/_sdk\/element_sdk.js\"><\/script>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@300;400;500;700;800;900&display=swap\" rel=\"stylesheet\">\n <style>\n body {\n box-sizing: border-box;\n }\n * {\n font-family: 'Tajawal', sans-serif;\n }\n \n \/* Text Color Classes *\/\n .text-nav-link { color: #475569 !important; }\n .text-nav-link:hover { color: #0891b2 !important; }\n .text-logo-main { color: #0e7490 !important; }\n .text-logo-sub { color: #64748b !important; }\n .text-hero-main { color: #1e293b; }\n .text-hero-subtitle { color: #475569; }\n .text-section-heading { color: #1e293b; }\n .text-section-description { color: #64748b; }\n .text-card-heading { color: #1e293b; }\n .text-card-body { color: #475569; }\n .text-button-primary { color: #ffffff; }\n .text-button-secondary { color: #0e7490; }\n .text-stats-number { color: #0891b2; }\n .text-stats-label { color: #64748b; }\n .text-badge { color: #0e7490; }\n .text-board-name { color: #1e293b; }\n .text-board-position { color: #0891b2; }\n .text-board-description { color: #64748b; }\n .text-event-title { color: #ffffff; }\n .text-event-meta { color: #a5f3fc; }\n .text-event-description { color: #cffafe; }\n .text-footer-heading { color: #ffffff; }\n .text-footer-body { color: #94a3b8; }\n .text-footer-copyright { color: #64748b; }\n .text-form-label { color: #475569; }\n .text-contact-heading { color: #1e293b; }\n .text-contact-body { color: #64748b; }\n \n .gradient-text {\n background: linear-gradient(135deg, #0891b2 0%, #0e7490 50%, #155e75 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n .glass-card {\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(20px);\n border: 1px solid rgba(255, 255, 255, 0.3);\n }\n .hero-pattern {\n background-image: \n radial-gradient(circle at 20% 50%, rgba(8, 145, 178, 0.1) 0%, transparent 50%),\n radial-gradient(circle at 80% 20%, rgba(14, 116, 144, 0.08) 0%, transparent 40%),\n radial-gradient(circle at 40% 80%, rgba(21, 94, 117, 0.06) 0%, transparent 40%);\n }\n .floating {\n animation: float 6s ease-in-out infinite;\n }\n .floating-delayed {\n animation: float 6s ease-in-out infinite;\n animation-delay: -3s;\n }\n @keyframes float {\n 0%, 100% { transform: translateY(0px) rotate(0deg); }\n 50% { transform: translateY(-20px) rotate(2deg); }\n }\n @keyframes slideUp {\n from { opacity: 0; transform: translateY(30px); }\n to { opacity: 1; transform: translateY(0); }\n }\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n .animate-slide-up {\n animation: slideUp 0.8s ease-out forwards;\n }\n .animate-fade-in {\n animation: fadeIn 1s ease-out forwards;\n }\n .card-hover {\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n }\n .card-hover:hover {\n transform: translateY(-8px);\n box-shadow: 0 25px 50px -12px rgba(8, 145, 178, 0.25);\n }\n .nav-link {\n position: relative;\n transition: color 0.3s ease;\n }\n .nav-link::after {\n content: '';\n position: absolute;\n bottom: -4px;\n right: 0;\n width: 0;\n height: 2px;\n background: linear-gradient(90deg, #0891b2, #0e7490);\n transition: width 0.3s ease;\n }\n .nav-link:hover::after {\n width: 100%;\n }\n .glow-btn {\n position: relative;\n overflow: hidden;\n transition: all 0.3s ease;\n }\n .glow-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,255,255,0.3), transparent);\n transition: left 0.5s ease;\n }\n .glow-btn:hover::before {\n left: 100%;\n }\n .section-divider {\n height: 1px;\n background: linear-gradient(90deg, transparent, rgba(8, 145, 178, 0.3), transparent);\n }\n ::-webkit-scrollbar {\n width: 8px;\n }\n ::-webkit-scrollbar-track {\n background: #f1f5f9;\n }\n ::-webkit-scrollbar-thumb {\n background: linear-gradient(180deg, #0891b2, #0e7490);\n border-radius: 4px;\n }\n <\/style>\n <style>@view-transition { navigation: auto; }<\/style>\n <script src=\"\/_sdk\/data_sdk.js\" type=\"text\/javascript\"><\/script>\n <\/head>\n <body class=\"h-full bg-slate-50 overflow-auto\">\n <div id=\"app-wrapper\" class=\"w-full h-full\"><!-- Navigation -->\n <nav id=\"navbar\" class=\"fixed top-0 left-0 right-0 z-50 transition-all duration-500\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"flex items-center justify-between h-20\"><!-- Logo -->\n <div class=\"flex items-center gap-3\">\n <div class=\"w-12 h-12 rounded-xl bg-gradient-to-br from-cyan-600 to-cyan-800 flex items-center justify-center shadow-lg\">\n <svg class=\"w-7 h-7 text-white\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z\" \/>\n <\/svg>\n <\/div>\n <div class=\"hidden sm:block\"><span class=\"text-lg font-bold text-logo-main\">KSPIP<\/span> <span class=\"block text-xs text-logo-sub\">\u0627\u0644\u0645\u0644\u0643\u064a\u0629 \u0627\u0644\u0641\u0643\u0631\u064a\u0629<\/span>\n <\/div>\n <\/div><!-- Desktop Menu -->\n <div class=\"hidden lg:flex items-center gap-8\"><a href=\"#home\" class=\"nav-link text-nav-link font-medium\">\u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629<\/a> <a href=\"#about\" class=\"nav-link text-nav-link font-medium\">\u0645\u0646 \u0646\u062d\u0646<\/a> <a href=\"#board\" class=\"nav-link text-nav-link font-medium\">\u0645\u062c\u0644\u0633 \u0627\u0644\u0625\u062f\u0627\u0631\u0629<\/a> <a href=\"#committees\" class=\"nav-link text-nav-link font-medium\">\u0627\u0644\u0644\u062c\u0627\u0646<\/a> <a href=\"#events\" class=\"nav-link text-nav-link font-medium\">\u0627\u0644\u0641\u0639\u0627\u0644\u064a\u0627\u062a<\/a> <a href=\"#news\" class=\"nav-link text-nav-link font-medium\">\u0627\u0644\u0623\u062e\u0628\u0627\u0631<\/a> <a href=\"#contact\" class=\"glow-btn bg-gradient-to-r from-cyan-600 to-cyan-700 text-button-primary px-6 py-2.5 rounded-full font-medium shadow-lg hover:shadow-cyan-500\/30\">\u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0646\u0627<\/a>\n <\/div><!-- Mobile Menu Button --> <button id=\"mobile-menu-btn\" class=\"lg:hidden p-2 rounded-lg hover:bg-slate-100 transition-colors\">\n <svg class=\"w-6 h-6 text-nav-link\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 12h16M4 18h16\" \/>\n <\/svg><\/button>\n <\/div>\n <\/div><!-- Mobile Menu -->\n <div id=\"mobile-menu\" class=\"lg:hidden hidden bg-white\/95 backdrop-blur-lg border-t border-slate-100\">\n <div class=\"px-4 py-4 space-y-2\"><a href=\"#home\" class=\"block px-4 py-3 rounded-lg hover:bg-cyan-50 text-nav-link font-medium\">\u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629<\/a> <a href=\"#about\" class=\"block px-4 py-3 rounded-lg hover:bg-cyan-50 text-nav-link font-medium\">\u0645\u0646 \u0646\u062d\u0646<\/a> <a href=\"#board\" class=\"block px-4 py-3 rounded-lg hover:bg-cyan-50 text-nav-link font-medium\">\u0645\u062c\u0644\u0633 \u0627\u0644\u0625\u062f\u0627\u0631\u0629<\/a> <a href=\"#committees\" class=\"block px-4 py-3 rounded-lg hover:bg-cyan-50 text-nav-link font-medium\">\u0627\u0644\u0644\u062c\u0627\u0646<\/a> <a href=\"#events\" class=\"block px-4 py-3 rounded-lg hover:bg-cyan-50 text-nav-link font-medium\">\u0627\u0644\u0641\u0639\u0627\u0644\u064a\u0627\u062a<\/a> <a href=\"#news\" class=\"block px-4 py-3 rounded-lg hover:bg-cyan-50 text-nav-link font-medium\">\u0627\u0644\u0623\u062e\u0628\u0627\u0631<\/a> <a href=\"#contact\" class=\"block px-4 py-3 rounded-lg bg-cyan-600 text-button-primary font-medium text-center\">\u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0646\u0627<\/a>\n <\/div>\n <\/div>\n <\/nav><!-- Hero Section -->\n <section id=\"home\" class=\"relative min-h-screen hero-pattern overflow-hidden pt-20\"><!-- Floating Elements -->\n <div class=\"absolute inset-0 overflow-hidden pointer-events-none\">\n <div class=\"floating absolute top-32 right-20 w-64 h-64 bg-cyan-500\/10 rounded-full blur-3xl\"><\/div>\n <div class=\"floating-delayed absolute bottom-32 left-20 w-80 h-80 bg-cyan-600\/10 rounded-full blur-3xl\"><\/div>\n <div class=\"floating absolute top-1\/2 left-1\/3 w-40 h-40 bg-cyan-400\/10 rounded-full blur-2xl\"><\/div>\n <\/div><!-- Hero Content -->\n <div class=\"relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center min-h-screen\">\n <div class=\"grid lg:grid-cols-2 gap-12 items-center w-full py-20\"><!-- Text Content -->\n <div class=\"text-center lg:text-right animate-slide-up\">\n <div class=\"inline-flex items-center gap-2 bg-cyan-100 text-badge px-4 py-2 rounded-full text-sm font-medium mb-6\"><span class=\"w-2 h-2 bg-cyan-500 rounded-full animate-pulse\"><\/span> \u062f\u0648\u0644\u0629 \u0627\u0644\ufffd\ufffd\u0648\u064a\u062a\n <\/div>\n <h1 id=\"hero-title\" class=\"text-4xl sm:text-5xl lg:text-6xl font-black text-hero-main leading-tight mb-6\">\u0627\u0644\u062c\u0645\u0639\u064a\u0629 \u0627\u0644\u0643\u0648\u064a\u062a\u064a\u0629 \u0644\u062d\u0645\u0627\u064a\u0629 \u062d\u0642\u0648\u0642 <span class=\"gradient-text block mt-2\">\u0627\u0644\u0645\u0644\u0643\u064a\u0629 \u0627\u0644\u0641\u0643\u0631\u064a\u0629<\/span><\/h1>\n <p id=\"hero-subtitle\" class=\"text-xl text-hero-subtitle mb-8 leading-relaxed max-w-xl mx-auto lg:mx-0\">\u0646\u062d\u0645\u064a \u0627\u0644\u0625\u0628\u062f\u0627\u0639 \u0648\u0646\u0635\u0648\u0646 \u0627\u0644\u0627\u0628\u062a\u0643\u0627\u0631\u060c \u0646\u0639\u0645\u0644 \u0639\u0644\u0649 \u062a\u0639\u0632\u064a\u0632 \u0627\u0644\u0648\u0639\u064a \u0628\u0623\u0647\u0645\u064a\u0629 \u062d\u0642\u0648\u0642 \u0627\u0644\u0645\u0644\u0643\u064a\u0629 \u0627\u0644\u0641\u0643\u0631\u064a\u0629 \u0648\u062d\u0645\u0627\u064a\u062a\u0647\u0627 \u0641\u064a \u062f\u0648\u0644\u0629 \u0627\u0644\u0643\u0648\u064a\u062a<\/p>\n <div class=\"flex flex-col sm:flex-row gap-4 justify-center lg:justify-start\"><a href=\"#about\" class=\"glow-btn bg-gradient-to-r from-cyan-600 to-cyan-700 text-button-primary px-8 py-4 rounded-full font-bold text-lg shadow-xl hover:shadow-cyan-500\/40 transition-all\"> \u0627\u0643\u062a\u0634\u0641 \u0627\u0644\u0645\u0632\u064a\u062f \n <svg class=\"inline-block w-5 h-5 mr-2 rotate-180\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17 8l4 4m0 0l-4 4m4-4H3\" \/>\n <\/svg><\/a> <a href=\"#contact\" class=\"bg-white text-button-secondary px-8 py-4 rounded-full font-bold text-lg shadow-lg hover:shadow-xl border-2 border-cyan-100 hover:border-cyan-200 transition-all\"> \u0627\u0646\u0636\u0645 \u0625\u0644\u064a\u0646\u0627 <\/a>\n <\/div><!-- Stats -->\n <div class=\"grid grid-cols-3 gap-6 mt-12 pt-8 border-t border-slate-200\">\n <div class=\"text-center\"><span class=\"block text-3xl font-black text-stats-number\">+500<\/span> <span class=\"text-sm text-stats-label\">\u0639\u0636\u0648 \u0641\u0639\u0627\u0644<\/span>\n <\/div>\n <div class=\"text-center\"><span class=\"block text-3xl font-black text-stats-number\">+100<\/span> <span class=\"text-sm text-stats-label\">\u0641\u0639\u0627\u0644\u064a\u0629 \u0633\u0646\u0648\u064a\u0629<\/span>\n <\/div>\n <div class=\"text-center\"><span class=\"block text-3xl font-black text-stats-number\">15<\/span> <span class=\"text-sm text-stats-label\">\u0633\u0646\u0629 \u062e\u0628\u0631\u0629<\/span>\n <\/div>\n <\/div>\n <\/div><!-- Hero Visual -->\n <div class=\"relative hidden lg:block animate-fade-in\">\n <div class=\"relative\"><!-- Main Card -->\n <div class=\"glass-card rounded-3xl p-8 shadow-2xl\">\n <div class=\"flex items-center gap-4 mb-6\">\n <div class=\"w-16 h-16 rounded-2xl bg-gradient-to-br from-cyan-500 to-cyan-700 flex items-center justify-center\">\n <svg class=\"w-8 h-8 text-white\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z\" \/>\n <\/svg>\n <\/div>\n <div>\n <h3 class=\"text-xl font-bold text-card-heading\">\u062d\u0645\u0627\u064a\u0629 \u0634\u0627\u0645\u0644\u0629<\/h3>\n <p class=\"text-card-body\">\u0644\u0644\u062d\u0642\u0648\u0642 \u0627\u0644\u0641\u0643\u0631\u064a\u0629<\/p>\n <\/div>\n <\/div>\n <div class=\"space-y-4\">\n <div class=\"flex items-center gap-3 bg-slate-50 rounded-xl p-4\">\n <div class=\"w-10 h-10 rounded-lg bg-cyan-100 flex items-center justify-center\">\n <svg class=\"w-5 h-5 text-cyan-600\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" \/>\n <\/svg>\n <\/div><span class=\"text-card-body font-medium\">\u0628\u0631\u0627\u0621\u0627\u062a \u0627\u0644\u0627\u062e\u062a\u0631\u0627\u0639<\/span>\n <\/div>\n <div class=\"flex items-center gap-3 bg-slate-50 rounded-xl p-4\">\n <div class=\"w-10 h-10 rounded-lg bg-cyan-100 flex items-center justify-center\">\n <svg class=\"w-5 h-5 text-cyan-600\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" \/>\n <\/svg>\n <\/div><span class=\"text-card-body font-medium\">\u0627\u0644\u0639\u0644\u0627\u0645\u0627\u062a \u0627\u0644\u062a\u062c\u0627\u0631\u064a\u0629<\/span>\n <\/div>\n <div class=\"flex items-center gap-3 bg-slate-50 rounded-xl p-4\">\n <div class=\"w-10 h-10 rounded-lg bg-cyan-100 flex items-center justify-center\">\n <svg class=\"w-5 h-5 text-cyan-600\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" \/>\n <\/svg>\n <\/div><span class=\"text-card-body font-medium\">\u062d\u0642\u0648\u0642 \u0627\u0644\u0645\u0624\u0644\u0641<\/span>\n <\/div>\n <\/div>\n <\/div><!-- Floating Badge -->\n <div class=\"absolute -top-6 -left-6 glass-card rounded-2xl p-4 shadow-xl floating\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-12 h-12 rounded-xl bg-gradient-to-br from-amber-400 to-amber-600 flex items-center justify-center\">\n <svg class=\"w-6 h-6 text-white\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z\" \/>\n <\/svg>\n <\/div>\n <div><span class=\"block text-2xl font-black text-card-heading\">2005<\/span> <span class=\"text-xs text-card-body\">\u0633\u0646\u0629 \u0627\u0644\u062a\u0623\u0633\u064a\u0633<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div><!-- Scroll Indicator -->\n <div class=\"absolute bottom-8 left-1\/2 -translate-x-1\/2 animate-bounce\"><a href=\"#about\" class=\"block p-2\">\n <svg class=\"w-6 h-6 text-cyan-600\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 14l-7 7m0 0l-7-7m7 7V3\" \/>\n <\/svg><\/a>\n <\/div>\n <\/section><!-- About Section -->\n <section id=\"about\" class=\"py-24 bg-white relative\">\n <div class=\"absolute inset-0 bg-gradient-to-b from-slate-50 to-white\"><\/div>\n <div class=\"relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"text-center mb-16\"><span class=\"inline-block bg-cyan-100 text-badge px-4 py-2 rounded-full text-sm font-medium mb-4\">\u062a\u0639\u0631\u0641 \u0639\u0644\u064a\u0646\u0627<\/span>\n <h2 id=\"about-title\" class=\"text-4xl sm:text-5xl font-black text-section-heading mb-4\">\u0645\u0646 \u0646\u062d\u0646<\/h2>\n <p class=\"text-xl text-section-description max-w-3xl mx-auto\">\u062c\u0645\u0639\u064a\u0629 \u0643\u0648\u064a\u062a\u064a\u0629 \u063a\u064a\u0631 \u0631\u0628\u062d\u064a\u0629 \u062a\u0639\u0645\u0644 \u0639\u0644\u0649 \u0646\u0634\u0631 \u0627\u0644\u0648\u0639\u064a \u0628\u0623\u0647\u0645\u064a\u0629 \u0627\u0644\u0645\u0644\u0643\u064a\u0629 \u0627\u0644\u0641\u0643\u0631\u064a\u0629<\/p>\n <\/div>\n <div class=\"grid lg:grid-cols-3 gap-8\"><!-- Vision -->\n <div class=\"card-hover glass-card rounded-3xl p-8 shadow-xl border border-slate-100\">\n <div class=\"w-16 h-16 rounded-2xl bg-gradient-to-br from-cyan-500 to-cyan-700 flex items-center justify-center mb-6\">\n <svg class=\"w-8 h-8 text-white\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\" \/> <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z\" \/>\n <\/svg>\n <\/div>\n <h3 class=\"text-2xl font-bold text-card-heading mb-4\">\u0631\u0624\u064a\u062a\u0646\u0627<\/h3>\n <p class=\"text-card-body leading-relaxed\">\u0623\u0646 \u0646\u0643\u0648\u0646 \u0627\u0644\u0645\u0631\u062c\u0639 \u0627\u0644\u0623\u0648\u0644 \u0641\u064a \u0645\u062c\u0627\u0644 \u062d\u0645\u0627\u064a\u0629 \u062d\u0642\u0648\u0642 \u0627\u0644\u0645\u0644\u0643\u064a\u0629 \u0627\u0644\u0641\u0643\u0631\u064a\u0629 \u0641\u064a \u062f\u0648\u0644\u0629 \u0627\u0644\u0643\u0648\u064a\u062a \u0648\u0627\u0644\u0645\u0646\u0637\u0642\u0629 \u0627\u0644\u0639\u0631\u0628\u064a\u0629\u060c \u0648\u0646\u0633\u0639\u0649 \u0644\u0628\u0646\u0627\u0621 \u0645\u062c\u062a\u0645\u0639 \u0648\u0627\u0639\u064d \u0628\u0623\u0647\u0645\u064a\u0629 \u0627\u0644\u0625\u0628\u062f\u0627\u0639 \u0648\u0627\u0644\u0627\u0628\u062a\u0643\u0627\u0631.<\/p>\n <\/div><!-- Mission -->\n <div class=\"card-hover glass-card rounded-3xl p-8 shadow-xl border border-slate-100\">\n <div class=\"w-16 h-16 rounded-2xl bg-gradient-to-br from-cyan-500 to-cyan-700 flex items-center justify-center mb-6\">\n <svg class=\"w-8 h-8 text-white\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4\" \/>\n <\/svg>\n <\/div>\n <h3 class=\"text-2xl font-bold text-card-heading mb-4\">\u0631\u0633\u0627\u0644\u062a\u0646\u0627<\/h3>\n <p class=\"text-card-body leading-relaxed\">\u0646\u0634\u0631 \u062b\u0642\u0627\u0641\u0629 \u062d\u0645\u0627\u064a\u0629 \u0627\u0644\u0645\u0644\u0643\u064a\u0629 \u0627\u0644\u0641\u0643\u0631\u064a\u0629 \u0648\u062a\u0642\u062f\u064a\u0645 \u0627\u0644\u062f\u0639\u0645 \u0648\u0627\u0644\u0645\u0634\u0648\u0631\u0629 \u0644\u0644\u0645\u0628\u062f\u0639\u064a\u0646 \u0648\u0627\u0644\u0645\u0628\u062a\u0643\u0631\u064a\u0646\u060c \u0648\u062a\u0639\u0632\u064a\u0632 \u0627\u0644\u062a\u0639\u0627\u0648\u0646 \u0645\u0639 \u0627\u0644\u062c\u0647\u0627\u062a \u0627\u0644\u0645\u062d\u0644\u064a\u0629 \u0648\u0627\u0644\u062f\u0648\u0644\u064a\u0629 \u0644\u062d\u0645\u0627\u064a\u0629 \u0627\u0644\u062d\u0642\u0648\u0642 \u0627\u0644\u0641\u0643\u0631\u064a\u0629.<\/p>\n <\/div><!-- Goals -->\n <div class=\"card-hover glass-card rounded-3xl p-8 shadow-xl border border-slate-100\">\n <div class=\"w-16 h-16 rounded-2xl bg-gradient-to-br from-cyan-500 to-cyan-700 flex items-center justify-center mb-6\">\n <svg class=\"w-8 h-8 text-white\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z\" \/>\n <\/svg>\n <\/div>\n <h3 class=\"text-2xl font-bold text-card-heading mb-4\">\u0623\u0647\u062f\u0627\u0641\u0646\u0627<\/h3>\n <p class=\"text-card-body leading-relaxed\">\u062d\u0645\u0627\u064a\u0629 \u062d\u0642\u0648\u0642 \u0627\u0644\u0645\u0628\u062f\u0639\u064a\u0646\u060c \u062a\u0646\u0638\u064a\u0645 \u0648\u0631\ufffd\ufffd \u0627\u0644\u0639\u0645\u0644 \u0648\u0627\u0644\u0646\u062f\u0648\u0627\u062a\u060c \u0627\u0644\u062a\u0639\u0627\u0648\u0646 \u0645\u0639 \u0627\u0644\u062c\u0647\u0627\u062a \u0627\u0644\u062d\u0643\u0648\u0645\u064a\u0629\u060c \u062a\u0642\u062f\u064a\u0645 \u0627\u0644\u0627\u0633\u062a\u0634\u0627\u0631\u0627\u062a \u0627\u0644\u0642\u0627\u0646\u0648\u0646\u064a\u0629\u060c \u0648\u062f\u0639\u0645 \u0627\u0644\u0627\u0628\u062a\u0643\u0627\u0631 \u0627\u0644\u0645\u062d\u0644\u064a.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section><!-- Board Section -->\n <section id=\"board\" class=\"py-24 bg-slate-50\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"text-center mb-16\"><span class=\"inline-block bg-cyan-100 text-badge px-4 py-2 rounded-full text-sm font-medium mb-4\">\u0627\u0644\u0642\u064a\u0627\u062f\u0629<\/span>\n <h2 class=\"text-4xl sm:text-5xl font-black text-section-heading mb-4\">\u0645\u062c\u0644\u0633 \u0627\u0644\u0625\u062f\u0627\u0631\u0629<\/h2>\n <p class=\"text-xl text-section-description max-w-3xl mx-auto\">\u0641\u0631\u064a\u0642 \u0645\u0646 \u0627\u0644\u062e\u0628\u0631\u0627\u0621 \u0648\u0627\u0644\u0645\u062a\u062e\u0635\u0635\u064a\u0646 \u064a\u0642\u0648\u062f\u0648\u0646 \u0645\u0633\u064a\u0631\u0629 \u0627\u0644\u062c\u0645\u0639\u064a\u0629<\/p>\n <\/div>\n <div class=\"grid sm:grid-cols-2 lg:grid-cols-4 gap-8\"><!-- Board Members -->\n <div class=\"card-hover bg-white rounded-3xl p-6 text-center shadow-lg border border-slate-100\">\n <div class=\"w-24 h-24 mx-auto mb-4 rounded-full bg-gradient-to-br from-cyan-100 to-cyan-200 flex items-center justify-center\">\n <svg class=\"w-12 h-12 text-cyan-600\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\" \/>\n <\/svg>\n <\/div>\n <h3 class=\"text-lg font-bold text-board-name mb-1\">\u0627\u0644\u0634\u064a\u062e \u0633\u0644\u0645\u0627\u0646 \u062f\u0627\u0648\u062f \u0627\u0644\u0633\u0644\u0645\u0627\u0646 \u0627\u0644\u0635\u0628\u0627\u062d <\/h3>\n <p class=\"text-board-position font-medium text-sm mb-3\">\u0627\u0644\u0631\u0626\u064a\u0633 <\/p>\n <p class=\"text-board-description text-sm\"><\/p>\n <\/div>\n <div class=\"card-hover bg-white rounded-3xl p-6 text-center shadow-lg border border-slate-100\">\n <div class=\"w-24 h-24 mx-auto mb-4 rounded-full bg-gradient-to-br from-cyan-100 to-cyan-200 flex items-center justify-center\">\n <svg class=\"w-12 h-12 text-cyan-600\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\" \/>\n <\/svg>\n <\/div>\n <h3 class=\"text-lg font-bold text-board-name mb-1\">\u0627\u0644\u0633\u064a\u062f.\u0627\u062d\u0645\u062f \u064a\u0648\u0633\u0641 \u0628\u0647\u0628\u0647\u0627\u0646\u064a <\/h3>\n <p class=\"text-board-position font-medium text-sm mb-3\">\u0646\u0627\u0626\u0628 \u0627\u0644\u0631\u0626\u064a\u0633<\/p>\n <p class=\"text-board-description text-sm\"> <\/p>\n <\/div>\n <div class=\"card-hover bg-white rounded-3xl p-6 text-center shadow-lg border border-slate-100\">\n <div class=\"w-24 h-24 mx-auto mb-4 rounded-full bg-gradient-to-br from-cyan-100 to-cyan-200 flex items-center justify-center\">\n <svg class=\"w-12 h-12 text-cyan-600\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\" \/>\n <\/svg>\n <\/div>\n <h3 class=\"text-lg font-bold text-board-name mb-1\">\u0627\u0644\u0633\u064a\u062f. \u0645\u062d\u0645\u062f \u062c\u0645\u0627\u0644 \u0645\u0646\u0630\u0631 \u0627\u0644\u0646\u0639\u0645\u0629<\/h3>\n <p class=\"text-board-position font-medium text-sm mb-3\">\u0623\u0645\u064a\u0646 \u0627\u0644\u0635\u0646\u062f\u0648\u0642<\/p>\n <p class=\"text-board-description text-sm\"> <\/p>\n <\/div>\n <div class=\"card-hover bg-white rounded-3xl p-6 text-center shadow-lg border border-slate-100\">\n <div class=\"w-24 h-24 mx-auto mb-4 rounded-full bg-gradient-to-br from-cyan-100 to-cyan-200 flex items-center justify-center\">\n <svg class=\"w-12 h-12 text-cyan-600\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\" \/>\n <\/svg>\n <\/div>\n <h3 class=\"text-lg font-bold text-board-name mb-1\">\u0627\u0644\u0633\u064a\u062f. \u0639\u0628\u062f\u0627\u0644\u062d\u0645\u064a\u062f \u0627\u0644\u0630\u0627\u064a\u062f\u064a <\/h3>\n <p class=\"text-board-position font-medium text-sm mb-3\">\u0623\u0645\u064a\u0646 \u0627\u0644\u0633\u0631<\/p>\n <p class=\"text-board-description text-sm\"> <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section><!-- Committees Section -->\n <section id=\"committees\" class=\"py-24 bg-white\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"text-center mb-16\"><span class=\"inline-block bg-cyan-100 text-badge px-4 py-2 rounded-full text-sm font-medium mb-4\">\u0641\u0631\u0642 \u0627\u0644\u0639\u0645\u0644<\/span>\n <h2 class=\"text-4xl sm:text-5xl font-black text-section-heading mb-4\">\u0627\u0644\u0644\u062c\u0627\u0646<\/h2>\n <p class=\"text-xl text-section-description max-w-3xl mx-auto\">\u0644\u062c\u0627\u0646 \u0645\u062a\u062e\u0635\u0635\u0629 \u062a\u0639\u0645\u0644 \u0639\u0644\u0649 \u062a\u062d\u0642\u064a\u0642 \u0623\u0647\u062f\u0627\u0641 \u0627\u0644\u062c\u0645\u0639\u064a\u0629<\/p>\n <\/div>\n <div class=\"grid sm:grid-cols-2 lg:grid-cols-3 gap-8\">\n <div class=\"card-hover group bg-gradient-to-br from-cyan-50 to-white rounded-3xl p-8 border-2 border-cyan-100 hover:border-cyan-300\">\n <div class=\"w-14 h-14 rounded-2xl bg-cyan-600 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform\">\n <svg class=\"w-7 h-7 text-white\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253\" \/>\n <\/svg>\n <\/div>\n <h3 class=\"text-xl font-bold text-card-heading mb-3\">\u0644\u062c\u0646\u0629 \u0627\u0644\u062a\u0648\u0639\ufffd\ufffd\u0629 \u0648\u0627\u0644\u062a\u062b\u0642\u064a\u0641<\/h3>\n <p class=\"text-card-body\">\u0646\u0634\u0631 \u0627\u0644\u0648\u0639\u064a \u0628\u0623\u0647\u0645\u064a\u0629 \u0627\u0644\u0645\u0644\u0643\u064a\u0629 \u0627\u0644\u0641\u0643\u0631\u064a\u0629 \u0645\u0646 \u062e\u0644\u0627\u0644 \u0627\u0644\u0628\u0631\u0627\u0645\u062c \u0627\u0644\u062a\u062b\u0642\u064a\u0641\u064a\u0629 \u0648\u0627\u0644\u0645\u062d\u0627\u0636\u0631\u0627\u062a<\/p>\n <\/div>\n <div class=\"card-hover group bg-gradient-to-br from-cyan-50 to-white rounded-3xl p-8 border-2 border-cyan-100 hover:border-cyan-300\">\n <div class=\"w-14 h-14 rounded-2xl bg-cyan-600 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform\">\n <svg class=\"w-7 h-7 text-white\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3\" \/>\n <\/svg>\n <\/div>\n <h3 class=\"text-xl font-bold text-card-heading mb-3\">\u0627\u0644\u0644\u062c\u0646\u0629 \u0627\u0644\u0642\u0627\u0646\u0648\u0646\u064a\u0629<\/h3>\n <p class=\"text-card-body\">\u062a\u0642\u062f\u064a\u0645 \u0627\u0644\u0627\u0633\u062a\u0634\u0627\u0631\u0627\u062a \u0627\u0644\u0642\u0627\u0646\u0648\u0646\u064a\u0629 \u0648\u0627\u0644\u062f\u0639\u0645 \u0641\u064a \u0642\u0636\u0627\u064a\u0627 \u0627\u0644\u0645\u0644\u0643\u064a\u0629 \u0627\u0644\u0641\u0643\u0631\u064a\u0629<\/p>\n <\/div>\n <div class=\"card-hover group bg-gradient-to-br from-cyan-50 to-white rounded-3xl p-8 border-2 border-cyan-100 hover:border-cyan-300\">\n <div class=\"w-14 h-14 rounded-2xl bg-cyan-600 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform\">\n <svg class=\"w-7 h-7 text-white\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z\" \/>\n <\/svg>\n <\/div>\n <h3 class=\"text-xl font-bold text-card-heading mb-3\">\u0644\u062c\u0646\u0629 \u0627\u0644\u0639\u0644\u0627\u0642\u0627\u062a \u0627\u0644\u0639\u0627\u0645\u0629<\/h3>\n <p class=\"text-card-body\">\u0628\u0646\u0627\u0621 \u0627\u0644\u0634\u0631\u0627\u0643\u0627\u062a \u0648\u0627\u0644\u062a\u0648\u0627\u0635\u0644 \u0645\u0639 \u0627\u0644\u0645\u0624\u0633\u0633\u0627\u062a \u0627\u0644\u0645\u062d\u0644\u064a\u0629 \u0648\u0627\u0644\u062f\u0648\u0644\u064a\u0629<\/p>\n <\/div>\n <div class=\"card-hover group bg-gradient-to-br from-cyan-50 to-white rounded-3xl p-8 border-2 border-cyan-100 hover:border-cyan-300\">\n <div class=\"w-14 h-14 rounded-2xl bg-cyan-600 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform\">\n <svg class=\"w-7 h-7 text-white\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z\" \/>\n <\/svg>\n <\/div>\n <h3 class=\"text-xl font-bold text-card-heading mb-3\">\u0644\u062c\u0646\u0629 \u0627\u0644\u0627\u0628\u062a\u0643\u0627\u0631<\/h3>\n <p class=\"text-card-body\">\u062f\u0639\u0645 \u0627\u0644\u0645\u0628\u062a\u0643\u0631\u064a\u0646 \u0648\u0627\u0644\u0645\u062e\u062a\u0631\u0639\u064a\u0646 \u0648\u062a\u0648\u062c\u064a\u0647\u0647\u0645 \u0644\u062d\u0645\u0627\u064a\u0629 \u0627\u062e\u062a\u0631\u0627\u0639\u0627\u062a\u0647\u0645<\/p>\n <\/div>\n <div class=\"card-hover group bg-gradient-to-br from-cyan-50 to-white rounded-3xl p-8 border-2 border-cyan-100 hover:border-cyan-300\">\n <div class=\"w-14 h-14 rounded-2xl bg-cyan-600 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform\">\n <svg class=\"w-7 h-7 text-white\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10\" \/>\n <\/svg>\n <\/div>\n <h3 class=\"text-xl font-bold text-card-heading mb-3\">\u0644\u062c\u0646\u0629 \u0627\u0644\u0625\u0639\u0644\u0627\u0645 \u0627\u0644\u0631\u0642\u0645\u064a<\/h3>\n <p class=\"text-card-body\">\u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0645\u0646\u0635\u0627\u062a \u0627\u0644\u0631\u0642\u0645\u064a\u0629 \u0648\u0646\u0634\u0631 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u062a\u0648\u0639\u0648\u064a<\/p>\n <\/div>\n <div class=\"card-hover group bg-gradient-to-br from-cyan-50 to-white rounded-3xl p-8 border-2 border-cyan-100 hover:border-cyan-300\">\n <div class=\"w-14 h-14 rounded-2xl bg-cyan-600 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform\">\n <svg class=\"w-7 h-7 text-white\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z\" \/>\n <\/svg>\n <\/div>\n <h3 class=\"text-xl font-bold text-card-heading mb-3\">\u0644\u062c\u0646\u0629 \u0627\u0644\u0641\u0639\u0627\u0644\u064a\u0627\u062a<\/h3>\n <p class=\"text-card-body\">\u062a\u0646\u0638\u064a\u0645 \u0627\u0644\u0645\u0624\u062a\u0645\u0631\u0627\u062a \u0648\u0648\u0631\u0634 \u0627\u0644\u0639\u0645\u0644 \u0648\u0627\u0644\u0641\u0639\u0627\u0644\u064a\u0627\u062a \u0627\u0644\u0633\u0646\u0648\u064a\u0629<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section><!-- Events Section -->\n <section id=\"events\" class=\"py-24 bg-gradient-to-br from-cyan-900 via-cyan-800 to-cyan-900 relative overflow-hidden\">\n <div class=\"absolute inset-0 opacity-10\">\n <div class=\"absolute top-0 left-0 w-96 h-96 bg-white rounded-full blur-3xl\"><\/div>\n <div class=\"absolute bottom-0 right-0 w-96 h-96 bg-white rounded-full blur-3xl\"><\/div>\n <\/div>\n <div class=\"relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"text-center mb-16\"><span class=\"inline-block bg-white\/20 text-white px-4 py-2 rounded-full text-sm font-medium mb-4\">\ufffd\ufffd\u0644\u0623\u0646\u0634\u0637\u0629<\/span>\n <h2 class=\"text-4xl sm:text-5xl font-black text-white mb-4\">\u0627\u0644\u0641\u0639\u0627\u0644\u064a\u0627\u062a<\/h2>\n <p class=\"text-xl text-cyan-100 max-w-3xl mx-auto\">\u0641\u0639\u0627\u0644\u064a\u0627\u062a \u0648\u0623\u0646\u0634\u0637\u0629 \u0645\u062a\u0646\u0648\u0639\u0629 \u0639\u0644\u0649 \u0645\u062f\u0627\u0631 \u0627\u0644\u0639\u0627\u0645<\/p>\n <\/div>\n <div class=\"grid md:grid-cols-2 lg:grid-cols-3 gap-8\">\n <div class=\"card-hover bg-white\/10 backdrop-blur-lg rounded-3xl p-8 border border-white\/20\">\n <div class=\"flex items-center gap-4 mb-6\">\n <div class=\"bg-white text-cyan-700 rounded-2xl p-3 text-center min-w-[70px]\"><span class=\"block text-2xl font-black\">15<\/span> <span class=\"text-xs font-medium\">\u0645\u0627\u0631\u0633<\/span>\n <\/div>\n <div><span class=\"text-event-meta text-sm\">\u0642\u0627\u0639\u0629 \u0627\u0644\u0645\u0624\u062a\u0645\u0631\u0627\u062a<\/span>\n <h3 class=\"text-event-title font-bold text-lg\">\u0648\u0631\u0634\u0629 \u0628\u0631\u0627\u0621\u0627\u062a \u0627\u0644\u0627\u062e\u062a\u0631\u0627\u0639<\/h3>\n <\/div>\n <\/div>\n <p class=\"text-event-description text-sm mb-4\">\u0648\u0631\u0634\u0629 \u0639\u0645\u0644 \u062a\u0641\u0627\u0639\u0644\u064a\u0629 \u062d\u0648\u0644 \u0643\u064a\u0641\u064a\u0629 \u062a\u0633\u062c\u064a\u0644 \u0628\u0631\u0627\u0621\u0627\u062a \u0627\u0644\u0627\u062e\u062a\u0631\u0627\u0639 \u0648\u062d\u0645\u0627\u064a\u062a\u0647\u0627<\/p><span class=\"inline-block bg-cyan-500\/30 text-white px-3 py-1 rounded-full text-sm\">\u0642\u0631\u064a\u0628\u0627\u064b<\/span>\n <\/div>\n <div class=\"card-hover bg-white\/10 backdrop-blur-lg rounded-3xl p-8 border border-white\/20\">\n <div class=\"flex items-center gap-4 mb-6\">\n <div class=\"bg-white text-cyan-700 rounded-2xl p-3 text-center min-w-[70px]\"><span class=\"block text-2xl font-black\">22<\/span> <span class=\"text-xs font-medium\">\u0623\u0628\u0631\u064a\u0644<\/span>\n <\/div>\n <div><span class=\"text-event-meta text-sm\">\u0639\u0628\u0631 \u0627\u0644\u0625\u0646\u062a\u0631\u0646\u062a<\/span>\n <h3 class=\"text-event-title font-bold text-lg\">\u0646\u062f\u0648\u0629 \u062d\u0642\u0648\u0642 \u0627\u0644\u0645\u0624\u0644\u0641<\/h3>\n <\/div>\n <\/div>\n <p class=\"text-event-description text-sm mb-4\">\u0646\u062f\u0648\u0629 \u0627\u0641\u062a\u0631\u0627\u0636\u064a\u0629 \u0645\u0639 \u062e\u0628\u0631\u0627\u0621 \u062f\u0648\u0644\u064a\u064a\u0646 \u062d\u0648\u0644 \u062d\u0645\u0627\u064a\u0629 \u062d\u0642\u0648\u0642 \u0627\u0644\u0645\u0624\u0644\u0641 \u0627\u0644\u0631\u0642\u0645\u064a\u0629<\/p><span class=\"inline-block bg-cyan-500\/30 text-white px-3 py-1 rounded-full text-sm\">\u0627\u0644\u062a\u0633\u062c\u064a\u0644 \u0645\u0641\u062a\u0648\u062d<\/span>\n <\/div>\n <div class=\"card-hover bg-white\/10 backdrop-blur-lg rounded-3xl p-8 border border-white\/20\">\n <div class=\"flex items-center gap-4 mb-6\">\n <div class=\"bg-white text-cyan-700 rounded-2xl p-3 text-center min-w-[70px]\"><span class=\"block text-2xl font-black\">26<\/span> <span class=\"text-xs font-medium\">\u0623\u0628\u0631\u064a\u0644<\/span>\n <\/div>\n <div><span class=\"text-event-meta text-sm\">\u0641\u0646\u062f\u0642 \u0627\u0644\u0631\u064a\u062c\u0646\u0633\u064a<\/span>\n <h3 class=\"text-event-title font-bold text-lg\">\u0627\u0644\u064a\u0648\u0645 \u0627\u0644\u0639\u0627\u0644\u0645\u064a \u0644\u0644\u0645\u0644\u0643\u064a\u0629 \u0627\u0644\u0641\u0643\u0631\u064a\u0629<\/h3>\n <\/div>\n <\/div>\n <p class=\"text-event-description text-sm mb-4\">\u0627\u062d\u062a\u0641\u0627\u0644 \u0633\u0646\u0648\u064a \u0628\u0645\u0646\u0627\u0633\u0628\u0629 \u0627\u0644\u064a\u0648\u0645 \u0627\u0644\u0639\u0627\u0644\u0645\u064a \u0644\u0644\u0645\u0644\u0643\u064a\u0629 \u0627\u0644\u0641\u0643\u0631\u064a\u0629 \u0645\u0639 \u062c\u0648\u0627\u0626\u0632 \u0644\u0644\u0645\u0628\u062f\u0639\u064a\u0646<\/p><span class=\"inline-block bg-amber-500\/50 text-white px-3 py-1 rounded-full text-sm\">\u0641\u0639\u0627\u0644\u064a\u0629 \u0645\u0645\u064a\u0632\u0629<\/span>\n <\/div>\n <\/div>\n <div class=\"text-center mt-12\"><a href=\"#\" class=\"inline-flex items-center gap-2 bg-white text-cyan-700 px-8 py-4 rounded-full font-bold hover:bg-cyan-50 transition-colors\"> \u0639\u0631\u0636 \u062c\u0645\u064a\u0639 \u0627\u0644\u0641\u0639\u0627\u0644\u064a\u0627\u062a \n <svg class=\"w-5 h-5 rotate-180\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17 8l4 4m0 0l-4 4m4-4H3\" \/>\n <\/svg><\/a>\n <\/div>\n <\/div>\n <\/section><!-- News Section -->\n <section id=\"news\" class=\"py-24 bg-slate-50\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"text-center mb-16\"><span class=\"inline-block bg-cyan-100 text-badge px-4 py-2 rounded-full text-sm font-medium mb-4\">\u0622\u062e\u0631 \u0627\u0644\u062a\u062d\u062f\u064a\u062b\u0627\u062a<\/span>\n <h2 class=\"text-4xl sm:text-5xl font-black text-section-heading mb-4\">\u0627\u0644\u0623\u062e\u0628\u0627\u0631 \u0648\u0627\u0644\u0645\u0642\u0627\u0644\u0627\u062a<\/h2>\n <p class=\"text-xl text-section-description max-w-3xl mx-auto\">\u062a\u0627\u0628\u0639 \u0622\u062e\u0631 \u0627\u0644\u0623\u062e\u0628\u0627\u0631 \u0648\u0627\u0644\u0645\u0633\u062a\ufffd\ufffd\u062f\u0627\u062a \u0641\u064a \u0645\u062c\u0627\u0644 \u0627\u0644\u0645\u0644\u0643\u064a\u0629 \u0627\u0644\u0641\u0643\u0631\u064a\u0629<\/p>\n <\/div>\n <div class=\"grid lg:grid-cols-3 gap-8\"><!-- Featured Article -->\n <div class=\"lg:col-span-2 card-hover bg-white rounded-3xl overflow-hidden shadow-xl\">\n <div class=\"bg-gradient-to-br from-cyan-600 to-cyan-800 h-64 flex items-center justify-center\">\n <svg class=\"w-24 h-24 text-white\/30\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z\" \/>\n <\/svg>\n <\/div>\n <div class=\"p-8\">\n <div class=\"flex items-center gap-4 mb-4\"><span class=\"bg-cyan-100 text-badge px-3 py-1 rounded-full text-sm font-medium\">\u0645\u0642\u0627\u0644 \u0645\u0645\u064a\u0632<\/span> <span class=\"text-section-description text-sm\">10 \u0645\u0627\u0631\u0633 2024<\/span>\n <\/div>\n <h3 class=\"text-2xl font-bold text-card-heading mb-4\">\u0627\u0644\u0643\u0648\u064a\u062a \u062a\u0637\u0644\u0642 \u0645\u0646\u0635\u0629 \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 \u062c\u062f\u064a\u062f\u0629 \u0644\u062a\u0633\u062c\u064a\u0644 \u0627\u0644\u0639\u0644\u0627\u0645\u0627\u062a \u0627\u0644\u062a\u062c\u0627\u0631\u064a\u0629<\/h3>\n <p class=\"text-card-body mb-6\">\u0641\u064a \u062e\u0637\u0648\u0629 \u0631\u0627\u0626\u062f\u0629 \u0646\u062d\u0648 \u0627\u0644\u062a\u062d\u0648\u0644 \u0627\u0644\u0631\u0642\u0645\u064a\u060c \u0623\u0639\u0644\u0646\u062a \u0648\u0632\u0627\u0631\u0629 \u0627\u0644\u062a\u062c\u0627\u0631\u0629 \u0648\u0627\u0644\u0635\u0646\u0627\u0639\u0629 \u0639\u0646 \u0625\u0637\u0644\u0627\u0642 \u0645\u0646\u0635\u0629 \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 \u0645\u062a\u0643\u0627\u0645\u0644\u0629 \u0644\u062a\u0633\u062c\u064a\u0644 \u0648\u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0639\u0644\u0627\u0645\u0627\u062a \u0627\u0644\u062a\u062c\u0627\u0631\u064a\u0629...<\/p><a href=\"#\" class=\"inline-flex items-center text-cyan-600 font-medium hover:text-cyan-700\"> \u0627\u0642\u0631\u0623 \u0627\u0644\u0645\u0632\u064a\u062f \n <svg class=\"w-5 h-5 mr-2 rotate-180\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17 8l4 4m0 0l-4 4m4-4H3\" \/>\n <\/svg><\/a>\n <\/div>\n <\/div><!-- Side Articles -->\n <div class=\"space-y-6\">\n <div class=\"card-hover bg-white rounded-2xl p-6 shadow-lg\"><span class=\"text-section-description text-sm\">5 \u0645\u0627\u0631\u0633 2024<\/span>\n <h3 class=\"text-lg font-bold text-card-heading mt-2 mb-3\">\u0648\u0631\u0634\u0629 \u0639\u0645\u0644 \u0646\u0627\u062c\u062d\u0629 \u062d\u0648\u0644 \u062d\u0645\u0627\u064a\u0629 \u062d\u0642\u0648\u0642 \u0627\u0644\u0645\u0624\u0644\u0641 \u0641\u064a \u0627\u0644\u0639\u0635\u0631 \u0627\u0644\u0631\u0642\u0645\u064a<\/h3><a href=\"#\" class=\"text-cyan-600 text-sm font-medium hover:text-cyan-700\">\u0627\u0642\u0631\u0623 \u0627\u0644\u0645\u0632\u064a\u062f \u2190<\/a>\n <\/div>\n <div class=\"card-hover bg-white rounded-2xl p-6 shadow-lg\"><span class=\"text-section-description text-sm\">28 \u0641\u0628\u0631\u0627\u064a\u0631 2024<\/span>\n <h3 class=\"text-lg font-bold text-card-heading mt-2 mb-3\">\u062a\u0648\u0642\u064a\u0639 \u0627\u062a\u0641\u0627\u0642\u064a\u0629 \u062a\u0639\u0627\u0648\u0646 \u0645\u0639 \u0627\u0644\u0645\u0646\u0638\u0645\u0629 \u0627\u0644\u0639\u0627\u0644\u0645\u064a\u0629 \u0644\u0644\u0645\u0644\u0643\u064a\u0629 \u0627\u0644\u0641\u0643\u0631\u064a\u0629<\/h3><a href=\"#\" class=\"text-cyan-600 text-sm font-medium hover:text-cyan-700\">\u0627\u0642\u0631\u0623 \u0627\u0644\u0645\u0632\u064a\u062f \u2190<\/a>\n <\/div>\n <div class=\"card-hover bg-white rounded-2xl p-6 shadow-lg\"><span class=\"text-section-description text-sm\">20 \u0641\u0628\u0631\u0627\u064a\u0631 2024<\/span>\n <h3 class=\"text-lg font-bold text-card-heading mt-2 mb-3\">\u062a\u0643\u0631\u064a\u0645 \u0627\u0644\u0645\u062e\u062a\u0631\u0639\u064a\u0646 \u0627\u0644\u0643\u0648\u064a\u062a\u064a\u064a\u0646 \u0641\u064a \u062d\u0641\u0644 \u0633\u0646\u0648\u064a<\/h3><a href=\"#\" class=\"text-cyan-600 text-sm font-medium hover:text-cyan-700\">\u0627\u0642\u0631\u0623 \u0627\u0644\u0645\u0632\u064a\u062f \u2190<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section><!-- Contact Section -->\n <section id=\"contact\" class=\"py-24 bg-white\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"grid lg:grid-cols-2 gap-16 items-center\"><!-- Contact Info -->\n <div><span class=\"inline-block bg-cyan-100 text-badge px-4 py-2 rounded-full text-sm font-medium mb-4\">\u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0646\u0627<\/span>\n <h2 class=\"text-4xl sm:text-5xl font-black text-contact-heading mb-6\">\u0646\u062d\u0646 \u0647\u0646\u0627 \u0644\u0645\u0633\u0627\u0639\u062f\u062a\u0643<\/h2>\n <p class=\"text-xl text-contact-body mb-8\">\u0644\u0627 \u062a\u062a\u0631\u062f\u062f \u0641\u064a \u0627\u0644\u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0646\u0627 \u0644\u0644\u0627\u0633\u062a\u0641\u0633\u0627\u0631\u0627\u062a \u0623\u0648 \u0637\u0644\u0628 \u0627\u0644\u0627\u0633\u062a\u0634\u0627\u0631\u0627\u062a<\/p>\n <div class=\"space-y-6\">\n <div class=\"flex items-center gap-4\">\n <div class=\"w-14 h-14 rounded-2xl bg-cyan-100 flex items-center justify-center\">\n <svg class=\"w-6 h-6 text-cyan-600\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z\" \/> <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 11a3 3 0 11-6 0 3 3 0 016 0z\" \/>\n <\/svg>\n <\/div>\n <div>\n <h3 class=\"font-bold text-contact-heading\">\u0627\u0644\u0639\u0646\u0648\u0627\u0646<\/h3>\n <p class=\"text-contact-body\">\u0627\u0644\u0643\u0648\u064a\u062a\u060c \u0627\u0644\u0639\u0627\u0635\u0645\u0629\u060c \u0634\u0627\u0631\u0639 \u0627\u0644\u062e\u0644\u064a\u062c \u0627\u0644\u0639\u0631\u0628\u064a<\/p>\n <\/div>\n <\/div>\n <div class=\"flex items-center gap-4\">\n <div class=\"w-14 h-14 rounded-2xl bg-cyan-100 flex items-center justify-center\">\n <svg class=\"w-6 h-6 text-cyan-600\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z\" \/>\n <\/svg>\n <\/div>\n <div>\n <h3 class=\"font-bold text-contact-heading\">\u0627\u0644\u0647\u0627\u062a\u0641<\/h3>\n <p id=\"contact-phone\" class=\"text-contact-body\">+965 2222 3333<\/p>\n <\/div>\n <\/div>\n <div class=\"flex items-center gap-4\">\n <div class=\"w-14 h-14 rounded-2xl bg-cyan-100 flex items-center justify-center\">\n <svg class=\"w-6 h-6 text-cyan-600\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\" \/>\n <\/svg>\n <\/div>\n <div>\n <h3 class=\"font-bold text-contact-heading\">\u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a<\/h3>\n <p id=\"contact-email\" class=\"text-contact-body\">info@kspip.org.kw<\/p>\n <\/div>\n <\/div>\n <\/div><!-- Social Links -->\n <div class=\"mt-8 pt-8 border-t border-slate-200\">\n <p class=\"text-contact-body mb-4\">\u062a\u0627\u0628\u0639\u0646\u0627 \u0639\u0644\u0649 \u0648\u0633\u0627\u0626\u0644 \u0627\u0644\u062a\u0648\u0627\u0635\u0644<\/p>\n <div class=\"flex gap-4\"><a href=\"#\" class=\"w-12 h-12 rounded-xl bg-slate-100 hover:bg-cyan-100 flex items-center justify-center transition-colors\">\n <svg class=\"w-5 h-5 text-slate-600\" fill=\"currentColor\" viewbox=\"0 0 24 24\"><path d=\"M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z\" \/>\n <\/svg><\/a> <a href=\"#\" class=\"w-12 h-12 rounded-xl bg-slate-100 hover:bg-cyan-100 flex items-center justify-center transition-colors\">\n <svg class=\"w-5 h-5 text-slate-600\" fill=\"currentColor\" viewbox=\"0 0 24 24\"><path d=\"M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z\" \/>\n <\/svg><\/a> <a href=\"#\" class=\"w-12 h-12 rounded-xl bg-slate-100 hover:bg-cyan-100 flex items-center justify-center transition-colors\">\n <svg class=\"w-5 h-5 text-slate-600\" fill=\"currentColor\" viewbox=\"0 0 24 24\"><path d=\"M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z\" \/>\n <\/svg><\/a>\n <\/div>\n <\/div>\n \n <\/section><!-- Footer -->\n <footer class=\"bg-slate-900 text-white py-16\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"grid sm:grid-cols-2 lg:grid-cols-4 gap-12 mb-12\"><!-- Logo & About -->\n <div class=\"lg:col-span-2\">\n <div class=\"flex items-center gap-3 mb-6\">\n <div class=\"w-12 h-12 rounded-xl bg-gradient-to-br from-cyan-500 to-cyan-700 flex items-center justify-center\">\n <svg class=\"w-7 h-7 text-white\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z\" \/>\n <\/svg>\n <\/div>\n <div><span class=\"text-xl font-bold text-footer-heading\">KSPIP<\/span> <span class=\"block text-xs text-footer-body\">\u0627\u0644\u062c\u0645\u0639\u064a\u0629 \u0627\u0644\u0643\u0648\u064a\u062a\u064a\u0629 \u0644\u0644\u0645\u0644\u0643\u064a\u0629 \u0627\u0644\u0641\u0643\u0631\u064a\u0629<\/span>\n <\/div>\n <\/div>\n <p class=\"text-footer-body max-w-md\">\u0646\u0639\u0645\u0644 \u0639\u0644\u0649 \u062d\u0645\u0627\u064a\u0629 \u062d\u0642\u0648\u0642 \u0627\u0644\u0645\u0628\u062f\u0639\u064a\u0646 \u0648\u0627\u0644\u0645\u0628\u062a\u0643\u0631\u064a\u0646 \u0641\u064a \u062f\u0648\u0644\u0629 \u0627\u0644\u0643\u0648\u064a\u062a \u0645\u0646 \u062e\u0644\u0627\u0644 \u0646\u0634\u0631 \u0627\u0644\u0648\u0639\u064a \u0648\u062a\u0642\u062f\u064a\u0645 \u0627\u0644\u062f\u0639\u0645 \u0627\u0644\ufffd\ufffd\u0627\u0646\u0648\u0646\u064a \u0648\u0627\u0644\u0627\u0633\u062a\u0634\u0627\u0631\u064a.<\/p>\n <\/div><!-- Quick Links -->\n <div>\n <h3 class=\"text-lg font-bold text-footer-heading mb-6\">\u0631\u0648\u0627\u0628\u0637 \u0633\u0631\u064a\u0639\u0629<\/h3>\n <ul class=\"space-y-3\">\n <li><a href=\"#about\" class=\"text-footer-body hover:text-cyan-400 transition-colors\">\u0645\u0646 \u0646\u062d\u0646<\/a><\/li>\n <li><a href=\"#board\" class=\"text-footer-body hover:text-cyan-400 transition-colors\">\u0645\u062c\u0644\u0633 \u0627\u0644\u0625\u062f\u0627\u0631\u0629<\/a><\/li>\n <li><a href=\"#events\" class=\"text-footer-body hover:text-cyan-400 transition-colors\">\u0627\u0644\u0641\u0639\u0627\u0644\u064a\u0627\u062a<\/a><\/li>\n <li><a href=\"#news\" class=\"text-footer-body hover:text-cyan-400 transition-colors\">\u0627\u0644\u0623\u062e\u0628\u0627\u0631<\/a><\/li>\n <\/ul>\n <\/div><!-- Contact -->\n <div>\n <h3 class=\"text-lg font-bold text-footer-heading mb-6\">\u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0646\u0627<\/h3>\n <ul class=\"space-y-3 text-footer-body\">\n <li>\u0627\u0644\u0643\u0648\u064a\u062a\u060c \u0627\u0644\u0639\u0627\u0635\u0645\u0629<\/li>\n <li>+965 2222 3333<\/li>\n <li>info@kspip.org.kw<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <div class=\"border-t border-slate-800 pt-8 flex flex-col sm:flex-row justify-between items-center gap-4\">\n <p class=\"text-footer-copyright text-sm\">\u00a9 2024 \u0627\u0644\u062c\u0645\u0639\u064a\u0629 \u0627\u0644\u0643\u0648\u064a\u062a\u064a\u0629 \u0644\u062d\u0645\u0627\u064a\u0629 \u062d\u0642\u0648\u0642 \u0627\u0644\u0645\u0644\u0643\u064a\u0629 \u0627\u0644\u0641\u0643\u0631\u064a\u0629. \u062c\u0645\u064a\u0639 \u0627\u0644\u062d\u0642\u0648\u0642 \u0645\u062d\u0641\u0648\u0638\u0629.<\/p>\n <div class=\"flex gap-6 text-sm\"><a href=\"#\" class=\"text-footer-copyright hover:text-cyan-400 transition-colors\">\u0633\u064a\u0627\u0633\u0629 \u0627\u0644\u062e\u0635\u0648\u0635\u064a\u0629<\/a> <a href=\"#\" class=\"text-footer-copyright hover:text-cyan-400 transition-colors\">\u0627\u0644\u0634\u0631\u0648\u0637 \u0648\u0627\u0644\u0623\u062d\u0643\u0627\u0645<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/footer>\n <\/div>\n <script>\n const defaultConfig = {\n hero_title: '\u0627\u0644\u062c\u0645\u0639\u064a\u0629 \u0627\u0644\u0643\u0648\u064a\u062a\u064a\u0629 \u0644\u062d\u0645\u0627\u064a\u0629 \u062d\u0642\u0648\u0642 \u0627\u0644\u0645\u0644\u0643\u064a\u0629 \u0627\u0644\u0641\u0643\u0631\u064a\u0629',\n hero_subtitle: '\u0646\u062d\u0645\u064a \u0627\u0644\u0625\u0628\u062f\u0627\u0639 \u0648\u0646\u0635\u0648\u0646 \u0627\u0644\u0627\u0628\u062a\ufffd\ufffd\u0627\u0631\u060c \u0646\u0639\u0645\u0644 \u0639\u0644\u0649 \u062a\u0639\u0632\u064a\u0632 \u0627\u0644\u0648\u0639\u064a \u0628\u0623\u0647\u0645\u064a\u0629 \u062d\u0642\u0648\u0642 \u0627\u0644\u0645\u0644\u0643\u064a\u0629 \u0627\u0644\u0641\u0643\u0631\u064a\u0629 \u0648\u062d\u0645\u0627\u064a\u062a\u0647\u0627 \u0641\u064a \u062f\u0648\u0644\u0629 \u0627\u0644\u0643\u0648\u064a\u062a',\n about_title: '\u0645\u0646 \u0646\u062d\u0646',\n contact_email: 'info@kspip.org.kw',\n contact_phone: '+965 2222 3333',\n background_color: '#f8fafc',\n primary_color: '#0891b2',\n text_color: '#1e293b',\n card_color: '#ffffff',\n accent_color: '#155e75',\n font_family: 'Tajawal',\n font_size: 16\n };\n\n let config = { ...defaultConfig };\n\n async function onConfigChange(cfg) {\n config = { ...defaultConfig, ...cfg };\n \n \/\/ Update text content\n const heroTitleEl = document.getElementById('hero-title');\n if (heroTitleEl) {\n heroTitleEl.innerHTML = `${config.hero_title.split(' ').slice(0, 4).join(' ')}<span class=\"gradient-text block mt-2\">${config.hero_title.split(' ').slice(4).join(' ') || '\u0627\u0644\u0645\u0644\u0643\u064a\u0629 \u0627\u0644\u0641\u0643\u0631\u064a\u0629'}<\/span>`;\n }\n \n const heroSubtitleEl = document.getElementById('hero-subtitle');\n if (heroSubtitleEl) heroSubtitleEl.textContent = config.hero_subtitle;\n \n const aboutTitleEl = document.getElementById('about-title');\n if (aboutTitleEl) aboutTitleEl.textContent = config.about_title;\n \n const contactEmailEl = document.getElementById('contact-email');\n if (contactEmailEl) contactEmailEl.textContent = config.contact_email;\n \n const contactPhoneEl = document.getElementById('contact-phone');\n if (contactPhoneEl) contactPhoneEl.textContent = config.contact_phone;\n\n \/\/ Apply colors\n document.body.style.backgroundColor = config.background_color;\n \n \/\/ Apply font\n const fontStack = `${config.font_family}, 'Tajawal', sans-serif`;\n document.querySelectorAll('*').forEach(el => {\n el.style.fontFamily = fontStack;\n });\n \n \/\/ Apply font size scaling\n const baseSize = config.font_size;\n document.querySelectorAll('h1').forEach(el => el.style.fontSize = `${baseSize * 3}px`);\n document.querySelectorAll('h2').forEach(el => el.style.fontSize = `${baseSize * 2.5}px`);\n document.querySelectorAll('h3').forEach(el => el.style.fontSize = `${baseSize * 1.25}px`);\n document.querySelectorAll('p, span, a, li, label, input, select, textarea, button').forEach(el => {\n if (!el.closest('h1, h2, h3')) {\n el.style.fontSize = `${baseSize}px`;\n }\n });\n }\n\n function mapToCapabilities(cfg) {\n return {\n recolorables: [\n {\n get: () => cfg.background_color || defaultConfig.background_color,\n set: (value) => {\n cfg.background_color = value;\n if (window.elementSdk) window.elementSdk.setConfig({ background_color: value });\n }\n },\n {\n get: () => cfg.card_color || defaultConfig.card_color,\n set: (value) => {\n cfg.card_color = value;\n if (window.elementSdk) window.elementSdk.setConfig({ card_color: value });\n }\n },\n {\n get: () => cfg.text_color || defaultConfig.text_color,\n set: (value) => {\n cfg.text_color = value;\n if (window.elementSdk) window.elementSdk.setConfig({ text_color: value });\n }\n },\n {\n get: () => cfg.primary_color || defaultConfig.primary_color,\n set: (value) => {\n cfg.primary_color = value;\n if (window.elementSdk) window.elementSdk.setConfig({ primary_color: value });\n }\n },\n {\n get: () => cfg.accent_color || defaultConfig.accent_color,\n set: (value) => {\n cfg.accent_color = value;\n if (window.elementSdk) window.elementSdk.setConfig({ accent_color: value });\n }\n }\n ],\n borderables: [],\n fontEditable: {\n get: () => cfg.font_family || defaultConfig.font_family,\n set: (value) => {\n cfg.font_family = value;\n if (window.elementSdk) window.elementSdk.setConfig({ font_family: value });\n }\n },\n fontSizeable: {\n get: () => cfg.font_size || defaultConfig.font_size,\n set: (value) => {\n cfg.font_size = value;\n if (window.elementSdk) window.elementSdk.setConfig({ font_size: value });\n }\n }\n };\n }\n\n function mapToEditPanelValues(cfg) {\n return new Map([\n ['hero_title', cfg.hero_title || defaultConfig.hero_title],\n ['hero_subtitle', cfg.hero_subtitle || defaultConfig.hero_subtitle],\n ['about_title', cfg.about_title || defaultConfig.about_title],\n ['contact_email', cfg.contact_email || defaultConfig.contact_email],\n ['contact_phone', cfg.contact_phone || defaultConfig.contact_phone]\n ]);\n }\n\n \/\/ Initialize SDK\n if (window.elementSdk) {\n window.elementSdk.init({\n defaultConfig,\n onConfigChange,\n mapToCapabilities,\n mapToEditPanelValues\n });\n }\n\n \/\/ Mobile menu toggle\n const mobileMenuBtn = document.getElementById('mobile-menu-btn');\n const mobileMenu = document.getElementById('mobile-menu');\n \n mobileMenuBtn.addEventListener('click', () => {\n mobileMenu.classList.toggle('hidden');\n });\n\n \/\/ Close mobile menu on link click\n mobileMenu.querySelectorAll('a').forEach(link => {\n link.addEventListener('click', () => {\n mobileMenu.classList.add('hidden');\n });\n });\n\n \/\/ Navbar scroll effect\n const navbar = document.getElementById('navbar');\n window.addEventListener('scroll', () => {\n if (window.scrollY > 50) {\n navbar.classList.add('bg-white\/95', 'backdrop-blur-lg', 'shadow-lg');\n } else {\n navbar.classList.remove('bg-white\/95', 'backdrop-blur-lg', 'shadow-lg');\n }\n });\n\n \/\/ Contact form handling\n const contactForm = document.getElementById('contact-form');\n const successMessage = document.getElementById('success-message');\n \n contactForm.addEventListener('submit', (e) => {\n e.preventDefault();\n contactForm.classList.add('hidden');\n successMessage.classList.remove('hidden');\n setTimeout(() => {\n contactForm.reset();\n contactForm.classList.remove('hidden');\n successMessage.classList.add('hidden');\n }, 3000);\n });\n\n \/\/ Smooth scroll for anchor links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function(e) {\n e.preventDefault();\n const target = document.querySelector(this.getAttribute('href'));\n if (target) {\n target.scrollIntoView({ behavior: 'smooth', block: 'start' });\n }\n });\n });\n\n \/\/ Initial render\n onConfigChange(config);\n <\/script>\n <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML=\"window.__CF$cv$params={r:'9bd4135592945d9b',t:'MTc2ODI5ODczMC4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='\/cdn-cgi\/challenge-platform\/scripts\/jsd\/main.js';document.getElementsByTagName('head')[0].appendChild(a);\";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();<\/script><\/body>\n<\/html><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0627\u0644\u062c\u0645\u0639\u064a\u0629 \u0627\u0644\u0643\u0648\u064a\u062a\u064a\u0629 \u0644\u062d\u0645\u0627\u064a\u0629 \u062d\u0642\u0648\u0642 \u0627\u0644\u0645\u0644\u0643\u064a\u0629 \u0627\u0644\u0641\u0643\u0631\u064a\u0629 KSPIP \u0627\u0644\u0645\u0644\u0643\u064a\u0629 \u0627\u0644\u0641\u0643\u0631\u064a\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629 \u0645\u0646 \u0646\u062d\u0646 \u0645\u062c\u0644\u0633 \u0627\u0644\u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0644\u062c\u0627\u0646 \u0627\u0644\u0641\u0639\u0627\u0644\u064a\u0627\u062a \u0627\u0644\u0623\u062e\u0628\u0627\u0631 \u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0646\u0627 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629 \u0645\u0646 \u0646\u062d\u0646 \u0645\u062c\u0644\u0633 \u0627\u0644\u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0644\u062c\u0627\u0646 \u0627\u0644\u0641\u0639\u0627\u0644\u064a\u0627\u062a \u0627\u0644\u0623\u062e\u0628\u0627\u0631 \u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0646\u0627 \u062f\u0648\u0644\u0629 \u0627\u0644\ufffd\ufffd\u0648\u064a\u062a \u0627\u0644\u062c\u0645\u0639\u064a\u0629 \u0627\u0644\u0643\u0648\u064a\u062a\u064a\u0629 \u0644\u062d\u0645\u0627\u064a\u0629 \u062d\u0642\u0648\u0642 \u0627\u0644\u0645\u0644\u0643\u064a\u0629 \u0627\u0644\u0641\u0643\u0631\u064a\u0629 \u0646\u062d\u0645\u064a \u0627\u0644\u0625\u0628\u062f\u0627\u0639 \u0648\u0646\u0635\u0648\u0646 \u0627\u0644\u0627\u0628\u062a\u0643\u0627\u0631\u060c \u0646\u0639\u0645\u0644 \u0639\u0644\u0649 \u062a\u0639\u0632\u064a\u0632 \u0627\u0644\u0648\u0639\u064a \u0628\u0623\u0647\u0645\u064a\u0629 \u062d\u0642\u0648\u0642 \u0627\u0644\u0645\u0644\u0643\u064a\u0629 \u0627\u0644\u0641\u0643\u0631\u064a\u0629 \u0648\u062d\u0645\u0627\u064a\u062a\u0647\u0627 \u0641\u064a \u062f\u0648\u0644\u0629 \u0627\u0644\u0643\u0648\u064a\u062a \u0627\u0643\u062a\u0634\u0641 \u0627\u0644\u0645\u0632\u064a\u062f […]<\/p>\n","protected":false},"author":8,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"footnotes":""},"class_list":["post-10084","page","type-page","status-publish","hentry"],"acf":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/blueshirtskw.com\/ar\/wp-json\/wp\/v2\/pages\/10084","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blueshirtskw.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blueshirtskw.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blueshirtskw.com\/ar\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/blueshirtskw.com\/ar\/wp-json\/wp\/v2\/comments?post=10084"}],"version-history":[{"count":0,"href":"https:\/\/blueshirtskw.com\/ar\/wp-json\/wp\/v2\/pages\/10084\/revisions"}],"wp:attachment":[{"href":"https:\/\/blueshirtskw.com\/ar\/wp-json\/wp\/v2\/media?parent=10084"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}