*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:          #FFFFFF;
  --bg2:         #F5F5F3;
  --bg3:         #F0EFEC;
  --tp:          #1A1A1A;
  --ts:          #6B6B6B;
  --tl:          #9A9A9A;
  --gold:        #C9A96E;
  --gold2:       #A8824A;
  --dark:        #1A1A1A;
  --border:      #E8E8E4;
  --r:           16px;
  --ease:        cubic-bezier(.25,.46,.45,.94);
  --nav-h:       80px;
}
html { scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; }
body { font-family: 'Noto Naskh Arabic', serif; color: var(--tp); background: var(--bg); overflow-x: hidden; max-width: 100vw; line-height: 1.65; }
img  { display: block; width: 100%; height: 100%; object-fit: cover; }
a    { text-decoration: none; color: inherit; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 3px; }


.container  { max-width: 1280px; margin: 0 auto; padding: 0 2rem; }
.lbl        { font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: .9rem; }
.h2         { font-family: 'Noto Naskh Arabic', serif; font-size: clamp(2rem,4vw,3.3rem); font-weight: 400; line-height: 1.15; }
.h2 em      { font-style: italic; color: var(--gold); }
.desc       { font-size: .97rem; color: var(--ts); line-height: 1.85; max-width: 520px; }
.gold-line  { width: 55px; height: 2px; background: linear-gradient(90deg,var(--gold),transparent); margin: 1.3rem 0; }


