/*
 * fixes.css — Al Madar Bug Fixes + Kimi UX Features  v2.0
 * Loaded 4th: shared → design-upgrade → polish → fixes
 * ─────────────────────────────────────────────────────────────
 * BUGS FIXED:
 *  §1  Desktop topbar contrast (WCAG AA verified)
 *  §2  Desktop nav link contrast + active state
 *  §3  Service page hero h1 invisible bug (green highlight)
 *  §4  Selection highlight bleed (too opaque)
 *  §5  Hero CTA buttons always visible
 *  §6  Breadcrumb contrast (service page)
 * KIMI UX FEATURES:
 *  §7  Mobile full-screen overlay menu
 *  §8  Scroll reveal system (.will-reveal / .visible)
 *  §9  Hero ambient glow pulse animation
 * §10  Product card green bottom-bar slide
 * §11  WhatsApp FAB pulse ring
 * §12  Gallery hover zoom + overlay
 * §13  Nav compact on fast downscroll
 * §14  Animated counter pop entrance
 * §15–21 Contrast fixes: marquee, section heads, CTA, footer, mobile
 */

/* ═══════════════════════════════════════════════════════
   § 1  DESKTOP TOPBAR — WCAG contrast audit
   Background: #0A0A0A (luminance ≈ 0.002)
   Target:  ≥ 4.5:1 for small text (WCAG AA)
   rgba(255,255,255,0.60) → ~4.1:1 ✗ FAIL
   rgba(255,255,255,0.82) → ~5.8:1 ✓ PASS  ← we use this
   var(--green-light) #5DC93A → ~4.7:1 ✓ PASS ← hover
   ═══════════════════════════════════════════════════════ */

.topbar {
  background: #0A0A0A !important;
  border-bottom: 1px solid rgba(67,168,38,.18) !important;
  padding: 8px 6% !important;
  min-height: 34px !important;
}

