@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@600;700&family=Lalezar&family=Reem+Kufi:wght@500;600;700&family=Tajawal:wght@400;500;700;800;900&family=Cairo:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#f3f7fa; --surface:#ffffff; --surface2:#f4f8fb;
  --ink:#0f2535; --muted:#5b7085; --line:#dde6ee;
  --teal:#16b8c9; --teal-d:#0e8fa0; --gold:#e9701f; --gold-soft:#ff8a3d;
  --navy:#0f2e4a;
  --shadow:0 14px 40px -18px rgba(12,26,43,.28);
  --r:16px;
}
:root:not([data-theme="light"]){ @media (prefers-color-scheme:dark){
  --bg:#0a1420; --surface:#10212f; --surface2:#0e1d2a;
  --ink:#eaf2f7; --muted:#93a6b8; --line:#203346;
  --teal:#3ad6e6; --teal-d:#1bb6c8; --gold:#ff9a52; --gold-soft:#8a4a1e;
  --navy:#0a2236; --shadow:0 18px 44px -20px rgba(0,0,0,.6);
}}
:root[data-theme="dark"]{
  --bg:#0a1420; --surface:#10212f; --surface2:#0e1d2a;
  --ink:#eaf2f7; --muted:#93a6b8; --line:#203346;
  --teal:#3ad6e6; --teal-d:#1bb6c8; --gold:#ff9a52; --gold-soft:#8a4a1e;
  --navy:#0a2236; --shadow:0 18px 44px -20px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
body{direction:rtl;background:var(--bg);color:var(--ink);font-family:Tajawal,system-ui,'Segoe UI',sans-serif;line-height:1.7;-webkit-font-smoothing:antialiased}
.wrap{max-width:1120px;margin:0 auto;padding-inline:20px}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:Tajawal,sans-serif;line-height:1.25;text-wrap:balance;margin:0}
.eyebrow{font-family:Tajawal,sans-serif;letter-spacing:.14em;text-transform:none;color:var(--teal-d);font-size:.82rem;font-weight:700}
:root[data-theme="dark"] .eyebrow,:root:not([data-theme="light"]) .eyebrow{color:var(--teal)}
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-family:Tajawal;border-radius:999px;padding:13px 24px;border:1px solid transparent;cursor:pointer;font-size:1rem;transition:transform .12s ease,box-shadow .12s}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:linear-gradient(135deg,var(--gold-soft),var(--gold));color:#2a1e05;box-shadow:0 10px 24px -10px rgba(201,146,39,.6)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-wa{background:#25d366;color:#063d22}

/* header */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-block:14px}
.logo{display:inline-flex;align-items:center;gap:12px;font-family:'El Messiri','Reem Kufi',serif;font-weight:700;text-decoration:none;letter-spacing:.2px}
.logo .mark{width:74px;height:58px;flex:none;background:linear-gradient(135deg,var(--teal),var(--teal-d) 55%,var(--navy));-webkit-mask:url(/assets/logo-mark.png) center/contain no-repeat;mask:url(/assets/logo-mark.png) center/contain no-repeat;animation:wingFloat 5s ease-in-out infinite}
.logo .mark svg{display:none}
@keyframes wingFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-2px) rotate(-2.5deg)}}
@media(prefers-reduced-motion:reduce){.logo .mark{animation:none}}
.logo .nm{display:flex;flex-direction:column;align-items:flex-start;line-height:1}
.logo .nm b{font-family:'Cairo',sans-serif;color:var(--ink);font-weight:800;font-size:2rem;letter-spacing:0}
.logo .nm small{font-family:'Cairo',sans-serif;font-size:.68rem;font-weight:700;letter-spacing:.15em;color:var(--teal-d);margin-top:4px;white-space:nowrap}
:root[data-theme="dark"] .logo .nm small{color:var(--teal)}
.logo .mark::before{display:none}
.logo b{color:var(--teal-d)} :root[data-theme="dark"] .logo b{color:var(--teal)}
.navlinks{display:flex;gap:26px;color:var(--muted);font-weight:600;font-size:.95rem}
.navlinks a:hover{color:var(--ink)}
.navcta{display:flex;gap:10px;align-items:center}
.navtoggle{display:none;width:44px;height:44px;border:1px solid var(--line);background:var(--surface);border-radius:12px;cursor:pointer;place-items:center;color:var(--ink);flex:none}
.navtoggle span,.navtoggle span::before,.navtoggle span::after{display:block;width:20px;height:2px;background:currentColor;border-radius:2px;transition:.22s}
.navtoggle span{position:relative}
.navtoggle span::before,.navtoggle span::after{content:"";position:absolute;inset-inline-start:0}
.navtoggle span::before{top:-6px}.navtoggle span::after{top:6px}
.navtoggle[aria-expanded="true"] span{background:transparent}
.navtoggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.navtoggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* hero */
.hero{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--navy),#123f5e 70%,var(--teal-d));color:#eaf6f4;border-radius:0 0 28px 28px}
.hero::before{content:"";position:absolute;inset:0;opacity:.14;background-image:
  radial-gradient(circle at 12px 12px, rgba(232,182,76,.9) 2px, transparent 2.5px);
  background-size:26px 26px}
