{"id":15825,"date":"2025-09-30T23:57:53","date_gmt":"2025-09-30T20:57:53","guid":{"rendered":"https:\/\/wp.appsbunches.com\/Keswat-farah\/?page_id=15825"},"modified":"2025-10-18T23:27:19","modified_gmt":"2025-10-18T20:27:19","slug":"%d8%a7%d9%84%d9%87%d9%8a%d9%83%d9%84-%d8%a7%d9%84%d8%aa%d9%86%d8%b8%d9%8a%d9%85%d9%8a","status":"publish","type":"page","link":"https:\/\/keswatfarah.sa\/en\/%d8%a7%d9%84%d9%87%d9%8a%d9%83%d9%84-%d8%a7%d9%84%d8%aa%d9%86%d8%b8%d9%8a%d9%85%d9%8a\/","title":{"rendered":"\u0627\u0644\u0647\u064a\u0643\u0644 \u0627\u0644\u062a\u0646\u0638\u064a\u0645\u064a"},"content":{"rendered":"
\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\u0627\u0644\u0647\u064a\u0643\u0644 \u0627\u0644\u062a\u0646\u0638\u064a\u0645\u064a \u00b7 \u0646\u0633\u062e\u0629 \u0645\u0648\u062d\u0651\u064e\u062f\u0629 \u0627\u0644\u0639\u0631\u0648\u0636<\/title>\r\n\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@400;500;700&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n :root{\r\n --teal-600:#0f8a88; --teal-500:#2aa4a3; --teal:#3aa6a3; --navy:#1a2547; --bg:#ffffff;\r\n --pill-radius:999rem;\r\n\r\n --line-w:2px; --arrow-w:1.6px;\r\n --col-gap:54px;\r\n\r\n --gap-board-ceo: 80px;\r\n --gap-top-grid: 76px;\r\n --bar-offset: 28px;\r\n\r\n --gap-head-first:32px;\r\n --gap-sub-sub:24px;\r\n\r\n --shadow:0 8px 22px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05);\r\n\r\n --pillW: 320px; \/* desktop (\u064a\u064f\u0636\u0628\u0637 \u0645\u0646 JS) *\/\r\n --mPillW: 280px; \/* mobile (\u064a\u064f\u0636\u0628\u0637 \u0645\u0646 JS) *\/\r\n\r\n \/* mobile vars *\/\r\n --hub-gap-mobile: 40px;\r\n --end-inset-mobile: 8px;\r\n }\r\n\r\n *{box-sizing:border-box}\r\n html,body{ height:100%; }\r\n body{\r\n margin:0; background:var(--bg); color:#0b0b0b;\r\n font-family:'Tajawal',system-ui,-apple-system,\"Segoe UI\",Roboto,Arial,sans-serif;\r\n font-size:16px; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;\r\n }\r\n\r\n .org{ max-width:1120px; margin:40px auto 80px; padding:0 16px; position:relative; }\r\n\r\n \/* ===== SVG overlay ===== *\/\r\n .org svg.org-arrows{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:5; }\r\n .lineTeal{ stroke:var(--teal); stroke-width:var(--arrow-w); fill:none; vector-effect:non-scaling-stroke; stroke-linecap:square; }\r\n .lineNavy{ stroke:var(--navy); stroke-width:var(--arrow-w); fill:none; vector-effect:non-scaling-stroke; stroke-linecap:square; }\r\n\r\n \/* ===== Hint (\u063a\u064a\u0631 \u0642\u0627\u0628\u0644 \u0644\u0644\u0636\u063a\u0637) ===== *\/\r\n .org-hint{\r\n display:flex; align-items:center; gap:8px; justify-content:center;\r\n max-width:max-content; margin:8px auto 16px; padding:10px 14px;\r\n border-radius:999rem; font-weight:600; color:var(--navy);\r\n background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(251,255,254,.9));\r\n border:1px solid #e6f0f0; box-shadow:0 8px 22px rgba(16,24,40,.06);\r\n position:relative; z-index:6; overflow:hidden; user-select:none; pointer-events:none;\r\n }\r\n .org-hint .emph{ color:var(--teal-600); }\r\n .org-hint .shine{\r\n position:absolute; inset:0;\r\n background:linear-gradient(110deg, transparent 0%, rgba(58,166,163,.08) 20%, transparent 40%);\r\n transform:translateX(-100%); animation:hintShine 2.6s ease-in-out infinite;\r\n }\r\n @keyframes hintShine{\r\n 0%{transform:translateX(-100%)} 60%{transform:translateX(100%)} 100%{transform:translateX(100%)}\r\n }\r\n\r\n \/* ===== Pills ===== *\/\r\n .pill{\r\n display:inline-flex; align-items:center; justify-content:center;\r\n padding:14px 28px; border-radius:var(--pill-radius);\r\n line-height:1.35; text-align:center; white-space:nowrap;\r\n font-weight:700;\r\n transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease, opacity .22s ease;\r\n touch-action:manipulation; -webkit-tap-highlight-color:transparent;\r\n }\r\n .pill--top{ color:#fff; background:linear-gradient(135deg,var(--teal-500),var(--teal-600)); border:none; box-shadow:0 2px 0 rgba(0,0,0,.04); min-width:auto; }\r\n .pill--sec{ color:var(--teal-600); background:#f4fbfb; border:2px solid var(--teal); }\r\n .pill--sub{ color:var(--navy); background:#fff; border:2px solid var(--navy); font-weight:500; }\r\n\r\n .pill:hover,.pill:focus-visible{ transform:translateY(-2px); box-shadow:var(--shadow); outline:none; }\r\n .pill:active{ transform:translateY(-1px) scale(.99); }\r\n .pill--sec:hover{ border-color:#0f8a88; background:#ecfafa; }\r\n .pill--sub:hover{ border-color:#0e1b3a; background:#f8fbff; }\r\n .pill[tabindex=\"0\"]{ cursor:default; }\r\n\r\n .cta-pulse{ \r\n \/* animation:pulseHalo 1.6s ease-in-out infinite;*\/\r\n }\r\n @keyframes pulseHalo{\r\n 0%{ box-shadow:0 0 0 0 rgba(42,164,163,.36); }\r\n 70%{ box-shadow:0 0 0 14px rgba(42,164,163,0); }\r\n 100%{ box-shadow:0 0 0 0 rgba(42,164,163,0); }\r\n }\r\n\r\n .top{\r\n display:flex; flex-direction:column; align-items:center;\r\n gap:var(--gap-board-ceo);\r\n margin-bottom:var(--gap-top-grid);\r\n position:relative;\r\n }\r\n\r\n \/* ===== Grid ===== *\/\r\n .grid{\r\n position:relative;\r\n display:grid;\r\n grid-template-columns:repeat(5,1fr);\r\n gap:0 var(--col-gap); align-items:start;\r\n }\r\n .grid::before{\r\n content:\"\"; position:absolute; inset-inline:0; top:calc(var(--bar-offset) * -1);\r\n height:var(--line-w); background:var(--teal); border-radius:2px;\r\n }\r\n .col{ display:flex; flex-direction:column; align-items:center; }\r\n .col .pill--sec + .pill--sub{ margin-top: var(--gap-head-first); }\r\n .col .pill--sub + .pill--sub{ margin-top: var(--gap-sub-sub); }\r\n\r\n \/* >>> Desktop: \u062e\u0644\u064a \u0627\u0644\u0634\u0628\u0643\u0629 \u0639\u0644\u0649 \u0642\u062f \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0648\u0641\u064a \u0627\u0644\u0646\u0635 + \u0642\u0635 \u0644\u0648 \u0637\u0648\u0644 \u0642\u0648\u064a *\/\r\n @media (min-width: 769px){\r\n .grid{ grid-template-columns:repeat(5, max-content); justify-content:center; column-gap:var(--col-gap); }\r\n .pill{ width: var(--pillW); overflow:hidden; text-overflow:ellipsis; }\r\n }\r\n\r\n \/* ===== Reveal flow ===== *\/\r\n .is-hidden{ display:none !important; }\r\n .fade-in{ animation: fadeSlide .2s ease-out both; }\r\n @keyframes fadeSlide{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }\r\n\r\n .is-clickable{ cursor:pointer; }\r\n .pill:focus-visible{ outline:2px solid #0f8a88; outline-offset:2px; }\r\n\r\n \/* ===== Mobile ===== *\/\r\n @media (max-width:768px){\r\n :root{\r\n --arrow-w:1.6px;\r\n --gap-board-ceo: 120px;\r\n --gap-top-grid: 180px;\r\n --gap-head-first:28px;\r\n --gap-sub-sub:20px;\r\n }\r\n\r\n body{ font-size:13px; }\r\n .org{ margin:22px auto 44px; padding:0 12px; }\r\n\r\n .grid{ display:grid; grid-template-columns:1fr; gap:16px; padding-bottom:8px; overflow:visible; }\r\n .grid::before{ display:none; }\r\n\r\n .col{\r\n position:relative; width:100%; align-items:stretch;\r\n background:linear-gradient(180deg,#ffffff 0%, #fbfffe 100%);\r\n border:1px solid #e6f0f0; border-radius:16px;\r\n padding:16px 12px 12px;\r\n box-shadow:0 10px 24px rgba(16,24,40,.05), 0 1px 4px rgba(16,24,40,.05);\r\n }\r\n\r\n .pill{\r\n padding:12px 16px; border-radius:18px; line-height:1.2; font-weight:600;\r\n font-size:clamp(11.5px, 3.2vw, 13px);\r\n justify-content:center; text-align:center; padding-inline:16px;\r\n width: var(--mPillW); max-width:100%; margin-inline:auto;\r\n white-space:nowrap; overflow:hidden; text-overflow:ellipsis;\r\n }\r\n\r\n .pill--top{ box-shadow:0 8px 20px rgba(15,138,136,.10), 0 2px 6px rgba(0,0,0,.04); }\r\n\r\n \/* \u0623\u062e\u0641\u064a \u0627\u0644\u0623\u0633\u0647\u0645 \u0639\u0644\u0649 \u0627\u0644\u0645\u0648\u0628\u0627\u064a\u0644 *\/\r\n .org svg.org-arrows{ display:none !important; }\r\n\r\n \/* \u062d\u062c\u0645 \u0627\u0644\u0647\u064a\u0646\u062a \u0639\u0644\u0649 \u0627\u0644\u0645\u0648\u0628\u0627\u064a\u0644 *\/\r\n .org-hint{ font-size:13px; padding:8px 12px; margin:6px auto 12px; }\r\n }\r\n\r\n @media (max-width:420px){\r\n .pill{ font-size:clamp(11px, 4vw, 12.5px); padding:10px 12px; }\r\n .col{ border-radius:12px; padding:12px 10px; }\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce){\r\n .pill{ transition:none; animation:none !important; }\r\n .org-hint .shine{ animation:none !important; }\r\n }\r\n\r\n \/*555*\/\r\n \/* Mobile horizontal slider (scoped, no borders, keep scrollbar) *\/\r\n @media (max-width: 768px) {\r\n .elementor-element-abae2f1 { --peek: 32px; }\r\n\r\n .elementor-element-abae2f1 .org .grid {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 8px;\r\n padding-inline: 12px var(--peek);\r\n overflow-x: auto; \/* \u0646\u0633\u064a\u0628 \u0634\u0631\u064a\u0637 \u0627\u0644\u0633\u062d\u0628 *\/\r\n overflow-y: visible;\r\n scroll-snap-type: x mandatory;\r\n scroll-padding-inline: 12px;\r\n -webkit-overflow-scrolling: touch;\r\n\r\n \/* \u0628\u062f\u0648\u0646 \u0623\u064a \u0645\u0627\u0633\u0643\u0627\u062a\/\u0641\u0650\u064a\u062f *\/\r\n mask-image: none;\r\n -webkit-mask-image: none;\r\n }\r\n\r\n .elementor-element-abae2f1 .org .grid .col {\r\n flex: 0 0 auto;\r\n min-width: calc(100% - var(--peek)); \/* \u064a\u0638\u0647\u0631 \u062c\u0632\u0621 \u0645\u0646 \u0627\u0644\u0643\u0627\u0631\u062a \u0627\u0644\u0644\u064a \u0628\u0639\u062f\u0647 *\/\r\n scroll-snap-align: start;\r\n\r\n \/* \u0625\u0632\u0627\u0644\u0629 \u0627\u0644\u0625\u0637\u0627\u0631\/\u0627\u0644\u0638\u0644\/\u0627\u0644\u062e\u0644\u0641\u064a\u0629 *\/\r\n border: none !important;\r\n box-shadow: none !important;\r\n background: transparent !important;\r\n }\r\n\r\n \/* \u0625\u062e\u0641\u0627\u0621 \u0627\u0644\u0623\u0633\u0647\u0645 \u0639\u0644\u0649 \u0627\u0644\u0645\u0648\u0628\u0627\u064a\u0644 \u0641\u0642\u0637 *\/\r\n .elementor-element-abae2f1 .org svg.org-arrows {\r\n display: none !important;\r\n }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n <main class=\"org\" id=\"org\" aria-label=\"\u0627\u0644\u0647\u064a\u0643\u0644 \u0627\u0644\u062a\u0646\u0638\u064a\u0645\u064a\">\r\n\r\n <!-- Hint -->\r\n <div class=\"org-hint\" role=\"note\" aria-label=\"\u062a\u0644\u0645\u064a\u062d\">\r\n <span aria-hidden=\"true\">\u2728<\/span>\r\n <span>\u0627\u0628\u062f\u0623 \u0628\u0627\u0644\u0636\u063a\u0637 \u0639\u0644\u0649 <b class=\"emph\">\u00ab \u0627\u0644\u062c\u0645\u0639\u064a\u0629 \u0627\u0644\u0639\u0645\u0648\u0645\u064a\u0629\u00bb<\/b> \u0644\u0627\u0633\u062a\u0639\u0631\u0627\u0636 \u0627\u0644\u0647\u064a\u0643\u0644 \u062e\u0637\u0648\u0629 \u0628\u062e\u0637\u0648\u0629<\/span>\r\n <span class=\"shine\" aria-hidden=\"true\"><\/span>\r\n <\/div>\r\n\r\n <!-- SVG Overlay \u0644\u0644\u0623\u0633\u0647\u0645 (\u0645\u062e\u0641\u064a \u0639\u0644\u0649 \u0627\u0644\u0645\u0648\u0628\u0627\u064a\u0644) -->\r\n <svg class=\"org-arrows\" viewbox=\"0 0 100 100\" preserveaspectratio=\"none\" aria-hidden=\"true\">\r\n <defs>\r\n <marker id=\"arrowThinTeal\" markerwidth=\"8\" markerheight=\"8\" refx=\"8\" refy=\"4\" orient=\"auto\" markerunits=\"strokeWidth\">\r\n <path d=\"M0,0 L8,4 L0,8 z\" fill=\"#3aa6a3\"><\/path>\r\n <\/marker>\r\n <marker id=\"arrowThinNavy\" markerwidth=\"8\" markerheight=\"8\" refx=\"8\" refy=\"4\" orient=\"auto\" markerunits=\"strokeWidth\">\r\n <path d=\"M0,0 L8,4 L0,8 z\" fill=\"#1a2547\"><\/path>\r\n <\/marker>\r\n <\/defs>\r\n\r\n <!-- \u062c\u062f\u064a\u062f: \u0633\u0647\u0645 \u0627\u0644\u062c\u0645\u0639\u064a\u0629 \u2192 \u0627\u0644\u0645\u062c\u0644\u0633 -->\r\n <g id=\"g-assembly-board\"><\/g>\r\n\r\n <g id=\"g-board-ceo\"><\/g>\r\n <g id=\"g-ceo-bar\"><\/g>\r\n <g id=\"g-bar-heads\"><\/g>\r\n <g id=\"g-chain-cols\"><\/g>\r\n <g id=\"g-ceo-heads-mobile\"><\/g>\r\n <\/svg>\r\n\r\n <div class=\"top\">\r\n <!-- \u062c\u062f\u064a\u062f: \u0627\u0644\u062c\u0645\u0639\u064a\u0629 \u0627\u0644\u0639\u0645\u0648\u0645\u064a\u0629 -->\r\n <div class=\"pill pill--top\" id=\"assembly\" tabindex=\"0\">\u0627\u0644\u062c\u0645\u0639\u064a\u0629 \u0627\u0644\u0639\u0645\u0648\u0645\u064a\u0629<\/div>\r\n\r\n <div class=\"pill pill--top\" id=\"board\" tabindex=\"0\">\u0645\u062c\u0644\u0633 \u0627\u0644\u0625\u062f\u0627\u0631\u0629<\/div>\r\n <div class=\"pill pill--top\" id=\"ceo\" tabindex=\"0\">\u0627\u0644\u0645\u062f\u064a\u0631 \u0627\u0644\u062a\u0646\u0641\u064a\u0630\u064a<\/div>\r\n <\/div>\r\n\r\n <section class=\"grid\" id=\"grid\">\r\n <article class=\"col\">\r\n <div class=\"pill pill--sec\" tabindex=\"0\">\u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u062e\u062f\u0645\u0627\u062a \u0627\u0644\u0645\u0634\u062a\u0631\u0643\u0629<\/div>\r\n <div class=\"pill pill--sub\" tabindex=\"0\">\u0642\u0633\u0645 \u0627\u0644\u0645\u0648\u0627\u0631\u062f \u0627\u0644\u0628\u0634\u0631\u064a\u0629<\/div>\r\n <div class=\"pill pill--sub\" tabindex=\"0\">\u0642\u0633\u0645 \u0627\u0644\u0634\u0624\u0648\u0646 \u0627\u0644\u0642\u0627\u0646\u0648\u0646\u064a\u0629<\/div>\r\n <div class=\"pill pill--sub\" tabindex=\"0\">\u0627\u0644\u0642\u0633\u0645 \u0627\u0644\u062a\u0642\u0646\u064a<\/div>\r\n <\/article>\r\n\r\n <article class=\"col\">\r\n <div class=\"pill pill--sec\" tabindex=\"0\">\u0627\u0644\u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0645\u0627\u0644\u064a\u0629<\/div>\r\n <div class=\"pill pill--sub\" tabindex=\"0\">\u0642\u0633\u0645 \u0627\u0644\u0645\u062d\u0627\u0633\u0628\u0629<\/div>\r\n <div class=\"pill pill--sub\" tabindex=\"0\">\u0642\u0633\u0645 \u0627\u0644\u0645\u0634\u062a\u0631\u064a\u0627\u062a<\/div>\r\n <\/article>\r\n\r\n <article class=\"col\">\r\n <div class=\"pill pill--sec\" tabindex=\"0\">\u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0639\u0645\u0644\u064a\u0627\u062a<\/div>\r\n <div class=\"pill pill--sub\" tabindex=\"0\">\u0642\u0633\u0645 \u0627\u0644\u062a\u0634\u063a\u064a\u0644<\/div>\r\n <div class=\"pill pill--sub\" tabindex=\"0\">\u0642\u0633\u0645 \u0627\u0644\u062f\u0639\u0645 \u0627\u0644\u0644\u0648\u062c\u0633\u062a\u064a<\/div>\r\n <\/article>\r\n\r\n <article class=\"col\">\r\n <div class=\"pill pill--sec\" tabindex=\"0\">\u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u062a\u0648\u0627\u0635\u0644 \u0627\u0644\u0645\u0624\u0633\u0633\u064a<\/div>\r\n <div class=\"pill pill--sub\" tabindex=\"0\">\u0642\u0633\u0645 \u0627\u0644\u062a\u0633\u0648\u064a\u0642<\/div>\r\n <div class=\"pill pill--sub\" tabindex=\"0\">\u0642\u0633\u0645 \u0627\u0644\u0639\u0644\u0627\u0642\u0627\u062a \u0648\u0627\u0644\u0634\u0631\u0627\u0643\u0627\u062a<\/div>\r\n <div class=\"pill pill--sub\" tabindex=\"0\">\u0642\u0633\u0645 \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0645\u062d\u062a\u0648\u0649<\/div>\r\n <\/article>\r\n\r\n <article class=\"col\">\r\n <div class=\"pill pill--sec\" tabindex=\"0\">\u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639<\/div>\r\n <div class=\"pill pill--sub\" tabindex=\"0\">\u0642\u0633\u0645 \u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639 \u0627\u0644\u0645\u0648\u0633\u0645\u064a\u0629<\/div>\r\n <div class=\"pill pill--sub\" tabindex=\"0\">\u0642\u0633\u0645 \u0627\u0644\u0645\u0639\u0627\u0631\u0636 \u0627\u0644\u062e\u0627\u0631\u062c\u064a\u0629<\/div>\r\n <\/article>\r\n <\/section>\r\n <\/main>\r\n\r\n<!-- (1) \u062a\u0648\u062d\u064a\u062f \u0627\u0644\u0639\u0631\u0636 + \u0636\u0645\u0627\u0646 \u0627\u0644\u062a\u0645\u0631\u0643\u0632 \u0639\u0644\u0649 \u0627\u0644\u0648\u064a\u0628 -->\r\n<script>\r\n(function(){\r\n const orgEl = document.getElementById('org');\r\n const grid = document.getElementById('grid');\r\n\r\n function getPills(){ return Array.from(document.querySelectorAll('.pill')); }\r\n\r\n function computeMaxTextWidth(){\r\n const meas = document.createElement('div');\r\n meas.style.position='absolute';\r\n meas.style.visibility='hidden';\r\n meas.style.whiteSpace='nowrap';\r\n meas.style.display='inline-block';\r\n meas.style.width='auto';\r\n document.body.appendChild(meas);\r\n let max = 0;\r\n getPills().forEach(el=>{\r\n meas.className = el.className; \/\/ \u0646\u0641\u0633 padding\/border\r\n meas.textContent = el.textContent.replace(\/\\s+\/g,' ').trim();\r\n max = Math.max(max, Math.ceil(meas.offsetWidth));\r\n });\r\n document.body.removeChild(meas);\r\n return max || 320;\r\n }\r\n\r\n function applyUniformWidth(){\r\n const isMobile = matchMedia('(max-width: 768px)').matches;\r\n const textW = computeMaxTextWidth();\r\n\r\n if (isMobile){\r\n document.documentElement.style.setProperty('--mPillW', textW + 'px');\r\n if (window.__org_schedule_draw__) window.__org_schedule_draw__();\r\n return;\r\n }\r\n\r\n \/\/ \u0623\u0642\u0635\u0649 \u0639\u0631\u0636 \u0645\u0633\u0645\u0648\u062d \u0644\u0643\u0644 \u0639\u0645\u0648\u062f = \u0639\u0631\u0636 \u0627\u0644\u0640container \u0646\u0627\u0642\u0635 \u0627\u0644\u0641\u0648\u0627\u0635\u0644 \/ \u0639\u062f\u062f \u0627\u0644\u0623\u0639\u0645\u062f\u0629\r\n const cols = grid ? grid.querySelectorAll('.col').length : 5;\r\n const csRoot = getComputedStyle(document.documentElement);\r\n const gap = parseFloat(csRoot.getPropertyValue('--col-gap')) || 0;\r\n const orgW = orgEl.getBoundingClientRect().width;\r\n const perColMax = Math.floor((orgW - gap * (cols - 1)) \/ cols);\r\n\r\n const finalW = Math.min(textW, perColMax);\r\n document.documentElement.style.setProperty('--pillW', finalW + 'px');\r\n\r\n if (window.__org_schedule_draw__) window.__org_schedule_draw__();\r\n }\r\n\r\n if (document.readyState==='loading'){\r\n document.addEventListener('DOMContentLoaded', applyUniformWidth, {once:true});\r\n } else { applyUniformWidth(); }\r\n\r\n if (document.fonts && document.fonts.ready){ document.fonts.ready.then(applyUniformWidth); }\r\n addEventListener('resize', applyUniformWidth);\r\n})();\r\n<\/script>\r\n\r\n<!-- (2) \u0631\u0633\u0645 \u0627\u0644\u0623\u0633\u0647\u0645 \u2014 \u0645\u062a\u0648\u0642\u0641 \u0639\u0644\u0649 \u0627\u0644\u0645\u0648\u0628\u0627\u064a\u0644 + (\u062c\u062f\u064a\u062f) \u0627\u0644\u062c\u0645\u0639\u064a\u0629 \u2192 \u0627\u0644\u0645\u062c\u0644\u0633 -->\r\n<script>\r\n(function(){\r\n const org = document.getElementById('org');\r\n const grid = document.getElementById('grid');\r\n const assembly = document.getElementById('assembly'); \/\/ \u062c\u062f\u064a\u062f\r\n const board= document.getElementById('board');\r\n const ceo = document.getElementById('ceo');\r\n\r\n const svg = org.querySelector('svg.org-arrows');\r\n const gAssemblyBoard = svg.querySelector('#g-assembly-board'); \/\/ \u062c\u062f\u064a\u062f\r\n const gBoardCeo = svg.querySelector('#g-board-ceo');\r\n const gCeoBar = svg.querySelector('#g-ceo-bar');\r\n const gBarHeads = svg.querySelector('#g-bar-heads');\r\n const gChainCols = svg.querySelector('#g-chain-cols');\r\n const gCeoHeadsMb = svg.querySelector('#g-ceo-heads-mobile');\r\n\r\n function getBarOffset(){\r\n const v = getComputedStyle(document.documentElement).getPropertyValue('--bar-offset') || '28px';\r\n const n = parseFloat(v);\r\n return Number.isFinite(n) ? n : 28;\r\n }\r\n function isShown(el){\r\n if (!el) return false;\r\n if (el.classList.contains('is-hidden')) return false;\r\n const cs = getComputedStyle(el);\r\n if (cs.display === 'none' || cs.visibility === 'hidden') return false;\r\n const r = el.getBoundingClientRect();\r\n return r.width > 0 && r.height > 0;\r\n }\r\n function toSvgPercent(x, y){\r\n const r = org.getBoundingClientRect();\r\n return [ (x - r.left) \/ r.width * 100, (y - r.top) \/ r.height * 100 ];\r\n }\r\n function pathEl(cls, markerId){\r\n const p = document.createElementNS('http:\/\/www.w3.org\/2000\/svg','path');\r\n p.setAttribute('class', cls);\r\n if (markerId) p.setAttribute('marker-end', `url(#${markerId})`);\r\n return p;\r\n }\r\n function clear(node){ while(node.firstChild) node.removeChild(node.firstChild); }\r\n\r\n function draw(){\r\n const isMobile = matchMedia('(max-width: 768px)').matches;\r\n\r\n \/\/ \u0639\u0644\u0649 \u0627\u0644\u0645\u0648\u0628\u0627\u064a\u0644: \u0644\u0627 \u0623\u0633\u0647\u0645\r\n if (isMobile){\r\n clear(gAssemblyBoard);\r\n clear(gBoardCeo); clear(gCeoBar); clear(gBarHeads); clear(gChainCols); clear(gCeoHeadsMb);\r\n return;\r\n }\r\n\r\n const BAR_OFFSET = getBarOffset();\r\n const END_INSET = 4;\r\n\r\n clear(gAssemblyBoard);\r\n clear(gBoardCeo); clear(gCeoBar); clear(gBarHeads); clear(gChainCols); clear(gCeoHeadsMb);\r\n\r\n \/\/ (\u062c\u062f\u064a\u062f) Assembly \u2192 Board\r\n if (isShown(assembly) && isShown(board)){\r\n const ar = assembly.getBoundingClientRect();\r\n const br = board.getBoundingClientRect();\r\n const x = ar.left + ar.width\/2;\r\n const [sx1, sy1] = toSvgPercent(x, ar.bottom + END_INSET);\r\n const [sx2, sy2] = toSvgPercent(x, br.top - END_INSET);\r\n const p = pathEl('lineTeal','arrowThinTeal');\r\n p.setAttribute('d', `M ${sx1} ${sy1} L ${sx2} ${sy2}`);\r\n gAssemblyBoard.appendChild(p);\r\n }\r\n\r\n \/\/ Board \u2192 CEO\r\n if (isShown(board) && isShown(ceo)){\r\n const br = board.getBoundingClientRect(), cr = ceo.getBoundingClientRect();\r\n const x = br.left + br.width\/2;\r\n const [sx1, sy1] = toSvgPercent(x, br.bottom + END_INSET);\r\n const [sx2, sy2] = toSvgPercent(x, cr.top - END_INSET);\r\n const p = pathEl('lineTeal','arrowThinTeal');\r\n p.setAttribute('d', `M ${sx1} ${sy1} L ${sx2} ${sy2}`);\r\n gBoardCeo.appendChild(p);\r\n }\r\n\r\n \/\/ CEO \u2192 bar\r\n if(isShown(ceo) && isShown(grid)){\r\n const cr = ceo.getBoundingClientRect(), gr = grid.getBoundingClientRect();\r\n const x = cr.left + cr.width\/2;\r\n const yBar = gr.top - BAR_OFFSET;\r\n const [sx1, sy1] = toSvgPercent(x, cr.bottom + END_INSET);\r\n const [sx2, sy2] = toSvgPercent(x, yBar);\r\n const p = pathEl('lineTeal','arrowThinTeal');\r\n p.setAttribute('d', `M ${sx1} ${sy1} L ${sx2} ${sy2}`);\r\n gCeoBar.appendChild(p);\r\n }\r\n\r\n \/\/ Bar \u2192 heads\r\n const heads = Array.from(grid.querySelectorAll('.col .pill--sec')).filter(isShown);\r\n if(heads.length && isShown(ceo)){\r\n const gr = grid.getBoundingClientRect();\r\n const yBar = gr.top - BAR_OFFSET;\r\n heads.forEach(h=>{\r\n const r = h.getBoundingClientRect();\r\n const x = r.left + r.width\/2;\r\n const [sx1, sy1] = toSvgPercent(x, yBar);\r\n const [sx2, sy2] = toSvgPercent(x, r.top - END_INSET);\r\n const p = pathEl('lineTeal','arrowThinTeal');\r\n p.setAttribute('d', `M ${sx1} ${sy1} L ${sx2} ${sy2}`);\r\n gBarHeads.appendChild(p);\r\n });\r\n }\r\n\r\n \/\/ \u062f\u0627\u062e\u0644 \u0627\u0644\u0623\u0639\u0645\u062f\u0629\r\n const cols = Array.from(grid.querySelectorAll('.col'));\r\n cols.forEach(col=>{\r\n const parts = Array.from(col.querySelectorAll('.pill--sec, .pill--sub')).filter(isShown);\r\n if(parts.length < 2) return;\r\n const headRect = parts[0].getBoundingClientRect();\r\n const centerX = headRect.left + headRect.width\/2;\r\n for(let i=0;i<parts.length-1;i++){\r\n const a = parts[i].getBoundingClientRect();\r\n const b = parts[i+1].getBoundingClientRect();\r\n const [sx1, sy1] = toSvgPercent(centerX, a.bottom + END_INSET);\r\n const [sx2, sy2] = toSvgPercent(centerX, b.top - END_INSET);\r\n const p = pathEl('lineNavy','arrowThinNavy');\r\n p.setAttribute('d', `M ${sx1} ${sy1} L ${sx2} ${sy2}`);\r\n gChainCols.appendChild(p);\r\n }\r\n });\r\n }\r\n\r\n let ticking = false;\r\n function schedule(){ if(!ticking){ ticking = true; requestAnimationFrame(()=>{ ticking=false; draw(); }); } }\r\n\r\n if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', draw, {once:true}); }\r\n else { draw(); }\r\n\r\n if (document.fonts && document.fonts.ready){ document.fonts.ready.then(schedule); }\r\n\r\n addEventListener('resize', schedule);\r\n addEventListener('scroll', schedule, {passive:true});\r\n new ResizeObserver(schedule).observe(org);\r\n\r\n window.__org_schedule_draw__ = schedule;\r\n})();\r\n<\/script>\r\n\r\n<!-- (3) \u0627\u0644\u062a\u062a\u0627\u0628\u0639 \u0648\u0627\u0644\u0623\u0646\u064a\u0645\u064a\u0634\u0646 \u2014 \u0627\u0644\u062c\u0645\u0639\u064a\u0629 \u062a\u064f\u0638\u0647\u0631 \u0627\u0644\u0645\u062c\u0644\u0633 -->\r\n<script>\r\n(function(){\r\n const grid = document.getElementById('grid');\r\n const assembly = document.getElementById('assembly'); \/\/ \u062c\u062f\u064a\u062f\r\n const board= document.getElementById('board');\r\n const ceo = document.getElementById('ceo');\r\n\r\n const heads = Array.from(grid.querySelectorAll('.col .pill--sec'));\r\n const subsByCol = Array.from(grid.querySelectorAll('.col')).map(col=>Array.from(col.querySelectorAll('.pill--sub')));\r\n\r\n function hide(el){ el.classList.add('is-hidden'); el.setAttribute('aria-hidden','true'); }\r\n function showSmooth(el, delay=0){\r\n el.classList.remove('is-hidden');\r\n el.removeAttribute('aria-hidden');\r\n const anim = el.animate([\r\n {opacity:0, transform:'translateY(8px) scale(.98)'},\r\n {opacity:1, transform:'none'}\r\n ], { duration:280, easing:'cubic-bezier(.2,.7,.2,1)', delay });\r\n anim.onfinish = ()=>{ el.style.opacity=''; el.style.transform=''; if(window.__org_schedule_draw__) window.__org_schedule_draw__(); };\r\n return anim;\r\n }\r\n\r\n function markClickable(el, on){\r\n if (on){\r\n el.classList.add('is-clickable','cta-pulse');\r\n el.setAttribute('role','button'); el.setAttribute('tabindex','0');\r\n el.setAttribute('aria-pressed','false');\r\n } else {\r\n el.classList.remove('is-clickable','cta-pulse');\r\n el.removeAttribute('role'); el.removeAttribute('aria-pressed');\r\n }\r\n }\r\n function refreshArrows(){ window.__org_schedule_draw__ && window.__org_schedule_draw__(); }\r\n\r\n \/\/ \u0627\u0644\u0628\u062f\u0627\u064a\u0629: \u0646\u062e\u0641\u064a \u0627\u0644\u0645\u062c\u0644\u0633 + \u0627\u0644\u0645\u062f\u064a\u0631 \u0627\u0644\u062a\u0646\u0641\u064a\u0630\u064a + \u0627\u0644\u0625\u062f\u0627\u0631\u0627\u062a + \u0627\u0644\u0623\u0642\u0633\u0627\u0645\r\n hide(board); \/\/ \u062c\u062f\u064a\u062f\r\n hide(ceo);\r\n heads.forEach(hide);\r\n subsByCol.forEach(list=>list.forEach(hide));\r\n\r\n \/\/ \u0627\u0644\u062c\u0645\u0639\u064a\u0629 \u0642\u0627\u0628\u0644\u0629 \u0644\u0644\u0636\u063a\u0637\r\n markClickable(assembly, true);\r\n refreshArrows();\r\n\r\n \/\/ \u0627\u0644\u062c\u0645\u0639\u064a\u0629 \u2192 \u062a\u064f\u0638\u0647\u0631 \u0627\u0644\u0645\u062c\u0644\u0633\r\n function onAssembly(){\r\n markClickable(assembly, false);\r\n showSmooth(board);\r\n markClickable(board, true);\r\n refreshArrows();\r\n }\r\n assembly.addEventListener('click', onAssembly);\r\n assembly.addEventListener('keydown', (e)=>{ if(e.key==='Enter' || e.key===' ') onAssembly(); });\r\n\r\n \/\/ \u0627\u0644\u0645\u062c\u0644\u0633 \u2192 \u064a\u064f\u0638\u0647\u0631 \u0627\u0644\u0645\u062f\u064a\u0631 \u0627\u0644\u062a\u0646\u0641\u064a\u0630\u064a (\u0632\u064a \u0645\u0627 \u0643\u0627\u0646)\r\n function onBoard(){\r\n markClickable(board, false);\r\n showSmooth(ceo);\r\n markClickable(ceo, true);\r\n refreshArrows();\r\n }\r\n board.addEventListener('click', onBoard);\r\n board.addEventListener('keydown', (e)=>{ if(e.key==='Enter' || e.key===' ') onBoard(); });\r\n\r\n \/\/ \u0627\u0644\u0645\u062f\u064a\u0631 \u0627\u0644\u062a\u0646\u0641\u064a\u0630\u064a \u2192 \u0631\u0624\u0648\u0633 \u0627\u0644\u0625\u062f\u0627\u0631\u0627\u062a\r\n function onCEO(){\r\n markClickable(ceo, false);\r\n heads.forEach((h,i)=> showSmooth(h, i*60));\r\n heads.forEach(h=>markClickable(h, true));\r\n refreshArrows();\r\n }\r\n ceo.addEventListener('click', onCEO);\r\n ceo.addEventListener('keydown', (e)=>{ if(e.key==='Enter' || e.key===' ') onCEO(); });\r\n\r\n \/\/ \u0643\u0644 \u0625\u062f\u0627\u0631\u0629 \u2192 \u0623\u0642\u0633\u0627\u0645\u0647\u0627\r\n heads.forEach((head, idx)=>{\r\n function onHeadOpenAll(){\r\n const list = subsByCol[idx];\r\n const hidden = list.filter(el => el.classList.contains('is-hidden'));\r\n hidden.forEach((el,i)=> showSmooth(el, i*70));\r\n markClickable(head, false);\r\n refreshArrows();\r\n head.removeEventListener('click', onHeadOpenAll);\r\n head.removeEventListener('keydown', keyHandler);\r\n }\r\n function keyHandler(e){ if(e.key==='Enter' || e.key===' ') onHeadOpenAll(); }\r\n head.addEventListener('click', onHeadOpenAll);\r\n head.addEventListener('keydown', keyHandler);\r\n });\r\n})();\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9a0bf16 elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile e-flex e-con-boxed e-con e-parent\" data-id=\"9a0bf16\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-93f8f7a elementor-widget elementor-widget-html\" data-id=\"93f8f7a\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!doctype html>\r\n<html lang=\"ar\" dir=\"rtl\">\r\n<head>\r\n<meta charset=\"utf-8\" \/>\r\n<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\" \/>\r\n<title>\u0627\u0644\u0647\u064a\u0643\u0644 \u0627\u0644\u062a\u0646\u0638\u064a\u0645\u064a \u00b7 \u0646\u0633\u062e\u0629 \u0645\u0648\u062d\u0651\u064e\u062f\u0629 \u0627\u0644\u0639\u0631\u0648\u0636<\/title>\r\n\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@400;500;700&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n :root{\r\n --teal-600:#0f8a88; --teal-500:#2aa4a3; --teal:#3aa6a3; --navy:#1a2547; --bg:#ffffff;\r\n --pill-radius:999rem;\r\n\r\n --line-w:2px; --arrow-w:1.6px;\r\n --col-gap:54px;\r\n\r\n --gap-board-ceo: 80px;\r\n --gap-top-grid: 76px;\r\n --bar-offset: 28px;\r\n\r\n --gap-head-first:32px;\r\n --gap-sub-sub:24px;\r\n\r\n --shadow:0 8px 22px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05);\r\n\r\n --pillW: 320px; \/* desktop (\u064a\u064f\u0636\u0628\u0637 \u0645\u0646 JS) *\/\r\n --mPillW: 280px; \/* mobile (\u064a\u064f\u0636\u0628\u0637 \u0645\u0646 JS) *\/\r\n\r\n \/* mobile vars *\/\r\n --hub-gap-mobile: 40px;\r\n --end-inset-mobile: 8px;\r\n }\r\n\r\n *{box-sizing:border-box}\r\n html,body{ height:100%; }\r\n body{\r\n margin:0; background:var(--bg); color:#0b0b0b;\r\n font-family:'Tajawal',system-ui,-apple-system,\"Segoe UI\",Roboto,Arial,sans-serif;\r\n font-size:16px; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;\r\n }\r\n\r\n .org{ max-width:1120px; margin:40px auto 80px; padding:0 16px; position:relative; }\r\n\r\n \/* ===== SVG overlay ===== *\/\r\n .org svg.org-arrows{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:5; }\r\n .lineTeal{ stroke:var(--teal); stroke-width:var(--arrow-w); fill:none; vector-effect:non-scaling-stroke; stroke-linecap:square; }\r\n .lineNavy{ stroke:var(--navy); stroke-width:var(--arrow-w); fill:none; vector-effect:non-scaling-stroke; stroke-linecap:square; }\r\n\r\n \/* ===== Hint (\u063a\u064a\u0631 \u0642\u0627\u0628\u0644 \u0644\u0644\u0636\u063a\u0637) ===== *\/\r\n .org-hint{\r\n display:flex; align-items:center; gap:8px; justify-content:center;\r\n max-width:max-content; margin:8px auto 16px; padding:10px 14px;\r\n border-radius:999rem; font-weight:600; color:var(--navy);\r\n background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(251,255,254,.9));\r\n border:1px solid #e6f0f0; box-shadow:0 8px 22px rgba(16,24,40,.06);\r\n position:relative; z-index:6; overflow:hidden; user-select:none; pointer-events:none;\r\n }\r\n .org-hint .emph{ color:var(--teal-600); }\r\n .org-hint .shine{\r\n position:absolute; inset:0;\r\n background:linear-gradient(110deg, transparent 0%, rgba(58,166,163,.08) 20%, transparent 40%);\r\n transform:translateX(-100%); animation:hintShine 2.6s ease-in-out infinite;\r\n }\r\n @keyframes hintShine{\r\n 0%{transform:translateX(-100%)} 60%{transform:translateX(100%)} 100%{transform:translateX(100%)}\r\n }\r\n\r\n \/* ===== Pills ===== *\/\r\n .pill{\r\n display:inline-flex; align-items:center; justify-content:center;\r\n padding:14px 28px; border-radius:var(--pill-radius);\r\n line-height:1.35; text-align:center; white-space:nowrap;\r\n font-weight:700;\r\n transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease, opacity .22s ease;\r\n touch-action:manipulation; -webkit-tap-highlight-color:transparent;\r\n }\r\n .pill--top{ color:#fff; background:linear-gradient(135deg,var(--teal-500),var(--teal-600)); border:none; box-shadow:0 2px 0 rgba(0,0,0,.04); min-width:auto; }\r\n .pill--sec{ color:var(--teal-600); background:#f4fbfb; border:2px solid var(--teal); }\r\n .pill--sub{ color:var(--navy); background:#fff; border:2px solid var(--navy); font-weight:500; }\r\n\r\n .pill:hover,.pill:focus-visible{ transform:translateY(-2px); box-shadow:var(--shadow); outline:none; }\r\n .pill:active{ transform:translateY(-1px) scale(.99); }\r\n .pill--sec:hover{ border-color:#0f8a88; background:#ecfafa; }\r\n .pill--sub:hover{ border-color:#0e1b3a; background:#f8fbff; }\r\n .pill[tabindex=\"0\"]{ cursor:default; }\r\n\r\n .cta-pulse{ \r\n \/* animation:pulseHalo 1.6s ease-in-out infinite;*\/\r\n }\r\n @keyframes pulseHalo{\r\n 0%{ box-shadow:0 0 0 0 rgba(42,164,163,.36); }\r\n 70%{ box-shadow:0 0 0 14px rgba(42,164,163,0); }\r\n 100%{ box-shadow:0 0 0 0 rgba(42,164,163,0); }\r\n }\r\n\r\n .top{\r\n display:flex; flex-direction:column; align-items:center;\r\n gap:var(--gap-board-ceo);\r\n margin-bottom:var(--gap-top-grid);\r\n position:relative;\r\n }\r\n\r\n \/* ===== Grid ===== *\/\r\n .grid{\r\n position:relative;\r\n display:grid;\r\n grid-template-columns:repeat(5,1fr);\r\n gap:0 var(--col-gap); align-items:start;\r\n }\r\n .grid::before{\r\n content:\"\"; position:absolute; inset-inline:0; top:calc(var(--bar-offset) * -1);\r\n height:var(--line-w); background:var(--teal); border-radius:2px;\r\n }\r\n .col{ display:flex; flex-direction:column; align-items:center; }\r\n .col .pill--sec + .pill--sub{ margin-top: var(--gap-head-first); }\r\n .col .pill--sub + .pill--sub{ margin-top: var(--gap-sub-sub); }\r\n\r\n \/* >>> Desktop: \u062e\u0644\u064a \u0627\u0644\u0634\u0628\u0643\u0629 \u0639\u0644\u0649 \u0642\u062f \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0648\u0641\u064a \u0627\u0644\u0646\u0635 + \u0642\u0635 \u0644\u0648 \u0637\u0648\u0644 \u0642\u0648\u064a *\/\r\n @media (min-width: 769px){\r\n .grid{ grid-template-columns:repeat(5, max-content); justify-content:center; column-gap:var(--col-gap); }\r\n .pill{ width: var(--pillW); overflow:hidden; text-overflow:ellipsis; }\r\n }\r\n\r\n \/* ===== Reveal flow ===== *\/\r\n .is-hidden{ display:none !important; }\r\n .fade-in{ animation: fadeSlide .2s ease-out both; }\r\n @keyframes fadeSlide{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }\r\n\r\n .is-clickable{ cursor:pointer; }\r\n .pill:focus-visible{ outline:2px solid #0f8a88; outline-offset:2px; }\r\n\r\n \/* ===== Mobile ===== *\/\r\n @media (max-width:768px){\r\n :root{\r\n --arrow-w:1.6px;\r\n --gap-board-ceo: 120px;\r\n --gap-top-grid: 180px;\r\n --gap-head-first:28px;\r\n --gap-sub-sub:20px;\r\n }\r\n\r\n body{ font-size:13px; }\r\n .org{ margin:22px auto 44px; padding:0 12px; }\r\n\r\n .grid{ display:grid; grid-template-columns:1fr; gap:16px; padding-bottom:8px; overflow:visible; }\r\n .grid::before{ display:none; }\r\n\r\n .col{\r\n position:relative; width:100%; align-items:stretch;\r\n background:linear-gradient(180deg,#ffffff 0%, #fbfffe 100%);\r\n border:1px solid #e6f0f0; border-radius:16px;\r\n padding:16px 12px 12px;\r\n box-shadow:0 10px 24px rgba(16,24,40,.05), 0 1px 4px rgba(16,24,40,.05);\r\n }\r\n\r\n .pill{\r\n padding:12px 16px; border-radius:18px; line-height:1.2; font-weight:600;\r\n font-size:clamp(11.5px, 3.2vw, 13px);\r\n justify-content:center; text-align:center; padding-inline:16px;\r\n width: var(--mPillW); max-width:100%; margin-inline:auto;\r\n white-space:nowrap; overflow:hidden; text-overflow:ellipsis;\r\n }\r\n\r\n .pill--top{ box-shadow:0 8px 20px rgba(15,138,136,.10), 0 2px 6px rgba(0,0,0,.04); }\r\n\r\n \/* \u0623\u062e\u0641\u064a \u0627\u0644\u0623\u0633\u0647\u0645 \u0639\u0644\u0649 \u0627\u0644\u0645\u0648\u0628\u0627\u064a\u0644 *\/\r\n .org svg.org-arrows{ display:none !important; }\r\n\r\n \/* \u062d\u062c\u0645 \u0627\u0644\u0647\u064a\u0646\u062a \u0639\u0644\u0649 \u0627\u0644\u0645\u0648\u0628\u0627\u064a\u0644 *\/\r\n .org-hint{ font-size:13px; padding:8px 12px; margin:6px auto 12px; }\r\n }\r\n\r\n @media (max-width:420px){\r\n .pill{ font-size:clamp(11px, 4vw, 12.5px); padding:10px 12px; }\r\n .col{ border-radius:12px; padding:12px 10px; }\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce){\r\n .pill{ transition:none; animation:none !important; }\r\n .org-hint .shine{ animation:none !important; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n <main class=\"org\" id=\"org\" aria-label=\"\u0627\u0644\u0647\u064a\u0643\u0644 \u0627\u0644\u062a\u0646\u0638\u064a\u0645\u064a\">\r\n\r\n <!-- Hint -->\r\n <div class=\"org-hint\" role=\"note\" aria-label=\"\u062a\u0644\u0645\u064a\u062d\">\r\n <span aria-hidden=\"true\">\u2728<\/span>\r\n <span>\u0627\u0628\u062f\u0623 \u0628\u0627\u0644\u0636\u063a\u0637 \u0639\u0644\u0649 <b class=\"emph\">\u00ab\u0645\u062c\u0644\u0633 \u0627\u0644\u0625\u062f\u0627\u0631\u0629\u00bb<\/b> \u0644\u0627\u0633\u062a\u0639\u0631\u0627\u0636 \u0627\u0644\u0647\u064a\u0643\u0644 \u062e\u0637\u0648\u0629 \u0628\u062e\u0637\u0648\u0629<\/span>\r\n <span class=\"shine\" aria-hidden=\"true\"><\/span>\r\n <\/div>\r\n\r\n <!-- SVG Overlay \u0644\u0644\u0623\u0633\u0647\u0645 (\u0645\u062e\u0641\u064a \u0639\u0644\u0649 \u0627\u0644\u0645\u0648\u0628\u0627\u064a\u0644) -->\r\n <svg class=\"org-arrows\" viewbox=\"0 0 100 100\" preserveaspectratio=\"none\" aria-hidden=\"true\">\r\n <defs>\r\n <marker id=\"arrowThinTeal\" markerwidth=\"8\" markerheight=\"8\" refx=\"8\" refy=\"4\" orient=\"auto\" markerunits=\"strokeWidth\">\r\n <path d=\"M0,0 L8,4 L0,8 z\" fill=\"#3aa6a3\"><\/path>\r\n <\/marker>\r\n <marker id=\"arrowThinNavy\" markerwidth=\"8\" markerheight=\"8\" refx=\"8\" refy=\"4\" orient=\"auto\" markerunits=\"strokeWidth\">\r\n <path d=\"M0,0 L8,4 L0,8 z\" fill=\"#1a2547\"><\/path>\r\n <\/marker>\r\n <\/defs>\r\n\r\n <g id=\"g-board-ceo\"><\/g>\r\n <g id=\"g-ceo-bar\"><\/g>\r\n <g id=\"g-bar-heads\"><\/g>\r\n <g id=\"g-chain-cols\"><\/g>\r\n <g id=\"g-ceo-heads-mobile\"><\/g>\r\n <\/svg>\r\n\r\n <div class=\"top\">\r\n <div class=\"pill pill--top\" id=\"board\" tabindex=\"0\">\u0645\u062c\u0644\u0633 \u0627\u0644\u0625\u062f\u0627\u0631\u0629<\/div>\r\n <div class=\"pill pill--top\" id=\"ceo\" tabindex=\"0\">\u0627\u0644\u0645\u062f\u064a\u0631 \u0627\u0644\u062a\u0646\u0641\u064a\u0630\u064a<\/div>\r\n <\/div>\r\n\r\n <section class=\"grid\" id=\"grid\">\r\n <article class=\"col\">\r\n <div class=\"pill pill--sec\" tabindex=\"0\">\u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u062e\u062f\u0645\u0627\u062a \u0627\u0644\u0645\u0634\u062a\u0631\u0643\u0629<\/div>\r\n <div class=\"pill pill--sub\" tabindex=\"0\">\u0642\u0633\u0645 \u0627\u0644\u0645\u0648\u0627\u0631\u062f \u0627\u0644\u0628\u0634\u0631\u064a\u0629<\/div>\r\n <div class=\"pill pill--sub\" tabindex=\"0\">\u0642\u0633\u0645 \u0627\u0644\u0634\u0624\u0648\u0646 \u0627\u0644\u0642\u0627\u0646\u0648\u0646\u064a\u0629<\/div>\r\n <div class=\"pill pill--sub\" tabindex=\"0\">\u0627\u0644\u0642\u0633\u0645 \u0627\u0644\u062a\u0642\u0646\u064a<\/div>\r\n <\/article>\r\n\r\n <article class=\"col\">\r\n <div class=\"pill pill--sec\" tabindex=\"0\">\u0627\u0644\u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0645\u0627\u0644\u064a\u0629<\/div>\r\n <div class=\"pill pill--sub\" tabindex=\"0\">\u0642\u0633\u0645 \u0627\u0644\u0645\u062d\u0627\u0633\u0628\u0629<\/div>\r\n <div class=\"pill pill--sub\" tabindex=\"0\">\u0642\u0633\u0645 \u0627\u0644\u0645\u0634\u062a\u0631\u064a\u0627\u062a<\/div>\r\n <\/article>\r\n\r\n <article class=\"col\">\r\n <div class=\"pill pill--sec\" tabindex=\"0\">\u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0639\u0645\u0644\u064a\u0627\u062a<\/div>\r\n <div class=\"pill pill--sub\" tabindex=\"0\">\u0642\u0633\u0645 \u0627\u0644\u062a\u0634\u063a\u064a\u0644<\/div>\r\n <div class=\"pill pill--sub\" tabindex=\"0\">\u0642\u0633\u0645 \u0627\u0644\u062f\u0639\u0645 \u0627\u0644\u0644\u0648\u062c\u0633\u062a\u064a<\/div>\r\n <\/article>\r\n\r\n <article class=\"col\">\r\n <div class=\"pill pill--sec\" tabindex=\"0\">\u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u062a\u0648\u0627\u0635\u0644 \u0627\u0644\u0645\u0624\u0633\u0633\u064a<\/div>\r\n <div class=\"pill pill--sub\" tabindex=\"0\">\u0642\u0633\u0645 \u0627\u0644\u062a\u0633\u0648\u064a\u0642<\/div>\r\n <div class=\"pill pill--sub\" tabindex=\"0\">\u0642\u0633\u0645 \u0627\u0644\u0639\u0644\u0627\u0642\u0627\u062a \u0648\u0627\u0644\u0634\u0631\u0627\u0643\u0627\u062a<\/div>\r\n <div class=\"pill pill--sub\" tabindex=\"0\">\u0642\u0633\u0645 \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0645\u062d\u062a\u0648\u0649<\/div>\r\n <\/article>\r\n\r\n <article class=\"col\">\r\n <div class=\"pill pill--sec\" tabindex=\"0\">\u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639<\/div>\r\n <div class=\"pill pill--sub\" tabindex=\"0\">\u0642\u0633\u0645 \u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639 \u0627\u0644\u0645\u0648\u0633\u0645\u064a\u0629<\/div>\r\n <div class=\"pill pill--sub\" tabindex=\"0\">\u0642\u0633\u0645 \u0627\u0644\u0645\u0639\u0627\u0631\u0636 \u0627\u0644\u062e\u0627\u0631\u062c\u064a\u0629<\/div>\r\n <\/article>\r\n <\/section>\r\n <\/main>\r\n\r\n<!-- (1) \u062a\u0648\u062d\u064a\u062f \u0627\u0644\u0639\u0631\u0636 + \u0636\u0645\u0627\u0646 \u0627\u0644\u062a\u0645\u0631\u0643\u0632 \u0639\u0644\u0649 \u0627\u0644\u0648\u064a\u0628 -->\r\n<script>\r\n(function(){\r\n const orgEl = document.getElementById('org');\r\n const grid = document.getElementById('grid');\r\n\r\n function getPills(){ return Array.from(document.querySelectorAll('.pill')); }\r\n\r\n function computeMaxTextWidth(){\r\n const meas = document.createElement('div');\r\n meas.style.position='absolute';\r\n meas.style.visibility='hidden';\r\n meas.style.whiteSpace='nowrap';\r\n meas.style.display='inline-block';\r\n meas.style.width='auto';\r\n document.body.appendChild(meas);\r\n let max = 0;\r\n getPills().forEach(el=>{\r\n meas.className = el.className; \/\/ \u0646\u0641\u0633 padding\/border\r\n meas.textContent = el.textContent.replace(\/\\s+\/g,' ').trim();\r\n max = Math.max(max, Math.ceil(meas.offsetWidth));\r\n });\r\n document.body.removeChild(meas);\r\n return max || 320;\r\n }\r\n\r\n function applyUniformWidth(){\r\n const isMobile = matchMedia('(max-width: 768px)').matches;\r\n const textW = computeMaxTextWidth();\r\n\r\n if (isMobile){\r\n document.documentElement.style.setProperty('--mPillW', textW + 'px');\r\n if (window.__org_schedule_draw__) window.__org_schedule_draw__();\r\n return;\r\n }\r\n\r\n \/\/ \u0623\u0642\u0635\u0649 \u0639\u0631\u0636 \u0645\u0633\u0645\u0648\u062d \u0644\u0643\u0644 \u0639\u0645\u0648\u062f = \u0639\u0631\u0636 \u0627\u0644\u0640container \u0646\u0627\u0642\u0635 \u0627\u0644\u0641\u0648\u0627\u0635\u0644 \/ \u0639\u062f\u062f \u0627\u0644\u0623\u0639\u0645\u062f\u0629\r\n const cols = grid ? grid.querySelectorAll('.col').length : 5;\r\n const csRoot = getComputedStyle(document.documentElement);\r\n const gap = parseFloat(csRoot.getPropertyValue('--col-gap')) || 0;\r\n const orgW = orgEl.getBoundingClientRect().width;\r\n const perColMax = Math.floor((orgW - gap * (cols - 1)) \/ cols);\r\n\r\n const finalW = Math.min(textW, perColMax);\r\n document.documentElement.style.setProperty('--pillW', finalW + 'px');\r\n\r\n if (window.__org_schedule_draw__) window.__org_schedule_draw__();\r\n }\r\n\r\n if (document.readyState==='loading'){\r\n document.addEventListener('DOMContentLoaded', applyUniformWidth, {once:true});\r\n } else { applyUniformWidth(); }\r\n\r\n if (document.fonts && document.fonts.ready){ document.fonts.ready.then(applyUniformWidth); }\r\n addEventListener('resize', applyUniformWidth);\r\n})();\r\n<\/script>\r\n\r\n<!-- (2) \u0631\u0633\u0645 \u0627\u0644\u0623\u0633\u0647\u0645 \u2014 \u0645\u062a\u0648\u0642\u0641 \u0639\u0644\u0649 \u0627\u0644\u0645\u0648\u0628\u0627\u064a\u0644 -->\r\n<script>\r\n(function(){\r\n const org = document.getElementById('org');\r\n const grid = document.getElementById('grid');\r\n const board= document.getElementById('board');\r\n const ceo = document.getElementById('ceo');\r\n\r\n const svg = org.querySelector('svg.org-arrows');\r\n const gBoardCeo = svg.querySelector('#g-board-ceo');\r\n const gCeoBar = svg.querySelector('#g-ceo-bar');\r\n const gBarHeads = svg.querySelector('#g-bar-heads');\r\n const gChainCols = svg.querySelector('#g-chain-cols');\r\n const gCeoHeadsMb = svg.querySelector('#g-ceo-heads-mobile');\r\n\r\n function getBarOffset(){\r\n const v = getComputedStyle(document.documentElement).getPropertyValue('--bar-offset') || '28px';\r\n const n = parseFloat(v);\r\n return Number.isFinite(n) ? n : 28;\r\n }\r\n function isShown(el){\r\n if (!el) return false;\r\n if (el.classList.contains('is-hidden')) return false;\r\n const cs = getComputedStyle(el);\r\n if (cs.display === 'none' || cs.visibility === 'hidden') return false;\r\n const r = el.getBoundingClientRect();\r\n return r.width > 0 && r.height > 0;\r\n }\r\n function toSvgPercent(x, y){\r\n const r = org.getBoundingClientRect();\r\n return [ (x - r.left) \/ r.width * 100, (y - r.top) \/ r.height * 100 ];\r\n }\r\n function pathEl(cls, markerId){\r\n const p = document.createElementNS('http:\/\/www.w3.org\/2000\/svg','path');\r\n p.setAttribute('class', cls);\r\n if (markerId) p.setAttribute('marker-end', `url(#${markerId})`);\r\n return p;\r\n }\r\n function clear(node){ while(node.firstChild) node.removeChild(node.firstChild); }\r\n\r\n function draw(){\r\n const isMobile = matchMedia('(max-width: 768px)').matches;\r\n\r\n \/\/ \u0639\u0644\u0649 \u0627\u0644\u0645\u0648\u0628\u0627\u064a\u0644: \u0644\u0627 \u0623\u0633\u0647\u0645\r\n if (isMobile){\r\n clear(gBoardCeo); clear(gCeoBar); clear(gBarHeads); clear(gChainCols); clear(gCeoHeadsMb);\r\n return;\r\n }\r\n\r\n const BAR_OFFSET = getBarOffset();\r\n const END_INSET = 4;\r\n\r\n clear(gBoardCeo); clear(gCeoBar); clear(gBarHeads); clear(gChainCols); clear(gCeoHeadsMb);\r\n\r\n \/\/ Board \u2192 CEO\r\n if (isShown(board) && isShown(ceo)){\r\n const br = board.getBoundingClientRect(), cr = ceo.getBoundingClientRect();\r\n const x = br.left + br.width\/2;\r\n const [sx1, sy1] = toSvgPercent(x, br.bottom + END_INSET);\r\n const [sx2, sy2] = toSvgPercent(x, cr.top - END_INSET);\r\n const p = pathEl('lineTeal','arrowThinTeal');\r\n p.setAttribute('d', `M ${sx1} ${sy1} L ${sx2} ${sy2}`);\r\n gBoardCeo.appendChild(p);\r\n }\r\n\r\n \/\/ CEO \u2192 bar\r\n if(isShown(ceo) && isShown(grid)){\r\n const cr = ceo.getBoundingClientRect(), gr = grid.getBoundingClientRect();\r\n const x = cr.left + cr.width\/2;\r\n const yBar = gr.top - BAR_OFFSET;\r\n const [sx1, sy1] = toSvgPercent(x, cr.bottom + END_INSET);\r\n const [sx2, sy2] = toSvgPercent(x, yBar);\r\n const p = pathEl('lineTeal','arrowThinTeal');\r\n p.setAttribute('d', `M ${sx1} ${sy1} L ${sx2} ${sy2}`);\r\n gCeoBar.appendChild(p);\r\n }\r\n\r\n \/\/ Bar \u2192 heads\r\n const heads = Array.from(grid.querySelectorAll('.col .pill--sec')).filter(isShown);\r\n if(heads.length && isShown(ceo)){\r\n const gr = grid.getBoundingClientRect();\r\n const yBar = gr.top - BAR_OFFSET;\r\n heads.forEach(h=>{\r\n const r = h.getBoundingClientRect();\r\n const x = r.left + r.width\/2;\r\n const [sx1, sy1] = toSvgPercent(x, yBar);\r\n const [sx2, sy2] = toSvgPercent(x, r.top - END_INSET);\r\n const p = pathEl('lineTeal','arrowThinTeal');\r\n p.setAttribute('d', `M ${sx1} ${sy1} L ${sx2} ${sy2}`);\r\n gBarHeads.appendChild(p);\r\n });\r\n }\r\n\r\n \/\/ \u062f\u0627\u062e\u0644 \u0627\u0644\u0623\u0639\u0645\u062f\u0629\r\n const cols = Array.from(grid.querySelectorAll('.col'));\r\n cols.forEach(col=>{\r\n const parts = Array.from(col.querySelectorAll('.pill--sec, .pill--sub')).filter(isShown);\r\n if(parts.length < 2) return;\r\n const headRect = parts[0].getBoundingClientRect();\r\n const centerX = headRect.left + headRect.width\/2;\r\n for(let i=0;i<parts.length-1;i++){\r\n const a = parts[i].getBoundingClientRect();\r\n const b = parts[i+1].getBoundingClientRect();\r\n const [sx1, sy1] = toSvgPercent(centerX, a.bottom + END_INSET);\r\n const [sx2, sy2] = toSvgPercent(centerX, b.top - END_INSET);\r\n const p = pathEl('lineNavy','arrowThinNavy');\r\n p.setAttribute('d', `M ${sx1} ${sy1} L ${sx2} ${sy2}`);\r\n gChainCols.appendChild(p);\r\n }\r\n });\r\n }\r\n\r\n let ticking = false;\r\n function schedule(){ if(!ticking){ ticking = true; requestAnimationFrame(()=>{ ticking=false; draw(); }); } }\r\n\r\n if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', draw, {once:true}); }\r\n else { draw(); }\r\n\r\n if (document.fonts && document.fonts.ready){ document.fonts.ready.then(schedule); }\r\n\r\n addEventListener('resize', schedule);\r\n addEventListener('scroll', schedule, {passive:true});\r\n new ResizeObserver(schedule).observe(org);\r\n\r\n window.__org_schedule_draw__ = schedule;\r\n})();\r\n<\/script>\r\n\r\n<!-- (3) \u0627\u0644\u062a\u062a\u0627\u0628\u0639 \u0648\u0627\u0644\u0623\u0646\u064a\u0645\u064a\u0634\u0646 -->\r\n<script>\r\n(function(){\r\n const grid = document.getElementById('grid');\r\n const board= document.getElementById('board');\r\n const ceo = document.getElementById('ceo');\r\n\r\n const heads = Array.from(grid.querySelectorAll('.col .pill--sec'));\r\n const subsByCol = Array.from(grid.querySelectorAll('.col')).map(col=>Array.from(col.querySelectorAll('.pill--sub')));\r\n\r\n function hide(el){ el.classList.add('is-hidden'); el.setAttribute('aria-hidden','true'); }\r\n function showSmooth(el, delay=0){\r\n el.classList.remove('is-hidden');\r\n el.removeAttribute('aria-hidden');\r\n const anim = el.animate([\r\n {opacity:0, transform:'translateY(8px) scale(.98)'},\r\n {opacity:1, transform:'none'}\r\n ], { duration:280, easing:'cubic-bezier(.2,.7,.2,1)', delay });\r\n anim.onfinish = ()=>{ el.style.opacity=''; el.style.transform=''; if(window.__org_schedule_draw__) window.__org_schedule_draw__(); };\r\n return anim;\r\n }\r\n\r\n function markClickable(el, on){\r\n if (on){\r\n el.classList.add('is-clickable','cta-pulse');\r\n el.setAttribute('role','button'); el.setAttribute('tabindex','0');\r\n el.setAttribute('aria-pressed','false');\r\n } else {\r\n el.classList.remove('is-clickable','cta-pulse');\r\n el.removeAttribute('role'); el.removeAttribute('aria-pressed');\r\n }\r\n }\r\n function refreshArrows(){ window.__org_schedule_draw__ && window.__org_schedule_draw__(); }\r\n\r\n hide(ceo);\r\n heads.forEach(hide);\r\n subsByCol.forEach(list=>list.forEach(hide));\r\n markClickable(board, true);\r\n refreshArrows();\r\n\r\n function onBoard(){\r\n markClickable(board, false);\r\n showSmooth(ceo);\r\n markClickable(ceo, true);\r\n }\r\n board.addEventListener('click', onBoard);\r\n board.addEventListener('keydown', (e)=>{ if(e.key==='Enter' || e.key===' ') onBoard(); });\r\n\r\n function onCEO(){\r\n markClickable(ceo, false);\r\n heads.forEach((h,i)=> showSmooth(h, i*60));\r\n heads.forEach(h=>markClickable(h, true));\r\n }\r\n ceo.addEventListener('click', onCEO);\r\n ceo.addEventListener('keydown', (e)=>{ if(e.key==='Enter' || e.key===' ') onCEO(); });\r\n\r\n heads.forEach((head, idx)=>{\r\n function onHeadOpenAll(){\r\n const list = subsByCol[idx];\r\n const hidden = list.filter(el => el.classList.contains('is-hidden'));\r\n hidden.forEach((el,i)=> showSmooth(el, i*70));\r\n markClickable(head, false);\r\n refreshArrows();\r\n head.removeEventListener('click', onHeadOpenAll);\r\n head.removeEventListener('keydown', keyHandler);\r\n }\r\n function keyHandler(e){ if(e.key==='Enter' || e.key===' ') onHeadOpenAll(); }\r\n head.addEventListener('click', onHeadOpenAll);\r\n head.addEventListener('keydown', keyHandler);\r\n });\r\n})();\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4c33198 elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile e-flex e-con-boxed e-con e-parent\" data-id=\"4c33198\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9ebd0e4 elementor-widget elementor-widget-spacer\" data-id=\"9ebd0e4\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\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<div class=\"elementor-element elementor-element-6dd7943 elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile e-flex e-con-boxed e-con e-parent\" data-id=\"6dd7943\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-25a8981 elementor-widget elementor-widget-html\" data-id=\"25a8981\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!doctype html>\r\n<html lang=\"ar\" dir=\"rtl\">\r\n<head>\r\n<meta charset=\"utf-8\" \/>\r\n<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\" \/>\r\n<title>\u0627\u0644\u0647\u064a\u0643\u0644 \u0627\u0644\u062a\u0646\u0638\u064a\u0645\u064a<\/title>\r\n\r\n<!-- \u062e\u0637 Tajawal -->\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@400;500;700&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n :root{\r\n --teal-600:#0f8a88; \/* \u062a\u062f\u0631\u0651\u062c \u0623\u0639\u0644\u0649 \u0627\u0644\u062d\u0628\u0648\u0628 *\/\r\n --teal-500:#2aa4a3;\r\n --teal:#3aa6a3; \/* \u0644\u0648\u0646 \u0627\u0644\u062e\u0637\u0648\u0637 \u0648\u062d\u062f\u0648\u062f \u0627\u0644\u0645\u0633\u062a\u0648\u0649 \u0627\u0644\u062b\u0627\u0646\u064a *\/\r\n --navy:#1a2547; \/* \u062d\u062f\u0648\u062f \u0627\u0644\u0645\u0633\u062a\u0648\u0649 \u0627\u0644\u062b\u0627\u0644\u062b *\/\r\n --bg:#ffffff;\r\n --pill-radius:999rem;\r\n --line-w:2px;\r\n --col-gap:54px;\r\n --row-gap:18px;\r\n --shadow:0 8px 22px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05);\r\n }\r\n\r\n *{box-sizing:border-box}\r\n body{\r\n margin:0; background:var(--bg);\r\n color:#0b0b0b;\r\n font-family:'Tajawal', system-ui, -apple-system, \"Segoe UI\", Roboto, Arial, sans-serif;\r\n }\r\n\r\n .org{ max-width:1120px; margin:40px auto 80px; padding:0 16px; position:relative; }\r\n\r\n \/* \u0627\u0644\u062d\u0628\u0648\u0628 *\/\r\n .pill{\r\n display:inline-flex; align-items:center; justify-content:center;\r\n padding:14px 28px; border-radius:var(--pill-radius);\r\n line-height:1.35; text-align:center; white-space:pre-line;\r\n font-weight:700; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;\r\n }\r\n .pill--top{\r\n color:#fff; background:linear-gradient(135deg,var(--teal-500),var(--teal-600));\r\n border:none; min-width:260px; box-shadow:0 2px 0 rgba(0,0,0,.04);\r\n }\r\n .pill--sec{ color:var(--teal-600); background:#f4fbfb; border:2px solid var(--teal); }\r\n .pill--sub{ color:var(--navy); background:#fff; border:2px solid var(--navy); font-weight:500; }\r\n\r\n \/* \u062a\u0623\u062b\u064a\u0631\u0627\u062a \u0627\u0644\u062a\u0641\u0627\u0639\u0644 *\/\r\n .pill:hover,\r\n .pill:focus-visible{ transform:translateY(-2px); box-shadow:var(--shadow); outline:none; }\r\n .pill:active{ transform:translateY(-1px) scale(.99); }\r\n .pill--sec:hover{ border-color:#0f8a88; background:#ecfafa; }\r\n .pill--sub:hover{ border-color:#0e1b3a; background:#f8fbff; }\r\n .pill[tabindex=\"0\"]{ cursor:default; } \/* \u0644\u0644\u062a\u0631\u0643\u064a\u0632 \u0628\u0627\u0644\u0643\u064a\u0628\u0648\u0631\u062f *\/\r\n\r\n \/* \u0623\u0639\u0644\u0649 *\/\r\n .top{ display:flex; flex-direction:column; align-items:center; gap:16px; margin-bottom:28px; position:relative; }\r\n\r\n \/* \u0646\u0632\u0648\u0644 \u0645\u0646 \u0627\u0644\u0645\u062f\u064a\u0631 \u0627\u0644\u062a\u0646\u0641\u064a\u0630\u064a *\/\r\n .connector{ position:relative; height:32px; margin-top:4px; }\r\n .connector .v{ position:absolute; inset-inline-start:50%; transform:translateX(-50%); top:0; width:0; height:32px; border-inline-start:var(--line-w) solid var(--teal); }\r\n\r\n \/* \u0634\u0628\u0643\u0629 \u0627\u0644\u0623\u0639\u0645\u062f\u0629 (\u062f\u0650\u0633\u0643 \u062a\u0648\u0628\/\u062a\u0627\u0628\u0644\u062a) *\/\r\n .grid{\r\n position:relative;\r\n display:grid; grid-template-columns:repeat(5,1fr);\r\n gap: var(--row-gap) var(--col-gap); align-items:start;\r\n }\r\n .grid::before{ content:\"\"; position:absolute; inset-inline:0; top:-16px; height:var(--line-w); background:var(--teal); border-radius:2px; }\r\n .col{ display:flex; flex-direction:column; align-items:center; gap:12px; }\r\n .neck{ width:0; height:28px; border-inline-start:var(--line-w) solid var(--teal); margin-top:-6px; }\r\n .branch{ width:0; height:20px; border-inline-start:var(--line-w) solid var(--navy); }\r\n\r\n \/* \u062a\u0645\u064a\u064a\u0632 \u0627\u0644\u0633\u0627\u0642 \u0645\u0639 \u0647\u0648\u0641\u0631 \u0627\u0644\u0639\u0645\u0648\u062f \u0643\u0644\u0647 *\/\r\n .col:hover .neck{ border-color:#0f8a88; }\r\n .col:hover .branch{ border-color:#0e1b3a; }\r\n\r\n \/* \u2014\u2014\u2014\u2014\u2014 \u0645\u0648\u0628\u0627\u064a\u0644: \u0633\u0644\u0627\u064a\u062f\u0631 \u0623\u0641\u0642\u064a Scroll-Snap \u2014\u2014\u2014\u2014\u2014 *\/\r\n @media (max-width: 768px){\r\n :root{ --col-gap:18px; }\r\n .top{ margin-bottom:18px; }\r\n .connector{ display:none; } \/* \u0646\u062e\u0641\u064a \u0627\u0644\u0648\u0635\u0644\u0629 \u0627\u0644\u0637\u0648\u064a\u0644\u0629 *\/\r\n .grid{\r\n grid-auto-flow: column; \/* \u0643\u0644 \u0639\u0645\u0648\u062f \u0647\u0648 \u0643\u0627\u0631\u062a *\/\r\n grid-auto-columns: min(85%, 360px); \/* \u0639\u0631\u0636 \u0627\u0644\u0643\u0627\u0631\u062a *\/\r\n overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;\r\n scroll-snap-type:x mandatory; padding:0 8px 16px;\r\n gap: 0 var(--col-gap);\r\n }\r\n .grid::before{ display:none; } \/* \u0627\u0644\u062e\u0637 \u0627\u0644\u0623\u0641\u0642\u064a \u0641\u0648\u0642 \u0627\u0644\u0623\u0639\u0645\u062f\u0629 *\/\r\n .col{ scroll-snap-align:start; background:#fff; border:1px solid #eef2f6; border-radius:20px; padding:18px 16px; box-shadow:0 1px 0 rgba(0,0,0,.02); }\r\n .neck{ height:16px; margin-top:0; } \/* \u0633\u0627\u0642 \u0623\u0642\u0635\u0631 *\/\r\n }\r\n\r\n \/* \u062a\u0641\u0636\u064a\u0644 \u062a\u0642\u0644\u064a\u0644 \u0627\u0644\u062d\u0631\u0643\u0629 *\/\r\n @media (prefers-reduced-motion: reduce){\r\n .pill{ transition:none; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n <main class=\"org\" aria-label=\"\u0627\u0644\u0647\u064a\u0643\u0644 \u0627\u0644\u062a\u0646\u0638\u064a\u0645\u064a\">\r\n <!-- \u0623\u0639\u0644\u0649 -->\r\n <div class=\"top\">\r\n <div class=\"pill pill--top\" tabindex=\"0\">\u0645\u062c\u0644\u0633 \u0627\u0644\u0625\u062f\u0627\u0631\u0629<\/div>\r\n <div class=\"pill pill--top\" tabindex=\"0\">\u0627\u0644\u0645\u062f\u064a\u0631 \u0627\u0644\u062a\u0646\u0641\u064a\u0630\u064a<\/div>\r\n <\/div>\r\n\r\n <!-- \u0627\u0644\u0623\u0639\u0645\u062f\u0629 \u0627\u0644\u062e\u0645\u0633\u0629 -->\r\n <div class=\"connector\" aria-hidden=\"true\"><span class=\"v\"><\/span><\/div>\r\n\r\n <section class=\"grid\">\r\n <!-- 1) \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u062e\u062f\u0645\u0627\u062a \u0627\u0644\u0645\u0634\u062a\u0631\u0643\u0629 -->\r\n <article class=\"col\">\r\n <span class=\"neck\" aria-hidden=\"true\"><\/span>\r\n <div class=\"pill pill--sec\" tabindex=\"0\">\u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u062e\u062f\u0645\u0627\u062a<br>\u0627\u0644\u0645\u0634\u062a\u0631\u0643\u0629<\/div>\r\n <span class=\"branch\" aria-hidden=\"true\"><\/span>\r\n <div class=\"pill pill--sub\" tabindex=\"0\">\u0642\u0633\u0645 \u0627\u0644\u0645\u0648\u0627\u0631\u062f<br>\u0627\u0644\u0628\u0634\u0631\u064a\u0629<\/div>\r\n <div class=\"pill pill--sub\" tabindex=\"0\">\u0642\u0633\u0645 \u0627\u0644\u0634\u0624\u0648\u0646<br>\u0627\u0644\u0642\u0627\u0646\u0648\u0646\u064a\u0629<\/div>\r\n <div class=\"pill pill--sub\" tabindex=\"0\">\u0627\u0644\u0642\u0633\u0645 \u0627\u0644\u062a\u0642\u0646\u064a<\/div>\r\n <\/article>\r\n\r\n <!-- 2) \u0627\u0644\u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0645\u0627\u0644\u064a\u0629 -->\r\n <article class=\"col\">\r\n <span class=\"neck\" aria-hidden=\"true\"><\/span>\r\n <div class=\"pill pill--sec\" tabindex=\"0\">\u0627\u0644\u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0645\u0627\u0644\u064a\u0629<\/div>\r\n <span class=\"branch\" aria-hidden=\"true\"><\/span>\r\n <div class=\"pill pill--sub\" tabindex=\"0\">\u0642\u0633\u0645 \u0627\u0644\u0645\u062d\u0627\u0633\u0628\u0629<\/div>\r\n <div class=\"pill pill--sub\" tabindex=\"0\">\u0642\u0633\u0645 \u0627\u0644\u0645\u0634\u062a\u0631\u064a\u0627\u062a<\/div>\r\n <\/article>\r\n\r\n <!-- 3) \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0639\u0645\u0644\u064a\u0627\u062a -->\r\n <article class=\"col\">\r\n <span class=\"neck\" aria-hidden=\"true\"><\/span>\r\n <div class=\"pill pill--sec\" tabindex=\"0\">\u0625\u062f\u0627\u0631\u0629<br>\u0627\u0644\u0639\u0645\u0644\u064a\u0627\u062a<\/div>\r\n <span class=\"branch\" aria-hidden=\"true\"><\/span>\r\n <div class=\"pill pill--sub\" tabindex=\"0\">\u0642\u0633\u0645 \u0627\u0644\u062a\u0634\u063a\u064a\u0644<\/div>\r\n <div class=\"pill pill--sub\" tabindex=\"0\">\u0642\u0633\u0645 \u0627\u0644\u062f\u0639\u0645<br>\u0627\u0644\u0644\u0648\u062c\u0633\u062a\u064a<\/div>\r\n <\/article>\r\n\r\n <!-- 4) \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u062a\u0648\u0627\u0635\u0644 \u0627\u0644\u0645\u0624\u0633\u0633\u064a -->\r\n <article class=\"col\">\r\n <span class=\"neck\" aria-hidden=\"true\"><\/span>\r\n <div class=\"pill pill--sec\" tabindex=\"0\">\u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u062a\u0648\u0627\u0635\u0644<br>\u0627\u0644\u0645\u0624\u0633\u0633\u064a<\/div>\r\n <span class=\"branch\" aria-hidden=\"true\"><\/span>\r\n <div class=\"pill pill--sub\" tabindex=\"0\">\u0642\u0633\u0645 \u0627\u0644\u062a\u0633\u0648\u064a\u0642<\/div>\r\n <div class=\"pill pill--sub\" tabindex=\"0\">\u0642\u0633\u0645 \u0627\u0644\u0639\u0644\u0627\u0642\u0627\u062a<br>\u0648\u0627\u0644\u0634\u0631\u0627\u0643\u0627\u062a<\/div>\r\n <div class=\"pill pill--sub\" tabindex=\"0\">\u0642\u0633\u0645 \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0645\u062d\u062a\u0648\u0649<\/div>\r\n <\/article>\r\n\r\n <!-- 5) \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639 -->\r\n <article class=\"col\">\r\n <span class=\"neck\" aria-hidden=\"true\"><\/span>\r\n <div class=\"pill pill--sec\" tabindex=\"0\">\u0625\u062f\u0627\u0631\u0629<br>\u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639<\/div>\r\n <span class=\"branch\" aria-hidden=\"true\"><\/span>\r\n <div class=\"pill pill--sub\" tabindex=\"0\">\u0642\u0633\u0645 \u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639<br>\u0627\u0644\u0645\u0648\u0633\u0645\u064a\u0629<\/div>\r\n <div class=\"pill pill--sub\" tabindex=\"0\">\u0642\u0633\u0645 \u0627\u0644\u0645\u0639\u0627\u0631\u0636<br>\u0627\u0644\u062e\u0627\u0631\u062c\u064a\u0629<\/div>\r\n <\/article>\r\n <\/section>\r\n <\/main>\r\n<\/body>\r\n<\/html>\r\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>\u0627\u0644\u0647\u064a\u0643\u0644 \u0627\u0644\u062a\u0646\u0638\u064a\u0645\u064a \u00b7 \u0646\u0633\u062e\u0629 \u0645\u0648\u062d\u0651\u064e\u062f\u0629 \u0627\u0644\u0639\u0631\u0648\u0636 \u2728 \u0627\u0628\u062f\u0623 \u0628\u0627\u0644\u0636\u063a\u0637 \u0639\u0644\u0649 \u00ab \u0627\u0644\u062c\u0645\u0639\u064a\u0629 \u0627\u0644\u0639\u0645\u0648\u0645\u064a\u0629\u00bb \u0644\u0627\u0633\u062a\u0639\u0631\u0627\u0636 \u0627\u0644\u0647\u064a\u0643\u0644 \u062e\u0637\u0648\u0629 \u0628\u062e\u0637\u0648\u0629 \u0627\u0644\u062c\u0645\u0639\u064a\u0629 \u0627\u0644\u0639\u0645\u0648\u0645\u064a\u0629 \u0645\u062c\u0644\u0633 \u0627\u0644\u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0645\u062f\u064a\u0631 \u0627\u0644\u062a\u0646\u0641\u064a\u0630\u064a \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u062e\u062f\u0645\u0627\u062a \u0627\u0644\u0645\u0634\u062a\u0631\u0643\u0629 \u0642\u0633\u0645 \u0627\u0644\u0645\u0648\u0627\u0631\u062f \u0627\u0644\u0628\u0634\u0631\u064a\u0629 \u0642\u0633\u0645 \u0627\u0644\u0634\u0624\u0648\u0646 \u0627\u0644\u0642\u0627\u0646\u0648\u0646\u064a\u0629 \u0627\u0644\u0642\u0633\u0645 \u0627\u0644\u062a\u0642\u0646\u064a \u0627\u0644\u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0645\u0627\u0644\u064a\u0629 \u0642\u0633\u0645 \u0627\u0644\u0645\u062d\u0627\u0633\u0628\u0629 \u0642\u0633\u0645 \u0627\u0644\u0645\u0634\u062a\u0631\u064a\u0627\u062a \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0639\u0645\u0644\u064a\u0627\u062a \u0642\u0633\u0645 \u0627\u0644\u062a\u0634\u063a\u064a\u0644 \u0642\u0633\u0645 \u0627\u0644\u062f\u0639\u0645 \u0627\u0644\u0644\u0648\u062c\u0633\u062a\u064a \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u062a\u0648\u0627\u0635\u0644 \u0627\u0644\u0645\u0624\u0633\u0633\u064a \u0642\u0633\u0645 \u0627\u0644\u062a\u0633\u0648\u064a\u0642 \u0642\u0633\u0645 \u0627\u0644\u0639\u0644\u0627\u0642\u0627\u062a \u0648\u0627\u0644\u0634\u0631\u0627\u0643\u0627\u062a \u0642\u0633\u0645 \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639 … <\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-15825","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/keswatfarah.sa\/en\/wp-json\/wp\/v2\/pages\/15825","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/keswatfarah.sa\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/keswatfarah.sa\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/keswatfarah.sa\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/keswatfarah.sa\/en\/wp-json\/wp\/v2\/comments?post=15825"}],"version-history":[{"count":28,"href":"https:\/\/keswatfarah.sa\/en\/wp-json\/wp\/v2\/pages\/15825\/revisions"}],"predecessor-version":[{"id":16542,"href":"https:\/\/keswatfarah.sa\/en\/wp-json\/wp\/v2\/pages\/15825\/revisions\/16542"}],"wp:attachment":[{"href":"https:\/\/keswatfarah.sa\/en\/wp-json\/wp\/v2\/media?parent=15825"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}