:root{
  --navy:#071f3d;
  --blue:#113d66;
  --gold:#c6a15b;
  --gold2:#e0c47b;
  --cream:#f7f2e9;
  --white:#fff;
  --text:#172033;
  --muted:#65758a;
  --shadow:0 18px 55px rgba(7,31,61,.16);
  --radius:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Tajawal','Inter',Arial,sans-serif;color:var(--text);background:#fff}
body.en{direction:ltr}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.container{width:min(1180px,92vw);margin:auto}
.topbar{background:linear-gradient(90deg,var(--navy),var(--blue));color:#fff;font-size:14px}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;padding:11px 0;gap:16px}
.top-contact{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.top-contact a,.top-contact span{color:#fff;opacity:.95}
.lang-toggle{border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:white;padding:9px 16px;border-radius:999px;font-weight:800;cursor:pointer}
.navbar{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.95);backdrop-filter:blur(14px);border-bottom:1px solid rgba(7,31,61,.08)}
.nav-inner{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:14px 0}
.brand{display:flex;align-items:center;gap:13px}
.brand img{width:70px;height:70px;object-fit:cover;border-radius:19px;box-shadow:var(--shadow)}
.brand strong{display:block;color:var(--navy);font-size:20px;font-weight:900}
.brand span{font-size:13px;color:var(--muted);font-weight:700}
.nav-links{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.nav-links a{font-weight:800;color:var(--navy)}
.hero{min-height:88vh;position:relative;display:flex;align-items:center;overflow:hidden}
.hero-media,.hero-media img,.hero-shade{position:absolute;inset:0;width:100%;height:100%}
.hero-media img{object-fit:cover}
.hero-shade{background:linear-gradient(103deg,rgba(7,31,61,.92),rgba(7,31,61,.63),rgba(7,31,61,.22))}
.hero-content{position:relative;z-index:2;padding:82px 0}
.hero-panel{width:min(690px,100%);background:rgba(255,255,255,.93);border:1px solid rgba(255,255,255,.4);box-shadow:var(--shadow);border-radius:36px;padding:36px}
.badge,.section-label{display:inline-block;color:#8b641f;background:rgba(198,161,91,.17);padding:9px 15px;border-radius:999px;font-weight:900;margin-bottom:13px}
.hero h1{font-size:clamp(38px,5vw,66px);line-height:1.08;margin:0 0 18px;color:var(--navy)}
.hero p{font-size:19px;line-height:1.9;color:#334155;margin:0 0 26px}
.actions{display:flex;gap:13px;flex-wrap:wrap}
.btn{display:inline-flex;min-height:54px;padding:0 24px;align-items:center;justify-content:center;border-radius:999px;font-weight:900;transition:.2s}
.btn:hover{transform:translateY(-2px)}
.primary{background:linear-gradient(135deg,var(--gold),var(--gold2));color:white;box-shadow:0 12px 24px rgba(198,161,91,.28)}
.secondary{background:var(--navy);color:white}
.secondary.light{background:white;color:var(--navy)}
.quick-info{margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.quick-info div{background:var(--navy);color:#fff;border-radius:20px;padding:18px}
.quick-info strong{display:block;font-size:25px}
.quick-info span{font-weight:700;opacity:.87}
.feature-strip{padding:0 0 50px;background:#fff}
.feature-grid{margin-top:-42px;position:relative;z-index:3;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.feature-grid article{background:white;border-radius:24px;padding:24px;box-shadow:var(--shadow);text-align:center}
.feature-grid span{font-size:34px}
.feature-grid h3{margin:10px 0;color:var(--navy);font-size:21px}
.feature-grid p{margin:0;color:var(--muted);line-height:1.7}
.section{padding:88px 0}
.about,.gallery{background:#fff}
.rooms,.facilities{background:var(--cream)}
.split{display:grid;grid-template-columns:1.03fr .97fr;gap:36px;align-items:center}
.copy h2,.center-head h2,.contact h2{font-size:clamp(30px,4vw,45px);color:var(--navy);line-height:1.22;margin:0 0 18px}
.copy p,.center-head p,.contact p{font-size:18px;color:#49566a;line-height:1.9}
.ticks{display:grid;gap:12px;margin-top:20px}
.ticks div{background:#fff;border:1px solid #e8edf3;border-radius:16px;padding:14px 16px;font-weight:800;color:var(--navy)}
.image-frame img{border-radius:32px;box-shadow:var(--shadow);height:520px;width:100%;object-fit:cover}
.center-head{text-align:center;margin-bottom:34px}
.cards{display:grid;gap:22px}
.cards.three{grid-template-columns:repeat(3,1fr)}
.cards.four{grid-template-columns:repeat(4,1fr)}
.card,.mini{background:#fff;border-radius:26px;overflow:hidden;box-shadow:var(--shadow)}
.card img,.mini img{height:245px;width:100%;object-fit:cover}
.card div{padding:23px}
.card h3,.mini h3{margin:0 0 10px;color:var(--navy);font-size:23px}
.card p{margin:0;color:#5a687b;line-height:1.8}
.mini h3{padding:18px;font-size:20px}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gallery-grid img{height:265px;width:100%;object-fit:cover;border-radius:24px;box-shadow:var(--shadow)}
.contact{background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff}
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px}
.contact-panel,.address-panel{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);backdrop-filter:blur(10px);border-radius:32px;padding:34px}
.contact .section-label{background:rgba(255,255,255,.14);color:#fff}
.contact h2,.address-panel h3{color:white}
.contact p,.address-panel p{color:rgba(255,255,255,.9);line-height:1.9;font-size:18px}
.footer{background:#05182e;color:white;text-align:center}
.footer-inner{padding:24px 0}
.footer p{margin:5px 0}
.floating-whatsapp{position:fixed;right:22px;bottom:22px;z-index:60;background:#25d366;color:#fff;border-radius:999px;padding:16px 20px;font-weight:900;box-shadow:0 14px 30px rgba(37,211,102,.3)}
body.en .floating-whatsapp{right:auto;left:22px}
@media(max-width:980px){
  .feature-grid,.cards.three,.cards.four,.gallery-grid,.split,.contact-grid{grid-template-columns:1fr 1fr}
  .nav-inner{align-items:flex-start;flex-direction:column}
}
@media(max-width:720px){
  .topbar-inner{align-items:flex-start;flex-direction:column}
  .hero{min-height:auto}
  .hero-content{padding:50px 0}
  .hero-panel{padding:24px;border-radius:28px}
  .quick-info,.feature-grid,.cards.three,.cards.four,.gallery-grid,.split,.contact-grid{grid-template-columns:1fr}
  .image-frame img{height:350px}
  .nav-links{gap:13px}
  .brand img{width:60px;height:60px}
}