:root{--gold:#c9a24d;--black:#080808;--dark:#121212;--card:#151515}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--black);color:#fff;line-height:1.7}

/* GLOBAL BACKGROUND (Dubai night) + subtle parallax feel */
body{
  position:relative;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(900px 500px at 20% 15%, rgba(201,162,77,.18), transparent 60%),
    linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.55)),
    url('https://images.unsplash.com/photo-1512453979798-5ea266f8880c?auto=format&fit=crop&w=2400&q=80') center/cover no-repeat;
  transform:translateZ(0);
  will-change:transform;
}
/* Optional: add a very light film grain / depth */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:radial-gradient(circle at 30% 20%, rgba(255,255,255,.06), transparent 35%),
             radial-gradient(circle at 70% 60%, rgba(255,255,255,.04), transparent 40%);
  mix-blend-mode:overlay;
  opacity:.75;
  pointer-events:none;
}

/* Make section backgrounds slightly transparent so the global background is visible */
section{background:transparent}
section.dark{background:rgba(18,18,18,.72)}
footer.site-footer{background:rgba(0,0,0,.78)}

a{text-decoration:none;color:inherit}
h1,h2,h3{font-family:Cinzel,serif;letter-spacing:1px;margin:0}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* HEADER / HERO */
header.site-hero{
  min-height:100vh;
  position:relative;
  display:flex;
  align-items:center;
  overflow:hidden;
  /* DUBAI NIGHT IMAGE FALLBACK / LAYER */
  background:
    linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.72)),
    url('https://images.unsplash.com/photo-1512453979798-5ea266f8880c?auto=format&fit=crop&w=2400&q=80') center/cover no-repeat;
}

/* HERO VIDEO */
.hero-video{
  position:absolute;
  top:0;left:0;width:100%;height:100%;
  object-fit:cover;
  z-index:0;
  filter:contrast(1.15) saturate(1.25) brightness(.9)
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 500px at 15% 30%, rgba(201,162,77,.22), transparent 60%),
    linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.72));
  z-index:1
}

/* SKYLINE LIGHT / GLASS REFLECTION (no grid artifacts) */
header.site-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    /* CLUSTER 1 (Downtown glow) */
    radial-gradient(520px 320px at 58% 30%, rgba(0,255,255,.14), transparent 70%),
    radial-gradient(520px 360px at 62% 34%, rgba(255,0,210,.12), transparent 72%),
    radial-gradient(280px 220px at 56% 28%, rgba(255,255,255,.06), transparent 72%),

    /* CLUSTER 2 (Right skyline glow) */
    radial-gradient(560px 380px at 80% 44%, rgba(0,255,255,.10), transparent 74%),
    radial-gradient(560px 420px at 84% 48%, rgba(255,0,210,.08), transparent 78%),
    radial-gradient(320px 240px at 78% 42%, rgba(255,255,255,.05), transparent 76%),

    /* CLUSTER 3 (Left skyline glow) */
    radial-gradient(520px 360px at 24% 42%, rgba(140,110,255,.08), transparent 78%),
    radial-gradient(300px 220px at 22% 40%, rgba(255,255,255,.04), transparent 80%),

    /* Glass sweep highlight */
    linear-gradient(120deg, transparent 40%, rgba(255,255,255,.10) 50%, transparent 60%);

  mix-blend-mode:screen;
  opacity:.46;
  transform:translateX(-20%);
  animation:remontadaGlassSweep 9s ease-in-out infinite;
  filter:blur(.6px);
}

@keyframes remontadaGlassSweep{
  0%{opacity:.30; transform:translateX(-24%)}
  50%{opacity:.58; transform:translateX(14%)}
  100%{opacity:.30; transform:translateX(-24%)}
}
50%{opacity:.62; transform:translateX(12%)}
  100%{opacity:.35; transform:translateX(-22%)}
}
50%{opacity:.65; transform:translateX(10%)}
  100%{opacity:.35; transform:translateX(-22%)}
}


