/*
 * NGT Corporate — RTL overrides
 * The stylesheet uses CSS logical properties throughout, so this file only
 * carries the handful of rules that cannot be expressed logically.
 * CI Manual 4.7: Arabic is right-to-left; Arabic blocks align right.
 */

body { direction: rtl; text-align: right; }

/* Gradients specified at 135° should mirror so the light source stays consistent */
:root {
  --grad-hero: linear-gradient(225deg, #1F93FF 0%, #742E99 100%);
  --grad-energy: linear-gradient(225deg, #FF3DC7 0%, #FF8258 100%);
  --grad-deep: linear-gradient(225deg, #1F1C6B 0%, #742E99 68%, #FF3DC7 100%);
  --grad-fresh: linear-gradient(225deg, #2BD69E 0%, #1F93FF 100%);
  --grad-premium-dark: linear-gradient(225deg, #742E99 0%, #1A1A2E 100%);
  --grad-spectrum: linear-gradient(270deg, #FFAD23 0%, #FF3DC7 22%, #742E99 42%, #1F93FF 62%, #2BD69E 82%, #FFD400 100%);
  --svc-digital: linear-gradient(225deg, #FF3DC7 0%, #FF8258 100%);
}

.ngt-hero::after {
  background:
    radial-gradient(60% 55% at 22% 18%, rgba(255, 61, 199, 0.22), transparent 70%),
    radial-gradient(50% 50% at 88% 82%, rgba(31, 147, 255, 0.20), transparent 70%);
}

.alignleft { float: right; margin-inline-end: var(--sp-4); }
.alignright { float: left; margin-inline-start: var(--sp-4); }

.ngt-cta { text-align: center; }
.ngt-stat { text-align: center; }
.ngt-logo-wall__item { text-align: center; }

/* The skyline sits on the right of the frame; in RTL the headline moves there,
   so the image is flipped to keep the negative space behind the type (5.2). */
.ngt-hero {
  background-position: center, left center;
  background-image:
    linear-gradient(225deg, rgba(31, 28, 107, 0.95) 0%, rgba(116, 46, 153, 0.88) 62%, rgba(255, 61, 199, 0.74) 100%),
    url("assets/img/photos/hero-riyadh-skyline.jpg");
}

@media (max-width: 768px) {
  .ngt-hero { background-position: center, 28% center; }
}

/* Latin fragments inside Arabic copy (product names, emails, phone numbers) */
.ngt-ltr { direction: ltr; unicode-bidi: embed; display: inline-block; }