:root { --color-navy-950: #1a1f44; --color-navy-900: #262c60; --color-navy-800: #2f3670; --color-navy-700: #3c4480; --color-cyan-500: #56bbde; --color-cyan-600: #3f9fc4; --color-cyan-700: #36768c; --color-cyan-100: #eaf6fc; --color-gold-500: #d89322; --color-gold-400: #e6a743; --color-bronze-500: #a8480a; --color-silver-500: #6b6b72; --color-white: #ffffff; --color-gray-100: #f4f6f9; --color-gray-200: #eaeef4; --color-gray-300: #d8dee8; --color-text: #1c2333; --color-text-soft: #525a6e; --font-arabic: "Cairo", sans-serif; /* Fluid type scale (~1.25 ratio), Arabic-first */ --fs-display: clamp(2.1rem, 1.5rem + 2.8vw, 3.4rem); --fs-h2: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem); --fs-h3: clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem); --fs-body: 1.0625rem; --fs-small: 0.9rem; --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.5rem; --space-5: 4rem; --space-6: 6rem; --radius-sm: 0.5rem; --radius-md: 0.75rem; --radius-lg: 1.25rem; --radius-xl: 1.75rem; --max-width: 1180px; --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* Elevation — used only as a hover/focus response, never ambient (brand rule) */ --shadow-md: 0 10px 30px -12px rgba(20, 33, 61, 0.18); --shadow-lg: 0 24px 48px -16px rgba(5, 11, 23, 0.35); } html { scroll-behavior: smooth; scroll-padding-block-start: 96px; } /* Contain horizontal overflow from inner scroll containers (e.g. the packages table's RTL phantom-width quirk) on the content wrapper rather than , so position:fixed UI (WhatsApp + scroll-top buttons) isn't clipped. */ .site-main { overflow-x: clip; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } * { box-sizing: border-box; } html { direction: rtl; } body { margin: 0; font-family: var(--font-arabic); font-size: var(--fs-body); color: var(--color-text); background: var(--color-white); line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3 { line-height: 1.3; text-wrap: balance; } p { text-wrap: pretty; } img { max-width: 100%; display: block; } .container { max-width: var(--max-width); margin-inline: auto; padding-inline: var(--space-3); } .btn { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0.75rem 1.5rem; border-radius: var(--radius-md); font-weight: 700; text-decoration: none; border: none; cursor: pointer; transition: transform 0.2s var(--ease-out-quart), box-shadow 0.2s var(--ease-out-quart), background-color 0.2s ease; } @media (hover: hover) { .btn:hover { transform: translateY(-2px); } } .btn:active { transform: translateY(0); } .btn-gold { background: linear-gradient(135deg, var(--color-gold-400), var(--color-gold-500)); color: var(--color-navy-900); } .btn-gold:hover { box-shadow: 0 10px 26px -6px rgba(216, 147, 34, 0.55); } .btn-lg { padding: 0.95rem 2rem; font-size: 1.05rem; } .btn-navy-outline { background: transparent; border: 2px solid var(--color-navy-900); color: var(--color-navy-900); } .btn-navy-outline:hover { background: var(--color-navy-900); color: var(--color-white); } .btn-outline { background: transparent; border: 2px solid var(--color-white); color: var(--color-white); } .btn-outline:hover { background: rgba(255, 255, 255, 0.1); } @media (prefers-reduced-motion: reduce) { .btn, .card { transition-duration: 0.01ms !important; } .btn:hover, .card:hover { transform: none; } } .ltr { direction: ltr; unicode-bidi: embed; display: inline-block; } .section { padding-block: var(--space-5); } .section-alt { background: var(--color-gray-100); } a:focus-visible, button:focus-visible { outline: 2px solid var(--color-white); outline-offset: 2px; box-shadow: 0 0 0 4px var(--color-navy-900); border-radius: 2px; }