/* Top bar */
.topbar{position:fixed;top:0;left:0;right:0;z-index:60;padding:14px 0;background:rgba(0,0,0,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
.topbar .row{display:flex;align-items:center;justify-content:space-between;gap:14px}
.brand{display:flex;align-items:center;gap:14px}
.brand img{width:52px;height:52px;border-radius:50%}
.brandname{display:flex;flex-direction:column;line-height:1.1}
.brandname b{letter-spacing:2px}
.brandname span{font-size:12px;color:rgba(255,255,255,.75)}

.nav{display:flex;gap:18px;font-size:13px;color:rgba(255,255,255,.85)}
.nav a{padding:8px 10px;border-radius:10px}
.nav a:hover{background:rgba(255,255,255,.06)}

/* Hero content */
.hero{padding-top:140px; padding:110px 0 70px;position:relative;z-index:3}
.badge{display:inline-flex;gap:10px;align-items:center;font-size:12px;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.85)}
.dot{width:7px;height:7px;border-radius:999px;background:var(--gold);box-shadow:0 0 0 6px rgba(201,162,77,.18)}
h1{font-size:70px;margin:14px 0 10px}
.claim{color:var(--gold);font-weight:500}
.sub{max-width:680px;font-size:18px;color:rgba(255,255,255,.9);margin:18px 0 0}

.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 22px;border-radius:14px;
  border:1px solid rgba(201,162,77,.75);
  color:var(--gold);font-weight:600;font-size:14px;
  background:rgba(0,0,0,.25);
  transition:.25s
}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:var(--gold);color:#000}
.btn.ghost{border:1px solid rgba(255,255,255,.22);color:#fff}

.hero-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:780px;margin-top:34px}
.mini{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.10);
  border-top:2px solid rgba(201,162,77,.85);
  padding:16px 16px;border-radius:16px;
  color:rgba(255,255,255,.9)
}
.mini b{display:block;font-size:13px}
.mini span{display:block;font-size:12px;color:rgba(255,255,255,.72);margin-top:4px}

/* Sections */
section{padding:90px 0}
section.dark{background:var(--dark)}
h2{font-size:42px;margin-bottom:18px}
.lead{max-width:860px;color:rgba(255,255,255,.82)}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;margin-top:26px}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10);
  border-top:2px solid rgba(201,162,77,.85);
  padding:26px;border-radius:18px
}

/* Fleet gallery */
.ig-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ig-actions{display:flex;gap:10px;flex-wrap:wrap}
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}
.ig-tile{position:relative;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.10)}
.ig-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, transparent, rgba(0,0,0,.55))}
.ig-img{width:100%;height:240px;object-fit:cover;display:block;transform:scale(1.02)}
.ig-cap{position:absolute;left:14px;right:14px;bottom:12px;z-index:2;font-size:12px;color:rgba(255,255,255,.9);display:flex;justify-content:space-between;gap:10px}
.ig-cap b{color:#fff;font-weight:600}
.ig-cap span{color:rgba(255,255,255,.75)}

/* Night drive video wrapper */
.video-wrap{margin-top:28px;position:relative;border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.12)}
.video-wrap video{width:100%;height:520px;object-fit:cover;display:block}
.video-wrap .shade{position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.65))}
.video-wrap .caption{position:absolute;left:28px;bottom:26px;z-index:2;max-width:520px}

/* How it works */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:24px}
.step{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);border-radius:18px;padding:20px}
.n{color:var(--gold);font-family:Cinzel,serif;font-size:18px;letter-spacing:2px}

/* Contact */
.contact-box{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start;justify-content:space-between;margin-top:22px}
.contact-box .card{flex:1;min-width:260px}

/* WhatsApp floating */
.whatsapp{
  position:fixed;right:22px;bottom:22px;z-index:50;background:#25d366;color:#000;
  padding:14px 18px;font-weight:700;border-radius:999px;box-shadow:0 12px 35px rgba(0,0,0,.45)
}

footer.site-footer{background:#000;padding:44px 0;text-align:center;color:rgba(255,255,255,.7);font-size:13px}
footer.site-footer a{color:rgba(255,255,255,.85)}

  50%{opacity:.88; transform:translateY(-6px)}
}

#night-drive .video-wrap::after{
  opacity:.70;
  background:
    linear-gradient(90deg, rgba(0,255,255,.18), transparent 32%, rgba(255,0,200,.18)),
    radial-gradient(900px 520px at 50% 40%, rgba(255,255,255,.08), transparent 60%);
}

  50%{ transform:scale(1.25); opacity:1; filter:brightness(1.3); }
}

/* CYBER NEON — BOOSTED */
#night-drive .video-wrap::before{
  inset:-34px;
  filter:blur(16px);
  opacity:1;
  background:
    radial-gradient(760px 420px at 18% 22%, rgba(0, 255, 255, .45), transparent 62%),
    radial-gradient(700px 460px at 84% 38%, rgba(255, 0, 210, .40), transparent 62%),
    radial-gradient(760px 520px at 62% 92%, rgba(140, 110, 255, .34), transparent 66%),
    radial-gradient(620px 360px at 46% 58%, rgba(0, 255, 140, .22), transparent 62%);
}
#night-drive .video-wrap::after{
  opacity:.85;
  background:
    linear-gradient(90deg, rgba(0,255,255,.22), transparent 30%, rgba(255,0,210,.22)),
    radial-gradient(980px 560px at 50% 42%, rgba(255,255,255,.10), transparent 62%),
    radial-gradient(900px 520px at 50% 40%, rgba(255,255,255,.08), transparent 62%);
  mix-blend-mode:screen;
}

