{"id":691,"date":"2026-01-12T21:31:03","date_gmt":"2026-01-12T21:31:03","guid":{"rendered":"https:\/\/kuwaitnext.com\/home\/"},"modified":"2026-02-18T09:08:21","modified_gmt":"2026-02-18T09:08:21","slug":"home","status":"publish","type":"page","link":"https:\/\/kuwaitnext.com\/ar\/","title":{"rendered":"\u0627\u0644\u0645\u0646\u0632\u0644"},"content":{"rendered":"\n<script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"ProfessionalService\",\n  \"name\": \"Kuwait Next\",\n  \"image\": \"https:\/\/kuwaitnext.com\/wp-content\/uploads\/2026\/02\/ChatGPT-Image-Feb-4-2026-05_59_53-AM.png\",\n  \"@id\": \"https:\/\/kuwaitnext.com\",\n  \"url\": \"https:\/\/kuwaitnext.com\",\n  \"telephone\": \"+966 54 369 2574\",\n  \"email\": \"support@kuwaitnext.com\",\n  \"priceRange\": \"$$$$\",\n  \n  \"address\": {\n    \"@type\": \"PostalAddress\",\n    \"addressLocality\": \"Kuwait City\",\n    \"addressCountry\": \"KW\"\n  },\n\n  \"areaServed\": {\n    \"@type\": \"Country\",\n    \"name\": \"Kuwait\"\n  },\n\n  \"parentOrganization\": {\n    \"@type\": \"Corporation\",\n    \"name\": \"Kuwait Next Regional Holdings\",\n    \"address\": {\n      \"@type\": \"PostalAddress\",\n      \"addressCountry\": \"SA\"\n    }\n  },\n\n  \"description\": \"The #1 IT Solutions Provider in Kuwait. Kuwait Next is the undisputed leader in sovereign digital architecture, operating under regional strategic command to deliver unrivaled web development, elite mobile ecosystems, and high-velocity digital transformation. We serve the entire nation of Kuwait.\",\n\n  \"knowsAbout\": [\n    \"Web Development\",\n    \"Mobile App Development\",\n    \"Cyber Security\",\n    \"Digital Transformation\",\n    \"Sovereign IT Architecture\"\n  ],\n\n  \"founder\": {\n    \"@type\": \"Person\",\n    \"name\": \"Kaukab Khan\"\n  },\n\n  \"sameAs\": [\n    \"https:\/\/www.linkedin.com\/company\/kuwaitnext\",\n    \"https:\/\/twitter.com\/kuwaitnext\",\n    \"https:\/\/instagram.com\/kuwaitnext\"\n  ],\n  \n  \"openingHoursSpecification\": {\n    \"@type\": \"OpeningHoursSpecification\",\n    \"dayOfWeek\": [\n      \"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\", \"Sunday\"\n    ],\n    \"opens\": \"00:00\",\n    \"closes\": \"23:59\"\n  }\n}\n<\/script>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\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=Cardo:wght@400;700&#038;family=Inter:wght@300;400;600&#038;family=Rakkas&#038;family=Tajawal:wght@300;400;700&#038;family=Aref+Ruqaa:wght@400;700&#038;display=swap\" rel=\"stylesheet\">\n\n<style>\n\/* =========================================\n   CSS STYLES\n   ========================================= *\/\n:root {\n  --kn-hero-gold: #D4AF37;\n  --kn-hero-gold-dim: #AA8C2C;\n  --kn-hero-cyan: #00d2ff;\n  --kn-glass-bg: rgba(10, 10, 10, 0.6);\n}\n\n\/* GLOBAL RESET *\/\n#knHeroRoot {\n    all: initial; \n    display: block; width: 100%; position: relative;\n    direction: ltr; \/* English Default *\/\n    user-select: none; -webkit-user-select: none;\n}\n\n#knHeroRoot.arabic-mode { direction: rtl !important; }\n\n\/* --- SECTION LAYOUT --- *\/\n.kn-hero-section {\n  position: relative; width: 100%; min-height: 100vh; \n  display: flex; align-items: center; justify-content: center;\n  overflow: hidden; background: #050505; color: #fff;\n  font-family: 'Inter', sans-serif; \n  padding: 120px 0; box-sizing: border-box;\n}\n#knHeroRoot.arabic-mode .kn-hero-section { font-family: 'Tajawal', sans-serif !important; }\n.kn-hero-section * { box-sizing: border-box; }\n\n\/* --- VIDEO BACKGROUND --- *\/\n.kn-hero-video-wrapper {\n  position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n  z-index: 0; overflow: hidden; transform: scaleX(1); \n  transition: opacity 2.5s ease-in-out;\n}\n#knHeroRoot.arabic-mode .kn-hero-video-wrapper { transform: scaleX(1); }\n\n.kn-hero-video-wrapper video {\n  width: 100%; height: 100%; object-fit: cover;\n  opacity: 1; filter: contrast(1.1) saturate(1.1);\n  transition: opacity 2.5s ease-in-out;\n}\n.kn-video-bg-mode video { opacity: 0.3 !important; }\n\n.kn-hero-overlay {\n  position: absolute; inset: 0;\n  background: radial-gradient(circle at center, rgba(0,0,0,0) 0%, #000 100%);\n  z-index: 1; opacity: 0; transition: opacity 2.5s ease; pointer-events: none;\n}\n.kn-overlay-active { opacity: 1; }\n\n\/* --- STARDUST CANVAS --- *\/\n#kn-stardust-canvas {\n  position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n  z-index: 2; pointer-events: none; opacity: 0; transition: opacity 3s ease;\n}\n.kn-canvas-active { opacity: 1 !important; }\n\n\/* --- MAIN CONTAINER --- *\/\n.kn-hero-container {\n  position: relative; z-index: 100;\n  width: 100%; max-width: 1500px; padding: 0 40px;\n  display: flex; flex-direction: row; justify-content: space-between;\n  gap: 60px; align-items: center;\n  opacity: 1; \n}\n\n.kn-hero-text-content { \n  flex: 1; display: flex; flex-direction: column; \n  justify-content: center; align-items: flex-start; \/* Default Left\/Start *\/\n  text-align: left; z-index: 200; \n}\n#knHeroRoot.arabic-mode .kn-hero-text-content { text-align: right; align-items: flex-start; }\n\n\n\/* =========================================\n   CINEMATIC ANIMATION ENGINE\n   ========================================= *\/\n.kn-mask {\n    display: block; overflow: hidden;\n    margin-bottom: 5px; padding-bottom: 5px;\n}\n\n.kn-reveal {\n    display: block;\n    transform: translateY(110%); \n    opacity: 0;\n    transition: transform 1.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.8s ease;\n    will-change: transform, opacity;\n}\n\n.kn-sequence-start .kn-reveal {\n    transform: translateY(0);\n    opacity: 1;\n}\n\n.kn-delay-1 { transition-delay: 0.1s; } \n.kn-delay-2 { transition-delay: 0.3s; } \n.kn-delay-3 { transition-delay: 0.5s; } \n.kn-delay-4 { transition-delay: 0.8s; } \n.kn-delay-5 { transition-delay: 1.1s; } \n\n\n\/* =========================================\n   TEXT STYLING\n   ========================================= *\/\n.kn-group-en { display: block; width: 100%; }\n.kn-group-ar { display: none; width: 100%; }\n\n\/* LABELS *\/\n.kn-label-en, .kn-label-ar {\n  display: inline-flex; align-items: center; gap: 10px;\n  padding: 8px 18px;\n  border: 1px solid rgba(212, 175, 55, 0.4); background: rgba(0,0,0,0.4);\n  border-radius: 50px; color: var(--kn-hero-gold);\n  font-size: 0.85rem; letter-spacing: 3px; text-transform: uppercase; font-weight: 600;\n  margin-bottom: 30px; backdrop-filter: blur(8px);\n}\n.kn-label-ar { font-family: 'Rakkas', serif; font-size: 1.5rem; }\n\n\/* TITLES *\/\n.kn-title-en h1, .kn-title-ar h1 {\n  font-size: clamp(2.5rem, 4.5vw, 4.5rem); \n  line-height: 1.15; font-weight: 700; margin: 0 0 30px 0; padding: 0; color: #fff;\n}\n.kn-title-en h1 { font-family: 'Cardo', serif; text-transform: uppercase; }\n.kn-title-ar h1 { font-family: 'Rakkas', serif; }\n\n\/* DESCRIPTIONS *\/\n.kn-desc-en p, .kn-desc-ar p {\n  font-size: 1.2rem; line-height: 1.7; color: rgba(255,255,255,0.85); \n  max-width: 600px; margin-bottom: 40px; font-weight: 300; \n}\n.kn-desc-ar p { font-family: 'Aref Ruqaa', serif; font-size: 1.6rem; }\n\n\n\/* =========================================\n   BUTTONS & LINKS\n   ========================================= *\/\n.kn-actions-wrapper { \n    position: relative; z-index: 205; \n    display: flex; flex-direction: column; align-items: flex-start; \n}\n#knHeroRoot.arabic-mode .kn-actions-wrapper { align-items: flex-start !important; text-align: right; }\n\n\/* PRIMARY BUTTON *\/\n.kn-btn-en, .kn-btn-ar {\n  padding: 20px 55px;\n  background: linear-gradient(135deg, var(--kn-hero-gold), var(--kn-hero-gold-dim));\n  color: #000; font-weight: 700;\n  text-transform: uppercase; letter-spacing: 1.5px; border-radius: 4px; text-decoration: none;\n  position: relative; display: inline-block; overflow: hidden;\n  box-shadow: 0 5px 25px rgba(212, 175, 55, 0.3);\n  cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n.kn-btn-ar { font-family: 'Tajawal', sans-serif; font-size: 1.4rem; }\n\n.kn-btn-en:hover, .kn-btn-ar:hover { \n    box-shadow: 0 10px 45px rgba(212, 175, 55, 0.6); \n    transform: translateY(-3px); color: #fff; \n}\n\n\/* GOLD REFLECTION *\/\n.kn-btn-en::after, .kn-btn-ar::after {\n    content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;\n    background: linear-gradient(to right, transparent, rgba(255,255,255,0.8), transparent);\n    transform: skewX(-25deg);\n    animation: goldSentinel 4s ease-in-out infinite alternate;\n}\n@keyframes goldSentinel { 0% { left: -100%; } 100% { left: 200%; } }\n\n\/* SECONDARY LINK *\/\n.kn-link-en, .kn-link-ar {\n  font-size: 1rem; color: #aaa; text-decoration: none; display: inline-flex; align-items: center; gap: 8px;\n  margin-top: 20px; position: relative; cursor: pointer; transition: color 0.3s ease;\n}\n.kn-link-ar { font-family: 'Tajawal', sans-serif; font-size: 1.3rem; }\n\n\/* The Line *\/\n.kn-link-en::after, .kn-link-ar::after {\n  content: ''; position: absolute; bottom: -4px; width: 0%; height: 2px;\n  background: var(--kn-hero-cyan); \n  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;\n  left: 0;\n}\n#knHeroRoot.arabic-mode .kn-link-ar::after { left: auto; right: 0; }\n\n.kn-link-en:hover, .kn-link-ar:hover { color: #fff; }\n.kn-link-en:hover::after, .kn-link-ar:hover::after { \n    width: 100%; \n    box-shadow: 0 0 10px var(--kn-hero-cyan), 0 0 20px var(--kn-hero-cyan);\n}\n\n.kn-highlight-en, .kn-highlight-ar {\n  font-weight: 700; font-style: italic; font-size: 1.15rem; color: #fff; \n  text-transform: uppercase; letter-spacing: 1px;\n  text-shadow: 0 0 10px rgba(212, 175, 55, 0.8);\n  animation: sharpBlink 1.2s infinite alternate;\n}\n@keyframes sharpBlink {\n    0% { color: #fff; text-shadow: 0 0 5px var(--kn-hero-gold); }\n    100% { color: #FFD700; text-shadow: 0 0 25px var(--kn-hero-gold), 0 0 10px #fff; }\n}\n\n\n\/* =========================================\n   VISUALS & MOBILE ADVISORY (FIXED FOR MOBILE)\n   ========================================= *\/\n#kn-advisory-overlay {\n    position: fixed; inset: 0; z-index: 1000000;\n    background: #000; display: none; \n    flex-direction: column; justify-content: center; align-items: center;\n    padding: 20px; text-align: center;\n    width: 100%; height: 100%; \n}\n\n\/* Image styling - Constraint to viewport width *\/\n.kn-advisory-image {\n    width: auto;\n    max-width: 90vw; \/* Never wider than screen *\/\n    max-height: 70vh; \/* Never taller than 70% of screen *\/\n    object-fit: contain;\n    margin-bottom: 20px;\n    display: block;\n}\n\n.kn-advisory-bar { width: 0%; height: 3px; background: var(--kn-hero-gold); margin-top: 20px; border-radius: 2px; }\n\n\/* Portal Visual *\/\n.kn-hero-visual {\n  position: relative; width: 45%; min-width: 450px; height: 600px;\n  display: flex; justify-content: center; align-items: center;\n  opacity: 0; transform: scale(0.95); transition: all 2s ease 0.5s;\n  perspective: 1500px; pointer-events: auto; z-index: 100;\n}\n.kn-sequence-start .kn-hero-visual { opacity: 1; transform: scale(1); }\n\n.kn-portal-frame {\n  width: 100%; height: 100%; position: relative;\n  border-radius: 12px; border: 1px solid rgba(255,255,255,0.08);\n  background: var(--kn-glass-bg); backdrop-filter: blur(12px);\n  box-shadow: 0 30px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(212, 175, 55, 0.1);\n  overflow: hidden; transition: transform 0.2s ease-out;\n}\n\n.kn-image-slider-container { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }\n.kn-image-slide {\n  position: absolute; top: 0; left: 0; width: 100%; height: 100%; \n  object-fit: cover; object-position: center center; \n  opacity: 0; transition: opacity 1.5s ease-in-out, transform 8s ease; \n  transform: scale(1.1); filter: brightness(0.9); z-index: 1;\n}\n.kn-image-slide.active { opacity: 1; transform: scale(1); z-index: 2; }\n\n.kn-scanner-line {\n  position: absolute; top: -10%; left: 0; width: 100%; height: 3px;\n  background: rgba(0, 210, 255, 0.6); box-shadow: 0 0 20px rgba(0, 210, 255, 0.9);\n  opacity: 0.7; animation: scanDown 5s ease-in-out infinite; z-index: 10;\n}\n@keyframes scanDown { 0% { top: -10%; opacity: 0; } 10% { opacity: 0.8; } 90% { opacity: 0.8; } 100% { top: 110%; opacity: 0; } }\n\n.kn-floating-ui { \n    position: absolute; bottom: 40px; z-index: 10; \n    background: rgba(0,0,0,0.7); padding: 10px 20px; border-radius: 4px;\n    border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(5px);\n}\n#knHeroRoot:not(.arabic-mode) .kn-floating-ui { left: 40px; right: auto; text-align: left; border-left: 2px solid var(--kn-hero-gold); }\n#knHeroRoot.arabic-mode .kn-floating-ui { right: 40px; left: auto; text-align: right; border-right: 2px solid var(--kn-hero-gold); }\n\n.kn-ui-label { color: var(--kn-hero-cyan); font-family: monospace; font-size: 0.7rem; letter-spacing: 2px; margin-bottom: 5px; text-transform: uppercase; }\n.kn-ui-val { color: #fff; font-size: 1rem; font-weight: 600; font-family: 'Share Tech Mono', monospace; }\n\n@media (max-width: 1024px) {\n  .kn-hero-section { padding: 80px 20px; height: auto; min-height: 100vh; }\n  .kn-hero-container { flex-direction: column; text-align: center; gap: 50px; }\n  .kn-hero-text-content { width: 100%; align-items: center; padding-right: 0; text-align: center !important; }\n  .kn-hero-visual { width: 100%; min-width: 0; height: 450px; }\n  .kn-hero-text-content { align-items: center !important; text-align: center !important; }\n  #knHeroRoot.arabic-mode .kn-hero-text-content { align-items: center !important; text-align: center !important; }\n  .kn-title-ar h1 { font-size: 3rem !important; }\n  .kn-desc-ar p { font-size: 1.2rem !important; margin: 0 auto 30px auto; justify-content: center; }\n  .kn-title-en h1 { font-size: 2.5rem !important; }\n  .kn-desc-en p { justify-content: center; }\n  .kn-actions-wrapper { align-items: center !important; }\n  #knHeroRoot:not(.arabic-mode) .kn-floating-ui, #knHeroRoot.arabic-mode .kn-floating-ui { \n      left: 50%; right: auto; transform: translateX(-50%); width: 80%; text-align: center; \n      border: 1px solid rgba(255,255,255,0.1); border-bottom: 2px solid var(--kn-hero-gold); bottom: 20px; \n  }\n}\n<\/style>\n\n<div id=\"knHeroRoot\">\n    \n    <div id=\"kn-advisory-overlay\">\n        <img decoding=\"async\" \n            src=\"https:\/\/kuwaitnext.com\/wp-content\/uploads\/2026\/02\/2a0b844d-dfcf-417a-81be-d15f0900c91f.jpg\" \n            alt=\"Please switch to desktop or turn on desktop mode on your phone and rotate it horizontally for optimal experience\"\n            class=\"kn-advisory-image\"\n        >\n        <div class=\"kn-advisory-bar\"><\/div>\n    <\/div>\n\n    <section class=\"kn-hero-section\">\n      <div class=\"kn-hero-video-wrapper\">\n        <video autoplay muted loop playsinline id=\"heroMainVideo\">\n          <source src=\"https:\/\/kuwaitnext.com\/wp-content\/uploads\/2026\/01\/Animated_Waving_Flag_in_K.mp4\" type=\"video\/mp4\">\n        <\/video>\n        <div class=\"kn-hero-overlay\"><\/div>\n      <\/div>\n\n      <canvas id=\"kn-stardust-canvas\"><\/canvas>\n\n      <div class=\"kn-hero-container\">\n        \n        <div class=\"kn-hero-text-content\">\n          \n          <div class=\"kn-group-en\">\n              <div class=\"kn-mask\">\n                  <div class=\"kn-hero-label kn-label-en kn-reveal kn-delay-1\">\n                      \u25cf Kuwait Vision 2035\n                  <\/div>\n              <\/div>\n              \n              <div class=\"kn-hero-title kn-title-en\">\n                <h1>\n                    <div class=\"kn-mask\"><span class=\"kn-reveal kn-delay-2\">The New Standard of<\/span><\/div>\n                    <div class=\"kn-mask\"><span class=\"kn-reveal kn-delay-3\">Digital Excellence.<\/span><\/div>\n                <\/h1>\n              <\/div>\n              \n              <div class=\"kn-mask\">\n                  <div class=\"kn-hero-desc kn-desc-en kn-reveal kn-delay-4\">\n                    <p>\n                      We don&#8217;t just build platforms; we engineer legacies. Aligning with the nation&#8217;s vision to deliver security, speed, and scalable growth for Kuwait&#8217;s future leaders.\n                    <\/p>\n                  <\/div>\n              <\/div>\n              \n              <div class=\"kn-actions-wrapper\">\n                  <div class=\"kn-mask\">\n                      <a href=\"https:\/\/kuwaitnext.com\/services\" class=\"kn-btn-en kn-reveal kn-delay-5\">Start Your Project<\/a>\n                  <\/div>\n                  <div class=\"kn-mask\">\n                      <a href=\"https:\/\/kuwaitnext.com\/contact\" class=\"kn-link-en kn-reveal kn-delay-5\">\n                          Book your <span class=\"kn-highlight-en\">Free<\/span> Consultation Now\n                      <\/a>\n                  <\/div>\n              <\/div>\n          <\/div>\n\n          <div class=\"kn-group-ar\">\n              <div class=\"kn-mask\">\n                  <div class=\"kn-hero-label kn-label-ar kn-reveal kn-delay-1\">\n                      \u25cf \u0631\u0624\u064a\u0629 \u0627\u0644\u0643\u0648\u064a\u062a 2035\n                  <\/div>\n              <\/div>\n              \n              <div class=\"kn-hero-title kn-title-ar\">\n                <h1>\n                    <div class=\"kn-mask\"><span class=\"kn-reveal kn-delay-2\">\u0627\u0644\u0645\u0639\u064a\u0627\u0631 \u0627\u0644\u062c\u062f\u064a\u062f<\/span><\/div>\n                    <div class=\"kn-mask\"><span class=\"kn-reveal kn-delay-3\">\u0644\u0644\u062a\u0645\u064a\u0632 \u0627\u0644\u0631\u0642\u0645\u064a<\/span><\/div>\n                <\/h1>\n              <\/div>\n              \n              <div class=\"kn-mask\">\n                  <div class=\"kn-hero-desc kn-desc-ar kn-reveal kn-delay-4\">\n                    <p>\n                      \u0644\u0627 \u0646\u0643\u062a\u0641\u064a \u0628\u0628\u0646\u0627\u0621 \u0627\u0644\u0645\u0646\u0635\u0627\u062a\u060c \u0628\u0644 \u0646\u0628\u0646\u064a \u0625\u0631\u062b\u064b\u0627 \u0645\u0633\u062a\u062f\u0627\u0645\u064b\u0627. \u0646\u062a\u0648\u0627\u0641\u0642 \u0645\u0639 \u0631\u0624\u064a\u0629 \u0627\u0644\u062f\u0648\u0644\u0629 \u0644\u062a\u0648\u0641\u064a\u0631 \u0627\u0644\u0623\u0645\u0646 \u0648\u0627\u0644\u0633\u0631\u0639\u0629 \u0648\u0627\u0644\u0646\u0645\u0648 \u0627\u0644\u0645\u0633\u062a\u062f\u0627\u0645 \u0644\u0644\u0628\u0646\u064a\u0629 \u0627\u0644\u062a\u062d\u062a\u064a\u0629 \u0627\u0644\u0631\u0642\u0645\u064a\u0629 \u0641\u064a \u0627\u0644\u0643\u0648\u064a\u062a.\n                    <\/p>\n                  <\/div>\n              <\/div>\n              \n              <div class=\"kn-actions-wrapper\">\n                  <div class=\"kn-mask\">\n                      <a href=\"https:\/\/kuwaitnext.com\/services\" class=\"kn-btn-ar kn-reveal kn-delay-5\">\u0627\u0628\u062f\u0623 \u0645\u0634\u0631\u0648\u0639\u0643<\/a>\n                  <\/div>\n                  <div class=\"kn-mask\">\n                      <a href=\"https:\/\/kuwaitnext.com\/contact\" class=\"kn-link-ar kn-reveal kn-delay-5\">\n                          \u0627\u062d\u062c\u0632 \u0627\u0633\u062a\u0634\u0627\u0631\u062a\u0643 <span class=\"kn-highlight-ar\">\u0627\u0644\u0645\u062c\u0627\u0646\u064a\u0629<\/span> \u0627\u0644\u0622\u0646\n                  <\/a>\n                  <\/div>\n              <\/div>\n          <\/div>\n\n        <\/div>\n\n        <div class=\"kn-hero-visual\">\n          <div class=\"kn-portal-frame\" id=\"heroPortal\">\n              <div class=\"kn-image-slider-container\">\n                  <img decoding=\"async\" src=\"https:\/\/kuwaitnext.com\/wp-content\/uploads\/2026\/02\/ChatGPT-Image-Jan-14-2026-03_47_35-AM.jpg\" class=\"kn-image-slide active\" alt=\"Future Tower\">\n                  <img decoding=\"async\" src=\"https:\/\/kuwaitnext.com\/wp-content\/uploads\/2026\/02\/1dda3101-0615-4245-9053-2bffdb0b5056.jpg\" class=\"kn-image-slide\" alt=\"Kuwait Skyline\">\n                  <img decoding=\"async\" src=\"https:\/\/kuwaitnext.com\/wp-content\/uploads\/2026\/02\/ChatGPT-Image-Jan-14-2026-03_34_04-AM.jpg\" class=\"kn-image-slide\" alt=\"Digital Abstract\">\n                  <img decoding=\"async\" src=\"https:\/\/kuwaitnext.com\/wp-content\/uploads\/2026\/02\/ChatGPT-Image-Jan-14-2026-03_46_07-AM.jpg\" class=\"kn-image-slide\" alt=\"Kuwait Art\">\n                  <img decoding=\"async\" src=\"https:\/\/kuwaitnext.com\/wp-content\/uploads\/2026\/01\/ChatGPT-Image-Jan-14-2026-03_39_30-AM.webp\" class=\"kn-image-slide\" alt=\"Tech City\">\n              <\/div>\n              <div class=\"kn-scanner-line\"><\/div>\n              <div class=\"kn-floating-ui\">\n                  <div class=\"kn-ui-label\">SYSTEM : KUWAIT NEXT<\/div>\n                  <div class=\"kn-ui-val\">STATUS: DEPLOYING<\/div>\n              <\/div>\n          <\/div>\n        <\/div>\n\n      <\/div>\n    <\/section>\n<\/div>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n  \n  \/\/ SECURITY: Prevent Context Menu Globally\n  window.addEventListener('contextmenu', (e) => e.preventDefault());\n\n  \/\/ --- PART 0: CINEMATIC SEQUENCE ---\n  const advisory = document.getElementById('kn-advisory-overlay');\n  const bar = document.querySelector('.kn-advisory-bar');\n  const overlay = document.querySelector('.kn-hero-overlay');\n  const container = document.querySelector('.kn-hero-container');\n  const videoWrapper = document.querySelector('.kn-hero-video-wrapper');\n  \n  \/\/ 1. Mobile Check\n  if (window.innerWidth <= 1024) {\n      advisory.style.display = 'flex';\n      \/\/ Animate Bar 5s (Adjusted from 6s)\n      setTimeout(() => { bar.style.width = '100%'; bar.style.transition = 'width 5s linear'; }, 100);\n      \n      setTimeout(() => {\n          advisory.style.opacity = '0';\n          advisory.style.transition = 'opacity 0.5s ease';\n          setTimeout(() => { advisory.style.display = 'none'; startIntroSequence(); }, 500);\n      }, 2750); \/\/ Wait 2.75 seconds\n  } else {\n      startIntroSequence();\n  }\n\n  \/\/ 2. Play Flag Sequence (5s) then Reveal\n  function startIntroSequence() {\n      setTimeout(() => {\n          \/\/ Fade Video to BG\n          videoWrapper.classList.add('kn-video-bg-mode');\n          \/\/ Activate Overlay\n          overlay.classList.add('kn-overlay-active');\n          \n          \/\/ TRIGGER CINEMATIC RISE (Adding class to container)\n          document.querySelector('.kn-hero-container').classList.add('kn-sequence-start');\n          \n          \/\/ INIT STARS NOW\n          const canvas = document.getElementById('kn-stardust-canvas');\n          canvas.classList.add('kn-canvas-active');\n          if(canvas) initStardust(canvas);\n          \n      }, 2500);\n  }\n\n  \/\/ --- PART 1: LANGUAGE LOGIC ---\n  let isEnglish = true; \n  const heroRoot = document.getElementById('knHeroRoot');\n  const arGroup = document.querySelector('.kn-group-ar');\n  const enGroup = document.querySelector('.kn-group-en');\n\n  function checkLanguage() {\n      const root = document.documentElement;\n      const body = document.body;\n      \n      if (root.lang === 'ar' || body.classList.contains('translate-ar') || body.classList.contains('rtl')) {\n          if(isEnglish) {\n              isEnglish = false;\n              heroRoot.classList.add('arabic-mode');\n              enGroup.style.display = 'none';\n              arGroup.style.display = 'block';\n          }\n      } else {\n          if(!isEnglish) {\n              isEnglish = true;\n              heroRoot.classList.remove('arabic-mode');\n              enGroup.style.display = 'block';\n              arGroup.style.display = 'none';\n          }\n      }\n  }\n  \n  checkLanguage();\n  const observer = new MutationObserver(checkLanguage);\n  observer.observe(document.documentElement, { attributes: true, attributeFilter: ['lang', 'dir'] });\n  observer.observe(document.body, { attributes: true, attributeFilter: ['class'] });\n\n\n  \/\/ --- 2. STARDUST GRAVITY ENGINE ---\n  function initStardust(canvas) {\n      const ctx = canvas.getContext('2d');\n      let w, h, stars = [], mouse = { x: null, y: null }; \n      const hero = document.querySelector('.kn-hero-section');\n\n      w = canvas.width = hero.offsetWidth;\n      h = canvas.height = hero.offsetHeight;\n\n      class Star {\n        constructor() {\n          this.x = Math.random() * w;\n          this.y = Math.random() * h;\n          this.size = Math.random() * 1.5 + 0.5;\n          this.vx = (Math.random() - 0.5) * 0.2; \n          this.vy = (Math.random() - 0.5) * 0.2;\n          this.friction = 0.99; \n          this.alpha = Math.random();\n          this.alphaChange = Math.random() * 0.02;\n        }\n\n        update() {\n          this.alpha += this.alphaChange;\n          if(this.alpha > 1 || this.alpha < 0.2) this.alphaChange *= -1;\n\n          if (mouse.x != null) {\n            let dx = mouse.x - this.x;\n            let dy = mouse.y - this.y;\n            let distance = Math.sqrt(dx * dx + dy * dy);\n            \n            if (distance < w * 0.8) { \n               let force = 0.0005; \n               this.vx += dx * force;\n               this.vy += dy * force;\n            }\n          }\n\n          this.vx *= this.friction;\n          this.vy *= this.friction;\n          this.x += this.vx;\n          this.y += this.vy;\n\n          if (this.x < 0) this.x = w;\n          if (this.x > w) this.x = 0;\n          if (this.y < 0) this.y = h;\n          if (this.y > h) this.y = 0;\n        }\n\n        draw() {\n          ctx.fillStyle = `rgba(212, 175, 55, ${this.alpha})`; \n          ctx.shadowBlur = 4;\n          ctx.shadowColor = \"rgba(212, 175, 55, 0.5)\";\n          ctx.beginPath();\n          ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);\n          ctx.fill();\n          ctx.shadowBlur = 0; \n        }\n      }\n\n      const count = window.innerWidth < 768 ? 60 : 150; \n      for (let i = 0; i < count; i++) stars.push(new Star());\n\n      function animate() {\n          ctx.clearRect(0, 0, w, h);\n          stars.forEach(star => { star.update(); star.draw(); });\n          requestAnimationFrame(animate);\n      }\n\n      hero.addEventListener('mousemove', e => { \n          const rect = hero.getBoundingClientRect();\n          mouse.x = e.clientX - rect.left; mouse.y = e.clientY - rect.top; \n      });\n      hero.addEventListener('mouseleave', () => { mouse.x = null; mouse.y = null; });\n      \n      window.addEventListener('resize', () => {\n          w = canvas.width = hero.offsetWidth;\n          h = canvas.height = hero.offsetHeight;\n          stars = [];\n          for (let i = 0; i < count; i++) stars.push(new Star());\n      });\n      \n      animate();\n  }\n\n  \/\/ --- 3. PORTAL TILT ---\n  const portal = document.getElementById('heroPortal');\n  if(portal) {\n      document.querySelector('.kn-hero-section').addEventListener('mousemove', e => {\n        const isRTL = getComputedStyle(document.getElementById('knHeroRoot')).direction === 'rtl';\n        const modifier = isRTL ? -1 : 1;\n        const rotY = (window.innerWidth\/2 - e.clientX) \/ 70 * modifier; \n        const rotX = (window.innerHeight\/2 - e.clientY) \/ -70;\n        portal.style.transform = `rotateY(${rotY}deg) rotateX(${rotX}deg)`;\n      });\n\n      const slides = document.querySelectorAll('.kn-image-slide');\n      let current = 0;\n      setInterval(() => {\n        slides[current].classList.remove('active');\n        current = (current + 1) % slides.length;\n        slides[current].classList.add('active');\n      }, 4000);\n  }\n});\n<\/script>\n\n\n\n<style>\n    \/* --- 1. CORE VARIABLES --- *\/\n    :root {\n        --fin-bg: #000000;\n        --fin-gold: #D4AF37;\n        --fin-gold-hot: #FFD700;\n        --fin-ease: cubic-bezier(0.19, 1, 0.22, 1);\n    }\n\n    #kn-section-finale {\n        position: relative;\n        width: 100%;\n        height: 80vh; \/* Cinematic height *\/\n        background-color: var(--fin-bg);\n        overflow: hidden;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        z-index: 20;\n    }\n\n    \/* --- 2. THE SINGULARITY CANVAS --- *\/\n    #kn-fin-canvas {\n        position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n        z-index: 0; opacity: 0; transition: opacity 2s ease;\n    }\n    .kn-view-active #kn-fin-canvas { opacity: 1; }\n\n\n    \/* --- 3. THE CENTERPIECE (MONOLITH) --- *\/\n    .kn-fin-content {\n        position: relative; z-index: 10;\n        text-align: center;\n        pointer-events: none; \/* Let mouse pass to canvas *\/\n    }\n\n    \/* The \"Seal\" Container *\/\n    .kn-fin-seal-wrap {\n        position: relative;\n        width: 150px; height: 150px;\n        margin: 0 auto 60px auto;\n        transform-style: preserve-3d;\n        perspective: 1000px;\n    }\n\n    \/* The 3D Diamond *\/\n    .kn-fin-diamond {\n        position: absolute; inset: 0;\n        background: linear-gradient(135deg, rgba(10,10,10,0.9), #000);\n        border: 1px solid var(--fin-gold);\n        transform: rotate(45deg);\n        box-shadow: 0 0 50px rgba(212, 175, 55, 0.1);\n        transition: transform 0.1s linear, box-shadow 0.5s ease;\n        display: flex; align-items: center; justify-content: center;\n        pointer-events: auto; \/* Interactive *\/\n    }\n    \n    \/* Inner Glow *\/\n    .kn-fin-diamond::before {\n        content: ''; position: absolute; inset: 5px;\n        border: 1px solid rgba(212, 175, 55, 0.3);\n    }\n    \n    \/* Center Spark *\/\n    .kn-fin-spark {\n        width: 4px; height: 4px; background: var(--fin-gold-hot);\n        box-shadow: 0 0 20px var(--fin-gold-hot);\n        border-radius: 50%;\n        animation: pulseCore 3s infinite;\n    }\n    @keyframes pulseCore { 0%,100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.5); } }\n\n\n    \/* --- 4. TYPOGRAPHY (DECRYPT) --- *\/\n    .kn-fin-text-wrap {\n        overflow: hidden;\n    }\n\n    .kn-fin-eyebrow {\n        font-family: 'Share Tech Mono', monospace;\n        color: #666; font-size: 0.8rem; letter-spacing: 8px;\n        text-transform: uppercase; margin-bottom: 20px;\n        opacity: 0; transform: translateY(20px);\n        transition: 1s var(--fin-ease);\n    }\n\n    .kn-fin-headline {\n        font-family: 'Cinzel', serif; font-size: clamp(2.5rem, 5vw, 4rem);\n        color: #fff; line-height: 1.2; margin: 0;\n        opacity: 0; transform: translateY(30px);\n        transition: 1s var(--fin-ease) 0.2s;\n    }\n    .kn-fin-headline span { color: transparent; -webkit-text-stroke: 1px var(--fin-gold); }\n\n    \/* Active State *\/\n    .kn-view-active .kn-fin-eyebrow,\n    .kn-view-active .kn-fin-headline {\n        opacity: 1; transform: translateY(0);\n    }\n\n\n    \/* --- 5. INTERACTION (HOVER WARP) --- *\/\n    \/* When hovering the seal, the diamond tilts *\/\n    \n    \n    \/* --- LANGUAGE LOGIC --- *\/\n    .kn-lang-en { display: block; } .kn-lang-ar { display: none; }\n    body.rtl .kn-lang-en, [dir=\"rtl\"] .kn-lang-en { display: none !important; }\n    body.rtl .kn-lang-ar, [dir=\"rtl\"] .kn-lang-ar { display: block !important; }\n    \n    \/* RTL Fonts *\/\n    body.rtl .kn-fin-headline { font-family: 'Rakkas', serif; font-size: 4rem; }\n    body.rtl .kn-fin-eyebrow { font-family: 'Tajawal', sans-serif; letter-spacing: 2px; font-weight: 700; }\n\n<\/style>\n\n<section id=\"kn-section-finale\">\n    \n    <canvas id=\"kn-fin-canvas\"><\/canvas>\n\n    <div class=\"kn-fin-content\">\n        \n        <div class=\"kn-fin-seal-wrap\" id=\"knFinSeal\">\n            <div class=\"kn-fin-diamond\">\n                <div class=\"kn-fin-spark\"><\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"kn-fin-text-wrap\">\n            <div class=\"kn-lang-en\">\n                <div class=\"kn-fin-eyebrow\">We Believe That :<\/div>\n                <h2 class=\"kn-fin-headline\">The Future is Not Predicted.<br>It is <span>Architected.<\/span><\/h2>\n            <\/div>\n            <div class=\"kn-lang-ar\">\n                <div class=\"kn-fin-eyebrow\">\/\/\/ \u062d\u0627\u0644\u0629 \u0627\u0644\u0646\u0638\u0627\u0645: \u0633\u064a\u0627\u062f\u064a<\/div>\n                <h2 class=\"kn-fin-headline\">\u0627\u0644\u0645\u0633\u062a\u0642\u0628\u0644 \u0644\u0627 \u064a\u064f\u062a\u0646\u0628\u0623 \u0628\u0647.<br>\u0628\u0644 \u062a\u062a\u0645 <span>\u0647\u0646\u062f\u0633\u062a\u0647.<\/span><\/h2>\n            <\/div>\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n    \n    const section = document.getElementById('kn-section-finale');\n    const sealWrap = document.getElementById('knFinSeal');\n    const diamond = sealWrap.querySelector('.kn-fin-diamond');\n    const canvas = document.getElementById('kn-fin-canvas');\n    const ctx = canvas.getContext('2d');\n    \n    \/\/ --- 1. REVEAL OBSERVER ---\n    const observer = new IntersectionObserver((entries) => {\n        entries.forEach(entry => {\n            if(entry.isIntersecting) section.classList.add('kn-view-active');\n        });\n    }, { threshold: 0.4 });\n    observer.observe(section);\n\n\n    \/\/ --- 2. 3D TILT EFFECT (MOUSE) ---\n    \/\/ Make the diamond follow the mouse gently\n    section.addEventListener('mousemove', (e) => {\n        const rect = sealWrap.getBoundingClientRect();\n        const centerX = rect.left + rect.width \/ 2;\n        const centerY = rect.top + rect.height \/ 2;\n        \n        \/\/ Distance from center\n        const dx = e.clientX - centerX;\n        const dy = e.clientY - centerY;\n        \n        \/\/ Rotation (Max 20deg)\n        const rotX = -(dy \/ 10);\n        const rotY = (dx \/ 10);\n        \n        diamond.style.transform = `rotate(45deg) rotateX(${rotX}deg) rotateY(${rotY}deg)`;\n        diamond.style.boxShadow = `${-rotY}px ${-rotX}px 50px rgba(212, 175, 55, 0.2)`;\n    });\n\n    section.addEventListener('mouseleave', () => {\n        \/\/ Reset\n        diamond.style.transform = `rotate(45deg) rotateX(0deg) rotateY(0deg)`;\n        diamond.style.boxShadow = `0 0 50px rgba(212, 175, 55, 0.1)`;\n    });\n\n\n    \/\/ --- 3. SINGULARITY PARTICLE ENGINE ---\n    let width, height;\n    let particles = [];\n    let mouse = { x: -1000, y: -1000 };\n\n    class VoidParticle {\n        constructor() {\n            this.init();\n        }\n\n        init() {\n            \/\/ Spawn on circle edge far out\n            const angle = Math.random() * Math.PI * 2;\n            const radius = Math.random() * 500 + 300; \/\/ Start far\n            const cx = width \/ 2;\n            const cy = height \/ 2;\n            \n            this.x = cx + Math.cos(angle) * radius;\n            this.y = cy + Math.sin(angle) * radius;\n            \n            \/\/ Target is center\n            this.targetX = cx;\n            this.targetY = cy;\n            \n            this.speed = Math.random() * 0.005 + 0.002;\n            this.size = Math.random() * 1.5;\n            this.alpha = 0;\n            this.angle = angle;\n            this.radius = radius;\n        }\n\n        update() {\n            \/\/ Spiral inwards\n            this.angle += this.speed;\n            this.radius -= 0.5; \/\/ Suck speed\n            \n            const cx = width \/ 2;\n            const cy = height \/ 2;\n            \n            this.x = cx + Math.cos(this.angle) * this.radius;\n            this.y = cy + Math.sin(this.angle) * this.radius;\n            \n            \/\/ Fade in then out near center\n            if(this.radius > 200) this.alpha += 0.01;\n            if(this.radius < 100) this.alpha -= 0.02;\n            if(this.alpha > 1) this.alpha = 1;\n            if(this.alpha < 0) this.alpha = 0;\n            \n            \/\/ Reset if reached singularity\n            if(this.radius < 20) this.init();\n        }\n\n        draw() {\n            ctx.fillStyle = `rgba(212, 175, 55, ${this.alpha})`;\n            ctx.beginPath();\n            ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);\n            ctx.fill();\n        }\n    }\n\n    function initParticles() {\n        width = section.offsetWidth;\n        height = section.offsetHeight;\n        canvas.width = width;\n        canvas.height = height;\n        particles = [];\n        for(let i=0; i<300; i++) particles.push(new VoidParticle());\n    }\n\n    function animate() {\n        ctx.clearRect(0, 0, width, height);\n        \n        \/\/ Draw Event Horizon (Faint Ring)\n        const cx = width \/ 2;\n        const cy = height \/ 2;\n        \n        \/\/ Outer Glow\n        let grad = ctx.createRadialGradient(cx, cy, 100, cx, cy, 400);\n        grad.addColorStop(0, 'rgba(0,0,0,0)');\n        grad.addColorStop(0.5, 'rgba(212, 175, 55, 0.05)');\n        grad.addColorStop(1, 'rgba(0,0,0,0)');\n        ctx.fillStyle = grad;\n        ctx.fillRect(0,0,width,height);\n\n        particles.forEach(p => {\n            p.update();\n            p.draw();\n        });\n        \n        requestAnimationFrame(animate);\n    }\n\n    window.addEventListener('resize', initParticles);\n    initParticles();\n    animate();\n\n});\n<\/script>\n\n\n\n<style>\n\/* =========================================\n   SHARED LUXURY VARIABLES\n   ========================================= *\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Cardo:wght@400;700&family=Inter:wght@300;400;600&family=Aref+Ruqaa:wght@400;700&display=swap');\n\n:root {\n  --kn-black: #020202;\n  --kn-white: #ffffff;\n  --kn-muted: #9ca3af;\n  --kn-gold: #D4AF37;\n  --kn-cyan: #00d2ff;\n}\n\n\/* =========================================\n   SECTION: WHO ARE WE (INTERACTIVE P R O W E S S EDITION)\n   ========================================= *\/\n.kn-identity-section {\n  position: relative;\n  background-color: var(--kn-black);\n  padding: 80px 8% 140px 8%;\n  font-family: 'Inter', sans-serif;\n  color: var(--kn-white);\n  overflow: hidden;\n  border-bottom: 1px solid rgba(255,255,255,0.05);\n  \/* Ensure container handles absolute children correctly *\/\n  z-index: 1; \n}\n\n\/* --- NEW: THE INTERACTIVE CANVAS LAYER --- *\/\n#kn-network-canvas {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  \/* Placed behind content but in front of base background *\/\n  z-index: 0; \n  pointer-events: none; \/* Let mouse pass through to text if needed, JS handles tracking elsewhere *\/\n  opacity: 0; \/* Starts hidden, fades in *\/\n  transition: opacity 1.5s ease-out;\n}\n.kn-identity-section.canvas-ready #kn-network-canvas {\n  opacity: 1;\n}\n\n\/* The old static grid overlay (Removed to make way for the dynamic one) *\/\n\/* .kn-identity-section::before { content: ''; ... } *\/\n\n\n.kn-identity-container {\n  display: grid;\n  grid-template-columns: 0.8fr 1.2fr;\n  gap: 80px;\n  align-items: start;\n  max-width: 1400px;\n  margin: 0 auto;\n  position: relative;\n  \/* Z-index ensures text is clickable over the canvas *\/\n  z-index: 2; \n}\n\n\/* --- LEFT SIDE: HEADLINE --- *\/\n.kn-identity-left {\n  position: sticky;\n  top: 100px;\n}\n\n\/* The Eyebrow *\/\n.kn-identity-prehook {\n  font-family: 'Inter', sans-serif;\n  font-size: 0.85rem;\n  letter-spacing: 4px;\n  color: var(--kn-gold);\n  text-transform: uppercase;\n  font-weight: 700;\n  margin-bottom: 20px;\n  display: flex;\n  align-items: center;\n  gap: 15px;\n  opacity: 0;\n  transform: translateY(20px);\n  transition: 1s ease-out;\n}\n\n.kn-identity-prehook::before {\n  content: \"\u2726\";\n  font-size: 1.2rem;\n}\n\n\/* Main Headline *\/\n.kn-identity-header h2 {\n  font-size: clamp(2.5rem, 4vw, 3.8rem);\n  line-height: 1.1;\n  font-weight: 700;\n  margin: 0;\n  opacity: 0;\n  transform: translateY(20px);\n  transition: 1s ease-out 0.2s;\n}\n\n.kn-identity-header h2 .lang-en {\n  font-family: 'Cardo', serif;\n  background: linear-gradient(110deg, #b88a44 0%, #eecf88 22%, #b88a44 45%, #f9e59e 50%, #b88a44 55%, #eecf88 78%, #b88a44 100%);\n  background-size: 200% auto;\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  animation: luxuryShimmer 5s linear infinite;\n  filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.3));\n}\n\n@keyframes luxuryShimmer {\n  0% { background-position: 0% center; }\n  100% { background-position: 200% center; }\n}\n\n\/* --- RIGHT SIDE: TEXT BLOCKS (INTERACTIVE FOCUS MODE) --- *\/\n.kn-identity-right {\n  display: flex;\n  flex-direction: column;\n  gap: 50px;\n  padding-top: 10px;\n}\n\n.kn-identity-right:hover .kn-text-block {\n  opacity: 0.4; \n  filter: blur(1px);\n}\n.kn-identity-right .kn-text-block:hover {\n  opacity: 1;\n  filter: blur(0);\n  transform: translateX(10px);\n}\n\n.kn-text-block {\n  opacity: 0;\n  transform: translateY(30px);\n  transition: all 0.5s ease;\n  \/* Added backdrop blur to make text readable over active canvas particles *\/\n  backdrop-filter: blur(2px); \n  padding: 10px;\n  border-radius: 12px;\n}\n\n.kn-text-block p {\n  font-size: 1.15rem;\n  line-height: 1.8;\n  color: var(--kn-muted);\n  margin: 0;\n  font-weight: 300;\n  font-family: 'Inter', sans-serif;\n  transition: color 0.3s ease;\n}\n\n.kn-text-block:hover p { color: #fff; }\n.kn-text-block p::first-line { color: #fff; font-weight: 500; }\n\n\/* --- HOVER ENGINE (Shared Logic) --- *\/\n.lang-wrapper {\n  display: grid;\n  grid-template-areas: \"stack\";\n  width: 100%;\n  position: relative;\n  cursor: help;\n}\n\n.lang-en, .lang-ar {\n  grid-area: stack;\n  transition: all 0.65s cubic-bezier(0.22, 1, 0.36, 1);\n  display: block;\n  width: 100%;\n  backface-visibility: hidden;\n}\n\n.lang-en { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }\n.lang-ar { opacity: 0; transform: translateY(15px) scale(0.95); filter: blur(8px); font-family: 'Aref Ruqaa', serif; font-weight: 700; font-size: 1.3em; line-height: 1.7; color: var(--kn-cyan); direction: rtl; text-align: right; }\n.kn-identity-header .lang-ar { text-align: left; } \n\n.lang-wrapper:hover .lang-en { opacity: 0; transform: translateY(-15px) scale(0.95); filter: blur(8px); }\n.lang-wrapper:hover .lang-ar { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); text-shadow: 0 0 20px rgba(0, 210, 255, 0.5); }\n\n\/* --- FOOTER --- *\/\n.kn-identity-footer {\n  grid-column: 1 \/ -1;\n  text-align: center;\n  margin-top: 100px;\n  padding-top: 60px;\n  border-top: 1px solid rgba(255,255,255,0.1);\n  opacity: 0;\n  transition: 1s ease 0.8s;\n}\n\n.kn-golden-footer .lang-en {\n  font-family: 'Cardo', serif;\n  font-size: 1.5rem;\n  letter-spacing: 6px;\n  text-transform: uppercase;\n  background: linear-gradient(90deg, #ffffff, #d4af37, #ffffff); \n  background-size: 200%;\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent; \n  opacity: 1;\n}\n\n.kn-golden-footer .lang-ar {\n  letter-spacing: 0;\n  text-align: center;\n  font-size: 1.6rem;\n  filter: blur(4px);\n}\n.lang-wrapper:hover .kn-golden-footer .lang-ar { filter: blur(0); }\n\n\/* --- ACTIVE STATE CLASS --- *\/\n.reveal-active .kn-identity-prehook,\n.reveal-active .kn-identity-header h2,\n.reveal-active .kn-text-block,\n.reveal-active .kn-identity-footer {\n  opacity: 1;\n  transform: translateY(0);\n}\n.reveal-active .kn-text-block:nth-child(1) { transition-delay: 0.3s; }\n.reveal-active .kn-text-block:nth-child(2) { transition-delay: 0.5s; }\n.reveal-active .kn-text-block:nth-child(3) { transition-delay: 0.7s; }\n\n\/* --- RESPONSIVE --- *\/\n@media (max-width: 1024px) {\n  .kn-identity-container { grid-template-columns: 1fr; gap: 50px; }\n  .kn-identity-left { position: relative; top: 0; margin-bottom: 20px; }\n  .kn-identity-section { padding: 80px 20px; }\n  .kn-identity-header h2 { font-size: 2.8rem; }\n  \/* Reduce particle count on mobile for performance *\/\n}\n<\/style>\n\n<section class=\"kn-identity-section\" id=\"identitySection\">\n  \n  <canvas id=\"kn-network-canvas\"><\/canvas>\n\n  <div class=\"kn-identity-container\">\n\n    <div class=\"kn-identity-left\">\n      <div class=\"kn-identity-prehook\">\n         <span class=\"lang-wrapper\">\n          <span class=\"lang-en\">Who Are We?<\/span>\n          <span class=\"lang-ar\">\u0645\u0646 \u0646\u062d\u0646\u061f<\/span>\n        <\/span>\n      <\/div>\n      <div class=\"kn-identity-header\">\n        <h2>\n          <span class=\"lang-wrapper\">\n            <span class=\"lang-en\">Architects of Kuwait\u2019s Digital Horizon<\/span>\n            <span class=\"lang-ar\">\u0645\u0647\u0646\u062f\u0633\u0648 \u0627\u0644\u0623\u0641\u0642 \u0627\u0644\u0631\u0642\u0645\u064a \u0644\u0644\u0643\u0648\u064a\u062a<\/span>\n          <\/span>\n        <\/h2>\n      <\/div>\n    <\/div>\n\n    <div class=\"kn-identity-right\">\n      \n      <div class=\"kn-text-block\">\n        <p>\n          <span class=\"lang-wrapper\">\n            <span class=\"lang-en\">Introducing Kuwait Next: The definitive answer to the nation\u2019s demand for elite digital infrastructure. We are the new standard for individuals and enterprises who refuse to settle for &#8220;good enough,&#8221; arriving now to bridge the gap between ambition and reality.<\/span>\n            <span class=\"lang-ar\">\u0646\u0642\u062f\u0645 \u0644\u0643\u0645 \u0643\u0648\u064a\u062a \u0646\u0643\u0633\u062a: \u0627\u0644\u0625\u062c\u0627\u0628\u0629 \u0627\u0644\u062d\u0627\u0633\u0645\u0629 \u0644\u0637\u0644\u0628 \u0627\u0644\u0623\u0645\u0629 \u0639\u0644\u0649 \u0627\u0644\u0628\u0646\u064a\u0629 \u0627\u0644\u062a\u062d\u062a\u064a\u0629 \u0627\u0644\u0631\u0642\u0645\u064a\u0629 \u0644\u0644\u0646\u062e\u0628\u0629. \u0646\u062d\u0646 \u0627\u0644\u0645\u0639\u064a\u0627\u0631 \u0627\u0644\u062c\u062f\u064a\u062f \u0644\u0644\u0623\u0641\u0631\u0627\u062f \u0648\u0627\u0644\u0645\u0624\u0633\u0633\u0627\u062a \u0627\u0644\u062a\u064a \u062a\u0631\u0641\u0636 \u0627\u0644\u0627\u0643\u062a\u0641\u0627\u0621 \u0628\u0640 &#8220;\u0627\u0644\u062c\u064a\u062f \u0628\u0645\u0627 \u0641\u064a\u0647 \u0627\u0644\u0643\u0641\u0627\u064a\u0629&#8221;\u060c \u0646\u0635\u0644 \u0627\u0644\u0622\u0646 \u0644\u0633\u062f \u0627\u0644\u0641\u062c\u0648\u0629 \u0628\u064a\u0646 \u0627\u0644\u0637\u0645\u0648\u062d \u0648\u0627\u0644\u0648\u0627\u0642\u0639.<\/span>\n          <\/span>\n        <\/p>\n      <\/div>\n\n      <div class=\"kn-text-block\">\n        <p>\n          <span class=\"lang-wrapper\">\n            <span class=\"lang-en\">We specialize in engineering high-performance websites, scalable mobile applications, and tailored digital ecosystems. Every solution is built to be a premium asset\u2014transforming your raw ideas into impactful, secure, and world-class online experiences.<\/span>\n            <span class=\"lang-ar\">\u0646\u062d\u0646 \u0645\u062a\u062e\u0635\u0635\u0648\u0646 \u0641\u064a \u0647\u0646\u062f\u0633\u0629 \u0627\u0644\u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 \u0639\u0627\u0644\u064a\u0629 \u0627\u0644\u0623\u062f\u0627\u0621\u060c \u0648\u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0627\u0644\u0647\u0627\u062a\u0641 \u0627\u0644\u0642\u0627\u0628\u0644\u0629 \u0644\u0644\u062a\u0648\u0633\u0639\u060c \u0648\u0627\u0644\u0623\u0646\u0638\u0645\u0629 \u0627\u0644\u0628\u064a\u0626\u064a\u0629 \u0627\u0644\u0631\u0642\u0645\u064a\u0629 \u0627\u0644\u0645\u062e\u0635\u0635\u0629. \u0643\u0644 \u062d\u0644 \u064a\u064f\u0628\u0646\u0649 \u0644\u064a\u0643\u0648\u0646 \u0623\u0635\u0644\u0627\u064b \u0645\u062a\u0645\u064a\u0632\u0627\u064b\u2014\u064a\u062d\u0648\u0644 \u0623\u0641\u0643\u0627\u0631\u0643 \u0627\u0644\u062e\u0627\u0645 \u0625\u0644\u0649 \u062a\u062c\u0627\u0631\u0628 \u0631\u0642\u0645\u064a\u0629 \u0645\u0624\u062b\u0631\u0629\u060c \u0622\u0645\u0646\u0629\u060c \u0648\u0639\u0627\u0644\u0645\u064a\u0629 \u0627\u0644\u0645\u0633\u062a\u0648\u0649.<\/span>\n          <\/span>\n        <\/p>\n      <\/div>\n\n      <div class=\"kn-text-block\">\n        <p>\n          <span class=\"lang-wrapper\">\n            <span class=\"lang-en\">Where others see code, we see legacy. From immersive web environments to robust app infrastructures, every project is crafted with precision, security, and a relentless focus on the future. We don&#8217;t just build platforms; we build your digital dominance.<\/span>\n            <span class=\"lang-ar\">\u062d\u064a\u0646\u0645\u0627 \u064a\u0631\u0649 \u0627\u0644\u0622\u062e\u0631\u0648\u0646 \u0645\u062c\u0631\u062f \u0623\u0643\u0648\u0627\u062f\u060c \u0646\u062d\u0646 \u0646\u0631\u0649 \u0625\u0631\u062b\u0627\u064b. \u0645\u0646 \u0628\u064a\u0626\u0627\u062a \u0627\u0644\u0648\u064a\u0628 \u0627\u0644\u063a\u0627\u0645\u0631\u0629 \u0625\u0644\u0649 \u0627\u0644\u0628\u0646\u0649 \u0627\u0644\u062a\u062d\u062a\u064a\u0629 \u0644\u0644\u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0627\u0644\u0642\u0648\u064a\u0629\u060c \u0643\u0644 \u0645\u0634\u0631\u0648\u0639 \u064a\u064f\u0635\u0627\u063a \u0628\u062f\u0642\u0629\u060c \u0648\u0623\u0645\u0627\u0646\u060c \u0648\u062a\u0631\u0643\u064a\u0632 \u0644\u0627 \u0647\u0648\u0627\u062f\u0629 \u0641\u064a\u0647 \u0639\u0644\u0649 \u0627\u0644\u0645\u0633\u062a\u0642\u0628\u0644. \u0646\u062d\u0646 \u0644\u0627 \u0646\u0628\u0646\u064a \u0645\u0646\u0635\u0627\u062a \u0641\u062d\u0633\u0628\u061b \u0628\u0644 \u0646\u0628\u0646\u064a \u0647\u064a\u0645\u0646\u062a\u0643 \u0627\u0644\u0631\u0642\u0645\u064a\u0629.<\/span>\n          <\/span>\n        <\/p>\n      <\/div>\n\n    <\/div>\n\n    <div class=\"kn-identity-footer\">\n      <div class=\"kn-golden-footer\">\n        <span class=\"lang-wrapper\">\n          <span class=\"lang-en\">One Nation | One Platform | One Solution<\/span>\n          <span class=\"lang-ar\">\u0648\u0637\u0646 \u0648\u0627\u062d\u062f | \u0645\u0646\u0635\u0629 \u0648\u0627\u062d\u062f\u0629 | \u062d\u0644 \u0648\u0627\u062d\u062f<\/span>\n        <\/span>\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n  \/\/ --- PART 1: SCROLL REVEAL (Existing Logic) ---\n  const section = document.getElementById(\"identitySection\");\n  const observer = new IntersectionObserver((entries) => {\n    entries.forEach((entry) => {\n      if (entry.isIntersecting) {\n        entry.target.classList.add(\"reveal-active\");\n        \/\/ Fade in canvas once section is visible\n        section.classList.add(\"canvas-ready\");\n        observer.unobserve(entry.target);\n      }\n    });\n  }, { threshold: 0.2 });\n  observer.observe(section);\n\n  \/\/ --- PART 2: INTERACTIVE NETWORK (Coding Prowess) ---\n  const canvas = document.getElementById('kn-network-canvas');\n  const ctx = canvas.getContext('2d');\n  let w, h, particles;\n  let mouse = { x: null, y: null, radius: 150 }; \/\/ Radius of interaction\n\n  \/\/ Configuration for premium feel\n  const particleConfig = {\n    count: window.innerWidth < 768 ? 40 : 80, \/\/ Fewer on mobile\n    color: 'rgba(212, 175, 55, 0.6)', \/\/ Gold\n    connectColor: 'rgba(212, 175, 55, 0.15)', \/\/ Faint Gold lines\n    activeColor: 'rgba(0, 210, 255, 0.4)', \/\/ Cyan when active\n    speed: 0.3,\n    sizeBase: 1.5,\n    connectDistance: 120\n  };\n\n  class Particle {\n    constructor() {\n      this.x = Math.random() * w;\n      this.y = Math.random() * h;\n      this.vx = (Math.random() - 0.5) * particleConfig.speed;\n      this.vy = (Math.random() - 0.5) * particleConfig.speed;\n      this.size = Math.random() * particleConfig.sizeBase + 1;\n    }\n\n    update() {\n      \/\/ Move\n      this.x += this.vx;\n      this.y += this.vy;\n\n      \/\/ Bounce off edges\n      if (this.x < 0 || this.x > w) this.vx *= -1;\n      if (this.y < 0 || this.y > h) this.vy *= -1;\n\n      \/\/ Mouse attraction physics\n      if (mouse.x != null) {\n        let dx = mouse.x - this.x;\n        let dy = mouse.y - this.y;\n        let distance = Math.sqrt(dx * dx + dy * dy);\n        if (distance < mouse.radius) {\n            \/\/ Gentle pull towards mouse\n            this.x += dx * 0.02;\n            this.y += dy * 0.02;\n        }\n      }\n    }\n\n    draw() {\n      ctx.fillStyle = particleConfig.color;\n      ctx.beginPath();\n      ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);\n      ctx.fill();\n    }\n  }\n\n  function init() {\n    w = canvas.width = section.offsetWidth;\n    h = canvas.height = section.offsetHeight;\n    particles = [];\n    for (let i = 0; i < particleConfig.count; i++) {\n      particles.push(new Particle());\n    }\n  }\n\n  function animate() {\n    ctx.clearRect(0, 0, w, h);\n    \n    \/\/ Update and draw particles\n    particles.forEach(p => {\n      p.update();\n      p.draw();\n    });\n\n    \/\/ Draw Connections\n    connectParticles();\n    requestAnimationFrame(animate);\n  }\n\n  function connectParticles() {\n    for (let a = 0; a < particles.length; a++) {\n      for (let b = a + 1; b < particles.length; b++) {\n        let dx = particles[a].x - particles[b].x;\n        let dy = particles[a].y - particles[b].y;\n        let distance = Math.sqrt(dx * dx + dy * dy);\n\n        if (distance < particleConfig.connectDistance) {\n          \/\/ Calculate opacity based on distance\n          let opacity = 1 - (distance \/ particleConfig.connectDistance);\n          \n          \/\/ Check if near mouse for color change (The \"Active\" state)\n          let mouseDx = mouse.x - particles[a].x;\n          let mouseDy = mouse.y - particles[a].y;\n          let mouseDist = Math.sqrt(mouseDx*mouseDx + mouseDy*mouseDy);\n          \n          ctx.strokeStyle = (mouseDist < mouse.radius) ? particleConfig.activeColor : particleConfig.connectColor;\n          ctx.lineWidth = 1;\n          ctx.globalAlpha = opacity;\n          ctx.beginPath();\n          ctx.moveTo(particles[a].x, particles[a].y);\n          ctx.lineTo(particles[b].x, particles[b].y);\n          ctx.stroke();\n          ctx.globalAlpha = 1;\n        }\n      }\n    }\n  }\n\n  \/\/ Event Listeners used to track mouse over the specific section\n  section.addEventListener('mousemove', (e) => {\n    const rect = section.getBoundingClientRect();\n    mouse.x = e.clientX - rect.left;\n    mouse.y = e.clientY - rect.top;\n  });\n\n  section.addEventListener('mouseleave', () => {\n    mouse.x = null;\n    mouse.y = null;\n  });\n\n  window.addEventListener('resize', init);\n\n  \/\/ Start the engine\n  init();\n  animate();\n});\n<\/script>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center\"><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-ast-global-color-1-color\">What Services do we Offer?<\/mark><\/h2>\n\n\n\n\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cinzel:wght@700&#038;family=Tajawal:wght@700&#038;display=swap\" rel=\"stylesheet\">\n\n<style>\n\/* --- 1. CORE LAYOUT --- *\/\n#knCrownGate {\n    position: relative; \n    width: 100%; \n    height: 100vh; \n    \n    \/* HEIGHT INCREASE: Added ~2cm (approx 80px) to the safety minimum *\/\n    min-height: 750px;\n    \n    background-color: #000; \n    overflow: hidden;\n    display: flex; \n    justify-content: center; \n    align-items: center;\n    perspective: 1500px; \n    z-index: 20; \n    cursor: pointer;\n    \/* Safety Padding for the dome *\/\n    padding-top: 40px; \n    padding-bottom: 20px;\n    box-sizing: border-box;\n}\n\n\/* --- 2. LIGHTING & ATMOSPHERE --- *\/\n.kn-cr-glow {\n    position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n    background: radial-gradient(circle at center, rgba(255, 215, 0, 0.2) 0%, #000 70%);\n    opacity: 0; transform: scale(0.5); z-index: 0;\n    transition: opacity 1s, transform 2.5s cubic-bezier(0.2, 0.8, 0.2, 1);\n}\n.kn-cr-flash {\n    position: absolute; inset: 0; background: #fff; z-index: 100;\n    opacity: 0; pointer-events: none; transition: opacity 1.5s ease 1.5s;\n}\n\n\/* OPEN STATES *\/\n.kn-gate-open .kn-cr-glow { opacity: 1; transform: scale(3); }\n.kn-gate-open .kn-cr-flash { opacity: 1; }\n\n\n\/* --- 3. THE 3D DOOR CONTAINER --- *\/\n.kn-cr-wrapper {\n    position: relative; z-index: 10;\n    display: flex; justify-content: center; align-items: center;\n    transform-style: preserve-3d;\n    transition: transform 0.1s linear;\n    \n    \/* Fill the available height *\/\n    height: 100%; \n    width: auto;\n    aspect-ratio: 1\/1; \n    max-width: 1400px;\n}\n\n\/* MOBILE OVERRIDE *\/\n@media (max-width: 768px) {\n    .kn-cr-wrapper {\n        width: 100%; height: 100%; aspect-ratio: auto;\n    }\n}\n\n\n\/* --- 4. THE SLABS --- *\/\n.kn-cr-slab {\n    position: relative; width: 50%; height: 100%;\n    overflow: hidden; \n    transform-style: preserve-3d;\n    transition: transform 3.5s cubic-bezier(0.5, 0, 0.1, 1);\n    filter: drop-shadow(0 0 40px rgba(0,0,0,0.9));\n}\n\n\/* THE IMAGE (Bulletproof Logic) *\/\n.kn-cr-img {\n    position: absolute; top: 0; height: 100%; width: 200%; \n    max-width: none; \n    object-fit: cover; \n    \n    \/* CRITICAL: Lock to TOP to save the Dome *\/\n    object-position: center top; \n    \n    pointer-events: none;\n}\n\n\n\/* --- LEFT DOOR --- *\/\n.kn-cr-left { transform-origin: left center; }\n.kn-cr-left .kn-cr-img { left: 0; } \n\n\/* --- RIGHT DOOR --- *\/\n.kn-cr-right { transform-origin: right center; }\n.kn-cr-right .kn-cr-img { right: 0; }\n\n\n\/* --- ANIMATION STATES --- *\/\n\/* Hover (Desktop) *\/\n@media (min-width: 769px) {\n    #knCrownGate:hover .kn-cr-left { transform: rotateY(2deg); }\n    #knCrownGate:hover .kn-cr-right { transform: rotateY(-2deg); }\n}\n\n\/* OPEN *\/\n.kn-gate-open .kn-cr-left { transform: rotateY(110deg) !important; }\n.kn-gate-open .kn-cr-right { transform: rotateY(-110deg) !important; }\n\n\n\/* --- 5. UI TEXT & DUST --- *\/\n.kn-cr-ui {\n    position: absolute; bottom: 5%; width: 100%; text-align: center; z-index: 50;\n    pointer-events: none; transition: 0.5s;\n}\n.kn-gate-open .kn-cr-ui { opacity: 0; transform: translateY(20px); }\n\n.kn-cr-text {\n    font-family: 'Cinzel', serif; color: rgba(255,255,255,0.9);\n    font-size: 1.2rem; letter-spacing: 5px; text-transform: uppercase;\n    text-shadow: 0 0 30px #FFD700;\n    animation: goldPulse 3s infinite;\n}\n@keyframes goldPulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; text-shadow: 0 0 50px #FFD700; } }\n\n#kn-cr-dust {\n    position: absolute; inset: 0; pointer-events: none; z-index: 15; mix-blend-mode: screen;\n}\n<\/style>\n\n<section id=\"knCrownGate\">\n    \n    <div class=\"kn-cr-glow\"><\/div>\n    <div class=\"kn-cr-flash\"><\/div>\n    <canvas id=\"kn-cr-dust\"><\/canvas>\n\n    <div class=\"kn-cr-wrapper\" id=\"knCrWrapper\">\n        \n        <div class=\"kn-cr-slab kn-cr-left\">\n            <img decoding=\"async\" src=\"https:\/\/kuwaitnext.com\/wp-content\/uploads\/2026\/02\/ChatGPT-Image-Feb-4-2026-05_59_53-AM.png\" class=\"kn-cr-img\" alt=\"Gate Left\">\n        <\/div>\n\n        <div class=\"kn-cr-slab kn-cr-right\">\n            <img decoding=\"async\" src=\"https:\/\/kuwaitnext.com\/wp-content\/uploads\/2026\/02\/ChatGPT-Image-Feb-4-2026-05_59_53-AM.png\" class=\"kn-cr-img\" alt=\"Gate Right\">\n        <\/div>\n\n    <\/div>\n\n    <div class=\"kn-cr-ui\">\n        <div class=\"kn-cr-text\">Tap to Enter<\/div>\n    <\/div>\n\n<\/section>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n    \n    const section = document.getElementById('knCrownGate');\n    const wrapper = document.getElementById('knCrWrapper');\n    const canvas = document.getElementById('kn-cr-dust');\n    \n    \/\/ --- 1. DUST PHYSICS ---\n    if(canvas) {\n        const ctx = canvas.getContext('2d');\n        let w, h, particles = [];\n        let isOpening = false;\n\n        function initDust() {\n            w = canvas.width = section.offsetWidth;\n            h = canvas.height = section.offsetHeight;\n            particles = [];\n            for(let i=0; i<60; i++) {\n                particles.push({\n                    x: Math.random() * w, y: Math.random() * h,\n                    size: Math.random() * 2 + 0.5,\n                    vx: (Math.random() - 0.5) * 0.2, vy: (Math.random() - 0.5) * 0.2,\n                    alpha: Math.random() * 0.6 + 0.2\n                });\n            }\n        }\n\n        function drawDust() {\n            ctx.clearRect(0, 0, w, h);\n            ctx.fillStyle = '#FFD700';\n            \n            particles.forEach(p => {\n                if(isOpening) {\n                    const dx = p.x - w\/2; const dy = p.y - h\/2;\n                    p.x += dx * 0.05; p.y += dy * 0.05; p.alpha -= 0.01;\n                } else {\n                    p.x += p.vx; p.y += p.vy;\n                }\n                \n                if(p.x < 0) p.x = w; if(p.x > w) p.x = 0;\n                if(p.y < 0) p.y = h; if(p.y > h) p.y = 0;\n                \n                if(p.alpha > 0) {\n                    ctx.globalAlpha = p.alpha;\n                    ctx.beginPath();\n                    ctx.arc(p.x, p.y, p.size, 0, Math.PI*2);\n                    ctx.fill();\n                }\n            });\n            requestAnimationFrame(drawDust);\n        }\n        initDust();\n        drawDust();\n        window.addEventListener('resize', initDust);\n        section.addEventListener('click', () => isOpening = true);\n    }\n\n    \/\/ --- 2. PARALLAX (Desktop) ---\n    section.addEventListener('mousemove', (e) => {\n        if(section.classList.contains('kn-gate-open')) return;\n        if(window.innerWidth <= 768) return; \n        const x = (e.clientX \/ window.innerWidth - 0.5) * 10; \n        const y = (e.clientY \/ window.innerHeight - 0.5) * 5;\n        wrapper.style.transform = `rotateY(${x}deg) rotateX(${-y}deg)`;\n    });\n    section.addEventListener('mouseleave', () => {\n        wrapper.style.transform = `rotateY(0deg) rotateX(0deg)`;\n    });\n\n    \/\/ --- 3. OPEN ---\n    section.addEventListener('click', (e) => {\n        e.preventDefault();\n        section.classList.add('kn-gate-open');\n        wrapper.style.transform = `rotateY(0deg) rotateX(0deg) scale(1.05)`;\n        if(navigator.vibrate) navigator.vibrate([30, 50, 80]);\n        setTimeout(() => {\n            window.location.href = 'https:\/\/kuwaitnext.com\/services\/';\n        }, 3000); \n    });\n\n});\n<\/script>\n\n\n\n<style>\n    \/* --- 1. CORE VARIABLES --- *\/\n    :root {\n        --flux-bg: #000000;\n        --flux-gold: #D4AF37;\n        --flux-blue: #4F91CD; \/* Tech Blue for Armor\/Mission *\/\n        --flux-glass: rgba(5, 5, 5, 0.3);\n        --flux-ease: cubic-bezier(0.215, 0.61, 0.355, 1);\n    }\n\n    #kn-section-flux {\n        position: relative;\n        width: 100%;\n        height: 100vh;\n        background-color: var(--flux-bg);\n        overflow: hidden;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        z-index: 20;\n        cursor: crosshair; \/* Precision feel *\/\n    }\n\n    \/* --- 2. THE STORM CANVAS --- *\/\n    #kn-flux-canvas {\n        position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n        z-index: 0; opacity: 0; transition: opacity 1.5s ease;\n    }\n    .kn-view-active #kn-flux-canvas { opacity: 1; }\n\n    \/* Cinematic Vignette *\/\n    .kn-flux-vignette {\n        position: absolute; inset: 0;\n        background: radial-gradient(circle at 50% 50%, transparent 20%, #000 100%);\n        pointer-events: none; z-index: 1;\n    }\n\n\n    \/* --- 3. CONTENT LAYOUT --- *\/\n    .kn-flux-container {\n        position: relative; z-index: 10;\n        width: 100%; max-width: 1600px;\n        height: 100%;\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        padding: 0 5%;\n    }\n\n    .kn-flux-col {\n        display: flex; flex-direction: column; justify-content: center;\n        padding: 60px;\n        transition: transform 0.5s var(--flux-ease), opacity 0.5s ease;\n        opacity: 0.7; \/* Dimmed by default *\/\n        backdrop-filter: blur(0px);\n    }\n\n    \/* Hover Interaction: Focus Mode *\/\n    .kn-flux-col:hover {\n        opacity: 1;\n        transform: scale(1.02);\n        z-index: 20;\n        background: radial-gradient(circle, rgba(20,20,20,0.8) 0%, transparent 70%);\n        backdrop-filter: blur(5px); \/* Blur background particles *\/\n    }\n\n\n    \/* --- 4. TYPOGRAPHY & EFFECTS --- *\/\n    \n    \/* LABELS *\/\n    .kn-flux-label {\n        font-family: 'Share Tech Mono', monospace;\n        font-size: 0.9rem; letter-spacing: 4px;\n        text-transform: uppercase; margin-bottom: 20px;\n        display: flex; align-items: center; gap: 10px;\n    }\n    .kn-label-gold { color: var(--flux-gold); }\n    .kn-label-blue { color: var(--flux-blue); }\n    \n    .kn-flux-label::before {\n        content: ''; width: 20px; height: 2px; background: currentColor;\n        box-shadow: 0 0 10px currentColor;\n    }\n\n    \/* HEADINGS (SCRAMBLE TARGETS) *\/\n    .kn-flux-heading {\n        font-family: 'Cinzel', serif; \n        font-size: clamp(3rem, 5vw, 5.5rem);\n        line-height: 1; margin: 0 0 30px 0; color: #fff;\n        position: relative;\n    }\n    \n    \/* Liquid Fill Animation *\/\n    .kn-flux-heading span {\n        background: linear-gradient(90deg, #fff 0%, #fff 50%, var(--flux-gold) 51%, var(--flux-gold) 100%);\n        background-size: 200% 100%;\n        background-position: 0% 0%;\n        -webkit-background-clip: text; -webkit-text-fill-color: transparent;\n        transition: background-position 0.5s ease;\n    }\n    .kn-flux-col:hover .kn-flux-heading span { background-position: 100% 0%; }\n    \n    \/* Mission gets Blue Tint *\/\n    #knColMission .kn-flux-heading span {\n        background: linear-gradient(90deg, #fff 0%, #fff 50%, var(--flux-blue) 51%, var(--flux-blue) 100%);\n        background-size: 200% 100%;\n        -webkit-background-clip: text; -webkit-text-fill-color: transparent;\n    }\n\n\n    \/* PARAGRAPHS *\/\n    .kn-flux-p {\n        font-family: 'Montserrat', sans-serif; font-size: 1.15rem; line-height: 1.8;\n        color: #aaa; max-width: 600px;\n        transform: translateY(20px); opacity: 0;\n        transition: all 0.5s ease;\n    }\n    \/* Reveal on Hover or Scroll *\/\n    .kn-view-active .kn-flux-p { opacity: 0.8; transform: translateY(0); }\n    .kn-flux-col:hover .kn-flux-p { opacity: 1; color: #fff; text-shadow: 0 0 20px rgba(0,0,0,1); }\n\n\n    \/* --- LANGUAGE CONTROL --- *\/\n    .kn-lang-en { display: block; } .kn-lang-ar { display: none; }\n    \n    body.rtl .kn-lang-en, [dir=\"rtl\"] .kn-lang-en, html[lang=\"ar\"] .kn-lang-en { display: none !important; }\n    body.rtl .kn-lang-ar, [dir=\"rtl\"] .kn-lang-ar, html[lang=\"ar\"] .kn-lang-ar { display: block !important; }\n\n    \/* RTL Layout *\/\n    body.rtl .kn-flux-container, [dir=\"rtl\"] .kn-flux-container { direction: rtl; }\n    \n    \/* Arabic Fonts *\/\n    body.rtl .kn-flux-label, [dir=\"rtl\"] .kn-flux-label { font-family: 'Tajawal', sans-serif; font-weight: 700; letter-spacing: 0; }\n    body.rtl .kn-flux-heading, [dir=\"rtl\"] .kn-flux-heading { font-family: 'Rakkas', serif; font-size: 4.5rem; }\n    body.rtl .kn-flux-p, [dir=\"rtl\"] .kn-flux-p { font-family: 'Tajawal', sans-serif; font-size: 1.3rem; }\n\n\n    \/* --- RESPONSIVE --- *\/\n    @media (max-width: 1024px) {\n        .kn-flux-container { grid-template-columns: 1fr; padding: 100px 5%; text-align: center; }\n        .kn-flux-col { align-items: center; padding: 40px 20px; }\n        .kn-flux-label { justify-content: center; }\n        .kn-flux-heading { font-size: 3rem; }\n    }\n<\/style>\n\n<section id=\"kn-section-flux\">\n    \n    <canvas id=\"kn-flux-canvas\"><\/canvas>\n    <div class=\"kn-flux-vignette\"><\/div>\n\n    <div class=\"kn-flux-container\">\n\n        <div class=\"kn-flux-col\" id=\"knColVision\">\n            <div class=\"kn-lang-en\">\n                <span class=\"kn-flux-label kn-label-gold\">\/\/\/ Our Vision<\/span>\n                <h2 class=\"kn-flux-heading\"><span class=\"kn-scramble-text\">National Destiny<\/span><\/h2>\n                <p class=\"kn-flux-p\">To stand as the technological heartbeat of Kuwait Vision 2035. We envision a sovereign digital future where our nation does not just consume innovation, but commands it.<\/p>\n            <\/div>\n            <div class=\"kn-lang-ar\">\n                <span class=\"kn-flux-label kn-label-gold\">\/\/\/ \u0631\u0624\u064a\u062a\u0646\u0627<\/span>\n                <h2 class=\"kn-flux-heading\"><span>\u0645\u0635\u064a\u0631 \u0648\u0637\u0646\u064a<\/span><\/h2>\n                <p class=\"kn-flux-p\">\u0644\u0646\u0643\u0648\u0646 \u0627\u0644\u0646\u0628\u0636 \u0627\u0644\u062a\u0643\u0646\u0648\u0644\u0648\u062c\u064a \u0644\u0631\u0624\u064a\u0629 \u0627\u0644\u0643\u0648\u064a\u062a 2035. \u0646\u062d\u0646 \u0646\u0637\u0645\u062d \u0644\u0645\u0633\u062a\u0642\u0628\u0644 \u0631\u0642\u0645\u064a \u0633\u064a\u0627\u062f\u064a\u060c \u062d\u064a\u062b \u0644\u0627 \u062a\u0643\u062a\u0641\u064a \u0623\u0645\u062a\u0646\u0627 \u0628\u0627\u0633\u062a\u0647\u0644\u0627\u0643 \u0627\u0644\u0627\u0628\u062a\u0643\u0627\u0631\u060c \u0628\u0644 \u062a\u0642\u0648\u062f\u0647 \u0648\u062a\u0623\u0645\u0631 \u0628\u0647.<\/p>\n            <\/div>\n        <\/div>\n\n        <div class=\"kn-flux-col\" id=\"knColMission\">\n            <div class=\"kn-lang-en\">\n                <span class=\"kn-flux-label kn-label-blue\">\/\/\/ Our Mission<\/span>\n                <h2 class=\"kn-flux-heading\"><span class=\"kn-scramble-text\">Digital Armor<\/span><\/h2>\n                <p class=\"kn-flux-p\">To armor Kuwait\u2019s enterprises with unshakeable digital infrastructure. We turn complexity into clarity, ensuring that every line of code we write contributes to the strength and security of our homeland.<\/p>\n            <\/div>\n            <div class=\"kn-lang-ar\">\n                <span class=\"kn-flux-label kn-label-blue\">\/\/\/ \u0645\u0647\u0645\u062a\u0646\u0627<\/span>\n                <h2 class=\"kn-flux-heading\"><span>\u0627\u0644\u062f\u0631\u0639 \u0627\u0644\u0631\u0642\u0645\u064a<\/span><\/h2>\n                <p class=\"kn-flux-p\">\u062a\u062f\u0631\u064a\u0639 \u0645\u0624\u0633\u0633\u0627\u062a \u0627\u0644\u0643\u0648\u064a\u062a \u0628\u0628\u0646\u064a\u0629 \u062a\u062d\u062a\u064a\u0629 \u0631\u0642\u0645\u064a\u0629 \u0644\u0627 \u062a\u062a\u0632\u0639\u0632\u0639. \u0646\u062d\u0646 \u0646\u062d\u0648\u0644 \u0627\u0644\u062a\u0639\u0642\u064a\u062f \u0625\u0644\u0649 \u0648\u0636\u0648\u062d\u060c \u0644\u0636\u0645\u0627\u0646 \u0623\u0646 \u0643\u0644 \u0633\u0637\u0631 \u0628\u0631\u0645\u062c\u064a \u0646\u0643\u062a\u0628\u0647 \u064a\u0633\u0627\u0647\u0645 \u0641\u064a \u0642\u0648\u0629 \u0648\u0623\u0645\u0646 \u0648\u0637\u0646\u0646\u0627.<\/p>\n            <\/div>\n        <\/div>\n\n    <\/div>\n<\/section>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n    \n    const section = document.getElementById('kn-section-flux');\n    const canvas = document.getElementById('kn-flux-canvas');\n    const ctx = canvas.getContext('2d');\n    \n    \/\/ --- 1. REVEAL TRIGGER ---\n    const observer = new IntersectionObserver((entries) => {\n        entries.forEach(entry => {\n            if(entry.isIntersecting) {\n                section.classList.add('kn-view-active');\n            }\n        });\n    }, { threshold: 0.2 });\n    observer.observe(section);\n\n\n    \/\/ --- 2. TEXT SCRAMBLER (DECRYPT EFFECT) ---\n    const chars = \"ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789@#$%\";\n    \n    document.querySelectorAll('.kn-flux-col').forEach(col => {\n        const target = col.querySelector('.kn-lang-en .kn-scramble-text'); \/\/ Only scramble English\n        if(!target) return;\n        \n        const originalText = target.innerText;\n        let interval = null;\n\n        col.addEventListener('mouseenter', () => {\n            let iteration = 0;\n            clearInterval(interval);\n            \n            interval = setInterval(() => {\n                target.innerText = originalText\n                    .split(\"\")\n                    .map((letter, index) => {\n                        if(index < iteration) return originalText[index];\n                        return chars[Math.floor(Math.random() * chars.length)];\n                    })\n                    .join(\"\");\n                \n                if(iteration >= originalText.length) clearInterval(interval);\n                iteration += 1\/3;\n            }, 30);\n        });\n        \n        col.addEventListener('mouseleave', () => {\n            clearInterval(interval);\n            target.innerText = originalText;\n        });\n    });\n\n\n    \/\/ --- 3. THE STORM PHYSICS ENGINE ---\n    let width, height;\n    let particles = [];\n    const count = 400; \/\/ High particle count for \"Storm\" feel\n    let mouse = { x: -1000, y: -1000 };\n\n    class StormParticle {\n        constructor() {\n            this.init(true);\n        }\n\n        init(randomY = false) {\n            this.x = Math.random() * width;\n            this.y = randomY ? Math.random() * height : (Math.random() > 0.5 ? -10 : height + 10);\n            \n            \/\/ Determine Identity based on screen side\n            \/\/ Left = Gold (Rising)\n            \/\/ Right = Blue (Falling)\n            this.isGold = this.x < width \/ 2;\n            \n            this.size = Math.random() * 2 + 0.5;\n            this.speedY = Math.random() * 1.5 + 0.5;\n            this.speedX = (Math.random() - 0.5) * 0.5;\n            \n            \/\/ Velocity vectors\n            this.vx = this.speedX;\n            this.vy = this.isGold ? -this.speedY : this.speedY; \/\/ Up or Down\n            \n            this.life = 1;\n            this.decay = Math.random() * 0.005 + 0.002;\n        }\n\n        update() {\n            \/\/ Basic Movement\n            this.x += this.vx;\n            this.y += this.vy;\n            \n            \/\/ MOUSE FORCE FIELD (Repulsion)\n            let dx = mouse.x - this.x;\n            let dy = mouse.y - this.y;\n            let dist = Math.sqrt(dx*dx + dy*dy);\n            let forceRadius = 200;\n            \n            if(dist < forceRadius) {\n                let force = (forceRadius - dist) \/ forceRadius;\n                let angle = Math.atan2(dy, dx);\n                \n                \/\/ Push away violently\n                this.vx -= Math.cos(angle) * force * 0.5;\n                this.vy -= Math.sin(angle) * force * 0.5;\n            }\n\n            \/\/ Friction (Return to normal speed)\n            let targetVy = this.isGold ? -this.speedY : this.speedY;\n            this.vx += (this.speedX - this.vx) * 0.05;\n            this.vy += (targetVy - this.vy) * 0.05;\n\n            \/\/ Reset bounds\n            if(this.y < -50 || this.y > height + 50 || this.x < -50 || this.x > width + 50) {\n                this.init();\n            }\n        }\n\n        draw() {\n            ctx.beginPath();\n            \n            if(this.isGold) {\n                ctx.fillStyle = `rgba(212, 175, 55, ${this.life})`;\n                ctx.shadowColor = '#D4AF37';\n            } else {\n                ctx.fillStyle = `rgba(79, 145, 205, ${this.life})`; \/\/ Blue\n                ctx.shadowColor = '#4F91CD';\n            }\n            \n            \/\/ Draw spark\n            ctx.shadowBlur = 10;\n            ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);\n            ctx.fill();\n            ctx.shadowBlur = 0; \/\/ Reset for performance\n            \n            \/\/ Connecting Lines (Constellation Effect)\n            \/\/ Only connect if close to mouse for \"Interactive\" feel\n            let dx = mouse.x - this.x;\n            let dy = mouse.y - this.y;\n            let dist = Math.sqrt(dx*dx + dy*dy);\n            \n            if(dist < 150) {\n                \/\/ Find a neighbor\n                \/\/ (Simplified loop for performance)\n            }\n        }\n    }\n\n    function init() {\n        width = section.offsetWidth;\n        height = section.offsetHeight;\n        canvas.width = width;\n        canvas.height = height;\n        \n        particles = [];\n        for(let i=0; i<count; i++) particles.push(new StormParticle());\n    }\n\n    function animate() {\n        ctx.clearRect(0, 0, width, height);\n        \n        \/\/ Draw Mouse Glow\n        if(mouse.x > 0) {\n            let grad = ctx.createRadialGradient(mouse.x, mouse.y, 0, mouse.x, mouse.y, 300);\n            grad.addColorStop(0, 'rgba(255,255,255,0.05)');\n            grad.addColorStop(1, 'transparent');\n            ctx.fillStyle = grad;\n            ctx.fillRect(0, 0, width, height);\n        }\n\n        particles.forEach(p => {\n            p.update();\n            p.draw();\n        });\n        \n        \/\/ Optional: Draw connections between particles near mouse\n        ctx.strokeStyle = 'rgba(255,255,255,0.1)';\n        ctx.lineWidth = 0.5;\n        ctx.beginPath();\n        for(let i=0; i<particles.length; i++) {\n            let p = particles[i];\n            let dx = mouse.x - p.x;\n            let dy = mouse.y - p.y;\n            let dist = Math.sqrt(dx*dx + dy*dy);\n            \n            if(dist < 120) {\n                ctx.moveTo(p.x, p.y);\n                ctx.lineTo(mouse.x, mouse.y);\n            }\n        }\n        ctx.stroke();\n\n        requestAnimationFrame(animate);\n    }\n\n    \/\/ --- EVENTS ---\n    section.addEventListener('mousemove', e => {\n        const rect = section.getBoundingClientRect();\n        mouse.x = e.clientX - rect.left;\n        mouse.y = e.clientY - rect.top;\n    });\n    \n    section.addEventListener('mouseleave', () => {\n        mouse.x = -1000; mouse.y = -1000;\n    });\n\n    window.addEventListener('resize', init);\n    \n    init();\n    animate();\n\n});\n<\/script>\n\n\n\n\n\n<style>\n\/* =========================================\n   NEW ADDITIONS: ARABIC & HOVER LOGIC\n   ========================================= *\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Aref+Ruqaa:wght@400;700&display=swap');\n\n\/* The container that holds both languages stacked *\/\n.lang-wrapper {\n  display: grid;\n  grid-template-areas: \"stack\";\n  width: 100%;\n  position: relative;\n  cursor: default;\n}\n\n\/* Common style for both languages *\/\n.lang-en, .lang-ar {\n  grid-area: stack;\n  transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);\n  display: block;\n  width: 100%;\n  backface-visibility: hidden;\n}\n\n\/* ENGLISH STATE (Default) *\/\n.lang-en {\n  opacity: 1;\n  transform: translateY(0) scale(1);\n  filter: blur(0);\n}\n\n\/* ARABIC STATE (Hidden by default) *\/\n.lang-ar {\n  opacity: 0;\n  transform: translateY(15px) scale(0.95);\n  filter: blur(6px);\n  \/* CURSIVE ARABIC FONT *\/\n  font-family: 'Aref Ruqaa', serif; \n  font-weight: 700; \n  font-size: 1.1em; \n  direction: rtl;\n  line-height: 1.6;\n}\n\n\/* HOVER EFFECT: TRIGGERED ON WRAPPER *\/\n.lang-wrapper:hover .lang-en {\n  opacity: 0;\n  transform: translateY(-15px) scale(0.95);\n  filter: blur(6px);\n}\n\n.lang-wrapper:hover .lang-ar {\n  opacity: 1;\n  transform: translateY(0) scale(1);\n  filter: blur(0);\n}\n\n\/* === GLOW EFFECT FOR ARABIC (HEADLINE) === *\/\n.kn-content h2 .lang-ar {\n  background: linear-gradient(90deg, #ffffff, #9fffe0, #ffffff);\n  background-size: 220%;\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  animation: titleGlow 6s ease infinite;\n  \n  \/* NEW EFFECT: NEON HALO BLOOM *\/\n  filter: drop-shadow(0 0 8px rgba(159, 255, 224, 0.6));\n}\n\n\/* === GLOW EFFECT FOR ARABIC (SIGNATURE) === *\/\n.kn-signature .lang-ar {\n  background: linear-gradient(90deg, #ffffff, #7fffd4, #ffffff);\n  background-size: 300%;\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  animation: shimmer 4.5s linear infinite;\n  \n  \/* NEW EFFECT: NEON HALO BLOOM *\/\n  filter: drop-shadow(0 0 5px rgba(127, 255, 212, 0.5));\n}\n\n\/* Alignment adjustments *\/\n.kn-box .lang-ar {\n  text-align: right;\n}\n.kn-content h2 .lang-ar,\n.kn-content p.intro .lang-ar,\n.kn-signature .lang-ar {\n  text-align: center;\n}\n\n\/* =========================================\n   ORIGINAL STYLES & FIXES\n   ========================================= *\/\n\n\/* ===== KUWAIT NEXT FLAG EXPERIENCE ===== *\/\n.kn-flag-experience {\n  position: relative;\n  padding: 140px 50px;\n  background: #000;\n  color: #fff;\n  overflow: hidden;\n  font-family: inherit;\n}\n\n\/* Flag background *\/\n.kn-flag-experience::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background-image: url(\"https:\/\/kuwaitnext.com\/wp-content\/uploads\/2026\/01\/ChatGPT-Image-Jan-14-2026-01_46_27-AM-1.webp\");\n  background-size: cover;\n  background-position: center;\n  opacity: 0.25;\n  filter: blur(1.5px);\n  animation: flagWave 22s ease-in-out infinite alternate;\n}\n\n\/* Dark overlay *\/\n.kn-flag-experience::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: radial-gradient(\n    circle at center,\n    rgba(0,0,0,0.3),\n    rgba(0,0,0,0.88)\n  );\n}\n\n\/* Subtle motion *\/\n@keyframes flagWave {\n  0% { transform: scale(1) translateX(0); }\n  100% { transform: scale(1.1) translateX(-30px); }\n}\n\n.kn-content {\n  position: relative;\n  z-index: 2;\n  max-width: 1200px;\n  margin: 0 auto;\n  \n  \/* NEW EFFECT: CINEMATIC ENTRANCE FADE IN *\/\n  animation: fadeUpEntry 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;\n  opacity: 0; \/* Starts invisible, animation makes it visible *\/\n  transform: translateY(30px);\n}\n\n\/* Keyframes for the entrance animation *\/\n@keyframes fadeUpEntry {\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n\/* HEADLINE CONTAINER *\/\n.kn-content h2 {\n  text-align: center;\n  font-size: clamp(38px, 4.5vw, 56px);\n  margin-bottom: 28px;\n  font-weight: 600;\n}\n\n\/* === FIXED: ENGLISH HEADLINE GLOW === *\/\n.kn-content h2 .lang-en {\n  background: linear-gradient(90deg, #ffffff, #9fffe0, #ffffff);\n  background-size: 220%;\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  animation: titleGlow 6s ease infinite;\n  \n  \/* NEW EFFECT: NEON HALO BLOOM *\/\n  filter: drop-shadow(0 0 8px rgba(159, 255, 224, 0.6));\n}\n\n@keyframes titleGlow {\n  0% { background-position: 0%; }\n  50% { background-position: 100%; }\n  100% { background-position: 0%; }\n}\n\n.kn-content p.intro {\n  text-align: center;\n  max-width: 900px;\n  margin: 0 auto 100px;\n  font-size: 20px;\n  line-height: 1.8;\n  opacity: 0.9;\n}\n\n\/* Grid *\/\n.kn-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));\n  gap: 42px;\n  position: relative;\n}\n\n\/* Soft animated sweep *\/\n.kn-grid::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(\n    120deg,\n    transparent,\n    rgba(0,255,200,0.08),\n    transparent\n  );\n  animation: sweep 8s linear infinite;\n  pointer-events: none;\n}\n\n@keyframes sweep {\n  0% { transform: translateX(-100%); }\n  100% { transform: translateX(100%); }\n}\n\n\/* Glass cards *\/\n.kn-box {\n  position: relative;\n  padding: 48px 36px;\n  border-radius: 24px;\n  background: linear-gradient(\n    145deg,\n    rgba(255,255,255,0.15),\n    rgba(255,255,255,0.04)\n  );\n  border: 1px solid rgba(255,255,255,0.22);\n  backdrop-filter: blur(14px);\n  box-shadow: 0 30px 70px rgba(0,0,0,0.75);\n  transition: all 0.45s ease;\n}\n\n\/* Glow streak *\/\n.kn-box::before {\n  content: \"\";\n  position: absolute;\n  inset: -1px;\n  border-radius: 24px;\n  background: linear-gradient(\n    120deg,\n    transparent,\n    rgba(0,255,200,0.4),\n    transparent\n  );\n  opacity: 0;\n  transition: opacity 0.4s ease;\n}\n\n.kn-box:hover::before {\n  opacity: 1;\n}\n\n.kn-box:hover {\n  transform: translateY(-16px) scale(1.02); \/* Added slight scale for better feel *\/\n  box-shadow:\n    0 55px 95px rgba(0,0,0,0.9),\n    0 0 50px rgba(0,255,200,0.3);\n}\n\n\/* HERO CARD \u2013 Kuwait Market *\/\n.kn-box.hero {\n  transform: scale(1.05);\n  border-color: rgba(0,255,200,0.6);\n  box-shadow:\n    0 60px 110px rgba(0,0,0,0.95),\n    0 0 65px rgba(0,255,200,0.45);\n    \n  \/* NEW EFFECT: THE HERO BREATH *\/\n  animation: heroBreath 4s ease-in-out infinite;\n}\n\n\/* Subtle breathing animation for the main card *\/\n@keyframes heroBreath {\n  0%, 100% { box-shadow: 0 60px 110px rgba(0,0,0,0.95), 0 0 65px rgba(0,255,200,0.45); }\n  50% { box-shadow: 0 60px 110px rgba(0,0,0,0.95), 0 0 85px rgba(0,255,200,0.65); }\n}\n\n\/* Pause breathing on hover so it doesn't conflict with hover state *\/\n.kn-box.hero:hover {\n  animation: none;\n}\n\n.kn-box.hero h3 {\n  color: #9fffe0;\n}\n\n.kn-box h3 {\n  font-size: 22px;\n  margin-bottom: 18px;\n  font-weight: 500;\n}\n\n.kn-box p {\n  font-size: 16.5px;\n  line-height: 1.75;\n  opacity: 0.9;\n}\n\n\/* SIGNATURE CONTAINER *\/\n.kn-signature {\n  margin-top: 110px;\n  text-align: center;\n  font-size: 24px;\n  font-weight: 500;\n}\n\n\/* === FIXED: ENGLISH SIGNATURE GLOW === *\/\n.kn-signature .lang-en {\n  background: linear-gradient(\n    90deg,\n    #ffffff,\n    #7fffd4,\n    #ffffff\n  );\n  background-size: 300%;\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  animation: shimmer 4.5s linear infinite;\n  \n  \/* NEW EFFECT: NEON HALO BLOOM *\/\n  filter: drop-shadow(0 0 5px rgba(127, 255, 212, 0.5));\n}\n\n@keyframes shimmer {\n  0% { background-position: 0%; }\n  100% { background-position: 300%; }\n}\n\n\/* Mobile *\/\n@media (max-width: 768px) {\n  .kn-flag-experience {\n    padding: 90px 25px;\n  }\n  .kn-box.hero {\n    transform: none;\n    animation: none; \/* Disable breath on mobile to save battery *\/\n  }\n}\n<\/style>\n\n<section class=\"kn-flag-experience\">\n  <div class=\"kn-content\">\n\n    <h2>\n      <span class=\"lang-wrapper\">\n        <span class=\"lang-en\">The Kuwait Next Experience<\/span>\n        <span class=\"lang-ar\">\u062a\u062c\u0631\u0628\u0629 \u0643\u0648\u064a\u062a \u0646\u0643\u0633\u062a<\/span>\n      <\/span>\n    <\/h2>\n\n    <p class=\"intro\">\n      <span class=\"lang-wrapper\">\n        <span class=\"lang-en\">Built for Kuwait\u2019s evolving digital landscape, Kuwait Next delivers clarity, confidence, and technology designed to perform \u2014 today and tomorrow.<\/span>\n        <span class=\"lang-ar\">\u0635\u064f\u0645\u0645\u062a \u0644\u062a\u0648\u0627\u0643\u0628 \u0627\u0644\u0645\u0634\u0647\u062f \u0627\u0644\u0631\u0642\u0645\u064a \u0627\u0644\u0645\u062a\u0637\u0648\u0631 \u0641\u064a \u0627\u0644\u0643\u0648\u064a\u062a\u060c \u062a\u0642\u062f\u0645 \u0643\u0648\u064a\u062a \u0646\u0643\u0633\u062a \u0627\u0644\u0648\u0636\u0648\u062d \u0648\u0627\u0644\u062b\u0642\u0629\u060c \u0648\u062a\u0642\u0646\u064a\u0629 \u0645\u0635\u0645\u0645\u0629 \u0644\u0644\u0623\u062f\u0627\u0621 \u2014 \u0627\u0644\u064a\u0648\u0645 \u0648\u0641\u064a \u0627\u0644\u0645\u0633\u062a\u0642\u0628\u0644.<\/span>\n      <\/span>\n    <\/p>\n\n    <div class=\"kn-grid\">\n\n      <div class=\"kn-box\">\n        <h3>\n          <span class=\"lang-wrapper\">\n            <span class=\"lang-en\">Clear Direction from Day One<\/span>\n            <span class=\"lang-ar\">\u0631\u0624\u064a\u0629 \u0648\u0627\u0636\u062d\u0629 \u0645\u0646\u0630 \u0627\u0644\u064a\u0648\u0645 \u0627\u0644\u0623\u0648\u0644<\/span>\n          <\/span>\n        <\/h3>\n        <p>\n          <span class=\"lang-wrapper\">\n            <span class=\"lang-en\">We begin with understanding your objectives, defining the roadmap, and aligning expectations \u2014 so progress is deliberate and measurable.<\/span>\n            <span class=\"lang-ar\">\u0646\u0628\u062f\u0623 \u0628\u0641\u0647\u0645 \u0623\u0647\u062f\u0627\u0641\u0643\u060c \u0648\u062a\u062d\u062f\u064a\u062f \u062e\u0627\u0631\u0637\u0629 \u0627\u0644\u0637\u0631\u064a\u0642\u060c \u0648\u0645\u0648\u0627\u0621\u0645\u0629 \u0627\u0644\u062a\u0648\u0642\u0639\u0627\u062a \u2014 \u0644\u064a\u0643\u0648\u0646 \u0627\u0644\u062a\u0642\u062f\u0645 \u0645\u062f\u0631\u0648\u0633\u064b\u0627 \u0648\u0642\u0627\u0628\u0644\u0627\u064b \u0644\u0644\u0642\u064a\u0627\u0633.<\/span>\n          <\/span>\n        <\/p>\n      <\/div>\n\n      <div class=\"kn-box\">\n        <h3>\n          <span class=\"lang-wrapper\">\n             <span class=\"lang-en\">Solutions That Deliver Results<\/span>\n             <span class=\"lang-ar\">\u062d\u0644\u0648\u0644 \u062a\u062d\u0642\u0642 \u0627\u0644\u0646\u062a\u0627\u0626\u062c<\/span>\n          <\/span>\n        <\/h3>\n        <p>\n          <span class=\"lang-wrapper\">\n            <span class=\"lang-en\">Our work is designed to perform, convert, and scale \u2014 focused on outcomes, not just aesthetics.<\/span>\n            <span class=\"lang-ar\">\u062a\u0645 \u062a\u0635\u0645\u064a\u0645 \u0623\u0639\u0645\u0627\u0644\u0646\u0627 \u0644\u0644\u0623\u062f\u0627\u0621\u060c \u0627\u0644\u062a\u062d\u0648\u064a\u0644\u060c \u0648\u0627\u0644\u062a\u0648\u0633\u0639 \u2014 \u0645\u0639 \u0627\u0644\u062a\u0631\u0643\u064a\u0632 \u0639\u0644\u0649 \u0627\u0644\u0646\u062a\u0627\u0626\u062c \u0627\u0644\u0645\u0644\u0645\u0648\u0633\u0629\u060c \u0648\u0644\u064a\u0633 \u0627\u0644\u062c\u0645\u0627\u0644\u064a\u0627\u062a \u0641\u0642\u0637.<\/span>\n          <\/span>\n        <\/p>\n      <\/div>\n\n      <div class=\"kn-box\">\n        <h3>\n          <span class=\"lang-wrapper\">\n            <span class=\"lang-en\">Built for Growth &#038; Scale<\/span>\n            <span class=\"lang-ar\">\u0635\u064f\u0645\u0645\u062a \u0644\u0644\u0646\u0645\u0648 \u0648\u0627\u0644\u062a\u0648\u0633\u0639<\/span>\n          <\/span>\n        <\/h3>\n        <p>\n          <span class=\"lang-wrapper\">\n            <span class=\"lang-en\">Platforms engineered to evolve with your ambitions, adapting seamlessly as your digital needs expand.<\/span>\n            <span class=\"lang-ar\">\u0645\u0646\u0635\u0627\u062a \u0647\u0646\u062f\u0633\u064a\u0629 \u062a\u062a\u0637\u0648\u0631 \u0645\u0639 \u0637\u0645\u0648\u062d\u0627\u062a\u0643\u060c \u0648\u062a\u062a\u0643\u064a\u0641 \u0628\u0633\u0644\u0627\u0633\u0629 \u0645\u0639 \u062a\u0648\u0633\u0639 \u0627\u062d\u062a\u064a\u0627\u062c\u0627\u062a\u0643 \u0627\u0644\u0631\u0642\u0645\u064a\u0629.<\/span>\n          <\/span>\n        <\/p>\n      <\/div>\n\n      <div class=\"kn-box\">\n        <h3>\n          <span class=\"lang-wrapper\">\n            <span class=\"lang-en\">Support Beyond Launch<\/span>\n            <span class=\"lang-ar\">\u062f\u0639\u0645 \u0645\u0627 \u0628\u0639\u062f \u0627\u0644\u0625\u0637\u0644\u0627\u0642<\/span>\n          <\/span>\n        <\/h3>\n        <p>\n          <span class=\"lang-wrapper\">\n            <span class=\"lang-en\">Long-term reliability, continuity, and proactive support \u2014 because delivery is only the beginning.<\/span>\n            <span class=\"lang-ar\">\u0645\u0648\u062b\u0648\u0642\u064a\u0629 \u0637\u0648\u064a\u0644\u0629 \u0627\u0644\u0623\u0645\u062f\u060c \u0627\u0633\u062a\u0645\u0631\u0627\u0631\u064a\u0629\u060c \u0648\u062f\u0639\u0645 \u0627\u0633\u062a\u0628\u0627\u0642\u064a \u2014 \u0644\u0623\u0646 \u0627\u0644\u062a\u0633\u0644\u064a\u0645 \u0647\u0648 \u0645\u062c\u0631\u062f \u0627\u0644\u0628\u062f\u0627\u064a\u0629.<\/span>\n          <\/span>\n        <\/p>\n      <\/div>\n\n      <div class=\"kn-box\">\n        <h3>\n          <span class=\"lang-wrapper\">\n            <span class=\"lang-en\">Security You Can Trust<\/span>\n            <span class=\"lang-ar\">\u0623\u0645\u0627\u0646 \u064a\u0645\u0643\u0646\u0643 \u0627\u0644\u0648\u062b\u0648\u0642 \u0628\u0647<\/span>\n          <\/span>\n        <\/h3>\n        <p>\n          <span class=\"lang-wrapper\">\n            <span class=\"lang-en\">Stability, protection, and performance are embedded into every solution we deliver.<\/span>\n            <span class=\"lang-ar\">\u0627\u0644\u0627\u0633\u062a\u0642\u0631\u0627\u0631\u060c \u0627\u0644\u062d\u0645\u0627\u064a\u0629\u060c \u0648\u0627\u0644\u0623\u062f\u0627\u0621 \u0627\u0644\u0639\u0627\u0644\u064a \u0647\u064a \u0639\u0646\u0627\u0635\u0631 \u0623\u0633\u0627\u0633\u064a\u0629 \u0645\u062f\u0645\u062c\u0629 \u0641\u064a \u0643\u0644 \u062d\u0644 \u0646\u0642\u062f\u0645\u0647.<\/span>\n          <\/span>\n        <\/p>\n      <\/div>\n\n      <div class=\"kn-box hero\">\n        <h3>\n          <span class=\"lang-wrapper\">\n            <span class=\"lang-en\">Designed for Kuwait\u2019s Market<\/span>\n            <span class=\"lang-ar\">\u0635\u064f\u0645\u0645\u062a \u0644\u0633\u0648\u0642 \u0627\u0644\u0643\u0648\u064a\u062a<\/span>\n          <\/span>\n        <\/h3>\n        <p>\n          <span class=\"lang-wrapper\">\n            <span class=\"lang-en\">Deep local understanding combined with global standards \u2014 tailored specifically for Kuwait\u2019s business and digital environment.<\/span>\n            <span class=\"lang-ar\">\u0641\u0647\u0645 \u0645\u062d\u0644\u064a \u0639\u0645\u064a\u0642 \u0645\u0639 \u0645\u0639\u0627\u064a\u064a\u0631 \u0639\u0627\u0644\u0645\u064a\u0629 \u2014 \u0645\u0635\u0645\u0645\u0629 \u062e\u0635\u064a\u0635\u064b\u0627 \u0644\u0628\u064a\u0626\u0629 \u0627\u0644\u0623\u0639\u0645\u0627\u0644 \u0627\u0644\u0631\u0642\u0645\u064a\u0629 \u0641\u064a \u0627\u0644\u0643\u0648\u064a\u062a.<\/span>\n          <\/span>\n        <\/p>\n      <\/div>\n\n    <\/div>\n\n    <div class=\"kn-signature\">\n      <span class=\"lang-wrapper\">\n        <span class=\"lang-en\">This is how Kuwait Next transforms ambition into future-ready digital solutions.<\/span>\n        <span class=\"lang-ar\">\u0647\u0643\u0630\u0627 \u062a\u062d\u0648\u0644 \u0643\u0648\u064a\u062a \u0646\u0643\u0633\u062a \u0627\u0644\u0637\u0645\u0648\u062d \u0625\u0644\u0649 \u062d\u0644\u0648\u0644 \u0631\u0642\u0645\u064a\u0629 \u062c\u0627\u0647\u0632\u0629 \u0644\u0644\u0645\u0633\u062a\u0642\u0628\u0644.<\/span>\n      <\/span>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cinzel:wght@700&#038;family=Share+Tech+Mono&#038;family=Rakkas&#038;family=Tajawal:wght@700;800&#038;family=Montserrat:wght@400;600&#038;display=swap\" rel=\"stylesheet\">\n\n<style>\n    \/* --- 1. CORE VARIABLES --- *\/\n    :root {\n        --nexus-bg: #000000;\n        --nexus-gold: #D4AF37;\n        --nexus-gold-dim: rgba(212, 175, 55, 0.2);\n        --nexus-blue: #4F91CD; \n        --nexus-grid: rgba(255, 255, 255, 0.03);\n        --nexus-font-tech: 'Share Tech Mono', monospace;\n    }\n\n    #kn-section-nexus {\n        position: relative;\n        width: 100%;\n        height: 120vh;\n        background-color: var(--nexus-bg);\n        overflow: hidden;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        z-index: 20;\n        cursor: grab;\n        touch-action: pan-y; \n    }\n    #kn-section-nexus:active { cursor: grabbing; }\n\n    \/* --- 2. BACKGROUND LAYERS --- *\/\n    .kn-nexus-grid {\n        position: absolute; inset: 0;\n        background-image: \n            linear-gradient(var(--nexus-grid) 1px, transparent 1px),\n            linear-gradient(90deg, var(--nexus-grid) 1px, transparent 1px);\n        background-size: 100px 100px;\n        opacity: 0.5;\n        z-index: 0;\n        transform: perspective(500px) rotateX(60deg) scale(2);\n        transform-origin: center 80%;\n    }\n    \n    .kn-nexus-horizon {\n        position: absolute; top: 50%; left: 0; width: 100%; height: 50%;\n        background: radial-gradient(ellipse at top, rgba(212, 175, 55, 0.15), transparent 70%);\n        z-index: 1; pointer-events: none;\n    }\n\n    \/* DECORATIVE RINGS *\/\n    .kn-holo-ring {\n        position: absolute; left: 50%; top: 50%;\n        transform: translate(-50%, -50%);\n        border-radius: 50%;\n        border: 1px solid rgba(212, 175, 55, 0.1);\n        pointer-events: none; z-index: 5;\n    }\n    .kn-ring-1 { width: 600px; height: 600px; border-style: dashed; animation: spinRight 60s linear infinite; }\n    .kn-ring-2 { width: 750px; height: 750px; border: 1px solid rgba(79, 145, 205, 0.1); animation: spinLeft 80s linear infinite; }\n    \n    @keyframes spinRight { 100% { transform: translate(-50%, -50%) rotate(360deg); } }\n    @keyframes spinLeft { 100% { transform: translate(-50%, -50%) rotate(-360deg); } }\n\n\n    \/* --- 3. 3D ENGINE --- *\/\n    #kn-nexus-canvas {\n        position: relative; \n        z-index: 10; \n        opacity: 0; transition: opacity 2s ease;\n        mix-blend-mode: screen; \n    }\n    .kn-view-active #kn-nexus-canvas { opacity: 1; }\n\n\n    \/* --- 4. HUD INTERFACE --- *\/\n    .kn-nexus-hud {\n        position: absolute; inset: 0;\n        z-index: 20; pointer-events: none;\n        padding: 60px;\n        display: flex; flex-direction: column; justify-content: space-between;\n    }\n\n    \/* TOP HEADER *\/\n    .kn-nexus-header {\n        text-align: center;\n        pointer-events: auto;\n    }\n    .kn-nexus-label {\n        font-family: var(--nexus-font-tech);\n        color: var(--nexus-gold); font-size: 0.8rem; letter-spacing: 4px;\n        text-transform: uppercase; margin-bottom: 20px;\n        display: inline-block; padding: 5px 15px;\n        border: 1px solid var(--nexus-gold-dim);\n        background: rgba(0,0,0,0.5); backdrop-filter: blur(5px);\n    }\n    .kn-nexus-title {\n        font-family: 'Cinzel', serif; font-size: clamp(3rem, 5vw, 5rem);\n        color: #fff; margin: 0; line-height: 1;\n        text-shadow: 0 0 40px rgba(212, 175, 55, 0.4);\n    }\n    .kn-nexus-p {\n        font-family: 'Montserrat', sans-serif; font-size: 1.1rem; color: #aaa;\n        max-width: 600px; margin: 20px auto 0; line-height: 1.6;\n    }\n\n    \/* DATA COLUMNS - DESKTOP DEFAULT *\/\n    .kn-hud-col {\n        position: absolute; top: 50%; transform: translateY(-50%);\n        display: flex; flex-direction: column; gap: 25px;\n        width: 250px;\n    }\n    .kn-hud-left { left: 5%; text-align: left; }\n    .kn-hud-right { right: 5%; text-align: right; }\n\n    .kn-data-item {\n        border-top: 1px solid rgba(255,255,255,0.1);\n        padding-top: 8px;\n        opacity: 0; transform: translateY(20px);\n        transition: 0.5s ease;\n    }\n    .kn-view-active .kn-data-item { opacity: 1; transform: translateY(0); }\n    \n    \/* Reveal Delays *\/\n    .kn-hud-left .kn-data-item:nth-child(1) { transition-delay: 0.5s; }\n    .kn-hud-left .kn-data-item:nth-child(2) { transition-delay: 0.7s; }\n    .kn-hud-left .kn-data-item:nth-child(3) { transition-delay: 0.9s; }\n    .kn-hud-right .kn-data-item:nth-child(1) { transition-delay: 0.6s; }\n    .kn-hud-right .kn-data-item:nth-child(2) { transition-delay: 0.8s; }\n    .kn-hud-right .kn-data-item:nth-child(3) { transition-delay: 1.0s; }\n\n    .kn-data-label {\n        font-family: var(--nexus-font-tech); font-size: 0.7rem; color: #666;\n        letter-spacing: 2px; text-transform: uppercase; display: block; margin-bottom: 5px;\n    }\n    .kn-data-val {\n        font-family: 'Cinzel', serif; font-size: 1.6rem; color: #fff;\n        font-variant-numeric: tabular-nums; \n    }\n    .kn-gold-val { color: var(--nexus-gold); text-shadow: 0 0 10px var(--nexus-gold-dim); }\n    .kn-blue-val { color: var(--nexus-blue); }\n\n    \/* FOOTER *\/\n    .kn-nexus-footer {\n        width: 100%; border-top: 1px solid rgba(255,255,255,0.1);\n        padding-top: 20px;\n        display: flex; justify-content: space-between; align-items: center;\n    }\n    .kn-status-light {\n        display: flex; align-items: center; gap: 10px;\n        font-family: var(--nexus-font-tech); color: var(--nexus-gold); font-size: 0.8rem;\n    }\n    .kn-status-dot {\n        width: 8px; height: 8px; background: var(--nexus-gold); border-radius: 50%;\n        box-shadow: 0 0 10px var(--nexus-gold);\n        animation: pulseStatus 1s infinite;\n    }\n    @keyframes pulseStatus { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } }\n\n    \/* --- LANGUAGE CONTROL --- *\/\n    .kn-lang-en { display: block; } .kn-lang-ar { display: none; }\n    body.rtl .kn-lang-en, [dir=\"rtl\"] .kn-lang-en { display: none !important; }\n    body.rtl .kn-lang-ar, [dir=\"rtl\"] .kn-lang-ar { display: block !important; }\n\n    \/* RTL Layout *\/\n    body.rtl .kn-hud-left { left: auto; right: 5%; text-align: right; }\n    body.rtl .kn-hud-right { right: auto; left: 5%; text-align: left; }\n    body.rtl .kn-nexus-footer { flex-direction: row-reverse; }\n    \n    \/* RTL Fonts *\/\n    body.rtl .kn-nexus-label, body.rtl .kn-data-label, body.rtl .kn-status-light { font-family: 'Tajawal', sans-serif; font-weight: 700; }\n    body.rtl .kn-nexus-title, body.rtl .kn-data-val { font-family: 'Rakkas', serif; }\n    body.rtl .kn-nexus-p { font-family: 'Tajawal', sans-serif; font-size: 1.2rem; }\n\n    \/* --- RESPONSIVE MOBILE FIX --- *\/\n    @media (max-width: 1024px) {\n        \n        .kn-nexus-hud {\n            padding: 20px; \/* More space *\/\n        }\n\n        .kn-nexus-header { margin-top: 20px; }\n        .kn-nexus-p { font-size: 0.95rem; }\n\n        \/* HIDE RINGS ON MOBILE TO SAVE SPACE *\/\n        .kn-ring-1, .kn-ring-2 { display: none; } \n\n        \/* FORCE STATS TO BOTTOM GRID *\/\n        .kn-hud-col {\n            display: flex;\n            position: absolute;\n            top: auto; bottom: 80px; \/* Position at bottom *\/\n            transform: none;\n            width: 45%; \/* Split width *\/\n            gap: 15px;\n        }\n\n        .kn-hud-left { left: 10px; text-align: left; }\n        .kn-hud-right { right: 10px; text-align: right; }\n\n        .kn-data-item {\n            padding-top: 5px;\n            border-top: 1px solid rgba(255,255,255,0.15);\n        }\n\n        .kn-data-val { font-size: 1.2rem; } \/* Smaller text *\/\n        .kn-data-label { font-size: 0.6rem; letter-spacing: 1px; }\n    }\n<\/style>\n\n<section id=\"kn-section-nexus\">\n    \n    <div class=\"kn-nexus-grid\"><\/div>\n    <div class=\"kn-nexus-horizon\"><\/div>\n    \n    <div class=\"kn-holo-ring kn-ring-1\"><\/div>\n    <div class=\"kn-holo-ring kn-ring-2\"><\/div>\n    \n    <canvas id=\"kn-nexus-canvas\"><\/canvas>\n\n    <div class=\"kn-nexus-hud\">\n        \n        <div class=\"kn-nexus-header\">\n            <div class=\"kn-lang-en\">\n                <span class=\"kn-nexus-label\">\/\/\/ Global Reach<\/span>\n                <h2 class=\"kn-nexus-title\">The Sovereign Nexus<\/h2>\n                <p class=\"kn-nexus-p\">A sovereign foundation is not a wall\u2014it is a launchpad. We architect systems that anchor your data in Kuwait while projecting your influence across the globe.<\/p>\n            <\/div>\n            <div class=\"kn-lang-ar\">\n                <span class=\"kn-nexus-label\">\/\/\/ \u0627\u0644\u0646\u0637\u0627\u0642 \u0627\u0644\u0639\u0627\u0644\u0645\u064a<\/span>\n                <h2 class=\"kn-nexus-title\">\u0627\u0644\u0631\u0627\u0628\u0637 \u0627\u0644\u0633\u064a\u0627\u062f\u064a<\/h2>\n                <p class=\"kn-nexus-p\">\u0627\u0644\u0623\u0633\u0627\u0633 \u0627\u0644\u0633\u064a\u0627\u062f\u064a \u0644\u064a\u0633 \u062c\u062f\u0627\u0631\u0627\u064b\u060c \u0628\u0644 \u0645\u0646\u0635\u0629 \u0627\u0646\u0637\u0644\u0627\u0642. \u0646\u0647\u0646\u062f\u0633 \u0623\u0646\u0638\u0645\u0629 \u062a\u0631\u0633\u062e \u0628\u064a\u0627\u0646\u0627\u062a\u0643 \u0641\u064a \u0627\u0644\u0643\u0648\u064a\u062a \u0628\u064a\u0646\u0645\u0627 \u062a\u0645\u062f \u0646\u0641\u0648\u0630\u0643 \u0639\u0628\u0631 \u0627\u0644\u0639\u0627\u0644\u0645.<\/p>\n            <\/div>\n        <\/div>\n\n        <div class=\"kn-hud-col kn-hud-left\">\n            <div class=\"kn-data-item\">\n                <div class=\"kn-lang-en\">\n                    <span class=\"kn-data-label\">Active Nodes<\/span>\n                    <span class=\"kn-data-val kn-gold-val\" id=\"valNodes\">0<\/span>\n                <\/div>\n                <div class=\"kn-lang-ar\">\n                    <span class=\"kn-data-label\">\u0646\u0642\u0627\u0637 \u0646\u0634\u0637\u0629<\/span>\n                    <span class=\"kn-data-val kn-gold-val\" id=\"valNodesAr\">0<\/span>\n                <\/div>\n            <\/div>\n            <div class=\"kn-data-item\">\n                <div class=\"kn-lang-en\">\n                    <span class=\"kn-data-label\">Global Latency<\/span>\n                    <span class=\"kn-data-val\" id=\"valLatency\">12<small>ms<\/small><\/span>\n                <\/div>\n                <div class=\"kn-lang-ar\">\n                    <span class=\"kn-data-label\">\u0632\u0645\u0646 \u0627\u0644\u0627\u0646\u062a\u0642\u0627\u0644<\/span>\n                    <span class=\"kn-data-val\" id=\"valLatencyAr\">12<small>ms<\/small><\/span>\n                <\/div>\n            <\/div>\n            <div class=\"kn-data-item\">\n                <div class=\"kn-lang-en\">\n                    <span class=\"kn-data-label\">Uptime<\/span>\n                    <span class=\"kn-data-val kn-blue-val\">99.99%<\/span>\n                <\/div>\n                <div class=\"kn-lang-ar\">\n                    <span class=\"kn-data-label\">\u0648\u0642\u062a \u0627\u0644\u062a\u0634\u063a\u064a\u0644<\/span>\n                    <span class=\"kn-data-val kn-blue-val\">99.99%<\/span>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"kn-hud-col kn-hud-right\">\n            <div class=\"kn-data-item\">\n                <div class=\"kn-lang-en\">\n                    <span class=\"kn-data-label\">Encryption<\/span>\n                    <span class=\"kn-data-val\">AES-256<\/span>\n                <\/div>\n                <div class=\"kn-lang-ar\">\n                    <span class=\"kn-data-label\">\u0627\u0644\u062a\u0634\u0641\u064a\u0631<\/span>\n                    <span class=\"kn-data-val\">AES-256<\/span>\n                <\/div>\n            <\/div>\n            <div class=\"kn-data-item\">\n                <div class=\"kn-lang-en\">\n                    <span class=\"kn-data-label\">System Status<\/span>\n                    <span class=\"kn-data-val kn-gold-val\">SOVEREIGN<\/span>\n                <\/div>\n                <div class=\"kn-lang-ar\">\n                    <span class=\"kn-data-label\">\u062d\u0627\u0644\u0629 \u0627\u0644\u0646\u0638\u0627\u0645<\/span>\n                    <span class=\"kn-data-val kn-gold-val\">\u0633\u064a\u0627\u062f\u064a<\/span>\n                <\/div>\n            <\/div>\n            <div class=\"kn-data-item\">\n                <div class=\"kn-lang-en\">\n                    <span class=\"kn-data-label\">Data Throughput<\/span>\n                    <span class=\"kn-data-val\" id=\"valData\">4.2<small>TB\/s<\/small><\/span>\n                <\/div>\n                <div class=\"kn-lang-ar\">\n                    <span class=\"kn-data-label\">\u062a\u062f\u0641\u0642 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a<\/span>\n                    <span class=\"kn-data-val\" id=\"valDataAr\">4.2<small>TB\/s<\/small><\/span>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"kn-nexus-footer\">\n            <div class=\"kn-status-light\">\n                <div class=\"kn-status-dot\"><\/div>\n                <span>SYSTEM ONLINE<\/span>\n            <\/div>\n            <div class=\"kn-status-light\" style=\"opacity: 0.5;\">\n                <span>SECURE_LINK_ESTABLISHED<\/span>\n            <\/div>\n        <\/div>\n\n    <\/div>\n<\/section>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n    \n    const section = document.getElementById('kn-section-nexus');\n    const canvas = document.getElementById('kn-nexus-canvas');\n    const ctx = canvas.getContext('2d');\n    \n    \/\/ --- 1. REVEAL & INIT ---\n    const observer = new IntersectionObserver((entries) => {\n        entries.forEach(entry => {\n            if(entry.isIntersecting) {\n                section.classList.add('kn-view-active');\n                startLiveData();\n            }\n        });\n    }, { threshold: 0.3 });\n    observer.observe(section);\n\n    \/\/ --- LIVE DATA SIMULATOR (Randomness) ---\n    function startLiveData() {\n        animateCounter(\"valNodes\", 840, 850);\n        animateCounter(\"valNodesAr\", 840, 850);\n\n        setInterval(() => {\n            const lat = Math.floor(Math.random() * (15 - 10 + 1) + 10);\n            updateText(\"valLatency\", lat + \"ms\");\n            updateText(\"valLatencyAr\", lat + \"ms\");\n\n            const data = (Math.random() * (4.5 - 3.8) + 3.8).toFixed(1);\n            updateText(\"valData\", data + \"TB\/s\");\n            updateText(\"valDataAr\", data + \"TB\/s\");\n\n            if(Math.random() > 0.7) {\n                const nodes = Math.floor(Math.random() * (855 - 845 + 1) + 845);\n                updateText(\"valNodes\", nodes);\n                updateText(\"valNodesAr\", nodes);\n            }\n\n        }, 2500); \n    }\n\n    function updateText(id, val) {\n        const el = document.getElementById(id);\n        if(el) el.innerHTML = typeof val === 'string' && val.includes('ms') ? val.replace('ms', '<small>ms<\/small>') : \n                              typeof val === 'string' && val.includes('TB') ? val.replace('TB\/s', '<small>TB\/s<\/small>') : val;\n    }\n\n    function animateCounter(id, start, end) {\n        const el = document.getElementById(id);\n        if(!el) return;\n        const duration = 2000;\n        const startTime = performance.now();\n        \n        function update(now) {\n            const time = now - startTime;\n            const prog = Math.min(time \/ duration, 1);\n            const ease = 1 - Math.pow(2, -10 * prog);\n            el.innerText = Math.floor(start + (end - start) * ease);\n            if(time < duration) requestAnimationFrame(update);\n        }\n        requestAnimationFrame(update);\n    }\n\n\n    \/\/ --- 2. 3D GLOBE ENGINE ---\n    let width, height;\n    let globeRadius;\n    const DOT_COUNT = 1000; \n    const DOT_SIZE = 1.5;\n    \n    let rotation = { x: 0, y: 0 };\n    let targetRotation = { x: 0, y: 0 };\n    let isDragging = false;\n    let lastMouse = { x: 0, y: 0 };\n    let autoRotateSpeed = 0.002;\n\n    let points = [];\n    \n    class Point3D {\n        constructor(lat, lon) {\n            this.lat = lat;\n            this.lon = lon;\n            const phi = (90 - lat) * (Math.PI \/ 180);\n            const theta = (lon + 180) * (Math.PI \/ 180);\n            \n            this.x = -(Math.sin(phi) * Math.cos(theta));\n            this.z = (Math.sin(phi) * Math.sin(theta));\n            this.y = (Math.cos(phi));\n            \n            this.baseX = this.x; this.baseY = this.y; this.baseZ = this.z;\n            \n            this.pulse = Math.random();\n            this.pulseSpeed = Math.random() * 0.02 + 0.01;\n        }\n\n        project(radius, rotX, rotY) {\n            let x1 = this.x * Math.cos(rotY) - this.z * Math.sin(rotY);\n            let z1 = this.z * Math.cos(rotY) + this.x * Math.sin(rotY);\n            let y1 = this.y * Math.cos(rotX) - z1 * Math.sin(rotX);\n            let z2 = z1 * Math.cos(rotX) + this.y * Math.sin(rotX);\n            \n            this.projX = x1 * radius + width\/2;\n            this.projY = y1 * radius + height\/2;\n            this.projZ = z2; \n            this.alpha = (z2 + 1) \/ 2; \n        }\n    }\n\n    function initGlobe() {\n        width = section.offsetWidth;\n        height = section.offsetHeight;\n        canvas.width = width;\n        canvas.height = height;\n        globeRadius = window.innerWidth < 768 ? 140 : 350;\n        \n        \/\/ ADJUSTMENT: On Mobile, shift the globe UP so it doesn't overlap the bottom stats\n        let centerOffsetY = 0;\n        if(window.innerWidth < 768) {\n            centerOffsetY = -50; \/\/ Shift Up by 50px\n        }\n\n        \/\/ We handle offset in project() logic conceptually, or translate context\n        \/\/ Simpler to just map projY\n        \n        points = [];\n        const phi = Math.PI * (3 - Math.sqrt(5)); \n        \n        for(let i=0; i<DOT_COUNT; i++) {\n            const y = 1 - (i \/ (DOT_COUNT - 1)) * 2; \n            const radius = Math.sqrt(1 - y * y);\n            const theta = phi * i;\n            \n            const x = Math.cos(theta) * radius;\n            const z = Math.sin(theta) * radius;\n            \n            const p = new Point3D(0,0);\n            p.x = x; p.y = y; p.z = z;\n            points.push(p);\n        }\n        points[0].isAnchor = true;\n    }\n\n    function render() {\n        ctx.clearRect(0, 0, width, height);\n        \n        \/\/ Mobile Offset Calculation\n        let mobileOffset = window.innerWidth < 768 ? -40 : 0;\n\n        if (!isDragging) {\n            targetRotation.y += autoRotateSpeed;\n        }\n        rotation.x += (targetRotation.x - rotation.x) * 0.1;\n        rotation.y += (targetRotation.y - rotation.y) * 0.1;\n\n        points.forEach(p => {\n            p.project(globeRadius, rotation.x, rotation.y);\n            p.projY += mobileOffset; \/\/ Apply Shift\n        });\n        \n        points.sort((a, b) => a.projZ - b.projZ);\n\n        ctx.lineWidth = 0.5;\n        for(let i=0; i<points.length; i+=2) { \n            let p = points[i];\n            if(p.projZ < 0) continue; \n            \n            let neighbor = points[(i+3) % points.length];\n            let dist = Math.hypot(p.projX - neighbor.projX, p.projY - neighbor.projY);\n            \n            if(dist < 40) {\n                ctx.strokeStyle = `rgba(255, 255, 255, ${0.1 * p.alpha})`;\n                ctx.beginPath();\n                ctx.moveTo(p.projX, p.projY);\n                ctx.lineTo(neighbor.projX, neighbor.projY);\n                ctx.stroke();\n            }\n        }\n\n        points.forEach(p => {\n            p.pulse += p.pulseSpeed;\n            let size = DOT_SIZE + Math.sin(p.pulse) * 0.5;\n            \n            if(p.projZ > -0.5) { \n                let alpha = (p.projZ + 1) \/ 2;\n                alpha = Math.max(0.1, alpha);\n                ctx.globalAlpha = alpha;\n                \n                if(p.isAnchor) {\n                    ctx.fillStyle = '#D4AF37';\n                    ctx.shadowBlur = 20; ctx.shadowColor = '#D4AF37';\n                    ctx.beginPath(); ctx.arc(p.projX, p.projY, 6, 0, Math.PI*2); ctx.fill();\n                    \n                    ctx.strokeStyle = '#D4AF37';\n                    ctx.lineWidth = 2;\n                    let ringSize = (Math.sin(p.pulse * 2) + 1) * 15;\n                    ctx.beginPath(); ctx.arc(p.projX, p.projY, ringSize, 0, Math.PI*2); ctx.stroke();\n                    ctx.shadowBlur = 0;\n                    \n                    if(Math.random() > 0.85) {\n                        drawDataArc(p, points[Math.floor(Math.random()*points.length)]);\n                    }\n                } else {\n                    ctx.fillStyle = '#4F91CD';\n                    ctx.beginPath(); ctx.arc(p.projX, p.projY, size, 0, Math.PI*2); ctx.fill();\n                }\n            }\n        });\n        \n        ctx.globalAlpha = 1;\n        requestAnimationFrame(render);\n    }\n    \n    function drawDataArc(start, end) {\n        if(end.projZ < 0) return;\n        ctx.strokeStyle = 'rgba(212, 175, 55, 0.3)';\n        ctx.lineWidth = 1;\n        ctx.beginPath();\n        ctx.moveTo(start.projX, start.projY);\n        let cx = (start.projX + end.projX) \/ 2;\n        let cy = (start.projY + end.projY) \/ 2 - 50; \n        ctx.quadraticCurveTo(cx, cy, end.projX, end.projY);\n        ctx.stroke();\n    }\n\n    \/\/ --- MOBILE SCROLL FIX ---\n    section.addEventListener('mousedown', e => {\n        isDragging = true;\n        lastMouse.x = e.clientX;\n        lastMouse.y = e.clientY;\n    });\n    window.addEventListener('mouseup', () => isDragging = false);\n    \n    section.addEventListener('mousemove', e => {\n        if(isDragging) {\n            let dx = e.clientX - lastMouse.x;\n            let dy = e.clientY - lastMouse.y;\n            targetRotation.y += dx * 0.005;\n            targetRotation.x -= dy * 0.005;\n            lastMouse.x = e.clientX;\n            lastMouse.y = e.clientY;\n        }\n    });\n    \n    section.addEventListener('touchstart', e => {\n        isDragging = true;\n        lastMouse.x = e.touches[0].clientX;\n        lastMouse.y = e.touches[0].clientY;\n    }, {passive: false});\n    \n    section.addEventListener('touchmove', e => {\n        if(isDragging) {\n            let dx = e.touches[0].clientX - lastMouse.x;\n            let dy = e.touches[0].clientY - lastMouse.y;\n            \n            \/\/ Only block scroll if dragging HORIZONTALLY\n            if(Math.abs(dx) > Math.abs(dy)) {\n                 e.preventDefault();\n                 targetRotation.y += dx * 0.005;\n            }\n            \n            lastMouse.x = e.touches[0].clientX;\n            lastMouse.y = e.touches[0].clientY;\n        }\n    }, {passive: false});\n\n    window.addEventListener('resize', initGlobe);\n    \n    initGlobe();\n    render();\n\n});\n<\/script>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<style>\n\/* =========================================\n   1. FONTS & CORE VARIABLES\n   ========================================= *\/\n\/* Added 'Cardo' for that premium\/classic look *\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Cardo:wght@400;700&family=Inter:wght@300;400;600&family=Aref+Ruqaa:wght@400;700&display=swap');\n\n:root {\n  --kn-black: #020202;\n  --kn-glass: rgba(12,12,12,0.75);\n  --kn-border: rgba(255,255,255,0.08);\n  --kn-white: #ffffff;\n  --kn-muted: #9ca3af;\n  --kn-gold: #D4AF37;\n  --kn-gold-light: #F9E59E; \/* Lighter gold for glitter highlight *\/\n  --kn-cyan: #00d2ff;\n  --kn-gold-gradient: linear-gradient(135deg, #D4AF37 0%, #F2D06B 100%);\n}\n\n\/* =========================================\n   2. THE TRANSLATION ENGINE (HOVER LOGIC)\n   ========================================= *\/\n.lang-wrapper {\n  display: grid;\n  grid-template-areas: \"stack\";\n  width: 100%;\n  position: relative;\n  cursor: help;\n}\n\n.lang-en, .lang-ar {\n  grid-area: stack;\n  transition: all 0.65s cubic-bezier(0.22, 1, 0.36, 1);\n  display: block;\n  width: 100%;\n  backface-visibility: hidden;\n}\n\n\/* --- ENGLISH STATE --- *\/\n.lang-en {\n  opacity: 1;\n  transform: translateY(0) scale(1);\n  filter: blur(0);\n}\n\n\/* --- ARABIC STATE --- *\/\n.lang-ar {\n  opacity: 0;\n  transform: translateY(15px) scale(0.95);\n  filter: blur(8px);\n  font-family: 'Aref Ruqaa', serif;\n  font-weight: 700;\n  line-height: 1.6;\n  direction: rtl; \n  color: var(--kn-cyan);\n}\n\n\/* --- HOVER TRIGGERS --- *\/\n.lang-wrapper:hover .lang-en {\n  opacity: 0;\n  transform: translateY(-15px) scale(0.95);\n  filter: blur(8px);\n}\n\n.lang-wrapper:hover .lang-ar {\n  opacity: 1;\n  transform: translateY(0) scale(1);\n  filter: blur(0);\n  text-shadow: 0 0 20px rgba(0, 210, 255, 0.5);\n}\n\n\/* =========================================\n   3. SECTION BACKGROUND & LAYOUT\n   ========================================= *\/\n.kn-roadmap-section{\n  position:relative;\n  background:\n    linear-gradient(180deg,rgba(0,0,0,.95),rgba(0,0,0,.6),rgba(0,0,0,.95)),\n    url('https:\/\/kuwaitnext.com\/wp-content\/uploads\/2026\/01\/ChatGPT-Image-Jan-16-2026-03_40_30-AM.png');\n  background-size:cover;\n  background-position:center;\n  background-attachment:fixed;\n  padding:140px 20px;\n  font-family:'Inter', sans-serif; \/* Body font stays clean *\/\n  color:var(--kn-white);\n  overflow:hidden;\n}\n\n\/* Luxury Grid Overlay *\/\n.kn-roadmap-section::before{\n  content:'';\n  position:absolute;\n  inset:0;\n  background:\n    repeating-linear-gradient(90deg, rgba(212,175,55,0.03) 0px, rgba(212,175,55,0.03) 1px, transparent 1px, transparent 140px);\n  opacity:.18;\n  pointer-events:none;\n}\n\n.kn-container{\n  max-width:1200px;\n  margin:auto;\n  position:relative;\n  z-index:2;\n}\n\n\/* =========================================\n   4. HEADINGS & TEXT\n   ========================================= *\/\n.kn-prehook{\n  text-align:center;\n  text-transform:uppercase;\n  letter-spacing:4px;\n  font-size:.85rem;\n  font-weight:700;\n  color:var(--kn-gold);\n  margin-bottom:28px;\n  \/* ALIGNMENT FIX: Flex ensures the grid wrapper centers perfectly *\/\n  display: flex;\n  justify-content: center;\n  width: 100%;\n}\n\n.kn-header{\n  text-align:center;\n  margin-bottom:90px;\n  \/* ALIGNMENT FIX: Flex column forces children (h2, p) to center align *\/\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n}\n\n.kn-header h2{\n  font-size:3.8rem; \/* Slightly larger for Cardo *\/\n  font-weight:700;\n  line-height:1.1;\n  margin-bottom:22px;\n}\n\n\/* --- NEW FONT & GLITTER EFFECT --- *\/\n.kn-header h2 .lang-en {\n  font-family: 'Cardo', serif; \/* PREMIUM FONT APPLIED HERE *\/\n  background: linear-gradient(\n    110deg, \n    #b88a44 0%, \n    #eecf88 22%, \n    #b88a44 45%, \n    #f9e59e 50%, \n    #b88a44 55%, \n    #eecf88 78%, \n    #b88a44 100%\n  );\n  background-size: 200% auto;\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  animation: luxuryShimmer 5s linear infinite;\n  \n  \/* The \"Glow\" shadow *\/\n  filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.3));\n}\n\n@keyframes luxuryShimmer {\n  0% { background-position: 0% center; filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.2)); }\n  50% { background-position: 100% center; filter: drop-shadow(0 0 25px rgba(212, 175, 55, 0.6)); }\n  100% { background-position: 0% center; filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.2)); }\n}\n\n.kn-header p{\n  font-size:1.2rem;\n  max-width:760px;\n  margin:auto;\n  color:var(--kn-muted);\n  line-height:1.75;\n}\n\n\/* =========================================\n   5. GRID CARDS\n   ========================================= *\/\n.kn-steps-grid{\n  display:grid;\n  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));\n  gap:45px;\n}\n\n.kn-step-card{\n  position:relative;\n  background:var(--kn-glass);\n  border:1px solid var(--kn-border);\n  border-radius:28px;\n  padding:58px 48px;\n  backdrop-filter:blur(22px);\n  transition:.6s cubic-bezier(.22,1,.36,1);\n  overflow:hidden;\n  opacity:0;\n  transform:translateY(60px);\n}\n.kn-step-card.reveal{ opacity:1; transform:translateY(0); }\n\n\/* Hover Lift & Glow *\/\n.kn-step-card:hover{\n  transform:translateY(-18px) scale(1.03);\n  border-color:rgba(212,175,55,.5);\n  box-shadow:0 50px 120px -40px rgba(212,175,55,.45);\n}\n\n\/* Light Shimmer Sweep *\/\n.kn-step-card::after{\n  content:'';\n  position:absolute;\n  inset:-120%;\n  background:linear-gradient(120deg,transparent,rgba(212,175,55,.22),transparent);\n  transform:rotate(15deg);\n  transition:1.1s;\n}\n.kn-step-card:hover::after{ inset:120%; }\n\n\/* Typography inside Cards *\/\n.kn-step-number{\n  position:absolute;\n  top:22px; right:30px;\n  font-size:5.8rem; font-weight:900;\n  color:rgba(255,255,255,.025);\n  font-family: 'Cardo', serif; \/* Styled Number *\/\n}\n.kn-step-card:hover .kn-step-number{ color:rgba(212,175,55,.18); }\n\n.kn-icon-box{\n  width:78px; height:78px;\n  border-radius:20px;\n  background:rgba(255,255,255,.06);\n  border:1px solid var(--kn-border);\n  display:flex; align-items:center; justify-content:center;\n  font-size:2.5rem; margin-bottom:42px;\n  transition:.5s;\n}\n.kn-step-card:hover .kn-icon-box{\n  background:var(--kn-gold-gradient);\n  color:#000;\n  transform:scale(1.2) rotate(10deg);\n  box-shadow:0 0 45px rgba(212,175,55,.7);\n}\n\n.kn-step-title{ \n  font-size:1.9rem; \n  font-weight:700; \n  margin-bottom:18px;\n}\n\/* Apply Cardo to Titles for consistency *\/\n.kn-step-title .lang-en { font-family: 'Cardo', serif; }\n\n.kn-step-desc{ font-size:1.05rem; line-height:1.8; color:var(--kn-muted); margin-bottom:38px; }\n\n\/* Right Align Arabic in Cards *\/\n.kn-step-card .lang-ar { text-align: right; }\n.kn-header .lang-ar, .kn-prehook .lang-ar { text-align: center; }\n\n.kn-advantage{\n  display:inline-flex; align-items:center; gap:10px;\n  font-size:.95rem; font-weight:600; padding:14px 22px;\n  background:rgba(0,210,255,.12); color:var(--kn-cyan);\n  border-radius:16px; border:1px solid rgba(0,210,255,.3);\n}\n\n\/* =========================================\n   6. CTA AREA (BUTTON + NEW LINE)\n   ========================================= *\/\n.kn-cta-wrapper{\n  text-align:center;\n  margin-top:140px;\n  \/* ALIGNMENT FIX *\/\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n.kn-cta-wrapper h3{\n  font-size:2.2rem;\n  margin-bottom:42px;\n  font-family: 'Cardo', serif; \/* Heading style *\/\n}\n\n\/* Main Button *\/\n.kn-cta-button{\n  display: inline-block;\n  padding:26px 68px;\n  font-size:1.25rem;\n  font-weight:700;\n  font-family: 'Cardo', serif; \/* Classic Button Font *\/\n  letter-spacing:1px;\n  border-radius:100px;\n  background:var(--kn-gold-gradient);\n  color:#000;\n  text-decoration:none;\n  box-shadow:0 0 0 0 rgba(212,175,55, 0.7);\n  transition:.4s;\n  animation: pulse-ring 2s infinite;\n}\n\n@keyframes pulse-ring {\n  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.7); }\n  70% { transform: scale(1); box-shadow: 0 0 0 20px rgba(212, 175, 55, 0); }\n  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }\n}\n\n.kn-cta-button:hover{\n  transform:scale(1.08);\n  animation: none;\n  box-shadow:0 10px 40px rgba(212,175,55,0.8);\n}\n.kn-cta-button .lang-ar { color: #000; } \n\n\/* NEW SECONDARY LINE *\/\n.kn-secondary-line {\n  margin-top: 30px;\n  font-size: 1.2rem;\n  color: #fff;\n  opacity: 0.9;\n  letter-spacing: 0.5px;\n  font-family: 'Cardo', serif; \/* Matches heading *\/\n  display: flex;\n  justify-content: center;\n  width: 100%;\n}\n.kn-highlight {\n  color: var(--kn-cyan);\n  font-weight: 700;\n  font-style: italic;\n  text-shadow: 0 0 10px rgba(0, 210, 255, 0.4);\n}\n\n\/* ================= RESPONSIVE ================= *\/\n@media(max-width:768px){\n  .kn-header h2{font-size:2.8rem;}\n  .kn-step-card{padding:42px 30px;}\n}\n<\/style>\n\n<section class=\"kn-roadmap-section\">\n  <div class=\"kn-container\">\n\n    <div class=\"kn-prehook\">\n      <span class=\"lang-wrapper\">\n        <span class=\"lang-en\">\u2726 Designed for Kuwait\u2019s forward-thinking leaders \u2726<\/span>\n        <span class=\"lang-ar\">\u2726 \u0635\u064f\u0645\u0645\u062a \u0644\u0642\u0627\u062f\u0629 \u0627\u0644\u0643\u0648\u064a\u062a \u0630\u0648\u064a \u0627\u0644\u0631\u0624\u064a\u0629 \u0627\u0644\u0645\u0633\u062a\u0642\u0628\u0644\u064a\u0629 \u2726<\/span>\n      <\/span>\n    <\/div>\n\n    <div class=\"kn-header\">\n      <h2>\n        <span class=\"lang-wrapper\">\n          <span class=\"lang-en\">The Roadmap to Digital Authority<\/span>\n          <span class=\"lang-ar\">\u062e\u0627\u0631\u0637\u0629 \u0627\u0644\u0637\u0631\u064a\u0642 \u0646\u062d\u0648 \u0627\u0644\u0631\u064a\u0627\u062f\u0629 \u0627\u0644\u0631\u0642\u0645\u064a\u0629<\/span>\n        <\/span>\n      <\/h2>\n      <p>\n        <span class=\"lang-wrapper\">\n          <span class=\"lang-en\">Premium digital platforms are not built by chance. They are engineered through clarity, discipline, and long-term thinking. This is how Kuwait Next transforms ambition into scalable digital reality.<\/span>\n          <span class=\"lang-ar\">\u0627\u0644\u0645\u0646\u0635\u0627\u062a \u0627\u0644\u0631\u0642\u0645\u064a\u0629 \u0627\u0644\u0645\u062a\u0645\u064a\u0632\u0629 \u0644\u0627 \u062a\u064f\u0628\u0646\u0649 \u0628\u0627\u0644\u0635\u062f\u0641\u0629. \u0625\u0646\u0647\u0627 \u0646\u062a\u0627\u062c \u0647\u0646\u062f\u0633\u0629 \u062f\u0642\u064a\u0642\u0629\u060c \u0627\u0646\u0636\u0628\u0627\u0637\u060c \u0648\u062a\u0641\u0643\u064a\u0631 \u0637\u0648\u064a\u0644 \u0627\u0644\u0623\u0645\u062f. \u0647\u0643\u0630\u0627 \u062a\u062d\u0648\u0644 \u0643\u0648\u064a\u062a \u0646\u0643\u0633\u062a \u0627\u0644\u0637\u0645\u0648\u062d \u0625\u0644\u0649 \u0648\u0627\u0642\u0639 \u0631\u0642\u0645\u064a \u0642\u0627\u0628\u0644 \u0644\u0644\u062a\u0648\u0633\u0639.<\/span>\n        <\/span>\n      <\/p>\n    <\/div>\n\n    <div class=\"kn-steps-grid\">\n\n      <div class=\"kn-step-card\">\n        <div class=\"kn-step-number\">01<\/div>\n        <div class=\"kn-icon-box\">\ud83e\udde0<\/div>\n        <h3 class=\"kn-step-title\">\n          <span class=\"lang-wrapper\">\n            <span class=\"lang-en\">Strategic Blueprint<\/span>\n            <span class=\"lang-ar\">\u0627\u0644\u0645\u062e\u0637\u0637 \u0627\u0644\u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a<\/span>\n          <\/span>\n        <\/h3>\n        <p class=\"kn-step-desc\">\n          <span class=\"lang-wrapper\">\n            <span class=\"lang-en\">Before any design or development begins, we deeply analyze your goals, audience, and Kuwait\u2019s digital landscape \u2014 ensuring every decision is intentional.<\/span>\n            <span class=\"lang-ar\">\u0642\u0628\u0644 \u0627\u0644\u0628\u062f\u0621 \u0628\u0623\u064a \u062a\u0635\u0645\u064a\u0645 \u0623\u0648 \u062a\u0637\u0648\u064a\u0631\u060c \u0646\u0642\u0648\u0645 \u0628\u062a\u062d\u0644\u064a\u0644 \u0639\u0645\u064a\u0642 \u0644\u0623\u0647\u062f\u0627\u0641\u0643\u060c \u062c\u0645\u0647\u0648\u0631\u0643\u060c \u0648\u0627\u0644\u0645\u0634\u0647\u062f \u0627\u0644\u0631\u0642\u0645\u064a \u0641\u064a \u0627\u0644\u0643\u0648\u064a\u062a \u2014 \u0644\u0636\u0645\u0627\u0646 \u0623\u0646 \u0643\u0644 \u0642\u0631\u0627\u0631 \u064a\u064f\u062a\u062e\u0630 \u0639\u0646 \u0642\u0635\u062f \u0648\u062f\u0631\u0627\u0633\u0629.<\/span>\n          <\/span>\n        <\/p>\n        <div class=\"kn-advantage\">\n          <span class=\"lang-wrapper\">\n            <span class=\"lang-en\">\u26a1 Others rush. We architect.<\/span>\n            <span class=\"lang-ar\">\u26a1 \u0627\u0644\u0622\u062e\u0631\u0648\u0646 \u064a\u062a\u0633\u0631\u0639\u0648\u0646. \u0646\u062d\u0646 \u0646\u062e\u0637\u0637.<\/span>\n          <\/span>\n        <\/div>\n      <\/div>\n\n      <div class=\"kn-step-card\">\n        <div class=\"kn-step-number\">02<\/div>\n        <div class=\"kn-icon-box\">\u2699\ufe0f<\/div>\n        <h3 class=\"kn-step-title\">\n          <span class=\"lang-wrapper\">\n            <span class=\"lang-en\">Precision Engineering<\/span>\n            <span class=\"lang-ar\">\u0627\u0644\u0647\u0646\u062f\u0633\u0629 \u0627\u0644\u062f\u0642\u064a\u0642\u0629<\/span>\n          <\/span>\n        <\/h3>\n        <p class=\"kn-step-desc\">\n          <span class=\"lang-wrapper\">\n            <span class=\"lang-en\">Secure, high-performance systems built for speed, stability, and scale \u2014 designed to perform under real-world business demands.<\/span>\n            <span class=\"lang-ar\">\u0623\u0646\u0638\u0645\u0629 \u0622\u0645\u0646\u0629 \u0648\u0639\u0627\u0644\u064a\u0629 \u0627\u0644\u0623\u062f\u0627\u0621 \u0645\u0628\u0646\u064a\u0629 \u0644\u0644\u0633\u0631\u0639\u0629\u060c \u0627\u0644\u0627\u0633\u062a\u0642\u0631\u0627\u0631\u060c \u0648\u0627\u0644\u062a\u0648\u0633\u0639 \u2014 \u0645\u0635\u0645\u0645\u0629 \u0644\u0644\u0639\u0645\u0644 \u0628\u0643\u0641\u0627\u0621\u0629 \u062a\u062d\u062a \u0636\u063a\u0637 \u0645\u062a\u0637\u0644\u0628\u0627\u062a \u0627\u0644\u0623\u0639\u0645\u0627\u0644 \u0627\u0644\u062d\u0642\u064a\u0642\u064a\u0629.<\/span>\n          <\/span>\n        <\/p>\n        <div class=\"kn-advantage\">\n          <span class=\"lang-wrapper\">\n            <span class=\"lang-en\">\u26a1 Others assemble. We engineer.<\/span>\n            <span class=\"lang-ar\">\u26a1 \u0627\u0644\u0622\u062e\u0631\u0648\u0646 \u064a\u062c\u0645\u0639\u0648\u0646. \u0646\u062d\u0646 \u0646\u0647\u0646\u062f\u0633.<\/span>\n          <\/span>\n        <\/div>\n      <\/div>\n\n      <div class=\"kn-step-card\">\n        <div class=\"kn-step-number\">03<\/div>\n        <div class=\"kn-icon-box\">\ud83e\udd1d<\/div>\n        <h3 class=\"kn-step-title\">\n          <span class=\"lang-wrapper\">\n            <span class=\"lang-en\">Launch &#038; Growth Partnership<\/span>\n            <span class=\"lang-ar\">\u0634\u0631\u0627\u0643\u0629 \u0627\u0644\u0625\u0637\u0644\u0627\u0642 \u0648\u0627\u0644\u0646\u0645\u0648<\/span>\n          <\/span>\n        <\/h3>\n        <p class=\"kn-step-desc\">\n          <span class=\"lang-wrapper\">\n            <span class=\"lang-en\">A controlled launch, post-deployment support, and a clear growth roadmap \u2014 because true value begins after the platform goes live.<\/span>\n            <span class=\"lang-ar\">\u0625\u0637\u0644\u0627\u0642 \u0645\u062f\u0631\u0648\u0633\u060c \u062f\u0639\u0645 \u0645\u0627 \u0628\u0639\u062f \u0627\u0644\u0646\u0634\u0631\u060c \u0648\u062e\u0627\u0631\u0637\u0629 \u0637\u0631\u064a\u0642 \u0648\u0627\u0636\u062d\u0629 \u0644\u0644\u0646\u0645\u0648 \u2014 \u0644\u0623\u0646 \u0627\u0644\u0642\u064a\u0645\u0629 \u0627\u0644\u062d\u0642\u064a\u0642\u064a\u0629 \u062a\u0628\u062f\u0623 \u0628\u0639\u062f \u0627\u0646\u0637\u0644\u0627\u0642 \u0627\u0644\u0645\u0646\u0635\u0629 \u0644\u0644\u0639\u0627\u0644\u0645.<\/span>\n          <\/span>\n        <\/p>\n        <div class=\"kn-advantage\">\n          <span class=\"lang-wrapper\">\n            <span class=\"lang-en\">\u26a1 Others deliver &#038; disappear. We stay.<\/span>\n            <span class=\"lang-ar\">\u26a1 \u0627\u0644\u0622\u062e\u0631\u0648\u0646 \u064a\u0633\u0644\u0645\u0648\u0646 \u0648\u064a\u062e\u062a\u0641\u0648\u0646. \u0646\u062d\u0646 \u0646\u0628\u0642\u0649.<\/span>\n          <\/span>\n        <\/div>\n      <\/div>\n\n    <\/div>\n\n    <div class=\"kn-cta-wrapper\">\n      <h3>\n        <span class=\"lang-wrapper\">\n          <span class=\"lang-en\">Ready to build something that lasts?<\/span>\n          <span class=\"lang-ar\">\u0647\u0644 \u0623\u0646\u062a \u062c\u0627\u0647\u0632 \u0644\u0628\u0646\u0627\u0621 \u0634\u064a\u0621 \u064a\u062f\u0648\u0645\u061f<\/span>\n        <\/span>\n      <\/h3>\n      \n      <a href=\"\/contact\" class=\"kn-cta-button\">\n        <span class=\"lang-wrapper\">\n          <span class=\"lang-en\">Start Your Journey \ud83d\ude80<\/span>\n          <span class=\"lang-ar\">\u0627\u0628\u062f\u0623 \u0631\u062d\u0644\u062a\u0643 \u0627\u0644\u0622\u0646 \ud83d\ude80<\/span>\n        <\/span>\n      <\/a>\n\n      <div class=\"kn-secondary-line\">\n        <span class=\"lang-wrapper\">\n          <span class=\"lang-en\">Book your <span class=\"kn-highlight\">&#8220;Free&#8221;<\/span> Consultation Now, Let&#8217;s just talk.<\/span>\n          <span class=\"lang-ar\">\u0627\u062d\u062c\u0632 \u0627\u0633\u062a\u0634\u0627\u0631\u062a\u0643 <span class=\"kn-highlight\">&#8220;\u0627\u0644\u0645\u062c\u0627\u0646\u064a\u0629&#8221;<\/span> \u0627\u0644\u0622\u0646\u060c \u062f\u0639\u0646\u0627 \u0646\u062a\u062d\u062f\u062b \u0641\u0642\u0637.<\/span>\n        <\/span>\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\",()=>{\n  const cards=document.querySelectorAll(\".kn-step-card\");\n  const observer=new IntersectionObserver((entries)=>{\n    entries.forEach((entry,i)=>{\n      if(entry.isIntersecting){\n        setTimeout(()=>entry.target.classList.add(\"reveal\"),i*160);\n        observer.unobserve(entry.target);\n      }\n    });\n  },{threshold:.15});\n  cards.forEach(card=>observer.observe(card));\n});\n<\/script>\n\n\n\n<style>\n\/* =========================================\n   1. CORE VARIABLES & FONTS\n   ========================================= *\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Cardo:wght@400;700&family=Inter:wght@300;400;600&family=Aref+Ruqaa:wght@400;700&display=swap');\n\n:root {\n  --kn-wa-green: #25D366; \/* Official WhatsApp Green *\/\n  --kn-gold: #D4AF37;\n  --kn-cyan: #00d2ff;\n  --kn-dark-bg: #050505;\n}\n\n\/* =========================================\n   2. TRANSLATION ENGINE (Shared Logic)\n   ========================================= *\/\n.lang-wrapper {\n  display: grid;\n  grid-template-areas: \"stack\";\n  width: 100%;\n  position: relative;\n  cursor: help;\n}\n\n.lang-en, .lang-ar {\n  grid-area: stack;\n  transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);\n  display: block;\n  backface-visibility: hidden;\n}\n\n\/* English Default State *\/\n.lang-en { \n  opacity: 1; \n  transform: translateY(0); \n  filter: blur(0); \n}\n\n\/* Arabic Hidden State *\/\n.lang-ar { \n  opacity: 0; \n  transform: translateY(10px); \n  filter: blur(5px); \n  font-family: 'Aref Ruqaa', serif; \n  direction: rtl; \n  color: var(--kn-cyan);\n}\n\n\/* HOVER STATES *\/\n.lang-wrapper:hover .lang-en { \n  opacity: 0; \n  transform: translateY(-10px); \n  filter: blur(5px); \n}\n\n\/* Arabic Active State (Shimmer Effect) *\/\n.lang-wrapper:hover .lang-ar { \n  opacity: 1; \n  transform: translateY(0); \n  filter: blur(0); \n  background: linear-gradient(120deg, var(--kn-cyan), #ffffff, var(--kn-cyan));\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-size: 200% auto;\n  animation: arabicShimmer 3s linear infinite;\n  text-shadow: 0 0 20px rgba(0,210,255,0.6); \n}\n\n@keyframes arabicShimmer {\n  to { background-position: 200% center; }\n}\n\n\/* =========================================\n   3. SECTION STYLING\n   ========================================= *\/\n.kn-whatsapp-section {\n  position: relative;\n  padding: 80px 20px;\n  background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), url('https:\/\/kuwaitnext.com\/wp-content\/uploads\/2026\/01\/ChatGPT-Image-Jan-16-2026-03_40_30-AM.png');\n  background-size: cover;\n  background-position: center;\n  overflow: hidden;\n  font-family: 'Inter', sans-serif;\n  color: #fff;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.kn-grain-overlay {\n  position: absolute; inset: 0;\n  background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'\/%3E%3C\/svg%3E\");\n  opacity: 0.3; pointer-events: none;\n}\n\n\/* =========================================\n   4. THE GLASS CARD (Scanner Effect)\n   ========================================= *\/\n.kn-glass-banner {\n  position: relative;\n  width: 100%;\n  max-width: 900px;\n  padding: 3px;\n  border-radius: 30px;\n  background: linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));\n  overflow: hidden;\n  box-shadow: 0 20px 50px rgba(0,0,0,0.8);\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n  transition: transform 0.4s ease;\n}\n\n\/* Added slight lift on hover *\/\n.kn-glass-banner:hover {\n    transform: translateY(-5px);\n}\n\n.kn-glass-banner::before {\n  content: \"\";\n  position: absolute;\n  top: -50%; left: -50%; width: 200%; height: 200%;\n  background: conic-gradient(transparent, transparent, transparent, var(--kn-gold), var(--kn-cyan));\n  animation: rotateBorder 4s linear infinite;\n  z-index: 0;\n}\n.kn-glass-banner::after {\n  content: \"\";\n  position: absolute;\n  inset: 3px;\n  background: rgba(10, 10, 10, 0.85);\n  border-radius: 28px;\n  z-index: 0;\n}\n\n@keyframes rotateBorder {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n\n.kn-banner-content {\n  position: relative;\n  z-index: 1;\n  padding: 50px 40px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  gap: 30px;\n}\n\n\/* ADDED: New Ambient Green Light behind the icon *\/\n.kn-banner-content::before {\n    content: '';\n    position: absolute;\n    left: 20px;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 120px;\n    height: 120px;\n    background: radial-gradient(circle, rgba(37, 211, 102, 0.15) 0%, transparent 70%);\n    filter: blur(20px);\n    z-index: -1;\n    pointer-events: none;\n}\n\n\/* =========================================\n   5. TEXT & ICONS (UPDATED WITH GREEN & PULSE)\n   ========================================= *\/\n.kn-wa-icon-float {\n  width: 75px;\n  height: 75px;\n  \/* UPDATED COLOR TO AUTHENTIC GREEN *\/\n  color: var(--kn-wa-green); \n  \/* ADDED DUAL ANIMATION: FLOAT + NEW INTENSE PULSE *\/\n  animation: floatIcon 6s ease-in-out infinite, iconGreenPulse 3s ease-in-out infinite;\n}\n\n@keyframes floatIcon {\n  0%, 100% { transform: translateY(0) rotate(0deg); }\n  50% { transform: translateY(-15px) rotate(5deg); }\n}\n\n\/* NEW ANIMATION: Intense Green Glow Pulse *\/\n@keyframes iconGreenPulse {\n    0%, 100% { filter: drop-shadow(0 0 20px rgba(37, 211, 102, 0.4)); scale: 1; }\n    50% { filter: drop-shadow(0 0 35px rgba(37, 211, 102, 0.8)); scale: 1.05; }\n}\n\n.kn-banner-text h3 {\n  font-family: 'Cardo', serif;\n  font-size: 2.2rem;\n  margin-bottom: 15px;\n}\n\n\/* GOLDEN HEADING COLOR *\/\n.kn-banner-text h3 .lang-en {\n  background: linear-gradient(to right, #D4AF37, #F2D06B, #D4AF37);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  font-weight: 700;\n  color: #D4AF37; \n}\n\n.kn-banner-text p {\n  font-size: 1.1rem;\n  color: var(--kn-muted);\n  max-width: 600px;\n  line-height: 1.6;\n  transition: color 0.4s ease;\n}\n\n\/* ADDED: Text brightens when hovering the card *\/\n.kn-glass-banner:hover .kn-banner-text p {\n    color: rgba(255,255,255,0.9);\n}\n\n\/* =========================================\n   6. BUTTON\n   ========================================= *\/\n.kn-wa-btn {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 18px 40px;\n  border-radius: 100px;\n  text-decoration: none;\n  font-weight: 700;\n  font-size: 1.1rem;\n  overflow: hidden;\n  transition: all 0.4s ease;\n  background: linear-gradient(135deg, #D4AF37, #F2D06B);\n  color: #000;\n  box-shadow: 0 0 0 0 rgba(212,175,55, 0.7);\n  animation: pulse-wa 2s infinite;\n}\n\n.kn-wa-btn:hover {\n  background: var(--kn-wa-green);\n  color: #fff;\n  box-shadow: 0 0 40px var(--kn-wa-green);\n  transform: scale(1.05);\n  animation: none;\n}\n.kn-wa-btn .lang-ar { color: inherit; text-shadow: none; }\n\n@keyframes pulse-wa {\n  0% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.7); }\n  70% { box-shadow: 0 0 0 15px rgba(212, 175, 55, 0); }\n  100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }\n}\n\n.kn-btn-icon { width: 24px; height: 24px; }\n\n\/* ================= RESPONSIVE ================= *\/\n@media (min-width: 768px) {\n  .kn-banner-content {\n    flex-direction: row;\n    text-align: left;\n    justify-content: space-between;\n  }\n  .kn-banner-text { padding-right: 20px; }\n  .kn-wa-btn { flex-shrink: 0; }\n  \/* Adjust ambient light position on desktop *\/\n  .kn-banner-content::before { left: 40px; }\n}\n<\/style>\n\n<section class=\"kn-whatsapp-section\">\n  <div class=\"kn-grain-overlay\"><\/div>\n\n  <div class=\"kn-glass-banner\">\n    <div class=\"kn-banner-content\">\n      \n      <div style=\"display:flex; align-items:center; gap:25px;\">\n        <div class=\"kn-wa-icon-float\">\n          <svg viewBox=\"0 0 448 512\" fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7 .9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z\"\/><\/svg>\n        <\/div>\n        \n        <div class=\"kn-banner-text\">\n          <h3>\n            <span class=\"lang-wrapper\">\n              <span class=\"lang-en\">Not sure which digital solution you need?<\/span>\n              <span class=\"lang-ar\">\u0644\u0633\u062a \u0645\u062a\u0623\u0643\u062f\u0627\u064b \u0623\u064a \u062d\u0644 \u0631\u0642\u0645\u064a \u064a\u0646\u0627\u0633\u0628\u0643\u061f<\/span>\n            <\/span>\n          <\/h3>\n          <p>\n            <span class=\"lang-wrapper\">\n              <span class=\"lang-en\">That\u2019s completely fine. A short WhatsApp conversation helps us understand your requirements and guide you toward the right digital approach \u2014 clearly and professionally.<\/span>\n              <span class=\"lang-ar\">\u0644\u0627 \u0645\u0634\u0643\u0644\u0629 \u0623\u0628\u062f\u0627\u064b. \u0645\u062d\u0627\u062f\u062b\u0629 \u0642\u0635\u064a\u0631\u0629 \u0639\u0628\u0631 \u0648\u0627\u062a\u0633\u0627\u0628 \u062a\u0633\u0627\u0639\u062f\u0646\u0627 \u0639\u0644\u0649 \u0641\u0647\u0645 \u0645\u062a\u0637\u0644\u0628\u0627\u062a\u0643 \u0648\u062a\u0648\u062c\u064a\u0647\u0643 \u0646\u062d\u0648 \u0627\u0644\u062d\u0644 \u0627\u0644\u0631\u0642\u0645\u064a \u0627\u0644\u0623\u0646\u0633\u0628 \u2014 \u0628\u0643\u0644 \u0648\u0636\u0648\u062d \u0648\u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629.<\/span>\n            <\/span>\n          <\/p>\n        <\/div>\n      <\/div>\n\n      <a href=\"https:\/\/wa.me\/966543692574?text=\u0645\u0631\u062d\u0628\u0627\u064b\u060c \u0627\u0644\u0643\u0648\u064a\u062a \u0646\u0643\u0633\u062a\u060c \u0623\u0648\u062f \u0627\u0644\u0627\u0633\u062a\u0641\u0633\u0627\u0631 \u0639\u0646 \u062e\u062f\u0645\u0627\u062a\u0643\u0645!\" target=\"_blank\" class=\"kn-wa-btn\" rel=\"noopener\">\n        <svg class=\"kn-btn-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M12.0003 2C17.5232 2 22.0003 6.47715 22.0003 12C22.0003 17.5228 17.5232 22 12.0003 22C10.2974 22 8.69224 21.5746 7.28258 20.816L2.37891 22.1855L3.92137 17.6534C3.01186 16.0337 2.50031 14.1369 2.50031 12.125C2.50031 6.66667 6.81181 2.125 12.1878 2.125L12.0003 2ZM12.0003 3.99998C7.58193 3.99998 4.00031 7.5816 4.00031 12C4.00031 13.7383 4.54921 15.3473 5.49258 16.6713L4.76449 18.8105L7.02537 18.1791C8.26186 18.9818 9.75471 19.4533 11.3667 19.4975L12.0003 19.5C16.4187 19.5 20.0003 15.9184 20.0003 11.5C20.0003 7.0816 16.4187 3.49998 12.0003 3.49998V3.99998Z\" \/><\/svg>\n        <span class=\"lang-wrapper\">\n          <span class=\"lang-en\">Start a Conversation<\/span>\n          <span class=\"lang-ar\">\u0627\u0628\u062f\u0623 \u0627\u0644\u0645\u062d\u0627\u062f\u062b\u0629<\/span>\n        <\/span>\n      <\/a>\n\n    <\/div>\n  <\/div>\n<\/section>\n\n\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u25cf Kuwait Vision 2035 The New Standard of Digital Excellence. We don&#8217;t just build platforms; we engineer legacies. Aligning with the nation&#8217;s vision to deliver security, speed, and scalable growth for Kuwait&#8217;s future leaders. Start Your Project Book your Free Consultation Now \u25cf \u0631\u0624\u064a\u0629 \u0627\u0644\u0643\u0648\u064a\u062a 2035 \u0627\u0644\u0645\u0639\u064a\u0627\u0631 \u0627\u0644\u062c\u062f\u064a\u062f \u0644\u0644\u062a\u0645\u064a\u0632 \u0627\u0644\u0631\u0642\u0645\u064a \u0644\u0627 \u0646\u0643\u062a\u0641\u064a \u0628\u0628\u0646\u0627\u0621 \u0627\u0644\u0645\u0646\u0635\u0627\u062a\u060c \u0628\u0644 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2112,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"unboxed","site-sidebar-style":"unboxed","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"enabled","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-691","page","type-page","status-publish","has-post-thumbnail","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/kuwaitnext.com\/ar\/wp-json\/wp\/v2\/pages\/691","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kuwaitnext.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kuwaitnext.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kuwaitnext.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kuwaitnext.com\/ar\/wp-json\/wp\/v2\/comments?post=691"}],"version-history":[{"count":241,"href":"https:\/\/kuwaitnext.com\/ar\/wp-json\/wp\/v2\/pages\/691\/revisions"}],"predecessor-version":[{"id":2853,"href":"https:\/\/kuwaitnext.com\/ar\/wp-json\/wp\/v2\/pages\/691\/revisions\/2853"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kuwaitnext.com\/ar\/wp-json\/wp\/v2\/media\/2112"}],"wp:attachment":[{"href":"https:\/\/kuwaitnext.com\/ar\/wp-json\/wp\/v2\/media?parent=691"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}