:root{
  --bg-1:#0b0b0f;       /* أسود غامق */
  --bg-2:#111111;       /* أسود */
  --bg-3:#1a1a1a;       /* أسود أفتح */
  --text-1:#ffffff;     /* أبيض */
  --text-2:#bbbbbb;     /* رمادي */
  --brand:#FFD600;      /* أصفر أساسي */
  --brand-2:#e6c200;    /* أصفر غامق */
  --line:#333333;
  --success:#35c76d;
  --danger:#ff4d6d;
  --radius:1.25rem;
  --shadow:0 10px 30px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html,body{height:100%;scroll-behavior:smooth}
body{background:var(--bg-1);color:var(--text-1);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji"}

.topbar{font-size:.925rem;border-bottom:1px solid var(--line);background:linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255,255,255,0))}
.topbar a{color:var(--text-2);text-decoration:none}
.topbar a:hover{color:var(--brand)}

.navbar{transition:background-color .3s ease, box-shadow .3s ease;background:transparent}
.navbar.scrolled{background:var(--bg-3);box-shadow:var(--shadow)}
.navbar-brand img{height:40px;width:auto;margin-right:.6rem}
.nav-link{color:var(--text-2)!important;font-weight:500}
.nav-link.active,.nav-link:hover{color:var(--brand)!important}

.btn-brand{
  --bs-btn-bg:var(--brand);
  --bs-btn-border-color:var(--brand);
  --bs-btn-color:#000000;
  --bs-btn-hover-bg:var(--brand-2);
  --bs-btn-hover-border-color:var(--brand-2);
  border-radius:999px;
  font-weight:700;
  box-shadow:0 8px 22px rgba(0,0,0,.35)
}
.btn-outline-ghost{
  border:1px solid var(--line);
  color:var(--text-1);
  border-radius:999px;
  background:transparent
}
.btn-outline-ghost:hover{
  border-color:var(--brand);
  color:var(--brand)
}

.hero{position:relative;min-height:88vh;display:grid;place-items:center;overflow:hidden}
.hero video,.hero .fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.55)}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 15% 20%, rgba(255,214,0,.18) 0%, transparent 45%), radial-gradient(ellipse at 85% 80%, rgba(255,214,0,.12) 0%, transparent 55%);pointer-events:none}
.hero .card{background:rgba(17,17,17,.75);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:calc(var(--radius) + .5rem)}
.hero .floating-badges{display:flex;gap:.5rem;flex-wrap:wrap}
.badge-soft{border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--text-1);padding:.45rem .7rem;border-radius:999px;font-size:.8rem}

section{padding:72px 0}
.section-title{display:flex;align-items:center;gap:.75rem;color:var(--brand)}
.section-title .bar{height:2px;width:40px;background:var(--brand);opacity:.9}

.fh-card{
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  height:100%;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease
}
.fh-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 38px rgba(0,0,0,.6);
  border-color:var(--brand)
}
.fh-card .icon{
  font-size:1.8rem;
  width:3.1rem;
  height:3.1rem;
  display:grid;
  place-items:center;
  border-radius:.9rem;
  background:rgba(255,214,0,.15);
  color:var(--brand)
}

.service-3d{perspective:900px}
.service-3d .fh-card{transform-style:preserve-3d}
.service-3d .fh-card:hover{transform:translateY(-6px) rotateX(3deg) rotateY(-3deg)}

.booking{
  background:linear-gradient(180deg, rgba(255,214,0,.08), rgba(0,0,0,0));
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}
.form-control,.form-select{
  background:#111111;
  border:1px solid var(--line);
  color:var(--text-1);
  border-radius:.9rem
}
.form-control::placeholder{color:#7f83a1}

footer{background:var(--bg-2);border-top:1px solid var(--line)}
.social a{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--text-1);
  transition:transform .2s ease,border-color .2s ease
}
.social a:hover{
  border-color:var(--brand);
  color:var(--brand);
  transform:translateY(-3px)
}

.muted{color:var(--text-2)}
.rounded-2xl{border-radius:1.5rem}
.lazy{opacity:0;transition:opacity .4s ease}
.lazy.loaded{opacity:1}
/* Hero heading & paragraph clearer */
.hero h1 {
  color: #ffffff !important;   /* أبيض ناصع */
  font-weight: 800;
  text-shadow: 0 2px 6px rgba(0,0,0,0.7); /* يضيف وضوح على الخلفية */
}

.hero p {
  color: #f0f0f0 !important;   /* رمادي فاتح واضح */
  font-size: 1.1rem;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
/* Footer text & links white */
footer,
footer p,
footer span,
footer li,
footer a {
  color: #ffffff !important;
}

footer a {
  text-decoration: none;
}

footer a:hover {
  color: var(--brand) !important; /* عند المرور يتحول للأصفر */
}