.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 2rem; font-family: 'Noto Naskh Arabic', serif; font-size:.82rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; border:none; cursor:pointer; transition:all .35s var(--ease); border-radius:4px; }
.btn-gold    { background:var(--gold); color:#fff; }
.btn-gold:hover  { background:var(--gold2); transform:translateY(-2px); box-shadow:0 8px 24px rgba(201,169,110,.35); }
.btn-outline { background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.5); }
.btn-outline:hover { background:rgba(255,255,255,.12); border-color:#fff; transform:translateY(-2px); }
.btn-dark   { background:transparent; color:var(--tp); border:1.5px solid var(--tp); }
.btn-dark:hover { background:var(--tp); color:#fff; transform:translateY(-2px); }


.rev  { opacity:0; transform:translateY(36px); transition:opacity .7s ease,transform .7s ease; }
.revL { opacity:0; transform:translateX(-44px); transition:opacity .7s ease,transform .7s ease; }
.revR { opacity:0; transform:translateX(44px); transition:opacity .7s ease,transform .7s ease; }
.rev.on,.revL.on,.revR.on { opacity:1; transform:none; }


.icon { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }


#nav { position:fixed; top:0; inset-inline:0; z-index:900; height:var(--nav-h); display:flex; align-items:center; padding:0 2.5rem; transition:all .4s var(--ease); }
#nav.sc { background:rgba(255,255,255,.96); backdrop-filter:blur(14px); box-shadow:0 2px 28px rgba(0,0,0,.07); }
.nav-in { width:100%; max-width:1280px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; }
.nav-logo .lg  { font-family: 'Noto Naskh Arabic', serif; font-size:1rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.8); transition:color .4s; }
.nav-logo .lm  { font-family: 'Noto Naskh Arabic', serif; font-size:1.55rem; font-weight:600; color:var(--gold); display:block; line-height:1; }
.nav-logo .ll  { font-family: 'Noto Naskh Arabic', serif; font-size:.58rem; letter-spacing:.28em; text-transform:uppercase; color:rgba(255,255,255,.55); transition:color .4s; font-weight:300; }
#nav.sc .lg, #nav.sc .ll { color:var(--ts); }
.nav-ul { display:flex; align-items:center; gap:1.8rem; list-style:none; }
.nav-ul a { font-family: 'Noto Naskh Arabic', serif; font-size:.75rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.85); transition:color .3s; position:relative; }
.nav-ul a::after { content:''; position:absolute; bottom:-3px; right:0; left:100%; height:1px; background:var(--gold); transition:left .3s; }
.nav-ul a:hover::after { left:0; }
.nav-ul a:hover { color:var(--gold); }
#nav.sc .nav-ul a { color:var(--tp); }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; }
.hamburger span { width:24px; height:2px; background:#fff; border-radius:2px; transition:all .35s; }
#nav.sc .hamburger span { background:var(--tp); }
.mob-menu { display:none; position:fixed; top:var(--nav-h); inset:0; background:rgba(255,255,255,.97); backdrop-filter:blur(20px); z-index:850; flex-direction:column; align-items:center; justify-content:center; gap:2.2rem; }
.mob-menu.open { display:flex; }
.mob-menu a { font-family: 'Noto Naskh Arabic', serif; font-size:2rem; color:var(--tp); transition:color .3s; }
.mob-menu a:hover { color:var(--gold); }


#hero { position:relative; width:100%; height:100vh; min-height:680px; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.hero-bg { position:absolute; inset:0; animation:hzoom 8s ease-out forwards; }
@keyframes hzoom { from{transform:scale(1.08)} to{transform:scale(1)} }
.hero-ov { position:absolute; inset:0; background:linear-gradient(155deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.3) 50%,rgba(0,0,0,.62) 100%); }
.hero-c { position:relative; text-align:center; color:#fff; padding:0 1.5rem; animation:hfade 1.1s ease .25s both; }
@keyframes hfade { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:none} }
.hero-stars { display:flex; align-items:center; justify-content:center; gap:4px; margin-bottom:1rem; }
.hero-stars svg { width:22px; color:#FFD97A; fill:#FFD97A; filter:drop-shadow(0 0 6px rgba(255,210,100,.7)); }
.hero-tag { font-size:.78rem; letter-spacing:.3em; text-transform:uppercase; color:#fff; margin-bottom:1.3rem; font-weight:600; text-shadow:0 1px 12px rgba(0,0,0,.6); }
.hero-t { font-family: 'Noto Naskh Arabic', serif; font-size:clamp(2.8rem,7vw,6.2rem); font-weight:300; line-height:1.05; max-width:860px; margin:0 auto 1.4rem; }
.hero-t em { font-style:italic; color:var(--gold); }
.hero-sub { font-size:1rem; color:rgba(255,255,255,.78); margin-bottom:2.3rem; max-width:480px; margin-inline:auto; }
.hero-cta { display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap; }
.scroll-hint { position:absolute; bottom:2.5rem; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:.4rem; color:rgba(255,255,255,.55); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; animation:bounce 2.2s infinite; }
.scroll-hint svg { width:18px; }
@keyframes bounce { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(6px)} }


#stats { background:var(--dark); padding:1.8rem 0; }
.stats-g { display:grid; grid-template-columns:repeat(4,1fr); }
.stat { text-align:center; padding:1.4rem 1rem; border-left:1px solid rgba(255,255,255,.08); }
.stat:last-child { border-left:none; }
.stat-n { font-family: 'Noto Naskh Arabic', serif; font-size:2.8rem; font-weight:300; color:var(--gold); display:block; line-height:1; }
.stat-l { font-size:.72rem; text-transform:uppercase; letter-spacing:.15em; color:rgba(255,255,255,.45); margin-top:.3rem; }


#about { padding:7rem 0; }
.about-g { display:grid; grid-template-columns:1fr 1fr; gap:5.5rem; align-items:center; }
.about-img-wrap { position:relative; }
.about-img { width:100%; height:540px; border-radius:var(--r); overflow:hidden; }
.about-badge { position:absolute; bottom:-1.8rem; left:-1.8rem; width:155px; height:155px; background:var(--gold); border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; box-shadow:0 8px 28px rgba(201,169,110,.4); }
.about-badge .bn { font-family: 'Noto Naskh Arabic', serif; font-size:2.8rem; font-weight:300; line-height:1; }
.about-badge .bt { font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; opacity:.9; line-height:1.3; text-align:center; }
.about-feats { display:grid; grid-template-columns:1fr 1fr; gap:.9rem; margin-top:2rem; }
.af { display:flex; align-items:flex-start; gap:.75rem; padding:1rem; background:var(--bg2); border-radius:10px; border:1px solid var(--border); transition:all .35s; cursor:default; }
.af:hover { border-color:var(--gold); transform:translateY(-3px); }
.af-ico { width:40px; height:40px; background:linear-gradient(135deg,var(--gold),#E8C98A); border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.af-ico svg { width:20px; color:#fff; }
.af-txt strong { display:block; font-size:.85rem; font-weight:700; }
.af-txt span   { font-size:.78rem; color:var(--ts); }


#rooms { padding:7rem 0; background:var(--bg2); }
.sec-hdr { text-align:center; margin-bottom:3.2rem; }
.sec-hdr .desc { margin:0 auto; }
.filter-bar { display:flex; align-items:center; justify-content:center; gap:.65rem; flex-wrap:wrap; margin-bottom:2.8rem; }
.fb { padding:.5rem 1.3rem; font-family: 'Noto Naskh Arabic', serif; font-size:.78rem; font-weight:600; background:transparent; border:1.5px solid var(--border); border-radius:100px; cursor:pointer; color:var(--ts); transition:all .3s; }
.fb.active,.fb:hover { background:var(--gold); border-color:var(--gold); color:#fff; }
.rooms-g { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.room-card { background:var(--bg); border-radius:var(--r); overflow:hidden; border:1px solid var(--border); box-shadow:0 4px 18px rgba(0,0,0,.04); transition:all .4s var(--ease); cursor:pointer; }
.room-card:hover { transform:translateY(-8px); box-shadow:0 20px 48px rgba(0,0,0,.11); }
.rc-img { position:relative; height:235px; overflow:hidden; }
.rc-img img { transition:transform .6s ease; }
.room-card:hover .rc-img img { transform:scale(1.07); }
.rbadge { position:absolute; top:1rem; right:1rem; background:var(--gold); color:#fff; font-size:.67rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:.28rem .8rem; border-radius:100px; }
.rc-body { padding:1.5rem; }
.rc-cat { font-size:.68rem; text-transform:uppercase; letter-spacing:.2em; color:var(--gold); font-weight:700; margin-bottom:.35rem; }
.rc-name { font-family: 'Noto Naskh Arabic', serif; font-size:1.42rem; font-weight:500; margin-bottom:.75rem; }
.rc-feats { display:flex; gap:.9rem; flex-wrap:wrap; margin-bottom:.9rem; }
.rcf { font-size:.76rem; color:var(--ts); display:flex; align-items:center; gap:.3rem; }
.rcf svg { width:14px; color:var(--gold); }
.rc-div { height:1px; background:var(--border); margin:.9rem 0; }
.rc-foot { display:flex; align-items:center; justify-content:space-between; }
.rc-price-lbl { font-size:.7rem; color:var(--tl); text-transform:uppercase; letter-spacing:.08em; }
.rc-price { font-family: 'Noto Naskh Arabic', serif; font-size:1.55rem; font-weight:500; }
.rc-book { padding:.52rem 1.1rem; font-size:.77rem; font-weight:700; text-transform:uppercase; background:var(--dark); color:#fff; border:none; border-radius:6px; cursor:pointer; transition:all .3s; }
.rc-book:hover { background:var(--gold); transform:scale(1.04); }


#dining { padding:7rem 0; }
.dining-hdr { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:end; margin-bottom:3.5rem; }
.dining-g { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.dc { background:var(--bg3); border-radius:var(--r); overflow:hidden; border:1px solid var(--border); transition:all .4s var(--ease); cursor:pointer; }
.dc:hover { transform:translateY(-8px); box-shadow:0 20px 40px rgba(0,0,0,.1); }
.dc-img { height:215px; overflow:hidden; position:relative; }
.dc-img img { transition:transform .6s ease; }
.dc:hover .dc-img img { transform:scale(1.07); }
.dc-tag { position:absolute; bottom:.9rem; right:.9rem; background:rgba(0,0,0,.6); backdrop-filter:blur(6px); color:#fff; font-size:.67rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:.28rem .8rem; border-radius:100px; border:1px solid rgba(255,255,255,.15); }
.dc-body { padding:1.4rem; }
.dc-name { font-family: 'Noto Naskh Arabic', serif; font-size:1.45rem; font-weight:500; margin-bottom:.45rem; }
.dc-desc { font-size:.84rem; color:var(--ts); line-height:1.72; margin-bottom:.85rem; }
.dc-hrs  { font-size:.74rem; color:var(--gold); font-weight:600; display:flex; align-items:center; gap:.4rem; }
.dc-hrs svg { width:14px; }
.dc.feat { grid-column:span 2; }
.dc.feat .dc-img { height:290px; }


#facilities { padding:7rem 0; background:var(--bg2); }
.fac-g { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.fac { background:var(--bg); border-radius:var(--r); padding:2.2rem 1.8rem; border:1px solid var(--border); transition:all .35s; text-align:center; cursor:pointer; }
.fac:hover { transform:translateY(-6px); border-color:var(--gold); box-shadow:0 15px 38px rgba(201,169,110,.12); }
.fac-ico { width:68px; height:68px; background:linear-gradient(135deg,var(--gold),#E8C98A); border-radius:18px; display:flex; align-items:center; justify-content:center; margin:0 auto 1.4rem; transition:transform .35s; }
.fac:hover .fac-ico { transform:scale(1.1) rotate(5deg); }
.fac-ico svg { width:30px; color:#fff; }
.fac-name { font-family: 'Noto Naskh Arabic', serif; font-size:1.28rem; font-weight:500; margin-bottom:.5rem; }
.fac-desc { font-size:.84rem; color:var(--ts); line-height:1.72; }
.pool-bar { margin-top:2.8rem; border-radius:var(--r); overflow:hidden; position:relative; height:310px; cursor:pointer; }
.pool-bar img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.pool-bar:hover img { transform:scale(1.04); }
.pool-ov { position:absolute; inset:0; background:linear-gradient(to left,rgba(0,0,0,.62) 40%,transparent); display:flex; align-items:center; padding:3rem; }
.pool-ov-c { color:#fff; max-width:430px; }
.pool-ov-c h3 { font-family: 'Noto Naskh Arabic', serif; font-size:2.1rem; font-weight:400; margin-bottom:.7rem; }
.pool-ov-c p  { font-size:.93rem; color:rgba(255,255,255,.73); margin-bottom:1.4rem; line-height:1.72; }


#spa { position:relative; min-height:580px; overflow:hidden; }
.spa-bg { position:absolute; inset:0; }
.spa-ov { position:absolute; inset:0; background:linear-gradient(135deg,rgba(8,6,4,.88),rgba(8,6,4,.58)); }
.spa-in { position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; padding:7rem 2rem; max-width:1280px; margin:0 auto; }
.spa-c .lbl,.spa-c .h2 { color:#fff; }
.spa-c .h2 em { color:var(--gold); }
.spa-c .gold-line { background:linear-gradient(90deg,var(--gold),transparent); }
.spa-p { font-size:.94rem; color:rgba(255,255,255,.68); line-height:1.82; margin-bottom:1.9rem; }
.spa-svcs { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin-bottom:2.2rem; }
.spa-sv { display:flex; align-items:center; gap:.7rem; color:rgba(255,255,255,.78); font-size:.84rem; }
.spa-sv svg { width:14px; color:var(--gold); flex-shrink:0; }
.spa-nums { display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
.spa-ni { text-align:center; }
.spa-ni .n { font-family: 'Noto Naskh Arabic', serif; font-size:3.3rem; font-weight:300; color:var(--gold); display:block; line-height:1; }
.spa-ni .l { font-size:.73rem; text-transform:uppercase; letter-spacing:.15em; color:rgba(255,255,255,.48); margin-top:.35rem; }


#events { padding:7rem 0; }
.ev-g { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; margin-top:2.8rem; }
.ev-img { border-radius:var(--r); overflow:hidden; height:460px; position:relative; }
.ev-img img { width:100%; height:100%; object-fit:cover; }
.ev-bdg { position:absolute; top:1.5rem; left:1.5rem; background:var(--gold); color:#fff; padding:.9rem 1.3rem; border-radius:12px; text-align:center; }
.ev-bdg strong { display:block; font-family: 'Noto Naskh Arabic', serif; font-size:1.9rem; line-height:1; }
.ev-bdg span   { font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; opacity:.9; }
.ev-list { display:flex; flex-direction:column; gap:1.3rem; }
.ev-item { display:flex; gap:1.3rem; padding:1.3rem; border:1px solid var(--border); border-radius:12px; transition:all .35s; cursor:pointer; }
.ev-item:hover { border-color:var(--gold); transform:translateX(-6px); box-shadow:0 8px 22px rgba(201,169,110,.1); }
.ev-ico { width:56px; height:56px; background:var(--bg2); border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ev-ico svg { width:24px; color:var(--gold); }
.ev-info strong { display:block; font-family: 'Noto Naskh Arabic', serif; font-size:1.12rem; margin-bottom:.25rem; }
.ev-info p { font-size:.82rem; color:var(--ts); line-height:1.6; }


#gallery { padding:7rem 0; background:var(--bg2); }
.gal-g { display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem; }
.gi { border-radius:10px; overflow:hidden; cursor:pointer; position:relative; }
.gi img { width:100%; height:195px; object-fit:cover; transition:transform .5s ease; }
.gi:hover img { transform:scale(1.08); }
.gi.tall img { height:400px; }
.gi.wide { grid-column:span 2; }
.gi.wide img { height:195px; }
.gi-ov { position:absolute; inset:0; background:rgba(0,0,0,0); display:flex; align-items:center; justify-content:center; transition:background .3s; }
.gi:hover .gi-ov { background:rgba(0,0,0,.33); }
.gi-ov svg { width:36px; color:#fff; opacity:0; transform:scale(.7); transition:all .3s; }
.gi:hover .gi-ov svg { opacity:1; transform:scale(1); }


.lb { display:none; position:fixed; inset:0; z-index:9900; background:rgba(0,0,0,.92); align-items:center; justify-content:center; }
.lb.open { display:flex; }
.lb-img { max-width:90vw; max-height:86vh; border-radius:8px; object-fit:contain; }
.lb-x { position:absolute; top:1.4rem; left:2rem; color:#fff; font-size:2rem; cursor:pointer; background:none; border:none; line-height:1; transition:color .2s; }
.lb-x:hover { color:var(--gold); }
.lb-nav { position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:#fff; font-size:1.4rem; width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .3s; }
.lb-nav:hover { background:var(--gold); border-color:var(--gold); }
.lb-prev { right:1.4rem; }
.lb-next { left:1.4rem; }


#contact { padding:7rem 0; }
.cont-g { display:grid; grid-template-columns:1fr 1.2fr; gap:5rem; }
.ci-list { display:flex; flex-direction:column; gap:1.8rem; margin-top:2.2rem; }
.ci-item { display:flex; gap:1.1rem; align-items:flex-start; }
.ci-ico  { width:46px; height:46px; background:linear-gradient(135deg,var(--gold),#E8C98A); border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ci-ico svg { width:22px; color:#fff; }
.ci-txt strong { display:block; font-size:.76rem; text-transform:uppercase; letter-spacing:.12em; color:var(--tl); margin-bottom:.25rem; }
.ci-txt span   { font-size:.94rem; }
.map-w { margin-top:1.8rem; border-radius:var(--r); overflow:hidden; height:195px; border:1px solid var(--border); }
.map-w iframe { width:100%; height:100%; border:none; }
.book-form { background:var(--bg2); border-radius:var(--r); padding:2.3rem; border:1px solid var(--border); }
.ft { font-family: 'Noto Naskh Arabic', serif; font-size:1.75rem; margin-bottom:.35rem; }
.fs { font-size:.84rem; color:var(--ts); margin-bottom:1.6rem; }
.fr { display:grid; grid-template-columns:1fr 1fr; gap:.9rem; margin-bottom:.9rem; }
.fg { display:flex; flex-direction:column; gap:.35rem; }
.fg.full { grid-column:span 2; }
.fl { font-size:.73rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--ts); }
.fi,.fsel,.fta { font-family: 'Noto Naskh Arabic', serif; font-size:.88rem; padding:.75rem .95rem; border:1.5px solid var(--border); border-radius:8px; background:var(--bg); color:var(--tp); transition:border-color .3s; outline:none; }
.fi:focus,.fsel:focus,.fta:focus { border-color:var(--gold); }
.fta { resize:vertical; min-height:85px; }
.fsub { width:100%; margin-top:.4rem; justify-content:center; }


#footer { background:var(--dark); color:rgba(255,255,255,.6); padding:4.5rem 0 2rem; }
.foot-g { display:grid; grid-template-columns:1.8fr 1fr 1fr 1fr; gap:3rem; padding-bottom:2.8rem; border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:1.8rem; }
.foot-brand .flg  { font-family: 'Noto Naskh Arabic', serif; font-size:.88rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.45); }
.foot-brand .flm  { font-family: 'Noto Naskh Arabic', serif; font-size:1.55rem; font-weight:600; color:var(--gold); display:block; }
.foot-brand .fll  { font-family: 'Noto Naskh Arabic', serif; font-size:.58rem; letter-spacing:.28em; text-transform:uppercase; color:rgba(255,255,255,.3); font-weight:300; }
.foot-desc { font-size:.83rem; color:rgba(255,255,255,.45); line-height:1.8; margin:1.1rem 0; }
.socials { display:flex; gap:.65rem; }
.soc { width:36px; height:36px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all .3s; cursor:pointer; }
.soc svg { width:16px; color:rgba(255,255,255,.55); transition:color .3s; }
.soc:hover { background:var(--gold); border-color:var(--gold); transform:translateY(-3px); }
.soc:hover svg { color:#fff; }
.fc h4 { font-family: 'Noto Naskh Arabic', serif; font-size:.73rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.88); margin-bottom:1.1rem; }
.fc ul { list-style:none; display:flex; flex-direction:column; gap:.55rem; }
.fc ul a { font-size:.83rem; color:rgba(255,255,255,.48); transition:color .3s; }
.fc ul a:hover { color:var(--gold); }
.foot-b { display:flex; align-items:center; justify-content:space-between; font-size:.78rem; color:rgba(255,255,255,.28); }
.foot-b a { color:var(--gold); }


#bt { position:fixed; bottom:2rem; left:2rem; width:44px; height:44px; background:var(--gold); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; transform:translateY(18px); transition:all .35s; z-index:500; border:none; box-shadow:0 4px 14px rgba(201,169,110,.4); }
#bt.vis { opacity:1; transform:none; }
#bt:hover { background:var(--gold2); transform:translateY(-4px); }
#bt svg { width:18px; }


.modal-bg { position:fixed; inset:0; z-index:1000; background:rgba(10,8,6,.88); backdrop-filter:blur(8px); opacity:0; pointer-events:none; transition:opacity .4s; display:flex; align-items:center; justify-content:center; padding:1.5rem; }
.modal-bg.open { opacity:1; pointer-events:all; }
.modal { background:var(--bg); border-radius:20px; width:100%; max-width:980px; max-height:90vh; overflow-y:auto; position:relative; transform:translateY(50px) scale(.96); opacity:0; transition:all .4s var(--ease); }
.modal-bg.open .modal { transform:none; opacity:1; }
.modal::-webkit-scrollbar { width:4px; }
.modal::-webkit-scrollbar-thumb { background:var(--gold); border-radius:2px; }
.modal-close { position:sticky; top:1rem; left:1rem; float:left; width:40px; height:40px; background:rgba(0,0,0,.5); border:none; border-radius:50%; color:#fff; font-size:1.1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:10; transition:background .3s; }
.modal-close:hover { background:var(--gold); }
.modal-close svg { width:16px; }
.modal-hero { height:380px; overflow:hidden; border-radius:20px 20px 0 0; position:relative; }
.modal-hero img { width:100%; height:100%; object-fit:cover; }
.modal-hero-ov { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.65),transparent 50%); display:flex; align-items:flex-end; padding:2rem; }
.modal-hero-txt h2 { font-family: 'Noto Naskh Arabic', serif; font-size:2.4rem; color:#fff; font-weight:400; }
.modal-hero-txt p  { font-size:.85rem; color:rgba(255,255,255,.75); margin-top:.3rem; }
.modal-body { padding:2rem 2.5rem 2.5rem; }
.modal-desc { font-size:.95rem; color:var(--ts); line-height:1.85; margin-bottom:1.8rem; }
.modal-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; margin-bottom:1.8rem; }
.modal-gallery .mg-item { border-radius:10px; overflow:hidden; height:160px; cursor:pointer; }
.modal-gallery .mg-item img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.modal-gallery .mg-item:hover img { transform:scale(1.07); }
.modal-info-g { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-bottom:1.8rem; }
.modal-info-item { background:var(--bg2); border-radius:12px; padding:1.1rem; border:1px solid var(--border); display:flex; align-items:center; gap:.9rem; }
.modal-info-item svg { width:20px; color:var(--gold); flex-shrink:0; }
.modal-info-item strong { display:block; font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; color:var(--tl); }
.modal-info-item span  { font-size:.9rem; color:var(--tp); font-weight:500; }
.modal-tags { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.8rem; }
.mtag { padding:.35rem .9rem; background:var(--bg3); border-radius:100px; font-size:.76rem; font-weight:600; color:var(--ts); border:1px solid var(--border); }


#intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #FAFAF8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
}

#intro-overlay.fade-out {
  animation: introFadeOut 1s ease forwards;
}

@keyframes introFadeOut {
  to { opacity: 0; pointer-events: none; }
}

.intro-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  transform: scale(3.2);
  opacity: 0;
  animation: introZoomOut 2.2s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
  will-change: transform, opacity;
}

@keyframes introZoomOut {
  0%   { transform: scale(3.2); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}


.intro-columns {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  margin-bottom: 14px;
}

.intro-col {
  width: 9px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, #D4AF6E 0%, #B8903A 100%);
  box-shadow: 0 2px 8px rgba(201,169,110,0.3);
}


.intro-text-grand {
  font-family: 'Noto Naskh Arabic', serif;
  font-size: 0.65rem;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: #1A1A1A;
  opacity: 0;
  animation: introTextReveal 0.6s ease 1.8s forwards;
}

.intro-text-millennium {
  font-family: 'Noto Naskh Arabic', serif;
  font-size: 1.7rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #1A1A1A;
  line-height: 1;
  opacity: 0;
  animation: introTextReveal 0.6s ease 2s forwards;
}

.intro-text-location {
  font-family: 'Noto Naskh Arabic', serif;
  font-size: 0.55rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #6B6B6B;
  margin-top: 4px;
  opacity: 0;
  animation: introTextReveal 0.6s ease 2.2s forwards;
}

@keyframes introTextReveal {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}


@media(max-width:1100px) {
  .rooms-g { grid-template-columns:repeat(2,1fr); }
  .dining-g { grid-template-columns:1fr 1fr; }
  .dc.feat { grid-column:span 2; }
  .fac-g { grid-template-columns:repeat(2,1fr); }
  .foot-g { grid-template-columns:1fr 1fr; gap:2rem; }
}
@media(max-width:860px) {
  .nav-ul { display:none; }
  .hamburger { display:flex; }
  .about-g { grid-template-columns:1fr; gap:3rem; }
  .about-badge { bottom:-1rem; left:-.5rem; width:120px; height:120px; }
  .about-badge .bn { font-size:2.1rem; }
  .stats-g { grid-template-columns:repeat(2,1fr); }
  .dining-hdr { grid-template-columns:1fr; gap:1.5rem; }
  .dining-g { grid-template-columns:1fr; }
  .dc.feat { grid-column:span 1; }
  .ev-g { grid-template-columns:1fr; }
  .cont-g { grid-template-columns:1fr; gap:3rem; }
  .gal-g { grid-template-columns:repeat(2,1fr); }
  .gi.wide { grid-column:span 2; }
  .gi.tall img { height:260px; }
  .spa-in { grid-template-columns:1fr; gap:3rem; padding:5rem 2rem; }
  .foot-g { grid-template-columns:1fr; }
  .modal-gallery { grid-template-columns:1fr 1fr; }
  .modal-info-g { grid-template-columns:1fr; }
}
@media(max-width:600px) {
  .hero-t { font-size:clamp(2.2rem,9vw,3rem); }
  .rooms-g { grid-template-columns:1fr; }
  .fac-g { grid-template-columns:1fr; }
  .fr { grid-template-columns:1fr; }
  .fg.full { grid-column:span 1; }
  .gal-g { grid-template-columns:1fr 1fr; }
  .foot-b { flex-direction:column; gap:.5rem; text-align:center; }
  .modal-gallery { grid-template-columns:1fr; }
}

/* =========================================================
   TABLET  481px – 768px
   ========================================================= */
@media(max-width:768px) {
  :root { --nav-h: 64px; }

  .container { padding:0 1.2rem; }

  /* NAV */
  #nav { padding:0 1.2rem; }
  .nav-ul { display:none; }
  .hamburger { display:flex; }
  .mob-menu a { font-size:1.5rem; gap:1.8rem; }

  /* HERO */
  #hero { min-height:520px; }
  .hero-t { font-size:clamp(2rem,8vw,3.2rem); }
  .hero-sub { font-size:.9rem; }
  .hero-cta { gap:.75rem; }
  .hero-cta .btn { padding:.75rem 1.5rem; font-size:.78rem; }
  .scroll-hint { display:none; }

  /* SECTIONS */
  #about,#rooms,#facilities,#events,#gallery,#contact,#dining,#spa { padding:4.5rem 0; }

  /* STATS */
  .stats-g { grid-template-columns:repeat(2,1fr); }
  .stat-n { font-size:2.2rem; }

  /* ABOUT */
  .about-g { grid-template-columns:1fr; gap:2.5rem; }
  .about-img { height:340px; }
  .about-badge { width:110px; height:110px; bottom:-.8rem; left:-.5rem; }
  .about-badge .bn { font-size:1.9rem; }
  .about-feats { grid-template-columns:1fr 1fr; gap:.7rem; }

  /* ROOMS */
  .rooms-g { grid-template-columns:1fr 1fr; gap:1rem; }
  .rc-img { height:185px; }
  .rc-name { font-size:1.2rem; }
  .rc-price { font-size:1.3rem; }

  /* DINING */
  .dining-hdr { grid-template-columns:1fr; gap:1rem; }
  .dining-g { grid-template-columns:1fr; gap:1rem; }
  .dc.feat { grid-column:span 1; }
  .dc.feat .dc-img { height:230px; }
  .dc-img { height:185px; }

  /* FACILITIES */
  .fac-g { grid-template-columns:1fr 1fr; gap:1rem; }
  .fac { padding:1.6rem 1.2rem; }
  .fac-ico { width:56px; height:56px; }
  .pool-bar { height:240px; }
  .pool-ov-c h3 { font-size:1.6rem; }

  /* SPA */
  .spa-in { grid-template-columns:1fr; gap:2.5rem; padding:4rem 1.2rem; }
  .spa-svcs { grid-template-columns:1fr 1fr; }
  .spa-nums { grid-template-columns:1fr 1fr; gap:1.5rem; }
  .spa-ni .n { font-size:2.5rem; }

  /* EVENTS */
  .ev-g { grid-template-columns:1fr; gap:2rem; }
  .ev-img { height:320px; }

  /* GALLERY */
  .gal-g { grid-template-columns:repeat(2,1fr); gap:.65rem; }
  .gi img { height:155px; }
  .gi.tall img { height:220px; }
  .gi.wide { grid-column:span 2; }
  .gi.wide img { height:155px; }

  /* CONTACT */
  .cont-g { grid-template-columns:1fr; gap:2rem; }
  .book-form { padding:1.8rem 1.4rem; }
  .fr { grid-template-columns:1fr 1fr; gap:.7rem; }

  /* FOOTER */
  .foot-g { grid-template-columns:1fr 1fr; gap:1.8rem; }
  .foot-b { font-size:.72rem; }

  /* MODAL */
  .modal { border-radius:16px; }
  .modal-hero { height:260px; }
  .modal-body { padding:1.5rem 1.5rem 2rem; }
  .modal-gallery { grid-template-columns:1fr 1fr; gap:.6rem; }
  .modal-gallery .mg-item { height:120px; }
  .modal-info-g { grid-template-columns:1fr; gap:.8rem; }

  /* BACK TO TOP */
  #bt { bottom:1.2rem; left:1.2rem; width:40px; height:40px; }

  /* HEADINGS */
  .h2 { font-size:clamp(1.7rem,5vw,2.4rem); }
  .desc { font-size:.9rem; }
}

/* =========================================================
   MOBILE  320px – 480px
   ========================================================= */
@media(max-width:480px) {
  :root { --nav-h: 60px; }

  .container { padding:0 1rem; }

  /* NAV */
  #nav { padding:0 1rem; }
  .nav-logo .lm { font-size:1.25rem; }

  /* HERO */
  #hero { min-height:460px; }
  .hero-tag { font-size:.7rem; letter-spacing:.2em; }
  .hero-t { font-size:clamp(1.9rem,9.5vw,2.6rem); line-height:1.1; }
  .hero-sub { font-size:.84rem; margin-bottom:1.8rem; }
  .hero-cta { flex-direction:column; align-items:center; gap:.7rem; }
  .hero-cta .btn { width:100%; max-width:280px; justify-content:center; }
  .hero-stars svg { width:18px; }

  /* SECTIONS */
  #about,#rooms,#facilities,#events,#gallery,#contact,#dining { padding:3.5rem 0; }
  #stats { padding:1.2rem 0; }

  /* STATS */
  .stats-g { grid-template-columns:repeat(2,1fr); }
  .stat { padding:1rem .6rem; }
  .stat-n { font-size:1.9rem; }
  .stat-l { font-size:.65rem; }

  /* ABOUT */
  .about-g { gap:2rem; }
  .about-img { height:260px; }
  .about-badge { width:95px; height:95px; bottom:-.6rem; left:-.3rem; }
  .about-badge .bn { font-size:1.65rem; }
  .about-badge .bt { font-size:.6rem; }
  .about-feats { grid-template-columns:1fr; gap:.6rem; }
  .af { padding:.8rem; }

  /* FILTER BAR */
  .filter-bar { gap:.45rem; }
  .fb { padding:.42rem 1rem; font-size:.72rem; }

  /* ROOMS */
  .rooms-g { grid-template-columns:1fr; gap:.9rem; }
  .rc-img { height:210px; }
  .rc-body { padding:1.2rem; }
  .rc-name { font-size:1.3rem; }
  .rc-feats { gap:.6rem; }
  .rc-price { font-size:1.35rem; }

  /* DINING */
  .dining-g { gap:.9rem; }
  .dc-img { height:195px; }
  .dc.feat .dc-img { height:210px; }
  .dc-body { padding:1.1rem; }
  .dc-name { font-size:1.25rem; }

  /* FACILITIES */
  .fac-g { grid-template-columns:1fr; gap:.9rem; }
  .fac { padding:1.5rem 1.2rem; }
  .fac-ico { width:52px; height:52px; margin-bottom:1rem; }
  .fac-ico svg { width:24px; }
  .fac-name { font-size:1.1rem; }
  .pool-bar { height:200px; }
  .pool-ov { padding:1.5rem; }
  .pool-ov-c h3 { font-size:1.4rem; }
  .pool-ov-c p { font-size:.82rem; margin-bottom:1rem; }

  /* SPA */
  .spa-in { padding:3.5rem 1rem; gap:2rem; }
  .spa-svcs { grid-template-columns:1fr; gap:.5rem; }
  .spa-nums { grid-template-columns:1fr 1fr; gap:1rem; }
  .spa-ni .n { font-size:2.2rem; }

  /* EVENTS */
  .ev-img { height:240px; }
  .ev-bdg { padding:.7rem 1rem; }
  .ev-bdg strong { font-size:1.5rem; }
  .ev-item { padding:1rem; gap:1rem; }
  .ev-ico { width:46px; height:46px; flex-shrink:0; }
  .ev-info strong { font-size:1rem; }

  /* GALLERY */
  .gal-g { grid-template-columns:repeat(2,1fr); gap:.5rem; }
  .gi img { height:130px; }
  .gi.tall img { height:185px; }
  .gi.wide img { height:130px; }

  /* CONTACT */
  .book-form { padding:1.4rem 1rem; border-radius:12px; }
  .ft { font-size:1.45rem; }
  .fr { grid-template-columns:1fr; gap:.7rem; }
  .fg.full { grid-column:span 1; }
  .ci-list { gap:1.3rem; margin-top:1.5rem; }
  .map-w { height:160px; }

  /* FOOTER */
  .foot-g { grid-template-columns:1fr; gap:1.5rem; padding-bottom:2rem; }
  .foot-b { flex-direction:column; gap:.5rem; text-align:center; font-size:.72rem; }
  #footer { padding:3rem 0 1.5rem; }

  /* MODAL */
  .modal { border-radius:12px; }
  .modal-hero { height:210px; }
  .modal-hero-txt h2 { font-size:1.7rem; }
  .modal-body { padding:1.2rem 1rem 1.5rem; }
  .modal-desc { font-size:.88rem; }
  .modal-gallery { grid-template-columns:1fr; gap:.5rem; }
  .modal-gallery .mg-item { height:160px; }
  .modal-info-g { grid-template-columns:1fr; gap:.6rem; }
  .modal-tags { gap:.4rem; }
  .mtag { font-size:.72rem; }

  /* HEADINGS */
  .h2 { font-size:clamp(1.55rem,6.5vw,2rem); }
  .lbl { font-size:.68rem; }
  .desc { font-size:.87rem; }
  .sec-hdr { margin-bottom:2.2rem; }

  /* BUTTONS */
  .btn { padding:.78rem 1.6rem; font-size:.78rem; }

  /* BACK TO TOP */
  #bt { bottom:1rem; left:1rem; width:38px; height:38px; }
  #bt svg { width:16px; }

  /* MOB MENU */
  .mob-menu a { font-size:1.6rem; }
  .mob-menu { gap:1.8rem; }

  /* IMAGES RESPONSIVE */
  img { max-width:100%; }

  /* INTRO — no scale on mobile, prevents horizontal overflow */
  @keyframes introZoomOut {
    0%   { transform: scale(1.2); opacity: 0; }
    20%  { opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
  }
  .intro-logo-wrap { transform: scale(1.2); }
  #intro-overlay { overflow: hidden; }
  .intro-text-grand, .intro-text-millennium, .intro-text-location { letter-spacing: .15em; }

  /* POOL OVERLAY */
  .pool-ov { padding:1.2rem; }
  .pool-ov-c { max-width:100%; }

  /* ABOUT BADGE — keep inside bounds */
  .about-badge { left:auto; right:1rem; bottom:1rem; }

  /* EVENTS — remove horizontal translateX on hover (causes overflow) */
  .ev-item:hover { transform:none; }

  /* NAV LOGO smaller */
  .nav-logo .lm { font-size:1.1rem; }
  .nav-logo .lg { font-size:.75rem; letter-spacing:.12em; }

  /* HERO padding sides */
  .hero-c { padding:0 1rem; }

  /* FILTER BAR wrap nicely */
  .filter-bar { padding:0 1rem; }

  /* CONTACT form full width inputs */
  .fi,.fsel,.fta { font-size:.9rem; }

  /* MODAL full screen on mobile */
  .modal-bg { padding:.5rem; align-items:flex-end; }
  .modal { border-radius:16px 16px 0 0; max-height:92vh; }
  .modal-hero { height:180px; }
  .modal-hero-txt h2 { font-size:1.5rem; }
  .modal-body { padding:1rem .9rem 1.5rem; }

  /* GALLERY single column on very small */
  .gal-g { grid-template-columns:1fr 1fr; }

  /* SECTION padding */
  #spa { min-height:auto; }
}