.elementor-15068 .elementor-element.elementor-element-4e5f253{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-15068 .elementor-element.elementor-element-83a877e{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-15068 .elementor-element.elementor-element-516b1cd{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-15068 .elementor-element.elementor-element-3ad8c95{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-15068 .elementor-element.elementor-element-1302805{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-15068 .elementor-element.elementor-element-56da6cc{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}/* Start custom CSS for html, class: .elementor-element-83a877e */Here are all 8 sections one by one — copy each directly:

---

**SECTION 1 — HERO**There you go — all 7 codes ready to copy. Here's a quick reference:

---

**How to use — paste each into a separate Elementor HTML widget:**

| # | Section | Copy from above |
|---|---|---|
| 1 | **Hero** | First code block |
| 2 | **Marquee** | Second code block |
| 3 | **About + Globe** | Third code block (longest — includes the JS globe) |
| 4 | **Why MENA + Stats** | Fourth code block |
| 5 | **What We Do** | Fifth code block |
| 6 | **Our Edge** | Sixth code block |
| 7 | **CTA** | Seventh code block — replace `YOUR_CTA_IMAGE_URL_HERE.jpg` with your image URL |

**One thing you still need** — paste this into **Elementor → Site Settings → Custom CSS** (required for `.ar-wrap`, `.ar-lbl`, `.ar-bar`, `.ar-gold`, `.ar-btn` classes used across all sections):

```css
.ar-wrap{max-width:1240px;margin:0 auto;padding:0 80px}
.ar-lbl{font-family:'Inter',sans-serif;font-size:10px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:#C9A227;display:block;margin-bottom:16px}
.ar-bar{width:44px;height:2px;background:#C9A227;display:block;margin-bottom:28px}
.ar-gold{color:#C9A227}
.ar-btn{display:inline-flex;align-items:center;gap:9px;font-family:'Inter',sans-serif;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;border:none;cursor:pointer;text-decoration:none;transition:all .24s;white-space:nowrap}
.ar-btn svg{flex-shrink:0;transition:transform .2s}
.ar-btn:hover svg{transform:translateX(3px)}
.ar-btn-gold{background:#C9A227;color:#080800;padding:16px 36px}
.ar-btn-gold:hover{background:#e8be3a;transform:translateY(-2px)}
.ar-btn-outline{background:transparent;color:#F0EFE8;padding:15px 34px;border:1px solid rgba(240,239,232,.25)}
.ar-btn-outline:hover{border-color:#C9A227;color:#C9A227}
@keyframes ar-fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes ar-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes ar-spinRing{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes ar-drop{0%{opacity:0;transform:translateY(-6px)}50%{opacity:1}100%{opacity:0;transform:translateY(16px)}}
@media(max-width:768px){.ar-wrap{padding:0 24px}}
```/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4e5f253 *//* Smooth scrolling */
html { scroll-behavior: smooth; }

/* Custom gold scrollbar */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: #080800; }
::-webkit-scrollbar-thumb { background: #C9A227; }

/* Text selection in gold */
::selection { background: #C9A227; color: #080800; }

/* Smooth image loading */
img { display: block; max-width: 100%; }

/* Remove blue link outlines */
a:focus { outline: none; }

/* Body baseline */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}/* End custom CSS */