{"id":694,"date":"2026-01-12T21:31:03","date_gmt":"2026-01-12T21:31:03","guid":{"rendered":"https:\/\/kuwaitnext.com\/biography\/"},"modified":"2026-01-31T15:17:06","modified_gmt":"2026-01-31T15:17:06","slug":"services","status":"publish","type":"page","link":"https:\/\/kuwaitnext.com\/ar\/services\/","title":{"rendered":"\u0627\u0644\u062e\u062f\u0645\u0627\u062a"},"content":{"rendered":"\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;display=swap\" rel=\"stylesheet\">\n\n<style>\n    \/* --- CONTAINER (WP SAFE) --- *\/\n    #kn-finale-v8 {\n        position: relative;\n        width: 100%;\n        height: 100vh;\n        min-height: 800px; \/* Hard-forced height *\/\n        background-color: #050505 !important; \/* Deep Black *\/\n        overflow: hidden;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        z-index: 1; \n        margin: 0 !important; padding: 0 !important;\n        cursor: default;\n        opacity: 0; \/* Initially hidden *\/\n        transition: opacity 1s ease-in-out; \/* Smooth transition for appearance\/disappearance *\/\n        pointer-events: none; \/* Allows clicks to pass through while hidden *\/\n    }\n\n    #kn-finale-v8.kn-visible {\n        opacity: 1;\n        pointer-events: auto; \/* Re-enable interaction when visible *\/\n    }\n\n\n    \/* --- CANVAS --- *\/\n    #kn-canvas-v8 {\n        position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n        z-index: 1;\n        display: block;\n        opacity: 0; transition: opacity 1.5s ease;\n    }\n    #kn-finale-v8.kn-loaded #kn-canvas-v8 { opacity: 1; }\n\n    \/* --- UI LAYER --- *\/\n    .kn-ui-v8 {\n        position: relative; z-index: 10;\n        text-align: center;\n        pointer-events: none;\n        width: 100%; padding: 0 20px;\n        mix-blend-mode: exclusion; \/* Makes text sharp against gold *\/\n    }\n\n    \/* Brand Name *\/\n    .kn-brand-v8 {\n        font-family: 'Cinzel', serif !important; \n        font-size: clamp(4rem, 15vw, 12rem);\n        line-height: 0.8;\n        color: #fff !important;\n        margin: 0;\n        opacity: 0; transform: scale(1.1); filter: blur(10px);\n        transition: 2s cubic-bezier(0.19, 1, 0.22, 1);\n        text-transform: uppercase;\n        letter-spacing: -4px;\n    }\n\n    \/* Tagline *\/\n    .kn-tagline-v8 {\n        font-family: 'Share Tech Mono', monospace !important;\n        color: #D4AF37 !important;\n        font-size: clamp(0.9rem, 2vw, 1.2rem);\n        letter-spacing: 15px;\n        text-transform: uppercase;\n        opacity: 0; transform: translateY(30px);\n        transition: 2s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;\n        margin-top: 40px;\n        display: inline-block;\n        padding: 10px 0;\n        border-top: 1px solid rgba(212, 175, 55, 0.5);\n        border-bottom: 1px solid rgba(212, 175, 55, 0.5);\n    }\n\n    \/* --- NEW SERVICES LABEL STYLING --- *\/\n    .kn-service-label {\n        font-family: 'Rakkas', serif !important; \/* Odd & Attractive Font *\/\n        font-size: clamp(1.5rem, 4vw, 3rem);\n        color: #D4AF37 !important;\n        margin-top: -10px; \/* Pull closer to main title *\/\n        margin-bottom: 20px;\n        letter-spacing: 5px;\n        opacity: 0; \n        transform: translateY(20px);\n        transition: 2s cubic-bezier(0.19, 1, 0.22, 1) 0.3s;\n        text-transform: uppercase;\n    }\n\n    \/* REVEAL *\/\n    .kn-active .kn-brand-v8 {\n        opacity: 1; transform: scale(1); filter: blur(0px);\n    }\n    .kn-active .kn-tagline-v8 {\n        opacity: 1; transform: translateY(0);\n    }\n    .kn-active .kn-service-label {\n        opacity: 1; transform: translateY(0);\n    }\n\n    \/* RTL FONTS *\/\n    body.rtl .kn-brand-v8, [dir=\"rtl\"] .kn-brand-v8 { font-family: 'Rakkas', serif !important; letter-spacing: 0; line-height: 1.1; }\n    body.rtl .kn-tagline-v8, [dir=\"rtl\"] .kn-tagline-v8 { font-family: 'Tajawal', sans-serif !important; letter-spacing: 2px; font-weight: 800; }\n    body.rtl .kn-service-label { font-family: 'Rakkas', serif !important; letter-spacing: 0; }\n    \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<\/style>\n\n<section id=\"kn-finale-v8\">\n    \n    <canvas id=\"kn-canvas-v8\"><\/canvas>\n\n    <div class=\"kn-ui-v8\">\n        <div class=\"kn-lang-en\">\n            <h1 class=\"kn-brand-v8\">Kuwait<br>Next<\/h1>\n            <div class=\"kn-service-label\">Services<\/div>\n        <\/div>\n        <div class=\"kn-lang-ar\">\n            <h1 class=\"kn-brand-v8\">\u0643\u0648\u064a\u062a<br>\u0646\u0643\u0633\u062a<\/h1>\n            <div class=\"kn-service-label\">\u0627\u0644\u062e\u062f\u0645\u0627\u062a<\/div>\n            <div class=\"kn-tagline-v8\">\/\/\/ \u0647\u0646\u062f\u0633\u0629 \u0627\u0644\u0645\u0633\u062a\u0642\u0628\u0644<\/div>\n        <\/div>\n    <\/div>\n\n<\/section>\n\n<script>\n(function() {\n    function initDust() {\n        const section = document.getElementById('kn-finale-v8');\n        const canvas = document.getElementById('kn-canvas-v8');\n        \n        if (!section || !canvas) return;\n\n        const ctx = canvas.getContext('2d');\n        section.classList.add('kn-loaded'); \n        \n        \/\/ --- ANIMATION SEQUENCE LOGIC ---\n        \/\/ Show immediately, wait 4s, then hide completely\n        setTimeout(() => {\n             section.classList.add('kn-visible'); \/\/ Trigger fade in\n             section.classList.add('kn-active');  \/\/ Trigger internal animations\n        }, 100); \/\/ Slight delay to ensure CSS is ready\n\n        setTimeout(() => {\n            section.classList.remove('kn-visible'); \/\/ Trigger fade out\n            setTimeout(() => {\n                section.style.display = 'none'; \/\/ Completely remove from flow\n            }, 1000); \/\/ Wait for fade out transition to finish\n        }, 4100); \/\/ 4 seconds visible + 100ms initial delay\n\n\n        \/\/ --- 2. CONFIG ---\n        let width, height;\n        let particles = [];\n        \/\/ HIGH DETAIL: 4000 particles\n        const COUNT = window.innerWidth < 768 ? 1500 : 300; \n        let mouse = { x: -1000, y: -1000 };\n\n        \/\/ --- 3. PARTICLE CLASS ---\n        class Grain {\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 : height + 10; \/\/ Start at bottom\n                \n                \/\/ Varied speeds for \"Parallax Depth\"\n                this.depth = Math.random(); \/\/ 0 to 1\n                this.speed = (this.depth * 2) + 0.5; \/\/ Faster if closer\n                \n                this.vx = (Math.random() - 0.5) * 0.5; \/\/ Slight drift\n                this.vy = -this.speed; \/\/ Always up\n                \n                this.size = Math.random() * 2;\n                \/\/ Palette: Gold, White, and Deep Gold\n                const rand = Math.random();\n                if (rand > 0.95) this.color = '#FFF'; \/\/ Sparkle\n                else if (rand > 0.7) this.color = '#D4AF37'; \/\/ Gold\n                else this.color = '#8B6914'; \/\/ Dark Gold (Depth)\n                \n                this.alpha = Math.random() * 0.5 + 0.1;\n            }\n\n            update() {\n                \/\/ 1. Basic Movement\n                this.x += this.vx;\n                this.y += this.vy;\n\n                \/\/ 2. Mouse Interaction (Repel\/Wind)\n                const dx = mouse.x - this.x;\n                const dy = mouse.y - this.y;\n                const dist = Math.sqrt(dx*dx + dy*dy);\n                const repelRad = 250;\n                \n                if(dist < repelRad) {\n                    const force = (repelRad - dist) \/ repelRad;\n                    const angle = Math.atan2(dy, dx);\n                    \n                    \/\/ Push away violently\n                    this.vx -= Math.cos(angle) * force * 1;\n                    this.vy -= Math.sin(angle) * force * 1;\n                }\n\n                \/\/ 3. Friction (Return to normal upward flow)\n                this.vx *= 0.95;\n                this.vy += (-this.speed - this.vy) * 0.05;\n\n                \/\/ 4. Respawn\n                if(this.y < -10 || this.x < -50 || this.x > width + 50) {\n                    this.init();\n                }\n            }\n\n            draw() {\n                ctx.fillStyle = this.color;\n                ctx.globalAlpha = 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        \/\/ --- 4. ENGINE ---\n        function initCanvas() {\n            width = section.offsetWidth;\n            height = section.offsetHeight;\n            canvas.width = width;\n            canvas.height = height;\n            particles = [];\n            for(let i=0; i<COUNT; i++) particles.push(new Grain());\n        }\n\n        function animate() {\n            \/\/ Trail Effect for \"Blur\"\n            ctx.fillStyle = 'rgba(5, 5, 5, 0.3)';\n            ctx.fillRect(0,0,width,height);\n            \n            \/\/ Render Particles\n            \/\/ OPTIMIZATION: We don't use lines here, we use massive dot count for \"Sand\" feel\n            particles.forEach(p => {\n                p.update();\n                p.draw();\n            });\n\n            \/\/ ADD GLOW (Composite)\n            \/\/ This makes the white particles bloom\n            ctx.globalCompositeOperation = 'lighter';\n            \/\/ (Optional subtle overlay if needed, but keeping it clean for performance)\n            ctx.globalCompositeOperation = 'source-over';\n\n            requestAnimationFrame(animate);\n        }\n\n        \/\/ --- 5. 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 = -5000; \n        });\n        \n        window.addEventListener('resize', initCanvas);\n\n        initCanvas();\n        animate();\n    }\n\n    \/\/ Force Wait for WordPress Page Builders\n    if (document.readyState === 'loading') {\n        document.addEventListener('DOMContentLoaded', initDust);\n    } else {\n        initDust();\n    }\n    window.addEventListener('load', initDust);\n\n})();\n<\/script>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<style>\n    \/* --- 1. FONTS & ROOTS --- *\/\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Cinzel:wght@500;700;900&family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=El+Messiri:wght@400;700&family=Montserrat:wght@300;400;500;700&display=swap');\n\n    :root {\n        --gold: #D4AF37;\n        --gold-bright: #F9E58A;\n        --black: #050505;\n    }\n\n    \/* --- 2. MAIN CONTAINER --- *\/\n    .kn-section-wrapper {\n        position: relative;\n        background-color: var(--black);\n        overflow: hidden;\n        padding: 140px 5%; \/* Increased for badge space *\/\n        min-height: 850px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        border-bottom: 1px solid #1a1a1a;\n        font-family: 'Cinzel', serif;\n    }\n\n    \/* --- 3. CANVAS (BACKGROUND) --- *\/\n    #kn-network-canvas {\n        position: absolute; top: 0; left: 0;\n        width: 100%; height: 100%;\n        z-index: 1; pointer-events: none;\n    }\n\n    \/* --- 4. LAYOUT GRID --- *\/\n    .kn-grid {\n        display: flex;\n        width: 100%; max-width: 1500px;\n        position: relative; z-index: 5;\n        align-items: center; justify-content: space-between;\n        gap: 60px;\n        flex-wrap: wrap;\n    }\n    [dir=\"rtl\"] .kn-grid { flex-direction: row-reverse; }\n\n    \/* --- 5. CONTENT STACK --- *\/\n    .kn-content { \n        flex: 1; min-width: 350px; position: relative; \n        display: flex; flex-direction: column; \n        gap: 50px; \n        padding-top: 30px;\n    }\n\n    \/* === NEW: USP BADGE === *\/\n    .kn-usp-badge {\n        position: absolute; top: -50px; left: 0;\n        display: inline-flex; align-items: center;\n        padding: 10px 25px;\n        background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(5, 5, 5, 0.8));\n        border: 2px solid var(--gold);\n        border-radius: 4px;\n        box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);\n        animation: badgePulse 4s infinite ease-in-out;\n    }\n    [dir=\"rtl\"] .kn-usp-badge { left: auto; right: 0; }\n\n    .kn-usp-icon { color: var(--gold-bright); font-size: 1.2rem; margin-right: 10px; }\n    [dir=\"rtl\"] .kn-usp-icon { margin-right: 0; margin-left: 10px; }\n\n    .kn-usp-text {\n        font-family: 'Cinzel', serif; color: var(--gold-bright); font-weight: 700;\n        text-transform: uppercase; letter-spacing: 2px; font-size: 0.9rem;\n    }\n    .kn-usp-ar { display: none; font-family: 'El Messiri', sans-serif; }\n    [dir=\"rtl\"] .kn-usp-en { display: none; }\n    [dir=\"rtl\"] .kn-usp-ar { display: inline-block; }\n\n    @keyframes badgePulse {\n        0%, 100% { box-shadow: 0 0 20px rgba(212, 175, 55, 0.2); border-color: var(--gold); }\n        50% { box-shadow: 0 0 40px rgba(212, 175, 55, 0.5); border-color: var(--gold-bright); }\n    }\n\n    \/* --- UPDATED \"01\" (BREATHING LIGHT GLOW) --- *\/\n    .kn-number {\n        font-family: 'Cinzel', serif;\n        font-size: 20rem; font-weight: 900; line-height: 1;\n        color: rgba(212, 175, 55, 0.02); \n        -webkit-text-stroke: 2px rgba(212, 175, 55, 0.25);\n        position: absolute; top: -120px; left: -90px;\n        z-index: -1; pointer-events: none;\n        animation: subtleGlowPulse 5s ease-in-out infinite;\n    }\n    [dir=\"rtl\"] .kn-number { left: auto; right: -90px; }\n\n    @keyframes subtleGlowPulse {\n        0%, 100% { opacity: 0.4; filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.1)); }\n        50% { opacity: 0.8; filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.3)); }\n    }\n\n    \/* --- 6. STRICT CSS SWAP SYSTEM --- *\/\n    .kn-swap-container { display: grid; grid-template-areas: \"stack\"; align-items: center; cursor: pointer; }\n    .kn-lang-layer { grid-area: stack; transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); }\n\n    \/* LOGIC: ENGLISH SITE (dir=\"ltr\") *\/\n    [dir=\"ltr\"] .kn-en-title, [dir=\"ltr\"] .kn-en-desc { opacity: 1; transform: translateY(0); filter: blur(0); z-index: 2; }\n    [dir=\"ltr\"] .kn-ar-title, [dir=\"ltr\"] .kn-ar-desc { opacity: 0; transform: translateY(20px); filter: blur(10px); z-index: 1; }\n    [dir=\"ltr\"] .kn-swap-container:hover .kn-en-title, [dir=\"ltr\"] .kn-swap-container:hover .kn-en-desc { opacity: 0; transform: translateY(-20px); filter: blur(10px); }\n    [dir=\"ltr\"] .kn-swap-container:hover .kn-ar-title, [dir=\"ltr\"] .kn-swap-container:hover .kn-ar-desc { opacity: 1; transform: translateY(0); filter: blur(0); }\n\n    \/* LOGIC: ARABIC SITE (dir=\"rtl\") *\/\n    [dir=\"rtl\"] .kn-en-title, [dir=\"rtl\"] .kn-en-desc { opacity: 0; transform: translateY(20px); filter: blur(10px); z-index: 1; }\n    [dir=\"rtl\"] .kn-ar-title, [dir=\"rtl\"] .kn-ar-desc { opacity: 1; transform: translateY(0); filter: blur(0); z-index: 2; }\n    [dir=\"rtl\"] .kn-swap-container:hover .kn-ar-title, [dir=\"rtl\"] .kn-swap-container:hover .kn-ar-desc { opacity: 0; transform: translateY(-20px); filter: blur(10px); }\n    [dir=\"rtl\"] .kn-swap-container:hover .kn-en-title, [dir=\"rtl\"] .kn-swap-container:hover .kn-en-desc { opacity: 1; transform: translateY(0); filter: blur(0); }\n\n    \/* TYPOGRAPHY *\/\n    .kn-heading h2 { font-size: 4rem; margin: 0; line-height: 1.1; text-transform: uppercase; }\n    .kn-en-title { color: #ffffff; text-shadow: 0 0 30px rgba(0,0,0,0.8); }\n    .kn-ar-title { font-family: 'El Messiri', sans-serif; color: var(--gold); font-weight: 700; }\n\n    .kn-desc p { font-size: 1.15rem; line-height: 1.8; margin: 0; max-width: 600px; border-left: 3px solid var(--gold); padding-left: 25px; }\n    [dir=\"rtl\"] .kn-desc p { border-left: none; border-right: 3px solid var(--gold); padding-left: 0; padding-right: 25px; }\n    \n    \/* Stronger Typography for USP *\/\n    .kn-en-desc { font-family: 'Montserrat', sans-serif; color: #b0b0b0; }\n    .kn-en-desc strong { color: var(--gold-bright); font-weight: 700; text-shadow: 0 0 10px rgba(212, 175, 55, 0.3); }\n    .kn-ar-desc { font-family: 'El Messiri', sans-serif; color: #d4c07b; font-size: 1.3rem; }\n    .kn-ar-desc strong { color: var(--gold-bright); font-weight: 700; text-shadow: 0 0 10px rgba(212, 175, 55, 0.3); }\n\n    \/* --- 7. BUTTON WITH STRONG SHINE EFFECT --- *\/\n    .kn-btn-wrapper { display: inline-block; }\n    .kn-btn { \n        text-decoration: none; display: inline-block; padding: 18px 45px; \n        color: var(--gold); font-family: 'Cinzel', serif; font-weight: 700; \n        text-transform: uppercase; letter-spacing: 3px; border: 1px solid var(--gold); \n        position: relative; overflow: hidden; transition: all 0.5s ease; \n        background: rgba(0,0,0,0.3); box-shadow: 0 0 15px rgba(212, 175, 55, 0.1); \n    }\n    .kn-btn::before { \n        content: ''; position: absolute; top: 0; left: 0; width: 0%; height: 100%; \n        background: var(--gold); transition: all 0.5s ease; z-index: -1; \n    }\n    \/* Strong Shine Sweep *\/\n    .kn-btn::after { \n        content: ''; position: absolute; top: 0; left: -150%; width: 100%; height: 100%; \n        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent); \n        transform: skewX(-20deg); animation: shimmerSweep 3s infinite ease-in-out; \n        pointer-events: none; \n    }\n    @keyframes shimmerSweep { \n        0% { left: -150%; } 50% { left: 150%; } 100% { left: 150%; } \n    }\n    .kn-btn:hover::before { width: 100%; }\n    .kn-btn:hover { color: #000; box-shadow: 0 0 30px rgba(212, 175, 55, 0.5); }\n\n    \/* --- 8. VIDEO CARD (PROTECTED) --- *\/\n    .kn-video-wrapper { flex: 1.2; display: flex; justify-content: flex-end; perspective: 1200px; }\n    [dir=\"rtl\"] .kn-video-wrapper { justify-content: flex-start; }\n\n    .kn-card {\n        width: 100%; max-width: 650px; height: 380px;\n        background: #000; position: relative; overflow: hidden;\n        border: 1px solid #333; box-shadow: 0 40px 80px rgba(0,0,0,0.8);\n        transition: transform 0.6s ease; animation: subtleFloat 8s ease-in-out infinite;\n    }\n\n    \/* === NEW: PROTECTION SHIELD === *\/\n    .kn-video-shield {\n        position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n        z-index: 10; background: transparent;\n    }\n\n    .kn-dust { position: absolute; width: 4px; height: 4px; background: var(--gold); border-radius: 50%; opacity: 0; animation: dustFloat 5s infinite; z-index: 5; pointer-events: none; }\n    .kn-dust:nth-child(1) { top: 80%; left: 10%; animation-delay: 0s; }\n    .kn-dust:nth-child(2) { top: 90%; left: 40%; animation-delay: 1.5s; }\n    .kn-dust:nth-child(3) { top: 70%; left: 80%; animation-delay: 3s; }\n\n    .kn-video { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: opacity 0.5s; }\n    .kn-card:hover .kn-video { opacity: 1; }\n    .kn-card:hover { border-color: var(--gold); }\n\n    @media (max-width: 900px) {\n        .kn-grid { flex-direction: column !important; gap: 40px; }\n        .kn-number { font-size: 10rem; top: -50px; left: 0; opacity: 0.2; }\n        .kn-heading h2 { font-size: 2.5rem; }\n        .kn-content { gap: 30px; padding-top: 50px; }\n        .kn-card { height: 260px; }\n        .kn-usp-badge { top: -30px; font-size: 0.8rem; padding: 8px 15px;}\n    }\n<\/style>\n\n<div class=\"kn-section-wrapper\" dir=\"ltr\" id=\"knSection\">\n\n    <canvas id=\"kn-network-canvas\"><\/canvas>\n\n    <div class=\"kn-grid\">\n        \n        <div class=\"kn-content\">\n            <div class=\"kn-usp-badge\">\n                <span class=\"kn-usp-icon\">\u2726<\/span>\n                <span class=\"kn-usp-text kn-usp-en\">Sovereign Web Architecture<\/span>\n                <span class=\"kn-usp-text kn-usp-ar\">\u0628\u0646\u064a\u0629 \u0627\u0644\u0648\u064a\u0628 \u0627\u0644\u0633\u064a\u0627\u062f\u064a\u0629<\/span>\n            <\/div>\n\n            <div class=\"kn-number\">01<\/div>\n\n            <div class=\"kn-swap-container kn-heading\">\n                <div class=\"kn-lang-layer kn-en-title\"><h2>Website<br>Development<\/h2><\/div>\n                <div class=\"kn-lang-layer kn-ar-title\"><h2>\u062a\u0637\u0648\u064a\u0631<br>\u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u0648\u064a\u0628<\/h2><\/div>\n            <\/div>\n\n            <div class=\"kn-swap-container kn-desc\">\n                <div class=\"kn-lang-layer kn-en-desc\">\n                    <p>We don&#8217;t just build websites; we construct <strong>Digital Sovereignties<\/strong>. From high-frequency corporate platforms to immersive, award-winning portfolios, we architect responsive, <strong>bulletproof web experiences<\/strong> that define your status in the Kuwaiti market.<\/p>\n                <\/div>\n                <div class=\"kn-lang-layer kn-ar-desc\">\n                    <p>\u0646\u062d\u0646 \u0644\u0627 \u0646\u0628\u0646\u064a \u0645\u062c\u0631\u062f \u0645\u0648\u0627\u0642\u0639 \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629\u060c \u0628\u0644 \u0646\u0634\u064a\u062f <strong>\u0633\u064a\u0627\u062f\u0627\u062a \u0631\u0642\u0645\u064a\u0629<\/strong>. \u0645\u0646 \u0627\u0644\u0645\u0646\u0635\u0627\u062a \u0627\u0644\u0645\u0624\u0633\u0633\u064a\u0629 \u0641\u0627\u0626\u0642\u0629 \u0627\u0644\u0633\u0631\u0639\u0629 \u0625\u0644\u0649 \u0627\u0644\u0645\u0644\u0641\u0627\u062a \u0627\u0644\u0625\u0628\u062f\u0627\u0639\u064a\u0629 \u0627\u0644\u062d\u0627\u0626\u0632\u0629 \u0639\u0644\u0649 \u062c\u0648\u0627\u0626\u0632\u060c \u0646\u062d\u0646 \u0646\u0635\u0645\u0645 \u062a\u062c\u0627\u0631\u0628 \u0648\u064a\u0628 <strong>\u0645\u062d\u0635\u0646\u0629 \u0648\u0645\u062a\u062c\u0627\u0648\u0628\u0629<\/strong> \u062a\u062d\u062f\u062f \u0645\u0643\u0627\u0646\u062a\u0643 \u0641\u064a \u0627\u0644\u0633\u0648\u0642 \u0627\u0644\u0643\u0648\u064a\u062a\u064a.<\/p>\n                <\/div>\n            <\/div>\n\n            <div class=\"kn-btn-wrapper\">\n                <a href=\"https:\/\/kuwaitnext.com\/contact\/\" class=\"kn-btn\">Start Project<\/a>\n            <\/div>\n        <\/div>\n\n        <div class=\"kn-video-wrapper\">\n            <div class=\"kn-card\">\n                <div class=\"kn-video-shield\" oncontextmenu=\"return false;\"><\/div>\n\n                <div class=\"kn-dust\"><\/div>\n                <div class=\"kn-dust\"><\/div>\n                <div class=\"kn-dust\"><\/div>\n                \n                <video class=\"kn-video\" autoplay loop muted playsinline oncontextmenu=\"return false;\">\n                    <source src=\"https:\/\/kuwaitnext.com\/wp-content\/uploads\/2026\/01\/Premium_Kuwaiti_Website_Development_Video.mp4\" type=\"video\/mp4\">\n                <\/video>\n            <\/div>\n        <\/div>\n\n    <\/div>\n<\/div>\n\n<script>\n    \/\/ --- SLOW MOTION GRAPEVINE NETWORK ---\n    (function() {\n        const canvas = document.getElementById('kn-network-canvas');\n        const ctx = canvas.getContext('2d');\n        let width, height; let particles = []; let mouse = { x: -1000, y: -1000, radius: 200 }; \n        function resize() { width = canvas.width = canvas.offsetWidth; height = canvas.height = canvas.offsetHeight; }\n        class Particle {\n            constructor() { this.x = Math.random() * width; this.y = Math.random() * height; this.vx = (Math.random() - 0.5) * 0.4; this.vy = (Math.random() - 0.5) * 0.4; this.size = Math.random() * 2 + 1; }\n            update() { this.x += this.vx; this.y += this.vy; if (this.x < 0) this.x = width; if (this.x > width) this.x = 0; if (this.y < 0) this.y = height; if (this.y > height) this.y = 0; let dx = mouse.x - this.x; let dy = mouse.y - this.y; let distance = Math.sqrt(dx*dx + dy*dy); if (distance < mouse.radius) { let force = (mouse.radius - distance) \/ mouse.radius; this.x += (dx \/ distance) * force * 1.5; this.y += (dy \/ distance) * force * 1.5; } }\n            draw() { ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fillStyle = '#D4AF37'; ctx.fill(); }\n        }\n        function connect() { for (let a = 0; a < particles.length; a++) { for (let b = a; b < particles.length; b++) { let dx = particles[a].x - particles[b].x; let dy = particles[a].y - particles[b].y; let distance = dx * dx + dy * dy; if (distance < (130 * 130)) { let opacity = 1 - (distance \/ 18000); ctx.strokeStyle = 'rgba(212, 175, 55,' + (opacity * 0.4) + ')'; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(particles[a].x, particles[a].y); ctx.lineTo(particles[b].x, particles[b].y); ctx.stroke(); } } } }\n        function init() { resize(); particles = []; for (let i = 0; i < 80; i++) { particles.push(new Particle()); } }\n        function animate() { ctx.clearRect(0, 0, width, height); for (let i = 0; i < particles.length; i++) { particles[i].update(); particles[i].draw(); } connect(); requestAnimationFrame(animate); }\n        window.addEventListener('resize', init);\n        const section = document.getElementById('knSection');\n        section.addEventListener('mousemove', (e) => { const rect = section.getBoundingClientRect(); mouse.x = e.clientX - rect.left; mouse.y = e.clientY - rect.top; });\n        section.addEventListener('mouseleave', () => { mouse.x = -1000; mouse.y = -1000; });\n        init(); animate();\n    })();\n<\/script>\n\n\n\n<style>\n    \/* --- 1. FONTS & ROOTS --- *\/\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Cinzel:wght@500;700;900&family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=El+Messiri:wght@400;700&family=Montserrat:wght@300;400;500;700&display=swap');\n\n    :root {\n        --gold: #D4AF37;\n        --gold-bright: #F9E58A;\n        --black: #050505;\n    }\n\n    \/* --- 2. MAIN CONTAINER --- *\/\n    .kn-section-wrapper-02 {\n        position: relative;\n        background-color: var(--black);\n        overflow: hidden;\n        padding: 140px 5%;\n        min-height: 850px;\n        display: flex; align-items: center; justify-content: center;\n        border-bottom: 1px solid #1a1a1a;\n        font-family: 'Cinzel', serif;\n    }\n\n    \/* --- 3. CANVAS (BACKGROUND) --- *\/\n    #kn-network-canvas-02 {\n        position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none;\n    }\n\n    \/* --- 4. LAYOUT GRID --- *\/\n    .kn-grid {\n        display: flex; width: 100%; max-width: 1500px; position: relative; z-index: 5;\n        align-items: center; justify-content: space-between; gap: 60px; flex-wrap: wrap;\n    }\n    [dir=\"rtl\"] .kn-grid { flex-direction: row-reverse; }\n\n    \/* --- 5. CONTENT STACK --- *\/\n    .kn-content { \n        flex: 1; min-width: 350px; position: relative; \n        display: flex; flex-direction: column; gap: 50px; \n        padding-top: 30px;\n    }\n\n    \/* USP BADGE *\/\n    .kn-usp-badge {\n        position: absolute; top: -50px; left: 0;\n        display: inline-flex; align-items: center;\n        padding: 10px 25px;\n        background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(5, 5, 5, 0.8));\n        border: 2px solid var(--gold);\n        border-radius: 4px;\n        box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);\n        animation: badgePulse 4s infinite ease-in-out;\n    }\n    [dir=\"rtl\"] .kn-usp-badge { left: auto; right: 0; }\n\n    .kn-usp-icon { color: var(--gold-bright); font-size: 1.2rem; margin-right: 10px; }\n    [dir=\"rtl\"] .kn-usp-icon { margin-right: 0; margin-left: 10px; }\n\n    .kn-usp-text {\n        font-family: 'Cinzel', serif; color: var(--gold-bright); font-weight: 700;\n        text-transform: uppercase; letter-spacing: 2px; font-size: 0.9rem;\n    }\n    .kn-usp-ar { display: none; font-family: 'El Messiri', sans-serif; }\n    [dir=\"rtl\"] .kn-usp-en { display: none; }\n    [dir=\"rtl\"] .kn-usp-ar { display: inline-block; }\n\n    @keyframes badgePulse {\n        0%, 100% { box-shadow: 0 0 20px rgba(212, 175, 55, 0.2); border-color: var(--gold); }\n        50% { box-shadow: 0 0 40px rgba(212, 175, 55, 0.5); border-color: var(--gold-bright); }\n    }\n\n    \/* BACKGROUND \"02\" *\/\n    .kn-number {\n        font-family: 'Cinzel', serif; font-size: 20rem; font-weight: 900; line-height: 1;\n        color: rgba(212, 175, 55, 0.02); -webkit-text-stroke: 2px rgba(212, 175, 55, 0.25);\n        position: absolute; top: -120px; left: -90px; z-index: -1; pointer-events: none;\n        animation: subtleGlowPulse 5s ease-in-out infinite;\n    }\n    [dir=\"rtl\"] .kn-number { left: auto; right: -90px; }\n\n    @keyframes subtleGlowPulse {\n        0%, 100% { opacity: 0.4; filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.1)); }\n        50% { opacity: 0.8; filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.3)); }\n    }\n\n    \/* --- 6. STRICT CSS SWAP SYSTEM --- *\/\n    .kn-swap-container { display: grid; grid-template-areas: \"stack\"; align-items: center; cursor: pointer; }\n    .kn-lang-layer { grid-area: stack; transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); }\n    \n    [dir=\"ltr\"] .kn-en-title, [dir=\"ltr\"] .kn-en-desc { opacity: 1; transform: translateY(0); filter: blur(0); z-index: 2; }\n    [dir=\"ltr\"] .kn-ar-title, [dir=\"ltr\"] .kn-ar-desc { opacity: 0; transform: translateY(20px); filter: blur(10px); z-index: 1; }\n    [dir=\"ltr\"] .kn-swap-container:hover .kn-en-title, [dir=\"ltr\"] .kn-swap-container:hover .kn-en-desc { opacity: 0; transform: translateY(-20px); filter: blur(10px); }\n    [dir=\"ltr\"] .kn-swap-container:hover .kn-ar-title, [dir=\"ltr\"] .kn-swap-container:hover .kn-ar-desc { opacity: 1; transform: translateY(0); filter: blur(0); }\n\n    [dir=\"rtl\"] .kn-en-title, [dir=\"rtl\"] .kn-en-desc { opacity: 0; transform: translateY(20px); filter: blur(10px); z-index: 1; }\n    [dir=\"rtl\"] .kn-ar-title, [dir=\"rtl\"] .kn-ar-desc { opacity: 1; transform: translateY(0); filter: blur(0); z-index: 2; }\n    [dir=\"rtl\"] .kn-swap-container:hover .kn-ar-title, [dir=\"rtl\"] .kn-swap-container:hover .kn-ar-desc { opacity: 0; transform: translateY(-20px); filter: blur(10px); }\n    [dir=\"rtl\"] .kn-swap-container:hover .kn-en-title, [dir=\"rtl\"] .kn-swap-container:hover .kn-en-desc { opacity: 1; transform: translateY(0); filter: blur(0); }\n\n    \/* TYPOGRAPHY *\/\n    .kn-heading h2 { font-size: 4rem; margin: 0; line-height: 1.1; text-transform: uppercase; }\n    .kn-en-title { color: #ffffff; text-shadow: 0 0 30px rgba(0,0,0,0.8); }\n    .kn-ar-title { font-family: 'El Messiri', sans-serif; color: var(--gold); font-weight: 700; }\n    .kn-desc p { font-size: 1.15rem; line-height: 1.8; margin: 0; max-width: 600px; border-left: 3px solid var(--gold); padding-left: 25px; }\n    [dir=\"rtl\"] .kn-desc p { border-left: none; border-right: 3px solid var(--gold); padding-left: 0; padding-right: 25px; }\n    .kn-en-desc { font-family: 'Montserrat', sans-serif; color: #b0b0b0; }\n    .kn-en-desc strong { color: var(--gold-bright); font-weight: 700; text-shadow: 0 0 10px rgba(212, 175, 55, 0.3); }\n    .kn-ar-desc { font-family: 'El Messiri', sans-serif; color: #d4c07b; font-size: 1.3rem; }\n    .kn-ar-desc strong { color: var(--gold-bright); font-weight: 700; text-shadow: 0 0 10px rgba(212, 175, 55, 0.3); }\n\n    \/* --- 7. BUTTON WITH STRONG SHINE --- *\/\n    .kn-btn-wrapper { display: inline-block; }\n    .kn-btn { \n        text-decoration: none; display: inline-block; \n        padding: 18px 45px; \n        color: var(--gold); \n        font-family: 'Cinzel', serif; font-weight: 700; \n        text-transform: uppercase; letter-spacing: 3px; \n        border: 1px solid var(--gold); \n        position: relative; overflow: hidden; \n        transition: all 0.5s ease; \n        background: rgba(0,0,0,0.3); \n        box-shadow: 0 0 15px rgba(212, 175, 55, 0.1); \n    }\n    \n    .kn-btn::before { \n        content: ''; position: absolute; top: 0; left: 0; width: 0%; height: 100%; \n        background: var(--gold); transition: all 0.5s ease; z-index: -1; \n    }\n    \n    \/* === THE HIGH-CONTRAST SHINE EFFECT === *\/\n    .kn-btn::after { \n        content: ''; \n        position: absolute; \n        top: 0; \n        left: -150%; \n        width: 100%; \n        height: 100%; \n        \/* Bright White Shine *\/\n        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent); \n        transform: skewX(-20deg); \n        animation: shimmerSweep 3s infinite ease-in-out; \n        pointer-events: none; \n    }\n\n    @keyframes shimmerSweep { \n        0% { left: -150%; } \n        50% { left: 150%; } \/* Sweep across *\/\n        100% { left: 150%; } \/* Wait *\/\n    }\n\n    .kn-btn:hover::before { width: 100%; }\n    .kn-btn:hover { color: #000; box-shadow: 0 0 30px rgba(212, 175, 55, 0.5); }\n\n    \/* --- 8. VIDEO CARD (PROTECTED, UNBLURRED) --- *\/\n    .kn-video-wrapper { flex: 1.2; display: flex; justify-content: flex-end; perspective: 1200px; }\n    [dir=\"rtl\"] .kn-video-wrapper { justify-content: flex-start; }\n\n    .kn-card {\n        width: 100%; max-width: 650px; height: 380px;\n        background: #000; position: relative; overflow: hidden;\n        border: 1px solid #333; box-shadow: 0 40px 80px rgba(0,0,0,0.8);\n        transition: transform 0.6s ease; animation: subtleFloat 8s ease-in-out infinite;\n    }\n\n    \/* Protection Shield *\/\n    .kn-video-shield {\n        position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n        z-index: 10; background: transparent;\n    }\n\n    .kn-dust { position: absolute; width: 4px; height: 4px; background: var(--gold); border-radius: 50%; opacity: 0; animation: dustFloat 5s infinite; z-index: 5; pointer-events: none; }\n    .kn-dust:nth-child(1) { top: 80%; left: 10%; animation-delay: 0s; }\n    .kn-dust:nth-child(2) { top: 90%; left: 40%; animation-delay: 1.5s; }\n    .kn-dust:nth-child(3) { top: 70%; left: 80%; animation-delay: 3s; }\n\n    .kn-video { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: opacity 0.5s; }\n    .kn-card:hover .kn-video { opacity: 1; }\n    .kn-card:hover { border-color: var(--gold); }\n\n    @media (max-width: 900px) {\n        .kn-grid { flex-direction: column !important; gap: 40px; }\n        .kn-number { font-size: 10rem; top: -50px; left: 0; opacity: 0.2; }\n        .kn-heading h2 { font-size: 2.5rem; }\n        .kn-content { gap: 30px; padding-top: 50px; }\n        .kn-card { height: 260px; }\n        .kn-usp-badge { top: -30px; font-size: 0.8rem; padding: 8px 15px;}\n    }\n<\/style>\n\n<div class=\"kn-section-wrapper-02\" dir=\"ltr\" id=\"knSection02\">\n\n    <canvas id=\"kn-network-canvas-02\"><\/canvas>\n\n    <div class=\"kn-grid\">\n        \n        <div class=\"kn-content\">\n            <div class=\"kn-usp-badge\">\n                <span class=\"kn-usp-icon\">\u2726<\/span>\n                <span class=\"kn-usp-text kn-usp-en\">Kuwait&#8217;s Signature Craft<\/span>\n                <span class=\"kn-usp-text kn-usp-ar\">\u0628\u0635\u0645\u0629 \u0627\u0644\u0643\u0648\u064a\u062a \u0627\u0644\u0645\u062a\u0645\u064a\u0632\u0629<\/span>\n            <\/div>\n\n            <div class=\"kn-number\">02<\/div>\n\n            <div class=\"kn-swap-container kn-heading\">\n                <div class=\"kn-lang-layer kn-en-title\"><h2>Mobile App<br>Development<\/h2><\/div>\n                <div class=\"kn-lang-layer kn-ar-title\"><h2>\u062a\u0637\u0648\u064a\u0631<br>\u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0627\u0644\u062c\u0648\u0627\u0644<\/h2><\/div>\n            <\/div>\n\n            <div class=\"kn-swap-container kn-desc\">\n                <div class=\"kn-lang-layer kn-en-desc\">\n                    <p>This is our <strong>Signature Craft<\/strong>. We engineer Kuwait&#8217;s most powerful mobile ecosystems. From native iOS &#038; Android to cross-platform mastery, we build apps that don&#8217;t just function\u2014they <strong>dominate the App Store<\/strong>.<\/p>\n                <\/div>\n                <div class=\"kn-lang-layer kn-ar-desc\">\n                    <p>\u0647\u0630\u0647 \u0647\u064a <strong>\u0628\u0635\u0645\u062a\u0646\u0627 \u0627\u0644\u0641\u0631\u064a\u062f\u0629<\/strong>. \u0646\u062d\u0646 \u0646\u0635\u0645\u0645 \u0623\u0642\u0648\u0649 \u0627\u0644\u0623\u0646\u0638\u0645\u0629 \u0627\u0644\u0645\u062a\u0646\u0642\u0644\u0629 \u0641\u064a \u0627\u0644\u0643\u0648\u064a\u062a. \u0645\u0646 \u062a\u0637\u0628\u064a\u0642\u0627\u062a iOS \u0648 Android \u0627\u0644\u0623\u0635\u0644\u064a\u0629 \u0625\u0644\u0649 \u0627\u0644\u062d\u0644\u0648\u0644 \u0645\u062a\u0639\u062f\u062f\u0629 \u0627\u0644\u0645\u0646\u0635\u0627\u062a\u060c \u0646\u0628\u0646\u064a \u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0644\u0627 \u062a\u0643\u062a\u0641\u064a \u0628\u0627\u0644\u0639\u0645\u0644 \u0641\u0642\u0637\u060c \u0628\u0644 <strong>\u062a\u062a\u0635\u062f\u0631 \u0627\u0644\u0645\u062a\u0627\u062c\u0631 \u0627\u0644\u0631\u0642\u0645\u064a\u0629<\/strong>.<\/p>\n                <\/div>\n            <\/div>\n\n            <div class=\"kn-btn-wrapper\">\n                <a href=\"https:\/\/kuwaitnext.com\/contact\/\" class=\"kn-btn\">Start Project<\/a>\n            <\/div>\n        <\/div>\n\n        <div class=\"kn-video-wrapper\">\n            <div class=\"kn-card\">\n                <div class=\"kn-video-shield\" oncontextmenu=\"return false;\"><\/div>\n\n                <div class=\"kn-dust\"><\/div>\n                <div class=\"kn-dust\"><\/div>\n                <div class=\"kn-dust\"><\/div>\n                \n                <video class=\"kn-video\" autoplay loop muted playsinline oncontextmenu=\"return false;\">\n                    <source src=\"https:\/\/kuwaitnext.com\/wp-content\/uploads\/2026\/01\/Mobile_App_Development_Video_Creation.mp4\" type=\"video\/mp4\">\n                <\/video>\n            <\/div>\n        <\/div>\n\n    <\/div>\n<\/div>\n\n<script>\n    (function() {\n        const canvas = document.getElementById('kn-network-canvas-02');\n        const ctx = canvas.getContext('2d');\n        let width, height; let particles = []; let mouse = { x: -1000, y: -1000, radius: 200 }; \n        function resize() { width = canvas.width = canvas.offsetWidth; height = canvas.height = canvas.offsetHeight; }\n        class Particle {\n            constructor() { this.x = Math.random() * width; this.y = Math.random() * height; this.vx = (Math.random() - 0.5) * 0.4; this.vy = (Math.random() - 0.5) * 0.4; this.size = Math.random() * 2 + 1; }\n            update() { this.x += this.vx; this.y += this.vy; if (this.x < 0) this.x = width; if (this.x > width) this.x = 0; if (this.y < 0) this.y = height; if (this.y > height) this.y = 0; let dx = mouse.x - this.x; let dy = mouse.y - this.y; let distance = Math.sqrt(dx*dx + dy*dy); if (distance < mouse.radius) { let force = (mouse.radius - distance) \/ mouse.radius; this.x += (dx \/ distance) * force * 1.5; this.y += (dy \/ distance) * force * 1.5; } }\n            draw() { ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fillStyle = '#D4AF37'; ctx.fill(); }\n        }\n        function connect() { for (let a = 0; a < particles.length; a++) { for (let b = a; b < particles.length; b++) { let dx = particles[a].x - particles[b].x; let dy = particles[a].y - particles[b].y; let distance = dx * dx + dy * dy; if (distance < (130 * 130)) { let opacity = 1 - (distance \/ 18000); ctx.strokeStyle = 'rgba(212, 175, 55,' + (opacity * 0.4) + ')'; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(particles[a].x, particles[a].y); ctx.lineTo(particles[b].x, particles[b].y); ctx.stroke(); } } } }\n        function init() { resize(); particles = []; for (let i = 0; i < 80; i++) { particles.push(new Particle()); } }\n        function animate() { ctx.clearRect(0, 0, width, height); for (let i = 0; i < particles.length; i++) { particles[i].update(); particles[i].draw(); } connect(); requestAnimationFrame(animate); }\n        window.addEventListener('resize', init);\n        const section = document.getElementById('knSection02');\n        section.addEventListener('mousemove', (e) => { const rect = section.getBoundingClientRect(); mouse.x = e.clientX - rect.left; mouse.y = e.clientY - rect.top; });\n        section.addEventListener('mouseleave', () => { mouse.x = -1000; mouse.y = -1000; });\n        init(); animate();\n    })();\n<\/script>\n\n\n\n<style>\n    \/* --- 1. FONTS & ROOTS --- *\/\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Cinzel:wght@500;700;900&family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=El+Messiri:wght@400;700&family=Montserrat:wght@300;400;500;600;700&display=swap');\n\n    :root {\n        --gold: #D4AF37;\n        --gold-bright: #F9E58A;\n        --black: #050505;\n        --falcon-green: #39FF14; \/* Neon Green for Agent Falcon *\/\n    }\n\n    \/* --- 2. MAIN CONTAINER 03 --- *\/\n    .kn-section-wrapper-03 {\n        position: relative;\n        background-color: var(--black);\n        overflow: hidden;\n        padding: 140px 5%;\n        min-height: 850px;\n        display: flex; align-items: center; justify-content: center;\n        border-bottom: 1px solid #1a1a1a;\n        font-family: 'Cinzel', serif;\n    }\n\n    \/* --- 3. CANVAS (BACKGROUND) --- *\/\n    #kn-network-canvas-03 {\n        position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none;\n    }\n\n    \/* --- 4. LAYOUT GRID --- *\/\n    .kn-grid {\n        display: flex; width: 100%; max-width: 1500px; position: relative; z-index: 5;\n        align-items: center; justify-content: space-between; gap: 60px; flex-wrap: wrap;\n    }\n    [dir=\"rtl\"] .kn-grid { flex-direction: row-reverse; }\n\n    \/* --- 5. CONTENT STACK --- *\/\n    .kn-content { \n        flex: 1; min-width: 350px; position: relative; \n        display: flex; flex-direction: column; gap: 40px; \n        padding-top: 30px;\n    }\n\n    \/* \"DESIGN INTELLIGENCE\" BADGE *\/\n    .kn-usp-badge {\n        position: absolute; top: -50px; left: 0;\n        display: inline-flex; align-items: center;\n        padding: 10px 25px;\n        background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(5, 5, 5, 0.8));\n        border: 2px solid var(--gold);\n        border-radius: 4px;\n        box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);\n        animation: badgePulse 4s infinite ease-in-out;\n    }\n    [dir=\"rtl\"] .kn-usp-badge { left: auto; right: 0; }\n\n    .kn-usp-icon { color: var(--gold-bright); font-size: 1.2rem; margin-right: 10px; }\n    [dir=\"rtl\"] .kn-usp-icon { margin-right: 0; margin-left: 10px; }\n\n    .kn-usp-text {\n        font-family: 'Cinzel', serif; color: var(--gold-bright); font-weight: 700;\n        text-transform: uppercase; letter-spacing: 2px; font-size: 0.9rem;\n    }\n    .kn-usp-ar { display: none; font-family: 'El Messiri', sans-serif; }\n    [dir=\"rtl\"] .kn-usp-en { display: none; }\n    [dir=\"rtl\"] .kn-usp-ar { display: inline-block; }\n\n    \/* === AGENT FALCON GLOWING LINK === *\/\n    .kn-falcon-wrapper {\n        display: inline-block; margin-top: -10px; margin-bottom: 10px;\n    }\n    .kn-falcon-link {\n        font-family: 'Montserrat', sans-serif;\n        font-size: 1.1rem;\n        font-weight: 700;\n        color: var(--falcon-green);\n        text-transform: uppercase;\n        text-decoration: none;\n        letter-spacing: 2px;\n        position: relative;\n        transition: all 0.3s ease;\n        text-shadow: 0 0 10px rgba(57, 255, 20, 0.5);\n        display: inline-flex; align-items: center; gap: 10px;\n    }\n    .kn-falcon-link:hover {\n        text-shadow: 0 0 25px var(--falcon-green);\n        transform: translateX(5px);\n    }\n    [dir=\"rtl\"] .kn-falcon-link:hover { transform: translateX(-5px); }\n\n    .kn-falcon-dot {\n        width: 8px; height: 8px; background: var(--falcon-green);\n        border-radius: 50%; box-shadow: 0 0 10px var(--falcon-green);\n        animation: falconPulse 2s infinite;\n    }\n    @keyframes falconPulse { 0% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.5); } 100% { opacity: 0.5; transform: scale(1); } }\n\n    \/* BACKGROUND \"03\" *\/\n    .kn-number {\n        font-family: 'Cinzel', serif; font-size: 20rem; font-weight: 900; line-height: 1;\n        color: rgba(212, 175, 55, 0.02); -webkit-text-stroke: 2px rgba(212, 175, 55, 0.25);\n        position: absolute; top: -120px; left: -90px; z-index: -1; pointer-events: none;\n        animation: subtleGlowPulse 5s ease-in-out infinite;\n    }\n    [dir=\"rtl\"] .kn-number { left: auto; right: -90px; }\n\n    @keyframes subtleGlowPulse {\n        0%, 100% { opacity: 0.4; filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.1)); }\n        50% { opacity: 0.8; filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.3)); }\n    }\n\n    \/* --- 6. SWAP SYSTEM --- *\/\n    .kn-swap-container { display: grid; grid-template-areas: \"stack\"; align-items: center; cursor: pointer; }\n    .kn-lang-layer { grid-area: stack; transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); }\n    \n    [dir=\"ltr\"] .kn-en-title, [dir=\"ltr\"] .kn-en-desc { opacity: 1; transform: translateY(0); filter: blur(0); z-index: 2; }\n    [dir=\"ltr\"] .kn-ar-title, [dir=\"ltr\"] .kn-ar-desc { opacity: 0; transform: translateY(20px); filter: blur(10px); z-index: 1; }\n    [dir=\"ltr\"] .kn-swap-container:hover .kn-en-title, [dir=\"ltr\"] .kn-swap-container:hover .kn-en-desc { opacity: 0; transform: translateY(-20px); filter: blur(10px); }\n    [dir=\"ltr\"] .kn-swap-container:hover .kn-ar-title, [dir=\"ltr\"] .kn-swap-container:hover .kn-ar-desc { opacity: 1; transform: translateY(0); filter: blur(0); }\n\n    [dir=\"rtl\"] .kn-en-title, [dir=\"rtl\"] .kn-en-desc { opacity: 0; transform: translateY(20px); filter: blur(10px); z-index: 1; }\n    [dir=\"rtl\"] .kn-ar-title, [dir=\"rtl\"] .kn-ar-desc { opacity: 1; transform: translateY(0); filter: blur(0); z-index: 2; }\n    [dir=\"rtl\"] .kn-swap-container:hover .kn-ar-title, [dir=\"rtl\"] .kn-swap-container:hover .kn-ar-desc { opacity: 0; transform: translateY(-20px); filter: blur(10px); }\n    [dir=\"rtl\"] .kn-swap-container:hover .kn-en-title, [dir=\"rtl\"] .kn-swap-container:hover .kn-en-desc { opacity: 1; transform: translateY(0); filter: blur(0); }\n\n    \/* TYPOGRAPHY *\/\n    .kn-heading h2 { font-size: 4rem; margin: 0; line-height: 1.1; text-transform: uppercase; }\n    .kn-en-title { color: #ffffff; text-shadow: 0 0 30px rgba(0,0,0,0.8); }\n    .kn-ar-title { font-family: 'El Messiri', sans-serif; color: var(--gold); font-weight: 700; }\n    \n    .kn-desc p { font-size: 1.15rem; line-height: 1.8; margin: 0; max-width: 600px; border-left: 3px solid var(--gold); padding-left: 25px; }\n    [dir=\"rtl\"] .kn-desc p { border-left: none; border-right: 3px solid var(--gold); padding-left: 0; padding-right: 25px; }\n    .kn-en-desc { font-family: 'Montserrat', sans-serif; color: #b0b0b0; }\n    .kn-en-desc strong { color: #fff; font-weight: 600; }\n    .kn-ar-desc { font-family: 'El Messiri', sans-serif; color: #d4c07b; font-size: 1.3rem; }\n\n    \/* --- 7. BUTTON WITH SHINING EFFECT --- *\/\n    .kn-btn-wrapper { display: inline-block; margin-top: 10px; }\n    .kn-btn { \n        text-decoration: none; display: inline-block; padding: 18px 45px; \n        color: var(--gold); font-family: 'Cinzel', serif; font-weight: 700; \n        text-transform: uppercase; letter-spacing: 3px; border: 1px solid var(--gold); \n        position: relative; overflow: hidden; transition: all 0.5s ease; \n        background: rgba(0,0,0,0.3); box-shadow: 0 0 15px rgba(212, 175, 55, 0.1); \n    }\n    .kn-btn::before { \n        content: ''; position: absolute; top: 0; left: 0; width: 0%; height: 100%; \n        background: var(--gold); transition: all 0.5s ease; z-index: -1; \n    }\n    .kn-btn::after { \n        content: ''; position: absolute; top: 0; left: -150%; width: 100%; height: 100%; \n        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent); \n        transform: skewX(-20deg); animation: shimmerSweep 3s infinite ease-in-out; \n        pointer-events: none; \n    }\n    @keyframes shimmerSweep { \n        0% { left: -150%; } 50% { left: 150%; } 100% { left: 150%; } \n    }\n    .kn-btn:hover::before { width: 100%; }\n    .kn-btn:hover { color: #000; box-shadow: 0 0 30px rgba(212, 175, 55, 0.5); }\n\n    \/* --- 8. VIDEO CARD --- *\/\n    .kn-video-wrapper { flex: 1.2; display: flex; justify-content: flex-end; perspective: 1200px; }\n    [dir=\"rtl\"] .kn-video-wrapper { justify-content: flex-start; }\n\n    .kn-card {\n        width: 100%; max-width: 650px; height: 380px;\n        background: #000; position: relative; overflow: hidden;\n        border: 1px solid #333; box-shadow: 0 40px 80px rgba(0,0,0,0.8);\n        transition: transform 0.6s ease; animation: subtleFloat 8s ease-in-out infinite;\n    }\n\n    .kn-video-shield {\n        position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n        z-index: 10; background: transparent;\n    }\n\n    .kn-dust { position: absolute; width: 4px; height: 4px; background: var(--gold); border-radius: 50%; opacity: 0; animation: dustFloat 5s infinite; z-index: 5; pointer-events: none; }\n    .kn-dust:nth-child(1) { top: 80%; left: 10%; animation-delay: 0s; }\n    .kn-dust:nth-child(2) { top: 90%; left: 40%; animation-delay: 1.5s; }\n    .kn-dust:nth-child(3) { top: 70%; left: 80%; animation-delay: 3s; }\n\n    .kn-video { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: opacity 0.5s; }\n    .kn-card:hover .kn-video { opacity: 1; }\n    .kn-card:hover { border-color: var(--gold); }\n\n    @media (max-width: 900px) {\n        .kn-grid { flex-direction: column !important; gap: 40px; }\n        .kn-number { font-size: 10rem; top: -50px; left: 0; opacity: 0.2; }\n        .kn-heading h2 { font-size: 2.5rem; }\n        .kn-content { gap: 30px; padding-top: 50px; }\n        .kn-card { height: 260px; }\n        .kn-usp-badge { top: -30px; font-size: 0.8rem; padding: 8px 15px;}\n    }\n<\/style>\n\n<div class=\"kn-section-wrapper-03\" dir=\"ltr\" id=\"knSection03\">\n\n    <canvas id=\"kn-network-canvas-03\"><\/canvas>\n\n    <div class=\"kn-grid\">\n        \n        <div class=\"kn-content\">\n            <div class=\"kn-usp-badge\">\n                <span class=\"kn-usp-icon\">\u2726<\/span>\n                <span class=\"kn-usp-text kn-usp-en\">Design Intelligence<\/span>\n                <span class=\"kn-usp-text kn-usp-ar\">\u0630\u0643\u0627\u0621 \u0627\u0644\u062a\u0635\u0645\u064a\u0645<\/span>\n            <\/div>\n\n            <div class=\"kn-number\">03<\/div>\n\n            <div class=\"kn-swap-container kn-heading\">\n                <div class=\"kn-lang-layer kn-en-title\"><h2>UI \/ UX<br>Design<\/h2><\/div>\n                <div class=\"kn-lang-layer kn-ar-title\"><h2>\u062a\u0635\u0645\u064a\u0645 \u0648\u0627\u062c\u0647\u0629<br>\u0648\u062a\u062c\u0631\u0628\u0629 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645<\/h2><\/div>\n            <\/div>\n\n            <div class=\"kn-falcon-wrapper\">\n                <a href=\"https:\/\/kuwaitnext.com\/agent-falcon\/\" class=\"kn-falcon-link\">\n                    <div class=\"kn-falcon-dot\"><\/div>\n                    <span class=\"kn-en-falcon\">Meet Agent Falcon<\/span>\n                    <span class=\"kn-ar-falcon\" style=\"display:none;\">\u062a\u0639\u0631\u0641 \u0639\u0644\u0649 \u0627\u0644\u0639\u0645\u064a\u0644 \u0641\u0627\u0644\u0643\u0648\u0646<\/span>\n                <\/a>\n            <\/div>\n\n            <div class=\"kn-swap-container kn-desc\">\n                <div class=\"kn-lang-layer kn-en-desc\">\n                    <p>We create <strong>Kuwait&#8217;s most unique digital experiences<\/strong>. Our designs are not just beautiful; they are guarded by the principles of privacy and precision. Featuring <strong>Agent Falcon<\/strong>, our guardian of data, we blend world-class aesthetics with ironclad security.<\/p>\n                <\/div>\n                <div class=\"kn-lang-layer kn-ar-desc\">\n                    <p>\u0646\u062d\u0646 \u0646\u0628\u062a\u0643\u0631 <strong>\u0627\u0644\u062a\u062c\u0627\u0631\u0628 \u0627\u0644\u0631\u0642\u0645\u064a\u0629 \u0627\u0644\u0623\u0643\u062b\u0631 \u062a\u0645\u064a\u0632\u0627\u064b \u0641\u064a \u0627\u0644\u0643\u0648\u064a\u062a<\/strong>. \u062a\u0635\u0627\u0645\u064a\u0645\u0646\u0627 \u0644\u064a\u0633\u062a \u062c\u0645\u064a\u0644\u0629 \u0641\u062d\u0633\u0628\u060c \u0628\u0644 \u0647\u064a \u0645\u062d\u0645\u064a\u0629 \u0628\u0645\u0628\u0627\u062f\u0626 \u0627\u0644\u062e\u0635\u0648\u0635\u064a\u0629 \u0648\u0627\u0644\u062f\u0642\u0629. \u0628\u0648\u062c\u0648\u062f <strong>\u0627\u0644\u0639\u0645\u064a\u0644 \u0641\u0627\u0644\u0643\u0648\u0646<\/strong>\u060c \u062d\u0627\u0631\u0633 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a\u060c \u0646\u0645\u0632\u062c \u0627\u0644\u062c\u0645\u0627\u0644\u064a\u0627\u062a \u0627\u0644\u0639\u0627\u0644\u0645\u064a\u0629 \u0645\u0639 \u0627\u0644\u0623\u0645\u0627\u0646 \u0627\u0644\u0633\u064a\u0628\u0631\u0627\u0646\u064a \u0627\u0644\u0635\u0627\u0631\u0645.<\/p>\n                <\/div>\n            <\/div>\n\n            <div class=\"kn-btn-wrapper\">\n                <a href=\"https:\/\/kuwaitnext.com\/contact\/\" class=\"kn-btn\">Start Project<\/a>\n            <\/div>\n        <\/div>\n\n        <div class=\"kn-video-wrapper\">\n            <div class=\"kn-card\">\n                <div class=\"kn-video-shield\" oncontextmenu=\"return false;\"><\/div>\n\n                <div class=\"kn-dust\"><\/div>\n                <div class=\"kn-dust\"><\/div>\n                <div class=\"kn-dust\"><\/div>\n                \n                <video class=\"kn-video\" autoplay loop muted playsinline oncontextmenu=\"return false;\">\n                    <source src=\"https:\/\/kuwaitnext.com\/wp-content\/uploads\/2026\/01\/UI_UX_Design_Section_Code.mp4\" type=\"video\/mp4\">\n                <\/video>\n            <\/div>\n        <\/div>\n\n    <\/div>\n<\/div>\n\n<script>\n    (function() {\n        \/* Canvas Animation 03 *\/\n        const canvas = document.getElementById('kn-network-canvas-03');\n        const ctx = canvas.getContext('2d');\n        let width, height; let particles = []; let mouse = { x: -1000, y: -1000, radius: 200 }; \n        function resize() { width = canvas.width = canvas.offsetWidth; height = canvas.height = canvas.offsetHeight; }\n        class Particle {\n            constructor() { this.x = Math.random() * width; this.y = Math.random() * height; this.vx = (Math.random() - 0.5) * 0.4; this.vy = (Math.random() - 0.5) * 0.4; this.size = Math.random() * 2 + 1; }\n            update() { this.x += this.vx; this.y += this.vy; if (this.x < 0) this.x = width; if (this.x > width) this.x = 0; if (this.y < 0) this.y = height; if (this.y > height) this.y = 0; let dx = mouse.x - this.x; let dy = mouse.y - this.y; let distance = Math.sqrt(dx*dx + dy*dy); if (distance < mouse.radius) { let force = (mouse.radius - distance) \/ mouse.radius; this.x += (dx \/ distance) * force * 1.5; this.y += (dy \/ distance) * force * 1.5; } }\n            draw() { ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fillStyle = '#D4AF37'; ctx.fill(); }\n        }\n        function connect() { for (let a = 0; a < particles.length; a++) { for (let b = a; b < particles.length; b++) { let dx = particles[a].x - particles[b].x; let dy = particles[a].y - particles[b].y; let distance = dx * dx + dy * dy; if (distance < (130 * 130)) { let opacity = 1 - (distance \/ 18000); ctx.strokeStyle = 'rgba(212, 175, 55,' + (opacity * 0.4) + ')'; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(particles[a].x, particles[a].y); ctx.lineTo(particles[b].x, particles[b].y); ctx.stroke(); } } } }\n        function init() { resize(); particles = []; for (let i = 0; i < 80; i++) { particles.push(new Particle()); } }\n        function animate() { ctx.clearRect(0, 0, width, height); for (let i = 0; i < particles.length; i++) { particles[i].update(); particles[i].draw(); } connect(); requestAnimationFrame(animate); }\n        window.addEventListener('resize', init);\n        const section = document.getElementById('knSection03');\n        section.addEventListener('mousemove', (e) => { const rect = section.getBoundingClientRect(); mouse.x = e.clientX - rect.left; mouse.y = e.clientY - rect.top; });\n        section.addEventListener('mouseleave', () => { mouse.x = -1000; mouse.y = -1000; });\n        init(); animate();\n\n        \/* Agent Falcon Text Swap Script *\/\n        const falconEn = document.querySelector('.kn-en-falcon');\n        const falconAr = document.querySelector('.kn-ar-falcon');\n        \n        \/\/ Simple MutationObserver to watch for dir changes on the wrapper\n        const observer = new MutationObserver((mutations) => {\n            mutations.forEach((mutation) => {\n                if (mutation.type === \"attributes\" && mutation.attributeName === \"dir\") {\n                    const dir = section.getAttribute('dir');\n                    if(dir === 'rtl') {\n                        falconEn.style.display = 'none';\n                        falconAr.style.display = 'inline';\n                    } else {\n                        falconEn.style.display = 'inline';\n                        falconAr.style.display = 'none';\n                    }\n                }\n            });\n        });\n        observer.observe(section, { attributes: true });\n\n        \/\/ Initial check\n        if(section.getAttribute('dir') === 'rtl') {\n            falconEn.style.display = 'none';\n            falconAr.style.display = 'inline';\n        }\n    })();\n<\/script>\n\n\n\n<style>\n    \/* --- 1. FONTS & ROOTS (Global) --- *\/\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Cinzel:wght@500;700;900&family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=El+Messiri:wght@400;700&family=Montserrat:wght@300;400;500;700&display=swap');\n\n    :root {\n        --gold: #D4AF37;\n        --gold-bright: #F9E58A;\n        --black: #050505;\n    }\n\n    \/* --- 2. MAIN CONTAINER 04 --- *\/\n    .kn-section-wrapper-04 {\n        position: relative;\n        background-color: var(--black);\n        overflow: hidden;\n        padding: 140px 5%;\n        min-height: 850px;\n        display: flex; align-items: center; justify-content: center;\n        border-bottom: 1px solid #1a1a1a;\n        font-family: 'Cinzel', serif;\n    }\n\n    \/* --- 3. CANVAS (BACKGROUND) --- *\/\n    #kn-network-canvas-04 {\n        position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none;\n    }\n\n    \/* --- 4. LAYOUT GRID --- *\/\n    .kn-grid {\n        display: flex; width: 100%; max-width: 1500px; position: relative; z-index: 5;\n        align-items: center; justify-content: space-between; gap: 60px; flex-wrap: wrap;\n    }\n    [dir=\"rtl\"] .kn-grid { flex-direction: row-reverse; }\n\n    \/* --- 5. CONTENT STACK --- *\/\n    .kn-content { \n        flex: 1; min-width: 350px; position: relative; \n        display: flex; flex-direction: column; gap: 50px; \n        padding-top: 30px;\n    }\n\n    \/* COMMERCE ENGINE BADGE *\/\n    .kn-usp-badge {\n        position: absolute; top: -50px; left: 0;\n        display: inline-flex; align-items: center;\n        padding: 10px 25px;\n        background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(5, 5, 5, 0.8));\n        border: 2px solid var(--gold);\n        border-radius: 4px;\n        box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);\n        animation: badgePulse 4s infinite ease-in-out;\n    }\n    [dir=\"rtl\"] .kn-usp-badge { left: auto; right: 0; }\n\n    .kn-usp-icon { color: var(--gold-bright); font-size: 1.2rem; margin-right: 10px; }\n    [dir=\"rtl\"] .kn-usp-icon { margin-right: 0; margin-left: 10px; }\n\n    .kn-usp-text {\n        font-family: 'Cinzel', serif; color: var(--gold-bright); font-weight: 700;\n        text-transform: uppercase; letter-spacing: 2px; font-size: 0.9rem;\n    }\n    .kn-usp-ar { display: none; font-family: 'El Messiri', sans-serif; }\n    [dir=\"rtl\"] .kn-usp-en { display: none; }\n    [dir=\"rtl\"] .kn-usp-ar { display: inline-block; }\n\n    @keyframes badgePulse {\n        0%, 100% { box-shadow: 0 0 20px rgba(212, 175, 55, 0.2); border-color: var(--gold); }\n        50% { box-shadow: 0 0 40px rgba(212, 175, 55, 0.5); border-color: var(--gold-bright); }\n    }\n\n    \/* BACKGROUND \"04\" *\/\n    .kn-number {\n        font-family: 'Cinzel', serif; font-size: 20rem; font-weight: 900; line-height: 1;\n        color: rgba(212, 175, 55, 0.02); -webkit-text-stroke: 2px rgba(212, 175, 55, 0.25);\n        position: absolute; top: -120px; left: -90px; z-index: -1; pointer-events: none;\n        animation: subtleGlowPulse 5s ease-in-out infinite;\n    }\n    [dir=\"rtl\"] .kn-number { left: auto; right: -90px; }\n\n    @keyframes subtleGlowPulse {\n        0%, 100% { opacity: 0.4; filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.1)); }\n        50% { opacity: 0.8; filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.3)); }\n    }\n\n    \/* --- 6. SWAP SYSTEM --- *\/\n    .kn-swap-container { display: grid; grid-template-areas: \"stack\"; align-items: center; cursor: pointer; }\n    .kn-lang-layer { grid-area: stack; transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); }\n    \n    [dir=\"ltr\"] .kn-en-title, [dir=\"ltr\"] .kn-en-desc { opacity: 1; transform: translateY(0); filter: blur(0); z-index: 2; }\n    [dir=\"ltr\"] .kn-ar-title, [dir=\"ltr\"] .kn-ar-desc { opacity: 0; transform: translateY(20px); filter: blur(10px); z-index: 1; }\n    [dir=\"ltr\"] .kn-swap-container:hover .kn-en-title, [dir=\"ltr\"] .kn-swap-container:hover .kn-en-desc { opacity: 0; transform: translateY(-20px); filter: blur(10px); }\n    [dir=\"ltr\"] .kn-swap-container:hover .kn-ar-title, [dir=\"ltr\"] .kn-swap-container:hover .kn-ar-desc { opacity: 1; transform: translateY(0); filter: blur(0); }\n\n    [dir=\"rtl\"] .kn-en-title, [dir=\"rtl\"] .kn-en-desc { opacity: 0; transform: translateY(20px); filter: blur(10px); z-index: 1; }\n    [dir=\"rtl\"] .kn-ar-title, [dir=\"rtl\"] .kn-ar-desc { opacity: 1; transform: translateY(0); filter: blur(0); z-index: 2; }\n    [dir=\"rtl\"] .kn-swap-container:hover .kn-ar-title, [dir=\"rtl\"] .kn-swap-container:hover .kn-ar-desc { opacity: 0; transform: translateY(-20px); filter: blur(10px); }\n    [dir=\"rtl\"] .kn-swap-container:hover .kn-en-title, [dir=\"rtl\"] .kn-swap-container:hover .kn-en-desc { opacity: 1; transform: translateY(0); filter: blur(0); }\n\n    \/* TYPOGRAPHY *\/\n    .kn-heading h2 { font-size: 4rem; margin: 0; line-height: 1.1; text-transform: uppercase; }\n    .kn-en-title { color: #ffffff; text-shadow: 0 0 30px rgba(0,0,0,0.8); }\n    .kn-ar-title { font-family: 'El Messiri', sans-serif; color: var(--gold); font-weight: 700; }\n    \n    .kn-desc p { font-size: 1.15rem; line-height: 1.8; margin: 0; max-width: 600px; border-left: 3px solid var(--gold); padding-left: 25px; }\n    [dir=\"rtl\"] .kn-desc p { border-left: none; border-right: 3px solid var(--gold); padding-left: 0; padding-right: 25px; }\n    .kn-en-desc { font-family: 'Montserrat', sans-serif; color: #b0b0b0; }\n    .kn-en-desc strong { color: var(--gold-bright); font-weight: 700; text-shadow: 0 0 10px rgba(212, 175, 55, 0.3); }\n    .kn-ar-desc { font-family: 'El Messiri', sans-serif; color: #d4c07b; font-size: 1.3rem; }\n    .kn-ar-desc strong { color: var(--gold-bright); font-weight: 700; text-shadow: 0 0 10px rgba(212, 175, 55, 0.3); }\n\n    \/* --- 7. BUTTON WITH SHINING EFFECT --- *\/\n    .kn-btn-wrapper { display: inline-block; }\n    .kn-btn { \n        text-decoration: none; display: inline-block; padding: 18px 45px; \n        color: var(--gold); font-family: 'Cinzel', serif; font-weight: 700; \n        text-transform: uppercase; letter-spacing: 3px; border: 1px solid var(--gold); \n        position: relative; overflow: hidden; transition: all 0.5s ease; \n        background: rgba(0,0,0,0.3); box-shadow: 0 0 15px rgba(212, 175, 55, 0.1); \n    }\n    .kn-btn::before { \n        content: ''; position: absolute; top: 0; left: 0; width: 0%; height: 100%; \n        background: var(--gold); transition: all 0.5s ease; z-index: -1; \n    }\n    .kn-btn::after { \n        content: ''; position: absolute; top: 0; left: -150%; width: 100%; height: 100%; \n        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent); \n        transform: skewX(-20deg); animation: shimmerSweep 3s infinite ease-in-out; \n        pointer-events: none; \n    }\n    @keyframes shimmerSweep { \n        0% { left: -150%; } 50% { left: 150%; } 100% { left: 150%; } \n    }\n    .kn-btn:hover::before { width: 100%; }\n    .kn-btn:hover { color: #000; box-shadow: 0 0 30px rgba(212, 175, 55, 0.5); }\n\n    \/* --- 8. VIDEO CARD --- *\/\n    .kn-video-wrapper { flex: 1.2; display: flex; justify-content: flex-end; perspective: 1200px; }\n    [dir=\"rtl\"] .kn-video-wrapper { justify-content: flex-start; }\n\n    .kn-card {\n        width: 100%; max-width: 650px; height: 380px;\n        background: #000; position: relative; overflow: hidden;\n        border: 1px solid #333; box-shadow: 0 40px 80px rgba(0,0,0,0.8);\n        transition: transform 0.6s ease; animation: subtleFloat 8s ease-in-out infinite;\n    }\n\n    .kn-video-shield {\n        position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n        z-index: 10; background: transparent;\n    }\n\n    .kn-dust { position: absolute; width: 4px; height: 4px; background: var(--gold); border-radius: 50%; opacity: 0; animation: dustFloat 5s infinite; z-index: 5; pointer-events: none; }\n    .kn-dust:nth-child(1) { top: 80%; left: 10%; animation-delay: 0s; }\n    .kn-dust:nth-child(2) { top: 90%; left: 40%; animation-delay: 1.5s; }\n    .kn-dust:nth-child(3) { top: 70%; left: 80%; animation-delay: 3s; }\n\n    .kn-video { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: opacity 0.5s; }\n    .kn-card:hover .kn-video { opacity: 1; }\n    .kn-card:hover { border-color: var(--gold); }\n\n    @media (max-width: 900px) {\n        .kn-grid { flex-direction: column !important; gap: 40px; }\n        .kn-number { font-size: 10rem; top: -50px; left: 0; opacity: 0.2; }\n        .kn-heading h2 { font-size: 2.5rem; }\n        .kn-content { gap: 30px; padding-top: 50px; }\n        .kn-card { height: 260px; }\n        .kn-usp-badge { top: -30px; font-size: 0.8rem; padding: 8px 15px;}\n    }\n<\/style>\n\n<div class=\"kn-section-wrapper-04\" dir=\"ltr\" id=\"knSection04\">\n\n    <canvas id=\"kn-network-canvas-04\"><\/canvas>\n\n    <div class=\"kn-grid\">\n        \n        <div class=\"kn-content\">\n            <div class=\"kn-usp-badge\">\n                <span class=\"kn-usp-icon\">\u2726<\/span>\n                <span class=\"kn-usp-text kn-usp-en\">Kuwait&#8217;s Commerce Engine<\/span>\n                <span class=\"kn-usp-text kn-usp-ar\">\u0645\u062d\u0631\u0643 \u0627\u0644\u062a\u062c\u0627\u0631\u0629 \u0627\u0644\u0643\u0648\u064a\u062a\u064a<\/span>\n            <\/div>\n\n            <div class=\"kn-number\">04<\/div>\n\n            <div class=\"kn-swap-container kn-heading\">\n                <div class=\"kn-lang-layer kn-en-title\"><h2>E-Commerce<br>Solutions<\/h2><\/div>\n                <div class=\"kn-lang-layer kn-ar-title\"><h2>\u062d\u0644\u0648\u0644 \u0627\u0644\u062a\u062c\u0627\u0631\u0629<br>\u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629<\/h2><\/div>\n            <\/div>\n\n            <div class=\"kn-swap-container kn-desc\">\n                <div class=\"kn-lang-layer kn-en-desc\">\n                    <p>We don&#8217;t just build online stores; we <strong>digitize legacies<\/strong>. We transform traditional brick-and-mortar businesses into <strong>24\/7 global powerhouses<\/strong>. Our systems are engineered to dominate the Kuwaiti market, turning your inventory into a seamless, high-profit digital empire.<\/p>\n                <\/div>\n                <div class=\"kn-lang-layer kn-ar-desc\">\n                    <p>\u0646\u062d\u0646 \u0644\u0627 \u0646\u0628\u0646\u064a \u0645\u062a\u0627\u062c\u0631 \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 \u0641\u062d\u0633\u0628\u060c \u0628\u0644 <strong>\u0646\u0631\u0642\u0645\u0646 \u0627\u0644\u0625\u0631\u062b \u0627\u0644\u062a\u062c\u0627\u0631\u064a<\/strong>. \u0646\u062d\u0648\u0644 \u0627\u0644\u0645\u062a\u0627\u062c\u0631 \u0627\u0644\u062a\u0642\u0644\u064a\u062f\u064a\u0629 \u0625\u0644\u0649 <strong>\u0642\u0648\u0649 \u0639\u0627\u0644\u0645\u064a\u0629 \u062a\u0639\u0645\u0644 \u0639\u0644\u0649 \u0645\u062f\u0627\u0631 \u0627\u0644\u0633\u0627\u0639\u0629<\/strong>. \u0623\u0646\u0638\u0645\u062a\u0646\u0627 \u0645\u0635\u0645\u0645\u0629 \u0644\u0644\u0633\u064a\u0637\u0631\u0629 \u0639\u0644\u0649 \u0627\u0644\u0633\u0648\u0642 \u0627\u0644\u0643\u0648\u064a\u062a\u064a\u060c \u0648\u062a\u062d\u0648\u064a\u0644 \u0645\u062e\u0632\u0648\u0646\u0643 \u0625\u0644\u0649 \u0625\u0645\u0628\u0631\u0627\u0637\u0648\u0631\u064a\u0629 \u0631\u0642\u0645\u064a\u0629 \u0633\u0644\u0633\u0629 \u0648\u0639\u0627\u0644\u064a\u0629 \u0627\u0644\u0631\u0628\u062d\u064a\u0629.<\/p>\n                <\/div>\n            <\/div>\n\n            <div class=\"kn-btn-wrapper\">\n                <a href=\"https:\/\/kuwaitnext.com\/contact\/\" class=\"kn-btn\">Start Project<\/a>\n            <\/div>\n        <\/div>\n\n        <div class=\"kn-video-wrapper\">\n            <div class=\"kn-card\">\n                <div class=\"kn-video-shield\" oncontextmenu=\"return false;\"><\/div>\n\n                <div class=\"kn-dust\"><\/div>\n                <div class=\"kn-dust\"><\/div>\n                <div class=\"kn-dust\"><\/div>\n                \n                <video class=\"kn-video\" autoplay loop muted playsinline oncontextmenu=\"return false;\">\n                    <source src=\"https:\/\/kuwaitnext.com\/wp-content\/uploads\/2026\/01\/E_Commerce_Video_Generation_Request.mp4\" type=\"video\/mp4\">\n                <\/video>\n            <\/div>\n        <\/div>\n\n    <\/div>\n<\/div>\n\n<script>\n    (function() {\n        const canvas = document.getElementById('kn-network-canvas-04');\n        const ctx = canvas.getContext('2d');\n        let width, height; let particles = []; let mouse = { x: -1000, y: -1000, radius: 200 }; \n        function resize() { width = canvas.width = canvas.offsetWidth; height = canvas.height = canvas.offsetHeight; }\n        class Particle {\n            constructor() { this.x = Math.random() * width; this.y = Math.random() * height; this.vx = (Math.random() - 0.5) * 0.4; this.vy = (Math.random() - 0.5) * 0.4; this.size = Math.random() * 2 + 1; }\n            update() { this.x += this.vx; this.y += this.vy; if (this.x < 0) this.x = width; if (this.x > width) this.x = 0; if (this.y < 0) this.y = height; if (this.y > height) this.y = 0; let dx = mouse.x - this.x; let dy = mouse.y - this.y; let distance = Math.sqrt(dx*dx + dy*dy); if (distance < mouse.radius) { let force = (mouse.radius - distance) \/ mouse.radius; this.x += (dx \/ distance) * force * 1.5; this.y += (dy \/ distance) * force * 1.5; } }\n            draw() { ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fillStyle = '#D4AF37'; ctx.fill(); }\n        }\n        function connect() { for (let a = 0; a < particles.length; a++) { for (let b = a; b < particles.length; b++) { let dx = particles[a].x - particles[b].x; let dy = particles[a].y - particles[b].y; let distance = dx * dx + dy * dy; if (distance < (130 * 130)) { let opacity = 1 - (distance \/ 18000); ctx.strokeStyle = 'rgba(212, 175, 55,' + (opacity * 0.4) + ')'; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(particles[a].x, particles[a].y); ctx.lineTo(particles[b].x, particles[b].y); ctx.stroke(); } } } }\n        function init() { resize(); particles = []; for (let i = 0; i < 80; i++) { particles.push(new Particle()); } }\n        function animate() { ctx.clearRect(0, 0, width, height); for (let i = 0; i < particles.length; i++) { particles[i].update(); particles[i].draw(); } connect(); requestAnimationFrame(animate); }\n        window.addEventListener('resize', init);\n        const section = document.getElementById('knSection04');\n        section.addEventListener('mousemove', (e) => { const rect = section.getBoundingClientRect(); mouse.x = e.clientX - rect.left; mouse.y = e.clientY - rect.top; });\n        section.addEventListener('mouseleave', () => { mouse.x = -1000; mouse.y = -1000; });\n        init(); animate();\n    })();\n<\/script>\n\n\n\n<style>\n    \/* --- 1. FONTS & ROOTS --- *\/\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Cinzel:wght@500;700;900&family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=El+Messiri:wght@400;700&family=Montserrat:wght@300;400;500;700&display=swap');\n\n    :root {\n        --gold: #D4AF37;\n        --gold-bright: #F9E58A;\n        --black: #050505;\n    }\n\n    \/* --- 2. MAIN CONTAINER 05 --- *\/\n    .kn-section-wrapper-05 {\n        position: relative;\n        background-color: var(--black);\n        overflow: hidden;\n        padding: 140px 5%;\n        min-height: 850px;\n        display: flex; align-items: center; justify-content: center;\n        border-bottom: 1px solid #1a1a1a;\n        font-family: 'Cinzel', serif;\n    }\n\n    \/* --- 3. CANVAS (BACKGROUND) --- *\/\n    #kn-network-canvas-05 {\n        position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none;\n    }\n\n    \/* --- 4. LAYOUT GRID --- *\/\n    .kn-grid {\n        display: flex; width: 100%; max-width: 1500px; position: relative; z-index: 5;\n        align-items: center; justify-content: space-between; gap: 60px; flex-wrap: wrap;\n    }\n    [dir=\"rtl\"] .kn-grid { flex-direction: row-reverse; }\n\n    \/* --- 5. CONTENT STACK --- *\/\n    .kn-content { \n        flex: 1; min-width: 350px; position: relative; \n        display: flex; flex-direction: column; gap: 50px; \n        padding-top: 30px;\n    }\n\n    \/* BADGE: DIGITAL AUTHORITY *\/\n    .kn-usp-badge {\n        position: absolute; top: -50px; left: 0;\n        display: inline-flex; align-items: center;\n        padding: 10px 25px;\n        background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(5, 5, 5, 0.8));\n        border: 2px solid var(--gold);\n        border-radius: 4px;\n        box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);\n        animation: badgePulse 4s infinite ease-in-out;\n    }\n    [dir=\"rtl\"] .kn-usp-badge { left: auto; right: 0; }\n\n    .kn-usp-icon { color: var(--gold-bright); font-size: 1.2rem; margin-right: 10px; }\n    [dir=\"rtl\"] .kn-usp-icon { margin-right: 0; margin-left: 10px; }\n\n    .kn-usp-text {\n        font-family: 'Cinzel', serif; color: var(--gold-bright); font-weight: 700;\n        text-transform: uppercase; letter-spacing: 2px; font-size: 0.9rem;\n    }\n    .kn-usp-ar { display: none; font-family: 'El Messiri', sans-serif; }\n    [dir=\"rtl\"] .kn-usp-en { display: none; }\n    [dir=\"rtl\"] .kn-usp-ar { display: inline-block; }\n\n    @keyframes badgePulse {\n        0%, 100% { box-shadow: 0 0 20px rgba(212, 175, 55, 0.2); border-color: var(--gold); }\n        50% { box-shadow: 0 0 40px rgba(212, 175, 55, 0.5); border-color: var(--gold-bright); }\n    }\n\n    \/* BACKGROUND \"05\" *\/\n    .kn-number {\n        font-family: 'Cinzel', serif; font-size: 20rem; font-weight: 900; line-height: 1;\n        color: rgba(212, 175, 55, 0.02); -webkit-text-stroke: 2px rgba(212, 175, 55, 0.25);\n        position: absolute; top: -120px; left: -90px; z-index: -1; pointer-events: none;\n        animation: subtleGlowPulse 5s ease-in-out infinite;\n    }\n    [dir=\"rtl\"] .kn-number { left: auto; right: -90px; }\n\n    @keyframes subtleGlowPulse {\n        0%, 100% { opacity: 0.4; filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.1)); }\n        50% { opacity: 0.8; filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.3)); }\n    }\n\n    \/* --- 6. SWAP SYSTEM --- *\/\n    .kn-swap-container { display: grid; grid-template-areas: \"stack\"; align-items: center; cursor: pointer; }\n    .kn-lang-layer { grid-area: stack; transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); }\n    \n    [dir=\"ltr\"] .kn-en-title, [dir=\"ltr\"] .kn-en-desc { opacity: 1; transform: translateY(0); filter: blur(0); z-index: 2; }\n    [dir=\"ltr\"] .kn-ar-title, [dir=\"ltr\"] .kn-ar-desc { opacity: 0; transform: translateY(20px); filter: blur(10px); z-index: 1; }\n    [dir=\"ltr\"] .kn-swap-container:hover .kn-en-title, [dir=\"ltr\"] .kn-swap-container:hover .kn-en-desc { opacity: 0; transform: translateY(-20px); filter: blur(10px); }\n    [dir=\"ltr\"] .kn-swap-container:hover .kn-ar-title, [dir=\"ltr\"] .kn-swap-container:hover .kn-ar-desc { opacity: 1; transform: translateY(0); filter: blur(0); }\n\n    [dir=\"rtl\"] .kn-en-title, [dir=\"rtl\"] .kn-en-desc { opacity: 0; transform: translateY(20px); filter: blur(10px); z-index: 1; }\n    [dir=\"rtl\"] .kn-ar-title, [dir=\"rtl\"] .kn-ar-desc { opacity: 1; transform: translateY(0); filter: blur(0); z-index: 2; }\n    [dir=\"rtl\"] .kn-swap-container:hover .kn-ar-title, [dir=\"rtl\"] .kn-swap-container:hover .kn-ar-desc { opacity: 0; transform: translateY(-20px); filter: blur(10px); }\n    [dir=\"rtl\"] .kn-swap-container:hover .kn-en-title, [dir=\"rtl\"] .kn-swap-container:hover .kn-en-desc { opacity: 1; transform: translateY(0); filter: blur(0); }\n\n    \/* TYPOGRAPHY *\/\n    .kn-heading h2 { font-size: 4rem; margin: 0; line-height: 1.1; text-transform: uppercase; }\n    .kn-en-title { color: #ffffff; text-shadow: 0 0 30px rgba(0,0,0,0.8); }\n    .kn-ar-title { font-family: 'El Messiri', sans-serif; color: var(--gold); font-weight: 700; }\n    \n    .kn-desc p { font-size: 1.15rem; line-height: 1.8; margin: 0; max-width: 600px; border-left: 3px solid var(--gold); padding-left: 25px; }\n    [dir=\"rtl\"] .kn-desc p { border-left: none; border-right: 3px solid var(--gold); padding-left: 0; padding-right: 25px; }\n    .kn-en-desc { font-family: 'Montserrat', sans-serif; color: #b0b0b0; }\n    .kn-en-desc strong { color: var(--gold-bright); font-weight: 700; text-shadow: 0 0 10px rgba(212, 175, 55, 0.3); }\n    .kn-ar-desc { font-family: 'El Messiri', sans-serif; color: #d4c07b; font-size: 1.3rem; }\n    .kn-ar-desc strong { color: var(--gold-bright); font-weight: 700; text-shadow: 0 0 10px rgba(212, 175, 55, 0.3); }\n\n    \/* --- 7. BUTTON WITH SHINING EFFECT --- *\/\n    .kn-btn-wrapper { display: inline-block; }\n    .kn-btn { \n        text-decoration: none; display: inline-block; padding: 18px 45px; \n        color: var(--gold); font-family: 'Cinzel', serif; font-weight: 700; \n        text-transform: uppercase; letter-spacing: 3px; border: 1px solid var(--gold); \n        position: relative; overflow: hidden; transition: all 0.5s ease; \n        background: rgba(0,0,0,0.3); box-shadow: 0 0 15px rgba(212, 175, 55, 0.1); \n    }\n    .kn-btn::before { \n        content: ''; position: absolute; top: 0; left: 0; width: 0%; height: 100%; \n        background: var(--gold); transition: all 0.5s ease; z-index: -1; \n    }\n    .kn-btn::after { \n        content: ''; position: absolute; top: 0; left: -150%; width: 100%; height: 100%; \n        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent); \n        transform: skewX(-20deg); animation: shimmerSweep 3s infinite ease-in-out; \n        pointer-events: none; \n    }\n    @keyframes shimmerSweep { \n        0% { left: -150%; } 50% { left: 150%; } 100% { left: 150%; } \n    }\n    .kn-btn:hover::before { width: 100%; }\n    .kn-btn:hover { color: #000; box-shadow: 0 0 30px rgba(212, 175, 55, 0.5); }\n\n    \/* --- 8. VIDEO CARD --- *\/\n    .kn-video-wrapper { flex: 1.2; display: flex; justify-content: flex-end; perspective: 1200px; }\n    [dir=\"rtl\"] .kn-video-wrapper { justify-content: flex-start; }\n\n    .kn-card {\n        width: 100%; max-width: 650px; height: 380px;\n        background: #000; position: relative; overflow: hidden;\n        border: 1px solid #333; box-shadow: 0 40px 80px rgba(0,0,0,0.8);\n        transition: transform 0.6s ease; animation: subtleFloat 8s ease-in-out infinite;\n    }\n\n    .kn-video-shield {\n        position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n        z-index: 10; background: transparent;\n    }\n\n    .kn-dust { position: absolute; width: 4px; height: 4px; background: var(--gold); border-radius: 50%; opacity: 0; animation: dustFloat 5s infinite; z-index: 5; pointer-events: none; }\n    .kn-dust:nth-child(1) { top: 80%; left: 10%; animation-delay: 0s; }\n    .kn-dust:nth-child(2) { top: 90%; left: 40%; animation-delay: 1.5s; }\n    .kn-dust:nth-child(3) { top: 70%; left: 80%; animation-delay: 3s; }\n\n    .kn-video { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: opacity 0.5s; }\n    .kn-card:hover .kn-video { opacity: 1; }\n    .kn-card:hover { border-color: var(--gold); }\n\n    @media (max-width: 900px) {\n        .kn-grid { flex-direction: column !important; gap: 40px; }\n        .kn-number { font-size: 10rem; top: -50px; left: 0; opacity: 0.2; }\n        .kn-heading h2 { font-size: 2.5rem; }\n        .kn-content { gap: 30px; padding-top: 50px; }\n        .kn-card { height: 260px; }\n        .kn-usp-badge { top: -30px; font-size: 0.8rem; padding: 8px 15px;}\n    }\n<\/style>\n\n<div class=\"kn-section-wrapper-05\" dir=\"ltr\" id=\"knSection05\">\n\n    <canvas id=\"kn-network-canvas-05\"><\/canvas>\n\n    <div class=\"kn-grid\">\n        \n        <div class=\"kn-content\">\n            <div class=\"kn-usp-badge\">\n                <span class=\"kn-usp-icon\">\u2726<\/span>\n                <span class=\"kn-usp-text kn-usp-en\">Kuwait&#8217;s Digital Authority<\/span>\n                <span class=\"kn-usp-text kn-usp-ar\">\u0633\u0644\u0637\u0629 \u0627\u0644\u0643\u0648\u064a\u062a \u0627\u0644\u0631\u0642\u0645\u064a\u0629<\/span>\n            <\/div>\n\n            <div class=\"kn-number\">05<\/div>\n\n            <div class=\"kn-swap-container kn-heading\">\n                <div class=\"kn-lang-layer kn-en-title\"><h2>SEO &#038; Digital<br>Marketing<\/h2><\/div>\n                <div class=\"kn-lang-layer kn-ar-title\"><h2>\u062a\u062d\u0633\u064a\u0646 \u0645\u062d\u0631\u0643\u0627\u062a \u0627\u0644\u0628\u062d\u062b<br>\u0648\u0627\u0644\u062a\u0633\u0648\u064a\u0642 \u0627\u0644\u0631\u0642\u0645\u064a<\/h2><\/div>\n            <\/div>\n\n            <div class=\"kn-swap-container kn-desc\">\n                <div class=\"kn-lang-layer kn-en-desc\">\n                    <p>In a market driven by prestige, visibility is power. We ensure your brand doesn&#8217;t just participate\u2014it <strong>dominates the search results<\/strong>. We secure your digital sovereignty, placing your business at the top of Google and in the minds of every potential client in Kuwait.<\/p>\n                <\/div>\n                <div class=\"kn-lang-layer kn-ar-desc\">\n                    <p>\u0641\u064a \u0633\u0648\u0642 \u064a\u062d\u0631\u0643\u0647 \u0627\u0644\u062a\u0645\u064a\u0632\u060c \u0627\u0644\u0638\u0647\u0648\u0631 \u0647\u0648 \u0627\u0644\u0642\u0648\u0629. \u0646\u062d\u0646 \u0646\u0636\u0645\u0646 \u0623\u0646 \u0639\u0644\u0627\u0645\u062a\u0643 \u0627\u0644\u062a\u062c\u0627\u0631\u064a\u0629 \u0644\u0627 \u062a\u0634\u0627\u0631\u0643 \u0641\u062d\u0633\u0628\u060c \u0628\u0644 <strong>\u062a\u062a\u0635\u062f\u0631 \u0646\u062a\u0627\u0626\u062c \u0627\u0644\u0628\u062d\u062b<\/strong>. \u0646\u062d\u0646 \u0646\u0624\u0645\u0646 \u0633\u064a\u0627\u062f\u062a\u0643 \u0627\u0644\u0631\u0642\u0645\u064a\u0629\u060c \u0648\u0646\u0636\u0639 \u0639\u0645\u0644\u0643 \u0641\u064a \u0642\u0645\u0629 \u062c\u0648\u062c\u0644 \u0648\u0641\u064a \u0623\u0630\u0647\u0627\u0646 \u0643\u0644 \u0639\u0645\u064a\u0644 \u0645\u062d\u062a\u0645\u0644 \u0641\u064a \u0627\u0644\u0643\u0648\u064a\u062a.<\/p>\n                <\/div>\n            <\/div>\n\n            <div class=\"kn-btn-wrapper\">\n                <a href=\"https:\/\/kuwaitnext.com\/contact\/\" class=\"kn-btn\">Start Project<\/a>\n            <\/div>\n        <\/div>\n\n        <div class=\"kn-video-wrapper\">\n            <div class=\"kn-card\">\n                <div class=\"kn-video-shield\" oncontextmenu=\"return false;\"><\/div>\n\n                <div class=\"kn-dust\"><\/div>\n                <div class=\"kn-dust\"><\/div>\n                <div class=\"kn-dust\"><\/div>\n                \n                <video class=\"kn-video\" autoplay loop muted playsinline oncontextmenu=\"return false;\">\n                    <source src=\"https:\/\/kuwaitnext.com\/wp-content\/uploads\/2026\/01\/SEO_Digital_Marketing_Video_Generation.mp4\" type=\"video\/mp4\">\n                <\/video>\n            <\/div>\n        <\/div>\n\n    <\/div>\n<\/div>\n\n<script>\n    (function() {\n        const canvas = document.getElementById('kn-network-canvas-05');\n        const ctx = canvas.getContext('2d');\n        let width, height; let particles = []; let mouse = { x: -1000, y: -1000, radius: 200 }; \n        function resize() { width = canvas.width = canvas.offsetWidth; height = canvas.height = canvas.offsetHeight; }\n        class Particle {\n            constructor() { this.x = Math.random() * width; this.y = Math.random() * height; this.vx = (Math.random() - 0.5) * 0.4; this.vy = (Math.random() - 0.5) * 0.4; this.size = Math.random() * 2 + 1; }\n            update() { this.x += this.vx; this.y += this.vy; if (this.x < 0) this.x = width; if (this.x > width) this.x = 0; if (this.y < 0) this.y = height; if (this.y > height) this.y = 0; let dx = mouse.x - this.x; let dy = mouse.y - this.y; let distance = Math.sqrt(dx*dx + dy*dy); if (distance < mouse.radius) { let force = (mouse.radius - distance) \/ mouse.radius; this.x += (dx \/ distance) * force * 1.5; this.y += (dy \/ distance) * force * 1.5; } }\n            draw() { ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fillStyle = '#D4AF37'; ctx.fill(); }\n        }\n        function connect() { for (let a = 0; a < particles.length; a++) { for (let b = a; b < particles.length; b++) { let dx = particles[a].x - particles[b].x; let dy = particles[a].y - particles[b].y; let distance = dx * dx + dy * dy; if (distance < (130 * 130)) { let opacity = 1 - (distance \/ 18000); ctx.strokeStyle = 'rgba(212, 175, 55,' + (opacity * 0.4) + ')'; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(particles[a].x, particles[a].y); ctx.lineTo(particles[b].x, particles[b].y); ctx.stroke(); } } } }\n        function init() { resize(); particles = []; for (let i = 0; i < 80; i++) { particles.push(new Particle()); } }\n        function animate() { ctx.clearRect(0, 0, width, height); for (let i = 0; i < particles.length; i++) { particles[i].update(); particles[i].draw(); } connect(); requestAnimationFrame(animate); }\n        window.addEventListener('resize', init);\n        const section = document.getElementById('knSection05');\n        section.addEventListener('mousemove', (e) => { const rect = section.getBoundingClientRect(); mouse.x = e.clientX - rect.left; mouse.y = e.clientY - rect.top; });\n        section.addEventListener('mouseleave', () => { mouse.x = -1000; mouse.y = -1000; });\n        init(); animate();\n    })();\n<\/script>\n\n\n\n<style>\n    \/* --- 1. FONTS & ROOTS (Global) --- *\/\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Cinzel:wght@500;700;900&family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=El+Messiri:wght@400;700&family=Montserrat:wght@300;400;500;700&display=swap');\n\n    :root {\n        --gold: #D4AF37;\n        --gold-bright: #F9E58A;\n        --black: #050505;\n    }\n\n    \/* --- 2. MAIN CONTAINER 06 --- *\/\n    .kn-section-wrapper-06 {\n        position: relative;\n        background-color: var(--black);\n        overflow: hidden;\n        padding: 140px 5%;\n        min-height: 850px;\n        display: flex; align-items: center; justify-content: center;\n        border-bottom: 1px solid #1a1a1a;\n        font-family: 'Cinzel', serif;\n    }\n\n    \/* --- 3. CANVAS (BACKGROUND) --- *\/\n    #kn-network-canvas-06 {\n        position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none;\n    }\n\n    \/* --- 4. LAYOUT GRID --- *\/\n    .kn-grid {\n        display: flex; width: 100%; max-width: 1500px; position: relative; z-index: 5;\n        align-items: center; justify-content: space-between; gap: 60px; flex-wrap: wrap;\n    }\n    [dir=\"rtl\"] .kn-grid { flex-direction: row-reverse; }\n\n    \/* --- 5. CONTENT STACK --- *\/\n    .kn-content { \n        flex: 1; min-width: 350px; position: relative; \n        display: flex; flex-direction: column; gap: 50px; \n        padding-top: 30px;\n    }\n\n    \/* BADGE: ETERNAL SUPPORT *\/\n    .kn-usp-badge {\n        position: absolute; top: -50px; left: 0;\n        display: inline-flex; align-items: center;\n        padding: 10px 25px;\n        background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(5, 5, 5, 0.8));\n        border: 2px solid var(--gold);\n        border-radius: 4px;\n        box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);\n        animation: badgePulse 4s infinite ease-in-out;\n    }\n    [dir=\"rtl\"] .kn-usp-badge { left: auto; right: 0; }\n\n    .kn-usp-icon { color: var(--gold-bright); font-size: 1.2rem; margin-right: 10px; }\n    [dir=\"rtl\"] .kn-usp-icon { margin-right: 0; margin-left: 10px; }\n\n    .kn-usp-text {\n        font-family: 'Cinzel', serif; color: var(--gold-bright); font-weight: 700;\n        text-transform: uppercase; letter-spacing: 2px; font-size: 0.9rem;\n    }\n    .kn-usp-ar { display: none; font-family: 'El Messiri', sans-serif; }\n    [dir=\"rtl\"] .kn-usp-en { display: none; }\n    [dir=\"rtl\"] .kn-usp-ar { display: inline-block; }\n\n    @keyframes badgePulse {\n        0%, 100% { box-shadow: 0 0 20px rgba(212, 175, 55, 0.2); border-color: var(--gold); }\n        50% { box-shadow: 0 0 40px rgba(212, 175, 55, 0.5); border-color: var(--gold-bright); }\n    }\n\n    \/* BACKGROUND \"06\" *\/\n    .kn-number {\n        font-family: 'Cinzel', serif; font-size: 20rem; font-weight: 900; line-height: 1;\n        color: rgba(212, 175, 55, 0.02); -webkit-text-stroke: 2px rgba(212, 175, 55, 0.25);\n        position: absolute; top: -120px; left: -90px; z-index: -1; pointer-events: none;\n        animation: subtleGlowPulse 5s ease-in-out infinite;\n    }\n    [dir=\"rtl\"] .kn-number { left: auto; right: -90px; }\n\n    @keyframes subtleGlowPulse {\n        0%, 100% { opacity: 0.4; filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.1)); }\n        50% { opacity: 0.8; filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.3)); }\n    }\n\n    \/* --- 6. SWAP SYSTEM --- *\/\n    .kn-swap-container { display: grid; grid-template-areas: \"stack\"; align-items: center; cursor: pointer; }\n    .kn-lang-layer { grid-area: stack; transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); }\n    \n    [dir=\"ltr\"] .kn-en-title, [dir=\"ltr\"] .kn-en-desc { opacity: 1; transform: translateY(0); filter: blur(0); z-index: 2; }\n    [dir=\"ltr\"] .kn-ar-title, [dir=\"ltr\"] .kn-ar-desc { opacity: 0; transform: translateY(20px); filter: blur(10px); z-index: 1; }\n    [dir=\"ltr\"] .kn-swap-container:hover .kn-en-title, [dir=\"ltr\"] .kn-swap-container:hover .kn-en-desc { opacity: 0; transform: translateY(-20px); filter: blur(10px); }\n    [dir=\"ltr\"] .kn-swap-container:hover .kn-ar-title, [dir=\"ltr\"] .kn-swap-container:hover .kn-ar-desc { opacity: 1; transform: translateY(0); filter: blur(0); }\n\n    [dir=\"rtl\"] .kn-en-title, [dir=\"rtl\"] .kn-en-desc { opacity: 0; transform: translateY(20px); filter: blur(10px); z-index: 1; }\n    [dir=\"rtl\"] .kn-ar-title, [dir=\"rtl\"] .kn-ar-desc { opacity: 1; transform: translateY(0); filter: blur(0); z-index: 2; }\n    [dir=\"rtl\"] .kn-swap-container:hover .kn-ar-title, [dir=\"rtl\"] .kn-swap-container:hover .kn-ar-desc { opacity: 0; transform: translateY(-20px); filter: blur(10px); }\n    [dir=\"rtl\"] .kn-swap-container:hover .kn-en-title, [dir=\"rtl\"] .kn-swap-container:hover .kn-en-desc { opacity: 1; transform: translateY(0); filter: blur(0); }\n\n    \/* TYPOGRAPHY *\/\n    .kn-heading h2 { font-size: 3.8rem; margin: 0; line-height: 1.1; text-transform: uppercase; }\n    .kn-en-title { color: #ffffff; text-shadow: 0 0 30px rgba(0,0,0,0.8); }\n    .kn-ar-title { font-family: 'El Messiri', sans-serif; color: var(--gold); font-weight: 700; }\n    \n    .kn-desc p { font-size: 1.15rem; line-height: 1.8; margin: 0; max-width: 600px; border-left: 3px solid var(--gold); padding-left: 25px; }\n    [dir=\"rtl\"] .kn-desc p { border-left: none; border-right: 3px solid var(--gold); padding-left: 0; padding-right: 25px; }\n    .kn-en-desc { font-family: 'Montserrat', sans-serif; color: #b0b0b0; }\n    .kn-en-desc strong { color: var(--gold-bright); font-weight: 700; text-shadow: 0 0 10px rgba(212, 175, 55, 0.3); }\n    .kn-ar-desc { font-family: 'El Messiri', sans-serif; color: #d4c07b; font-size: 1.3rem; }\n    .kn-ar-desc strong { color: var(--gold-bright); font-weight: 700; text-shadow: 0 0 10px rgba(212, 175, 55, 0.3); }\n\n    \/* --- 7. BUTTON WITH SHINING EFFECT --- *\/\n    .kn-btn-wrapper { display: inline-block; }\n    .kn-btn { \n        text-decoration: none; display: inline-block; padding: 18px 45px; \n        color: var(--gold); font-family: 'Cinzel', serif; font-weight: 700; \n        text-transform: uppercase; letter-spacing: 3px; border: 1px solid var(--gold); \n        position: relative; overflow: hidden; transition: all 0.5s ease; \n        background: rgba(0,0,0,0.3); box-shadow: 0 0 15px rgba(212, 175, 55, 0.1); \n    }\n    .kn-btn::before { \n        content: ''; position: absolute; top: 0; left: 0; width: 0%; height: 100%; \n        background: var(--gold); transition: all 0.5s ease; z-index: -1; \n    }\n    .kn-btn::after { \n        content: ''; position: absolute; top: 0; left: -150%; width: 100%; height: 100%; \n        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent); \n        transform: skewX(-20deg); animation: shimmerSweep 3s infinite ease-in-out; \n        pointer-events: none; \n    }\n    @keyframes shimmerSweep { \n        0% { left: -150%; } 50% { left: 150%; } 100% { left: 150%; } \n    }\n    .kn-btn:hover::before { width: 100%; }\n    .kn-btn:hover { color: #000; box-shadow: 0 0 30px rgba(212, 175, 55, 0.5); }\n\n    \/* --- 8. VIDEO CARD --- *\/\n    .kn-video-wrapper { flex: 1.2; display: flex; justify-content: flex-end; perspective: 1200px; }\n    [dir=\"rtl\"] .kn-video-wrapper { justify-content: flex-start; }\n\n    .kn-card {\n        width: 100%; max-width: 650px; height: 380px;\n        background: #000; position: relative; overflow: hidden;\n        border: 1px solid #333; box-shadow: 0 40px 80px rgba(0,0,0,0.8);\n        transition: transform 0.6s ease; animation: subtleFloat 8s ease-in-out infinite;\n    }\n\n    .kn-video-shield {\n        position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n        z-index: 10; background: transparent;\n    }\n\n    .kn-dust { position: absolute; width: 4px; height: 4px; background: var(--gold); border-radius: 50%; opacity: 0; animation: dustFloat 5s infinite; z-index: 5; pointer-events: none; }\n    .kn-dust:nth-child(1) { top: 80%; left: 10%; animation-delay: 0s; }\n    .kn-dust:nth-child(2) { top: 90%; left: 40%; animation-delay: 1.5s; }\n    .kn-dust:nth-child(3) { top: 70%; left: 80%; animation-delay: 3s; }\n\n    .kn-video { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: opacity 0.5s; }\n    .kn-card:hover .kn-video { opacity: 1; }\n    .kn-card:hover { border-color: var(--gold); }\n\n    @media (max-width: 900px) {\n        .kn-grid { flex-direction: column !important; gap: 40px; }\n        .kn-number { font-size: 10rem; top: -50px; left: 0; opacity: 0.2; }\n        .kn-heading h2 { font-size: 2.5rem; }\n        .kn-content { gap: 30px; padding-top: 50px; }\n        .kn-card { height: 260px; }\n        .kn-usp-badge { top: -30px; font-size: 0.8rem; padding: 8px 15px;}\n    }\n<\/style>\n\n<div class=\"kn-section-wrapper-06\" dir=\"ltr\" id=\"knSection06\">\n\n    <canvas id=\"kn-network-canvas-06\"><\/canvas>\n\n    <div class=\"kn-grid\">\n        \n        <div class=\"kn-content\">\n            <div class=\"kn-usp-badge\">\n                <span class=\"kn-usp-icon\">\u2726<\/span>\n                <span class=\"kn-usp-text kn-usp-en\">Kuwait&#8217;s Eternal Support<\/span>\n                <span class=\"kn-usp-text kn-usp-ar\">\u062f\u0639\u0645 \u0627\u0644\u0643\u0648\u064a\u062a \u0627\u0644\u062f\u0627\u0626\u0645<\/span>\n            <\/div>\n\n            <div class=\"kn-number\">06<\/div>\n\n            <div class=\"kn-swap-container kn-heading\">\n                <div class=\"kn-lang-layer kn-en-title\"><h2>Maintenance &#038;<br>Support<\/h2><\/div>\n                <div class=\"kn-lang-layer kn-ar-title\"><h2>\u0627\u0644\u0635\u064a\u0627\u0646\u0629<br>\u0648\u0627\u0644\u062f\u0639\u0645 \u0627\u0644\u0641\u0646\u064a<\/h2><\/div>\n            <\/div>\n\n            <div class=\"kn-swap-container kn-desc\">\n                <div class=\"kn-lang-layer kn-en-desc\">\n                    <p>For us, <strong>delivery is not a farewell<\/strong>; it is the beginning of a sovereign alliance. We don&#8217;t just launch and leave; we remain your vigilant guardians. Even after the contract concludes, our elite support ensures your digital assets remain <strong>flawless, secure, and dominant<\/strong>. You are not just a client; you are our partner in perpetuity.<\/p>\n                <\/div>\n                <div class=\"kn-lang-layer kn-ar-desc\">\n                    <p>\u0628\u0627\u0644\u0646\u0633\u0628\u0629 \u0644\u0646\u0627\u060c <strong>\u0627\u0644\u062a\u0633\u0644\u064a\u0645 \u0644\u064a\u0633 \u0648\u062f\u0627\u0639\u0627\u064b<\/strong>\u060c \u0628\u0644 \u0647\u0648 \u0628\u062f\u0627\u064a\u0629 \u062a\u062d\u0627\u0644\u0641 \u0633\u064a\u0627\u062f\u064a. \u0646\u062d\u0646 \u0644\u0627 \u0646\u0637\u0644\u0642 \u0645\u0634\u0631\u0648\u0639\u0643 \u0648\u0646\u0631\u062d\u0644\u060c \u0628\u0644 \u0646\u0628\u0642\u0649 \u062d\u0631\u0627\u0633\u0643 \u0627\u0644\u064a\u0642\u0638\u064a\u0646. \u062d\u062a\u0649 \u0628\u0639\u062f \u0627\u0646\u062a\u0647\u0627\u0621 \u0627\u0644\u0639\u0642\u062f\u060c \u064a\u0636\u0645\u0646 \u062f\u0639\u0645\u0646\u0627 \u0627\u0644\u0645\u062a\u0645\u064a\u0632 \u0628\u0642\u0627\u0621 \u0623\u0635\u0648\u0644\u0643 \u0627\u0644\u0631\u0642\u0645\u064a\u0629 <strong>\u062e\u0627\u0644\u064a\u0629 \u0645\u0646 \u0627\u0644\u0639\u064a\u0648\u0628\u060c \u0622\u0645\u0646\u0629\u060c \u0648\u0645\u0633\u064a\u0637\u0631\u0629<\/strong>. \u0623\u0646\u062a \u0644\u0633\u062a \u0645\u062c\u0631\u062f \u0639\u0645\u064a\u0644\u060c \u0628\u0644 \u0634\u0631\u064a\u0643\u0646\u0627 \u0627\u0644\u062f\u0627\u0626\u0645.<\/p>\n                <\/div>\n            <\/div>\n\n            <div class=\"kn-btn-wrapper\">\n                <a href=\"https:\/\/kuwaitnext.com\/contact\/\" class=\"kn-btn\">Start Project<\/a>\n            <\/div>\n        <\/div>\n\n        <div class=\"kn-video-wrapper\">\n            <div class=\"kn-card\">\n                <div class=\"kn-video-shield\" oncontextmenu=\"return false;\"><\/div>\n\n                <div class=\"kn-dust\"><\/div>\n                <div class=\"kn-dust\"><\/div>\n                <div class=\"kn-dust\"><\/div>\n                \n                <video class=\"kn-video\" autoplay loop muted playsinline oncontextmenu=\"return false;\">\n                    <source src=\"https:\/\/kuwaitnext.com\/wp-content\/uploads\/2026\/01\/Creating_Maintenance_Video_Loop.mp4\" type=\"video\/mp4\">\n                <\/video>\n            <\/div>\n        <\/div>\n\n    <\/div>\n<\/div>\n\n<script>\n    (function() {\n        const canvas = document.getElementById('kn-network-canvas-06');\n        const ctx = canvas.getContext('2d');\n        let width, height; let particles = []; let mouse = { x: -1000, y: -1000, radius: 200 }; \n        function resize() { width = canvas.width = canvas.offsetWidth; height = canvas.height = canvas.offsetHeight; }\n        class Particle {\n            constructor() { this.x = Math.random() * width; this.y = Math.random() * height; this.vx = (Math.random() - 0.5) * 0.4; this.vy = (Math.random() - 0.5) * 0.4; this.size = Math.random() * 2 + 1; }\n            update() { this.x += this.vx; this.y += this.vy; if (this.x < 0) this.x = width; if (this.x > width) this.x = 0; if (this.y < 0) this.y = height; if (this.y > height) this.y = 0; let dx = mouse.x - this.x; let dy = mouse.y - this.y; let distance = Math.sqrt(dx*dx + dy*dy); if (distance < mouse.radius) { let force = (mouse.radius - distance) \/ mouse.radius; this.x += (dx \/ distance) * force * 1.5; this.y += (dy \/ distance) * force * 1.5; } }\n            draw() { ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fillStyle = '#D4AF37'; ctx.fill(); }\n        }\n        function connect() { for (let a = 0; a < particles.length; a++) { for (let b = a; b < particles.length; b++) { let dx = particles[a].x - particles[b].x; let dy = particles[a].y - particles[b].y; let distance = dx * dx + dy * dy; if (distance < (130 * 130)) { let opacity = 1 - (distance \/ 18000); ctx.strokeStyle = 'rgba(212, 175, 55,' + (opacity * 0.4) + ')'; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(particles[a].x, particles[a].y); ctx.lineTo(particles[b].x, particles[b].y); ctx.stroke(); } } } }\n        function init() { resize(); particles = []; for (let i = 0; i < 80; i++) { particles.push(new Particle()); } }\n        function animate() { ctx.clearRect(0, 0, width, height); for (let i = 0; i < particles.length; i++) { particles[i].update(); particles[i].draw(); } connect(); requestAnimationFrame(animate); }\n        window.addEventListener('resize', init);\n        const section = document.getElementById('knSection06');\n        section.addEventListener('mousemove', (e) => { const rect = section.getBoundingClientRect(); mouse.x = e.clientX - rect.left; mouse.y = e.clientY - rect.top; });\n        section.addEventListener('mouseleave', () => { mouse.x = -1000; mouse.y = -1000; });\n        init(); animate();\n    })();\n<\/script>\n\n\n\n<style>\n    \/* --- 1. FONTS & ROOTS (Global) --- *\/\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Cinzel:wght@500;700;900&family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=El+Messiri:wght@400;700&family=Montserrat:wght@300;400;500;600;700&display=swap');\n\n    :root {\n        --gold: #D4AF37;\n        --gold-bright: #F9E58A;\n        --black: #050505;\n    }\n\n    \/* --- 2. MAIN CONTAINER 07 --- *\/\n    .kn-section-wrapper-07 {\n        position: relative;\n        background-color: var(--black);\n        overflow: hidden;\n        padding: 140px 5%;\n        min-height: 850px;\n        display: flex; align-items: center; justify-content: center;\n        border-bottom: 1px solid #1a1a1a;\n        font-family: 'Cinzel', serif;\n    }\n\n    \/* --- 3. CANVAS (BACKGROUND) --- *\/\n    #kn-network-canvas-07 {\n        position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none;\n    }\n\n    \/* --- 4. LAYOUT GRID --- *\/\n    .kn-grid {\n        display: flex; width: 100%; max-width: 1500px; position: relative; z-index: 5;\n        align-items: center; justify-content: space-between; gap: 60px; flex-wrap: wrap;\n    }\n    [dir=\"rtl\"] .kn-grid { flex-direction: row-reverse; }\n\n    \/* --- 5. CONTENT STACK --- *\/\n    .kn-content { \n        flex: 1; min-width: 350px; position: relative; \n        display: flex; flex-direction: column; gap: 50px; \n        padding-top: 30px;\n    }\n\n    \/* BADGE: BESPOKE INNOVATION *\/\n    .kn-usp-badge {\n        position: absolute; top: -50px; left: 0;\n        display: inline-flex; align-items: center;\n        padding: 10px 25px;\n        background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(5, 5, 5, 0.8));\n        border: 2px solid var(--gold);\n        border-radius: 4px;\n        box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);\n        animation: badgePulse 4s infinite ease-in-out;\n    }\n    [dir=\"rtl\"] .kn-usp-badge { left: auto; right: 0; }\n\n    .kn-usp-icon { color: var(--gold-bright); font-size: 1.2rem; margin-right: 10px; }\n    [dir=\"rtl\"] .kn-usp-icon { margin-right: 0; margin-left: 10px; }\n\n    .kn-usp-text {\n        font-family: 'Cinzel', serif; color: var(--gold-bright); font-weight: 700;\n        text-transform: uppercase; letter-spacing: 2px; font-size: 0.9rem;\n    }\n    .kn-usp-ar { display: none; font-family: 'El Messiri', sans-serif; }\n    [dir=\"rtl\"] .kn-usp-en { display: none; }\n    [dir=\"rtl\"] .kn-usp-ar { display: inline-block; }\n\n    @keyframes badgePulse {\n        0%, 100% { box-shadow: 0 0 20px rgba(212, 175, 55, 0.2); border-color: var(--gold); }\n        50% { box-shadow: 0 0 40px rgba(212, 175, 55, 0.5); border-color: var(--gold-bright); }\n    }\n\n    \/* BACKGROUND \"07\" *\/\n    .kn-number {\n        font-family: 'Cinzel', serif; font-size: 20rem; font-weight: 900; line-height: 1;\n        color: rgba(212, 175, 55, 0.02); -webkit-text-stroke: 2px rgba(212, 175, 55, 0.25);\n        position: absolute; top: -120px; left: -90px; z-index: -1; pointer-events: none;\n        animation: subtleGlowPulse 5s ease-in-out infinite;\n    }\n    [dir=\"rtl\"] .kn-number { left: auto; right: -90px; }\n\n    @keyframes subtleGlowPulse {\n        0%, 100% { opacity: 0.4; filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.1)); }\n        50% { opacity: 0.8; filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.3)); }\n    }\n\n    \/* --- 6. SWAP SYSTEM --- *\/\n    .kn-swap-container { display: grid; grid-template-areas: \"stack\"; align-items: center; cursor: pointer; }\n    .kn-lang-layer { grid-area: stack; transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); }\n    \n    [dir=\"ltr\"] .kn-en-title, [dir=\"ltr\"] .kn-en-desc { opacity: 1; transform: translateY(0); filter: blur(0); z-index: 2; }\n    [dir=\"ltr\"] .kn-ar-title, [dir=\"ltr\"] .kn-ar-desc { opacity: 0; transform: translateY(20px); filter: blur(10px); z-index: 1; }\n    [dir=\"ltr\"] .kn-swap-container:hover .kn-en-title, [dir=\"ltr\"] .kn-swap-container:hover .kn-en-desc { opacity: 0; transform: translateY(-20px); filter: blur(10px); }\n    [dir=\"ltr\"] .kn-swap-container:hover .kn-ar-title, [dir=\"ltr\"] .kn-swap-container:hover .kn-ar-desc { opacity: 1; transform: translateY(0); filter: blur(0); }\n\n    [dir=\"rtl\"] .kn-en-title, [dir=\"rtl\"] .kn-en-desc { opacity: 0; transform: translateY(20px); filter: blur(10px); z-index: 1; }\n    [dir=\"rtl\"] .kn-ar-title, [dir=\"rtl\"] .kn-ar-desc { opacity: 1; transform: translateY(0); filter: blur(0); z-index: 2; }\n    [dir=\"rtl\"] .kn-swap-container:hover .kn-ar-title, [dir=\"rtl\"] .kn-swap-container:hover .kn-ar-desc { opacity: 0; transform: translateY(-20px); filter: blur(10px); }\n    [dir=\"rtl\"] .kn-swap-container:hover .kn-en-title, [dir=\"rtl\"] .kn-swap-container:hover .kn-en-desc { opacity: 1; transform: translateY(0); filter: blur(0); }\n\n    \/* TYPOGRAPHY *\/\n    .kn-heading h2 { font-size: 3.8rem; margin: 0; line-height: 1.1; text-transform: uppercase; }\n    .kn-en-title { color: #ffffff; text-shadow: 0 0 30px rgba(0,0,0,0.8); }\n    .kn-ar-title { font-family: 'El Messiri', sans-serif; color: var(--gold); font-weight: 700; }\n    \n    .kn-desc p { font-size: 1.15rem; line-height: 1.8; margin: 0; max-width: 600px; border-left: 3px solid var(--gold); padding-left: 25px; }\n    [dir=\"rtl\"] .kn-desc p { border-left: none; border-right: 3px solid var(--gold); padding-left: 0; padding-right: 25px; }\n    .kn-en-desc { font-family: 'Montserrat', sans-serif; color: #b0b0b0; }\n    .kn-en-desc strong { color: var(--gold-bright); font-weight: 700; text-shadow: 0 0 10px rgba(212, 175, 55, 0.3); }\n    .kn-ar-desc { font-family: 'El Messiri', sans-serif; color: #d4c07b; font-size: 1.3rem; }\n    .kn-ar-desc strong { color: var(--gold-bright); font-weight: 700; text-shadow: 0 0 10px rgba(212, 175, 55, 0.3); }\n\n    \/* --- 7. BUTTON WITH SHINING EFFECT --- *\/\n    .kn-btn-wrapper { display: inline-block; }\n    .kn-btn { \n        text-decoration: none; display: inline-block; padding: 18px 45px; \n        color: var(--gold); font-family: 'Cinzel', serif; font-weight: 700; \n        text-transform: uppercase; letter-spacing: 3px; border: 1px solid var(--gold); \n        position: relative; overflow: hidden; transition: all 0.5s ease; \n        background: rgba(0,0,0,0.3); box-shadow: 0 0 15px rgba(212, 175, 55, 0.1); \n    }\n    .kn-btn::before { \n        content: ''; position: absolute; top: 0; left: 0; width: 0%; height: 100%; \n        background: var(--gold); transition: all 0.5s ease; z-index: -1; \n    }\n    .kn-btn::after { \n        content: ''; position: absolute; top: 0; left: -150%; width: 100%; height: 100%; \n        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent); \n        transform: skewX(-20deg); animation: shimmerSweep 3s infinite ease-in-out; \n        pointer-events: none; \n    }\n    @keyframes shimmerSweep { \n        0% { left: -150%; } 50% { left: 150%; } 100% { left: 150%; } \n    }\n    .kn-btn:hover::before { width: 100%; }\n    .kn-btn:hover { color: #000; box-shadow: 0 0 30px rgba(212, 175, 55, 0.5); }\n\n    \/* --- 8. VIDEO CARD --- *\/\n    .kn-video-wrapper { flex: 1.2; display: flex; justify-content: flex-end; perspective: 1200px; }\n    [dir=\"rtl\"] .kn-video-wrapper { justify-content: flex-start; }\n\n    .kn-card {\n        width: 100%; max-width: 650px; height: 380px;\n        background: #000; position: relative; overflow: hidden;\n        border: 1px solid #333; box-shadow: 0 40px 80px rgba(0,0,0,0.8);\n        transition: transform 0.6s ease; animation: subtleFloat 8s ease-in-out infinite;\n    }\n\n    .kn-video-shield {\n        position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n        z-index: 10; background: transparent;\n    }\n\n    .kn-dust { position: absolute; width: 4px; height: 4px; background: var(--gold); border-radius: 50%; opacity: 0; animation: dustFloat 5s infinite; z-index: 5; pointer-events: none; }\n    .kn-dust:nth-child(1) { top: 80%; left: 10%; animation-delay: 0s; }\n    .kn-dust:nth-child(2) { top: 90%; left: 40%; animation-delay: 1.5s; }\n    .kn-dust:nth-child(3) { top: 70%; left: 80%; animation-delay: 3s; }\n\n    .kn-video { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: opacity 0.5s; }\n    .kn-card:hover .kn-video { opacity: 1; }\n    .kn-card:hover { border-color: var(--gold); }\n\n    @media (max-width: 900px) {\n        .kn-grid { flex-direction: column !important; gap: 40px; }\n        .kn-number { font-size: 10rem; top: -50px; left: 0; opacity: 0.2; }\n        .kn-heading h2 { font-size: 2.2rem; }\n        .kn-content { gap: 30px; padding-top: 50px; }\n        .kn-card { height: 260px; }\n        .kn-usp-badge { top: -30px; font-size: 0.8rem; padding: 8px 15px;}\n    }\n<\/style>\n\n<div class=\"kn-section-wrapper-07\" dir=\"ltr\" id=\"knSection07\">\n\n    <canvas id=\"kn-network-canvas-07\"><\/canvas>\n\n    <div class=\"kn-grid\">\n        \n        <div class=\"kn-content\">\n            <div class=\"kn-usp-badge\">\n                <span class=\"kn-usp-icon\">\u2726<\/span>\n                <span class=\"kn-usp-text kn-usp-en\">Kuwait&#8217;s Bespoke Innovation<\/span>\n                <span class=\"kn-usp-text kn-usp-ar\">\u0627\u0628\u062a\u0643\u0627\u0631 \u0627\u0644\u0643\u0648\u064a\u062a \u0627\u0644\u0645\u062e\u0635\u0635<\/span>\n            <\/div>\n\n            <div class=\"kn-number\">07<\/div>\n\n            <div class=\"kn-swap-container kn-heading\">\n                <div class=\"kn-lang-layer kn-en-title\"><h2>Customized Digital<br>Solutions<\/h2><\/div>\n                <div class=\"kn-lang-layer kn-ar-title\"><h2>\u062d\u0644\u0648\u0644 \u0631\u0642\u0645\u064a\u0629<br>\u0645\u062e\u0635\u0635\u0629<\/h2><\/div>\n            <\/div>\n\n            <div class=\"kn-swap-container kn-desc\">\n                <div class=\"kn-lang-layer kn-en-desc\">\n                    <p>They call it a <strong>&#8220;Purple Unicorn&#8221;<\/strong>\u2014an idea too complex to exist. We call it Tuesday. Standard software has limits; your vision shouldn&#8217;t. From custom ERPs and intricate API ecosystems to AI-driven platforms, we engineer the impossible. Even if your idea feels far-fetched, trust us: <strong>if you can dream it, we will code it.<\/strong><\/p>\n                <\/div>\n                <div class=\"kn-lang-layer kn-ar-desc\">\n                    <p>\u064a\u0633\u0645\u0648\u0646\u0647 <strong>&#8220;\u0648\u062d\u064a\u062f \u0627\u0644\u0642\u0631\u0646 \u0627\u0644\u0628\u0646\u0641\u0633\u062c\u064a&#8221;<\/strong>\u2014\u0641\u0643\u0631\u0629 \u0645\u0633\u062a\u062d\u064a\u0644\u0629 \u0627\u0644\u0648\u062c\u0648\u062f. \u0623\u0645\u0627 \u0646\u062d\u0646\u060c \u0641\u0646\u0633\u0645\u064a\u0647 \u062a\u062d\u062f\u064a\u0627\u064b \u0645\u0639\u062a\u0627\u062f\u0627\u064b. \u0627\u0644\u0628\u0631\u0645\u062c\u064a\u0627\u062a \u0627\u0644\u062c\u0627\u0647\u0632\u0629 \u0644\u0647\u0627 \u062d\u062f\u0648\u062f\u060c \u0644\u0643\u0646 \u0637\u0645\u0648\u062d\u0643 \u0644\u0627 \u0633\u0642\u0641 \u0644\u0647. \u0645\u0646 \u0623\u0646\u0638\u0645\u0629 \u0627\u0644\u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0645\u0639\u0642\u062f\u0629 \u0625\u0644\u0649 \u0645\u0646\u0635\u0627\u062a \u0627\u0644\u0630\u0643\u0627\u0621 \u0627\u0644\u0627\u0635\u0637\u0646\u0627\u0639\u064a\u060c \u0646\u062d\u0646 \u0646\u0628\u0646\u064a \u0645\u0627 \u0644\u0627 \u064a\u0645\u0643\u0646 \u0634\u0631\u0627\u0624\u0647 \u062c\u0627\u0647\u0632\u0627\u064b. \u062b\u0642 \u0628\u0646\u0627: <strong>\u0625\u0630\u0627 \u0643\u0646\u062a \u062a\u0633\u062a\u0637\u064a\u0639 \u062a\u062e\u064a\u0644\u0647\u060c \u0641\u0646\u062d\u0646 \u0646\u0633\u062a\u0637\u064a\u0639 \u0628\u0631\u0645\u062c\u062a\u0647.<\/strong><\/p>\n                <\/div>\n            <\/div>\n\n            <div class=\"kn-btn-wrapper\">\n                <a href=\"https:\/\/kuwaitnext.com\/contact\/\" class=\"kn-btn\">Start Project<\/a>\n            <\/div>\n        <\/div>\n\n        <div class=\"kn-video-wrapper\">\n            <div class=\"kn-card\">\n                <div class=\"kn-video-shield\" oncontextmenu=\"return false;\"><\/div>\n\n                <div class=\"kn-dust\"><\/div>\n                <div class=\"kn-dust\"><\/div>\n                <div class=\"kn-dust\"><\/div>\n                \n                <video class=\"kn-video\" autoplay loop muted playsinline oncontextmenu=\"return false;\">\n                    <source src=\"https:\/\/kuwaitnext.com\/wp-content\/uploads\/2026\/01\/Creating_Customized_Digital_Solutions_Video.mp4\" type=\"video\/mp4\">\n                <\/video>\n            <\/div>\n        <\/div>\n\n    <\/div>\n<\/div>\n\n<script>\n    (function() {\n        const canvas = document.getElementById('kn-network-canvas-07');\n        const ctx = canvas.getContext('2d');\n        let width, height; let particles = []; let mouse = { x: -1000, y: -1000, radius: 200 }; \n        function resize() { width = canvas.width = canvas.offsetWidth; height = canvas.height = canvas.offsetHeight; }\n        class Particle {\n            constructor() { this.x = Math.random() * width; this.y = Math.random() * height; this.vx = (Math.random() - 0.5) * 0.4; this.vy = (Math.random() - 0.5) * 0.4; this.size = Math.random() * 2 + 1; }\n            update() { this.x += this.vx; this.y += this.vy; if (this.x < 0) this.x = width; if (this.x > width) this.x = 0; if (this.y < 0) this.y = height; if (this.y > height) this.y = 0; let dx = mouse.x - this.x; let dy = mouse.y - this.y; let distance = Math.sqrt(dx*dx + dy*dy); if (distance < mouse.radius) { let force = (mouse.radius - distance) \/ mouse.radius; this.x += (dx \/ distance) * force * 1.5; this.y += (dy \/ distance) * force * 1.5; } }\n            draw() { ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fillStyle = '#D4AF37'; ctx.fill(); }\n        }\n        function connect() { for (let a = 0; a < particles.length; a++) { for (let b = a; b < particles.length; b++) { let dx = particles[a].x - particles[b].x; let dy = particles[a].y - particles[b].y; let distance = dx * dx + dy * dy; if (distance < (130 * 130)) { let opacity = 1 - (distance \/ 18000); ctx.strokeStyle = 'rgba(212, 175, 55,' + (opacity * 0.4) + ')'; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(particles[a].x, particles[a].y); ctx.lineTo(particles[b].x, particles[b].y); ctx.stroke(); } } } }\n        function init() { resize(); particles = []; for (let i = 0; i < 80; i++) { particles.push(new Particle()); } }\n        function animate() { ctx.clearRect(0, 0, width, height); for (let i = 0; i < particles.length; i++) { particles[i].update(); particles[i].draw(); } connect(); requestAnimationFrame(animate); }\n        window.addEventListener('resize', init);\n        const section = document.getElementById('knSection07');\n        section.addEventListener('mousemove', (e) => { const rect = section.getBoundingClientRect(); mouse.x = e.clientX - rect.left; mouse.y = e.clientY - rect.top; });\n        section.addEventListener('mouseleave', () => { mouse.x = -1000; mouse.y = -1000; });\n        init(); animate();\n    })();\n<\/script>\n\n\n\n<style>\n    \/* --- 1. FONTS & ROOTS --- *\/\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Cinzel:wght@500;700;900&family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=El+Messiri:wght@400;700&family=Montserrat:wght@300;400;500;600;700&display=swap');\n\n    :root {\n        --gold: #D4AF37;\n        --gold-bright: #F9E58A;\n        --black: #050505;\n    }\n\n    \/* --- 2. MAIN CONTAINER 08 --- *\/\n    .kn-section-wrapper-08 {\n        position: relative;\n        background-color: var(--black);\n        overflow: hidden;\n        padding: 140px 5%;\n        min-height: 900px; \/* Taller for the module grid *\/\n        display: flex; align-items: center; justify-content: center;\n        border-bottom: 1px solid #1a1a1a;\n        font-family: 'Cinzel', serif;\n    }\n\n    \/* --- 3. CANVAS (BACKGROUND) --- *\/\n    #kn-network-canvas-08 {\n        position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none;\n    }\n\n    \/* --- 4. LAYOUT GRID --- *\/\n    .kn-grid {\n        display: flex; width: 100%; max-width: 1500px; position: relative; z-index: 5;\n        align-items: center; justify-content: space-between; gap: 60px; flex-wrap: wrap;\n    }\n    [dir=\"rtl\"] .kn-grid { flex-direction: row-reverse; }\n\n    \/* --- 5. CONTENT STACK --- *\/\n    .kn-content { \n        flex: 1; min-width: 350px; position: relative; \n        display: flex; flex-direction: column; gap: 40px; \n        padding-top: 30px;\n    }\n\n    \/* BADGE: THE ALL-IN-ONE *\/\n    .kn-usp-badge {\n        position: absolute; top: -50px; left: 0;\n        display: inline-flex; align-items: center;\n        padding: 10px 25px;\n        background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(5, 5, 5, 0.9));\n        border: 2px solid var(--gold);\n        border-radius: 4px;\n        box-shadow: 0 0 30px rgba(212, 175, 55, 0.3);\n        animation: badgePulse 4s infinite ease-in-out;\n    }\n    [dir=\"rtl\"] .kn-usp-badge { left: auto; right: 0; }\n\n    .kn-usp-icon { color: var(--gold-bright); font-size: 1.2rem; margin-right: 10px; }\n    [dir=\"rtl\"] .kn-usp-icon { margin-right: 0; margin-left: 10px; }\n\n    .kn-usp-text {\n        font-family: 'Cinzel', serif; color: var(--gold-bright); font-weight: 700;\n        text-transform: uppercase; letter-spacing: 2px; font-size: 0.9rem;\n    }\n    .kn-usp-ar { display: none; font-family: 'El Messiri', sans-serif; }\n    [dir=\"rtl\"] .kn-usp-en { display: none; }\n    [dir=\"rtl\"] .kn-usp-ar { display: inline-block; }\n\n    @keyframes badgePulse {\n        0%, 100% { box-shadow: 0 0 20px rgba(212, 175, 55, 0.2); border-color: var(--gold); }\n        50% { box-shadow: 0 0 50px rgba(212, 175, 55, 0.6); border-color: #fff; }\n    }\n\n    \/* BACKGROUND \"08\" *\/\n    .kn-number {\n        font-family: 'Cinzel', serif; font-size: 20rem; font-weight: 900; line-height: 1;\n        color: rgba(212, 175, 55, 0.02); -webkit-text-stroke: 2px rgba(212, 175, 55, 0.25);\n        position: absolute; top: -120px; left: -90px; z-index: -1; pointer-events: none;\n        animation: subtleGlowPulse 5s ease-in-out infinite;\n    }\n    [dir=\"rtl\"] .kn-number { left: auto; right: -90px; }\n\n    @keyframes subtleGlowPulse {\n        0%, 100% { opacity: 0.4; filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.1)); }\n        50% { opacity: 0.8; filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.3)); }\n    }\n\n    \/* --- 6. SWAP SYSTEM --- *\/\n    .kn-swap-container { display: grid; grid-template-areas: \"stack\"; align-items: center; cursor: pointer; }\n    .kn-lang-layer { grid-area: stack; transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); }\n    \n    [dir=\"ltr\"] .kn-en-title, [dir=\"ltr\"] .kn-en-desc { opacity: 1; transform: translateY(0); filter: blur(0); z-index: 2; }\n    [dir=\"ltr\"] .kn-ar-title, [dir=\"ltr\"] .kn-ar-desc { opacity: 0; transform: translateY(20px); filter: blur(10px); z-index: 1; }\n    [dir=\"ltr\"] .kn-swap-container:hover .kn-en-title, [dir=\"ltr\"] .kn-swap-container:hover .kn-en-desc { opacity: 0; transform: translateY(-20px); filter: blur(10px); }\n    [dir=\"ltr\"] .kn-swap-container:hover .kn-ar-title, [dir=\"ltr\"] .kn-swap-container:hover .kn-ar-desc { opacity: 1; transform: translateY(0); filter: blur(0); }\n\n    [dir=\"rtl\"] .kn-en-title, [dir=\"rtl\"] .kn-en-desc { opacity: 0; transform: translateY(20px); filter: blur(10px); z-index: 1; }\n    [dir=\"rtl\"] .kn-ar-title, [dir=\"rtl\"] .kn-ar-desc { opacity: 1; transform: translateY(0); filter: blur(0); z-index: 2; }\n    [dir=\"rtl\"] .kn-swap-container:hover .kn-ar-title, [dir=\"rtl\"] .kn-swap-container:hover .kn-ar-desc { opacity: 0; transform: translateY(-20px); filter: blur(10px); }\n    [dir=\"rtl\"] .kn-swap-container:hover .kn-en-title, [dir=\"rtl\"] .kn-swap-container:hover .kn-en-desc { opacity: 1; transform: translateY(0); filter: blur(0); }\n\n    \/* TYPOGRAPHY *\/\n    .kn-heading h2 { font-size: 3.5rem; margin: 0; line-height: 1.1; text-transform: uppercase; }\n    .kn-en-title { color: #ffffff; text-shadow: 0 0 30px rgba(0,0,0,0.8); }\n    .kn-ar-title { font-family: 'El Messiri', sans-serif; color: var(--gold); font-weight: 700; }\n    \n    .kn-desc p { font-size: 1.15rem; line-height: 1.8; margin: 0; max-width: 600px; border-left: 3px solid var(--gold); padding-left: 25px; }\n    [dir=\"rtl\"] .kn-desc p { border-left: none; border-right: 3px solid var(--gold); padding-left: 0; padding-right: 25px; }\n    .kn-en-desc { font-family: 'Montserrat', sans-serif; color: #b0b0b0; }\n    .kn-en-desc strong { color: var(--gold-bright); font-weight: 700; text-shadow: 0 0 10px rgba(212, 175, 55, 0.3); }\n    .kn-ar-desc { font-family: 'El Messiri', sans-serif; color: #d4c07b; font-size: 1.3rem; }\n    .kn-ar-desc strong { color: var(--gold-bright); font-weight: 700; text-shadow: 0 0 10px rgba(212, 175, 55, 0.3); }\n\n    \/* === NEW: INFINITY MODULE GRID === *\/\n    .kn-module-grid {\n        display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px;\n    }\n    .kn-module {\n        font-family: 'Montserrat', sans-serif; font-size: 0.8rem; font-weight: 600; text-transform: uppercase;\n        color: var(--black); background: var(--gold);\n        padding: 5px 15px; border-radius: 2px;\n        opacity: 0.7; transition: all 0.3s;\n        cursor: default;\n    }\n    .kn-module:hover { opacity: 1; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(212, 175, 55, 0.4); }\n    \/* Pulsing animation for modules *\/\n    .kn-module:nth-child(1) { animation: modulePulse 3s infinite 0s; }\n    .kn-module:nth-child(2) { animation: modulePulse 3s infinite 0.5s; }\n    .kn-module:nth-child(3) { animation: modulePulse 3s infinite 1.0s; }\n    .kn-module:nth-child(4) { animation: modulePulse 3s infinite 1.5s; }\n    .kn-module:nth-child(5) { animation: modulePulse 3s infinite 2.0s; }\n    .kn-module:nth-child(6) { animation: modulePulse 3s infinite 2.5s; }\n\n    @keyframes modulePulse { 0%, 100% { background: #8a6e18; color: #ccc; } 50% { background: var(--gold-bright); color: #000; box-shadow: 0 0 10px var(--gold); } }\n\n\n    \/* --- 7. BUTTON WITH SHINING EFFECT --- *\/\n    .kn-btn-wrapper { display: inline-block; margin-top: 20px; }\n    .kn-btn { \n        text-decoration: none; display: inline-block; padding: 20px 60px; \/* Larger for finale *\/\n        color: var(--gold); font-family: 'Cinzel', serif; font-weight: 700; \n        text-transform: uppercase; letter-spacing: 3px; border: 1px solid var(--gold); \n        position: relative; overflow: hidden; transition: all 0.5s ease; \n        background: rgba(0,0,0,0.3); box-shadow: 0 0 15px rgba(212, 175, 55, 0.1); \n    }\n    .kn-btn::before { \n        content: ''; position: absolute; top: 0; left: 0; width: 0%; height: 100%; \n        background: var(--gold); transition: all 0.5s ease; z-index: -1; \n    }\n    .kn-btn::after { \n        content: ''; position: absolute; top: 0; left: -150%; width: 100%; height: 100%; \n        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent); \n        transform: skewX(-20deg); animation: shimmerSweep 3s infinite ease-in-out; \n        pointer-events: none; \n    }\n    @keyframes shimmerSweep { \n        0% { left: -150%; } 50% { left: 150%; } 100% { left: 150%; } \n    }\n    .kn-btn:hover::before { width: 100%; }\n    .kn-btn:hover { color: #000; box-shadow: 0 0 30px rgba(212, 175, 55, 0.5); }\n\n    \/* --- 8. VIDEO CARD --- *\/\n    .kn-video-wrapper { flex: 1.2; display: flex; justify-content: flex-end; perspective: 1200px; }\n    [dir=\"rtl\"] .kn-video-wrapper { justify-content: flex-start; }\n\n    .kn-card {\n        width: 100%; max-width: 650px; height: 380px;\n        background: #000; position: relative; overflow: hidden;\n        border: 1px solid #333; box-shadow: 0 40px 80px rgba(0,0,0,0.8);\n        transition: transform 0.6s ease; animation: subtleFloat 8s ease-in-out infinite;\n    }\n\n    .kn-video-shield {\n        position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n        z-index: 10; background: transparent;\n    }\n\n    .kn-dust { position: absolute; width: 4px; height: 4px; background: var(--gold); border-radius: 50%; opacity: 0; animation: dustFloat 5s infinite; z-index: 5; pointer-events: none; }\n    .kn-dust:nth-child(1) { top: 80%; left: 10%; animation-delay: 0s; }\n    .kn-dust:nth-child(2) { top: 90%; left: 40%; animation-delay: 1.5s; }\n    .kn-dust:nth-child(3) { top: 70%; left: 80%; animation-delay: 3s; }\n\n    .kn-video { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: opacity 0.5s; }\n    .kn-card:hover .kn-video { opacity: 1; }\n    .kn-card:hover { border-color: var(--gold); }\n\n    @media (max-width: 900px) {\n        .kn-grid { flex-direction: column !important; gap: 40px; }\n        .kn-number { font-size: 10rem; top: -50px; left: 0; opacity: 0.2; }\n        .kn-heading h2 { font-size: 2.2rem; }\n        .kn-content { gap: 30px; padding-top: 50px; }\n        .kn-card { height: 260px; }\n        .kn-usp-badge { top: -30px; font-size: 0.8rem; padding: 8px 15px;}\n        .kn-module-grid { justify-content: center; }\n    }\n<\/style>\n\n<div class=\"kn-section-wrapper-08\" dir=\"ltr\" id=\"knSection08\">\n\n    <canvas id=\"kn-network-canvas-08\"><\/canvas>\n\n    <div class=\"kn-grid\">\n        \n        <div class=\"kn-content\">\n            <div class=\"kn-usp-badge\">\n                <span class=\"kn-usp-icon\">\u2726<\/span>\n                <span class=\"kn-usp-text kn-usp-en\">The All-In-One Sovereign Package<\/span>\n                <span class=\"kn-usp-text kn-usp-ar\">\u0628\u0627\u0642\u0629 \u0627\u0644\u0633\u064a\u0627\u062f\u0629 \u0627\u0644\u0634\u0627\u0645\u0644\u0629<\/span>\n            <\/div>\n\n            <div class=\"kn-number\">08<\/div>\n\n            <div class=\"kn-swap-container kn-heading\">\n                <div class=\"kn-lang-layer kn-en-title\"><h2>Complete Digital<br>Transformation<\/h2><\/div>\n                <div class=\"kn-lang-layer kn-ar-title\"><h2>\u0627\u0644\u062a\u062d\u0648\u0644 \u0627\u0644\u0631\u0642\u0645\u064a<br>\u0627\u0644\u0634\u0627\u0645\u0644<\/h2><\/div>\n            <\/div>\n\n            <div class=\"kn-swap-container kn-desc\">\n                <div class=\"kn-lang-layer kn-en-desc\">\n                    <p>Why choose one when you can rule them all? This is the <strong>Kuwait Next Exclusive Bundle<\/strong>. We don&#8217;t ask you to pick a service; we build your entire digital empire in one synchronized strike. From Website &#038; App Development to UI\/UX, Marketing, E-Commerce, and Eternal Support\u2014<strong>everything is included<\/strong>. You don&#8217;t have to worry about the details; we simply deliver dominance.<\/p>\n                <\/div>\n                <div class=\"kn-lang-layer kn-ar-desc\">\n                    <p>\u0644\u0645\u0627\u0630\u0627 \u062a\u062e\u062a\u0627\u0631 \u062e\u062f\u0645\u0629 \u0648\u0627\u062d\u062f\u0629 \u0628\u064a\u0646\u0645\u0627 \u064a\u0645\u0643\u0646\u0643 \u0627\u0645\u062a\u0644\u0627\u0643 \u0627\u0644\u0643\u0644\u061f \u0647\u0630\u0647 \u0647\u064a <strong>\u0628\u0627\u0642\u0629 \u0643\u0648\u064a\u062a \u0646\u0643\u0633\u062a \u0627\u0644\u062d\u0635\u0631\u064a\u0629<\/strong>. \u0646\u062d\u0646 \u0644\u0627 \u0646\u0637\u0644\u0628 \u0645\u0646\u0643 \u0627\u062e\u062a\u064a\u0627\u0631 \u062e\u062f\u0645\u0629\u061b \u0628\u0644 \u0646\u0628\u0646\u064a \u0625\u0645\u0628\u0631\u0627\u0637\u0648\u0631\u064a\u062a\u0643 \u0627\u0644\u0631\u0642\u0645\u064a\u0629 \u0628\u0627\u0644\u0643\u0627\u0645\u0644 \u0641\u064a \u062e\u0637\u0648\u0629 \u0648\u0627\u062d\u062f\u0629 \u0645\u062a\u0632\u0627\u0645\u0646\u0629. \u0645\u0646 \u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u0645\u0648\u0627\u0642\u0639 \u0648\u0627\u0644\u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0625\u0644\u0649 \u0627\u0644\u062a\u0635\u0645\u064a\u0645\u060c \u0627\u0644\u062a\u0633\u0648\u064a\u0642\u060c \u0627\u0644\u062a\u062c\u0627\u0631\u0629 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629\u060c \u0648\u0627\u0644\u062f\u0639\u0645 \u0627\u0644\u062f\u0627\u0626\u0645\u2014<strong>\u0643\u0644 \u0634\u064a\u0621 \u0645\u0634\u0645\u0648\u0644<\/strong>. \u0644\u0627 \u062f\u0627\u0639\u064a \u0644\u0644\u0642\u0644\u0642 \u0628\u0634\u0623\u0646 \u0627\u0644\u062a\u0641\u0627\u0635\u064a\u0644\u061b \u0646\u062d\u0646 \u0628\u0628\u0633\u0627\u0637\u0629 \u0646\u0633\u0644\u0645\u0643 \u0645\u0641\u0627\u062a\u064a\u062d \u0627\u0644\u0633\u064a\u0637\u0631\u0629.<\/p>\n                <\/div>\n            <\/div>\n\n            <div class=\"kn-module-grid\">\n                <div class=\"kn-module\">Website<\/div>\n                <div class=\"kn-module\">Mobile App<\/div>\n                <div class=\"kn-module\">UI\/UX<\/div>\n                <div class=\"kn-module\">SEO &#038; Ads<\/div>\n                <div class=\"kn-module\">E-Commerce<\/div>\n                <div class=\"kn-module\">Support<\/div>\n            <\/div>\n\n            <div class=\"kn-btn-wrapper\">\n                <a href=\"https:\/\/kuwaitnext.com\/contact\/\" class=\"kn-btn\">Claim The Empire<\/a>\n            <\/div>\n        <\/div>\n\n        <div class=\"kn-video-wrapper\">\n            <div class=\"kn-card\">\n                <div class=\"kn-video-shield\" oncontextmenu=\"return false;\"><\/div>\n\n                <div class=\"kn-dust\"><\/div>\n                <div class=\"kn-dust\"><\/div>\n                <div class=\"kn-dust\"><\/div>\n                \n                <video class=\"kn-video\" autoplay loop muted playsinline oncontextmenu=\"return false;\">\n                    <source src=\"https:\/\/kuwaitnext.com\/wp-content\/uploads\/2026\/01\/Gold_Fortress_Video_for_Empire_Claim.mp4\" type=\"video\/mp4\">\n                <\/video>\n            <\/div>\n        <\/div>\n\n    <\/div>\n<\/div>\n\n<script>\n    (function() {\n        const canvas = document.getElementById('kn-network-canvas-08');\n        const ctx = canvas.getContext('2d');\n        let width, height; let particles = []; let mouse = { x: -1000, y: -1000, radius: 200 }; \n        function resize() { width = canvas.width = canvas.offsetWidth; height = canvas.height = canvas.offsetHeight; }\n        \n        \/\/ VORTEX PARTICLE\n        class Particle {\n            constructor() { \n                this.x = Math.random() * width; \n                this.y = Math.random() * height; \n                this.angle = Math.random() * Math.PI * 2; \n                this.radius = Math.random() * 200 + 100; \/\/ Distance from center\n                this.speed = Math.random() * 0.005 + 0.002;\n                this.size = Math.random() * 2 + 1; \n            }\n            update() { \n                \/\/ Spiral movement\n                const centerX = width \/ 2;\n                const centerY = height \/ 2;\n                \n                this.angle += this.speed;\n                this.x = centerX + Math.cos(this.angle) * this.radius;\n                this.y = centerY + Math.sin(this.angle) * this.radius;\n\n                \/\/ Mouse Interaction (Disrupt Vortex)\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                    this.radius += 2; \/\/ Push away from center\n                } else if (this.radius > 200) {\n                    this.radius -= 0.5; \/\/ Return to vortex\n                }\n            }\n            draw() { \n                ctx.beginPath(); \n                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); \n                ctx.fillStyle = '#D4AF37'; \n                ctx.fill(); \n            }\n        }\n        \n        \/\/ Lines connect to center\n        function connect() { \n            const centerX = width \/ 2;\n            const centerY = height \/ 2;\n            for (let a = 0; a < particles.length; a++) { \n                 \/\/ Connect particle to center slightly\n                let distToCenter = Math.sqrt(Math.pow(particles[a].x - centerX, 2) + Math.pow(particles[a].y - centerY, 2));\n                if(distToCenter < 400) {\n                    let opacity = 1 - (distToCenter \/ 400);\n                    ctx.strokeStyle = 'rgba(212, 175, 55,' + (opacity * 0.2) + ')';\n                    ctx.lineWidth = 1;\n                    ctx.beginPath();\n                    ctx.moveTo(particles[a].x, particles[a].y);\n                    ctx.lineTo(centerX, centerY);\n                    ctx.stroke();\n                }\n            } \n        }\n\n        function init() { resize(); particles = []; for (let i = 0; i < 100; i++) { particles.push(new Particle()); } }\n        function animate() { ctx.clearRect(0, 0, width, height); for (let i = 0; i < particles.length; i++) { particles[i].update(); particles[i].draw(); } connect(); requestAnimationFrame(animate); }\n        window.addEventListener('resize', init);\n        const section = document.getElementById('knSection08');\n        section.addEventListener('mousemove', (e) => { const rect = section.getBoundingClientRect(); mouse.x = e.clientX - rect.left; mouse.y = e.clientY - rect.top; });\n        section.addEventListener('mouseleave', () => { mouse.x = -1000; mouse.y = -1000; });\n        init(); animate();\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","protected":false},"excerpt":{"rendered":"<p>KuwaitNext Services \u0643\u0648\u064a\u062a\u0646\u0643\u0633\u062a \u0627\u0644\u062e\u062f\u0645\u0627\u062a \/\/\/ \u0647\u0646\u062f\u0633\u0629 \u0627\u0644\u0645\u0633\u062a\u0642\u0628\u0644 \u2726 Sovereign Web Architecture \u0628\u0646\u064a\u0629 \u0627\u0644\u0648\u064a\u0628 \u0627\u0644\u0633\u064a\u0627\u062f\u064a\u0629 01 WebsiteDevelopment \u062a\u0637\u0648\u064a\u0631\u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u0648\u064a\u0628 We don&#8217;t just build websites; we construct Digital Sovereignties. From high-frequency corporate platforms to immersive, award-winning portfolios, we architect responsive, bulletproof web experiences that define your status in the Kuwaiti market. \u0646\u062d\u0646 \u0644\u0627 \u0646\u0628\u0646\u064a \u0645\u062c\u0631\u062f \u0645\u0648\u0627\u0642\u0639 \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629\u060c [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"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-694","page","type-page","status-publish","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\/694","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=694"}],"version-history":[{"count":50,"href":"https:\/\/kuwaitnext.com\/ar\/wp-json\/wp\/v2\/pages\/694\/revisions"}],"predecessor-version":[{"id":2792,"href":"https:\/\/kuwaitnext.com\/ar\/wp-json\/wp\/v2\/pages\/694\/revisions\/2792"}],"wp:attachment":[{"href":"https:\/\/kuwaitnext.com\/ar\/wp-json\/wp\/v2\/media?parent=694"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}