/* ========================================================= SAMA FOR SHIPPING — PUBLIC WEBSITE STYLESHEET Style: Glassmorphism / Deep Ocean Gradient Notes: Uses CSS logical properties (margin-inline, etc.) so the layout mirrors correctly when dir="rtl" is set on for Arabic content. ========================================================= */ /* ---------- Design tokens ---------- */ :root{ /* Ocean gradient stops */ --ocean-1:#0f2027; --ocean-2:#203a43; --ocean-3:#2c5364; /* Glow accents */ --cyan-glow:#4fd1e8; --teal-glow:#2ec4b6; --gold-accent:#e0b35c; /* Glass surfaces */ --glass-fill: rgba(255,255,255,0.08); --glass-fill-strong: rgba(255,255,255,0.14); --glass-border: rgba(255,255,255,0.22); --glass-shadow: 0 8px 32px rgba(0,0,0,0.35); /* Text */ --text-light:#eef6f9; --text-muted: rgba(238,246,249,0.7); /* Type */ --font-base: 'Segoe UI', system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; /* Radii / spacing */ --radius-lg: 22px; --radius-md: 16px; --radius-sm: 10px; } *{ box-sizing: border-box; } html,body{ margin:0; padding:0; } body{ font-family: var(--font-base); color: var(--text-light); min-height:100vh; background: radial-gradient(circle at 15% 20%, rgba(79,209,232,0.18), transparent 40%), radial-gradient(circle at 85% 15%, rgba(224,179,92,0.10), transparent 45%), radial-gradient(circle at 70% 80%, rgba(46,196,182,0.16), transparent 45%), linear-gradient(135deg, var(--ocean-1) 0%, var(--ocean-2) 50%, var(--ocean-3) 100%); background-attachment: fixed; line-height:1.6; overflow-x:hidden; } a{ color:inherit; text-decoration:none; } ul{ margin:0; padding:0; list-style:none; } img{ max-width:100%; display:block; } section{ padding-block: 90px; padding-inline: 6vw; position:relative; z-index:1; } h1,h2,h3{ margin:0 0 0.5em 0; font-weight:600; letter-spacing:0.2px; } .eyebrow{ text-transform:uppercase; letter-spacing:2px; font-size:0.78rem; color: var(--cyan-glow); font-weight:600; } /* ---------- Floating glow shapes (decorative, behind content) ---------- */ .bg-blob{ position:fixed; border-radius:50%; filter: blur(70px); z-index:0; pointer-events:none; opacity:0.55; } .blob-1{ width:380px; height:380px; background:var(--cyan-glow); inset-inline-start:-120px; top:10%; } .blob-2{ width:420px; height:420px; background:var(--gold-accent); inset-inline-end:-140px; top:55%; opacity:0.25;} .blob-3{ width:300px; height:300px; background:var(--teal-glow); inset-inline-start:40%; top:85%; } /* ========================================================= DYNAMIC MARITIME VIDEO BACKGROUND - .video-bg pins a full-viewport layer behind all content - the