:root{ --brand-gold:#facb00; --brand-dark:#0b0b0b; } body{ font-family: "Montserrat","Zain", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; } a{ color: var(--brand-gold); } a:hover{ color: var(--brand-gold); opacity:.9; } .section-pad{ padding: 72px 0; } .card-soft{ border: 1px solid rgba(0,0,0,.08); border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.06); } .hero{ min-height: 92vh; position: relative; background: linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.15) 100%), url("../images/hero-banner.jpg") center/cover no-repeat; } .hero-badge{ background: rgba(250,203,0,.18); border: 1px solid rgba(250,203,0,.35); color: #fff; } /* Video element */ .hero-video-bg { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; transform: translate(-50%, -50%); object-fit: cover; z-index: 0; } /* Dark overlay for readability */ .hero-overlay { position: absolute; inset: 0; background: linear-gradient( 90deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0.25) 100% ); z-index: 1; } /* Ensure content stays above video */ .hero-video .container { z-index: 2; } @media (max-width: 768px) { .hero-video-bg { display: none; } .hero-video { background: linear-gradient( 90deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0.25) 100% ), url("../images/hero-banner.jpg") center / cover no-repeat; } } .list-check li{ margin-bottom: .6rem; padding-left: 1.75rem; position: relative; } .list-check li::before{ content: "✓"; position: absolute; left: 0; top: 0; color: var(--brand-gold); font-weight: 800; } .pill{ border-radius: 999px; } .gold-dot{ color: var(--brand-gold); } .ratio-4x3{ aspect-ratio: 4 / 3; object-fit: cover; width: 100%; } .hello{ display: inline-block; font-size: 18px; letter-spacing: 0.8ch; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; color: #fff; /* background: repeating-linear-gradient(to right, #000 0 calc(1.8ch - 3px), transparent 0 1.8ch) 0 0/calc(100% - 2px) 100% no-repeat; */ background-color: #0e0e0e; padding: 6px 10px 6px 12px; border-radius: 10px; } /* remove number spinners */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; } /* ========================= ARABIC / RTL OVERRIDES Apply when: ========================= */ /* LIST CHECK: move padding + checkmark to the right */ html[dir="rtl"] .list-check li{ padding-left: 0; padding-right: 1.75rem; } html[dir="rtl"] .list-check li::before{ left: auto; right: 0; }