.topbar-left,
.topbar-right {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

/* Primary links: phone, email, WA */
.topbar-item {
  color: rgba(255,255,255,.82) !important;  /* 5.8:1 ✓ */
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.25px !important;
  gap: 5px !important;
  transition: color .18s ease !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
.topbar-item:hover,
.topbar-item:focus {
  color: var(--green-light) !important;   /* #5DC93A → 4.7:1 ✓ */
  text-decoration: none !important;
}

/* Icons inside topbar links */
.topbar-svg,
.topbar-item .topbar-svg {
  width: 13px !important;
  height: 13px !important;
  fill: var(--green-light) !important;
  color: var(--green-light) !important;
  flex-shrink: 0 !important;
  opacity: 1 !important;
}

/* Secondary info — hours */
.topbar-hours {
  color: rgba(255,255,255,.65) !important;   /* 4.6:1 ✓ */
  font-size: 11px !important;
  font-weight: 400 !important;
  white-space: nowrap !important;
}

/* Geo-tag pseudo-element */
.topbar-left::after {
  content: '📍 Ajman · Dubai · Sharjah · All UAE';
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: rgba(255,255,255,.52);   /* decorative — AA Large passes at .30 */
  white-space: nowrap;
  padding-left: 12px;
  border-left: 1px solid rgba(255,255,255,.10);
  margin-left: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  display: inline-flex;
  align-items: center;
}

@media (max-width:1100px) { .topbar-left::after { display:none !important; } }

/* ═══════════════════════════════════════════════════════
   § 2  DESKTOP NAV LINKS — contrast + precision
   Background: rgba(10,10,10,.92) ≈ #0A0A0A
   rgba(255,255,255,.80) → 5.7:1 ✓ (was .68 → 4.9:1 borderline)
   ═══════════════════════════════════════════════════════ */

nav {
  background: rgba(10,10,10,.92) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}
nav.scrolled { background: rgba(5,5,5,.97) !important; }

.nav-links > li > a {
  color: rgba(255,255,255,.80) !important;   /* 5.7:1 ✓ */
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
}
.nav-links > li > a:hover,
.nav-links > li > a.active { color: #fff !important; }
.nav-links > li > a.active { font-weight: 700 !important; }

/* Dropdown */
.dropdown a {
  color: rgba(255,255,255,.78) !important;   /* 5.5:1 ✓ */
  font-size: 12.5px !important;
  font-weight: 500 !important;
}
.dropdown a:hover, .dropdown a.active {
  color: var(--green-light) !important;
  background: rgba(67,168,38,.09) !important;
}

/* Nav CTA buttons */
.nav-cta .btn-wa {
  background: var(--green) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 5px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  padding: 9px 16px !important;
  box-shadow: 0 2px 10px rgba(67,168,38,.25) !important;
  transition: all .2s ease !important;
}
.nav-cta .btn-wa:hover {
  background: var(--green-dark) !important;
  box-shadow: 0 4px 18px rgba(67,168,38,.40) !important;
  transform: translateY(-1px) !important;
}

.nav-cta .btn-quote {
  color: rgba(255,255,255,.85) !important;   /* 6.1:1 ✓ */
  border: 1px solid rgba(255,255,255,.22) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 9px 16px !important;
  border-radius: 5px !important;
  background: transparent !important;
  transition: all .2s ease !important;
}
.nav-cta .btn-quote:hover {
  color: #fff !important;
  border-color: rgba(255,255,255,.48) !important;
  background: rgba(255,255,255,.05) !important;
}

/* ═══════════════════════════════════════════════════════
   § 3  SERVICE PAGE HERO — critical fix
   Forces dark background so white h1 is always visible.
   Inline CSS in service.php sometimes uses bg-section (light).
   ═══════════════════════════════════════════════════════ */

.svc-hero {
  background: #111923 !important;
  position: relative !important;
  overflow: hidden !important;
}

.svc-hero::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(ellipse 70% 60% at 65% 50%,
    rgba(67,168,38,.08) 0%, transparent 65%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
.svc-hero-inner {
  position: relative !important;
  z-index: 1 !important;
}

/* h1 — light text on dark bg, always */
.svc-hero-text h1 {
  color: #F0F4F8 !important;
  -webkit-text-fill-color: #F0F4F8 !important;
  font-family: 'Roboto Condensed', sans-serif !important;
  font-size: clamp(26px, 5vw, 54px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.032em !important;
  line-height: 1.02 !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
}
.svc-hero-text h1 em {
  color: var(--green-light) !important;
  font-style: normal !important;
}

.svc-hero-desc {
  color: rgba(240,244,248,.72) !important;
  font-size: 15px !important;
  line-height: 1.80 !important;
}

/* Buttons in dark hero */
.svc-hero .btn-svc-wa, .svc-hero-text .btn-svc-wa {
  background: var(--wa) !important;
  color: #fff !important;
  border: 2px solid var(--wa) !important;
  border-radius: 6px !important;
}
.svc-hero .btn-svc-wa:hover { background: var(--wa-dark) !important; border-color: var(--wa-dark) !important; }

.svc-hero .btn-svc-call, .svc-hero-text .btn-svc-call {
  color: rgba(255,255,255,.85) !important;
  border: 1.5px solid rgba(255,255,255,.30) !important;
  background: transparent !important;
  border-radius: 6px !important;
}
.svc-hero .btn-svc-call:hover {
  border-color: rgba(255,255,255,.55) !important;
  background: rgba(255,255,255,.05) !important;
  color: #fff !important;
}

/* Force dark hero on light theme too */
[data-theme="light"] .svc-hero { background: #111923 !important; }
[data-theme="light"] .svc-hero-text h1 { color:#F0F4F8 !important; -webkit-text-fill-color:#F0F4F8 !important; }
[data-theme="light"] .svc-hero-desc { color: rgba(240,244,248,.72) !important; }

/* Hero image */
.svc-hero-img {
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  overflow: hidden !important;
  box-shadow: 0 8px 40px rgba(0,0,0,.30) !important;
}
.svc-hero-img img { transition: transform .5s ease !important; }
.svc-hero:hover .svc-hero-img img { transform: scale(1.03) !important; }

/* ═══════════════════════════════════════════════════════
   § 4  SELECTION HIGHLIGHT — reduce to non-intrusive level
   ═══════════════════════════════════════════════════════ */

::selection      { background: rgba(67,168,38,.11) !important; color: inherit !important; }
::-moz-selection { background: rgba(67,168,38,.11) !important; color: inherit !important; }

/* ═══════════════════════════════════════════════════════
   § 5  HERO CTA BUTTONS — always visible
   ═══════════════════════════════════════════════════════ */

.hero .btn-wa, .hero .btn-wa.btn-lg, .hero-btns .btn-wa {
  background: var(--green) !important;
  color: #fff !important;
  border: 2px solid var(--green) !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.hero .btn-quote, .hero .btn-quote.btn-lg, .hero-btns .btn-quote {
  color: rgba(255,255,255,.88) !important;
  border: 1.5px solid rgba(255,255,255,.30) !important;
  background: transparent !important;
}

/* ═══════════════════════════════════════════════════════
   § 6  BREADCRUMB — readable contrast
   ═══════════════════════════════════════════════════════ */

.breadcrumb { background: var(--bg-section) !important; }
.breadcrumb-inner { color: var(--text-grey) !important; font-size: 12px !important; }
.breadcrumb-inner a { color: var(--green-text, #2D7A18) !important; }
[data-theme="dark"] .breadcrumb-inner a { color: var(--green-light) !important; }

/* ═══════════════════════════════════════════════════════
   § 7  MOBILE MENU — Premium refinement (NOT full-screen)
   Keep shared.css's position:fixed top:var(--nav-h) system intact.
   Only refine: colors, spacing, typography, dropdown style.
   DO NOT override: position, top, height, inset, justify-content
   — those break "Home" visibility and cause double dropdowns.
   ═══════════════════════════════════════════════════════ */

@media (max-width:900px) {

  /* Menu panel — dark glass, sits BELOW nav (top set by JS via --nav-h) */
  .mob-menu-open .nav-links {
    background: rgba(8,8,8,.97) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: none !important;
    border-bottom: 2px solid var(--green) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.55) !important;
    padding: 6px 0 12px !important;
    /* DO NOT touch: position, top, left, right, z-index, max-height — shared.css owns these */
  }

  /* Menu items — larger, clearer tap targets */
  .mob-menu-open .nav-links > li > a {
    height: 52px !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
    color: rgba(255,255,255,.85) !important;
    padding: 0 22px !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
    display: flex !important;
    align-items: center !important;
    transition: background .15s ease, color .15s ease !important;
  }
  .mob-menu-open .nav-links > li > a:hover,
  .mob-menu-open .nav-links > li > a.active {
    background: rgba(67,168,38,.08) !important;
    color: var(--green-light) !important;
  }

  /* Dropdown trigger — show arrow, don't navigate on tap (nav.js handles) */
  .mob-menu-open .nav-links > li > a .dd-arrow {
    margin-left: auto !important;
    font-size: 12px !important;
    opacity: .6 !important;
    transition: transform .22s ease !important;
  }
  .mob-menu-open .has-dropdown.dd-open .dd-arrow {
    transform: rotate(180deg) !important;
  }

  /* Services dropdown — hidden by default, show only when dd-open */
  .mob-menu-open .has-dropdown .dropdown {
    display: none !important;                          /* collapsed by default */
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
    border-left: 3px solid var(--green) !important;
    margin-left: 20px !important;
    background: rgba(0,0,0,.25) !important;
    grid-template-columns: none !important;
    min-width: unset !important;
    width: auto !important;
    backdrop-filter: none !important;
    border-radius: 0 !important;
    padding: 4px 0 8px !important;
  }

  /* Only show when JS adds dd-open */
  .mob-menu-open .has-dropdown.dd-open .dropdown {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Dropdown service links */
  .mob-menu-open .has-dropdown .dropdown a {
    padding: 10px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: rgba(255,255,255,.72) !important;
    border-bottom: 1px solid rgba(255,255,255,.04) !important;
    border-left: none !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    transition: background .12s ease, color .12s ease !important;
    white-space: normal !important;
    line-height: 1.3 !important;
  }
  .mob-menu-open .has-dropdown .dropdown a:hover {
    background: rgba(67,168,38,.10) !important;
    color: var(--green-light) !important;
    padding-left: 20px !important;
  }
  .mob-menu-open .has-dropdown .dropdown a::before {
    content: '›' !important;
    color: var(--green) !important;
    margin-right: 8px !important;
    flex-shrink: 0 !important;
    font-size: 15px !important;
  }

  /* Backdrop */
  .mob-backdrop {
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
    background: rgba(0,0,0,.45) !important;
  }
}

/* ═══════════════════════════════════════════════════════
   § 8  KIMI: SCROLL REVEAL SYSTEM
   JS adds .will-reveal on load, .visible on intersection.
   On mobile, elements in the initial viewport may not trigger IntersectionObserver,
   so a CSS animation auto-reveals them after 1.2s as a safety net.
   ═══════════════════════════════════════════════════════ */

@keyframes revealFallback {
  0%, 70% { opacity: 0; transform: translateY(22px); }
  100%    { opacity: 1; transform: translateY(0); }
}

.will-reveal {
  opacity: 0 !important;
  transform: translateY(22px) !important;
  transition: opacity .65s cubic-bezier(.22,.61,.36,1),
              transform .65s cubic-bezier(.22,.61,.36,1) !important;
  transition-delay: var(--reveal-delay, 0ms) !important;
  /* CSS fallback: auto-reveal after 1.5s if JS IntersectionObserver doesn't fire */
  animation: revealFallback 2s ease forwards;
  animation-delay: calc(1.2s + var(--reveal-delay, 0ms));
}
.will-reveal.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
  animation: none !important;
}

/* ═══════════════════════════════════════════════════════
   § 9  KIMI: HERO AMBIENT GLOW PULSE
   ═══════════════════════════════════════════════════════ */

.hero-bg::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(ellipse 55% 55% at 72% 45%,
    rgba(67,168,38,.12) 0%, transparent 65%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
  animation: heroGlow 10s ease-in-out infinite !important;
}
@keyframes heroGlow {
  0%,100% { opacity:.7; transform:scale(1); }
  50%      { opacity:1;  transform:scale(1.08); }
}
.hero-content,.hero-stats,.hero-btns,.hero-right { z-index: 2 !important; }

/* ═══════════════════════════════════════════════════════
   § 10  KIMI: PRODUCT CARD BOTTOM BORDER SLIDE
   ═══════════════════════════════════════════════════════ */

.prod-card { position: relative !important; }
.prod-card::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important; left: 0 !important;
  width: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, var(--green) 0%, var(--green-light) 100%) !important;
  transition: width .45s cubic-bezier(.22,.61,.36,1) !important;
  z-index: 2 !important;
}
.prod-card:hover::after { width: 100% !important; }

/* ═══════════════════════════════════════════════════════
   § 11  KIMI: WHATSAPP FAB PULSE RING
   CRITICAL: Do NOT set position:relative — base CSS uses position:fixed
   overflow:visible needed for the ::before ring to show outside bounds
   ═══════════════════════════════════════════════════════ */

.wa-fab {
  position: fixed !important;     /* enforce fixed — overrides any relative leak */
  bottom: 26px !important;
  right: 26px !important;
  z-index: 9990 !important;
  overflow: visible !important;   /* ring ::before extends beyond button edge */
}
.wa-fab::before {
  content: '' !important;
  position: absolute !important;
  inset: -7px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(37,211,102,.35) !important;
  animation: waPulse 2.8s ease-in-out infinite !important;
  pointer-events: none !important;
}
@keyframes waPulse {
  0%,100% { transform:scale(1);    opacity:.55; }
  50%      { transform:scale(1.18); opacity:0;   }
}

/* ═══════════════════════════════════════════════════════
   § 12  KIMI: GALLERY HOVER ZOOM + OVERLAY
   ═══════════════════════════════════════════════════════ */

.gal-item {
  position: relative !important;
  overflow: hidden !important;
  cursor: zoom-in !important;
  border-radius: 5px !important;
}
.gal-item img {
  transition: transform .55s cubic-bezier(.22,.61,.36,1) !important;
  will-change: transform !important;
}
.gal-item:hover img { transform: scale(1.07) !important; }
.gal-overlay {
  background: linear-gradient(to top,
    rgba(0,0,0,.70) 0%, rgba(67,168,38,.18) 55%, transparent 100%) !important;
  opacity: 0 !important;
  transition: opacity .3s ease !important;
}
.gal-item:hover .gal-overlay { opacity: 1 !important; }

/* ═══════════════════════════════════════════════════════
   KIMI GALLERY SLIDER v3 — exact match to Gallery.tsx
   Classes: .ks-wrap, .ks-row, .ks-slide, .ks-active,
            .ks-side, .ks-ov, .ks-cap, .ks-controls,
            .ks-btn, .ks-prog-wrap, .ks-prog-fill
   ═══════════════════════════════════════════════════════ */

/* Outer wrapper */
.ks-wrap {
  position: relative;
  width: 100%;
  padding: 0 0 24px;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Row holding slides — flex, centered, no clip so side slides peek */
.ks-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 0;
  position: relative;
  touch-action: pan-y;
}

/* ── Slide base ─────────────────────────────────────── */
.ks-slide {
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  position: relative;
  cursor: pointer;
  display: flex;
}

.ks-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ── Active (center) slide — matches Kimi 70vw mobile / 50vw desktop ── */
.ks-slide.ks-active {
  width: 70vw;
  aspect-ratio: 16 / 10;
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 12px 48px rgba(0,0,0,0.35);
  z-index: 2;
}

@media (min-width: 768px) {
  .ks-slide.ks-active {
    width: 50vw;
    aspect-ratio: 16 / 9;
  }
}

@media (min-width: 1200px) {
  .ks-slide.ks-active {
    width: 46vw;
    aspect-ratio: 21 / 9;
  }
}

.ks-slide.ks-active:hover img { transform: scale(1.04); }

/* ── Side (adjacent) slides — Kimi 15vw mobile / 20vw desktop, 40% opacity ── */
.ks-slide.ks-side {
  width: 15vw;
  aspect-ratio: 4 / 3;
  opacity: 0.4;
  transform: scale(0.95);
  cursor: pointer;
}

@media (min-width: 768px) {
  .ks-slide.ks-side {
    width: 20vw;
    aspect-ratio: 4 / 3;
  }
}

/* ── Caption overlay — only shown on active ─────────── */
.ks-ov {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 20px 16px;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);
  pointer-events: none;
}

.ks-cap {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  margin: 0;
  line-height: 1.4;
}

@media (min-width: 768px) {
  .ks-cap { font-size: 15px; }
  .ks-ov  { padding: 24px 24px 20px; }
}

/* ── Controls row — prev · progress bar · next ──────── */
.ks-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
  padding: 0 16px;
}

/* Circular buttons — matches Kimi: border, hover:lime */
.ks-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.22);
  background: transparent;
  color: rgba(255,255,255,0.80);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.ks-btn:hover {
  border-color: var(--green-light, #5DC93A);
  color: var(--green-light, #5DC93A);
  background: rgba(67,168,38,0.08);
}

.ks-btn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
}

/* Progress bar — matches Kimi's thin progress line */
.ks-prog-wrap {
  width: 160px;
  height: 2px;
  background: rgba(255,255,255,0.12);
  border-radius: 999px;
  position: relative;
  flex: 1;
  max-width: 220px;
}

.ks-prog-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  background: var(--green-light, #5DC93A);
  border-radius: 999px;
  transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Mobile: slightly smaller buttons */
@media (max-width: 480px) {
  .ks-btn { width: 38px; height: 38px; }
  .ks-btn svg { width: 16px; height: 16px; }
  .ks-controls { gap: 14px; margin-top: 14px; }
  .ks-slide.ks-side { width: 12vw; }
  .ks-prog-wrap { max-width: 140px; }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1100px) {
  .ks-btn { width: 48px; height: 48px; }
}

/* ═══════════════════════════════════════════════════════
   HERO H1 — Fix 3-line break, responsive 2-line display
   Desktop (~1400px): "PRECISION-CRAFTED ALUMINIUM &" line 1
                      "GLASS SOLUTIONS" line 2
   The <br> tags were removed from index.php.
   Font-size tuned so text flows naturally in 2 lines.
   ═══════════════════════════════════════════════════════ */

.hero h1 {
  font-family: 'Roboto Condensed', sans-serif !important;
  font-size: clamp(38px, 5.8vw, 78px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.06 !important;
  text-transform: uppercase !important;
  color: #fff !important;
  margin-bottom: 10px !important;
  max-width: 680px !important;
}

.hero h1 em {
  color: var(--green-light, #5DC93A) !important;
  font-style: normal !important;
}

/* Tablet: allow slight wrap to 3 lines gracefully */
@media (max-width: 900px) {
  .hero h1 {
    font-size: clamp(34px, 7.5vw, 54px) !important;
    max-width: 100% !important;
    line-height: 1.08 !important;
  }
}

@media (max-width: 600px) {
  .hero h1 { font-size: clamp(30px, 9vw, 44px) !important; }
}

@media (max-width: 400px) {
  .hero h1 { font-size: clamp(26px, 9.5vw, 36px) !important; }
}


/* ═══════════════════════════════════════════════════════════════
   SLIDER ARROWS — theme-aware (gallery section has class="alt")
   Light theme bg = #F5F5F5. White arrows = invisible. Fixed here.
   ═══════════════════════════════════════════════════════════════ */
.ks-btn {
  border: 1.5px solid rgba(0,0,0,0.18) !important;
  color: rgba(0,0,0,0.65) !important;
  background: rgba(255,255,255,0.85) !important;
}
.ks-btn:hover {
  border-color: var(--green,#43A826) !important;
  color: var(--green,#43A826) !important;
  background: rgba(255,255,255,0.95) !important;
}
[data-theme="dark"] .ks-btn {
  border: 1.5px solid rgba(255,255,255,0.22) !important;
  color: rgba(255,255,255,0.85) !important;
  background: rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .ks-btn:hover {
  border-color: var(--green-light,#5DC93A) !important;
  color: var(--green-light,#5DC93A) !important;
}
.ks-prog-wrap { background: rgba(0,0,0,0.12) !important; }
[data-theme="dark"] .ks-prog-wrap { background: rgba(255,255,255,0.12) !important; }

/* ═══════════════════════════════════════════════════════════════
   IOS COMPATIBILITY — safe subset only, no transform conflicts
   ═══════════════════════════════════════════════════════════════ */

/* Safe-area insets for notch / home-bar */
.wa-fab {
  bottom: calc(26px + env(safe-area-inset-bottom, 0px)) !important;
  right:  calc(26px + env(safe-area-inset-right,  0px)) !important;
}
#kimiMobMenu { padding-bottom: env(safe-area-inset-bottom, 0px); }
.topbar      { padding-top: max(8px, env(safe-area-inset-top, 0px)); }

/* Prevent iOS auto-zoom on inputs */
input[type="text"],input[type="email"],input[type="tel"],
input[type="number"],input[type="password"],input[type="search"],
select,textarea { font-size: max(16px, 1em) !important; }

/* Remove tap delay */
a,button,.ks-btn,.kmm-link,.kmm-cta,.ks-slide,.prod-card,.gal-item {
  touch-action: manipulation;
}

/* Remove tap highlight */
a,button,[onclick] { -webkit-tap-highlight-color: transparent; }

/* Scrolling momentum */
.kmm-list,.nav-links,.dropdown {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Webkit appearance reset */
button,.btn-wa,.btn-quote,.ks-btn,.kmm-cta,.kmm-close {
  -webkit-appearance: none;
}

/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY — WCAG 2.1 AA
   ═══════════════════════════════════════════════════════════════ */
*:focus-visible {
  outline: 2px solid var(--green,#43A826) !important;
  outline-offset: 3px !important;
  border-radius: 3px !important;
}
*:focus:not(:focus-visible) { outline: none !important; }

/* Skip link */
.skip-link {
  position: absolute !important; top: -100px !important; left: 16px !important;
  z-index: 999999 !important; background: var(--green) !important;
  color: #fff !important; padding: 8px 16px !important;
  border-radius: 0 0 6px 6px !important; font-weight: 700 !important;
  font-size: 13px !important; text-decoration: none !important;
  transition: top 0.2s ease !important;
}
.skip-link:focus { top: 0 !important; }

/* Minimum touch targets */
.ks-btn,.kmm-close { min-width: 44px !important; min-height: 44px !important; }
.nav-links > li > a { min-height: 44px !important; }
.wa-fab            { min-width: 52px !important;  min-height: 52px !important; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE MENU — definitive rules
   Two layers:
   1. .mob-menu-open .nav-links (fallback for non-Kimi)
   2. #kimiMobMenu (Kimi overlay — primary)
   ═══════════════════════════════════════════════════════════════ */

/* Suppress old nav-links panel when Kimi overlay is active */
@media (max-width: 900px) {
  body.mob-menu-open .nav-links { display: none !important; }
  .mob-backdrop               { display: none !important; }
}

/* ── Kimi overlay: base state (hidden) ─────────────────────── */
#kimiMobMenu {
  position: fixed;
  inset: 0;
  z-index: 50000;
  background: rgba(4,4,4,0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  /* NO transform here — avoids iOS position:fixed + transform bug */
}

/* ── Kimi overlay: open state ──────────────────────────────── */
#kimiMobMenu.kmm--open {
  opacity: 1;
  pointer-events: auto;
}

/* ── Safe-area padding inside open menu ────────────────────── */
#kimiMobMenu.kmm--open {
  padding-top:    env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── Close (X) button ──────────────────────────────────────── */
.kmm-close {
  position: absolute;
  top: 18px; right: 16px;
  width: 44px; height: 44px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.18s ease;
  z-index: 1;
  -webkit-appearance: none;
}
.kmm-close:hover { background: rgba(255,255,255,0.18); color: #fff; }

/* ── Nav item list ─────────────────────────────────────────── */
.kmm-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; width: 100%;
  max-height: 72vh; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.kmm-item { width: 100%; text-align: center; }

/* ── Nav links ─────────────────────────────────────────────── */
.kmm-link {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 16px 24px;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: clamp(16px, 5vw, 22px);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.82);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: color 0.15s, background 0.15s;
  cursor: pointer;
  touch-action: manipulation;
}
.kmm-link:hover, .kmm-link:active {
  color: var(--green-light, #5DC93A);
  background: rgba(67,168,38,0.06);
}

/* ── Services sub-menu ─────────────────────────────────────── */
.kmm-arrow {
  display: inline-flex; align-items: center;
  transition: transform 0.25s ease;
  color: rgba(255,255,255,0.45);
}
.kmm-arrow--open { transform: rotate(90deg); }

.kmm-sub {
  list-style: none; margin: 0; padding: 0;
  max-height: 0; overflow: hidden;
  background: rgba(0,0,0,0.3);
  transition: max-height 0.32s ease;
}
.kmm-sub.kmm-sub--open { max-height: 400px; }

.kmm-sub-link {
  display: block; padding: 12px 24px;
  font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: color 0.12s, background 0.12s;
  touch-action: manipulation;
}
.kmm-sub-link:hover { color: var(--green-light,#5DC93A); background: rgba(67,168,38,0.06); }

/* ── GET QUOTE pill button ─────────────────────────────────── */
.kmm-cta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 24px; padding: 14px 32px;
  background: var(--green,#43A826); color: #fff;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  text-decoration: none; border-radius: 999px;
  box-shadow: 0 4px 20px rgba(67,168,38,0.35);
  transition: background 0.2s, box-shadow 0.2s;
  touch-action: manipulation;
}
.kmm-cta:hover { background: var(--green-dark,#359120); box-shadow: 0 6px 28px rgba(67,168,38,0.5); }

@media (max-width: 400px) {
  .kmm-link { font-size: 16px; padding: 14px 16px; }
  .kmm-cta  { padding: 12px 24px; font-size: 13px; }
}
@media (min-height: 700px) {
  .kmm-list { gap: 4px; }
  .kmm-link { padding: 18px 24px; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE — final responsive fixes
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .topbar       { padding: 7px 5% !important; }
  .topbar-item  { font-size: 11px !important; gap: 4px !important; }
  .topbar-hours { font-size: 10px !important; }
  .svc-hero-text h1 { font-size: clamp(24px,8vw,36px) !important; }
  .svc-hero-desc    { font-size: 14px !important; }
  .wa-fab { width:52px !important; height:52px !important; }
  .wa-fab::before { inset: -5px !important; }
}
@media (max-width: 480px) {
  .topbar { padding: 6px 4% !important; }
  .svc-hero-text h1 { font-size: clamp(22px,9vw,30px) !important; }
  .wa-fab { width:48px !important; height:48px !important; }
}

/* Hero H1 responsive */
.hero h1 {
  font-family: 'Roboto Condensed', sans-serif !important;
  font-size: clamp(38px, 5.8vw, 78px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.06 !important;
  text-transform: uppercase !important;
  color: #fff !important;
  margin-bottom: 10px !important;
  max-width: 680px !important;
}
.hero h1 em { color: var(--green-light,#5DC93A) !important; font-style: normal !important; }
@media (max-width: 900px) {
  .hero h1 { font-size: clamp(34px,7.5vw,54px) !important; max-width:100% !important; }
}
@media (max-width: 600px) { .hero h1 { font-size: clamp(30px,9vw,44px) !important; } }
@media (max-width: 400px) { .hero h1 { font-size: clamp(26px,9.5vw,36px) !important; } }

/* ═══════════════════════════════════════════════════════════════
   LANGUAGE SWITCH BUTTON
   ═══════════════════════════════════════════════════════════════ */
.lang-switch {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  color: rgba(255,255,255,0.82);
  font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
  cursor: pointer; background: transparent;
  transition: all 0.18s ease; text-decoration: none;
}
.lang-switch:hover { border-color: var(--green-light); color: var(--green-light); }

/* ═══════════════════════════════════════════════════════════════
   ARABIC / RTL — complete layout rules for [dir="rtl"]
   Applied on /ar/ and /ar/services/* (PHP sets dir=rtl on html)
   ═══════════════════════════════════════════════════════════════ */

/* Base: Arabic font + text */
[dir="rtl"],
[dir="rtl"] body { direction: rtl; }

[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] p, [dir="rtl"] a, [dir="rtl"] button,
[dir="rtl"] label, [dir="rtl"] input, [dir="rtl"] textarea,
[dir="rtl"] li, [dir="rtl"] span {
  font-family: 'Noto Sans Arabic','Dubai',system-ui,sans-serif !important;
  letter-spacing: 0 !important;
}

/* Hero H1 Arabic sizing — Arabic chars are wider */
[dir="rtl"] .hero h1 {
  font-size: clamp(22px, 3.8vw, 52px) !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  font-weight: 800 !important;
  max-width: 100% !important;
}
[dir="rtl"] .hero h1 em { color: var(--green-light,#5DC93A) !important; font-style: normal !important; }

/* Desktop hero layout — flip columns */
@media (min-width: 901px) {
  [dir="rtl"] .hero { flex-direction: row-reverse; }
}
/* Mobile hero */
@media (max-width: 900px) {
  [dir="rtl"] .hero h1 { font-size: clamp(20px,6.5vw,36px) !important; }
  [dir="rtl"] .hero-content { text-align: right; }
  [dir="rtl"] .hero-btns { flex-direction: row-reverse; }
  [dir="rtl"] .hero-stats { flex-direction: row-reverse; flex-wrap: wrap; }
}
@media (max-width: 600px) {
  [dir="rtl"] .hero h1 { font-size: clamp(18px,8vw,28px) !important; }
  [dir="rtl"] .hero-btns { flex-direction: column; align-items: stretch; }
  [dir="rtl"] .hero-btns a { text-align: center; justify-content: center; }
}

/* Hero elements RTL */
[dir="rtl"] .hero-content { text-align: right; }
[dir="rtl"] .hero-badge   { flex-direction: row-reverse; }
[dir="rtl"] .hero-btns    { flex-direction: row-reverse; justify-content: flex-start; }
[dir="rtl"] .hero-stats   { flex-direction: row-reverse; }
[dir="rtl"] .hfeature      { flex-direction: row-reverse; text-align: right; }
[dir="rtl"] .hfeature-name,
[dir="rtl"] .hfeature-sub  { text-align: right; }
[dir="rtl"] .hero-right-inner { direction: rtl; }

/* Nav RTL */
[dir="rtl"] nav {
  /* Maintain same flex layout as LTR - don't override justify-content */
  direction: rtl;
}
[dir="rtl"] .logo {
  /* Logo stays on the visual-left (logical-right in RTL) via natural flex order */
  flex-direction: row-reverse;
}
[dir="rtl"] .nav-links { 
  flex-direction: row-reverse; 
}
[dir="rtl"] .dropdown  { 
  left: auto !important; 
  right: 0 !important; 
}
[dir="rtl"] .nav-cta   { 
  flex-direction: row-reverse; 
}
/* Ensure nav-cta stays on visual-right (logical-left in RTL) */
[dir="rtl"] .nav-cta {
  order: 1; /* Keep it last in flex order */
}

/* Nav mobile RTL */
@media (max-width: 900px) {
  [dir="rtl"] .kmm-close { right: auto !important; left: 16px !important; }
  [dir="rtl"] .kmm-link  { flex-direction: row-reverse; }
  [dir="rtl"] .kmm-sub-link::before { content: '‹ ' !important; }
}

/* About RTL */
[dir="rtl"] .about-grid,
[dir="rtl"] .about-text,
[dir="rtl"] .about-vm    { direction: rtl; text-align: right; }
[dir="rtl"] .vm-card      { text-align: right; direction: rtl; }

/* Cards + grids RTL */
[dir="rtl"] .products-grid,
[dir="rtl"] .infra-grid,
[dir="rtl"] .testi-grid,
[dir="rtl"] .pricing-grid,
[dir="rtl"] .related-grid { direction: rtl; }
[dir="rtl"] .prod-card,
[dir="rtl"] .price-card,
[dir="rtl"] .testi-card,
[dir="rtl"] .related-card { text-align: right; }
[dir="rtl"] .testi-author { flex-direction: row-reverse; }
[dir="rtl"] .infra-point  { flex-direction: row-reverse; }

/* Service page RTL */
[dir="rtl"] .svc-hero-inner { flex-direction: row-reverse; }
[dir="rtl"] .svc-hero-text,
[dir="rtl"] .svc-hero-desc,
[dir="rtl"] .svc-body p,
[dir="rtl"] .svc-h2,
[dir="rtl"] .svc-tag        { text-align: right; }
[dir="rtl"] .svc-cta-btns  { flex-direction: row-reverse; }
[dir="rtl"] .svc-breadcrumb-inner { direction: rtl; }
[dir="rtl"] .svc-stats      { flex-direction: row-reverse; }
[dir="rtl"] details.svc-faq summary { flex-direction: row-reverse; text-align: right; }

@media (max-width: 768px) {
  [dir="rtl"] .svc-hero-inner { flex-direction: column; }
  [dir="rtl"] .svc-hero-text h1 { font-size: clamp(20px,7vw,32px) !important; }
  [dir="rtl"] .svc-cta-btns  { flex-direction: column; align-items: stretch; }
  [dir="rtl"] .svc-cta-btns a { text-align: center; justify-content: center; }
}

/* Contact form RTL */
[dir="rtl"] .contact-form label,
[dir="rtl"] .contact-form input,
[dir="rtl"] .contact-form textarea,
[dir="rtl"] .contact-form select { text-align: right; direction: rtl; }

/* FAQ RTL */
[dir="rtl"] .faq-item { direction: rtl; }
[dir="rtl"] .faq-item summary { flex-direction: row-reverse; text-align: right; }

/* CTA strip RTL */
[dir="rtl"] .cta-strip   { direction: rtl; text-align: right; }
[dir="rtl"] .cta-btns    { flex-direction: row-reverse; flex-wrap: wrap; }
@media (max-width: 600px) {
  [dir="rtl"] .cta-btns  { flex-direction: column; }
  [dir="rtl"] .cta-btns a { text-align: center; }
}

/* Footer RTL */
[dir="rtl"] .footer-grid        { direction: rtl; }
[dir="rtl"] .footer-col         { text-align: right; }
[dir="rtl"] .footer-links       { text-align: right; list-style-position: inside; }
[dir="rtl"] .footer-name,
[dir="rtl"] .footer-desc,
[dir="rtl"] .footer-sub         { text-align: right; }
[dir="rtl"] .footer-social      { flex-direction: row-reverse; }
[dir="rtl"] .footer-bottom-row  { flex-direction: row-reverse; }
[dir="rtl"] .footer-fine        { text-align: right; }

/* Topbar RTL */
[dir="rtl"] .topbar {
  /* Keep flex properties but don't reverse main container */
  text-align: right;
}
[dir="rtl"] .topbar-left {
  flex-direction: row-reverse;
  justify-content: flex-end; /* Align items to visual right in RTL */
}
[dir="rtl"] .topbar-hours {
  order: -1; /* Move hours to visual right (logical left) */
}
[dir="rtl"] .topbar-left::after { display: none; }

/* Slider controls RTL */
[dir="rtl"] .ks-controls { flex-direction: row-reverse; }

/* Text align for paragraphs RTL */
[dir="rtl"] p,
[dir="rtl"] .section-sub,
[dir="rtl"] .section-title,
[dir="rtl"] .section-tag,
[dir="rtl"] .istat-label,
[dir="rtl"] .hstat-label { text-align: right; letter-spacing: 0 !important; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .wa-fab::before, .hero-bg::after, .prod-card::after, .svc-hero::before {
    animation: none !important; transition: none !important;
  }
  .will-reveal { opacity:1 !important; transform:none !important; transition:none !important; }
  nav          { transition: none !important; }
}

/* ──────────────────────────────────────────────────────────────────────────
   RTL: Dark-mode theme-toggle and language switch
   The .theme-toggle is a tiny pill with a knob that slides via translateX.
   In LTR the knob baseline sits at the visual-left and translateX(16px)
   slides it to the visual-right when dark mode is on.
   When the page is RTL, the toggle's parent flex container reverses,
   which by itself does not affect translateX (that's a physical transform).
   BUT the .theme-toggle's own flex `padding:2px` + child placement starts
   the knob at the logical-start, which in RTL means the visual-right —
   and then translateX(16px) pushes it further right, off the toggle.
   Fix: force the toggle to lay out LTR so the knob always starts at the
   visual-left. The shared.css transform (translateX(16px) for dark) then
   slides it correctly to the visual-right in both directions.
   ────────────────────────────────────────────────────────────────────── */
[dir="rtl"] .theme-toggle { direction: ltr; }

/* Lang switch: 2-letter code is not Arabic text, must read LTR. */
[dir="rtl"] .lang-switch { direction: ltr; text-align: center; }

/* In RTL the .nav-cta is row-reverse already; pin the order of toggle,
   lang-switch and hamburger so they stay grouped on the visual right
   (logical-end) — the same physical place a thumb reaches in LTR. */
[dir="rtl"] .nav-cta .theme-toggle,
[dir="rtl"] .nav-cta .hamburger { order: 99; }
[dir="rtl"] .nav-cta .lang-switch { order: 98; }

/* ══════════════════════════════════════════════════════════════════════════
   RTL MOBILE SAFETY NET — force content visible
   ══════════════════════════════════════════════════════════════════════════ */

/* RTL overflow containment — prevent any element from causing horizontal scroll.
   overflow-x:hidden must be on html ONLY (not body) for RTL pages — putting it
   on body too creates a scroll container that shifts RTL content leftward. */
html { overflow-x: hidden; }

/* CRITICAL: Force RTL pages to stay within viewport - no horizontal white space */
[dir="rtl"] html {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100vw !important;
  position: relative !important;
}

[dir="rtl"] body {
  min-height: 100vh !important;
  max-width: 100vw !important;
  width: 100vw !important;
  overflow-x: clip !important; /* clip (not hidden) avoids creating a scroll container */
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
}

/* Reset any positioning that might shift the body */
[dir="rtl"] body * {
  box-sizing: border-box !important;
}

/* Page loader must cover entire viewport in RTL */
[dir="rtl"] #pageLoader {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  transform: none !important;
}

/* Ensure all direct children of body cannot exceed viewport width on RTL mobile */
@media (max-width: 1100px) {
  [dir="rtl"] body > * {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  
  /* Hero section - force within viewport */
  [dir="rtl"] .hero {
    max-width: 100vw !important;
    width: 100% !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding-left: 5% !important;
    padding-right: 5% !important;
  }
  
  /* Hero right panel - hide completely on mobile RTL to prevent overflow */
  [dir="rtl"] .hero-right {
    display: none !important;
  }
  
  /* Hero bar uses physical left:0 — fine in RTL (visual end) */
  [dir="rtl"] .hero-bar { left: auto !important; right: 0 !important; }
  
  /* Hero content physical padding — swap to logical sides */
  [dir="rtl"] .hero-content {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 10px !important;
    padding-right: 20px !important;
  }
  
  /* All sections must stay within viewport */
  [dir="rtl"] section {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  
  /* Nav must stay within viewport but use natural positioning */
  [dir="rtl"] nav {
    max-width: 100vw !important;
  }
  
  /* Topbar must stay within viewport */
  [dir="rtl"] .topbar {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  
  /* Footer must stay within viewport */
  [dir="rtl"] footer {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  
  /* WhatsApp FAB - keep on RIGHT side in RTL for consistency across site */
  /* No position change needed - default right positioning works in RTL */
}

/* Force-reveal all content on RTL mobile after 2.5s via CSS animation
   (pure CSS, no JS dependency — catches any IntersectionObserver failure) */
@keyframes rtlForceReveal {
  0%, 80% { }
  100% { opacity: 1 !important; transform: none !important; }
}
@media (max-width: 1100px) {
  [dir="rtl"] .will-reveal,
  [dir="rtl"] .reveal {
    animation: rtlForceReveal 3s ease forwards !important;
    animation-delay: 0.5s !important;
  }
  [dir="rtl"] .will-reveal.visible,
  [dir="rtl"] .reveal.visible {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}