.hero::after{content:"";position:absolute;left:-120px;top:-120px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(45,212,191,.35),transparent 65%)}
.hero-in{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:center;padding-block:56px 64px}
.hero h1{font-size:clamp(2.1rem,5vw,3.5rem);color:#fff}
.hero h1 .hl{color:var(--gold-soft)}
.hero p.lead{color:#cfe6e2;font-size:1.12rem;margin:18px 0 26px;max-width:46ch}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-stats{display:flex;gap:28px;margin-top:34px;flex-wrap:wrap}
.hero-stats .s b{font-family:Tajawal;font-size:1.7rem;color:#fff;display:block;line-height:1}
.hero-stats .s span{color:#a9cfc9;font-size:.84rem}

/* booking card in hero */
.bookcard{background:var(--surface);color:var(--ink);border-radius:20px;padding:22px;box-shadow:var(--shadow);border:1px solid var(--line)}
.bookcard h3{font-size:1.15rem;margin-bottom:4px}
.bookcard .sub{color:var(--muted);font-size:.86rem;margin-bottom:16px}
.route-row{display:flex;align-items:center;gap:10px;background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px;font-weight:700}
.route-row .ar{color:var(--teal-d);font-weight:900}
:root[data-theme="dark"] .route-row .ar{color:var(--teal)}
.route-row .from-price{margin-inline-start:auto;color:var(--gold);font-weight:800;font-family:Tajawal}
.bookcard .btn{width:100%;justify-content:center;margin-top:6px}

/* sections */
section{padding-block:60px}
.sec-head{text-align:center;max-width:620px;margin:0 auto 38px}
.sec-head h2{font-size:clamp(1.6rem,3.6vw,2.4rem);margin:10px 0}
.sec-head p{color:var(--muted)}
.grid{display:grid;gap:18px}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.svc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px 22px;transition:transform .15s,border-color .15s}
.svc:hover{transform:translateY(-4px);border-color:var(--teal)}
.svc .ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:1.5rem;background:color-mix(in srgb,var(--teal) 16%,transparent);color:var(--teal-d);margin-bottom:14px}
:root[data-theme="dark"] .svc .ic{color:var(--teal)}
.svc h3{font-size:1.18rem;margin-bottom:7px}
.svc p{color:var(--muted);font-size:.93rem}

.feat{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.feat .fic{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--gold) 20%,transparent);color:var(--gold);font-size:1.25rem}
.feat h3{font-size:1.05rem;margin-bottom:3px}
.feat p{color:var(--muted);font-size:.9rem}

/* routes band */
.routes-band{background:var(--surface2);border-block:1px solid var(--line)}
.rt-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.rt-card .top{padding:16px 18px;color:#fff;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,var(--teal-d),var(--teal))}
.rt-card .top b{font-family:Tajawal;font-size:1.1rem}
.rt-card .bot{padding:14px 18px;display:flex;align-items:center;justify-content:space-between}
.rt-card .price{font-family:Tajawal;font-size:1.35rem;color:var(--gold)}
.rt-card .price small{color:var(--muted);font-size:.72rem;font-weight:600;display:block;font-family:Tajawal}

/* cta strip */
.cta-strip{background:linear-gradient(135deg,var(--navy),var(--teal-d));color:#fff;border-radius:24px;padding:46px 34px;text-align:center;position:relative;overflow:hidden}
.cta-strip::before{content:"";position:absolute;inset:0;opacity:.12;background-image:radial-gradient(circle at 10px 10px,rgba(232,182,76,.9) 2px,transparent 2.5px);background-size:24px 24px}
.cta-strip h2{position:relative;font-size:clamp(1.6rem,4vw,2.3rem);color:#fff}
.cta-strip p{position:relative;color:#cfe6e2;margin:12px auto 24px;max-width:50ch}
.cta-strip .row{position:relative;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* footer (موحّد مع الصفحة الرئيسية) */
footer{background:linear-gradient(180deg,var(--navy),#04131f);color:#b9ccdb;padding-block:48px 26px;margin-top:60px;border-top:3px solid transparent;border-image:linear-gradient(90deg,var(--teal),var(--gold-soft)) 1;font-family:'Cairo','Tajawal',system-ui,sans-serif}
.foot-grid{display:grid;grid-template-columns:1.4fr 1.1fr 1fr;gap:44px;align-items:start}
footer h4{color:#fff;font-family:'Cairo';margin:10px 0 16px;font-size:1.05rem;position:relative;padding-bottom:9px}
footer h4::after{content:"";position:absolute;bottom:0;inset-inline-start:0;width:34px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--teal),var(--gold-soft))}
footer a{color:#9fb6c7;transition:.15s}
footer a:hover{color:var(--gold-soft)}
.foot-desc{color:#9fb6c7;max-width:40ch;line-height:1.75;font-size:.92rem;margin:0}
.foot-quick a{display:block;padding:6px 0;font-size:.93rem}
.foot-quick a:hover{padding-inline-start:5px;color:#fff}
.ct-simple{display:flex;flex-direction:column;gap:2px}
.cts{display:flex;align-items:center;gap:11px;padding:9px 0;color:#c3d2df;font-size:.95rem;transition:.15s}
.cts:hover{color:#fff;padding-inline-start:4px}
.cts .ci{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:10px;background:rgba(255,255,255,.06);color:var(--teal);transition:.15s}
.cts .ci svg{width:17px;height:17px;fill:currentColor}
.cts .ci.wa{color:#25d366}.cts .ci.tg{color:#2AABEE}
.cts:hover .ci.wa{background:rgba(37,211,102,.15)}.cts:hover .ci.tg{background:rgba(42,171,238,.15)}
.cts b{direction:ltr;font-weight:700;letter-spacing:.5px;color:#eaf2f7;margin-inline-start:4px}
.ct-call{margin-top:12px;color:#9fb6c7;font-size:.86rem;line-height:1.9}
.ct-call a{color:#d4e3ef;font-weight:700;direction:ltr}
.ct-call a:hover{color:#fff}
.foot-locband{margin-bottom:34px}
.flb-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:15px}
.foot-map-wide{border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.14);box-shadow:0 20px 44px -24px rgba(0,0,0,.85)}
.foot-map-wide iframe{width:100%;height:260px;border:0;display:block}
.loc-dir{display:inline-flex;align-items:center;gap:7px;background:var(--teal);color:#042c28;padding:9px 16px;border-radius:11px;font-size:.88rem;font-weight:800;transition:.18s;box-shadow:0 8px 20px -10px rgba(45,212,191,.6)}
.loc-dir:hover{transform:translateY(-2px);color:#042c28;filter:brightness(1.08)}
.foot-follow{margin-top:18px;color:#9fb6c7;font-size:.82rem;font-weight:700;margin-bottom:9px}
.foot-social{display:flex;gap:10px;flex-wrap:wrap}
.fs-ic{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.07);color:#cdd9e5;padding:0;transition:.18s}
.fs-ic svg{width:19px;height:19px;fill:currentColor;display:block}
.fs-ic:hover{transform:translateY(-3px);color:#fff}
.fs-ic.fb:hover{background:#1877F2}
.fs-ic.ig:hover{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)}
.fs-ic.tt:hover{background:#000}
.fs-ic.tg:hover{background:#229ED9}
.fs-ic.wa:hover{background:#25D366}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:30px;padding-top:18px;text-align:center;color:#7e97a9;font-size:.84rem}
.mockup-tag{position:fixed;bottom:14px;inset-inline-start:14px;z-index:60;background:var(--gold);color:#2a1e05;font-weight:800;font-size:.8rem;padding:8px 14px;border-radius:999px;box-shadow:var(--shadow)}

@media (max-width:860px){
  .hero-in{grid-template-columns:1fr;gap:26px}
  .navtoggle{display:grid}
  .navlinks{position:absolute;top:100%;inset-inline:0;flex-direction:column;gap:0;background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:var(--shadow);padding:0 20px;max-height:0;overflow:hidden;opacity:0;pointer-events:none;transition:max-height .32s ease,opacity .25s,padding .25s}
  .navlinks.open{max-height:72vh;opacity:1;pointer-events:auto;padding:10px 20px}
  .navlinks a{padding:13px 4px;border-bottom:1px solid var(--line);font-size:1.03rem}
  .navlinks a:last-child{border-bottom:0}
  .g3,.g4{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr}
}
@media (max-width:480px){ .g3,.g4{grid-template-columns:1fr} .hero-stats{gap:18px} }
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- internal page hero ---- */
.phero{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--navy),#123f5e 80%);color:#eaf6f4;border-radius:0 0 26px 26px;text-align:center;padding-block:52px 46px}
.phero::before{content:"";position:absolute;inset:0;opacity:.13;background-image:radial-gradient(circle at 12px 12px,rgba(232,182,76,.9) 2px,transparent 2.5px);background-size:26px 26px}
.phero h1{position:relative;font-size:clamp(1.9rem,4.5vw,3rem);color:#fff}
.phero p{position:relative;color:#cfe6e2;margin-top:12px;max-width:52ch;margin-inline:auto}
.prose{max-width:760px;margin-inline:auto}
.prose p{color:var(--muted);margin:14px 0}
.prose h2{font-size:1.5rem;margin:28px 0 10px;color:var(--ink);padding-inline-start:13px;border-inline-start:4px solid var(--gold)}
.card-soft{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cbox{background:rgba(14,163,150,.07);border:1px solid rgba(14,163,150,.22);border-inline-start:4px solid var(--teal-d);border-radius:14px;padding:18px 22px;text-align:start;line-height:1.95}
.cbox .ic{font-size:2rem;margin-bottom:8px}
.cbox a{color:var(--teal-d);font-weight:800}
:root[data-theme="dark"] .cbox a{color:var(--teal)}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}}

/* ===== blog ===== */
.blog-grid{gap:20px;margin-top:8px}
.blog-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-decoration:none;color:inherit;box-shadow:var(--shadow);transition:transform .15s ease,box-shadow .15s ease}
.blog-card:hover{transform:translateY(-4px);box-shadow:0 22px 50px -20px rgba(12,26,43,.35)}
.blog-ic{font-size:52px;display:flex;align-items:center;justify-content:center;height:120px;background:linear-gradient(135deg,var(--teal),var(--teal-d));color:#fff}
.blog-b{padding:18px 18px 20px;display:flex;flex-direction:column;gap:9px}
.blog-cat{align-self:flex-start;background:rgba(14,163,150,.12);color:var(--teal-d);font-weight:800;font-size:.78rem;border-radius:999px;padding:4px 12px}
.blog-b h3{margin:0;font-size:1.12rem;line-height:1.5;color:var(--ink);transition:color .15s}
.blog-card:hover .blog-b h3{color:var(--teal-d)}
.blog-b p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.8}
.blog-go{margin-top:6px;color:var(--gold);font-weight:800;font-size:.9rem}
.prose ol,.prose ul{line-height:2;padding-inline-start:1.3em}
.prose li{margin:4px 0}
.prose h2{margin-top:30px}
.prose a{color:var(--teal-d);font-weight:700}
/* ===== blog media v2 (ilyaiq) ===== */
.hero-fig{margin:0 0 6px;border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.hero-fig img{display:block;width:100%;height:auto;max-height:460px;object-fit:cover}
.hero-fig figcaption{font-size:.8rem;color:var(--muted);padding:8px 14px;background:var(--surface2);text-align:center}
.blog-card.has-img{padding:0;overflow:hidden}
.blog-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--surface2)}
.blog-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.blog-card.has-img:hover .blog-thumb img{transform:scale(1.06)}
.blog-thumb .blog-ic.sm{position:absolute;inset:auto 12px 12px auto;width:42px;height:42px;font-size:1.3rem;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.92);color:var(--teal-d);border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.18);margin:0}
.blog-card.has-img .blog-b{padding:16px 18px 20px}
/* numbered place/restaurant lists */
.prose .toplist{list-style:none;counter-reset:tl;padding:0;margin:16px 0;display:grid;gap:10px}
.prose .toplist li{counter-increment:tl;position:relative;background:var(--surface2);border:1px solid var(--line);border-radius:14px;padding:14px 16px 14px 60px;font-size:1.02rem;line-height:1.75;transition:border-color .15s,transform .15s}
.prose .toplist li:hover{border-color:var(--teal)}
.prose .toplist li::before{content:counter(tl);position:absolute;right:auto;left:14px;top:14px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--teal),var(--teal-d));color:#fff;font-weight:800;border-radius:10px;font-size:1rem;box-shadow:0 4px 10px -3px rgba(14,163,150,.5)}
html[dir=rtl] .prose .toplist li,body[dir=rtl] .prose .toplist li{padding:14px 60px 14px 16px}
html[dir=rtl] .prose .toplist li::before,body[dir=rtl] .prose .toplist li::before{left:auto;right:14px}
.prose .toplist li b{color:var(--ink)}
.prose .toplist li .tl-t{display:block;font-weight:800;color:var(--teal-d);margin-bottom:2px}
:root[data-theme="dark"] .prose .toplist li .tl-t,:root:not([data-theme="light"]) .prose .toplist li .tl-t{color:var(--teal)}
.sec-img{margin:16px 0;border-radius:14px;overflow:hidden}
.sec-img img{width:100%;height:auto;display:block;max-height:380px;object-fit:cover}
.sec-img figcaption{font-size:.78rem;color:var(--muted);padding:6px 12px;background:var(--surface2);text-align:center}
.blog-sec-h{font-size:1.6rem;color:var(--ink);margin:10px 0 18px;padding-inline-start:14px;border-inline-start:5px solid var(--gold);font-weight:800}
@media (max-width:640px){.blog-sec-h{font-size:1.3rem}}
/* pagination */
.pager{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;margin:14px 0 6px}
.pager .pg,.pager .pg-nav{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:700;text-decoration:none;transition:.2s}
.pager .pg:hover,.pager .pg-nav:hover{border-color:var(--teal);color:var(--teal-d)}
.pager .pg.cur{background:linear-gradient(135deg,var(--teal),var(--teal-d));color:#fff;border-color:var(--teal);box-shadow:0 4px 12px rgba(14,163,150,.3)}
.pager .pg-nav{background:var(--surface2)}
.pager-info{text-align:center;color:var(--muted);font-size:.9rem;margin:4px 0 0}
.art-upd{font-size:.85rem;color:var(--muted);margin:8px 0 0}
.art-upd a{color:var(--gold)}
.faq-list{display:grid;gap:10px;margin:12px 0}
.faq-item{background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:14px 16px;transition:border-color .15s}
.faq-item:hover{border-color:var(--teal)}
.faq-q{font-weight:800;color:var(--ink);margin:0 0 6px;position:relative;padding-inline-start:26px}
.faq-q::before{content:"\2753";position:absolute;inset-inline-start:0;top:0}
.faq-a{margin:0;color:var(--muted);line-height:1.85}