/* Make the Night Drive caption feel more cyber */
#night-drive .badge{color:rgba(255,255,255,.92)}
#night-drive .dot{box-shadow:0 0 0 7px rgba(201,162,77,.18), 0 0 26px rgba(0,255,255,.18)}

/* Responsive */
@media (max-width:960px){
  h1{font-size:54px}
  .hero-cards{grid-template-columns:1fr}
  .ig-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .nav{display:none}
}
@media (max-width:520px){
  h1{font-size:44px}
  .ig-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .ig-img{height:220px}
  .video-wrap video{height:420px}
  .video-wrap .caption{left:18px;right:18px;bottom:18px}
}


/* MENU FIXES (WordPress custom logo + admin bar) */
.topbar{width:100%;}
.brand .custom-logo-link{display:inline-flex;align-items:center;line-height:0;}
.brand .custom-logo-link img{width:52px;height:52px;border-radius:50%;object-fit:cover;}
/* Avoid unexpected theme-added margins */
.brand img, .brand .custom-logo-link, .brand .custom-logo{margin:0 !important;}
/* WordPress admin bar offset so the fixed menu doesn't jump/overlap */
body.admin-bar .topbar{top:32px;}
@media (max-width:782px){
  body.admin-bar .topbar{top:46px;}
}


/* TOPBAR HARD OVERRIDES (prevents mid-hero positioning) */
:root{ --topbar-h: 76px; --topbar-offset: 0px; }
body.admin-bar{ --topbar-offset: 32px; }
@media (max-width:782px){ body.admin-bar{ --topbar-offset: 46px; } }

.topbar{
  position:fixed !important;
  top:var(--topbar-offset) !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  transform:none !important;
  margin:0 !important;
}
.topbar .container{ width:100%; }
header.site-hero{ padding-top: calc(var(--topbar-h) + var(--topbar-offset)); }


/* Desert Run section accent */
#desert-run .card{
  border-top-color: rgba(201,162,77,.95);
}
#desert-run .lead{
  max-width:920px;
}


/* Desert Run background image */
#desert-run{
  position:relative;
  background:
    linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.75)),
    url('https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=2400&q=80')
    center/cover no-repeat;
}
#desert-run::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(700px 360px at 30% 25%, rgba(201,162,77,.25), transparent 60%),
    radial-gradient(700px 420px at 70% 60%, rgba(255,180,80,.18), transparent 65%);
  pointer-events:none;
}
#desert-run .container{position:relative;z-index:2;}


/* FINAL TOPBAR FIX (always visible on scroll) */
.topbar{
  position:fixed !important;
  top:0;
  left:0;
  right:0;
  width:100%;
  z-index:999;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
body.admin-bar .topbar{ top:32px; }
@media (max-width:782px){
  body.admin-bar .topbar{ top:46px; }
}
/* push hero down so content is not hidden */
header.site-hero{ padding-top:120px; }


/* Language visibility */
:root{ }
html[data-lang="en"] [data-lang="ar"]{ display:none !important; }
html[data-lang="de"] [data-lang="ar"]{ display:none !important; }
html[data-lang="ar"] [data-lang="en"]{ display:none !important; }
html[data-lang="ar"] [data-lang="de"]{ display:none !important; }
html[data-lang="en"] [data-lang="de"]{ display:none !important; }
html[data-lang="de"] [data-lang="en"]{ display:none !important; }

/* Flag switcher */
.lang-switch{display:flex;gap:10px;align-items:center}
.lang-btn{
  width:38px;height:38px;border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.25);
  color:#fff;
  cursor:pointer;
  font-size:18px;
  display:grid;place-items:center;
  transition:.2s;
}
.lang-btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.08)}

/* RTL tweaks for Arabic */
html[dir="rtl"] body{ direction:rtl; }
html[dir="rtl"] .topbar .row{ flex-direction:row-reverse; }
html[dir="rtl"] .nav{ flex-direction:row-reverse; }
html[dir="rtl"] .brand{ flex-direction:row-reverse; text-align:right; }
html[dir="rtl"] .brandname{ text-align:right; }
html[dir="rtl"] .hero .cta{ justify-content:flex-start; }
html[dir="rtl"] .hero-cards{ direction:rtl; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] p{ text-align:right; }

/* Google Maps embed */
.map-embed{width:100%;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.12)}
.map-embed iframe{width:100%;height:220px;border:0;display:block}


/* Remontada: Footer Google Map (single instance) */
.remontada-footer-map{
  width:100%;
  margin-top:40px;
}
.remontada-footer-map iframe{
  width:100%;
  height:280px;
  border:0;
  border-radius:0;
  display:block;
}
@media (max-width:768px){
  .remontada-footer-map iframe{height:220px;}
}