Emaar Al Watan \u2014 \u062e\u062f\u0645\u0627\u062a \u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629 (\u0639\u0631\u0636 \u0645\u0645\u064a\u0632)<\/title>\r\n \r\n <script src=\"https:\/\/unpkg.com\/react@18.2.0\/umd\/react.production.min.js\"><\/script>\r\n <script src=\"https:\/\/unpkg.com\/react-dom@18.2.0\/umd\/react-dom.production.min.js\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/babel-standalone\/6.26.0\/babel.min.js\"><\/script>\r\n <style>\r\n *,\r\n *::before,\r\n *::after {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n html {\r\n scroll-behavior: smooth;\r\n }\r\n body {\r\n overflow-x: hidden;\r\n background: #f4f6fa;\r\n font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;\r\n }\r\n ::selection {\r\n background: rgba(29, 45, 62, 0.12);\r\n }\r\n\r\n \/* \u062d\u0631\u0643\u0627\u062a \u0627\u0644\u062e\u0644\u0641\u064a\u0629 *\/\r\n @keyframes float1 {\r\n 0%, 100% { transform: translateY(0) rotate(0deg); }\r\n 50% { transform: translateY(-18px) rotate(6deg); }\r\n }\r\n @keyframes float2 {\r\n 0%, 100% { transform: translateY(0); }\r\n 50% { transform: translateY(-14px); }\r\n }\r\n @keyframes pulse {\r\n 0%, 100% { opacity: 0.035; transform: scale(1); }\r\n 50% { opacity: 0.07; transform: scale(1.08); }\r\n }\r\n @keyframes fadeFloat {\r\n 0%, 100% { opacity: 0.25; transform: translateY(0); }\r\n 50% { opacity: 0.6; transform: translateY(-8px); }\r\n }\r\n @keyframes spin {\r\n from { transform: rotate(0deg); }\r\n to { transform: rotate(360deg); }\r\n }\r\n\r\n \/* \u062a\u062e\u0637\u064a\u0637 bento *\/\r\n .eco-bento {\r\n display: grid;\r\n grid-template-columns: 1.45fr 1fr;\r\n grid-template-rows: 1fr 1fr;\r\n gap: 14px;\r\n max-width: 1300px;\r\n margin: 0 auto;\r\n }\r\n .eco-bento .mosaic-item:first-child {\r\n grid-row: 1 \/ -1;\r\n min-height: clamp(400px, 55vw, 640px);\r\n }\r\n .eco-bento .mosaic-item:nth-child(2),\r\n .eco-bento .mosaic-item:nth-child(3) {\r\n min-height: clamp(190px, 26vw, 310px);\r\n }\r\n\r\n .sec-bento {\r\n display: grid;\r\n grid-template-columns: 1fr 1.35fr 1fr;\r\n grid-template-rows: 1fr 1fr;\r\n gap: 14px;\r\n max-width: 1300px;\r\n margin: 0 auto;\r\n }\r\n .sec-bento .mosaic-item:nth-child(1) { min-height: clamp(240px, 28vw, 330px); }\r\n .sec-bento .mosaic-item:nth-child(2) {\r\n grid-row: 1 \/ -1;\r\n min-height: clamp(400px, 52vw, 620px);\r\n }\r\n .sec-bento .mosaic-item:nth-child(3) { min-height: clamp(240px, 28vw, 330px); }\r\n .sec-bento .mosaic-item:nth-child(4) { min-height: clamp(240px, 28vw, 330px); }\r\n .sec-bento .mosaic-item:nth-child(5) { min-height: clamp(240px, 28vw, 330px); }\r\n\r\n @media (max-width: 960px) {\r\n .eco-bento {\r\n grid-template-columns: 1fr 1fr !important;\r\n grid-template-rows: auto auto !important;\r\n }\r\n .eco-bento .mosaic-item:first-child {\r\n grid-row: auto !important;\r\n grid-column: 1 \/ -1 !important;\r\n min-height: 320px !important;\r\n }\r\n .eco-bento .mosaic-item { min-height: 260px !important; }\r\n .sec-bento {\r\n grid-template-columns: 1fr 1fr !important;\r\n grid-template-rows: auto !important;\r\n }\r\n .sec-bento .mosaic-item:nth-child(2) {\r\n grid-row: auto !important;\r\n grid-column: 1 \/ -1 !important;\r\n min-height: 320px !important;\r\n }\r\n .sec-bento .mosaic-item { min-height: 260px !important; }\r\n .sec-bento .mosaic-item:last-child { grid-column: 1 \/ -1 !important; }\r\n }\r\n\r\n @media (max-width: 600px) {\r\n .eco-bento { grid-template-columns: 1fr !important; }\r\n .eco-bento .mosaic-item:first-child { grid-column: auto !important; }\r\n .sec-bento { grid-template-columns: 1fr !important; }\r\n .sec-bento .mosaic-item:nth-child(2) { grid-column: auto !important; }\r\n .sec-bento .mosaic-item:last-child { grid-column: auto !important; }\r\n }\r\n\r\n \/* \u0634\u0627\u0634\u0629 \u0627\u0644\u062a\u062d\u0645\u064a\u0644 *\/\r\n .loader-container {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n min-height: 100vh;\r\n background: #f4f6fa;\r\n }\r\n .loader {\r\n width: 48px;\r\n height: 48px;\r\n border: 4px solid rgba(29,45,62,0.1);\r\n border-left-color: #1D2D3E;\r\n border-radius: 50%;\r\n animation: spin 1s linear infinite;\r\n }\r\n .error-fallback {\r\n padding: 2rem;\r\n text-align: center;\r\n color: #1D2D3E;\r\n background: #fff;\r\n border-radius: 24px;\r\n max-width: 600px;\r\n margin: 10vh auto;\r\n box-shadow: 0 20px 40px rgba(0,0,0,0.08);\r\n direction: ltr;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div id=\"root\"><div class=\"loader-container\"><div class=\"loader\"><\/div><\/div><\/div>\r\n\r\n <script type=\"text\/babel\">\r\n (function() {\r\n if (typeof React === 'undefined' || typeof ReactDOM === 'undefined') {\r\n document.getElementById('root').innerHTML = '<div class=\"error-fallback\">\u26a0\ufe0f \u0641\u0634\u0644 \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0645\u0643\u062a\u0628\u0627\u062a \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629. \u064a\u0631\u062c\u0649 \u0627\u0644\u062a\u062d\u0642\u0642 \u0645\u0646 \u0627\u062a\u0635\u0627\u0644\u0643 \u0628\u0627\u0644\u0625\u0646\u062a\u0631\u0646\u062a \u0623\u0648 \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0635\u0641\u062d\u0629.<\/div>';\r\n return;\r\n }\r\n\r\n const { useState, useEffect, useRef } = React;\r\n const { createRoot } = ReactDOM;\r\n\r\n \/\/ -------------------- \u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u062e\u062f\u0645\u0627\u062a (\u0628\u062f\u0648\u0646 \u0631\u0648\u0627\u0628\u0637) --------------------\r\n const ecosystemServices = [\r\n { \r\n title: \"High-End Fit-out\", \r\n image: \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/02\/DSC02980-scaled-1300x1300-1.jpg\", \r\n desc: \"Premium interior fit-out solutions with unmatched craftsmanship and meticulous attention to every detail.\" \r\n },\r\n { \r\n title: \"Smart FM\", \r\n image: \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/02\/Smart.jpg\", \r\n desc: \"Intelligent facility management powered by cutting-edge technology and data-driven innovation.\" \r\n },\r\n { \r\n title: \"Landscape Architecture\", \r\n image: \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/02\/70cc2c41-52a5-43a4-826e-ad4f5787b414-scaled.jpg\", \r\n desc: \"Transforming outdoor spaces into breathtaking sustainable environments of natural beauty.\" \r\n },\r\n ];\r\n\r\n const sectorServices = [\r\n { \r\n title: \"Corporate & Administrative\", \r\n image: \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/02\/25-client-stories-bnp-paribas-relocates-its-saudi-arabia-gallery1-1.webp\", \r\n desc: \"Smart workspaces designed for productivity, collaboration, and corporate excellence.\" \r\n },\r\n { \r\n title: \"Healthcare Infrastructure\", \r\n image: \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/02\/3-6.bmp\", \r\n desc: \"State-of-the-art healthcare environments built for patient care and operational efficiency.\" \r\n },\r\n { \r\n title: \"High-End Residential\", \r\n image: \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/02\/52f2ea21-829b-4b22-b8a9-37c982f04203-1-scaled.jpg\", \r\n desc: \"Luxury living spaces crafted with the finest materials and bespoke architectural design.\" \r\n },\r\n { \r\n title: \"Institutional & Sovereign\", \r\n image: \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/02\/25-client-stories-jll-delivers-saudi-industrial-gallery-3.webp\", \r\n desc: \"Prestigious facilities meeting the highest standards of security and national sovereignty.\" \r\n },\r\n { \r\n title: \"Retail & Hospitality\", \r\n image: \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/02\/b1922b52-323a-4804-94ac-78b0d3d20004.jpg\", \r\n desc: \"Creating memorable guest experiences through exceptional retail and hospitality spaces.\" \r\n },\r\n ];\r\n\r\n \/\/ -------------------- \u062e\u0644\u0641\u064a\u0629 \u0645\u062a\u062d\u0631\u0643\u0629 --------------------\r\n function AnimatedBG() {\r\n const canvasRef = useRef(null);\r\n\r\n useEffect(() => {\r\n const canvas = canvasRef.current;\r\n if (!canvas) return;\r\n const ctx = canvas.getContext('2d');\r\n if (!ctx) return;\r\n\r\n let animId;\r\n let mx = -500, my = -500;\r\n let time = 0;\r\n\r\n const resize = () => {\r\n if (!canvas) return;\r\n canvas.width = window.innerWidth;\r\n canvas.height = Math.max(\r\n document.documentElement.scrollHeight,\r\n window.innerHeight * 2\r\n );\r\n };\r\n resize();\r\n\r\n const onMove = (e) => {\r\n mx = e.clientX;\r\n my = e.clientY + window.scrollY;\r\n };\r\n\r\n window.addEventListener('resize', resize);\r\n window.addEventListener('mousemove', onMove);\r\n\r\n const pts = [];\r\n for (let i = 0; i < 100; i++) {\r\n pts.push({\r\n x: Math.random() * canvas.width,\r\n y: Math.random() * canvas.height,\r\n vx: (Math.random() - 0.5) * 0.3,\r\n vy: (Math.random() - 0.5) * 0.3,\r\n r: Math.random() * 2.5 + 0.8,\r\n o: Math.random() * 0.15 + 0.04,\r\n ph: Math.random() * Math.PI * 2,\r\n });\r\n }\r\n\r\n const draw = () => {\r\n if (!ctx || !canvas) return;\r\n ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n time += 0.004;\r\n\r\n for (let w = 0; w < 4; w++) {\r\n ctx.beginPath();\r\n const by = canvas.height * (0.1 + w * 0.2);\r\n ctx.moveTo(0, by);\r\n for (let x = 0; x <= canvas.width; x += 10) {\r\n const y = by \r\n + Math.sin(x * 0.002 + time * 1.5 + w * 1.2) * 35 \r\n + Math.cos(x * 0.003 + time * 0.7 + w) * 20;\r\n ctx.lineTo(x, y);\r\n }\r\n ctx.lineTo(canvas.width, canvas.height);\r\n ctx.lineTo(0, canvas.height);\r\n ctx.closePath();\r\n ctx.fillStyle = `rgba(29,45,62,${0.008 + w * 0.003})`;\r\n ctx.fill();\r\n }\r\n\r\n for (let p of pts) {\r\n p.x += p.vx;\r\n p.y += p.vy;\r\n p.ph += 0.01;\r\n if (p.x < 0) p.x = canvas.width;\r\n if (p.x > canvas.width) p.x = 0;\r\n if (p.y < 0) p.y = canvas.height;\r\n if (p.y > canvas.height) p.y = 0;\r\n\r\n const dx = mx - p.x;\r\n const dy = my - p.y;\r\n const d = Math.sqrt(dx * dx + dy * dy);\r\n const glow = d < 200 ? (1 - d \/ 200) * 0.3 : 0;\r\n\r\n const pulseSize = p.r + Math.sin(p.ph * 2) * 0.2;\r\n ctx.beginPath();\r\n ctx.arc(p.x, p.y, pulseSize, 0, Math.PI * 2);\r\n ctx.fillStyle = `rgba(29,45,62,${p.o + Math.sin(p.ph) * 0.03 + glow})`;\r\n ctx.fill();\r\n }\r\n\r\n for (let i = 0; i < pts.length; i += 2) {\r\n for (let j = i + 1; j < pts.length; j += 2) {\r\n const dx = pts[i].x - pts[j].x;\r\n const dy = pts[i].y - pts[j].y;\r\n const d = Math.sqrt(dx * dx + dy * dy);\r\n if (d < 100) {\r\n ctx.beginPath();\r\n ctx.strokeStyle = `rgba(29,45,62,${0.02 * (1 - d \/ 100)})`;\r\n ctx.lineWidth = 0.5;\r\n ctx.moveTo(pts[i].x, pts[i].y);\r\n ctx.lineTo(pts[j].x, pts[j].y);\r\n ctx.stroke();\r\n }\r\n }\r\n }\r\n\r\n for (let g = 0; g < 8; g++) {\r\n const cx = (canvas.width \/ 9) * (g + 1) + Math.sin(time + g) * 15;\r\n const cy = canvas.height * 0.1 + Math.sin(time * 0.7 + g * 1.8) * 45 + g * canvas.height * 0.1;\r\n const sz = 12 + Math.sin(time * 1.2 + g) * 6;\r\n ctx.save();\r\n ctx.translate(cx, cy);\r\n ctx.rotate(time * 0.3 + g * 0.6);\r\n ctx.strokeStyle = `rgba(29,45,62,${0.03 + Math.sin(time + g) * 0.01})`;\r\n ctx.lineWidth = 0.8;\r\n ctx.beginPath();\r\n const sides = (g % 3) + 3;\r\n for (let s = 0; s <= sides; s++) {\r\n const a = (Math.PI * 2 \/ sides) * s - Math.PI \/ 2;\r\n const px = sz * Math.cos(a);\r\n const py = sz * Math.sin(a);\r\n s === 0 ? ctx.moveTo(px, py) : ctx.lineTo(px, py);\r\n }\r\n ctx.closePath();\r\n ctx.stroke();\r\n ctx.restore();\r\n }\r\n\r\n animId = requestAnimationFrame(draw);\r\n };\r\n draw();\r\n\r\n return () => {\r\n cancelAnimationFrame(animId);\r\n window.removeEventListener('resize', resize);\r\n window.removeEventListener('mousemove', onMove);\r\n };\r\n }, []);\r\n\r\n return <canvas ref={canvasRef} style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', pointerEvents: 'none', zIndex: 0 }} \/>;\r\n }\r\n\r\n \/\/ -------------------- \u0639\u0646\u0635\u0631 \u0627\u0644\u0641\u0633\u064a\u0641\u0633\u0627\u0621 (\u0628\u062f\u0648\u0646 \u0631\u0648\u0627\u0628\u0637) --------------------\r\n function MosaicItem({ service, num, delay, style: extraStyle }) {\r\n const [hovered, setHovered] = useState(false);\r\n const [visible, setVisible] = useState(false);\r\n const ref = useRef(null);\r\n\r\n useEffect(() => {\r\n const el = ref.current;\r\n if (!el) return;\r\n const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) setVisible(true); }, { threshold: 0.08 });\r\n obs.observe(el);\r\n return () => obs.disconnect();\r\n }, []);\r\n\r\n return (\r\n <div\r\n ref={ref}\r\n onMouseEnter={() => setHovered(true)}\r\n onMouseLeave={() => setHovered(false)}\r\n className=\"mosaic-item\"\r\n style={{\r\n display: 'block',\r\n position: 'relative',\r\n borderRadius: '22px',\r\n overflow: 'hidden',\r\n cursor: 'default', \/\/ \u0644\u0645 \u064a\u0639\u062f \u0631\u0627\u0628\u0637\u0627\u064b\r\n textDecoration: 'none',\r\n opacity: visible ? 1 : 0,\r\n transform: visible ? 'translateY(0) scale(1)' : 'translateY(55px) scale(0.94)',\r\n transition: `opacity 0.9s cubic-bezier(0.22,1,0.36,1) ${delay}s, transform 0.9s cubic-bezier(0.22,1,0.36,1) ${delay}s`,\r\n ...extraStyle,\r\n }}\r\n >\r\n <img\r\n src={service.image}\r\n alt={service.title}\r\n loading=\"lazy\"\r\n style={{\r\n position: 'absolute',\r\n inset: 0,\r\n width: '100%',\r\n height: '100%',\r\n objectFit: 'cover',\r\n transition: 'transform 0.9s cubic-bezier(0.22,1,0.36,1), filter 0.6s ease',\r\n transform: hovered ? 'scale(1.12)' : 'scale(1)',\r\n filter: hovered ? 'brightness(1.05)' : 'brightness(0.95)',\r\n }}\r\n \/>\r\n <div style={{\r\n position: 'absolute',\r\n inset: 0,\r\n background: 'linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.12) 50%, transparent 60%)',\r\n transform: hovered ? 'translateX(200%)' : 'translateX(-200%)',\r\n transition: 'transform 0.8s ease',\r\n zIndex: 3,\r\n }} \/>\r\n <div style={{\r\n position: 'absolute',\r\n inset: 0,\r\n background: hovered\r\n ? 'linear-gradient(180deg, rgba(29,45,62,0.15) 0%, rgba(29,45,62,0.92) 100%)'\r\n : 'linear-gradient(180deg, rgba(29,45,62,0.05) 0%, rgba(29,45,62,0.78) 100%)',\r\n transition: 'all 0.6s ease',\r\n zIndex: 1,\r\n }} \/>\r\n <span style={{\r\n position: 'absolute',\r\n top: '12px',\r\n right: '18px',\r\n fontSize: 'clamp(56px, 7vw, 90px)',\r\n fontWeight: 900,\r\n color: 'rgba(255,255,255,0.04)',\r\n lineHeight: 1,\r\n zIndex: 2,\r\n transition: 'all 0.6s ease',\r\n transform: hovered ? 'translateY(-6px) scale(1.05)' : 'translateY(0) scale(1)',\r\n userSelect: 'none',\r\n }}>{String(num).padStart(2, '0')}<\/span>\r\n\r\n {\/* \u062a\u0645 \u0625\u0632\u0627\u0644\u0629 \u062f\u0627\u0626\u0631\u0629 \u0627\u0644\u0633\u0647\u0645 \u0627\u0644\u062a\u064a \u062a\u0638\u0647\u0631 \u0639\u0646\u062f hover *\/}\r\n\r\n <div style={{\r\n position: 'absolute',\r\n top: '18px',\r\n left: '20px',\r\n padding: '5px 14px',\r\n background: 'rgba(255,255,255,0.08)',\r\n backdropFilter: 'blur(10px)',\r\n WebkitBackdropFilter: 'blur(10px)',\r\n border: '1px solid rgba(255,255,255,0.12)',\r\n borderRadius: '20px',\r\n fontSize: '10px',\r\n fontWeight: 700,\r\n letterSpacing: '2px',\r\n textTransform: 'uppercase',\r\n color: 'rgba(255,255,255,0.6)',\r\n zIndex: 4,\r\n opacity: hovered ? 1 : 0,\r\n transform: hovered ? 'translateY(0)' : 'translateY(-8px)',\r\n transition: 'all 0.5s cubic-bezier(0.22,1,0.36,1) 0.1s',\r\n }}>{String(num).padStart(2, '0')} \u2014 Service<\/div>\r\n\r\n <div style={{\r\n position: 'absolute',\r\n bottom: 0,\r\n left: 0,\r\n right: 0,\r\n padding: 'clamp(18px, 2.5vw, 30px)',\r\n zIndex: 4,\r\n }}>\r\n <h3 style={{\r\n fontSize: 'clamp(17px, 2.2vw, 26px)',\r\n fontWeight: 700,\r\n color: '#fff',\r\n margin: '0 0 6px 0',\r\n transition: 'all 0.5s cubic-bezier(0.22,1,0.36,1)',\r\n transform: hovered ? 'translateY(-10px)' : 'translateY(0)',\r\n textShadow: '0 2px 8px rgba(0,0,0,0.2)',\r\n }}>{service.title}<\/h3>\r\n\r\n <p style={{\r\n fontSize: 'clamp(11px, 1.1vw, 14px)',\r\n color: 'rgba(255,255,255,0.7)',\r\n margin: 0,\r\n lineHeight: 1.7,\r\n maxHeight: hovered ? '70px' : '0px',\r\n opacity: hovered ? 1 : 0,\r\n overflow: 'hidden',\r\n transition: 'all 0.6s cubic-bezier(0.22,1,0.36,1)',\r\n transform: hovered ? 'translateY(-6px)' : 'translateY(10px)',\r\n }}>{service.desc}<\/p>\r\n\r\n <div style={{\r\n marginTop: hovered ? '14px' : '8px',\r\n height: '2px',\r\n background: 'rgba(255,255,255,0.1)',\r\n borderRadius: '2px',\r\n overflow: 'hidden',\r\n transition: 'margin 0.5s ease',\r\n }}>\r\n <div style={{\r\n height: '100%',\r\n width: hovered ? '100%' : '0%',\r\n background: 'linear-gradient(90deg, rgba(255,255,255,0.2), rgba(255,255,255,0.7), rgba(255,255,255,0.2))',\r\n borderRadius: '2px',\r\n transition: 'width 0.9s cubic-bezier(0.22,1,0.36,1)',\r\n }} \/>\r\n <\/div>\r\n\r\n {\/* \u062a\u0645 \u0625\u0632\u0627\u0644\u0629 \u0639\u0646\u0635\u0631 \"Explore\" \u0648\u0627\u0644\u0633\u0641\u0644\u064a *\/}\r\n <\/div>\r\n <\/div>\r\n );\r\n }\r\n\r\n \/\/ -------------------- \u0631\u0623\u0633 \u0627\u0644\u0642\u0633\u0645 --------------------\r\n function SectionHead({ sub, title }) {\r\n const [visible, setVisible] = useState(false);\r\n const ref = useRef(null);\r\n useEffect(() => {\r\n const el = ref.current;\r\n if (!el) return;\r\n const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) setVisible(true); }, { threshold: 0.2 });\r\n obs.observe(el);\r\n return () => obs.disconnect();\r\n }, []);\r\n\r\n return (\r\n <div ref={ref} style={{\r\n textAlign: 'center',\r\n marginBottom: 'clamp(40px, 5vw, 70px)',\r\n opacity: visible ? 1 : 0,\r\n transform: visible ? 'translateY(0)' : 'translateY(45px)',\r\n transition: 'all 1s cubic-bezier(0.22,1,0.36,1)',\r\n }}>\r\n <div style={{ display: 'inline-flex', alignItems: 'center', gap: '16px', marginBottom: '18px' }}>\r\n <span style={{ width: '50px', height: '1px', background: 'rgba(29,45,62,0.18)' }} \/>\r\n <span style={{ fontSize: '11px', fontWeight: 700, letterSpacing: '4px', textTransform: 'uppercase', color: 'rgba(29,45,62,0.35)' }}>{sub}<\/span>\r\n <span style={{ width: '50px', height: '1px', background: 'rgba(29,45,62,0.18)' }} \/>\r\n <\/div>\r\n <h2 style={{ fontSize: 'clamp(28px, 5vw, 54px)', fontWeight: 800, color: '#1D2D3E', margin: 0, lineHeight: 1.15, letterSpacing: '-0.5px' }}>{title}<\/h2>\r\n <\/div>\r\n );\r\n }\r\n\r\n \/\/ -------------------- \u0627\u0644\u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u0631\u0626\u064a\u0633\u064a --------------------\r\n function App() {\r\n const [loaded, setLoaded] = useState(false);\r\n useEffect(() => { setLoaded(true); }, []);\r\n\r\n return (\r\n <div style={{\r\n position: 'relative',\r\n minHeight: '100vh',\r\n fontFamily: \"'Segoe UI', system-ui, -apple-system, sans-serif\",\r\n background: 'linear-gradient(165deg, #fafbfd 0%, #f0f3f8 35%, #eaeff6 65%, #f4f6fa 100%)',\r\n overflowX: 'hidden',\r\n }}>\r\n <AnimatedBG \/>\r\n\r\n {\/* \u0639\u0646\u0627\u0635\u0631 \u0632\u062e\u0631\u0641\u064a\u0629 \u062b\u0627\u0628\u062a\u0629 *\/}\r\n <div style={{ position: 'fixed', top: '8%', right: '3%', width: '380px', height: '380px', borderRadius: '50%', background: 'radial-gradient(circle, rgba(29,45,62,0.045), transparent 70%)', animation: 'pulse 9s infinite', pointerEvents: 'none', zIndex: 0 }} \/>\r\n <div style={{ position: 'fixed', bottom: '12%', left: '2%', width: '320px', height: '320px', borderRadius: '50%', background: 'radial-gradient(circle, rgba(29,45,62,0.035), transparent 70%)', animation: 'pulse 12s infinite 3s', pointerEvents: 'none', zIndex: 0 }} \/>\r\n <div style={{ position: 'fixed', top: '45%', left: '40%', width: '450px', height: '450px', borderRadius: '50%', background: 'radial-gradient(circle, rgba(29,45,62,0.02), transparent 70%)', animation: 'pulse 14s infinite 5s', pointerEvents: 'none', zIndex: 0 }} \/>\r\n\r\n <svg style={{ position: 'fixed', top: '15%', left: '6%', width: '120px', height: '120px', opacity: 0.04, animation: 'spin 40s linear infinite', pointerEvents: 'none', zIndex: 0 }} viewBox=\"0 0 100 100\">\r\n <circle cx=\"50\" cy=\"50\" r=\"45\" fill=\"none\" stroke=\"#1D2D3E\" strokeWidth=\"0.5\" strokeDasharray=\"8 4\" \/>\r\n <circle cx=\"50\" cy=\"50\" r=\"30\" fill=\"none\" stroke=\"#1D2D3E\" strokeWidth=\"0.3\" strokeDasharray=\"4 6\" \/>\r\n <\/svg>\r\n <svg style={{ position: 'fixed', bottom: '20%', right: '8%', width: '90px', height: '90px', opacity: 0.035, animation: 'spin 35s linear infinite reverse', pointerEvents: 'none', zIndex: 0 }} viewBox=\"0 0 100 100\">\r\n <rect x=\"15\" y=\"15\" width=\"70\" height=\"70\" fill=\"none\" stroke=\"#1D2D3E\" strokeWidth=\"0.5\" rx=\"8\" strokeDasharray=\"10 5\" \/>\r\n <\/svg>\r\n\r\n {\/* \u0627\u0644\u0647\u064a\u0631\u0648 *\/}\r\n <header style={{ position: 'relative', zIndex: 2, textAlign: 'center', padding: 'clamp(90px, 14vw, 180px) 20px clamp(50px, 7vw, 90px)' }}>\r\n <div style={{ position: 'absolute', top: '22%', left: '9%', width: '2px', height: '55px', background: 'linear-gradient(180deg, rgba(29,45,62,0.14), transparent)', animation: 'fadeFloat 4.5s infinite' }} \/>\r\n <div style={{ position: 'absolute', top: '18%', right: '11%', width: '9px', height: '9px', borderRadius: '50%', border: '1.5px solid rgba(29,45,62,0.1)', animation: 'float1 6s infinite' }} \/>\r\n <div style={{ position: 'absolute', bottom: '25%', right: '7%', width: '18px', height: '18px', border: '1.5px solid rgba(29,45,62,0.07)', transform: 'rotate(45deg)', animation: 'float2 5.5s infinite 1s' }} \/>\r\n <div style={{ position: 'absolute', top: '40%', left: '16%', width: '12px', height: '12px', borderRadius: '50%', border: '1px solid rgba(29,45,62,0.06)', animation: 'float2 7s infinite 0.5s' }} \/>\r\n <div style={{ position: 'absolute', bottom: '35%', left: '5%', width: '22px', height: '22px', border: '1px solid rgba(29,45,62,0.05)', borderRadius: '4px', animation: 'float1 8s infinite 2s' }} \/>\r\n\r\n <div style={{ opacity: loaded ? 1 : 0, transform: loaded ? 'translateY(0)' : 'translateY(-35px)', transition: 'all 1.3s cubic-bezier(0.22,1,0.36,1) 0.2s' }}>\r\n <div style={{ display: 'inline-flex', alignItems: 'center', gap: '14px', marginBottom: '26px' }}>\r\n <span style={{ width: '45px', height: '1px', background: 'rgba(29,45,62,0.14)' }} \/>\r\n <div style={{ width: '5px', height: '5px', background: '#1D2D3E', borderRadius: '50%', opacity: 0.22 }} \/>\r\n <span style={{ width: '45px', height: '1px', background: 'rgba(29,45,62,0.14)' }} \/>\r\n <\/div>\r\n <h1 style={{ fontSize: 'clamp(40px, 8.5vw, 88px)', fontWeight: 800, color: '#1D2D3E', lineHeight: 1.05, letterSpacing: '-2px', margin: '0 0 22px' }}>Our Services<\/h1>\r\n <p style={{ fontSize: 'clamp(14px, 1.6vw, 18px)', color: 'rgba(29,45,62,0.42)', maxWidth: '540px', margin: '0 auto', lineHeight: 1.85, fontWeight: 400 }}>\r\n Delivering excellence through integrated solutions and operational expertise across every sector we serve\r\n <\/p>\r\n <div style={{ marginTop: '55px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '6px', animation: 'fadeFloat 3s infinite' }}>\r\n <span style={{ fontSize: '10px', letterSpacing: '3.5px', color: 'rgba(29,45,62,0.28)', textTransform: 'uppercase', fontWeight: 600 }}>Scroll<\/span>\r\n <div style={{ width: '1px', height: '30px', background: 'linear-gradient(180deg, rgba(29,45,62,0.28), transparent)' }} \/>\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n {\/* \u0627\u0644\u0642\u0633\u0645 \u0627\u0644\u0623\u0648\u0644 *\/}\r\n <section style={{ position: 'relative', zIndex: 2, padding: '0 clamp(14px, 3vw, 40px)', marginBottom: 'clamp(80px, 10vw, 140px)' }}>\r\n <SectionHead sub=\"Integrated Solutions\" title=\"The Solution Ecosystem\" \/>\r\n <div className=\"eco-bento\">\r\n {ecosystemServices.map((s, i) => <MosaicItem key={i} service={s} num={i+1} delay={i*0.15} \/>)}\r\n <\/div>\r\n <\/section>\r\n\r\n {\/* \u0641\u0627\u0635\u0644 *\/}\r\n <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '20px', margin: '0 auto clamp(60px, 8vw, 100px)', maxWidth: '400px', padding: '0 20px', position: 'relative', zIndex: 2 }}>\r\n <span style={{ flex: 1, height: '1px', background: 'linear-gradient(90deg, transparent, rgba(29,45,62,0.1), transparent)' }} \/>\r\n <div style={{ width: '8px', height: '8px', border: '1.5px solid rgba(29,45,62,0.12)', transform: 'rotate(45deg)' }} \/>\r\n <div style={{ width: '5px', height: '5px', background: 'rgba(29,45,62,0.1)', borderRadius: '50%' }} \/>\r\n <div style={{ width: '8px', height: '8px', border: '1.5px solid rgba(29,45,62,0.12)', transform: 'rotate(45deg)' }} \/>\r\n <span style={{ flex: 1, height: '1px', background: 'linear-gradient(90deg, transparent, rgba(29,45,62,0.1), transparent)' }} \/>\r\n <\/div>\r\n\r\n {\/* \u0627\u0644\u0642\u0633\u0645 \u0627\u0644\u062b\u0627\u0646\u064a *\/}\r\n <section style={{ position: 'relative', zIndex: 2, padding: '0 clamp(14px, 3vw, 40px)', marginBottom: 'clamp(60px, 8vw, 100px)' }}>\r\n <SectionHead sub=\"Industry Sectors\" title=\"Sectors Operational\" \/>\r\n <div className=\"sec-bento\">\r\n {sectorServices.map((s, i) => <MosaicItem key={i} service={s} num={i+4} delay={i*0.12} \/>)}\r\n <\/div>\r\n <\/section>\r\n\r\n {\/* \u062a\u0630\u064a\u064a\u0644 *\/}\r\n <footer style={{ position: 'relative', zIndex: 2, textAlign: 'center', padding: '70px 20px 45px' }}>\r\n <div style={{ display: 'inline-flex', alignItems: 'center', gap: '14px', opacity: 0.14 }}>\r\n <span style={{ width: '35px', height: '1px', background: '#1D2D3E' }} \/>\r\n <div style={{ width: '7px', height: '7px', border: '1.5px solid #1D2D3E', transform: 'rotate(45deg)' }} \/>\r\n <span style={{ width: '35px', height: '1px', background: '#1D2D3E' }} \/>\r\n <\/div>\r\n <p style={{ fontSize: '12px', color: 'rgba(29,45,62,0.22)', marginTop: '18px', letterSpacing: '2px', fontWeight: 500 }}>EMAAR AL WATAN \u00a9 2025<\/p>\r\n <\/footer>\r\n <\/div>\r\n );\r\n }\r\n\r\n const rootElement = document.getElementById('root');\r\n if (rootElement) {\r\n try {\r\n const root = createRoot(rootElement);\r\n root.render(<App \/>);\r\n } catch (err) {\r\n console.error('\u0641\u0634\u0644 \u0627\u0644\u062a\u0635\u064a\u064a\u0631:', err);\r\n rootElement.innerHTML = `<div class=\"error-fallback\"><h3>\u26a0\ufe0f \u062d\u062f\u062b \u062e\u0637\u0623<\/h3><p>${err.message}<\/p><\/div>`;\r\n }\r\n }\r\n })();\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Emaar Al Watan \u2014 \u062e\u062f\u0645\u0627\u062a \u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629 (\u0639\u0631\u0636 \u0645\u0645\u064a\u0632)<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"unboxed","site-sidebar-style":"unboxed","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"enabled","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-542","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/emaaralwatan.com\/ar\/wp-json\/wp\/v2\/pages\/542","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/emaaralwatan.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/emaaralwatan.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/emaaralwatan.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/emaaralwatan.com\/ar\/wp-json\/wp\/v2\/comments?post=542"}],"version-history":[{"count":48,"href":"https:\/\/emaaralwatan.com\/ar\/wp-json\/wp\/v2\/pages\/542\/revisions"}],"predecessor-version":[{"id":2317,"href":"https:\/\/emaaralwatan.com\/ar\/wp-json\/wp\/v2\/pages\/542\/revisions\/2317"}],"wp:attachment":[{"href":"https:\/\/emaaralwatan.com\/ar\/wp-json\/wp\/v2\/media?parent=542"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Emaar Al Watan \u2014 \u062e\u062f\u0645\u0627\u062a \u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629 (\u0639\u0631\u0636 \u0645\u0645\u064a\u0632)<\/title>\r\n \r\n <script src=\"https:\/\/unpkg.com\/react@18.2.0\/umd\/react.production.min.js\"><\/script>\r\n <script src=\"https:\/\/unpkg.com\/react-dom@18.2.0\/umd\/react-dom.production.min.js\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/babel-standalone\/6.26.0\/babel.min.js\"><\/script>\r\n <style>\r\n *,\r\n *::before,\r\n *::after {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n html {\r\n scroll-behavior: smooth;\r\n }\r\n body {\r\n overflow-x: hidden;\r\n background: #f4f6fa;\r\n font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;\r\n }\r\n ::selection {\r\n background: rgba(29, 45, 62, 0.12);\r\n }\r\n\r\n \/* \u062d\u0631\u0643\u0627\u062a \u0627\u0644\u062e\u0644\u0641\u064a\u0629 *\/\r\n @keyframes float1 {\r\n 0%, 100% { transform: translateY(0) rotate(0deg); }\r\n 50% { transform: translateY(-18px) rotate(6deg); }\r\n }\r\n @keyframes float2 {\r\n 0%, 100% { transform: translateY(0); }\r\n 50% { transform: translateY(-14px); }\r\n }\r\n @keyframes pulse {\r\n 0%, 100% { opacity: 0.035; transform: scale(1); }\r\n 50% { opacity: 0.07; transform: scale(1.08); }\r\n }\r\n @keyframes fadeFloat {\r\n 0%, 100% { opacity: 0.25; transform: translateY(0); }\r\n 50% { opacity: 0.6; transform: translateY(-8px); }\r\n }\r\n @keyframes spin {\r\n from { transform: rotate(0deg); }\r\n to { transform: rotate(360deg); }\r\n }\r\n\r\n \/* \u062a\u062e\u0637\u064a\u0637 bento *\/\r\n .eco-bento {\r\n display: grid;\r\n grid-template-columns: 1.45fr 1fr;\r\n grid-template-rows: 1fr 1fr;\r\n gap: 14px;\r\n max-width: 1300px;\r\n margin: 0 auto;\r\n }\r\n .eco-bento .mosaic-item:first-child {\r\n grid-row: 1 \/ -1;\r\n min-height: clamp(400px, 55vw, 640px);\r\n }\r\n .eco-bento .mosaic-item:nth-child(2),\r\n .eco-bento .mosaic-item:nth-child(3) {\r\n min-height: clamp(190px, 26vw, 310px);\r\n }\r\n\r\n .sec-bento {\r\n display: grid;\r\n grid-template-columns: 1fr 1.35fr 1fr;\r\n grid-template-rows: 1fr 1fr;\r\n gap: 14px;\r\n max-width: 1300px;\r\n margin: 0 auto;\r\n }\r\n .sec-bento .mosaic-item:nth-child(1) { min-height: clamp(240px, 28vw, 330px); }\r\n .sec-bento .mosaic-item:nth-child(2) {\r\n grid-row: 1 \/ -1;\r\n min-height: clamp(400px, 52vw, 620px);\r\n }\r\n .sec-bento .mosaic-item:nth-child(3) { min-height: clamp(240px, 28vw, 330px); }\r\n .sec-bento .mosaic-item:nth-child(4) { min-height: clamp(240px, 28vw, 330px); }\r\n .sec-bento .mosaic-item:nth-child(5) { min-height: clamp(240px, 28vw, 330px); }\r\n\r\n @media (max-width: 960px) {\r\n .eco-bento {\r\n grid-template-columns: 1fr 1fr !important;\r\n grid-template-rows: auto auto !important;\r\n }\r\n .eco-bento .mosaic-item:first-child {\r\n grid-row: auto !important;\r\n grid-column: 1 \/ -1 !important;\r\n min-height: 320px !important;\r\n }\r\n .eco-bento .mosaic-item { min-height: 260px !important; }\r\n .sec-bento {\r\n grid-template-columns: 1fr 1fr !important;\r\n grid-template-rows: auto !important;\r\n }\r\n .sec-bento .mosaic-item:nth-child(2) {\r\n grid-row: auto !important;\r\n grid-column: 1 \/ -1 !important;\r\n min-height: 320px !important;\r\n }\r\n .sec-bento .mosaic-item { min-height: 260px !important; }\r\n .sec-bento .mosaic-item:last-child { grid-column: 1 \/ -1 !important; }\r\n }\r\n\r\n @media (max-width: 600px) {\r\n .eco-bento { grid-template-columns: 1fr !important; }\r\n .eco-bento .mosaic-item:first-child { grid-column: auto !important; }\r\n .sec-bento { grid-template-columns: 1fr !important; }\r\n .sec-bento .mosaic-item:nth-child(2) { grid-column: auto !important; }\r\n .sec-bento .mosaic-item:last-child { grid-column: auto !important; }\r\n }\r\n\r\n \/* \u0634\u0627\u0634\u0629 \u0627\u0644\u062a\u062d\u0645\u064a\u0644 *\/\r\n .loader-container {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n min-height: 100vh;\r\n background: #f4f6fa;\r\n }\r\n .loader {\r\n width: 48px;\r\n height: 48px;\r\n border: 4px solid rgba(29,45,62,0.1);\r\n border-left-color: #1D2D3E;\r\n border-radius: 50%;\r\n animation: spin 1s linear infinite;\r\n }\r\n .error-fallback {\r\n padding: 2rem;\r\n text-align: center;\r\n color: #1D2D3E;\r\n background: #fff;\r\n border-radius: 24px;\r\n max-width: 600px;\r\n margin: 10vh auto;\r\n box-shadow: 0 20px 40px rgba(0,0,0,0.08);\r\n direction: ltr;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div id=\"root\"><div class=\"loader-container\"><div class=\"loader\"><\/div><\/div><\/div>\r\n\r\n <script type=\"text\/babel\">\r\n (function() {\r\n if (typeof React === 'undefined' || typeof ReactDOM === 'undefined') {\r\n document.getElementById('root').innerHTML = '<div class=\"error-fallback\">\u26a0\ufe0f \u0641\u0634\u0644 \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0645\u0643\u062a\u0628\u0627\u062a \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629. \u064a\u0631\u062c\u0649 \u0627\u0644\u062a\u062d\u0642\u0642 \u0645\u0646 \u0627\u062a\u0635\u0627\u0644\u0643 \u0628\u0627\u0644\u0625\u0646\u062a\u0631\u0646\u062a \u0623\u0648 \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0635\u0641\u062d\u0629.<\/div>';\r\n return;\r\n }\r\n\r\n const { useState, useEffect, useRef } = React;\r\n const { createRoot } = ReactDOM;\r\n\r\n \/\/ -------------------- \u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u062e\u062f\u0645\u0627\u062a (\u0628\u062f\u0648\u0646 \u0631\u0648\u0627\u0628\u0637) --------------------\r\n const ecosystemServices = [\r\n { \r\n title: \"High-End Fit-out\", \r\n image: \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/02\/DSC02980-scaled-1300x1300-1.jpg\", \r\n desc: \"Premium interior fit-out solutions with unmatched craftsmanship and meticulous attention to every detail.\" \r\n },\r\n { \r\n title: \"Smart FM\", \r\n image: \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/02\/Smart.jpg\", \r\n desc: \"Intelligent facility management powered by cutting-edge technology and data-driven innovation.\" \r\n },\r\n { \r\n title: \"Landscape Architecture\", \r\n image: \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/02\/70cc2c41-52a5-43a4-826e-ad4f5787b414-scaled.jpg\", \r\n desc: \"Transforming outdoor spaces into breathtaking sustainable environments of natural beauty.\" \r\n },\r\n ];\r\n\r\n const sectorServices = [\r\n { \r\n title: \"Corporate & Administrative\", \r\n image: \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/02\/25-client-stories-bnp-paribas-relocates-its-saudi-arabia-gallery1-1.webp\", \r\n desc: \"Smart workspaces designed for productivity, collaboration, and corporate excellence.\" \r\n },\r\n { \r\n title: \"Healthcare Infrastructure\", \r\n image: \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/02\/3-6.bmp\", \r\n desc: \"State-of-the-art healthcare environments built for patient care and operational efficiency.\" \r\n },\r\n { \r\n title: \"High-End Residential\", \r\n image: \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/02\/52f2ea21-829b-4b22-b8a9-37c982f04203-1-scaled.jpg\", \r\n desc: \"Luxury living spaces crafted with the finest materials and bespoke architectural design.\" \r\n },\r\n { \r\n title: \"Institutional & Sovereign\", \r\n image: \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/02\/25-client-stories-jll-delivers-saudi-industrial-gallery-3.webp\", \r\n desc: \"Prestigious facilities meeting the highest standards of security and national sovereignty.\" \r\n },\r\n { \r\n title: \"Retail & Hospitality\", \r\n image: \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/02\/b1922b52-323a-4804-94ac-78b0d3d20004.jpg\", \r\n desc: \"Creating memorable guest experiences through exceptional retail and hospitality spaces.\" \r\n },\r\n ];\r\n\r\n \/\/ -------------------- \u062e\u0644\u0641\u064a\u0629 \u0645\u062a\u062d\u0631\u0643\u0629 --------------------\r\n function AnimatedBG() {\r\n const canvasRef = useRef(null);\r\n\r\n useEffect(() => {\r\n const canvas = canvasRef.current;\r\n if (!canvas) return;\r\n const ctx = canvas.getContext('2d');\r\n if (!ctx) return;\r\n\r\n let animId;\r\n let mx = -500, my = -500;\r\n let time = 0;\r\n\r\n const resize = () => {\r\n if (!canvas) return;\r\n canvas.width = window.innerWidth;\r\n canvas.height = Math.max(\r\n document.documentElement.scrollHeight,\r\n window.innerHeight * 2\r\n );\r\n };\r\n resize();\r\n\r\n const onMove = (e) => {\r\n mx = e.clientX;\r\n my = e.clientY + window.scrollY;\r\n };\r\n\r\n window.addEventListener('resize', resize);\r\n window.addEventListener('mousemove', onMove);\r\n\r\n const pts = [];\r\n for (let i = 0; i < 100; i++) {\r\n pts.push({\r\n x: Math.random() * canvas.width,\r\n y: Math.random() * canvas.height,\r\n vx: (Math.random() - 0.5) * 0.3,\r\n vy: (Math.random() - 0.5) * 0.3,\r\n r: Math.random() * 2.5 + 0.8,\r\n o: Math.random() * 0.15 + 0.04,\r\n ph: Math.random() * Math.PI * 2,\r\n });\r\n }\r\n\r\n const draw = () => {\r\n if (!ctx || !canvas) return;\r\n ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n time += 0.004;\r\n\r\n for (let w = 0; w < 4; w++) {\r\n ctx.beginPath();\r\n const by = canvas.height * (0.1 + w * 0.2);\r\n ctx.moveTo(0, by);\r\n for (let x = 0; x <= canvas.width; x += 10) {\r\n const y = by \r\n + Math.sin(x * 0.002 + time * 1.5 + w * 1.2) * 35 \r\n + Math.cos(x * 0.003 + time * 0.7 + w) * 20;\r\n ctx.lineTo(x, y);\r\n }\r\n ctx.lineTo(canvas.width, canvas.height);\r\n ctx.lineTo(0, canvas.height);\r\n ctx.closePath();\r\n ctx.fillStyle = `rgba(29,45,62,${0.008 + w * 0.003})`;\r\n ctx.fill();\r\n }\r\n\r\n for (let p of pts) {\r\n p.x += p.vx;\r\n p.y += p.vy;\r\n p.ph += 0.01;\r\n if (p.x < 0) p.x = canvas.width;\r\n if (p.x > canvas.width) p.x = 0;\r\n if (p.y < 0) p.y = canvas.height;\r\n if (p.y > canvas.height) p.y = 0;\r\n\r\n const dx = mx - p.x;\r\n const dy = my - p.y;\r\n const d = Math.sqrt(dx * dx + dy * dy);\r\n const glow = d < 200 ? (1 - d \/ 200) * 0.3 : 0;\r\n\r\n const pulseSize = p.r + Math.sin(p.ph * 2) * 0.2;\r\n ctx.beginPath();\r\n ctx.arc(p.x, p.y, pulseSize, 0, Math.PI * 2);\r\n ctx.fillStyle = `rgba(29,45,62,${p.o + Math.sin(p.ph) * 0.03 + glow})`;\r\n ctx.fill();\r\n }\r\n\r\n for (let i = 0; i < pts.length; i += 2) {\r\n for (let j = i + 1; j < pts.length; j += 2) {\r\n const dx = pts[i].x - pts[j].x;\r\n const dy = pts[i].y - pts[j].y;\r\n const d = Math.sqrt(dx * dx + dy * dy);\r\n if (d < 100) {\r\n ctx.beginPath();\r\n ctx.strokeStyle = `rgba(29,45,62,${0.02 * (1 - d \/ 100)})`;\r\n ctx.lineWidth = 0.5;\r\n ctx.moveTo(pts[i].x, pts[i].y);\r\n ctx.lineTo(pts[j].x, pts[j].y);\r\n ctx.stroke();\r\n }\r\n }\r\n }\r\n\r\n for (let g = 0; g < 8; g++) {\r\n const cx = (canvas.width \/ 9) * (g + 1) + Math.sin(time + g) * 15;\r\n const cy = canvas.height * 0.1 + Math.sin(time * 0.7 + g * 1.8) * 45 + g * canvas.height * 0.1;\r\n const sz = 12 + Math.sin(time * 1.2 + g) * 6;\r\n ctx.save();\r\n ctx.translate(cx, cy);\r\n ctx.rotate(time * 0.3 + g * 0.6);\r\n ctx.strokeStyle = `rgba(29,45,62,${0.03 + Math.sin(time + g) * 0.01})`;\r\n ctx.lineWidth = 0.8;\r\n ctx.beginPath();\r\n const sides = (g % 3) + 3;\r\n for (let s = 0; s <= sides; s++) {\r\n const a = (Math.PI * 2 \/ sides) * s - Math.PI \/ 2;\r\n const px = sz * Math.cos(a);\r\n const py = sz * Math.sin(a);\r\n s === 0 ? ctx.moveTo(px, py) : ctx.lineTo(px, py);\r\n }\r\n ctx.closePath();\r\n ctx.stroke();\r\n ctx.restore();\r\n }\r\n\r\n animId = requestAnimationFrame(draw);\r\n };\r\n draw();\r\n\r\n return () => {\r\n cancelAnimationFrame(animId);\r\n window.removeEventListener('resize', resize);\r\n window.removeEventListener('mousemove', onMove);\r\n };\r\n }, []);\r\n\r\n return <canvas ref={canvasRef} style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', pointerEvents: 'none', zIndex: 0 }} \/>;\r\n }\r\n\r\n \/\/ -------------------- \u0639\u0646\u0635\u0631 \u0627\u0644\u0641\u0633\u064a\u0641\u0633\u0627\u0621 (\u0628\u062f\u0648\u0646 \u0631\u0648\u0627\u0628\u0637) --------------------\r\n function MosaicItem({ service, num, delay, style: extraStyle }) {\r\n const [hovered, setHovered] = useState(false);\r\n const [visible, setVisible] = useState(false);\r\n const ref = useRef(null);\r\n\r\n useEffect(() => {\r\n const el = ref.current;\r\n if (!el) return;\r\n const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) setVisible(true); }, { threshold: 0.08 });\r\n obs.observe(el);\r\n return () => obs.disconnect();\r\n }, []);\r\n\r\n return (\r\n <div\r\n ref={ref}\r\n onMouseEnter={() => setHovered(true)}\r\n onMouseLeave={() => setHovered(false)}\r\n className=\"mosaic-item\"\r\n style={{\r\n display: 'block',\r\n position: 'relative',\r\n borderRadius: '22px',\r\n overflow: 'hidden',\r\n cursor: 'default', \/\/ \u0644\u0645 \u064a\u0639\u062f \u0631\u0627\u0628\u0637\u0627\u064b\r\n textDecoration: 'none',\r\n opacity: visible ? 1 : 0,\r\n transform: visible ? 'translateY(0) scale(1)' : 'translateY(55px) scale(0.94)',\r\n transition: `opacity 0.9s cubic-bezier(0.22,1,0.36,1) ${delay}s, transform 0.9s cubic-bezier(0.22,1,0.36,1) ${delay}s`,\r\n ...extraStyle,\r\n }}\r\n >\r\n <img\r\n src={service.image}\r\n alt={service.title}\r\n loading=\"lazy\"\r\n style={{\r\n position: 'absolute',\r\n inset: 0,\r\n width: '100%',\r\n height: '100%',\r\n objectFit: 'cover',\r\n transition: 'transform 0.9s cubic-bezier(0.22,1,0.36,1), filter 0.6s ease',\r\n transform: hovered ? 'scale(1.12)' : 'scale(1)',\r\n filter: hovered ? 'brightness(1.05)' : 'brightness(0.95)',\r\n }}\r\n \/>\r\n <div style={{\r\n position: 'absolute',\r\n inset: 0,\r\n background: 'linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.12) 50%, transparent 60%)',\r\n transform: hovered ? 'translateX(200%)' : 'translateX(-200%)',\r\n transition: 'transform 0.8s ease',\r\n zIndex: 3,\r\n }} \/>\r\n <div style={{\r\n position: 'absolute',\r\n inset: 0,\r\n background: hovered\r\n ? 'linear-gradient(180deg, rgba(29,45,62,0.15) 0%, rgba(29,45,62,0.92) 100%)'\r\n : 'linear-gradient(180deg, rgba(29,45,62,0.05) 0%, rgba(29,45,62,0.78) 100%)',\r\n transition: 'all 0.6s ease',\r\n zIndex: 1,\r\n }} \/>\r\n <span style={{\r\n position: 'absolute',\r\n top: '12px',\r\n right: '18px',\r\n fontSize: 'clamp(56px, 7vw, 90px)',\r\n fontWeight: 900,\r\n color: 'rgba(255,255,255,0.04)',\r\n lineHeight: 1,\r\n zIndex: 2,\r\n transition: 'all 0.6s ease',\r\n transform: hovered ? 'translateY(-6px) scale(1.05)' : 'translateY(0) scale(1)',\r\n userSelect: 'none',\r\n }}>{String(num).padStart(2, '0')}<\/span>\r\n\r\n {\/* \u062a\u0645 \u0625\u0632\u0627\u0644\u0629 \u062f\u0627\u0626\u0631\u0629 \u0627\u0644\u0633\u0647\u0645 \u0627\u0644\u062a\u064a \u062a\u0638\u0647\u0631 \u0639\u0646\u062f hover *\/}\r\n\r\n <div style={{\r\n position: 'absolute',\r\n top: '18px',\r\n left: '20px',\r\n padding: '5px 14px',\r\n background: 'rgba(255,255,255,0.08)',\r\n backdropFilter: 'blur(10px)',\r\n WebkitBackdropFilter: 'blur(10px)',\r\n border: '1px solid rgba(255,255,255,0.12)',\r\n borderRadius: '20px',\r\n fontSize: '10px',\r\n fontWeight: 700,\r\n letterSpacing: '2px',\r\n textTransform: 'uppercase',\r\n color: 'rgba(255,255,255,0.6)',\r\n zIndex: 4,\r\n opacity: hovered ? 1 : 0,\r\n transform: hovered ? 'translateY(0)' : 'translateY(-8px)',\r\n transition: 'all 0.5s cubic-bezier(0.22,1,0.36,1) 0.1s',\r\n }}>{String(num).padStart(2, '0')} \u2014 Service<\/div>\r\n\r\n <div style={{\r\n position: 'absolute',\r\n bottom: 0,\r\n left: 0,\r\n right: 0,\r\n padding: 'clamp(18px, 2.5vw, 30px)',\r\n zIndex: 4,\r\n }}>\r\n <h3 style={{\r\n fontSize: 'clamp(17px, 2.2vw, 26px)',\r\n fontWeight: 700,\r\n color: '#fff',\r\n margin: '0 0 6px 0',\r\n transition: 'all 0.5s cubic-bezier(0.22,1,0.36,1)',\r\n transform: hovered ? 'translateY(-10px)' : 'translateY(0)',\r\n textShadow: '0 2px 8px rgba(0,0,0,0.2)',\r\n }}>{service.title}<\/h3>\r\n\r\n <p style={{\r\n fontSize: 'clamp(11px, 1.1vw, 14px)',\r\n color: 'rgba(255,255,255,0.7)',\r\n margin: 0,\r\n lineHeight: 1.7,\r\n maxHeight: hovered ? '70px' : '0px',\r\n opacity: hovered ? 1 : 0,\r\n overflow: 'hidden',\r\n transition: 'all 0.6s cubic-bezier(0.22,1,0.36,1)',\r\n transform: hovered ? 'translateY(-6px)' : 'translateY(10px)',\r\n }}>{service.desc}<\/p>\r\n\r\n <div style={{\r\n marginTop: hovered ? '14px' : '8px',\r\n height: '2px',\r\n background: 'rgba(255,255,255,0.1)',\r\n borderRadius: '2px',\r\n overflow: 'hidden',\r\n transition: 'margin 0.5s ease',\r\n }}>\r\n <div style={{\r\n height: '100%',\r\n width: hovered ? '100%' : '0%',\r\n background: 'linear-gradient(90deg, rgba(255,255,255,0.2), rgba(255,255,255,0.7), rgba(255,255,255,0.2))',\r\n borderRadius: '2px',\r\n transition: 'width 0.9s cubic-bezier(0.22,1,0.36,1)',\r\n }} \/>\r\n <\/div>\r\n\r\n {\/* \u062a\u0645 \u0625\u0632\u0627\u0644\u0629 \u0639\u0646\u0635\u0631 \"Explore\" \u0648\u0627\u0644\u0633\u0641\u0644\u064a *\/}\r\n <\/div>\r\n <\/div>\r\n );\r\n }\r\n\r\n \/\/ -------------------- \u0631\u0623\u0633 \u0627\u0644\u0642\u0633\u0645 --------------------\r\n function SectionHead({ sub, title }) {\r\n const [visible, setVisible] = useState(false);\r\n const ref = useRef(null);\r\n useEffect(() => {\r\n const el = ref.current;\r\n if (!el) return;\r\n const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) setVisible(true); }, { threshold: 0.2 });\r\n obs.observe(el);\r\n return () => obs.disconnect();\r\n }, []);\r\n\r\n return (\r\n <div ref={ref} style={{\r\n textAlign: 'center',\r\n marginBottom: 'clamp(40px, 5vw, 70px)',\r\n opacity: visible ? 1 : 0,\r\n transform: visible ? 'translateY(0)' : 'translateY(45px)',\r\n transition: 'all 1s cubic-bezier(0.22,1,0.36,1)',\r\n }}>\r\n <div style={{ display: 'inline-flex', alignItems: 'center', gap: '16px', marginBottom: '18px' }}>\r\n <span style={{ width: '50px', height: '1px', background: 'rgba(29,45,62,0.18)' }} \/>\r\n <span style={{ fontSize: '11px', fontWeight: 700, letterSpacing: '4px', textTransform: 'uppercase', color: 'rgba(29,45,62,0.35)' }}>{sub}<\/span>\r\n <span style={{ width: '50px', height: '1px', background: 'rgba(29,45,62,0.18)' }} \/>\r\n <\/div>\r\n <h2 style={{ fontSize: 'clamp(28px, 5vw, 54px)', fontWeight: 800, color: '#1D2D3E', margin: 0, lineHeight: 1.15, letterSpacing: '-0.5px' }}>{title}<\/h2>\r\n <\/div>\r\n );\r\n }\r\n\r\n \/\/ -------------------- \u0627\u0644\u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u0631\u0626\u064a\u0633\u064a --------------------\r\n function App() {\r\n const [loaded, setLoaded] = useState(false);\r\n useEffect(() => { setLoaded(true); }, []);\r\n\r\n return (\r\n <div style={{\r\n position: 'relative',\r\n minHeight: '100vh',\r\n fontFamily: \"'Segoe UI', system-ui, -apple-system, sans-serif\",\r\n background: 'linear-gradient(165deg, #fafbfd 0%, #f0f3f8 35%, #eaeff6 65%, #f4f6fa 100%)',\r\n overflowX: 'hidden',\r\n }}>\r\n <AnimatedBG \/>\r\n\r\n {\/* \u0639\u0646\u0627\u0635\u0631 \u0632\u062e\u0631\u0641\u064a\u0629 \u062b\u0627\u0628\u062a\u0629 *\/}\r\n <div style={{ position: 'fixed', top: '8%', right: '3%', width: '380px', height: '380px', borderRadius: '50%', background: 'radial-gradient(circle, rgba(29,45,62,0.045), transparent 70%)', animation: 'pulse 9s infinite', pointerEvents: 'none', zIndex: 0 }} \/>\r\n <div style={{ position: 'fixed', bottom: '12%', left: '2%', width: '320px', height: '320px', borderRadius: '50%', background: 'radial-gradient(circle, rgba(29,45,62,0.035), transparent 70%)', animation: 'pulse 12s infinite 3s', pointerEvents: 'none', zIndex: 0 }} \/>\r\n <div style={{ position: 'fixed', top: '45%', left: '40%', width: '450px', height: '450px', borderRadius: '50%', background: 'radial-gradient(circle, rgba(29,45,62,0.02), transparent 70%)', animation: 'pulse 14s infinite 5s', pointerEvents: 'none', zIndex: 0 }} \/>\r\n\r\n <svg style={{ position: 'fixed', top: '15%', left: '6%', width: '120px', height: '120px', opacity: 0.04, animation: 'spin 40s linear infinite', pointerEvents: 'none', zIndex: 0 }} viewBox=\"0 0 100 100\">\r\n <circle cx=\"50\" cy=\"50\" r=\"45\" fill=\"none\" stroke=\"#1D2D3E\" strokeWidth=\"0.5\" strokeDasharray=\"8 4\" \/>\r\n <circle cx=\"50\" cy=\"50\" r=\"30\" fill=\"none\" stroke=\"#1D2D3E\" strokeWidth=\"0.3\" strokeDasharray=\"4 6\" \/>\r\n <\/svg>\r\n <svg style={{ position: 'fixed', bottom: '20%', right: '8%', width: '90px', height: '90px', opacity: 0.035, animation: 'spin 35s linear infinite reverse', pointerEvents: 'none', zIndex: 0 }} viewBox=\"0 0 100 100\">\r\n <rect x=\"15\" y=\"15\" width=\"70\" height=\"70\" fill=\"none\" stroke=\"#1D2D3E\" strokeWidth=\"0.5\" rx=\"8\" strokeDasharray=\"10 5\" \/>\r\n <\/svg>\r\n\r\n {\/* \u0627\u0644\u0647\u064a\u0631\u0648 *\/}\r\n <header style={{ position: 'relative', zIndex: 2, textAlign: 'center', padding: 'clamp(90px, 14vw, 180px) 20px clamp(50px, 7vw, 90px)' }}>\r\n <div style={{ position: 'absolute', top: '22%', left: '9%', width: '2px', height: '55px', background: 'linear-gradient(180deg, rgba(29,45,62,0.14), transparent)', animation: 'fadeFloat 4.5s infinite' }} \/>\r\n <div style={{ position: 'absolute', top: '18%', right: '11%', width: '9px', height: '9px', borderRadius: '50%', border: '1.5px solid rgba(29,45,62,0.1)', animation: 'float1 6s infinite' }} \/>\r\n <div style={{ position: 'absolute', bottom: '25%', right: '7%', width: '18px', height: '18px', border: '1.5px solid rgba(29,45,62,0.07)', transform: 'rotate(45deg)', animation: 'float2 5.5s infinite 1s' }} \/>\r\n <div style={{ position: 'absolute', top: '40%', left: '16%', width: '12px', height: '12px', borderRadius: '50%', border: '1px solid rgba(29,45,62,0.06)', animation: 'float2 7s infinite 0.5s' }} \/>\r\n <div style={{ position: 'absolute', bottom: '35%', left: '5%', width: '22px', height: '22px', border: '1px solid rgba(29,45,62,0.05)', borderRadius: '4px', animation: 'float1 8s infinite 2s' }} \/>\r\n\r\n <div style={{ opacity: loaded ? 1 : 0, transform: loaded ? 'translateY(0)' : 'translateY(-35px)', transition: 'all 1.3s cubic-bezier(0.22,1,0.36,1) 0.2s' }}>\r\n <div style={{ display: 'inline-flex', alignItems: 'center', gap: '14px', marginBottom: '26px' }}>\r\n <span style={{ width: '45px', height: '1px', background: 'rgba(29,45,62,0.14)' }} \/>\r\n <div style={{ width: '5px', height: '5px', background: '#1D2D3E', borderRadius: '50%', opacity: 0.22 }} \/>\r\n <span style={{ width: '45px', height: '1px', background: 'rgba(29,45,62,0.14)' }} \/>\r\n <\/div>\r\n <h1 style={{ fontSize: 'clamp(40px, 8.5vw, 88px)', fontWeight: 800, color: '#1D2D3E', lineHeight: 1.05, letterSpacing: '-2px', margin: '0 0 22px' }}>Our Services<\/h1>\r\n <p style={{ fontSize: 'clamp(14px, 1.6vw, 18px)', color: 'rgba(29,45,62,0.42)', maxWidth: '540px', margin: '0 auto', lineHeight: 1.85, fontWeight: 400 }}>\r\n Delivering excellence through integrated solutions and operational expertise across every sector we serve\r\n <\/p>\r\n <div style={{ marginTop: '55px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '6px', animation: 'fadeFloat 3s infinite' }}>\r\n <span style={{ fontSize: '10px', letterSpacing: '3.5px', color: 'rgba(29,45,62,0.28)', textTransform: 'uppercase', fontWeight: 600 }}>Scroll<\/span>\r\n <div style={{ width: '1px', height: '30px', background: 'linear-gradient(180deg, rgba(29,45,62,0.28), transparent)' }} \/>\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n {\/* \u0627\u0644\u0642\u0633\u0645 \u0627\u0644\u0623\u0648\u0644 *\/}\r\n <section style={{ position: 'relative', zIndex: 2, padding: '0 clamp(14px, 3vw, 40px)', marginBottom: 'clamp(80px, 10vw, 140px)' }}>\r\n <SectionHead sub=\"Integrated Solutions\" title=\"The Solution Ecosystem\" \/>\r\n <div className=\"eco-bento\">\r\n {ecosystemServices.map((s, i) => <MosaicItem key={i} service={s} num={i+1} delay={i*0.15} \/>)}\r\n <\/div>\r\n <\/section>\r\n\r\n {\/* \u0641\u0627\u0635\u0644 *\/}\r\n <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '20px', margin: '0 auto clamp(60px, 8vw, 100px)', maxWidth: '400px', padding: '0 20px', position: 'relative', zIndex: 2 }}>\r\n <span style={{ flex: 1, height: '1px', background: 'linear-gradient(90deg, transparent, rgba(29,45,62,0.1), transparent)' }} \/>\r\n <div style={{ width: '8px', height: '8px', border: '1.5px solid rgba(29,45,62,0.12)', transform: 'rotate(45deg)' }} \/>\r\n <div style={{ width: '5px', height: '5px', background: 'rgba(29,45,62,0.1)', borderRadius: '50%' }} \/>\r\n <div style={{ width: '8px', height: '8px', border: '1.5px solid rgba(29,45,62,0.12)', transform: 'rotate(45deg)' }} \/>\r\n <span style={{ flex: 1, height: '1px', background: 'linear-gradient(90deg, transparent, rgba(29,45,62,0.1), transparent)' }} \/>\r\n <\/div>\r\n\r\n {\/* \u0627\u0644\u0642\u0633\u0645 \u0627\u0644\u062b\u0627\u0646\u064a *\/}\r\n <section style={{ position: 'relative', zIndex: 2, padding: '0 clamp(14px, 3vw, 40px)', marginBottom: 'clamp(60px, 8vw, 100px)' }}>\r\n <SectionHead sub=\"Industry Sectors\" title=\"Sectors Operational\" \/>\r\n <div className=\"sec-bento\">\r\n {sectorServices.map((s, i) => <MosaicItem key={i} service={s} num={i+4} delay={i*0.12} \/>)}\r\n <\/div>\r\n <\/section>\r\n\r\n {\/* \u062a\u0630\u064a\u064a\u0644 *\/}\r\n <footer style={{ position: 'relative', zIndex: 2, textAlign: 'center', padding: '70px 20px 45px' }}>\r\n <div style={{ display: 'inline-flex', alignItems: 'center', gap: '14px', opacity: 0.14 }}>\r\n <span style={{ width: '35px', height: '1px', background: '#1D2D3E' }} \/>\r\n <div style={{ width: '7px', height: '7px', border: '1.5px solid #1D2D3E', transform: 'rotate(45deg)' }} \/>\r\n <span style={{ width: '35px', height: '1px', background: '#1D2D3E' }} \/>\r\n <\/div>\r\n <p style={{ fontSize: '12px', color: 'rgba(29,45,62,0.22)', marginTop: '18px', letterSpacing: '2px', fontWeight: 500 }}>EMAAR AL WATAN \u00a9 2025<\/p>\r\n <\/footer>\r\n <\/div>\r\n );\r\n }\r\n\r\n const rootElement = document.getElementById('root');\r\n if (rootElement) {\r\n try {\r\n const root = createRoot(rootElement);\r\n root.render(<App \/>);\r\n } catch (err) {\r\n console.error('\u0641\u0634\u0644 \u0627\u0644\u062a\u0635\u064a\u064a\u0631:', err);\r\n rootElement.innerHTML = `<div class=\"error-fallback\"><h3>\u26a0\ufe0f \u062d\u062f\u062b \u062e\u0637\u0623<\/h3><p>${err.message}<\/p><\/div>`;\r\n }\r\n }\r\n })();\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Emaar Al Watan \u2014 \u062e\u062f\u0645\u0627\u062a \u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629 (\u0639\u0631\u0636 \u0645\u0645\u064a\u0632)<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"unboxed","site-sidebar-style":"unboxed","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"enabled","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-542","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/emaaralwatan.com\/ar\/wp-json\/wp\/v2\/pages\/542","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/emaaralwatan.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/emaaralwatan.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/emaaralwatan.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/emaaralwatan.com\/ar\/wp-json\/wp\/v2\/comments?post=542"}],"version-history":[{"count":48,"href":"https:\/\/emaaralwatan.com\/ar\/wp-json\/wp\/v2\/pages\/542\/revisions"}],"predecessor-version":[{"id":2317,"href":"https:\/\/emaaralwatan.com\/ar\/wp-json\/wp\/v2\/pages\/542\/revisions\/2317"}],"wp:attachment":[{"href":"https:\/\/emaaralwatan.com\/ar\/wp-json\/wp\/v2\/media?parent=542"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}