{"id":1138,"date":"2024-04-23T12:25:03","date_gmt":"2024-04-23T12:25:03","guid":{"rendered":"https:\/\/xohar.com\/?page_id=2"},"modified":"2026-07-10T11:40:39","modified_gmt":"2026-07-10T11:40:39","slug":"home","status":"publish","type":"page","link":"https:\/\/xohar.com\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n\n\nXohar \u2014 Premium Digital Agency | Web Design, Development & Marketing<\/title>\n<meta name=\"description\" content=\"Xohar is a premium digital agency crafting bold websites, brands, and growth strategies for ambitious companies in Lahore, Islamabad, and Faisalabad.\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\n<style>\n\/* ============================================\n RESET & BASE STYLES\n ============================================ *\/\n*, *::before, *::after {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\n:root {\n \/* Color System *\/\n --purple: #7802EF;\n --dark: #111111;\n --white: #FFFFFF;\n --light-gray: #F5F5F5;\n --border: #202020;\n \n \/* Illustration Accent Colors *\/\n --yellow: #FFD93D;\n --pink: #FF6B9D;\n --teal: #4ECDC4;\n --soft-purple: #B07EF7;\n \n \/* Typography *\/\n --font: 'Poppins', sans-serif;\n \n \/* Spacing *\/\n --container: 1280px;\n --section-pad: 120px;\n \n \/* Effects *\/\n --shadow-brutal: 6px 6px 0 var(--border);\n --shadow-brutal-lg: 10px 10px 0 var(--border);\n --shadow-purple: 6px 6px 0 var(--purple);\n --border-thick: 3px solid var(--border);\n --radius: 16px;\n --radius-lg: 24px;\n --radius-xl: 32px;\n}\n\nhtml {\n scroll-behavior: smooth;\n overflow-x: hidden;\n}\n\nbody {\n font-family: var(--font);\n background: var(--white);\n color: var(--dark);\n overflow-x: hidden;\n line-height: 1.6;\n font-weight: 400;\n cursor: none;\n}\n\n\/* Hide custom cursor on touch devices *\/\n@media (hover: none) {\n body { cursor: auto; }\n .cursor-dot, .cursor-ring { display: none !important; }\n}\n\na { text-decoration: none; color: inherit; }\nul { list-style: none; }\nimg { max-width: 100%; display: block; }\n\n\/* ============================================\n CUSTOM CURSOR\n ============================================ *\/\n.cursor-dot {\n position: fixed;\n width: 8px;\n height: 8px;\n background: var(--purple);\n border-radius: 50%;\n pointer-events: none;\n z-index: 10000;\n transition: transform 0.15s ease, opacity 0.2s ease;\n transform: translate(-50%, -50%);\n}\n\n.cursor-ring {\n position: fixed;\n width: 36px;\n height: 36px;\n border: 2px solid var(--border);\n border-radius: 50%;\n pointer-events: none;\n z-index: 10000;\n transition: transform 0.25s ease, width 0.25s ease, height 0.25s ease, border-color 0.25s ease;\n transform: translate(-50%, -50%);\n}\n\n.cursor-ring.hovering {\n width: 56px;\n height: 56px;\n border-color: var(--purple);\n background: rgba(120, 2, 239, 0.05);\n}\n\n\/* ============================================\n CONTAINER & UTILITIES\n ============================================ *\/\n.container {\n max-width: var(--container);\n margin: 0 auto;\n padding: 0 32px;\n}\n\n.section-tag {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n background: var(--white);\n border: 2px solid var(--border);\n border-radius: 100px;\n padding: 8px 18px;\n font-size: 13px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 1px;\n box-shadow: 3px 3px 0 var(--border);\n margin-bottom: 24px;\n}\n\n.section-tag .dot {\n width: 8px;\n height: 8px;\n background: var(--purple);\n border-radius: 50%;\n animation: pulse 2s ease infinite;\n}\n\n.section-title {\n font-size: clamp(36px, 5vw, 56px);\n font-weight: 800;\n line-height: 1.1;\n letter-spacing: -1.5px;\n margin-bottom: 20px;\n}\n\n.section-subtitle {\n font-size: 18px;\n color: #555;\n max-width: 600px;\n line-height: 1.7;\n}\n\n.purple-text { color: var(--purple); }\n\n\/* ============================================\n BUTTONS\n ============================================ *\/\n.btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n padding: 16px 32px;\n font-family: var(--font);\n font-size: 16px;\n font-weight: 700;\n border-radius: 100px;\n border: var(--border-thick);\n cursor: none;\n transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\n position: relative;\n overflow: hidden;\n white-space: nowrap;\n}\n\n.btn-primary {\n background: var(--purple);\n color: var(--white);\n box-shadow: var(--shadow-brutal);\n}\n\n.btn-primary:hover {\n transform: translate(-3px, -3px);\n box-shadow: 9px 9px 0 var(--border);\n}\n\n.btn-primary:active {\n transform: translate(3px, 3px);\n box-shadow: 2px 2px 0 var(--border);\n}\n\n.btn-outline {\n background: var(--white);\n color: var(--dark);\n box-shadow: var(--shadow-brutal);\n}\n\n.btn-outline:hover {\n transform: translate(-3px, -3px);\n box-shadow: 9px 9px 0 var(--purple);\n}\n\n.btn-whatsapp {\n background: #25D366;\n color: var(--white);\n box-shadow: var(--shadow-brutal);\n}\n\n.btn-whatsapp:hover {\n transform: translate(-3px, -3px);\n box-shadow: 9px 9px 0 var(--border);\n}\n\n.btn svg, .btn img {\n width: 20px;\n height: 20px;\n}\n\n\/* ============================================\n BACKGROUND DECORATIVE ELEMENTS\n ============================================ *\/\n.bg-decor {\n position: absolute;\n pointer-events: none;\n z-index: 0;\n}\n\n.floating-shape {\n position: absolute;\n pointer-events: none;\n opacity: 0.9;\n}\n\n\/* Dot pattern *\/\n.dot-pattern {\n background-image: radial-gradient(circle, rgba(32,32,32,0.08) 1.5px, transparent 1.5px);\n background-size: 24px 24px;\n}\n\n\/* Grid pattern *\/\n.grid-pattern {\n background-image: \n linear-gradient(rgba(32,32,32,0.04) 1px, transparent 1px),\n linear-gradient(90deg, rgba(32,32,32,0.04) 1px, transparent 1px);\n background-size: 40px 40px;\n}\n\n\/* ============================================\n 1. HERO SECTION\n ============================================ *\/\n.hero {\n min-height: 100vh;\n padding: 60px 0 80px;\n position: relative;\n overflow: hidden;\n background: var(--white);\n}\n\n.hero::before {\n content: '';\n position: absolute;\n inset: 0;\n background-image: radial-gradient(circle, rgba(32,32,32,0.06) 1.5px, transparent 1.5px);\n background-size: 28px 28px;\n z-index: 0;\n}\n\n.hero-inner {\n position: relative;\n z-index: 2;\n display: grid;\n grid-template-columns: 1.1fr 0.9fr;\n gap: 60px;\n align-items: center;\n padding-top: 40px;\n}\n\n.hero-content {\n position: relative;\n}\n\n.hero-badge {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n background: var(--white);\n border: 2.5px solid var(--border);\n border-radius: 100px;\n padding: 8px 18px;\n font-size: 13px;\n font-weight: 600;\n box-shadow: 3px 3px 0 var(--border);\n margin-bottom: 28px;\n}\n\n.hero-badge .live-dot {\n width: 8px;\n height: 8px;\n background: #22c55e;\n border-radius: 50%;\n animation: pulse 1.8s ease infinite;\n}\n\n.hero h1 {\n font-size: clamp(42px, 6vw, 76px);\n font-weight: 800;\n line-height: 1.02;\n letter-spacing: -2.5px;\n margin-bottom: 28px;\n}\n\n.hero h1 .highlight {\n color: var(--purple);\n position: relative;\n display: inline-block;\n}\n\n.hero h1 .highlight::after {\n content: '';\n position: absolute;\n bottom: 6px;\n left: 0;\n width: 100%;\n height: 12px;\n background: var(--yellow);\n z-index: -1;\n border-radius: 4px;\n transform: rotate(-1deg);\n}\n\n.hero p {\n font-size: 19px;\n color: #444;\n max-width: 520px;\n margin-bottom: 36px;\n line-height: 1.65;\n}\n\n.hero-buttons {\n display: flex;\n gap: 16px;\n flex-wrap: wrap;\n margin-bottom: 40px;\n}\n\n.hero-stats {\n display: flex;\n gap: 40px;\n padding-top: 32px;\n border-top: 2px solid #e5e5e5;\n}\n\n.hero-stat .num {\n font-size: 32px;\n font-weight: 800;\n color: var(--dark);\n line-height: 1;\n}\n\n.hero-stat .num span { color: var(--purple); }\n\n.hero-stat .label {\n font-size: 13px;\n color: #666;\n margin-top: 6px;\n font-weight: 500;\n}\n\n\/* Hero Visual *\/\n.hero-visual {\n position: relative;\n height: 520px;\n}\n\n.hero-illustration {\n position: relative;\n width: 100%;\n height: 100%;\n}\n\n\/* Floating elements in hero *\/\n.float-elem {\n position: absolute;\n animation: float 6s ease-in-out infinite;\n}\n\n.float-elem:nth-child(2) { animation-delay: 0.5s; }\n.float-elem:nth-child(3) { animation-delay: 1s; }\n.float-elem:nth-child(4) { animation-delay: 1.5s; }\n.float-elem:nth-child(5) { animation-delay: 2s; }\n\n\/* Scroll indicator *\/\n.scroll-indicator {\n position: absolute;\n bottom: 30px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 10px;\n z-index: 5;\n}\n\n.scroll-mouse {\n width: 26px;\n height: 42px;\n border: 2.5px solid var(--border);\n border-radius: 14px;\n position: relative;\n background: var(--white);\n}\n\n.scroll-mouse::after {\n content: '';\n position: absolute;\n top: 8px;\n left: 50%;\n transform: translateX(-50%);\n width: 4px;\n height: 8px;\n background: var(--purple);\n border-radius: 4px;\n animation: scrollWheel 1.8s ease infinite;\n}\n\n.scroll-indicator span {\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 2px;\n color: #666;\n}\n\n\/* ============================================\n 2. TRUSTED COMPANIES MARQUEE\n ============================================ *\/\n.marquee-section {\n padding: 50px 0;\n background: var(--light-gray);\n border-top: var(--border-thick);\n border-bottom: var(--border-thick);\n overflow: hidden;\n position: relative;\n}\n\n.marquee-label {\n text-align: center;\n font-size: 14px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 3px;\n color: #666;\n margin-bottom: 30px;\n}\n\n.marquee {\n display: flex;\n overflow: hidden;\n position: relative;\n mask-image: linear-gradient(90deg, transparent, white 8%, white 92%, transparent);\n}\n\n.marquee-track {\n display: flex;\n gap: 60px;\n animation: marqueeScroll 35s linear infinite;\n flex-shrink: 0;\n padding-right: 60px;\n}\n\n.marquee-item {\n display: flex;\n align-items: center;\n gap: 12px;\n font-size: 24px;\n font-weight: 700;\n color: var(--dark);\n white-space: nowrap;\n flex-shrink: 0;\n opacity: 0.5;\n transition: opacity 0.3s;\n}\n\n.marquee-item:hover { opacity: 1; }\n\n.marquee-item svg {\n width: 32px;\n height: 32px;\n flex-shrink: 0;\n}\n\n\/* ============================================\n 3. SERVICES SECTION\n ============================================ *\/\n.services {\n padding: var(--section-pad) 0;\n background: var(--white);\n position: relative;\n overflow: hidden;\n}\n\n.services-header {\n text-align: center;\n max-width: 700px;\n margin: 0 auto 64px;\n}\n\n.services-header .section-tag { margin-bottom: 20px; }\n\n.services-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 28px;\n position: relative;\n z-index: 2;\n}\n\n.service-card {\n background: var(--white);\n border: var(--border-thick);\n border-radius: var(--radius-lg);\n padding: 36px 32px;\n box-shadow: var(--shadow-brutal);\n transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\n position: relative;\n overflow: hidden;\n}\n\n.service-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 6px;\n background: var(--purple);\n transform: scaleX(0);\n transform-origin: left;\n transition: transform 0.4s ease;\n}\n\n.service-card:hover {\n transform: translate(-5px, -5px);\n box-shadow: 11px 11px 0 var(--purple);\n}\n\n.service-card:hover::before { transform: scaleX(1); }\n\n.service-card:hover .service-icon {\n transform: rotate(-8deg) scale(1.1);\n}\n\n.service-icon {\n width: 64px;\n height: 64px;\n border-radius: var(--radius);\n border: 2.5px solid var(--border);\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 24px;\n transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\n box-shadow: 3px 3px 0 var(--border);\n}\n\n.service-icon svg { width: 32px; height: 32px; }\n\n.service-card h3 {\n font-size: 24px;\n font-weight: 700;\n margin-bottom: 12px;\n letter-spacing: -0.5px;\n}\n\n.service-card p {\n font-size: 15px;\n color: #555;\n line-height: 1.65;\n margin-bottom: 20px;\n}\n\n.service-link {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n font-size: 14px;\n font-weight: 600;\n color: var(--purple);\n transition: gap 0.3s;\n}\n\n.service-card:hover .service-link { gap: 12px; }\n\n.service-link svg { width: 16px; height: 16px; }\n\n\/* Icon background colors *\/\n.icon-purple { background: var(--purple); }\n.icon-purple svg { stroke: var(--white); }\n.icon-teal { background: var(--teal); }\n.icon-teal svg { stroke: var(--dark); }\n.icon-yellow { background: var(--yellow); }\n.icon-yellow svg { stroke: var(--dark); }\n.icon-pink { background: var(--pink); }\n.icon-pink svg { stroke: var(--white); }\n\n\/* ============================================\n 4. WHY XOHAR SECTION\n ============================================ *\/\n.why-xohar {\n padding: var(--section-pad) 0;\n background: var(--light-gray);\n position: relative;\n overflow: hidden;\n}\n\n.why-xohar::before {\n content: '';\n position: absolute;\n inset: 0;\n background-image: radial-gradient(circle, rgba(32,32,32,0.05) 1.5px, transparent 1.5px);\n background-size: 30px 30px;\n}\n\n.why-inner {\n position: relative;\n z-index: 2;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 60px;\n align-items: center;\n}\n\n.why-visual {\n position: relative;\n height: 500px;\n}\n\n.why-content h2 {\n font-size: clamp(36px, 5vw, 52px);\n font-weight: 800;\n line-height: 1.1;\n letter-spacing: -1.5px;\n margin-bottom: 20px;\n}\n\n.why-content > p {\n font-size: 17px;\n color: #555;\n margin-bottom: 36px;\n line-height: 1.7;\n}\n\n.why-features {\n display: flex;\n flex-direction: column;\n gap: 20px;\n}\n\n.why-feature {\n display: flex;\n gap: 18px;\n align-items: flex-start;\n padding: 20px;\n background: var(--white);\n border: 2.5px solid var(--border);\n border-radius: var(--radius);\n box-shadow: 4px 4px 0 var(--border);\n transition: all 0.3s;\n}\n\n.why-feature:hover {\n transform: translate(-3px, -3px);\n box-shadow: 7px 7px 0 var(--purple);\n}\n\n.why-feature-icon {\n width: 48px;\n height: 48px;\n border-radius: 12px;\n background: var(--purple);\n border: 2px solid var(--border);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n box-shadow: 2px 2px 0 var(--border);\n}\n\n.why-feature-icon svg { width: 24px; height: 24px; stroke: var(--white); }\n\n.why-feature h4 {\n font-size: 18px;\n font-weight: 700;\n margin-bottom: 4px;\n}\n\n.why-feature p {\n font-size: 14px;\n color: #666;\n line-height: 1.5;\n}\n\n\/* Stats bar *\/\n.stats-bar {\n margin-top: 80px;\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 24px;\n position: relative;\n z-index: 2;\n}\n\n.stat-card {\n text-align: center;\n padding: 32px 20px;\n background: var(--white);\n border: var(--border-thick);\n border-radius: var(--radius);\n box-shadow: var(--shadow-brutal);\n transition: all 0.3s;\n}\n\n.stat-card:hover {\n transform: translate(-3px, -3px);\n box-shadow: 9px 9px 0 var(--purple);\n}\n\n.stat-num {\n font-size: clamp(36px, 4vw, 48px);\n font-weight: 800;\n color: var(--purple);\n line-height: 1;\n margin-bottom: 8px;\n letter-spacing: -1px;\n}\n\n.stat-label {\n font-size: 14px;\n font-weight: 500;\n color: #555;\n text-transform: uppercase;\n letter-spacing: 1px;\n}\n\n\/* ============================================\n 5. PORTFOLIO SECTION\n ============================================ *\/\n.portfolio {\n padding: var(--section-pad) 0;\n background: var(--white);\n position: relative;\n overflow: hidden;\n}\n\n.portfolio-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n margin-bottom: 56px;\n flex-wrap: wrap;\n gap: 24px;\n}\n\n.portfolio-header .left { max-width: 600px; }\n\n.portfolio-masonry {\n columns: 3;\n column-gap: 24px;\n}\n\n.portfolio-item {\n break-inside: avoid;\n margin-bottom: 24px;\n border: var(--border-thick);\n border-radius: var(--radius-lg);\n overflow: hidden;\n box-shadow: var(--shadow-brutal);\n transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\n position: relative;\n cursor: none;\n}\n\n.portfolio-item:hover {\n transform: translate(-4px, -4px);\n box-shadow: 10px 10px 0 var(--purple);\n}\n\n.portfolio-thumb {\n height: 280px;\n position: relative;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.portfolio-item:nth-child(1) .portfolio-thumb { background: var(--purple); height: 320px; }\n.portfolio-item:nth-child(2) .portfolio-thumb { background: var(--teal); height: 260px; }\n.portfolio-item:nth-child(3) .portfolio-thumb { background: var(--yellow); height: 300px; }\n.portfolio-item:nth-child(4) .portfolio-thumb { background: var(--pink); height: 240px; }\n.portfolio-item:nth-child(5) .portfolio-thumb { background: var(--dark); height: 290px; }\n.portfolio-item:nth-child(6) .portfolio-thumb { background: var(--soft-purple); height: 270px; }\n\n.portfolio-mockup {\n width: 85%;\n transition: transform 0.5s ease;\n}\n\n.portfolio-item:hover .portfolio-mockup {\n transform: scale(1.05);\n}\n\n.portfolio-overlay {\n position: absolute;\n inset: 0;\n background: rgba(17, 17, 17, 0.85);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n opacity: 0;\n transition: opacity 0.3s;\n padding: 24px;\n text-align: center;\n}\n\n.portfolio-item:hover .portfolio-overlay { opacity: 1; }\n\n.portfolio-overlay .cat {\n font-size: 12px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 2px;\n color: var(--purple);\n margin-bottom: 8px;\n}\n\n.portfolio-overlay h4 {\n font-size: 22px;\n font-weight: 700;\n color: var(--white);\n margin-bottom: 12px;\n}\n\n.portfolio-overlay p {\n font-size: 14px;\n color: #ccc;\n line-height: 1.5;\n}\n\n.portfolio-info {\n padding: 20px 24px;\n background: var(--white);\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.portfolio-info h4 {\n font-size: 17px;\n font-weight: 700;\n}\n\n.portfolio-info .tag {\n font-size: 12px;\n color: #888;\n font-weight: 500;\n}\n\n\/* ============================================\n 6. PROCESS SECTION\n ============================================ *\/\n.process {\n padding: var(--section-pad) 0;\n background: var(--light-gray);\n position: relative;\n overflow: hidden;\n}\n\n.process::before {\n content: '';\n position: absolute;\n inset: 0;\n background-image: \n linear-gradient(rgba(32,32,32,0.03) 1px, transparent 1px),\n linear-gradient(90deg, rgba(32,32,32,0.03) 1px, transparent 1px);\n background-size: 50px 50px;\n}\n\n.process-header {\n text-align: center;\n max-width: 700px;\n margin: 0 auto 64px;\n position: relative;\n z-index: 2;\n}\n\n.process-timeline {\n position: relative;\n z-index: 2;\n display: grid;\n grid-template-columns: repeat(6, 1fr);\n gap: 16px;\n}\n\n.process-line {\n position: absolute;\n top: 40px;\n left: 8%;\n right: 8%;\n height: 4px;\n background: var(--border);\n border-radius: 4px;\n z-index: 0;\n}\n\n.process-line::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 0;\n height: 100%;\n background: var(--purple);\n border-radius: 4px;\n transition: width 2s ease;\n}\n\n.process-line.animate::after { width: 100%; }\n\n.process-step {\n text-align: center;\n position: relative;\n z-index: 2;\n}\n\n.process-num {\n width: 80px;\n height: 80px;\n margin: 0 auto 20px;\n background: var(--white);\n border: var(--border-thick);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 4px 4px 0 var(--border);\n transition: all 0.3s;\n position: relative;\n}\n\n.process-step:hover .process-num {\n background: var(--purple);\n transform: translate(-3px, -3px);\n box-shadow: 7px 7px 0 var(--border);\n}\n\n.process-num svg { width: 36px; height: 36px; transition: all 0.3s; }\n.process-step:hover .process-num svg { stroke: var(--white); }\n\n.process-step h4 {\n font-size: 18px;\n font-weight: 700;\n margin-bottom: 8px;\n}\n\n.process-step p {\n font-size: 13px;\n color: #666;\n line-height: 1.5;\n padding: 0 8px;\n}\n\n\/* ============================================\n 7. TESTIMONIALS SECTION\n ============================================ *\/\n.testimonials {\n padding: var(--section-pad) 0;\n background: var(--white);\n position: relative;\n overflow: hidden;\n}\n\n.testimonials-header {\n text-align: center;\n max-width: 700px;\n margin: 0 auto 64px;\n}\n\n.testimonials-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 28px;\n position: relative;\n}\n\n.testimonial-card {\n background: var(--light-gray);\n border: var(--border-thick);\n border-radius: var(--radius-lg);\n padding: 36px 32px;\n box-shadow: var(--shadow-brutal);\n transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\n position: relative;\n}\n\n.testimonial-card:nth-child(2) { background: var(--purple); color: var(--white); }\n.testimonial-card:nth-child(2) .quote-mark { color: rgba(255,255,255,0.3); }\n.testimonial-card:nth-child(2) .testimonial-text { color: rgba(255,255,255,0.95); }\n.testimonial-card:nth-child(2) .testimonial-name { color: var(--white); }\n.testimonial-card:nth-child(2) .testimonial-role { color: rgba(255,255,255,0.7); }\n\n.testimonial-card:hover {\n transform: translate(-4px, -4px);\n box-shadow: 10px 10px 0 var(--border);\n}\n\n.quote-mark {\n font-size: 80px;\n line-height: 0.5;\n color: rgba(32,32,32,0.1);\n font-family: Georgia, serif;\n margin-bottom: 16px;\n display: block;\n}\n\n.testimonial-stars {\n display: flex;\n gap: 4px;\n margin-bottom: 16px;\n}\n\n.testimonial-stars svg { width: 18px; height: 18px; }\n\n.testimonial-text {\n font-size: 16px;\n line-height: 1.7;\n color: #333;\n margin-bottom: 24px;\n}\n\n.testimonial-author {\n display: flex;\n align-items: center;\n gap: 14px;\n padding-top: 20px;\n border-top: 2px solid rgba(32,32,32,0.1);\n}\n\n.testimonial-card:nth-child(2) .testimonial-author {\n border-top-color: rgba(255,255,255,0.2);\n}\n\n.testimonial-avatar {\n width: 48px;\n height: 48px;\n border-radius: 50%;\n border: 2.5px solid var(--border);\n flex-shrink: 0;\n overflow: hidden;\n}\n\n.testimonial-info .testimonial-name {\n font-size: 15px;\n font-weight: 700;\n}\n\n.testimonial-info .testimonial-role {\n font-size: 13px;\n color: #777;\n}\n\n\/* ============================================\n 8. CTA SECTION\n ============================================ *\/\n.cta {\n padding: 100px 0;\n background: var(--purple);\n position: relative;\n overflow: hidden;\n color: var(--white);\n}\n\n.cta::before {\n content: '';\n position: absolute;\n inset: 0;\n background-image: radial-gradient(circle, rgba(255,255,255,0.08) 1.5px, transparent 1.5px);\n background-size: 30px 30px;\n}\n\n.cta-inner {\n position: relative;\n z-index: 2;\n text-align: center;\n max-width: 800px;\n margin: 0 auto;\n}\n\n.cta-tag {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n background: rgba(255,255,255,0.15);\n border: 2px solid rgba(255,255,255,0.3);\n border-radius: 100px;\n padding: 8px 18px;\n font-size: 13px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 1px;\n margin-bottom: 24px;\n backdrop-filter: blur(10px);\n}\n\n.cta h2 {\n font-size: clamp(40px, 6vw, 68px);\n font-weight: 800;\n line-height: 1.05;\n letter-spacing: -2px;\n margin-bottom: 20px;\n}\n\n.cta p {\n font-size: 19px;\n color: rgba(255,255,255,0.85);\n margin-bottom: 40px;\n max-width: 580px;\n margin-left: auto;\n margin-right: auto;\n line-height: 1.6;\n}\n\n.cta-buttons {\n display: flex;\n gap: 16px;\n justify-content: center;\n flex-wrap: wrap;\n margin-bottom: 56px;\n}\n\n.cta .btn-primary {\n background: var(--white);\n color: var(--purple);\n}\n\n.cta .btn-outline {\n background: transparent;\n color: var(--white);\n border-color: var(--white);\n box-shadow: 6px 6px 0 rgba(0,0,0,0.2);\n}\n\n.cta .btn-outline:hover {\n box-shadow: 9px 9px 0 rgba(0,0,0,0.2);\n}\n\n.cta .btn-whatsapp {\n background: #25D366;\n border-color: var(--white);\n}\n\n.cta-contact {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 24px;\n padding-top: 48px;\n border-top: 2px solid rgba(255,255,255,0.2);\n}\n\n.cta-contact-item {\n text-align: center;\n}\n\n.cta-contact-item .icon {\n width: 48px;\n height: 48px;\n margin: 0 auto 12px;\n background: rgba(255,255,255,0.15);\n border: 2px solid rgba(255,255,255,0.3);\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.cta-contact-item .icon svg { width: 22px; height: 22px; stroke: var(--white); }\n\n.cta-contact-item .label {\n font-size: 12px;\n text-transform: uppercase;\n letter-spacing: 1.5px;\n color: rgba(255,255,255,0.6);\n margin-bottom: 4px;\n}\n\n.cta-contact-item .value {\n font-size: 16px;\n font-weight: 600;\n}\n\n\/* ============================================\n SCROLL REVEAL ANIMATIONS\n ============================================ *\/\n.reveal {\n opacity: 0;\n transform: translateY(40px);\n transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);\n}\n\n.reveal.visible {\n opacity: 1;\n transform: translateY(0);\n}\n\n.reveal-delay-1 { transition-delay: 0.1s; }\n.reveal-delay-2 { transition-delay: 0.2s; }\n.reveal-delay-3 { transition-delay: 0.3s; }\n.reveal-delay-4 { transition-delay: 0.4s; }\n.reveal-delay-5 { transition-delay: 0.5s; }\n\n\/* ============================================\n KEYFRAME ANIMATIONS\n ============================================ *\/\n@keyframes float {\n 0%, 100% { transform: translateY(0) rotate(0deg); }\n 50% { transform: translateY(-20px) rotate(5deg); }\n}\n\n@keyframes floatReverse {\n 0%, 100% { transform: translateY(0) rotate(0deg); }\n 50% { transform: translateY(20px) rotate(-5deg); }\n}\n\n@keyframes pulse {\n 0%, 100% { transform: scale(1); opacity: 1; }\n 50% { transform: scale(1.3); opacity: 0.7; }\n}\n\n@keyframes marqueeScroll {\n from { transform: translateX(0); }\n to { transform: translateX(-50%); }\n}\n\n@keyframes scrollWheel {\n 0% { opacity: 1; transform: translateX(-50%) translateY(0); }\n 100% { opacity: 0; transform: translateX(-50%) translateY(12px); }\n}\n\n@keyframes spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n\n@keyframes wiggle {\n 0%, 100% { transform: rotate(-3deg); }\n 50% { transform: rotate(3deg); }\n}\n\n\/* ============================================\n RESPONSIVE STYLES\n ============================================ *\/\n\n\/* Tablet Landscape *\/\n@media (max-width: 1024px) {\n :root { --section-pad: 80px; }\n \n .hero-inner {\n grid-template-columns: 1fr;\n gap: 40px;\n }\n \n .hero-visual { height: 400px; }\n \n .services-grid { grid-template-columns: repeat(2, 1fr); }\n \n .why-inner { grid-template-columns: 1fr; gap: 40px; }\n .why-visual { height: 350px; }\n \n .portfolio-masonry { columns: 2; }\n \n .process-timeline {\n grid-template-columns: repeat(3, 1fr);\n gap: 32px;\n }\n \n .process-line { display: none; }\n \n .testimonials-grid { grid-template-columns: 1fr; max-width: 600px; margin: 0 auto; }\n \n .stats-bar { grid-template-columns: repeat(2, 1fr); }\n}\n\n\/* Tablet Portrait *\/\n@media (max-width: 768px) {\n .container { padding: 0 24px; }\n \n :root { --section-pad: 64px; }\n \n .hero { padding: 40px 0 60px; }\n \n .hero h1 { letter-spacing: -1.5px; }\n \n .hero-stats { gap: 24px; flex-wrap: wrap; }\n \n .hero-stat .num { font-size: 26px; }\n \n .portfolio-header { flex-direction: column; align-items: flex-start; }\n \n .cta-contact { grid-template-columns: 1fr; gap: 20px; }\n \n .cta-buttons { flex-direction: column; align-items: stretch; }\n \n .marquee-item { font-size: 18px; gap: 8px; }\n .marquee-item svg { width: 24px; height: 24px; }\n}\n\n\/* Mobile *\/\n@media (max-width: 580px) {\n .container { padding: 0 20px; }\n \n :root { --section-pad: 56px; }\n \n .hero h1 { font-size: 38px; letter-spacing: -1px; }\n \n .hero p { font-size: 16px; }\n \n .hero-buttons { flex-direction: column; width: 100%; }\n \n .btn { width: 100%; }\n \n .hero-stats { flex-direction: row; gap: 20px; }\n .hero-stat { flex: 1; }\n \n .services-grid { grid-template-columns: 1fr; }\n \n .portfolio-masonry { columns: 1; }\n \n .process-timeline { grid-template-columns: repeat(2, 1fr); gap: 28px; }\n \n .stats-bar { grid-template-columns: 1fr; }\n \n .section-title { font-size: 32px; }\n \n .cta h2 { font-size: 36px; }\n \n .scroll-indicator { display: none; }\n \n .hero-visual { height: 300px; }\n \n .why-visual { height: 280px; }\n}\n\n\/* Large Desktop *\/\n@media (min-width: 1440px) {\n .container { max-width: 1400px; }\n}\n<\/style>\n<\/head>\n<body>\n\n<!-- ============================================\n CUSTOM CURSOR\n ============================================ -->\n<div class=\"cursor-dot\" id=\"cursorDot\"><\/div>\n<div class=\"cursor-ring\" id=\"cursorRing\"><\/div>\n\n<!-- ============================================\n 1. HERO SECTION\n ============================================ -->\n<section class=\"hero\" id=\"hero\">\n <!-- Background decorative shapes -->\n <svg class=\"bg-decor\" style=\"top: 8%; left: 5%; width: 60px; height: 60px;\" viewBox=\"0 0 60 60\" data-parallax=\"0.03\">\n <circle cx=\"30\" cy=\"30\" r=\"26\" fill=\"none\" stroke=\"#202020\" stroke-width=\"3\"\/>\n <circle cx=\"30\" cy=\"30\" r=\"10\" fill=\"#7802EF\"\/>\n <\/svg>\n <svg class=\"bg-decor\" style=\"top: 15%; right: 8%; width: 50px; height: 50px;\" viewBox=\"0 0 50 50\" data-parallax=\"0.05\">\n <rect x=\"5\" y=\"5\" width=\"40\" height=\"40\" rx=\"8\" fill=\"#FFD93D\" stroke=\"#202020\" stroke-width=\"3\" transform=\"rotate(15 25 25)\"\/>\n <\/svg>\n <svg class=\"bg-decor\" style=\"bottom: 20%; left: 3%; width: 70px; height: 70px;\" viewBox=\"0 0 70 70\" data-parallax=\"0.04\">\n <path d=\"M35 5 L42 28 L65 35 L42 42 L35 65 L28 42 L5 35 L28 28 Z\" fill=\"#FF6B9D\" stroke=\"#202020\" stroke-width=\"3\"\/>\n <\/svg>\n <svg class=\"bg-decor\" style=\"top: 50%; right: 3%; width: 40px; height: 40px;\" viewBox=\"0 0 40 40\" data-parallax=\"0.06\">\n <line x1=\"8\" y1=\"20\" x2=\"32\" y2=\"20\" stroke=\"#202020\" stroke-width=\"4\" stroke-linecap=\"round\"\/>\n <line x1=\"20\" y1=\"8\" x2=\"20\" y2=\"32\" stroke=\"#202020\" stroke-width=\"4\" stroke-linecap=\"round\"\/>\n <\/svg>\n <svg class=\"bg-decor\" style=\"bottom: 10%; right: 15%; width: 55px; height: 55px;\" viewBox=\"0 0 55 55\" data-parallax=\"0.03\">\n <polygon points=\"27,5 50,45 5,45\" fill=\"none\" stroke=\"#202020\" stroke-width=\"3\"\/>\n <\/svg>\n\n <div class=\"container\">\n <div class=\"hero-inner\">\n <!-- Left: Content -->\n <div class=\"hero-content\">\n <div class=\"hero-badge reveal\">\n <span class=\"live-dot\"><\/span>\n <span>Available for new projects \u2014 Pakistan & Worldwide<\/span>\n <\/div>\n <h1 class=\"reveal reveal-delay-1\">\n We Build Digital<br>\n Experiences That<br>\n <span class=\"highlight\">Convert.<\/span>\n <\/h1>\n <p class=\"reveal reveal-delay-2\">\n Xohar is a premium digital agency crafting bold websites, unforgettable brands, and growth-driven marketing strategies for ambitious companies in Lahore, Islamabad, and Faisalabad.\n <\/p>\n <div class=\"hero-buttons reveal reveal-delay-3\">\n <a href=\"#cta\" class=\"btn btn-primary magnetic\">\n Get Started\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\n <\/a>\n <a href=\"https:\/\/wa.me\/923454693418\" class=\"btn btn-whatsapp magnetic\" target=\"_blank\">\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z\"\/><\/svg>\n WhatsApp\n <\/a>\n <\/div>\n <div class=\"hero-stats reveal reveal-delay-4\">\n <div class=\"hero-stat\">\n <div class=\"num\">15<span>+<\/span><\/div>\n <div class=\"label\">Projects Delivered<\/div>\n <\/div>\n <div class=\"hero-stat\">\n <div class=\"num\">98<span>%<\/span><\/div>\n <div class=\"label\">Client Satisfaction<\/div>\n <\/div>\n <div class=\"hero-stat\">\n <div class=\"num\">7<span>+<\/span><\/div>\n <div class=\"label\">Worked with countires<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Right: Custom SVG Illustration -->\n <div class=\"hero-visual reveal reveal-delay-2\">\n <div class=\"hero-illustration\">\n <!-- Floating elements -->\n <div class=\"float-elem\" style=\"top: -10px; right: 10%; z-index: 3;\">\n <svg width=\"80\" height=\"80\" viewBox=\"0 0 80 80\">\n <rect x=\"8\" y=\"8\" width=\"64\" height=\"56\" rx=\"10\" fill=\"#FFD93D\" stroke=\"#202020\" stroke-width=\"3\"\/>\n <line x1=\"8\" y1=\"22\" x2=\"72\" y2=\"22\" stroke=\"#202020\" stroke-width=\"3\"\/>\n <circle cx=\"18\" cy=\"15\" r=\"3\" fill=\"#FF6B9D\" stroke=\"#202020\" stroke-width=\"2\"\/>\n <circle cx=\"28\" cy=\"15\" r=\"3\" fill=\"#4ECDC4\" stroke=\"#202020\" stroke-width=\"2\"\/>\n <circle cx=\"38\" cy=\"15\" r=\"3\" fill=\"#7802EF\" stroke=\"#202020\" stroke-width=\"2\"\/>\n <rect x=\"16\" y=\"32\" width=\"30\" height=\"6\" rx=\"3\" fill=\"#7802EF\"\/>\n <rect x=\"16\" y=\"44\" width=\"48\" height=\"4\" rx=\"2\" fill=\"#202020\" opacity=\"0.2\"\/>\n <rect x=\"16\" y=\"52\" width=\"36\" height=\"4\" rx=\"2\" fill=\"#202020\" opacity=\"0.2\"\/>\n <\/svg>\n <\/div>\n\n <div class=\"float-elem\" style=\"bottom: 20px; left: -20px; z-index: 3; animation: floatReverse 7s ease-in-out infinite;\">\n <svg width=\"100\" height=\"100\" viewBox=\"0 0 100 100\">\n <rect x=\"10\" y=\"15\" width=\"80\" height=\"70\" rx=\"12\" fill=\"#FFFFFF\" stroke=\"#202020\" stroke-width=\"3\"\/>\n <rect x=\"10\" y=\"15\" width=\"80\" height=\"18\" rx=\"12\" fill=\"#7802EF\"\/>\n <text x=\"50\" y=\"28\" text-anchor=\"middle\" fill=\"#FFFFFF\" font-family=\"monospace\" font-size=\"10\" font-weight=\"bold\"><\/><\/text>\n <rect x=\"20\" y=\"42\" width=\"40\" height=\"4\" rx=\"2\" fill=\"#202020\" opacity=\"0.3\"\/>\n <rect x=\"20\" y=\"50\" width=\"60\" height=\"4\" rx=\"2\" fill=\"#202020\" opacity=\"0.2\"\/>\n <rect x=\"20\" y=\"58\" width=\"50\" height=\"4\" rx=\"2\" fill=\"#202020\" opacity=\"0.2\"\/>\n <rect x=\"20\" y=\"68\" width=\"30\" height=\"8\" rx=\"4\" fill=\"#FFD93D\" stroke=\"#202020\" stroke-width=\"2\"\/>\n <\/svg>\n <\/div>\n\n <div class=\"float-elem\" style=\"top: 30%; right: -10px; z-index: 3;\">\n <svg width=\"60\" height=\"60\" viewBox=\"0 0 60 60\">\n <circle cx=\"30\" cy=\"30\" r=\"25\" fill=\"#FF6B9D\" stroke=\"#202020\" stroke-width=\"3\"\/>\n <path d=\"M22 30 L28 36 L40 22\" stroke=\"#FFFFFF\" stroke-width=\"4\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg>\n <\/div>\n\n <div class=\"float-elem\" style=\"bottom: 30%; right: 15%; z-index: 3; animation-delay: 1s;\">\n <svg width=\"50\" height=\"50\" viewBox=\"0 0 50 50\">\n <polygon points=\"25,5 30,20 45,25 30,30 25,45 20,30 5,25 20,20\" fill=\"#4ECDC4\" stroke=\"#202020\" stroke-width=\"3\"\/>\n <\/svg>\n <\/div>\n\n <!-- Main illustration: Creative workspace -->\n <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 500 500\" style=\"position: relative; z-index: 2;\" data-parallax=\"0.02\">\n <!-- Purple blob background -->\n <ellipse cx=\"250\" cy=\"280\" rx=\"200\" ry=\"160\" fill=\"#7802EF\" opacity=\"0.08\"\/>\n <ellipse cx=\"250\" cy=\"260\" rx=\"160\" ry=\"130\" fill=\"#7802EF\" opacity=\"0.06\"\/>\n\n <!-- Large browser window -->\n <g transform=\"rotate(-4 250 250)\">\n <rect x=\"80\" y=\"120\" width=\"340\" height=\"240\" rx=\"16\" fill=\"#FFFFFF\" stroke=\"#202020\" stroke-width=\"4\"\/>\n <rect x=\"80\" y=\"120\" width=\"340\" height=\"36\" rx=\"16\" fill=\"#7802EF\"\/>\n <rect x=\"80\" y=\"138\" width=\"340\" height=\"18\" fill=\"#7802EF\"\/>\n <circle cx=\"100\" cy=\"138\" r=\"5\" fill=\"#FF6B9D\" stroke=\"#202020\" stroke-width=\"2\"\/>\n <circle cx=\"116\" cy=\"138\" r=\"5\" fill=\"#FFD93D\" stroke=\"#202020\" stroke-width=\"2\"\/>\n <circle cx=\"132\" cy=\"138\" r=\"5\" fill=\"#4ECDC4\" stroke=\"#202020\" stroke-width=\"2\"\/>\n \n <!-- Browser content -->\n <rect x=\"100\" y=\"172\" width=\"140\" height=\"12\" rx=\"6\" fill=\"#202020\"\/>\n <rect x=\"100\" y=\"192\" width=\"200\" height=\"6\" rx=\"3\" fill=\"#202020\" opacity=\"0.2\"\/>\n <rect x=\"100\" y=\"204\" width=\"180\" height=\"6\" rx=\"3\" fill=\"#202020\" opacity=\"0.2\"\/>\n \n <rect x=\"100\" y=\"224\" width=\"80\" height=\"28\" rx=\"6\" fill=\"#FFD93D\" stroke=\"#202020\" stroke-width=\"2.5\"\/>\n <rect x=\"190\" y=\"224\" width=\"80\" height=\"28\" rx=\"6\" fill=\"none\" stroke=\"#202020\" stroke-width=\"2.5\"\/>\n \n <!-- Chart in browser -->\n <rect x=\"100\" y=\"270\" width=\"140\" height=\"70\" rx=\"8\" fill=\"#F5F5F5\" stroke=\"#202020\" stroke-width=\"2\"\/>\n <polyline points=\"110,330 130,310 150,320 170,290 190,300 210,270 230,280\" fill=\"none\" stroke=\"#7802EF\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <circle cx=\"230\" cy=\"280\" r=\"4\" fill=\"#7802EF\"\/>\n \n <!-- Side card in browser -->\n <rect x=\"255\" y=\"270\" width=\"150\" height=\"70\" rx=\"8\" fill=\"#FF6B9D\" stroke=\"#202020\" stroke-width=\"2.5\"\/>\n <rect x=\"265\" y=\"282\" width=\"60\" height=\"6\" rx=\"3\" fill=\"#FFFFFF\"\/>\n <rect x=\"265\" y=\"294\" width=\"80\" height=\"4\" rx=\"2\" fill=\"#FFFFFF\" opacity=\"0.7\"\/>\n <rect x=\"265\" y=\"304\" width=\"70\" height=\"4\" rx=\"2\" fill=\"#FFFFFF\" opacity=\"0.7\"\/>\n <rect x=\"265\" y=\"318\" width=\"40\" height=\"12\" rx=\"6\" fill=\"#FFD93D\" stroke=\"#202020\" stroke-width=\"2\"\/>\n <\/g>\n\n <!-- Character (minimal abstract) -->\n <g transform=\"translate(340, 280)\">\n <!-- Body -->\n <ellipse cx=\"40\" cy=\"80\" rx=\"35\" ry=\"40\" fill=\"#4ECDC4\" stroke=\"#202020\" stroke-width=\"3.5\"\/>\n <!-- Head -->\n <circle cx=\"40\" cy=\"35\" r=\"25\" fill=\"#FFD93D\" stroke=\"#202020\" stroke-width=\"3.5\"\/>\n <!-- Eyes -->\n <circle cx=\"32\" cy=\"33\" r=\"3\" fill=\"#202020\"\/>\n <circle cx=\"48\" cy=\"33\" r=\"3\" fill=\"#202020\"\/>\n <!-- Smile -->\n <path d=\"M32 42 Q40 48 48 42\" stroke=\"#202020\" stroke-width=\"2.5\" fill=\"none\" stroke-linecap=\"round\"\/>\n <!-- Arm -->\n <path d=\"M10 75 Q-5 60 0 40\" stroke=\"#202020\" stroke-width=\"3.5\" fill=\"none\" stroke-linecap=\"round\"\/>\n <circle cx=\"0\" cy=\"38\" r=\"8\" fill=\"#FFD93D\" stroke=\"#202020\" stroke-width=\"3\"\/>\n <\/g>\n\n <!-- Floating UI elements -->\n <g transform=\"translate(60, 320)\">\n <rect x=\"0\" y=\"0\" width=\"70\" height=\"50\" rx=\"10\" fill=\"#FFFFFF\" stroke=\"#202020\" stroke-width=\"3\"\/>\n <circle cx=\"15\" cy=\"15\" r=\"6\" fill=\"#7802EF\"\/>\n <rect x=\"26\" y=\"10\" width=\"35\" height=\"4\" rx=\"2\" fill=\"#202020\" opacity=\"0.3\"\/>\n <rect x=\"26\" y=\"18\" width=\"25\" height=\"4\" rx=\"2\" fill=\"#202020\" opacity=\"0.2\"\/>\n <rect x=\"10\" y=\"32\" width=\"50\" height=\"3\" rx=\"1.5\" fill=\"#7802EF\" opacity=\"0.3\"\/>\n <rect x=\"10\" y=\"38\" width=\"40\" height=\"3\" rx=\"1.5\" fill=\"#7802EF\" opacity=\"0.3\"\/>\n <\/g>\n\n <!-- Plus sign -->\n <g transform=\"translate(420, 150)\">\n <circle cx=\"20\" cy=\"20\" r=\"18\" fill=\"#FFD93D\" stroke=\"#202020\" stroke-width=\"3\"\/>\n <line x1=\"20\" y1=\"12\" x2=\"20\" y2=\"28\" stroke=\"#202020\" stroke-width=\"3\" stroke-linecap=\"round\"\/>\n <line x1=\"12\" y1=\"20\" x2=\"28\" y2=\"20\" stroke=\"#202020\" stroke-width=\"3\" stroke-linecap=\"round\"\/>\n <\/g>\n\n <!-- Star -->\n <g transform=\"translate(50, 150)\">\n <polygon points=\"20,5 24,16 36,16 26,24 30,36 20,28 10,36 14,24 4,16 16,16\" fill=\"#FF6B9D\" stroke=\"#202020\" stroke-width=\"2.5\"\/>\n <\/g>\n <\/svg>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Scroll indicator -->\n <div class=\"scroll-indicator\">\n <div class=\"scroll-mouse\"><\/div>\n <span>Scroll<\/span>\n <\/div>\n<\/section>\n\n<!-- ============================================\n 2. TRUSTED COMPANIES MARQUEE\n ============================================ -->\n<section class=\"marquee-section\">\n <div class=\"marquee-label\">Trusted by forward-thinking companies<\/div>\n <div class=\"marquee\">\n <div class=\"marquee-track\">\n <!-- Set 1 -->\n <div class=\"marquee-item\"><svg viewBox=\"0 0 32 32\" fill=\"none\"><rect x=\"4\" y=\"4\" width=\"24\" height=\"24\" rx=\"6\" fill=\"#7802EF\"\/><path d=\"M10 12h12M10 16h12M10 20h8\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\"\/><\/svg> www.furnishow.com <\/div>\n <div class=\"marquee-item\"><svg viewBox=\"0 0 32 32\" fill=\"none\"><circle cx=\"16\" cy=\"16\" r=\"12\" fill=\"#FFD93D\" stroke=\"#202020\" stroke-width=\"2\"\/><path d=\"M10 16l4 4 8-8\" stroke=\"#202020\" stroke-width=\"2.5\" stroke-linecap=\"round\"\/><\/svg> ezservicescompany.com<\/div>\n <div class=\"marquee-item\"><svg viewBox=\"0 0 32 32\" fill=\"none\"><polygon points=\"16,4 28,28 4,28\" fill=\"#FF6B9D\" stroke=\"#202020\" stroke-width=\"2\"\/><\/svg> www.gettopk.com<\/div>\n <div class=\"marquee-item\"><svg viewBox=\"0 0 32 32\" fill=\"none\"><rect x=\"6\" y=\"6\" width=\"20\" height=\"20\" rx=\"4\" fill=\"#4ECDC4\" stroke=\"#202020\" stroke-width=\"2\"\/><circle cx=\"16\" cy=\"16\" r=\"5\" fill=\"#fff\"\/><\/svg> www.hussainstores.com<\/div>\n <div class=\"marquee-item\"><svg viewBox=\"0 0 32 32\" fill=\"none\"><path d=\"M16 4l4 8 8 4-8 4-4 8-4-8-8-4 8-4z\" fill=\"#7802EF\" stroke=\"#202020\" stroke-width=\"2\"\/><\/svg> www.sakice.com<\/div>\n <div class=\"marquee-item\"><svg viewBox=\"0 0 32 32\" fill=\"none\"><rect x=\"4\" y=\"8\" width=\"24\" height=\"16\" rx=\"3\" fill=\"#111\" stroke=\"#202020\" stroke-width=\"2\"\/><circle cx=\"10\" cy=\"16\" r=\"2\" fill=\"#FFD93D\"\/><rect x=\"16\" y=\"14\" width=\"10\" height=\"4\" rx=\"1\" fill=\"#fff\"\/><\/svg> www.peacequran.com<\/div>\n <div class=\"marquee-item\"><svg viewBox=\"0 0 32 32\" fill=\"none\"><circle cx=\"16\" cy=\"16\" r=\"12\" fill=\"#FF6B9D\" stroke=\"#202020\" stroke-width=\"2\"\/><path d=\"M16 8v8l5 3\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\"\/><\/svg> www.traqqi.com<\/div>\n <div class=\"marquee-item\"><svg viewBox=\"0 0 32 32\" fill=\"none\"><polygon points=\"16,4 28,12 28,24 16,28 4,24 4,12\" fill=\"#4ECDC4\" stroke=\"#202020\" stroke-width=\"2\"\/><\/svg> www.luxurioustowel.com<\/div>\n <!-- Set 2 (duplicate for seamless loop) -->\n <div class=\"marquee-item\"><svg viewBox=\"0 0 32 32\" fill=\"none\"><rect x=\"4\" y=\"4\" width=\"24\" height=\"24\" rx=\"6\" fill=\"#7802EF\"\/><path d=\"M10 12h12M10 16h12M10 20h8\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\"\/><\/svg> www.investinmadinah.com<\/div>\n <div class=\"marquee-item\"><svg viewBox=\"0 0 32 32\" fill=\"none\"><circle cx=\"16\" cy=\"16\" r=\"12\" fill=\"#FFD93D\" stroke=\"#202020\" stroke-width=\"2\"\/><path d=\"M10 16l4 4 8-8\" stroke=\"#202020\" stroke-width=\"2.5\" stroke-linecap=\"round\"\/><\/svg> www.choconation.com<\/div>\n <div class=\"marquee-item\"><svg viewBox=\"0 0 32 32\" fill=\"none\"><polygon points=\"16,4 28,28 4,28\" fill=\"#FF6B9D\" stroke=\"#202020\" stroke-width=\"2\"\/><\/svg> Traqqi<\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- ============================================\n 3. SERVICES SECTION\n ============================================ -->\n<section class=\"services\" id=\"services\">\n <!-- Decorative shapes -->\n <svg class=\"bg-decor\" style=\"top: 10%; right: 5%; width: 80px; height: 80px;\" viewBox=\"0 0 80 80\">\n <circle cx=\"40\" cy=\"40\" r=\"35\" fill=\"none\" stroke=\"#7802EF\" stroke-width=\"3\" stroke-dasharray=\"6 6\"\/>\n <\/svg>\n <svg class=\"bg-decor\" style=\"bottom: 15%; left: 3%; width: 60px; height: 60px;\" viewBox=\"0 0 60 60\">\n <rect x=\"10\" y=\"10\" width=\"40\" height=\"40\" rx=\"10\" fill=\"#FFD93D\" stroke=\"#202020\" stroke-width=\"3\" transform=\"rotate(-12 30 30)\"\/>\n <\/svg>\n\n <div class=\"container\">\n <div class=\"services-header reveal\">\n <div class=\"section-tag\"><span class=\"dot\"><\/span>What We Do<\/div>\n <h2 class=\"section-title\">Services Built for <span class=\"purple-text\">Growth<\/span><\/h2>\n <p class=\"section-subtitle\" style=\"margin: 0 auto;\">\n From pixel-perfect design to scalable development and ROI-driven marketing \u2014 we cover every aspect of your digital presence.\n <\/p>\n <\/div>\n\n <div class=\"services-grid\">\n <!-- WordPress Development -->\n <div class=\"service-card reveal\">\n <div class=\"service-icon icon-purple\">\n <svg viewBox=\"0 0 32 32\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"16\" cy=\"16\" r=\"12\"\/>\n <path d=\"M4 16c4-2 8-2 12 0s8 2 12 0\"\/>\n <path d=\"M4 16c4 2 8 2 12 0s8-2 12 0\"\/>\n <path d=\"M16 4c-3 4-3 8 0 12s3 8 0 12\"\/>\n <\/svg>\n <\/div>\n <h3>WordPress Development<\/h3>\n <p>Custom WordPress themes and plugins built for speed, scalability, and effortless content management.<\/p>\n <a href=\"#cta\" class=\"service-link\">Learn more <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg><\/a>\n <\/div>\n\n <!-- Shopify Development -->\n <div class=\"service-card reveal reveal-delay-1\">\n <div class=\"service-icon icon-teal\">\n <svg viewBox=\"0 0 32 32\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M6 10h20l-2 16H8z\"\/>\n <path d=\"M12 10V6a4 4 0 018 0v4\"\/>\n <\/svg>\n <\/div>\n <h3>Shopify Development<\/h3>\n <p>High-converting Shopify stores with custom themes, apps, and checkout optimization that drive sales.<\/p>\n <a href=\"#cta\" class=\"service-link\">Learn more <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg><\/a>\n <\/div>\n\n <!-- SEO -->\n <div class=\"service-card reveal reveal-delay-2\">\n <div class=\"service-icon icon-yellow\">\n <svg viewBox=\"0 0 32 32\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"14\" cy=\"14\" r=\"10\"\/>\n <line x1=\"21\" y1=\"21\" x2=\"28\" y2=\"28\"\/>\n <path d=\"M10 14l3 3 5-6\"\/>\n <\/svg>\n <\/div>\n <h3>SEO Optimization<\/h3>\n <p>Data-driven SEO that ranks your business on Google and drives qualified organic traffic month after month.<\/p>\n <a href=\"#cta\" class=\"service-link\">Learn more <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg><\/a>\n <\/div>\n\n <!-- Branding -->\n <div class=\"service-card reveal reveal-delay-3\">\n <div class=\"service-icon icon-pink\">\n <svg viewBox=\"0 0 32 32\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M16 4l3 8h8l-6 5 2 9-7-5-7 5 2-9-6-5h8z\"\/>\n <\/svg>\n <\/div>\n <h3>Branding<\/h3>\n <p>Memorable brand identities with logo design, visual systems, and guidelines that set you apart from competitors.<\/p>\n <a href=\"#cta\" class=\"service-link\">Learn more <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg><\/a>\n <\/div>\n\n <!-- Digital Marketing -->\n <div class=\"service-card reveal reveal-delay-4\">\n <div class=\"service-icon icon-purple\">\n <svg viewBox=\"0 0 32 32\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M4 24l8-8M12 16l6-6 4 4-6 6z\"\/>\n <path d=\"M22 14l4-4M26 10l-4-4M18 22l4 4M22 26l4-4\"\/>\n <circle cx=\"24\" cy=\"24\" r=\"2\"\/>\n <\/svg>\n <\/div>\n <h3>Digital Marketing<\/h3>\n <p>Full-funnel marketing campaigns across Google, Meta, and beyond that deliver measurable ROI and scale.<\/p>\n <a href=\"#cta\" class=\"service-link\">Learn more <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg><\/a>\n <\/div>\n\n <!-- Website Design -->\n <div class=\"service-card reveal reveal-delay-5\">\n <div class=\"service-icon icon-teal\">\n <svg viewBox=\"0 0 32 32\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"4\" y=\"6\" width=\"24\" height=\"18\" rx=\"2\"\/>\n <line x1=\"4\" y1=\"11\" x2=\"28\" y2=\"11\"\/>\n <circle cx=\"8\" cy=\"8.5\" r=\"0.5\" fill=\"currentColor\"\/>\n <circle cx=\"10\" cy=\"8.5\" r=\"0.5\" fill=\"currentColor\"\/>\n <rect x=\"8\" y=\"15\" width=\"8\" height=\"3\" rx=\"1\"\/>\n <rect x=\"18\" y=\"15\" width=\"6\" height=\"3\" rx=\"1\"\/>\n <\/svg>\n <\/div>\n <h3>Website Design<\/h3>\n <p>Conversion-focused website design that looks stunning and works flawlessly across every device and browser.<\/p>\n <a href=\"#cta\" class=\"service-link\">Learn more <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg><\/a>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- ============================================\n 4. WHY XOHAR SECTION\n ============================================ -->\n<section class=\"why-xohar\" id=\"why\">\n <div class=\"container\">\n <div class=\"why-inner\">\n <!-- Left: Visual -->\n <div class=\"why-visual reveal\">\n <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 500 500\">\n <!-- Background blobs -->\n <ellipse cx=\"250\" cy=\"250\" rx=\"180\" ry=\"140\" fill=\"#7802EF\" opacity=\"0.06\"\/>\n \n <!-- Isometric platform -->\n <polygon points=\"250,120 380,200 250,280 120,200\" fill=\"#FFD93D\" stroke=\"#202020\" stroke-width=\"3.5\"\/>\n <polygon points=\"250,120 380,200 250,280 120,200\" fill=\"none\" stroke=\"#202020\" stroke-width=\"3.5\"\/>\n <polygon points=\"120,200 250,280 250,340 120,260\" fill=\"#E6C029\" stroke=\"#202020\" stroke-width=\"3.5\"\/>\n <polygon points=\"380,200 250,280 250,340 380,260\" fill=\"#CCA824\" stroke=\"#202020\" stroke-width=\"3.5\"\/>\n\n <!-- Laptop on platform -->\n <g transform=\"translate(170, 100)\">\n <rect x=\"0\" y=\"0\" width=\"160\" height=\"100\" rx=\"8\" fill=\"#FFFFFF\" stroke=\"#202020\" stroke-width=\"3.5\"\/>\n <rect x=\"8\" y=\"8\" width=\"144\" height=\"78\" rx=\"4\" fill=\"#7802EF\"\/>\n <!-- Screen content -->\n <rect x=\"18\" y=\"18\" width=\"60\" height=\"6\" rx=\"3\" fill=\"#FFFFFF\" opacity=\"0.9\"\/>\n <rect x=\"18\" y=\"30\" width=\"80\" height=\"4\" rx=\"2\" fill=\"#FFFFFF\" opacity=\"0.5\"\/>\n <rect x=\"18\" y=\"38\" width=\"70\" height=\"4\" rx=\"2\" fill=\"#FFFFFF\" opacity=\"0.5\"\/>\n <rect x=\"18\" y=\"52\" width=\"40\" height=\"14\" rx=\"3\" fill=\"#FFD93D\"\/>\n <!-- Chart -->\n <rect x=\"80\" y=\"50\" width=\"60\" height=\"32\" rx=\"4\" fill=\"#FFFFFF\" opacity=\"0.2\"\/>\n <polyline points=\"85,78 95,68 105,72 115,58 125,62 135,48\" fill=\"none\" stroke=\"#FFD93D\" stroke-width=\"2.5\"\/>\n <!-- Laptop base -->\n <rect x=\"-10\" y=\"100\" width=\"180\" height=\"10\" rx=\"5\" fill=\"#202020\"\/>\n <\/g>\n\n <!-- Phone -->\n <g transform=\"translate(340, 180) rotate(10)\">\n <rect x=\"0\" y=\"0\" width=\"55\" height=\"100\" rx=\"10\" fill=\"#FFFFFF\" stroke=\"#202020\" stroke-width=\"3.5\"\/>\n <rect x=\"5\" y=\"12\" width=\"45\" height=\"76\" rx=\"3\" fill=\"#FF6B9D\"\/>\n <circle cx=\"27\" cy=\"6\" r=\"2\" fill=\"#202020\"\/>\n <rect x=\"10\" y=\"18\" width=\"30\" height=\"4\" rx=\"2\" fill=\"#FFFFFF\" opacity=\"0.9\"\/>\n <rect x=\"10\" y=\"26\" width=\"35\" height=\"3\" rx=\"1.5\" fill=\"#FFFFFF\" opacity=\"0.5\"\/>\n <rect x=\"10\" y=\"32\" width=\"25\" height=\"3\" rx=\"1.5\" fill=\"#FFFFFF\" opacity=\"0.5\"\/>\n <rect x=\"10\" y=\"44\" width=\"35\" height=\"20\" rx=\"4\" fill=\"#FFFFFF\" opacity=\"0.2\"\/>\n <rect x=\"10\" y=\"70\" width=\"16\" height=\"6\" rx=\"3\" fill=\"#FFD93D\"\/>\n <\/g>\n\n <!-- Floating chart icon -->\n <g transform=\"translate(60, 180)\">\n <rect x=\"0\" y=\"0\" width=\"60\" height=\"60\" rx=\"10\" fill=\"#FFFFFF\" stroke=\"#202020\" stroke-width=\"3\"\/>\n <rect x=\"10\" y=\"35\" width=\"8\" height=\"15\" rx=\"2\" fill=\"#7802EF\"\/>\n <rect x=\"22\" y=\"25\" width=\"8\" height=\"25\" rx=\"2\" fill=\"#FF6B9D\"\/>\n <rect x=\"34\" y=\"15\" width=\"8\" height=\"35\" rx=\"2\" fill=\"#4ECDC4\"\/>\n <rect x=\"46\" y=\"30\" width=\"8\" height=\"20\" rx=\"2\" fill=\"#FFD93D\"\/>\n <\/g>\n\n <!-- Floating checkmark -->\n <g transform=\"translate(380, 80)\">\n <circle cx=\"25\" cy=\"25\" r=\"22\" fill=\"#4ECDC4\" stroke=\"#202020\" stroke-width=\"3\"\/>\n <path d=\"M15 25 L22 32 L35 18\" stroke=\"#FFFFFF\" stroke-width=\"4\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/g>\n\n <!-- Lightning bolt -->\n <g transform=\"translate(80, 340)\">\n <path d=\"M25 0 L10 25 L20 25 L15 45 L35 18 L25 18 L30 0 Z\" fill=\"#FFD93D\" stroke=\"#202020\" stroke-width=\"3\" stroke-linejoin=\"round\"\/>\n <\/g>\n\n <!-- Star -->\n <g transform=\"translate(420, 300)\">\n <polygon points=\"20,0 25,15 40,15 28,24 33,40 20,30 7,40 12,24 0,15 15,15\" fill=\"#7802EF\" stroke=\"#202020\" stroke-width=\"2.5\"\/>\n <\/g>\n\n <!-- Arrow up -->\n <g transform=\"translate(200, 360)\">\n <path d=\"M0 30 L15 15 L30 30 M15 15 L15 45\" stroke=\"#202020\" stroke-width=\"3.5\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <circle cx=\"15\" cy=\"15\" r=\"4\" fill=\"#7802EF\" stroke=\"#202020\" stroke-width=\"2.5\"\/>\n <\/g>\n <\/svg>\n <\/div>\n\n <!-- Right: Content -->\n <div class=\"why-content\">\n <div class=\"section-tag reveal\"><span class=\"dot\"><\/span>Why Xohar<\/div>\n <h2 class=\"reveal reveal-delay-1\">Built Different.<br>Built to <span class=\"purple-text\">Perform.<\/span><\/h2>\n <p class=\"reveal reveal-delay-2\">We don't just build websites \u2014 we engineer digital experiences that drive real business results. Every project is crafted with precision, passion, and performance in mind.<\/p>\n\n <div class=\"why-features\">\n <div class=\"why-feature reveal reveal-delay-2\">\n <div class=\"why-feature-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"\/><\/svg>\n <\/div>\n <div>\n <h4>Fast Delivery<\/h4>\n <p>We ship fast without cutting corners. Most projects launch in 2-4 weeks.<\/p>\n <\/div>\n <\/div>\n <div class=\"why-feature reveal reveal-delay-3\">\n <div class=\"why-feature-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"12 2 15 8 22 9 17 14 18 21 12 18 6 21 7 14 2 9 9 8 12 2\"\/><\/svg>\n <\/div>\n <div>\n <h4>Premium Design<\/h4>\n <p>Every pixel is intentional. Our designs win awards and convert visitors.<\/p>\n <\/div>\n <\/div>\n <div class=\"why-feature reveal reveal-delay-4\">\n <div class=\"why-feature-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"\/><\/svg>\n <\/div>\n <div>\n <h4>SEO Optimized<\/h4>\n <p>Built SEO-first from day one. Your site ranks before you even launch.<\/p>\n <\/div>\n <\/div>\n <div class=\"why-feature reveal reveal-delay-5\">\n <div class=\"why-feature-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\"\/><line x1=\"8\" y1=\"21\" x2=\"16\" y2=\"21\"\/><line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"21\"\/><\/svg>\n <\/div>\n <div>\n <h4>Responsive & Conversion Focused<\/h4>\n <p>Flawless on every device, with every element designed to drive action.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Stats Bar -->\n <div class=\"stats-bar\">\n <div class=\"stat-card reveal\">\n <div class=\"stat-num\" data-target=\"15\" data-suffix=\"+\">0<\/div>\n <div class=\"stat-label\">Projects Delivered<\/div>\n <\/div>\n <div class=\"stat-card reveal reveal-delay-1\">\n <div class=\"stat-num\" data-target=\"98\" data-suffix=\"%\">0<\/div>\n <div class=\"stat-label\">Client Satisfaction<\/div>\n <\/div>\n <div class=\"stat-card reveal reveal-delay-2\">\n <div class=\"stat-num\" data-target=\"7\" data-suffix=\"+\">0<\/div>\n <div class=\"stat-label\">Global Work<\/div>\n <\/div>\n <div class=\"stat-card reveal reveal-delay-3\">\n <div class=\"stat-num\" data-target=\"15\" data-suffix=\"+\">0<\/div>\n <div class=\"stat-label\">Team Members<\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- ============================================\n 5. PORTFOLIO SECTION\n ============================================ -->\n<section class=\"portfolio\" id=\"portfolio\">\n <!-- Decorative -->\n <svg class=\"bg-decor\" style=\"top: 12%; left: 2%; width: 70px; height: 70px;\" viewBox=\"0 0 70 70\">\n <circle cx=\"35\" cy=\"35\" r=\"30\" fill=\"none\" stroke=\"#7802EF\" stroke-width=\"3\"\/>\n <circle cx=\"35\" cy=\"35\" r=\"15\" fill=\"#FFD93D\" stroke=\"#202020\" stroke-width=\"3\"\/>\n <\/svg>\n <svg class=\"bg-decor\" style=\"bottom: 10%; right: 2%; width: 90px; height: 90px;\" viewBox=\"0 0 90 90\">\n <path d=\"M45 10 L55 35 L80 45 L55 55 L45 80 L35 55 L10 45 L35 35 Z\" fill=\"#FF6B9D\" stroke=\"#202020\" stroke-width=\"3\"\/>\n <\/svg>\n\n <div class=\"container\">\n <div class=\"portfolio-header\">\n <div class=\"left reveal\">\n <div class=\"section-tag\"><span class=\"dot\"><\/span>Our Work<\/div>\n <h2 class=\"section-title\">Recent <span class=\"purple-text\">Projects<\/span><\/h2>\n <p class=\"section-subtitle\">A glimpse of what we've built for brands across Pakistan and beyond.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"portfolio-masonry\">\n <!-- Project 1 -->\n <div class=\"portfolio-item reveal\">\n <div class=\"portfolio-thumb\">\n <svg class=\"portfolio-mockup\" viewBox=\"0 0 300 200\">\n <rect x=\"20\" y=\"10\" width=\"260\" height=\"160\" rx=\"8\" fill=\"#FFFFFF\" stroke=\"#202020\" stroke-width=\"3\"\/>\n <rect x=\"20\" y=\"10\" width=\"260\" height=\"20\" rx=\"8\" fill=\"#202020\"\/>\n <circle cx=\"32\" cy=\"20\" r=\"3\" fill=\"#FF6B9D\"\/>\n <circle cx=\"42\" cy=\"20\" r=\"3\" fill=\"#FFD93D\"\/>\n <circle cx=\"52\" cy=\"20\" r=\"3\" fill=\"#4ECDC4\"\/>\n <rect x=\"40\" y=\"45\" width=\"100\" height=\"8\" rx=\"4\" fill=\"#202020\"\/>\n <rect x=\"40\" y=\"60\" width=\"140\" height=\"4\" rx=\"2\" fill=\"#202020\" opacity=\"0.2\"\/>\n <rect x=\"40\" y=\"70\" width=\"120\" height=\"4\" rx=\"2\" fill=\"#202020\" opacity=\"0.2\"\/>\n <rect x=\"40\" y=\"85\" width=\"60\" height=\"20\" rx=\"4\" fill=\"#7802EF\"\/>\n <rect x=\"180\" y=\"45\" width=\"80\" height=\"60\" rx=\"6\" fill=\"#FFD93D\" stroke=\"#202020\" stroke-width=\"2\"\/>\n <rect x=\"40\" y=\"120\" width=\"220\" height=\"35\" rx=\"6\" fill=\"#F5F5F5\" stroke=\"#202020\" stroke-width=\"2\"\/>\n <rect x=\"50\" y=\"128\" width=\"60\" height=\"4\" rx=\"2\" fill=\"#7802EF\"\/>\n <rect x=\"50\" y=\"136\" width=\"80\" height=\"3\" rx=\"1.5\" fill=\"#202020\" opacity=\"0.2\"\/>\n <rect x=\"50\" y=\"143\" width=\"70\" height=\"3\" rx=\"1.5\" fill=\"#202020\" opacity=\"0.2\"\/>\n <\/svg>\n <div class=\"portfolio-overlay\">\n <div class=\"cat\">WordPress<\/div>\n <h4>Furnishow.com<\/h4>\n <p>Leading Home Furnishing Company <\/p>\n <\/div>\n <\/div>\n <div class=\"portfolio-info\">\n <h4>Furnishow.com<\/h4>\n <span class=\"tag\">WordPress<\/span>\n <\/div>\n <\/div>\n\n <!-- Project 2 -->\n <div class=\"portfolio-item reveal reveal-delay-1\">\n <div class=\"portfolio-thumb\">\n <svg class=\"portfolio-mockup\" viewBox=\"0 0 200 200\">\n <rect x=\"30\" y=\"15\" width=\"140\" height=\"170\" rx=\"12\" fill=\"#FFFFFF\" stroke=\"#202020\" stroke-width=\"3\"\/>\n <rect x=\"30\" y=\"15\" width=\"140\" height=\"170\" rx=\"12\" fill=\"none\" stroke=\"#202020\" stroke-width=\"3\"\/>\n <circle cx=\"100\" cy=\"22\" r=\"2\" fill=\"#202020\"\/>\n <rect x=\"40\" y=\"35\" width=\"120\" height=\"50\" rx=\"6\" fill=\"#FF6B9D\"\/>\n <text x=\"100\" y=\"65\" text-anchor=\"middle\" fill=\"#FFFFFF\" font-size=\"14\" font-weight=\"bold\" font-family=\"Poppins\">SALE<\/text>\n <rect x=\"40\" y=\"95\" width=\"80\" height=\"6\" rx=\"3\" fill=\"#202020\"\/>\n <rect x=\"40\" y=\"108\" width=\"100\" height=\"3\" rx=\"1.5\" fill=\"#202020\" opacity=\"0.3\"\/>\n <rect x=\"40\" y=\"115\" width=\"90\" height=\"3\" rx=\"1.5\" fill=\"#202020\" opacity=\"0.3\"\/>\n <rect x=\"40\" y=\"128\" width=\"120\" height=\"8\" rx=\"4\" fill=\"#7802EF\"\/>\n <rect x=\"40\" y=\"145\" width=\"55\" height=\"30\" rx=\"6\" fill=\"#FFD93D\" stroke=\"#202020\" stroke-width=\"2\"\/>\n <rect x=\"105\" y=\"145\" width=\"55\" height=\"30\" rx=\"6\" fill=\"#F5F5F5\" stroke=\"#202020\" stroke-width=\"2\"\/>\n <\/svg>\n <div class=\"portfolio-overlay\">\n <div class=\"cat\">Shopify<\/div>\n <h4>hussainstores.com<\/h4>\n <p>E-commerce store 100% satisfied Delivered<\/p>\n <\/div>\n <\/div>\n <div class=\"portfolio-info\">\n <h4>hussainstores.com<\/h4>\n <span class=\"tag\">Shopify<\/span>\n <\/div>\n <\/div>\n\n <!-- Project 3 -->\n <div class=\"portfolio-item reveal reveal-delay-2\">\n <div class=\"portfolio-thumb\">\n <svg class=\"portfolio-mockup\" viewBox=\"0 0 300 200\">\n <circle cx=\"150\" cy=\"100\" r=\"70\" fill=\"#FFFFFF\" stroke=\"#202020\" stroke-width=\"3\"\/>\n <circle cx=\"150\" cy=\"85\" r=\"25\" fill=\"#7802EF\"\/>\n <path d=\"M110 140 Q150 110 190 140 L190 155 L110 155 Z\" fill=\"#7802EF\"\/>\n <circle cx=\"100\" cy=\"50\" r=\"15\" fill=\"#FF6B9D\" stroke=\"#202020\" stroke-width=\"2.5\"\/>\n <circle cx=\"210\" cy=\"60\" r=\"12\" fill=\"#4ECDC4\" stroke=\"#202020\" stroke-width=\"2.5\"\/>\n <circle cx=\"220\" cy=\"140\" r=\"18\" fill=\"#FFD93D\" stroke=\"#202020\" stroke-width=\"2.5\"\/>\n <path d=\"M75 90 L85 100 L95 90\" stroke=\"#202020\" stroke-width=\"2.5\" fill=\"none\"\/>\n <path d=\"M215 180 L225 170 L235 180\" stroke=\"#202020\" stroke-width=\"2.5\" fill=\"none\"\/>\n <\/svg>\n <div class=\"portfolio-overlay\">\n <div class=\"cat\">Branding<\/div>\n <h4>Investinmedinah.com<\/h4>\n <p>Complete brand system with logo and guidelines<\/p>\n <\/div>\n <\/div>\n <div class=\"portfolio-info\">\n <h4>Investinmedinah.com<\/h4>\n <span class=\"tag\">Branding<\/span>\n <\/div>\n <\/div>\n\n <!-- Project 4 -->\n <div class=\"portfolio-item reveal\">\n <div class=\"portfolio-thumb\">\n <svg class=\"portfolio-mockup\" viewBox=\"0 0 300 200\">\n <rect x=\"20\" y=\"20\" width=\"260\" height=\"160\" rx=\"10\" fill=\"#FFFFFF\" stroke=\"#202020\" stroke-width=\"3\"\/>\n <rect x=\"20\" y=\"20\" width=\"260\" height=\"24\" rx=\"10\" fill=\"#7802EF\"\/>\n <circle cx=\"35\" cy=\"32\" r=\"3\" fill=\"#fff\"\/>\n <circle cx=\"45\" cy=\"32\" r=\"3\" fill=\"#fff\"\/>\n <circle cx=\"55\" cy=\"32\" r=\"3\" fill=\"#fff\"\/>\n <rect x=\"40\" y=\"60\" width=\"120\" height=\"10\" rx=\"5\" fill=\"#202020\"\/>\n <rect x=\"40\" y=\"78\" width=\"180\" height=\"4\" rx=\"2\" fill=\"#202020\" opacity=\"0.2\"\/>\n <rect x=\"40\" y=\"88\" width=\"160\" height=\"4\" rx=\"2\" fill=\"#202020\" opacity=\"0.2\"\/>\n <rect x=\"200\" y=\"55\" width=\"60\" height=\"60\" rx=\"8\" fill=\"#FFD93D\" stroke=\"#202020\" stroke-width=\"2\"\/>\n <path d=\"M210 95 L220 85 L230 90 L250 70\" stroke=\"#202020\" stroke-width=\"2.5\" fill=\"none\"\/>\n <circle cx=\"250\" cy=\"70\" r=\"4\" fill=\"#7802EF\" stroke=\"#202020\" stroke-width=\"2\"\/>\n <rect x=\"40\" y=\"110\" width=\"80\" height=\"24\" rx=\"6\" fill=\"#7802EF\"\/>\n <rect x=\"130\" y=\"110\" width=\"80\" height=\"24\" rx=\"6\" fill=\"none\" stroke=\"#202020\" stroke-width=\"2.5\"\/>\n <rect x=\"40\" y=\"145\" width=\"220\" height=\"20\" rx=\"4\" fill=\"#F5F5F5\" stroke=\"#202020\" stroke-width=\"2\"\/>\n <\/svg>\n <div class=\"portfolio-overlay\">\n <div class=\"cat\">Web Design<\/div>\n <h4>Traqqi Platform<\/h4>\n <p>(Continue)Modern dashboard UI for a Startup platform<\/p>\n <\/div>\n <\/div>\n <div class=\"portfolio-info\">\n <h4>Traqqi.com<\/h4>\n <span class=\"tag\">Web Design<\/span>\n <\/div>\n <\/div>\n\n <!-- Project 5 -->\n <div class=\"portfolio-item reveal reveal-delay-1\">\n <div class=\"portfolio-thumb\">\n <svg class=\"portfolio-mockup\" viewBox=\"0 0 300 200\">\n <rect x=\"40\" y=\"30\" width=\"220\" height=\"140\" rx=\"8\" fill=\"#FFFFFF\" stroke=\"#202020\" stroke-width=\"3\"\/>\n <rect x=\"40\" y=\"30\" width=\"220\" height=\"18\" rx=\"8\" fill=\"#FFD93D\"\/>\n <rect x=\"55\" y=\"60\" width=\"80\" height=\"6\" rx=\"3\" fill=\"#202020\"\/>\n <rect x=\"55\" y=\"72\" width=\"100\" height=\"3\" rx=\"1.5\" fill=\"#202020\" opacity=\"0.3\"\/>\n <rect x=\"55\" y=\"80\" width=\"90\" height=\"3\" rx=\"1.5\" fill=\"#202020\" opacity=\"0.3\"\/>\n <!-- Growth chart -->\n <rect x=\"55\" y=\"95\" width=\"180\" height=\"60\" rx=\"6\" fill=\"#F5F5F5\" stroke=\"#202020\" stroke-width=\"2\"\/>\n <polyline points=\"65,145 85,135 105,138 125,120 145,125 165,105 185,100 205,85 225,75\" fill=\"none\" stroke=\"#7802EF\" stroke-width=\"3\" stroke-linecap=\"round\"\/>\n <polygon points=\"65,145 85,135 105,138 125,120 145,125 165,105 185,100 205,85 225,75 225,150 65,150\" fill=\"#7802EF\" opacity=\"0.1\"\/>\n <circle cx=\"225\" cy=\"75\" r=\"5\" fill=\"#7802EF\" stroke=\"#202020\" stroke-width=\"2\"\/>\n <text x=\"225\" y=\"68\" text-anchor=\"middle\" fill=\"#7802EF\" font-size=\"10\" font-weight=\"bold\">+250%<\/text>\n <\/svg>\n <div class=\"portfolio-overlay\">\n <div class=\"cat\">Digital Marketing<\/div>\n <h4>Furniture Expo<\/h4>\n <p>1M+ Views awearness ad to attract buyers<\/p>\n <\/div>\n <\/div>\n <div class=\"portfolio-info\">\n <h4> Furniture Expo<\/h4>\n <span class=\"tag\">Marketing<\/span>\n <\/div>\n <\/div>\n\n <!-- Project 6 -->\n <div class=\"portfolio-item reveal reveal-delay-2\">\n <div class=\"portfolio-thumb\">\n <svg class=\"portfolio-mockup\" viewBox=\"0 0 300 200\">\n <rect x=\"20\" y=\"15\" width=\"260\" height=\"170\" rx=\"8\" fill=\"#FFFFFF\" stroke=\"#202020\" stroke-width=\"3\"\/>\n <rect x=\"20\" y=\"15\" width=\"260\" height=\"20\" rx=\"8\" fill=\"#7802EF\"\/>\n <circle cx=\"32\" cy=\"25\" r=\"3\" fill=\"#FF6B9D\"\/>\n <circle cx=\"42\" cy=\"25\" r=\"3\" fill=\"#FFD93D\"\/>\n <circle cx=\"52\" cy=\"25\" r=\"3\" fill=\"#4ECDC4\"\/>\n <text x=\"150\" y=\"50\" text-anchor=\"middle\" fill=\"#202020\" font-size=\"16\" font-weight=\"bold\">SEO Results<\/text>\n <rect x=\"50\" y=\"65\" width=\"60\" height=\"80\" rx=\"6\" fill=\"#FFD93D\" stroke=\"#202020\" stroke-width=\"2\"\/>\n <text x=\"80\" y=\"100\" text-anchor=\"middle\" fill=\"#202020\" font-size=\"14\" font-weight=\"bold\">#1<\/text>\n <text x=\"80\" y=\"115\" text-anchor=\"middle\" fill=\"#202020\" font-size=\"8\">Google Rank<\/text>\n <rect x=\"120\" y=\"65\" width=\"60\" height=\"80\" rx=\"6\" fill=\"#FF6B9D\" stroke=\"#202020\" stroke-width=\"2\"\/>\n <text x=\"150\" y=\"100\" text-anchor=\"middle\" fill=\"#fff\" font-size=\"14\" font-weight=\"bold\">+500%<\/text>\n <text x=\"150\" y=\"115\" text-anchor=\"middle\" fill=\"#fff\" font-size=\"8\">Traffic<\/text>\n <rect x=\"190\" y=\"65\" width=\"60\" height=\"80\" rx=\"6\" fill=\"#4ECDC4\" stroke=\"#202020\" stroke-width=\"2\"\/>\n <text x=\"220\" y=\"100\" text-anchor=\"middle\" fill=\"#202020\" font-size=\"14\" font-weight=\"bold\">98%<\/text>\n <text x=\"220\" y=\"115\" text-anchor=\"middle\" fill=\"#202020\" font-size=\"8\">Score<\/text>\n <\/svg>\n <div class=\"portfolio-overlay\">\n <div class=\"cat\">SEO<\/div>\n <h4>No any SEO Work<\/h4>\n <p>No any SEO Work<\/p>\n <\/div>\n <\/div>\n <div class=\"portfolio-info\">\n <h4>No any SEO Work<\/h4>\n <span class=\"tag\">SEO<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- ============================================\n 6. PROCESS SECTION\n ============================================ -->\n<section class=\"process\" id=\"process\">\n <!-- Decorative -->\n <svg class=\"bg-decor\" style=\"top: 8%; right: 5%; width: 50px; height: 50px;\" viewBox=\"0 0 50 50\">\n <rect x=\"8\" y=\"8\" width=\"34\" height=\"34\" rx=\"8\" fill=\"#7802EF\" stroke=\"#202020\" stroke-width=\"3\" transform=\"rotate(15 25 25)\"\/>\n <\/svg>\n <svg class=\"bg-decor\" style=\"bottom: 10%; left: 4%; width: 65px; height: 65px;\" viewBox=\"0 0 65 65\">\n <circle cx=\"32\" cy=\"32\" r=\"28\" fill=\"none\" stroke=\"#202020\" stroke-width=\"3\" stroke-dasharray=\"8 4\"\/>\n <\/svg>\n\n <div class=\"container\">\n <div class=\"process-header reveal\">\n <div class=\"section-tag\"><span class=\"dot\"><\/span>How We Work<\/div>\n <h2 class=\"section-title\">Our <span class=\"purple-text\">Process<\/span><\/h2>\n <p class=\"section-subtitle\" style=\"margin: 0 auto;\">\n A proven 6-step framework that turns ideas into impactful digital products.\n <\/p>\n <\/div>\n\n <div class=\"process-timeline\">\n <div class=\"process-line\" id=\"processLine\"><\/div>\n\n <!-- Step 1: Discover -->\n <div class=\"process-step reveal\">\n <div class=\"process-num\">\n <svg viewBox=\"0 0 32 32\" fill=\"none\" stroke=\"#202020\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"14\" cy=\"14\" r=\"10\"\/>\n <line x1=\"21\" y1=\"21\" x2=\"28\" y2=\"28\"\/>\n <\/svg>\n <\/div>\n <h4>Discover<\/h4>\n <p>We dive deep into your business, goals, and audience to understand what success looks like.<\/p>\n <\/div>\n\n <!-- Step 2: Plan -->\n <div class=\"process-step reveal reveal-delay-1\">\n <div class=\"process-num\">\n <svg viewBox=\"0 0 32 32\" fill=\"none\" stroke=\"#202020\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"6\" y=\"4\" width=\"20\" height=\"24\" rx=\"3\"\/>\n <line x1=\"10\" y1=\"10\" x2=\"22\" y2=\"10\"\/>\n <line x1=\"10\" y1=\"16\" x2=\"22\" y2=\"16\"\/>\n <line x1=\"10\" y1=\"22\" x2=\"18\" y2=\"22\"\/>\n <\/svg>\n <\/div>\n <h4>Plan<\/h4>\n <p>We craft a strategic roadmap with clear milestones, deliverables, and timelines.<\/p>\n <\/div>\n\n <!-- Step 3: Design -->\n <div class=\"process-step reveal reveal-delay-2\">\n <div class=\"process-num\">\n <svg viewBox=\"0 0 32 32\" fill=\"none\" stroke=\"#202020\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M4 28L8 24L20 12L24 16L12 28z\"\/>\n <path d=\"M20 12L24 8L28 12L24 16\"\/>\n <\/svg>\n <\/div>\n <h4>Design<\/h4>\n <p>We create wireframes and visual designs that align with your brand and convert visitors.<\/p>\n <\/div>\n\n <!-- Step 4: Develop -->\n <div class=\"process-step reveal reveal-delay-3\">\n <div class=\"process-num\">\n <svg viewBox=\"0 0 32 32\" fill=\"none\" stroke=\"#202020\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"10 8 4 16 10 24\"\/>\n <polyline points=\"22 8 28 16 22 24\"\/>\n <line x1=\"18\" y1=\"6\" x2=\"14\" y2=\"26\"\/>\n <\/svg>\n <\/div>\n <h4>Develop<\/h4>\n <p>We build with clean, fast, scalable code using the latest technologies and best practices.<\/p>\n <\/div>\n\n <!-- Step 5: Launch -->\n <div class=\"process-step reveal reveal-delay-4\">\n <div class=\"process-num\">\n <svg viewBox=\"0 0 32 32\" fill=\"none\" stroke=\"#202020\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M6 26C6 18 12 10 24 6C26 14 22 24 14 26L6 26Z\"\/>\n <path d=\"M6 26L14 18\"\/>\n <path d=\"M16 12L20 16\"\/>\n <\/svg>\n <\/div>\n <h4>Launch<\/h4>\n <p>We deploy, test, and optimize across all devices and browsers for a flawless go-live.<\/p>\n <\/div>\n\n <!-- Step 6: Grow -->\n <div class=\"process-step reveal reveal-delay-5\">\n <div class=\"process-num\">\n <svg viewBox=\"0 0 32 32\" fill=\"none\" stroke=\"#202020\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M16 28V14\"\/>\n <path d=\"M16 14L10 20M16 14L22 20\"\/>\n <path d=\"M8 10C8 6 12 4 16 4C20 4 24 6 24 10\"\/>\n <rect x=\"12\" y=\"8\" width=\"8\" height=\"6\" rx=\"2\"\/>\n <\/svg>\n <\/div>\n <h4>Grow<\/h4>\n <p>We monitor, analyze, and iterate to continuously improve performance and ROI.<\/p>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- ============================================\n 7. TESTIMONIALS SECTION\n ============================================ -->\n<section class=\"testimonials\" id=\"testimonials\">\n <!-- Decorative -->\n <svg class=\"bg-decor\" style=\"top: 10%; left: 3%; width: 90px; height: 90px;\" viewBox=\"0 0 90 90\">\n <text x=\"45\" y=\"70\" text-anchor=\"middle\" font-size=\"70\" fill=\"#7802EF\" opacity=\"0.1\" font-family=\"Georgia\">\"<\/text>\n <\/svg>\n <svg class=\"bg-decor\" style=\"bottom: 15%; right: 3%; width: 70px; height: 70px;\" viewBox=\"0 0 70 70\">\n <polygon points=\"35,5 42,28 65,35 42,42 35,65 28,42 5,35 28,28\" fill=\"#FFD93D\" stroke=\"#202020\" stroke-width=\"3\"\/>\n <\/svg>\n\n <div class=\"container\">\n <div class=\"testimonials-header reveal\">\n <div class=\"section-tag\"><span class=\"dot\"><\/span>Testimonials<\/div>\n <h2 class=\"section-title\">What Clients <span class=\"purple-text\">Say<\/span><\/h2>\n <p class=\"section-subtitle\" style=\"margin: 0 auto;\">\n Don't take our word for it \u2014 hear what our clients have to say about working with Xohar.\n <\/p>\n <\/div>\n\n <div class=\"testimonials-grid\">\n <!-- Testimonial 1 -->\n <div class=\"testimonial-card reveal\">\n <span class=\"quote-mark\">\"<\/span>\n <div class=\"testimonial-stars\">\n <svg viewBox=\"0 0 24 24\" fill=\"#FFD93D\" stroke=\"#202020\" stroke-width=\"1.5\"><polygon points=\"12 2 15 8 22 9 17 14 18 21 12 18 6 21 7 14 2 9 9 8 12 2\"\/><\/svg>\n <svg viewBox=\"0 0 24 24\" fill=\"#FFD93D\" stroke=\"#202020\" stroke-width=\"1.5\"><polygon points=\"12 2 15 8 22 9 17 14 18 21 12 18 6 21 7 14 2 9 9 8 12 2\"\/><\/svg>\n <svg viewBox=\"0 0 24 24\" fill=\"#FFD93D\" stroke=\"#202020\" stroke-width=\"1.5\"><polygon points=\"12 2 15 8 22 9 17 14 18 21 12 18 6 21 7 14 2 9 9 8 12 2\"\/><\/svg>\n <svg viewBox=\"0 0 24 24\" fill=\"#FFD93D\" stroke=\"#202020\" stroke-width=\"1.5\"><polygon points=\"12 2 15 8 22 9 17 14 18 21 12 18 6 21 7 14 2 9 9 8 12 2\"\/><\/svg>\n <svg viewBox=\"0 0 24 24\" fill=\"#FFD93D\" stroke=\"#202020\" stroke-width=\"1.5\"><polygon points=\"12 2 15 8 22 9 17 14 18 21 12 18 6 21 7 14 2 9 9 8 12 2\"\/><\/svg>\n <\/div>\n <p class=\"testimonial-text\">Xohar transformed our outdated website into a lead-generating machine. Our inquiries tripled in the first month after launch. Absolutely brilliant work.<\/p>\n <div class=\"testimonial-author\">\n <div class=\"testimonial-avatar\">\n <svg viewBox=\"0 0 48 48\">\n <circle cx=\"24\" cy=\"18\" r=\"10\" fill=\"#FFD93D\" stroke=\"#202020\" stroke-width=\"2.5\"\/>\n <path d=\"M8 44 Q24 28 40 44\" fill=\"#7802EF\" stroke=\"#202020\" stroke-width=\"2.5\"\/>\n <circle cx=\"20\" cy=\"17\" r=\"1.5\" fill=\"#202020\"\/>\n <circle cx=\"28\" cy=\"17\" r=\"1.5\" fill=\"#202020\"\/>\n <path d=\"M20 22 Q24 25 28 22\" stroke=\"#202020\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"\/>\n <\/svg>\n <\/div>\n <div class=\"testimonial-info\">\n <div class=\"testimonial-name\">Zaighum, CA<\/div>\n <div class=\"testimonial-role\">CEO, Peace Quran<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Testimonial 2 -->\n <div class=\"testimonial-card reveal reveal-delay-1\">\n <span class=\"quote-mark\">\"<\/span>\n <div class=\"testimonial-stars\">\n <svg viewBox=\"0 0 24 24\" fill=\"#FFD93D\" stroke=\"#202020\" stroke-width=\"1.5\"><polygon points=\"12 2 15 8 22 9 17 14 18 21 12 18 6 21 7 14 2 9 9 8 12 2\"\/><\/svg>\n <svg viewBox=\"0 0 24 24\" fill=\"#FFD93D\" stroke=\"#202020\" stroke-width=\"1.5\"><polygon points=\"12 2 15 8 22 9 17 14 18 21 12 18 6 21 7 14 2 9 9 8 12 2\"\/><\/svg>\n <svg viewBox=\"0 0 24 24\" fill=\"#FFD93D\" stroke=\"#202020\" stroke-width=\"1.5\"><polygon points=\"12 2 15 8 22 9 17 14 18 21 12 18 6 21 7 14 2 9 9 8 12 2\"\/><\/svg>\n <svg viewBox=\"0 0 24 24\" fill=\"#FFD93D\" stroke=\"#202020\" stroke-width=\"1.5\"><polygon points=\"12 2 15 8 22 9 17 14 18 21 12 18 6 21 7 14 2 9 9 8 12 2\"\/><\/svg>\n <svg viewBox=\"0 0 24 24\" fill=\"#FFD93D\" stroke=\"#202020\" stroke-width=\"1.5\"><polygon points=\"12 2 15 8 22 9 17 14 18 21 12 18 6 21 7 14 2 9 9 8 12 2\"\/><\/svg>\n <\/div>\n <p class=\"testimonial-text\">The team delivered our Shopify store ahead of schedule and it looks absolutely stunning. Sales are up 200% since launch. Couldn't be happier with the results.<\/p>\n <div class=\"testimonial-author\">\n <div class=\"testimonial-avatar\">\n <svg viewBox=\"0 0 48 48\">\n <circle cx=\"24\" cy=\"18\" r=\"10\" fill=\"#FF6B9D\" stroke=\"#202020\" stroke-width=\"2.5\"\/>\n <path d=\"M8 44 Q24 28 40 44\" fill=\"#4ECDC4\" stroke=\"#202020\" stroke-width=\"2.5\"\/>\n <circle cx=\"20\" cy=\"17\" r=\"1.5\" fill=\"#202020\"\/>\n <circle cx=\"28\" cy=\"17\" r=\"1.5\" fill=\"#202020\"\/>\n <path d=\"M20 22 Q24 25 28 22\" stroke=\"#202020\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"\/>\n <path d=\"M14 14 Q18 8 24 10 Q30 8 34 14\" fill=\"#202020\"\/>\n <\/svg>\n <\/div>\n <div class=\"testimonial-info\">\n <div class=\"testimonial-name\">Sara Khan<\/div>\n <div class=\"testimonial-role\">Founder, Hussain Stores<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Testimonial 3 -->\n <div class=\"testimonial-card reveal reveal-delay-2\">\n <span class=\"quote-mark\">\"<\/span>\n <div class=\"testimonial-stars\">\n <svg viewBox=\"0 0 24 24\" fill=\"#FFD93D\" stroke=\"#202020\" stroke-width=\"1.5\"><polygon points=\"12 2 15 8 22 9 17 14 18 21 12 18 6 21 7 14 2 9 9 8 12 2\"\/><\/svg>\n <svg viewBox=\"0 0 24 24\" fill=\"#FFD93D\" stroke=\"#202020\" stroke-width=\"1.5\"><polygon points=\"12 2 15 8 22 9 17 14 18 21 12 18 6 21 7 14 2 9 9 8 12 2\"\/><\/svg>\n <svg viewBox=\"0 0 24 24\" fill=\"#FFD93D\" stroke=\"#202020\" stroke-width=\"1.5\"><polygon points=\"12 2 15 8 22 9 17 14 18 21 12 18 6 21 7 14 2 9 9 8 12 2\"\/><\/svg>\n <svg viewBox=\"0 0 24 24\" fill=\"#FFD93D\" stroke=\"#202020\" stroke-width=\"1.5\"><polygon points=\"12 2 15 8 22 9 17 14 18 21 12 18 6 21 7 14 2 9 9 8 12 2\"\/><\/svg>\n <svg viewBox=\"0 0 24 24\" fill=\"#FFD93D\" stroke=\"#202020\" stroke-width=\"1.5\"><polygon points=\"12 2 15 8 22 9 17 14 18 21 12 18 6 21 7 14 2 9 9 8 12 2\"\/><\/svg>\n <\/div>\n <p class=\"testimonial-text\">Best digital agency in Lahore, hands down. Their Meta Ads work got 1M+ views and got good clients on exibition. Professional, responsive, and results-driven team.<\/p>\n <div class=\"testimonial-author\">\n <div class=\"testimonial-avatar\">\n <svg viewBox=\"0 0 48 48\">\n <circle cx=\"24\" cy=\"18\" r=\"10\" fill=\"#4ECDC4\" stroke=\"#202020\" stroke-width=\"2.5\"\/>\n <path d=\"M8 44 Q24 28 40 44\" fill=\"#FFD93D\" stroke=\"#202020\" stroke-width=\"2.5\"\/>\n <circle cx=\"20\" cy=\"17\" r=\"1.5\" fill=\"#202020\"\/>\n <circle cx=\"28\" cy=\"17\" r=\"1.5\" fill=\"#202020\"\/>\n <path d=\"M20 22 Q24 25 28 22\" stroke=\"#202020\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"\/>\n <path d=\"M16 12 L32 12 L30 8 L18 8 Z\" fill=\"#202020\"\/>\n <\/svg>\n <\/div>\n <div class=\"testimonial-info\">\n <div class=\"testimonial-name\">Bilal Ahmed<\/div>\n <div class=\"testimonial-role\">Director, Furniture Brand<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- ============================================\n 8. CTA SECTION\n ============================================ -->\n<section class=\"cta\" id=\"cta\">\n <!-- Decorative shapes -->\n <svg class=\"bg-decor\" style=\"top: 10%; left: 5%; width: 80px; height: 80px; opacity: 0.15;\" viewBox=\"0 0 80 80\">\n <circle cx=\"40\" cy=\"40\" r=\"35\" fill=\"none\" stroke=\"#FFFFFF\" stroke-width=\"3\"\/>\n <\/svg>\n <svg class=\"bg-decor\" style=\"top: 20%; right: 8%; width: 60px; height: 60px; opacity: 0.2;\" viewBox=\"0 0 60 60\">\n <polygon points=\"30,5 37,22 55,30 37,38 30,55 23,38 5,30 23,22\" fill=\"#FFD93D\" stroke=\"#FFFFFF\" stroke-width=\"2\"\/>\n <\/svg>\n <svg class=\"bg-decor\" style=\"bottom: 15%; left: 10%; width: 70px; height: 70px; opacity: 0.15;\" viewBox=\"0 0 70 70\">\n <rect x=\"10\" y=\"10\" width=\"50\" height=\"50\" rx=\"12\" fill=\"none\" stroke=\"#FFFFFF\" stroke-width=\"3\" transform=\"rotate(15 35 35)\"\/>\n <\/svg>\n <svg class=\"bg-decor\" style=\"bottom: 20%; right: 5%; width: 90px; height: 90px; opacity: 0.1;\" viewBox=\"0 0 90 90\">\n <circle cx=\"45\" cy=\"45\" r=\"40\" fill=\"#FFFFFF\"\/>\n <\/svg>\n <svg class=\"bg-decor\" style=\"top: 50%; left: 3%; width: 50px; height: 50px; opacity: 0.2;\" viewBox=\"0 0 50 50\">\n <line x1=\"10\" y1=\"25\" x2=\"40\" y2=\"25\" stroke=\"#FFFFFF\" stroke-width=\"4\" stroke-linecap=\"round\"\/>\n <line x1=\"25\" y1=\"10\" x2=\"25\" y2=\"40\" stroke=\"#FFFFFF\" stroke-width=\"4\" stroke-linecap=\"round\"\/>\n <\/svg>\n\n <div class=\"container\">\n <div class=\"cta-inner\">\n <div class=\"cta-tag reveal\">\n <span style=\"width: 8px; height: 8px; background: #22c55e; border-radius: 50%; display: inline-block;\"><\/span>\n Let's Talk\n <\/div>\n <h2 class=\"reveal reveal-delay-1\">Let's Build Something<br>Amazing Together<\/h2>\n <p class=\"reveal reveal-delay-2\">Ready to transform your digital presence? Whether you're in Lahore, Islamabad, Faisalabad, or anywhere in the world \u2014 we're ready to help you grow.<\/p>\n <div class=\"cta-buttons reveal reveal-delay-3\">\n <a href=\"https:\/\/wa.me\/923454693418\" class=\"btn btn-whatsapp magnetic\" target=\"_blank\">\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"20\" height=\"20\"><path d=\"M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z\"\/><\/svg>\n WhatsApp Us\n <\/a>\n <a href=\"tel:+923454693418\" class=\"btn btn-outline magnetic\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"20\" height=\"20\"><path d=\"M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z\"\/><\/svg>\n Call Now\n <\/a>\n <\/div>\n\n <div class=\"cta-contact reveal reveal-delay-4\">\n <div class=\"cta-contact-item\">\n <div class=\"icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z\"\/><\/svg>\n <\/div>\n <div class=\"label\">Call Us<\/div>\n <div class=\"value\">+92 345 4693418<\/div>\n <\/div>\n <div class=\"cta-contact-item\">\n <div class=\"icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"\/><polyline points=\"22,6 12,13 2,6\"\/><\/svg>\n <\/div>\n <div class=\"label\">Email Us<\/div>\n <div class=\"value\">hello@xohar.com<\/div>\n <\/div>\n <div class=\"cta-contact-item\">\n <div class=\"icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"2\" y1=\"12\" x2=\"22\" y2=\"12\"\/><path d=\"M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z\"\/><\/svg>\n <\/div>\n <div class=\"label\">Visit Us<\/div>\n <div class=\"value\">www.xohar.com<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- ============================================\n JAVASCRIPT\n ============================================ -->\n<script>\n(function() {\n 'use strict';\n\n \/* ===== CUSTOM CURSOR ===== *\/\n const cursorDot = document.getElementById('cursorDot');\n const cursorRing = document.getElementById('cursorRing');\n let mouseX = 0, mouseY = 0;\n let ringX = 0, ringY = 0;\n\n document.addEventListener('mousemove', (e) => {\n mouseX = e.clientX;\n mouseY = e.clientY;\n cursorDot.style.left = mouseX + 'px';\n cursorDot.style.top = mouseY + 'px';\n });\n\n \/\/ Smooth ring follow with lerp\n function updateRing() {\n ringX += (mouseX - ringX) * 0.18;\n ringY += (mouseY - ringY) * 0.18;\n cursorRing.style.left = ringX + 'px';\n cursorRing.style.top = ringY + 'px';\n requestAnimationFrame(updateRing);\n }\n updateRing();\n\n \/\/ Cursor hover states\n document.querySelectorAll('a, button, .service-card, .portfolio-item, .stat-card, .why-feature, .process-step, .testimonial-card').forEach(el => {\n el.addEventListener('mouseenter', () => cursorRing.classList.add('hovering'));\n el.addEventListener('mouseleave', () => cursorRing.classList.remove('hovering'));\n });\n\n \/* ===== MAGNETIC BUTTONS ===== *\/\n document.querySelectorAll('.magnetic').forEach(btn => {\n btn.addEventListener('mousemove', (e) => {\n const rect = btn.getBoundingClientRect();\n const x = e.clientX - rect.left - rect.width \/ 2;\n const y = e.clientY - rect.top - rect.height \/ 2;\n const strength = 0.25;\n btn.style.transform = `translate(${x * strength}px, ${y * strength}px)`;\n });\n btn.addEventListener('mouseleave', () => {\n btn.style.transform = 'translate(0, 0)';\n });\n });\n\n \/* ===== SCROLL REVEAL (IntersectionObserver) ===== *\/\n const revealObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n revealObserver.unobserve(entry.target);\n }\n });\n }, {\n threshold: 0.1,\n rootMargin: '0px 0px -60px 0px'\n });\n\n document.querySelectorAll('.reveal').forEach(el => revealObserver.observe(el));\n\n \/* ===== COUNT-UP ANIMATION ===== *\/\n const countUpObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const el = entry.target;\n const target = parseInt(el.dataset.target);\n const suffix = el.dataset.suffix || '';\n const duration = 2000;\n const startTime = performance.now();\n\n function update(currentTime) {\n const elapsed = currentTime - startTime;\n const progress = Math.min(elapsed \/ duration, 1);\n const eased = 1 - Math.pow(1 - progress, 3);\n const current = Math.floor(target * eased);\n el.textContent = current + suffix;\n if (progress < 1) {\n requestAnimationFrame(update);\n } else {\n el.textContent = target + suffix;\n }\n }\n requestAnimationFrame(update);\n countUpObserver.unobserve(el);\n }\n });\n }, { threshold: 0.5 });\n\n document.querySelectorAll('[data-target]').forEach(el => countUpObserver.observe(el));\n\n \/* ===== PROCESS LINE ANIMATION ===== *\/\n const processLine = document.getElementById('processLine');\n if (processLine) {\n const lineObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n processLine.classList.add('animate');\n lineObserver.unobserve(processLine);\n }\n });\n }, { threshold: 0.3 });\n lineObserver.observe(processLine);\n }\n\n \/* ===== MOUSE PARALLAX ON HERO ===== *\/\n const heroSection = document.getElementById('hero');\n const parallaxElements = document.querySelectorAll('[data-parallax]');\n\n if (heroSection && parallaxElements.length > 0) {\n let parallaxRAF = null;\n heroSection.addEventListener('mousemove', (e) => {\n if (parallaxRAF) cancelAnimationFrame(parallaxRAF);\n parallaxRAF = requestAnimationFrame(() => {\n const rect = heroSection.getBoundingClientRect();\n const x = (e.clientX - rect.left) \/ rect.width - 0.5;\n const y = (e.clientY - rect.top) \/ rect.height - 0.5;\n parallaxElements.forEach(el => {\n const speed = parseFloat(el.dataset.parallax);\n el.style.transform = `translate(${x * speed * 100}px, ${y * speed * 100}px)`;\n });\n });\n });\n }\n\n \/* ===== SMOOTH SCROLL FOR ANCHOR LINKS ===== *\/\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', (e) => {\n const targetId = anchor.getAttribute('href');\n if (targetId === '#') return;\n const target = document.querySelector(targetId);\n if (target) {\n e.preventDefault();\n target.scrollIntoView({ behavior: 'smooth', block: 'start' });\n }\n });\n });\n\n \/* ===== PREVENT FORM\/LAYOUT ISSUES ON RESIZE ===== *\/\n let resizeTimer;\n window.addEventListener('resize', () => {\n clearTimeout(resizeTimer);\n resizeTimer = setTimeout(() => {\n \/\/ Reset any transforms from magnetic\/parallax\n document.querySelectorAll('.magnetic').forEach(btn => {\n btn.style.transform = '';\n });\n }, 250);\n });\n\n})();\n<\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Xohar \u2014 Premium Digital Agency | Web Design, Development & Marketing Available for new projects \u2014 Pakistan & Worldwide We Build Digital Experiences That Convert. Xohar<span class=\"excerpt-hellip\"> [\u2026]<\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1138","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/xohar.com\/index.php\/wp-json\/wp\/v2\/pages\/1138","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xohar.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/xohar.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/xohar.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xohar.com\/index.php\/wp-json\/wp\/v2\/comments?post=1138"}],"version-history":[{"count":9,"href":"https:\/\/xohar.com\/index.php\/wp-json\/wp\/v2\/pages\/1138\/revisions"}],"predecessor-version":[{"id":1163,"href":"https:\/\/xohar.com\/index.php\/wp-json\/wp\/v2\/pages\/1138\/revisions\/1163"}],"wp:attachment":[{"href":"https:\/\/xohar.com\/index.php\/wp-json\/wp\/v2\/media?parent=1138"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}