/* Joury Arabic 3 Pages Clean */
:root{
  --primary:#7b0f50;
  --primary-dark:#2a061d;
  --primary-soft:#9b1b66;
  --gold:#d1b17c;
  --gold-light:#ecd9b7;
  --cream:#fbf8f4;
  --white:#fff;
  --ink:#171117;
  --muted:#68717e;
  --border:rgba(123,15,80,.14);
  --shadow:0 22px 60px rgba(38,12,28,.12);
  --radius:24px;
  --container:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Cairo",system-ui,-apple-system,Segoe UI,sans-serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.8;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
body.menu-open{overflow:hidden}
img,svg{max-width:100%;height:auto}
a{text-decoration:none;color:inherit}
button,input,textarea{font:inherit}
.container{width:min(var(--container),calc(100% - 32px));margin-inline:auto}
.section{padding:86px 0}
.section-head{text-align:center;max-width:760px;margin:0 auto 40px}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--primary);font-weight:900;margin-bottom:8px;
}
.eyebrow::before,.eyebrow::after{content:"";width:24px;height:2px;background:var(--gold);border-radius:20px}
.section-title{font-size:clamp(2rem,4vw,3.4rem);line-height:1.2;font-weight:900;margin:0 0 12px;color:var(--ink)}
.section-lead{color:var(--muted);font-size:1.05rem;margin:0 auto;max-width:720px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:50px;padding:0 1.55rem;border-radius:999px;
  font-weight:900;border:0;cursor:pointer;transition:.25s ease;
}
.btn-primary,.hotel-btn{background:var(--primary);color:#fff;box-shadow:0 16px 34px rgba(123,15,80,.22)}
.btn-primary:hover,.hotel-btn:hover{background:var(--primary-soft);transform:translateY(-2px);color:#fff}
.btn-gold{background:var(--gold);color:#4b0830;box-shadow:0 14px 30px rgba(209,177,124,.22)}
.btn-outline{background:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.35);color:#fff}

/* Header */
.site-header{
  position:fixed;inset:0 0 auto;z-index:1000;
  transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .35s ease;
}
.site-header.is-hidden{transform:translateY(-120%);opacity:0;pointer-events:none}
.top-strip{
  display:flex;align-items:center;justify-content:center;
  min-height:40px;padding:7px 14px;
  color:#fff;background:linear-gradient(90deg,#4d082f,var(--primary),#982062);
  font-weight:900;font-size:.95rem;
}
.navbar{
  width:min(1180px,calc(100% - 32px));
  margin:12px auto 0;padding:12px 18px;
  min-height:86px;border-radius:999px;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.36);
  box-shadow:0 20px 55px rgba(0,0,0,.13);
  backdrop-filter:blur(16px);
}
.site-header.is-scrolled .navbar{background:rgba(255,255,255,.95);box-shadow:0 16px 40px rgba(0,0,0,.11)}
.brand{display:flex;align-items:center}
.brand img{width:125px;height:auto;max-height:64px;object-fit:contain}
.nav-links{display:flex;align-items:center;gap:6px}
.nav-links a{
  padding:10px 13px;border-radius:999px;font-weight:900;color:#1d1720;white-space:nowrap;transition:.25s ease;
}
.nav-links a:hover,.nav-links a.active{color:var(--primary);background:rgba(123,15,80,.08)}
.nav-links .language-switch{
  color:var(--primary);background:#fff;border:1px solid rgba(123,15,80,.22);
}
.nav-links .book-link{
  background:var(--primary);color:#fff;padding-inline:19px;box-shadow:0 10px 24px rgba(123,15,80,.22);
}
.nav-links .book-link:hover{background:var(--primary-soft);color:#fff}
.menu-toggle{
  display:none;width:46px;height:46px;border:0;border-radius:50%;background:var(--primary);padding:10px;
}
.menu-toggle span{display:block;height:2px;background:#fff;margin:6px 0;border-radius:4px}

/* Hero */
.hero{
  min-height:100svh;padding:170px 0 90px;position:relative;display:grid;align-items:center;overflow:hidden;background:#170c13;
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    linear-gradient(90deg,rgba(25,8,19,.50),rgba(25,8,19,.30),rgba(25,8,19,.55)),
    url("../images/hero/hero-bg-ar.jpg") center/cover no-repeat;
}
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:190px;z-index:1;
  background:linear-gradient(to bottom,rgba(251,248,244,0),rgba(251,248,244,.96));
}
.hero .container{position:relative;z-index:2}
.hero-content{max-width:760px;margin-right:0;margin-left:auto;text-align:right;color:#fff}
.hero-badge{
  display:inline-flex;border:1px solid rgba(255,255,255,.34);border-radius:999px;
  background:rgba(255,255,255,.12);color:#fff;font-weight:900;padding:8px 22px;margin-bottom:18px;
  backdrop-filter:blur(10px);
}
.hero h1{
  font-size:clamp(3.2rem,6.4vw,5.7rem);line-height:1.08;font-weight:900;margin:0 0 22px;
  color:#fff;text-shadow:0 9px 32px rgba(0,0,0,.36);
}
.hero h1 span{color:var(--gold-light)}
.hero p{font-size:1.12rem;line-height:2;color:rgba(255,255,255,.94);max-width:690px;margin:0 0 28px;text-shadow:0 5px 18px rgba(0,0,0,.28)}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}

/* Hotels */
.hotels{background:var(--cream);padding-top:78px}
.hotels-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:stretch;justify-items:center;
}
.hotel-card{
  width:100%;max-width:395px;min-height:548px;height:100%;
  display:flex;flex-direction:column;overflow:hidden;background:#fff;border-radius:22px;
  box-shadow:var(--shadow);transition:transform .28s ease,box-shadow .28s ease;
}
.hotel-card:hover{transform:translateY(-7px);box-shadow:0 30px 80px rgba(38,12,28,.17)}
.hotel-image{display:block;height:235px;flex:0 0 235px;overflow:hidden;background:#eee}
.hotel-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .55s ease}
.hotel-card:hover .hotel-image img{transform:scale(1.05)}
.hotel-body{
  flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:24px 22px 20px;min-height:313px;
}
.hotel-body h3{
  min-height:42px;margin:0 0 10px;color:var(--primary);font-size:1.38rem;line-height:1.35;font-weight:900;
  display:flex;align-items:center;justify-content:center;
}
.hotel-badges{min-height:38px;display:flex;align-items:center;justify-content:center;gap:8px 10px;flex-wrap:wrap;margin-bottom:13px}
.hotel-badges span{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:999px;background:rgba(123,15,80,.055);
  color:var(--primary);border:1px solid rgba(123,15,80,.11);font-size:.8rem;font-weight:900;
}
.hotel-badges svg,.hotel-distance svg{width:18px;height:18px;fill:currentColor;flex:0 0 auto}
.hotel-desc{
  min-height:58px;margin:0 0 16px;color:var(--muted);line-height:1.65;
  display:flex;align-items:center;justify-content:center;
}
.hotel-btn{width:100%;max-width:310px;min-height:52px}
.hotel-distance{
  width:100%;min-height:44px;margin-top:15px;padding-top:15px;border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;gap:7px;color:var(--primary);font-size:.92rem;font-weight:900;
}

/* Etmaen */
.etmaen{background:#fff}
.etmaen-card{
  max-width:930px;margin:0 auto;background:linear-gradient(135deg,#fff,#fbf8f4);
  border:1px solid rgba(209,177,124,.36);border-radius:24px;padding:26px;
  box-shadow:var(--shadow);display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;align-items:center;
}
.etmaen-image{
  background:#fff;border-radius:20px;min-height:300px;display:grid;place-items:center;padding:22px;
  box-shadow:0 16px 45px rgba(0,0,0,.07);
}
.etmaen-image img{max-height:290px;object-fit:contain}
.etmaen-content{text-align:right}
.etmaen-content h2{font-size:clamp(2rem,4vw,3.3rem);line-height:1.18;font-weight:900;margin:0 0 16px}
.etmaen-content p{color:var(--muted);margin:0 0 18px}
.etmaen-list{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:9px}
.etmaen-list li{color:#4f5965;font-weight:800}
.etmaen-list li::before{content:"✓";display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--primary);color:#fff;margin-left:8px;font-size:.78rem}

/* Video */
.video-section{
  min-height:520px;padding:110px 0;position:relative;isolation:isolate;background:#170c13;color:#fff;display:grid;align-items:center;overflow:hidden;
}
.video-section::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(rgba(23,8,18,.70),rgba(23,8,18,.75)),
    url("../images/hero/hero-bg-ar.jpg") center/cover no-repeat;
  filter:blur(1px);
}
.video-box{text-align:center;max-width:820px;margin:0 auto}
.video-box h2{font-size:clamp(2.2rem,4vw,4rem);line-height:1.2;font-weight:900;margin:0 0 12px;text-shadow:0 5px 18px rgba(0,0,0,.35)}
.video-box p{color:rgba(255,255,255,.88);font-size:1.08rem;margin:0 0 28px}
.play-button{
  width:76px;height:76px;border-radius:50%;border:0;background:#fff;color:var(--primary);
  display:inline-grid;place-items:center;box-shadow:0 16px 40px rgba(0,0,0,.25);cursor:pointer;transition:.25s ease;
}
.play-button:hover{transform:scale(1.06);background:var(--gold)}
.play-button svg{width:32px;height:32px;fill:currentColor;transform:translateX(2px)}
.video-frame{display:none;max-width:900px;margin:34px auto 0;border-radius:22px;overflow:hidden;background:#000;aspect-ratio:16/9;box-shadow:0 26px 80px rgba(0,0,0,.38)}
.video-frame.is-active{display:block}
.video-frame iframe{width:100%;height:100%;border:0;display:block}

/* Contact */
.page-hero{padding:190px 0 60px;background:linear-gradient(180deg,#fff,var(--cream));text-align:center}
.page-hero h1{font-size:clamp(2.4rem,5vw,4.5rem);line-height:1.15;font-weight:900;margin:0 0 12px;color:var(--primary)}
.page-hero p{color:var(--muted);margin:0 auto;max-width:700px}
.contact-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:28px;align-items:start}
.contact-card,.info-card{background:#fff;border-radius:24px;padding:clamp(22px,4vw,36px);box-shadow:var(--shadow);border:1px solid var(--border)}
.contact-card h2,.info-card h2{color:var(--primary);font-weight:900;margin:0 0 18px}
.form{display:grid;gap:15px}
.form-row{display:grid;gap:7px}
.form-row label{font-weight:900;color:#4f5965}
.form-row input,.form-row textarea{
  width:100%;border:1px solid var(--border);border-radius:16px;background:#fbf8f4;
  padding:13px 15px;outline:none;transition:.25s ease;
}
.form-row input:focus,.form-row textarea:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(123,15,80,.08);background:#fff}
.form-row textarea{min-height:150px;resize:vertical}
.hp-field{position:absolute!important;left:-99999px!important;width:1px;height:1px;overflow:hidden;opacity:0}
.message{padding:13px 15px;border-radius:16px;font-weight:900;margin-bottom:16px}
.message.success{background:rgba(36,140,83,.1);color:#0b6b3e;border:1px solid rgba(36,140,83,.2)}
.message.error{background:rgba(170,31,31,.1);color:#931a1a;border:1px solid rgba(170,31,31,.2)}
.info-list{display:grid;gap:16px;margin-top:20px}
.info-item{display:flex;gap:12px;align-items:flex-start;background:rgba(123,15,80,.055);border:1px solid rgba(123,15,80,.08);border-radius:18px;padding:15px}
.info-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--primary);color:#fff;font-weight:900;flex:0 0 auto}
.info-item h3{margin:0 0 4px;color:var(--primary);font-size:1rem}
.info-item p{margin:0;color:var(--muted);font-weight:700}

/* Footer */
.site-footer{
  background:radial-gradient(circle at 50% 0,rgba(123,15,80,.35),transparent 36%),linear-gradient(135deg,#250519,#180512);
  color:#fff;padding:60px 0 0;
}
.footer-grid{display:grid;grid-template-columns:1.2fr .8fr 1fr;gap:32px;align-items:start;text-align:center}
.footer-logo img{width:120px;height:auto;margin-bottom:14px;filter:drop-shadow(0 14px 30px rgba(0,0,0,.28))}
.site-footer h3{color:var(--gold-light);font-weight:900;margin:0 0 14px}
.site-footer p,.site-footer li{color:rgba(255,255,255,.82)}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer a{color:#fff;font-weight:800}
.site-footer a:hover{color:var(--gold-light)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding:16px;text-align:center;margin-top:44px}
.footer-bottom p{margin:0;font-size:.9rem}
.back-to-top{
  position:fixed;left:18px;bottom:18px;width:44px;height:44px;border-radius:50%;border:0;background:var(--primary);color:#fff;
  box-shadow:0 12px 30px rgba(0,0,0,.2);display:none;z-index:900;cursor:pointer;
}
.back-to-top.is-visible{display:block}

/* Responsive */
@media (max-width: 1024px){
  .hotels-grid{grid-template-columns:repeat(2,1fr)}
  .etmaen-card,.contact-grid,.footer-grid{grid-template-columns:1fr}
}
@media (max-width: 860px){
  .navbar{min-height:72px;border-radius:26px}
  .brand img{width:105px}
  .menu-toggle{display:block}
  .nav-links{
    position:fixed;inset:0;z-index:-1;display:flex;flex-direction:column;justify-content:center;gap:12px;
    background:rgba(255,255,255,.98);transform:translateY(-100%);transition:.32s ease;padding:30px;
  }
  .nav-links.is-open{transform:translateY(0)}
  .nav-links a{font-size:1.15rem}
  .hero{padding-top:155px;min-height:650px}
  .hero-content{text-align:center;margin:0 auto}
  .hero h1{font-size:clamp(2.6rem,10vw,4.4rem);line-height:1.15}
  .hero p{font-size:1rem}
  .hero-actions{justify-content:center}
  .page-hero{padding-top:160px}
}
@media (max-width: 680px){
  .section{padding:64px 0}
  .hotels-grid{grid-template-columns:1fr}
  .hotel-card{max-width:410px;min-height:auto}
  .hotel-image{height:220px;flex-basis:220px}
  .hotel-body{min-height:300px;padding:22px 18px 20px}
  .etmaen-card{padding:18px;border-radius:20px}
  .etmaen-image{min-height:230px}
  .etmaen-image img{max-height:220px}
  .top-strip{font-size:.82rem;min-height:36px}
  .hero-actions .btn{width:100%}
}





/* ===================== v4 polished correction ===================== */

/* شريط علوي احترافي مع زر English مدمج كدائرة فنية */
.top-strip-wrap {
  position: relative;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, #4d082f, var(--primary), #982062);
  overflow: visible;
}

.top-strip {
  min-height: 42px !important;
  padding: 7px 90px 7px 90px !important;
  background: transparent !important;
  color: #fff !important;
  font-weight: 900 !important;
  letter-spacing: .1px;
}

.top-english {
  position: absolute;
  left: max(18px, calc((100vw - var(--container)) / 2));
  top: 50%;
  transform: translateY(-50%);
  width: 58px;
  height: 58px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #fff, #f7edf3 74%);
  color: var(--primary);
  border: 3px solid rgba(255,255,255,.88);
  outline: 2px solid var(--primary);
  font-size: .78rem;
  font-weight: 900;
  box-shadow:
    0 13px 30px rgba(0,0,0,.14),
    inset 0 0 0 1px rgba(123,15,80,.05);
  z-index: 1003;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}

.top-english::after {
  content: "";
  position: absolute;
  right: -12px;
  width: 18px;
  height: 42px;
  border-radius: 0 24px 24px 0;
  background: linear-gradient(90deg, rgba(255,255,255,.28), rgba(255,255,255,0));
  pointer-events: none;
}

.top-english:hover {
  transform: translateY(-50%) scale(1.045);
  background: var(--primary);
  color: #fff;
  box-shadow: 0 16px 36px rgba(123,15,80,.28);
}

/* الهيدر أهدأ وأقصر قليلاً */
.navbar {
  margin-top: 14px !important;
  min-height: 78px !important;
  padding: 10px 30px !important;
}

.brand img {
  width: 112px !important;
  max-height: 58px !important;
}

.nav-links a {
  padding: 9px 12px !important;
}

.nav-links .book-link {
  min-width: 160px;
  justify-content: center;
}

/* الهيرو: النص في قلب الوسط اليمين، أصغر، وبمسافة مريحة */
.hero {
  padding-top: 165px !important;
  min-height: 690px !important;
}

.hero .container {
  width: min(1320px, calc(100% - 64px)) !important;
}

.hero-content {
  max-width: 650px !important;
  margin-right: auto !important;
  margin-left: 7vw !important;
  text-align: right !important;
  transform: translateY(10px);
}

.hero-badge {
  font-size: .94rem !important;
  padding: 7px 20px !important;
  margin-bottom: 15px !important;
}

.hero h1 {
  font-size: clamp(2.75rem, 4.9vw, 4.65rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -.45px;
  margin-bottom: 18px !important;
}

.hero p {
  max-width: 630px !important;
  font-size: 1.02rem !important;
  line-height: 1.95 !important;
  margin-bottom: 24px !important;
}

.hero-actions {
  justify-content: flex-start !important;
}

/* إزالة أي زر English عائم قديم لو بقي من الكاش */
.language-float {
  display: none !important;
}

/* عرض كل الفنادق بشكل جميل: 3 ثم 2 في المنتصف */
.hotels-grid {
  grid-template-columns: repeat(3, minmax(290px, 1fr)) !important;
  justify-content: center !important;
  align-items: stretch !important;
}

.hotel-card {
  justify-self: center;
}

/* أزرار عائمة أكثر احترافية */
.back-to-top {
  left: max(22px, calc((100vw - var(--container)) / 2)) !important;
  bottom: 24px !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 35% 30%, #fff, #f7edf3 74%) !important;
  color: var(--primary) !important;
  border: 3px solid rgba(255,255,255,.88) !important;
  outline: 2px solid var(--primary) !important;
  font-size: 1.25rem !important;
  font-weight: 900 !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.16) !important;
  display: none;
  place-items: center;
}

.back-to-top.is-visible {
  display: grid !important;
}

.back-to-top:hover {
  background: var(--primary) !important;
  color: #fff !important;
  transform: translateY(-2px);
}

/* زر إغلاق الفيديو */
.video-frame {
  position: relative;
}

.video-close {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 4;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.85);
  outline: 2px solid var(--primary);
  background: #fff;
  color: var(--primary);
  display: inline-grid;
  place-items: center;
  font-size: 1.75rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  cursor: pointer;
  transition: transform .22s ease, background .22s ease, color .22s ease;
}

.video-close:hover {
  transform: scale(1.06);
  background: var(--primary);
  color: #fff;
}

/* الجوال */
@media (max-width: 1024px) {
  .hotels-grid {
    grid-template-columns: repeat(2, minmax(290px, 410px)) !important;
  }

  .hero-content {
    margin-left: 3vw !important;
  }
}

@media (max-width: 860px) {
  .top-strip {
    padding-left: 70px !important;
    padding-right: 70px !important;
    font-size: .82rem !important;
  }

  .top-english {
    width: 50px;
    height: 50px;
    left: 16px;
    font-size: .7rem;
  }

  .navbar {
    width: min(100% - 24px, var(--container)) !important;
    min-height: 68px !important;
    border-radius: 24px !important;
  }

  .hero {
    padding-top: 150px !important;
    min-height: 620px !important;
  }

  .hero .container {
    width: min(100% - 28px, 760px) !important;
  }

  .hero-content {
    margin: 0 auto !important;
    transform: none !important;
    text-align: center !important;
  }

  .hero h1 {
    font-size: clamp(2.35rem, 9vw, 3.8rem) !important;
  }

  .hero p {
    font-size: .96rem !important;
  }

  .hero-actions {
    justify-content: center !important;
  }
}

@media (max-width: 680px) {
  .hotels-grid {
    grid-template-columns: 1fr !important;
  }

  .top-strip {
    font-size: .76rem !important;
  }

  .top-english {
    width: 46px;
    height: 46px;
  }
}


/* ===================== v5 artistic header + hero + cards ===================== */

/* Header: very smooth hide */
.site-header {
  transition:
    transform .82s cubic-bezier(.22, 1, .36, 1),
    opacity .55s ease,
    filter .55s ease !important;
  will-change: transform, opacity;
}

.site-header.is-hidden {
  transform: translateY(-118%) !important;
  opacity: 0 !important;
  filter: blur(2px);
}

/* Refined top strip with carved English circle */
.top-strip-wrap {
  position: relative;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(90deg, #4b062d 0%, #7b0f50 48%, #a01f68 100%);
  overflow: visible;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.12);
}

.top-strip {
  min-height: 38px !important;
  padding: 6px 90px !important;
  background: transparent !important;
  color: #fff !important;
  font-size: .95rem !important;
  font-weight: 900 !important;
}

.top-english {
  position: absolute;
  left: max(18px, calc((100vw - var(--container)) / 2));
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 54px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fff 0%, #fff7fb 68%, #efdfe7 100%);
  color: var(--primary);
  border: 3px solid rgba(255,255,255,.92);
  outline: 2px solid var(--primary);
  font-size: .76rem;
  font-weight: 900;
  z-index: 1004;
  box-shadow: 0 12px 30px rgba(0,0,0,.16);
  transition: transform .25s ease, background .25s ease, color .25s ease;
}

.top-english::before {
  content: "";
  position: absolute;
  right: -16px;
  width: 22px;
  height: 44px;
  border-radius: 0 28px 28px 0;
  background: linear-gradient(90deg, rgba(255,255,255,.35), rgba(255,255,255,0));
  z-index: -1;
}

.top-english:hover {
  transform: translateY(-50%) scale(1.05);
  background: var(--primary);
  color: #fff;
}

/* Navbar: menu right, logo center, actions left */
.navbar {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  gap: 18px !important;
  width: min(1180px, calc(100% - 40px)) !important;
  min-height: 82px !important;
  margin: 14px auto 0 !important;
  padding: 10px 24px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.91) !important;
  border: 1px solid rgba(255,255,255,.42) !important;
  box-shadow:
    0 20px 55px rgba(0,0,0,.13),
    inset 0 0 0 1px rgba(123,15,80,.025) !important;
  backdrop-filter: blur(18px);
}

.nav-menu-right,
.nav-actions-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-menu-right {
  justify-content: flex-start;
  grid-column: 1;
}

.nav-actions-left {
  justify-content: flex-end;
  grid-column: 3;
}

.nav-menu-right a {
  padding: 9px 13px;
  border-radius: 999px;
  font-weight: 900;
  color: #1d1720;
  white-space: nowrap;
  transition: .25s ease;
}

.nav-menu-right a:hover,
.nav-menu-right a.active {
  color: var(--primary);
  background: rgba(123,15,80,.09);
}

.brand-centered {
  grid-column: 2;
  position: relative;
  display: grid !important;
  place-items: center;
  width: 94px;
  height: 70px;
  justify-self: center;
  isolation: isolate;
}

.brand-centered .brand-glow {
  position: absolute;
  inset: -7px -12px -10px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 65%, rgba(123,15,80,.16), transparent 64%),
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.42));
  box-shadow:
    0 16px 34px rgba(123,15,80,.14),
    inset 0 0 0 1px rgba(255,255,255,.58);
  z-index: -1;
}

.brand-centered img {
  width: 78px !important;
  max-height: 62px !important;
  object-fit: contain;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.18));
}

.nav-actions-left .book-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  min-width: 172px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(123,15,80,.25);
  transition: .25s ease;
}

.nav-actions-left .book-link:hover {
  transform: translateY(-2px);
  background: var(--primary-soft);
  color: #fff;
}

/* Legacy nav-links neutralize */
.nav-links {
  display: none !important;
}

/* Hero: text to right with around 1cm breathing space */
.hero {
  min-height: 705px !important;
  padding-top: 160px !important;
}

.hero .container {
  width: 100% !important;
  max-width: none !important;
  padding-right: 38px !important;
  padding-left: 38px !important;
}

.hero-content {
  max-width: 640px !important;
  margin-right: 0 !important;
  margin-left: auto !important;
  text-align: right !important;
  transform: translateY(8px) !important;
}

.hero-badge {
  font-size: .9rem !important;
  padding: 7px 19px !important;
  margin-bottom: 14px !important;
}

.hero h1 {
  font-size: clamp(2.65rem, 4.55vw, 4.35rem) !important;
  line-height: 1.12 !important;
  margin-bottom: 17px !important;
  letter-spacing: -.35px;
}

.hero p {
  font-size: .98rem !important;
  line-height: 1.95 !important;
  max-width: 620px !important;
  margin-bottom: 24px !important;
}

.hero-actions {
  justify-content: flex-start !important;
}

/* Hotels: centered second row + artistic premium touches */
.hotels-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 30px 28px !important;
}

.hotel-card {
  flex: 0 1 375px !important;
  max-width: 395px !important;
  position: relative;
  border: 1px solid rgba(123,15,80,.07);
  box-shadow:
    0 20px 55px rgba(38,12,28,.10),
    0 1px 0 rgba(255,255,255,.6) inset !important;
  overflow: hidden;
}

.hotel-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg, transparent, var(--primary), var(--gold), var(--primary), transparent);
  z-index: 2;
}

.hotel-card::after {
  content: "J";
  position: absolute;
  top: 10px;
  left: 16px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.88);
  color: var(--primary);
  font-family: Georgia, serif;
  font-weight: 900;
  font-size: 1.3rem;
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
  z-index: 3;
}

.hotel-card:hover {
  transform: translateY(-9px) !important;
  box-shadow:
    0 32px 90px rgba(38,12,28,.18),
    0 0 0 1px rgba(209,177,124,.18) inset !important;
}

.hotel-image {
  position: relative;
}

.hotel-image::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 62px;
  background: linear-gradient(to top, rgba(0,0,0,.12), transparent);
  pointer-events: none;
}

.hotel-badges span {
  box-shadow: 0 7px 18px rgba(123,15,80,.045);
}

.hotel-distance {
  background: linear-gradient(180deg, rgba(123,15,80,.018), transparent);
}

/* Floating buttons more centered and refined */
.back-to-top {
  left: max(22px, calc((100vw - var(--container)) / 2)) !important;
  bottom: 26px !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 34% 28%, #fff 0%, #fff7fb 68%, #efdfe7 100%) !important;
  color: var(--primary) !important;
  border: 3px solid rgba(255,255,255,.92) !important;
  outline: 2px solid var(--primary) !important;
  box-shadow: 0 13px 32px rgba(0,0,0,.16) !important;
  display: none;
  place-items: center;
  transition: .25s ease;
}

.back-to-top.is-visible {
  display: grid !important;
}

.back-to-top:hover {
  transform: translateY(-3px);
  background: var(--primary) !important;
  color: #fff !important;
}

/* Video close artistic */
.video-frame {
  position: relative;
}

.video-close {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 4;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.9);
  outline: 2px solid var(--primary);
  background: radial-gradient(circle at 34% 28%, #fff 0%, #fff7fb 68%, #efdfe7 100%);
  color: var(--primary);
  display: inline-grid;
  place-items: center;
  font-size: 1.7rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 12px 32px rgba(0,0,0,.26);
  cursor: pointer;
  transition: .22s ease;
}

.video-close:hover {
  transform: scale(1.06);
  background: var(--primary);
  color: #fff;
}

/* Responsive */
@media (max-width: 1050px) {
  .navbar {
    grid-template-columns: 1fr auto auto !important;
  }

  .nav-menu-right {
    display: none;
  }

  .menu-toggle {
    display: block !important;
  }

  .nav-actions-left {
    gap: 10px;
  }

  .nav-menu-right.is-open {
    position: fixed;
    inset: 0;
    z-index: -1;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    background: rgba(255,255,255,.98);
    transform: none;
    padding: 30px;
  }

  .nav-menu-right.is-open a {
    font-size: 1.15rem;
  }
}

@media (max-width: 860px) {
  .top-strip {
    font-size: .78rem !important;
    padding-left: 76px !important;
    padding-right: 76px !important;
  }

  .top-english {
    width: 48px;
    height: 48px;
    font-size: .68rem;
    left: 14px;
  }

  .navbar {
    width: min(100% - 24px, var(--container)) !important;
    min-height: 68px !important;
    border-radius: 24px !important;
    padding: 9px 14px !important;
  }

  .brand-centered {
    width: 76px;
    height: 56px;
  }

  .brand-centered img {
    width: 62px !important;
    max-height: 50px !important;
  }

  .nav-actions-left .book-link {
    min-width: 132px;
    min-height: 44px;
    padding: 0 14px;
    font-size: .82rem;
  }

  .hero {
    min-height: 625px !important;
    padding-top: 145px !important;
  }

  .hero .container {
    padding-right: 20px !important;
    padding-left: 20px !important;
  }

  .hero-content {
    margin: 0 auto !important;
    max-width: 680px !important;
    text-align: center !important;
    transform: none !important;
  }

  .hero h1 {
    font-size: clamp(2.35rem, 9vw, 3.8rem) !important;
  }

  .hero-actions {
    justify-content: center !important;
  }
}

@media (max-width: 680px) {
  .hotels-grid {
    gap: 24px !important;
  }

  .hotel-card {
    flex-basis: min(100%, 410px) !important;
  }
}


/* ===================== v6 premium separated glass header ===================== */

/* ناعمية اختفاء الهيدر بالكامل */
.site-header {
  transition:
    transform .95s cubic-bezier(.16, 1, .3, 1),
    opacity .65s ease,
    filter .65s ease !important;
}

.site-header.is-hidden {
  transform: translateY(-125%) !important;
  opacity: 0 !important;
  filter: blur(3px);
  pointer-events: none;
}

/* الشريط العلوي أنظف، والإنجليزي أنزل قليلاً */
.top-strip-wrap {
  min-height: 38px !important;
  background: linear-gradient(90deg, #4b062d 0%, #7b0f50 48%, #a01f68 100%) !important;
  overflow: visible !important;
}

.top-strip {
  min-height: 38px !important;
  padding: 6px 90px !important;
  color: #fff !important;
  font-size: .94rem !important;
  font-weight: 900 !important;
}

.top-english {
  top: calc(50% + 16px) !important;
  left: max(20px, calc((100vw - var(--container)) / 2)) !important;
  width: 56px !important;
  height: 56px !important;
  background: rgba(255,255,255,.94) !important;
  color: var(--primary) !important;
  border: 2px solid rgba(255,255,255,.95) !important;
  outline: 2px solid var(--primary) !important;
  border-radius: 50% !important;
  box-shadow: 0 14px 32px rgba(0,0,0,.16), inset 0 0 0 1px rgba(255,255,255,.35) !important;
  backdrop-filter: blur(12px);
}

.top-english:hover {
  transform: translateY(-50%) scale(1.06) !important;
  background: var(--primary) !important;
  color: #fff !important;
}

/* الهيدر نفسه يصبح حاوية شفافة بدون كتلة ضخمة */
.navbar {
  width: min(1180px, calc(100% - 44px)) !important;
  min-height: 96px !important;
  margin: 22px auto 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  gap: 20px !important;
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* القائمة منفصلة يمينًا بزجاجية شفافة جدًا */
.nav-menu-right {
  grid-column: 1 !important;
  justify-self: start !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 14px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.42) !important;
  border: 1px solid rgba(255,255,255,.38) !important;
  box-shadow:
    0 18px 45px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.50) !important;
  backdrop-filter: blur(18px) saturate(150%);
}

.nav-menu-right a {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 46px !important;
  padding: 0 15px !important;
  border-radius: 999px !important;
  color: #171117 !important;
  font-weight: 900 !important;
  transition: transform .24s ease, color .24s ease, background .24s ease !important;
  background: transparent !important;
}

.nav-menu-right a::after {
  content: "" !important;
  position: absolute !important;
  right: 18px !important;
  left: 18px !important;
  bottom: 4px !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: var(--gold) !important;
  transform: scaleX(0) !important;
  transform-origin: center !important;
  transition: transform .25s ease !important;
}

.nav-menu-right a:hover,
.nav-menu-right a.active {
  color: var(--primary) !important;
  transform: scale(1.055) !important;
  background: rgba(255,255,255,.35) !important;
}

.nav-menu-right a:hover::after,
.nav-menu-right a.active::after {
  transform: scaleX(1) !important;
}

/* الشعار كبير في الوسط ومنفصل بتظليل جميل */
.brand-centered {
  grid-column: 2 !important;
  justify-self: center !important;
  width: 128px !important;
  height: 104px !important;
  display: grid !important;
  place-items: center !important;
  position: relative !important;
  isolation: isolate !important;
}

.brand-centered .brand-glow {
  position: absolute !important;
  inset: -10px -18px -14px !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 50% 68%, rgba(123,15,80,.20), transparent 66%),
    linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.32)) !important;
  border: 1px solid rgba(255,255,255,.42) !important;
  box-shadow:
    0 22px 46px rgba(0,0,0,.14),
    0 18px 38px rgba(123,15,80,.12),
    inset 0 1px 0 rgba(255,255,255,.58) !important;
  backdrop-filter: blur(16px);
  z-index: -1 !important;
}

.brand-centered img {
  width: 108px !important;
  max-height: 92px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.20)) !important;
}

/* إلغاء زر الحجز في الأعلى نهائيًا */
.nav-actions-left .book-link,
.nav-links .book-link {
  display: none !important;
}

.nav-actions-left {
  grid-column: 3 !important;
  justify-self: end !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

/* كتابة الهيرو كلها نحو اليمين، تبعد 2 سم تقريبًا من الطرف في الكمبيوتر */
.hero {
  min-height: 705px !important;
  padding-top: 162px !important;
}

.hero .container {
  width: 100% !important;
  max-width: none !important;
  padding-right: 2cm !important;
  padding-left: 38px !important;
}

.hero-content {
  max-width: 635px !important;
  margin-right: 0 !important;
  margin-left: auto !important;
  text-align: right !important;
  transform: translateY(10px) !important;
}

.hero-badge {
  margin-right: 0 !important;
  margin-left: auto !important;
  font-size: .9rem !important;
  padding: 7px 19px !important;
}

.hero h1 {
  font-size: clamp(2.65rem, 4.45vw, 4.3rem) !important;
  line-height: 1.12 !important;
  margin-bottom: 17px !important;
  text-align: right !important;
}

.hero p {
  max-width: 620px !important;
  font-size: .98rem !important;
  line-height: 1.95 !important;
  text-align: right !important;
}

.hero-actions {
  justify-content: flex-start !important;
}

/* البطائق: الحفاظ على توسيط السطر الثاني ولمسات جذابة */
.hotels-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 30px 30px !important;
}

.hotel-card {
  flex: 0 1 378px !important;
  max-width: 398px !important;
  border: 1px solid rgba(123,15,80,.075) !important;
  box-shadow:
    0 20px 55px rgba(38,12,28,.10),
    0 1px 0 rgba(255,255,255,.65) inset !important;
}

.hotel-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  height: 5px !important;
  background: linear-gradient(90deg, transparent, var(--primary), var(--gold), var(--primary), transparent) !important;
  z-index: 2 !important;
}

.hotel-card::after {
  content: "J" !important;
  position: absolute !important;
  top: 10px !important;
  left: 16px !important;
  width: 34px !important;
  height: 34px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.90) !important;
  color: var(--primary) !important;
  font-family: Georgia, serif !important;
  font-weight: 900 !important;
  font-size: 1.28rem !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.12) !important;
  z-index: 3 !important;
}

.hotel-card:hover {
  transform: translateY(-9px) !important;
  box-shadow:
    0 32px 90px rgba(38,12,28,.18),
    0 0 0 1px rgba(209,177,124,.18) inset !important;
}

/* الجوال */
@media (max-width: 1050px) {
  .navbar {
    grid-template-columns: 1fr auto auto !important;
  }

  .nav-menu-right {
    display: none !important;
  }

  .nav-menu-right.is-open {
    position: fixed !important;
    inset: 0 !important;
    z-index: -1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 14px !important;
    background: rgba(255,255,255,.97) !important;
    border-radius: 0 !important;
    backdrop-filter: blur(16px) !important;
  }

  .menu-toggle {
    display: block !important;
  }
}

@media (max-width: 860px) {
  .top-strip {
    padding-left: 76px !important;
    padding-right: 76px !important;
    font-size: .78rem !important;
  }

  .top-english {
    top: calc(50% + 14px) !important;
    left: 14px !important;
    width: 48px !important;
    height: 48px !important;
    font-size: .68rem !important;
  }

  .navbar {
    width: min(100% - 24px, var(--container)) !important;
    min-height: 78px !important;
    margin-top: 16px !important;
    grid-template-columns: 1fr auto 1fr !important;
  }

  .brand-centered {
    width: 102px !important;
    height: 78px !important;
  }

  .brand-centered img {
    width: 82px !important;
    max-height: 70px !important;
  }

  .hero {
    min-height: 625px !important;
    padding-top: 148px !important;
  }

  .hero .container {
    padding-right: 24px !important;
    padding-left: 24px !important;
  }

  .hero-content {
    max-width: 92vw !important;
    margin-right: 0 !important;
    margin-left: auto !important;
    text-align: right !important;
    transform: none !important;
  }

  .hero-badge,
  .hero h1,
  .hero p {
    text-align: right !important;
  }

  .hero h1 {
    font-size: clamp(2.25rem, 9vw, 3.65rem) !important;
  }

  .hero p {
    font-size: .95rem !important;
  }

  .hero-actions {
    justify-content: flex-start !important;
  }
}

@media (max-width: 680px) {
  .hero .container {
    padding-right: 18px !important;
    padding-left: 18px !important;
  }

  .hotels-grid {
    gap: 24px !important;
  }

  .hotel-card {
    flex-basis: min(100%, 410px) !important;
  }
}


/* ===================== v7 logo + English + exact hotels rows ===================== */

/* تكبير الشعار قليلاً */
.brand-centered {
  width: 142px !important;
  height: 114px !important;
}

.brand-centered img {
  width: 124px !important;
  max-height: 104px !important;
}

/* الصفحة الرئيسية فقط: إلغاء الزجاج تحت الشعار تماماً */
.page-home .brand-centered .brand-glow {
  display: none !important;
  opacity: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  backdrop-filter: none !important;
}

/* الصفحات الداخلية: يبقى تأثير خلفية الشعار الزجاجية */
.page-hotels .brand-centered .brand-glow,
.page-contact .brand-centered .brand-glow {
  display: block !important;
}

/* إلغاء التأثير/الامتداد الجانبي بجانب زر English */
.top-english::before,
.top-english::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  background: transparent !important;
}

/* زر English بدون أي ذيل جانبي */
.top-english {
  top: calc(50% + 16px) !important;
  box-shadow: 0 14px 32px rgba(0,0,0,.16) !important;
}

/* الفنادق: 3 في الصف الأول و2 في الصف الثاني وسط الصفحة */
.hotels-grid {
  width: min(1180px, 100%) !important;
  margin-inline: auto !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 30px !important;
}

.hotel-card {
  flex: 0 1 calc((100% - 60px) / 3) !important;
  max-width: 372px !important;
  min-width: 300px !important;
  justify-self: center !important;
}

/* المحافظة على السطر الثاني في المنتصف */
.hotels-grid .hotel-card:nth-last-child(2),
.hotels-grid .hotel-card:nth-last-child(1) {
  margin-inline: 0 !important;
}

/* الجوال والتابلت */
@media (max-width: 1050px) {
  .brand-centered {
    width: 118px !important;
    height: 92px !important;
  }

  .brand-centered img {
    width: 98px !important;
    max-height: 82px !important;
  }

  .hotel-card {
    flex-basis: calc((100% - 30px) / 2) !important;
    max-width: 410px !important;
  }
}

@media (max-width: 860px) {
  .brand-centered {
    width: 104px !important;
    height: 82px !important;
  }

  .brand-centered img {
    width: 88px !important;
    max-height: 74px !important;
  }

  .page-home .brand-centered .brand-glow {
    display: none !important;
  }
}

@media (max-width: 680px) {
  .hotel-card {
    flex-basis: min(100%, 410px) !important;
    max-width: 410px !important;
  }
}


/* ===================== v8 logo halo + footer clarity ===================== */

/* الشعار: أكبر قليلاً ومزاح لليسار لموازنة القائمة اليمنى */
.brand-centered {
  width: 154px !important;
  height: 122px !important;
  transform: translateX(-34px) !important;
}

.brand-centered img {
  width: 136px !important;
  max-height: 112px !important;
  filter:
    drop-shadow(0 12px 18px rgba(0,0,0,.24))
    drop-shadow(0 0 10px rgba(255,255,255,.34)) !important;
}

/* الصفحة الرئيسية: هالة صغيرة فقط للشعار، بدون بوكس زجاجي واضح */
.page-home .brand-centered .brand-glow {
  display: block !important;
  opacity: 1 !important;
  position: absolute !important;
  inset: 18px 14px 10px 14px !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at center,
      rgba(255,255,255,.34) 0%,
      rgba(255,255,255,.22) 36%,
      rgba(255,255,255,.08) 62%,
      rgba(255,255,255,0) 78%) !important;
  box-shadow:
    0 0 28px rgba(255,255,255,.22),
    0 18px 34px rgba(0,0,0,.10) !important;
  border: 0 !important;
  backdrop-filter: blur(5px) !important;
  z-index: -1 !important;
}

/* الصفحات الداخلية: احتفظ بالهالة/الخلفية بشكل ألطف */
.page-hotels .brand-centered .brand-glow,
.page-contact .brand-centered .brand-glow {
  display: block !important;
  opacity: 1 !important;
  inset: 8px -8px 2px -8px !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 50% 65%, rgba(255,255,255,.28), rgba(255,255,255,.10) 54%, transparent 78%),
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.06)) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.12) !important;
  backdrop-filter: blur(9px) !important;
}

/* الفوتر: تكبير النصوص والهاتف وتحسين الوضوح */
.site-footer {
  padding-top: 70px !important;
}

.footer-grid {
  align-items: center !important;
  gap: 42px !important;
}

.footer-logo {
  position: relative;
  isolation: isolate;
}

.footer-logo::before {
  content: "";
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  width: 158px;
  height: 118px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center,
      rgba(255,255,255,.20) 0%,
      rgba(255,255,255,.13) 42%,
      rgba(255,255,255,0) 78%);
  box-shadow: 0 0 38px rgba(255,255,255,.10);
  z-index: -1;
  pointer-events: none;
}

.footer-logo img {
  width: 145px !important;
  filter:
    drop-shadow(0 16px 30px rgba(0,0,0,.32))
    drop-shadow(0 0 12px rgba(255,255,255,.16)) !important;
}

.footer-logo p {
  font-size: 1.02rem !important;
  line-height: 2 !important;
  font-weight: 700 !important;
  max-width: 360px;
  margin: 14px auto 0 !important;
  color: rgba(255,255,255,.88) !important;
}

.site-footer h3 {
  font-size: 1.28rem !important;
  margin-bottom: 18px !important;
  color: var(--gold-light) !important;
}

.site-footer p,
.site-footer li,
.site-footer a {
  font-size: 1rem !important;
  line-height: 1.9 !important;
  font-weight: 800 !important;
}

.site-footer a[href^="tel"] {
  direction: ltr;
  unicode-bidi: plaintext;
  display: inline-block;
  font-size: 1.12rem !important;
  font-weight: 900 !important;
  color: #fff !important;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 6px 16px;
  margin-top: 3px;
}

.site-footer a[href^="mailto"] {
  font-size: 1.03rem !important;
  color: #fff !important;
}

.footer-bottom p {
  font-size: .98rem !important;
  font-weight: 700 !important;
}

/* على الجوال: لا نبالغ بإزاحة الشعار */
@media (max-width: 1050px) {
  .brand-centered {
    transform: translateX(-18px) !important;
  }
}

@media (max-width: 860px) {
  .brand-centered {
    width: 116px !important;
    height: 90px !important;
    transform: translateX(0) !important;
  }

  .brand-centered img {
    width: 98px !important;
    max-height: 82px !important;
  }

  .page-home .brand-centered .brand-glow {
    inset: 14px 10px 8px !important;
  }

  .footer-logo img {
    width: 128px !important;
  }

  .site-footer p,
  .site-footer li,
  .site-footer a {
    font-size: .98rem !important;
  }
}


/* ===================== v9 refinement: home logo, footer, cards ===================== */

/* الصفحة الرئيسية فقط: الشعار أقصى اليسار بشكل منظم مقابل القائمة */
.page-home .navbar {
  grid-template-columns: 1fr auto 1fr !important;
}

.page-home .nav-menu-right {
  grid-column: 1 !important;
  justify-self: start !important;
}

.page-home .brand-centered {
  grid-column: 3 !important;
  justify-self: end !important;
  transform: translateX(0) !important;
  width: 150px !important;
  height: 118px !important;
}

.page-home .brand-centered img {
  width: 132px !important;
  max-height: 108px !important;
}

/* زجاجي ضيق تحت الشعار بدل الهالة */
.page-home .brand-centered .brand-glow {
  display: block !important;
  opacity: 1 !important;
  inset: auto 10px 8px 10px !important;
  height: 32px !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.08)) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow:
    0 10px 20px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.26) !important;
  backdrop-filter: blur(9px) !important;
  z-index: -1 !important;
}

/* الصفحات الداخلية تبقى كما هي */
.page-hotels .brand-centered,
.page-contact .brand-centered {
  transform: translateX(-34px) !important;
}

/* إلغاء حرف J من بطاقات الفنادق */
.hotel-card::after {
  content: none !important;
  display: none !important;
}

/* الفوتر: النصوص العادية بدون bold، العناوين فقط bold */
.site-footer h3 {
  font-weight: 900 !important;
}

.site-footer p,
.site-footer li,
.site-footer a {
  font-weight: 500 !important;
  line-height: 2 !important;
}

.footer-logo p {
  font-weight: 500 !important;
  color: rgba(255,255,255,.86) !important;
}

/* إزالة الهايلايت من شعار الفوتر نهائيًا */
.footer-logo::before {
  content: none !important;
  display: none !important;
}

.footer-logo {
  position: relative;
  isolation: isolate;
}

.footer-logo::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  width: 120px;
  height: 18px;
  border-radius: 999px;
  background: rgba(214, 177, 210, .28);
  filter: blur(10px);
  z-index: -1;
  pointer-events: none;
}

.footer-logo img {
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.22)) !important;
}

/* إزالة الإطار حول الهاتف، مع تصحيح الاتجاه */
.site-footer a[href^="tel"] {
  direction: ltr !important;
  unicode-bidi: bidi-override !important;
  display: inline-block !important;
  font-size: 1.12rem !important;
  font-weight: 600 !important;
  color: #fff !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-top: 4px !important;
  box-shadow: none !important;
}

/* البريد أوضح ولكن غير بولد مبالغ */
.site-footer a[href^="mailto"] {
  font-size: 1.03rem !important;
  font-weight: 500 !important;
  color: #fff !important;
}

/* العنوان السفلي والموقع بخط أوضح بدون bold زائد */
.footer-bottom p,
.info-card p,
.site-footer .footer-grid p,
.site-footer .footer-grid li {
  font-weight: 500 !important;
}

/* الجوال */
@media (max-width: 860px) {
  .page-home .brand-centered {
    justify-self: end !important;
    width: 110px !important;
    height: 86px !important;
  }

  .page-home .brand-centered img {
    width: 92px !important;
    max-height: 76px !important;
  }

  .page-home .brand-centered .brand-glow {
    inset: auto 8px 6px 8px !important;
    height: 24px !important;
  }

  .page-hotels .brand-centered,
  .page-contact .brand-centered {
    transform: translateX(0) !important;
  }

  .site-footer a[href^="tel"] {
    font-size: 1.02rem !important;
  }

  .site-footer p,
  .site-footer li,
  .site-footer a {
    font-size: .98rem !important;
  }
}


/* ===================== v11 only: home logo glass panel ===================== */
/* العودة إلى نسخة v9 كما هي، وتعديل واحد فقط:
   خلفية زجاجية مدورة خلف شعار الصفحة الرئيسية بحجمه وأكبر قليلاً */

.page-home .brand-centered {
  grid-column: 3 !important;
  justify-self: end !important;
  transform: translateX(0) !important;
  width: 150px !important;
  height: 118px !important;
}

.page-home .brand-centered img {
  width: 132px !important;
  max-height: 108px !important;
}

/* استبدال الشريط الزجاجي السفلي بلوح زجاجي خلف الشعار بالكامل */
.page-home .brand-centered .brand-glow {
  display: block !important;
  opacity: 1 !important;
  inset: 4px 2px 2px 2px !important;
  height: auto !important;
  border-radius: 26px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.08)) !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  box-shadow:
    0 16px 34px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
  backdrop-filter: blur(10px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(125%) !important;
  z-index: -1 !important;
}

@media (max-width: 860px) {
  .page-home .brand-centered {
    justify-self: end !important;
    width: 110px !important;
    height: 86px !important;
  }

  .page-home .brand-centered img {
    width: 92px !important;
    max-height: 76px !important;
  }

  .page-home .brand-centered .brand-glow {
    inset: 3px 2px 2px 2px !important;
    border-radius: 20px !important;
  }
}


/* ===================== v12 logo glass style like approved reference ===================== */
/* الصفحة الرئيسية فقط: خلفية زجاجية مستطيلة مدورة خلف الشعار كما في الصورة المرجعية */

.page-home .brand-centered {
  grid-column: 3 !important;
  justify-self: end !important;
  transform: translateX(0) !important;
  width: 156px !important;
  height: 126px !important;
  display: grid !important;
  place-items: center !important;
  position: relative !important;
  isolation: isolate !important;
}

.page-home .brand-centered img {
  width: 128px !important;
  max-height: 106px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.10)) !important;
}

/* هذا هو الصندوق الزجاجي المطلوب */
.page-home .brand-centered .brand-glow {
  display: block !important;
  opacity: 1 !important;
  position: absolute !important;
  inset: 2px 0 0 0 !important;
  height: auto !important;
  border-radius: 22px !important;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.62) 0%,
      rgba(255,255,255,.42) 48%,
      rgba(255,255,255,.30) 100%) !important;
  border: 1.5px solid rgba(255,255,255,.58) !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.48) !important;
  backdrop-filter: blur(10px) saturate(115%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(115%) !important;
  z-index: -1 !important;
}

/* تحسين التباين حول الشعار فقط */
.page-home .brand-centered::after {
  content: "" !important;
  position: absolute !important;
  inset: 10px 14px 12px 14px !important;
  border-radius: 18px !important;
  background: radial-gradient(circle at center, rgba(255,255,255,.12), transparent 68%) !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

@media (max-width: 860px) {
  .page-home .brand-centered {
    width: 118px !important;
    height: 98px !important;
  }

  .page-home .brand-centered img {
    width: 94px !important;
    max-height: 80px !important;
  }

  .page-home .brand-centered .brand-glow {
    inset: 2px 0 0 0 !important;
    border-radius: 18px !important;
  }

  .page-home .brand-centered::after {
    inset: 9px 10px 10px 10px !important;
    border-radius: 14px !important;
  }
}

@media (max-width: 680px) {
  .page-home .brand-centered {
    width: 108px !important;
    height: 90px !important;
  }

  .page-home .brand-centered img {
    width: 86px !important;
    max-height: 72px !important;
  }
}


/* ===================== v14 final override only ===================== */
/* المطلوب فقط:
   - الرجوع لنسخة v12 كما هي
   - جعل شعار الهيدر في الوسط في كل الصفحات
   - حذف أي خلفية زجاجية أو هالة خلف شعار الهيدر
   - تطبيق نفس الشيء على الجوال
*/

/* توحيد مكان شعار الهيدر في الوسط في كل الصفحات */
.brand-centered,
.page-home .brand-centered,
.page-hotels .brand-centered,
.page-contact .brand-centered {
  grid-column: 2 !important;
  justify-self: center !important;
  align-self: center !important;
  transform: translateX(0) !important;
}

/* حذف أي خلفية/هالة/زجاج خلف شعار الهيدر في كل الصفحات */
.brand-centered .brand-glow,
.page-home .brand-centered .brand-glow,
.page-hotels .brand-centered .brand-glow,
.page-contact .brand-centered .brand-glow,
.brand-centered::before,
.brand-centered::after,
.page-home .brand-centered::before,
.page-home .brand-centered::after,
.page-hotels .brand-centered::before,
.page-hotels .brand-centered::after,
.page-contact .brand-centered::before,
.page-contact .brand-centered::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* نفس التعديل على الجوال */
@media (max-width: 860px) {
  .brand-centered,
  .page-home .brand-centered,
  .page-hotels .brand-centered,
  .page-contact .brand-centered {
    grid-column: 2 !important;
    justify-self: center !important;
    align-self: center !important;
    transform: translateX(0) !important;
  }

  .brand-centered .brand-glow,
  .page-home .brand-centered .brand-glow,
  .page-hotels .brand-centered .brand-glow,
  .page-contact .brand-centered .brand-glow,
  .brand-centered::before,
  .brand-centered::after,
  .page-home .brand-centered::before,
  .page-home .brand-centered::after,
  .page-hotels .brand-centered::before,
  .page-hotels .brand-centered::after,
  .page-contact .brand-centered::before,
  .page-contact .brand-centered::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}


/* ===================== v15 mobile header + menu + scroll support ===================== */
/* مبني على v14: لا حذف ولا تنظيف، فقط أوفررايد نهائي للمطلوب */

/* تأكيد: لا توجد خلفية/هالة خلف الشعار في كل الصفحات وكل الأجهزة */
.brand-centered .brand-glow,
.page-home .brand-centered .brand-glow,
.page-hotels .brand-centered .brand-glow,
.page-contact .brand-centered .brand-glow,
.brand-centered::before,
.brand-centered::after,
.page-home .brand-centered::before,
.page-home .brand-centered::after,
.page-hotels .brand-centered::before,
.page-hotels .brand-centered::after,
.page-contact .brand-centered::before,
.page-contact .brand-centered::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* الشعار في الوسط في كل الصفحات */
.brand-centered,
.page-home .brand-centered,
.page-hotels .brand-centered,
.page-contact .brand-centered {
  grid-column: 2 !important;
  justify-self: center !important;
  align-self: center !important;
  transform: translateX(0) !important;
}

/* تحسين حركة اختفاء الهيدر */
.site-header {
  transition:
    transform .78s cubic-bezier(.22, 1, .36, 1),
    opacity .46s ease,
    filter .46s ease !important;
}

.site-header.is-hidden {
  transform: translateY(-120%) !important;
  opacity: 0 !important;
  filter: blur(2px) !important;
  pointer-events: none !important;
}

/* الجوال والتابلت: زر القائمة يسار، English يمين، الشعار وسط */
@media (max-width: 860px) {
  .site-header {
    z-index: 5000 !important;
  }

  .top-strip-wrap {
    position: relative !important;
    overflow: visible !important;
  }

  .top-strip {
    min-height: 36px !important;
    font-size: .78rem !important;
    padding: 6px 82px !important;
  }

  .navbar {
    position: relative !important;
    width: min(100% - 24px, var(--container)) !important;
    min-height: 84px !important;
    margin-top: 14px !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    gap: 8px !important;
  }

  /* زر القائمة في الجهة اليسار */
  .nav-actions-left {
    grid-column: 1 !important;
    justify-self: start !important;
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  .menu-toggle {
    display: inline-grid !important;
    place-items: center !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.36) !important;
    border: 1px solid rgba(255,255,255,.34) !important;
    box-shadow:
      0 12px 28px rgba(0,0,0,.12),
      inset 0 1px 0 rgba(255,255,255,.42) !important;
    backdrop-filter: blur(14px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
    padding: 11px !important;
    position: relative !important;
    z-index: 10020 !important;
  }

  .menu-toggle span {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    background: var(--primary) !important;
    margin: 3px 0 !important;
    border-radius: 8px !important;
    transition: .24s ease !important;
  }

  .menu-toggle.is-open span:nth-child(1) {
    transform: translateY(5px) rotate(45deg) !important;
  }

  .menu-toggle.is-open span:nth-child(2) {
    opacity: 0 !important;
  }

  .menu-toggle.is-open span:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg) !important;
  }

  /* الشعار في الوسط وبدون خلفية خلفه */
  .brand-centered,
  .page-home .brand-centered,
  .page-hotels .brand-centered,
  .page-contact .brand-centered {
    grid-column: 2 !important;
    justify-self: center !important;
    align-self: center !important;
    width: 112px !important;
    height: 88px !important;
    transform: translateX(0) !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  .brand-centered img,
  .page-home .brand-centered img,
  .page-hotels .brand-centered img,
  .page-contact .brand-centered img {
    width: 94px !important;
    max-height: 78px !important;
    filter: drop-shadow(0 10px 16px rgba(0,0,0,.22)) !important;
  }

  /* زر English في الجهة اليمين ومرفوع مع صف الهيدر */
  .top-english {
    position: absolute !important;
    left: auto !important;
    right: 14px !important;
    top: calc(100% + 18px) !important;
    transform: none !important;
    width: auto !important;
    height: 38px !important;
    min-width: 74px !important;
    padding: 0 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.72) !important;
    color: var(--primary) !important;
    border: 1px solid rgba(255,255,255,.46) !important;
    outline: 0 !important;
    box-shadow:
      0 12px 28px rgba(0,0,0,.12),
      inset 0 1px 0 rgba(255,255,255,.48) !important;
    backdrop-filter: blur(14px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
    font-size: .76rem !important;
    font-weight: 900 !important;
    z-index: 10015 !important;
  }

  .top-english::before,
  .top-english::after {
    content: none !important;
    display: none !important;
  }

  .top-english:hover {
    transform: none !important;
    background: var(--primary) !important;
    color: #fff !important;
  }

  /* قائمة الجوال: نافذة زجاجية شفافة في الوسط */
  .nav-menu-right {
    display: none !important;
  }

  .nav-menu-right.is-open {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    z-index: 10010 !important;

    width: min(86vw, 360px) !important;
    min-height: auto !important;
    padding: 26px 22px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 13px !important;

    border-radius: 30px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.44), rgba(255,255,255,.22)) !important;
    border: 1px solid rgba(255,255,255,.42) !important;
    box-shadow:
      0 26px 70px rgba(42,6,29,.28),
      inset 0 1px 0 rgba(255,255,255,.50) !important;
    backdrop-filter: blur(18px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
  }

  .nav-menu-right.is-open::before {
    content: "" !important;
    position: fixed !important;
    inset: -100vh !important;
    background: rgba(32, 7, 23, .18) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    z-index: -1 !important;
    pointer-events: none !important;
  }

  .nav-menu-right.is-open a {
    width: 100% !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: var(--primary) !important;
    font-size: 1.08rem !important;
    font-weight: 900 !important;

    border-radius: 18px !important;
    background: rgba(255,255,255,.58) !important;
    border: 1px solid rgba(123,15,80,.10) !important;
    box-shadow: 0 10px 22px rgba(123,15,80,.06) !important;
    transform: none !important;
  }

  .nav-menu-right.is-open a:hover,
  .nav-menu-right.is-open a.active {
    color: #fff !important;
    background: var(--primary) !important;
  }

  .nav-menu-right.is-open a::after {
    content: none !important;
    display: none !important;
  }
}

/* الجوال الصغير */
@media (max-width: 430px) {
  .top-strip {
    padding-right: 78px !important;
    padding-left: 58px !important;
    font-size: .72rem !important;
  }

  .top-english {
    right: 12px !important;
    min-width: 68px !important;
    height: 36px !important;
    font-size: .71rem !important;
    padding: 0 10px !important;
  }

  .menu-toggle {
    width: 44px !important;
    height: 44px !important;
  }

  .brand-centered,
  .page-home .brand-centered,
  .page-hotels .brand-centered,
  .page-contact .brand-centered {
    width: 104px !important;
    height: 82px !important;
  }

  .brand-centered img,
  .page-home .brand-centered img,
  .page-hotels .brand-centered img,
  .page-contact .brand-centered img {
    width: 88px !important;
    max-height: 72px !important;
  }
}

/* ===================== v18 mobile controls cleanup ===================== */
:root {
  --gazelle-blood: #7b0f50;
}

/* دائرة الصعود بنفس ألوان اللغة/القائمة */
.back-to-top {
  background: radial-gradient(circle at 34% 28%, #fff 0%, #fff6fa 72%, #f0dee7 100%) !important;
  color: var(--gazelle-blood) !important;
  border: 3px solid rgba(255, 255, 255, 0.9) !important;
  outline: 2px solid rgba(138, 58, 52, 0.92) !important;
  box-shadow: 0 12px 30px rgba(26, 8, 18, 0.2) !important;
  font-size: 0 !important;
}

.back-to-top::before {
  content: "↑";
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
}

.back-to-top:hover {
  background: var(--gazelle-blood) !important;
  color: #fff !important;
}

@media (max-width: 860px) {
  .top-strip-wrap {
    position: relative !important;
    overflow: visible !important;
  }

  /* English يمين: بمحاذاة دائرة القائمة */
  .top-english {
    position: absolute !important;
    right: 14px !important;
    left: auto !important;
    top: calc(100% - 28px) !important;
    transform: none !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: radial-gradient(circle at 34% 28%, #fff 0%, #fff6fa 72%, #f0dee7 100%) !important;
    color: var(--gazelle-blood) !important;
    border: 3px solid rgba(255, 255, 255, 0.9) !important;
    outline: 2px solid var(--gazelle-blood) !important;
    box-shadow: 0 12px 30px rgba(26, 8, 18, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.52) !important;
    font-size: 0.74rem !important;
    font-weight: 900 !important;
    z-index: 10040 !important;
  }

  .top-english::before {
    content: none !important;
    display: none !important;
  }

  .top-english::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: -10px !important;
    transform: translateX(-50%) !important;
    width: 30px !important;
    height: 11px !important;
    border-radius: 0 0 999px 999px !important;
    background: rgba(123, 15, 80, 0.86) !important;
    box-shadow: 0 4px 10px rgba(123, 15, 80, 0.26) !important;
  }

  .top-english:hover {
    background: var(--gazelle-blood) !important;
    color: #fff !important;
  }

  /* الشعار أكبر مع زجاج أبيض شفاف خفيف خلفه */
  .brand-centered {
    width: 128px !important;
    height: 100px !important;
    grid-column: 2 !important;
    justify-self: center !important;
  }

  .brand-centered img {
    width: 108px !important;
    max-height: 88px !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .brand-centered .brand-glow {
    display: block !important;
    opacity: 1 !important;
    position: absolute !important;
    inset: 8px 8px 6px 8px !important;
    border-radius: 24px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.16)) !important;
    border: 1px solid rgba(255, 255, 255, 0.34) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.44) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 1 !important;
  }

  /* القائمة يسار بنفس ارتفاع وحجم دائرة اللغة */
  .navbar {
    min-height: 92px !important;
    margin-top: 26px !important;
    padding: 0 12px !important;
  }

  .nav-actions-left {
    position: absolute !important;
    left: 14px !important;
    right: auto !important;
    top: -28px !important;
    grid-column: auto !important;
    justify-self: auto !important;
    align-self: auto !important;
    margin-top: 0 !important;
    z-index: 10045 !important;
  }

  .menu-toggle {
    position: relative !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    border: 3px solid rgba(255, 255, 255, 0.9) !important;
    outline: 2px solid var(--gazelle-blood) !important;
    background: radial-gradient(circle at 34% 28%, #fff 0%, #fff6fa 72%, #f0dee7 100%) !important;
    box-shadow: 0 12px 30px rgba(26, 8, 18, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.52) !important;
    padding: 13px !important;
  }

  .menu-toggle span {
    width: 22px !important;
    height: 2px !important;
    margin: 3px 0 !important;
    background: var(--gazelle-blood) !important;
  }

  /* القائمة تحت الهيدر وليس فوقه */
  .nav-menu-right {
    top: 154px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: min(90vw, 370px) !important;
    max-height: calc(100svh - 170px) !important;
    overflow: auto !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.22)) !important;
    border: 1px solid rgba(255, 255, 255, 0.42) !important;
    box-shadow: 0 24px 66px rgba(42, 6, 29, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.52) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(-50%) translateY(-8px) scale(0.97) !important;
    transition: opacity 0.28s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.28s ease !important;
  }

  .nav-menu-right.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) scale(1) !important;
  }

  /* لون موحد لكل عناصر المنيو */
  .nav-menu-right a,
  .nav-menu-right.is-open a {
    color: var(--gazelle-blood) !important;
    border-color: rgba(123, 15, 80, 0.2) !important;
    font-weight: 900 !important;
  }

  .nav-menu-right a:hover,
  .nav-menu-right a.active,
  .nav-menu-right.is-open a:hover,
  .nav-menu-right.is-open a.active {
    background: var(--gazelle-blood) !important;
    color: #fff !important;
  }
  .back-to-top {
    left: 18px !important;
    right: auto !important;
  }
}

@media (max-width: 430px) {
  .top-english,
  .menu-toggle {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
  }

  .top-english {
    right: 12px !important;
    top: calc(100% - 25px) !important;
    font-size: 0.7rem !important;
  }

  .nav-actions-left {
    left: 12px !important;
    top: -25px !important;
  }

  .brand-centered {
    width: 118px !important;
    height: 94px !important;
  }

  .brand-centered img {
    width: 98px !important;
    max-height: 80px !important;
  }

  .nav-menu-right {
    top: 146px !important;
    width: min(92vw, 350px) !important;
    max-height: calc(100svh - 160px) !important;
  }

  .back-to-top {
    left: 14px !important;
    right: auto !important;
  }
}

/* ===================== bilingual layout support ===================== */
.page-lang-en .hero-content {
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

.page-lang-en .hero h1,
.page-lang-en .hero p,
.page-lang-en .etmaen-content {
  text-align: left;
}

.page-lang-en .hero-actions {
  justify-content: flex-start !important;
}

.page-lang-en .etmaen-list li::before {
  margin-right: 8px;
  margin-left: 0;
}

.page-lang-en .top-english {
  font-size: .68rem !important;
}


/* ===================== OMAR FINAL MOBILE HEADER LOCK - 2026-06-26 =====================
   Mobile only: keep language button always right and menu button always left,
   with identical size/style on Arabic and English pages.
   ================================================================================ */

@media (max-width: 860px) {
  .site-header {
    overflow: visible !important;
  }

  .top-strip-wrap {
    position: relative !important;
    min-height: 40px !important;
    overflow: visible !important;
  }

  .top-strip {
    min-height: 40px !important;
    padding: 7px 82px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1.5 !important;
  }

  .navbar {
    width: 100% !important;
    min-height: 98px !important;
    margin: 14px auto 0 !important;
    padding: 0 82px !important;
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .nav-actions-left {
    position: static !important;
    grid-column: 3 !important;
    justify-self: end !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .top-english,
  .menu-toggle {
    position: fixed !important;
    top: 58px !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: radial-gradient(circle at 34% 28%, #fff 0%, #fff6fa 72%, #f0dee7 100%) !important;
    color: var(--gazelle-blood, #7b0f50) !important;
    border: 3px solid rgba(255, 255, 255, 0.9) !important;
    outline: 2px solid var(--gazelle-blood, #7b0f50) !important;
    box-shadow: 0 12px 30px rgba(26, 8, 18, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.52) !important;
    z-index: 10060 !important;
    transform: none !important;
    inset-inline: auto !important;
    text-decoration: none !important;
  }

  .top-english {
    right: 14px !important;
    left: auto !important;
    font-size: 0.72rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  .menu-toggle {
    left: 14px !important;
    right: auto !important;
    cursor: pointer !important;
  }

  .top-english::before,
  .top-english::after,
  .menu-toggle::before,
  .menu-toggle::after {
    content: none !important;
    display: none !important;
  }

  .menu-toggle span {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    margin: 3px 0 !important;
    border-radius: 999px !important;
    background: var(--gazelle-blood, #7b0f50) !important;
    transition: transform 0.25s ease, opacity 0.25s ease !important;
  }

  .menu-toggle.is-open span:nth-child(1) {
    transform: translateY(5px) rotate(45deg) !important;
  }

  .menu-toggle.is-open span:nth-child(2) {
    opacity: 0 !important;
  }

  .menu-toggle.is-open span:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg) !important;
  }

  .brand-centered,
  .page-home .brand-centered,
  .page-hotels .brand-centered,
  .page-contact .brand-centered {
    grid-column: 2 !important;
    justify-self: center !important;
    align-self: center !important;
    width: 126px !important;
    height: 98px !important;
    transform: none !important;
  }

  .brand-centered img,
  .page-home .brand-centered img,
  .page-hotels .brand-centered img,
  .page-contact .brand-centered img {
    width: 106px !important;
    max-height: 86px !important;
    object-fit: contain !important;
  }

  .nav-menu-right {
    position: fixed !important;
    top: 126px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: min(92vw, 370px) !important;
    max-height: calc(100svh - 150px) !important;
    overflow: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 18px !important;
    border-radius: 26px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.34)) !important;
    border: 1px solid rgba(255,255,255,.46) !important;
    box-shadow: 0 24px 66px rgba(42,6,29,.24), inset 0 1px 0 rgba(255,255,255,.52) !important;
    backdrop-filter: blur(18px) saturate(155%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(155%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(-50%) translateY(-8px) scale(.97) !important;
    transition: opacity .28s ease, transform .30s cubic-bezier(.22,1,.36,1), visibility .28s ease !important;
    z-index: 10050 !important;
  }

  .nav-menu-right.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) scale(1) !important;
  }

  .nav-menu-right a,
  .nav-menu-right.is-open a {
    min-height: 48px !important;
    justify-content: center !important;
    color: var(--gazelle-blood, #7b0f50) !important;
    border: 1px solid rgba(123, 15, 80, .20) !important;
    background: rgba(255,255,255,.54) !important;
    font-weight: 900 !important;
  }

  .nav-menu-right a:hover,
  .nav-menu-right a.active,
  .nav-menu-right.is-open a:hover,
  .nav-menu-right.is-open a.active {
    background: var(--gazelle-blood, #7b0f50) !important;
    color: #fff !important;
  }

  .page-lang-en .hero,
  .page-lang-en .hero .container,
  .page-lang-en .hero-content {
    direction: ltr !important;
  }

  .page-lang-en .hero-content {
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
  }

  .page-lang-en .hero-badge,
  .page-lang-en .hero h1,
  .page-lang-en .hero p {
    text-align: left !important;
  }

  .page-lang-en .hero-actions {
    justify-content: flex-start !important;
  }
}

@media (max-width: 430px) {
  .top-english,
  .menu-toggle {
    top: 56px !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
  }

  .top-english {
    right: 12px !important;
    font-size: 0.68rem !important;
  }

  .menu-toggle {
    left: 12px !important;
  }

  .navbar {
    padding-left: 72px !important;
    padding-right: 72px !important;
    min-height: 92px !important;
  }

  .brand-centered,
  .page-home .brand-centered,
  .page-hotels .brand-centered,
  .page-contact .brand-centered {
    width: 116px !important;
    height: 92px !important;
  }

  .brand-centered img,
  .page-home .brand-centered img,
  .page-hotels .brand-centered img,
  .page-contact .brand-centered img {
    width: 96px !important;
    max-height: 78px !important;
  }

  .nav-menu-right {
    top: 120px !important;
    width: min(92vw, 350px) !important;
    max-height: calc(100svh - 142px) !important;
  }
}

/* ===================== OMAR HANGING MOBILE ICONS + TABLET DESKTOP NAV - 2026-06-26 =====================
   1) Phone: language button right + menu button left, half inside the top strip and half hanging below.
   2) Tablet: same desktop header/menu behavior, only slightly smaller typography and spacing.
   ===================================================================================================== */

/* Tablet / iPad: keep the desktop navigation style, not the floating mobile menu */
@media (min-width: 681px) and (max-width: 1050px) {
  .site-header {
    overflow: visible !important;
  }

  .top-strip-wrap {
    position: relative !important;
    min-height: 38px !important;
    overflow: visible !important;
  }

  .top-strip {
    min-height: 38px !important;
    padding: 6px 82px !important;
    font-size: 0.86rem !important;
    line-height: 1.45 !important;
  }

  .top-english {
    position: absolute !important;
    top: calc(50% + 13px) !important;
    left: max(14px, calc((100vw - var(--container)) / 2)) !important;
    right: auto !important;
    transform: translateY(-50%) !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: radial-gradient(circle at 34% 28%, #fff 0%, #fff6fa 72%, #f0dee7 100%) !important;
    color: var(--gazelle-blood, #7b0f50) !important;
    border: 3px solid rgba(255,255,255,.9) !important;
    outline: 2px solid var(--gazelle-blood, #7b0f50) !important;
    box-shadow: 0 12px 30px rgba(26,8,18,.18), inset 0 1px 0 rgba(255,255,255,.52) !important;
    font-size: 0.64rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-align: center !important;
    z-index: 10030 !important;
  }

  .top-english::before,
  .top-english::after {
    content: none !important;
    display: none !important;
  }

  .navbar {
    width: min(1180px, calc(100% - 32px)) !important;
    min-height: 90px !important;
    margin: 18px auto 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    gap: 12px !important;
    align-items: center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .nav-menu-right,
  .nav-menu-right.is-open {
    position: static !important;
    inset: auto !important;
    grid-column: 1 !important;
    justify-self: start !important;
    width: auto !important;
    max-width: calc(50vw - 72px) !important;
    max-height: none !important;
    overflow: visible !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    padding: 7px 9px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.42) !important;
    border: 1px solid rgba(255,255,255,.38) !important;
    box-shadow: 0 18px 45px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.50) !important;
    backdrop-filter: blur(18px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    transition: none !important;
    z-index: auto !important;
  }

  .nav-menu-right::before,
  .nav-menu-right.is-open::before {
    content: none !important;
    display: none !important;
  }

  .nav-menu-right a,
  .nav-menu-right.is-open a {
    width: auto !important;
    min-height: 38px !important;
    padding: 0 9px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #171117 !important;
    font-size: 0.78rem !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
  }

  .nav-menu-right a:hover,
  .nav-menu-right a.active,
  .nav-menu-right.is-open a:hover,
  .nav-menu-right.is-open a.active {
    color: var(--gazelle-blood, #7b0f50) !important;
    background: rgba(255,255,255,.36) !important;
  }

  .brand-centered,
  .page-home .brand-centered,
  .page-hotels .brand-centered,
  .page-contact .brand-centered {
    grid-column: 2 !important;
    justify-self: center !important;
    align-self: center !important;
    width: 128px !important;
    height: 96px !important;
    transform: none !important;
  }

  .brand-centered img,
  .page-home .brand-centered img,
  .page-hotels .brand-centered img,
  .page-contact .brand-centered img {
    width: 108px !important;
    max-height: 86px !important;
    object-fit: contain !important;
  }

  .nav-actions-left {
    grid-column: 3 !important;
    justify-self: end !important;
    width: auto !important;
    height: auto !important;
    display: flex !important;
  }

  .menu-toggle {
    display: none !important;
  }
}

/* Phone only: two balanced hanging icons */
@media (max-width: 680px) {
  .site-header,
  .top-strip-wrap {
    overflow: visible !important;
  }

  .top-strip-wrap {
    min-height: 40px !important;
  }

  .top-strip {
    min-height: 40px !important;
    padding: 7px 82px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1.45 !important;
    font-size: 0.76rem !important;
  }

  .top-english,
  .menu-toggle {
    position: fixed !important;
    top: 12px !important; /* 56px icon: 28px inside the 40px strip and 28px hanging below */
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: radial-gradient(circle at 34% 28%, #fff 0%, #fff6fa 72%, #f0dee7 100%) !important;
    color: var(--gazelle-blood, #7b0f50) !important;
    border: 3px solid rgba(255, 255, 255, 0.9) !important;
    outline: 2px solid var(--gazelle-blood, #7b0f50) !important;
    box-shadow: 0 14px 34px rgba(26, 8, 18, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.52) !important;
    z-index: 10060 !important;
    transform: none !important;
    inset-inline: auto !important;
    text-decoration: none !important;
  }

  .top-english {
    right: 14px !important;
    left: auto !important;
    font-size: 0.70rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  .menu-toggle {
    left: 14px !important;
    right: auto !important;
    cursor: pointer !important;
  }

  .top-english::before,
  .top-english::after,
  .menu-toggle::before,
  .menu-toggle::after {
    content: none !important;
    display: none !important;
  }

  .navbar {
    width: 100% !important;
    min-height: 98px !important;
    margin: 32px auto 0 !important; /* breathing space under the hanging buttons */
    padding: 0 82px !important;
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .nav-actions-left {
    position: static !important;
    grid-column: 3 !important;
    justify-self: end !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .menu-toggle span {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    margin: 3px 0 !important;
    border-radius: 999px !important;
    background: var(--gazelle-blood, #7b0f50) !important;
  }

  .brand-centered,
  .page-home .brand-centered,
  .page-hotels .brand-centered,
  .page-contact .brand-centered {
    grid-column: 2 !important;
    justify-self: center !important;
    align-self: center !important;
    width: 126px !important;
    height: 98px !important;
    transform: none !important;
  }

  .brand-centered img,
  .page-home .brand-centered img,
  .page-hotels .brand-centered img,
  .page-contact .brand-centered img {
    width: 106px !important;
    max-height: 86px !important;
    object-fit: contain !important;
  }

  .nav-menu-right {
    position: fixed !important;
    top: 142px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: min(92vw, 370px) !important;
    max-height: calc(100svh - 166px) !important;
    overflow: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 18px !important;
    border-radius: 26px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.34)) !important;
    border: 1px solid rgba(255,255,255,.46) !important;
    box-shadow: 0 24px 66px rgba(42,6,29,.24), inset 0 1px 0 rgba(255,255,255,.52) !important;
    backdrop-filter: blur(18px) saturate(155%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(155%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(-50%) translateY(-8px) scale(.97) !important;
    transition: opacity .28s ease, transform .30s cubic-bezier(.22,1,.36,1), visibility .28s ease !important;
    z-index: 10050 !important;
  }

  .nav-menu-right.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) scale(1) !important;
  }
}

@media (max-width: 430px) {
  .top-strip {
    padding-left: 72px !important;
    padding-right: 72px !important;
    font-size: 0.70rem !important;
  }

  .top-english,
  .menu-toggle {
    top: 15px !important; /* 50px icon: half inside and half hanging */
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
  }

  .top-english {
    right: 12px !important;
    font-size: 0.66rem !important;
  }

  .menu-toggle {
    left: 12px !important;
  }

  .navbar {
    margin-top: 30px !important;
    padding-left: 72px !important;
    padding-right: 72px !important;
    min-height: 92px !important;
  }

  .brand-centered,
  .page-home .brand-centered,
  .page-hotels .brand-centered,
  .page-contact .brand-centered {
    width: 116px !important;
    height: 92px !important;
  }

  .brand-centered img,
  .page-home .brand-centered img,
  .page-hotels .brand-centered img,
  .page-contact .brand-centered img {
    width: 96px !important;
    max-height: 78px !important;
  }

  .nav-menu-right {
    top: 132px !important;
    width: min(92vw, 350px) !important;
    max-height: calc(100svh - 156px) !important;
  }
}


/* ===================== JOURY FINAL POLISH - HEADER / TABLET / FOOTER - 2026-06-26 =====================
   آخر أوفررايد: إصلاح تمدد قائمة التابلت، 4 خطوط للقائمة في الجوال، X متوسطة، سهم صعود ممتلئ، وتثبيت سنة الفوتر.
   ===================================================================================================== */

/* Tablet: allow the glass menu pill to grow enough for تواصل معنا without text escaping */
@media (min-width: 681px) and (max-width: 1050px) {
  .navbar {
    grid-template-columns: minmax(max-content, 1.45fr) auto minmax(36px, .55fr) !important;
    gap: 8px !important;
  }

  .nav-menu-right,
  .nav-menu-right.is-open {
    width: max-content !important;
    max-width: none !important;
    min-width: max-content !important;
    overflow: visible !important;
    padding: 8px 12px !important;
    gap: 4px !important;
  }

  .nav-menu-right a,
  .nav-menu-right.is-open a {
    min-height: 38px !important;
    padding: 0 8px !important;
    font-size: clamp(.70rem, 1.35vw, .78rem) !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }
}

/* Phone menu button: 4 close lines, then a perfectly centered X */
@media (max-width: 680px) {
  .menu-toggle {
    position: fixed !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    line-height: 0 !important;
  }

  .menu-toggle span {
    display: block !important;
    flex: 0 0 auto !important;
    width: 22px !important;
    height: 2px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    background: var(--gazelle-blood, #7b0f50) !important;
    opacity: 1 !important;
    transform: none !important;
    transform-origin: center !important;
    transition: transform .24s ease, opacity .18s ease, width .24s ease, height .24s ease !important;
  }

  .menu-toggle.is-open span {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 25px !important;
    height: 3px !important;
    margin: 0 !important;
    transform-origin: center !important;
  }

  .menu-toggle.is-open span:nth-child(1) {
    transform: translate(-50%, -50%) rotate(45deg) !important;
  }

  .menu-toggle.is-open span:nth-child(4) {
    transform: translate(-50%, -50%) rotate(-45deg) !important;
  }

  .menu-toggle.is-open span:nth-child(2),
  .menu-toggle.is-open span:nth-child(3) {
    opacity: 0 !important;
    transform: translate(-50%, -50%) scaleX(.12) !important;
  }
}

@media (max-width: 430px) {
  .menu-toggle span {
    width: 20px !important;
    height: 2px !important;
    gap: 2px !important;
  }

  .menu-toggle.is-open span {
    width: 23px !important;
    height: 3px !important;
  }
}

/* Center the video close × exactly inside its circle */
.video-close {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-size: 0 !important;
  text-align: center !important;
}

.video-close::before {
  content: "×" !important;
  display: block !important;
  color: currentColor !important;
  font-size: 2rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  transform: translateY(-2px) !important;
}

/* Back-to-top: filled gazelle-red arrow */
.back-to-top {
  position: fixed !important;
  display: none !important;
  place-items: center !important;
  font-size: 0 !important;
  color: var(--gazelle-blood, #7b0f50) !important;
}

.back-to-top.is-visible {
  display: grid !important;
}

.back-to-top::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 15px !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 9px solid transparent !important;
  border-right: 9px solid transparent !important;
  border-bottom: 13px solid var(--gazelle-blood, #7b0f50) !important;
  transform: translateX(-50%) !important;
}

.back-to-top::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 27px !important;
  width: 8px !important;
  height: 14px !important;
  border-radius: 999px !important;
  background: var(--gazelle-blood, #7b0f50) !important;
  transform: translateX(-50%) !important;
}

.back-to-top:hover::before {
  border-bottom-color: #fff !important;
}

.back-to-top:hover::after {
  background: #fff !important;
}

/* Footer year: isolate © 2026 so it never jumps to the wrong visual position */
.footer-copy {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .35rem !important;
  flex-wrap: wrap !important;
  direction: ltr !important;
  unicode-bidi: isolate !important;
  text-align: center !important;
}

.footer-copy-year,
.footer-copy-brand,
.footer-copy-rights {
  display: inline-block !important;
  unicode-bidi: isolate !important;
}

.footer-copy-year {
  direction: ltr !important;
  font-variant-numeric: tabular-nums !important;
}


/* ===================== v2.1 hero language images + English LTR + new back-to-top icon ===================== */
/* Arabic hero: use the uploaded hero-bg-ar image and keep the text on the Arabic side */
.page-lang-ar .hero::before {
  background:
    linear-gradient(90deg, rgba(25,8,19,.18) 0%, rgba(25,8,19,.36) 45%, rgba(25,8,19,.76) 100%),
    url("../images/hero/hero-bg-ar.jpg") center/cover no-repeat !important;
}

/* English hero: use the uploaded hero-bg-en image and open the layout from left to right */
.page-lang-en {
  direction: ltr !important;
  text-align: left;
}

.page-lang-en .hero {
  direction: ltr !important;
}

.page-lang-en .hero::before {
  background:
    linear-gradient(90deg, rgba(25,8,19,.76) 0%, rgba(25,8,19,.38) 48%, rgba(25,8,19,.16) 100%),
    url("../images/hero/hero-bg-en.jpg") center/cover no-repeat !important;
}

.page-lang-en .hero-content {
  direction: ltr !important;
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

.page-lang-en .hero p {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.page-lang-en .hero-actions {
  justify-content: flex-start !important;
}

.page-lang-en .etmaen-content,
.page-lang-en .contact-card,
.page-lang-en .info-card {
  direction: ltr !important;
  text-align: left !important;
}

.page-lang-en .etmaen-list li::before {
  margin-left: 0 !important;
  margin-right: 8px !important;
}

.page-lang-en .info-item {
  direction: ltr !important;
  text-align: left !important;
}

.page-lang-en .footer-grid,
.page-lang-en .site-footer {
  direction: ltr !important;
}

/* Keep the video background consistent with each language image */
.page-lang-ar .video-section::before {
  background:
    linear-gradient(rgba(23,8,18,.70),rgba(23,8,18,.75)),
    url("../images/hero/hero-bg-ar.jpg") center/cover no-repeat !important;
}

.page-lang-en .video-section::before {
  background:
    linear-gradient(rgba(23,8,18,.70),rgba(23,8,18,.75)),
    url("../images/hero/hero-bg-en.jpg") center/cover no-repeat !important;
}

/* Back-to-top: replace the CSS-drawn arrow with a clean ready SVG icon */
.back-to-top {
  display: none !important;
  place-items: center !important;
  font-size: 0 !important;
  line-height: 0 !important;
  padding: 0 !important;
}

.back-to-top.is-visible {
  display: grid !important;
}

.back-to-top::before,
.back-to-top::after {
  content: none !important;
  display: none !important;
}

.back-to-top-icon {
  width: 24px !important;
  height: 24px !important;
  display: block !important;
  fill: currentColor !important;
  transform: translateY(-1px) !important;
}

@media (max-width: 680px) {
  .page-lang-en .hero-content {
    text-align: left !important;
    align-items: flex-start !important;
  }

  .page-lang-en .hero-actions {
    justify-content: flex-start !important;
  }
}


/* ===================== v2.2 hotel cards mobile UX polish - 2026-06-26 =====================
   تنظيف بطاقة الفندق في الجوال + إبعاد زر الصعود عن زر تفاصيل الفندق.
   ===================================================================================================== */

/* Back-to-top: smaller, cleaner, and less intrusive on hotel cards */
.back-to-top {
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 34% 28%, #fff 0%, #fff7fb 72%, #f1dfe8 100%) !important;
  color: var(--gazelle-blood, #7b0f50) !important;
  border: 3px solid rgba(255,255,255,.94) !important;
  outline: 2px solid rgba(123,15,80,.82) !important;
  box-shadow: 0 12px 30px rgba(26,8,18,.18) !important;
}

.back-to-top-icon {
  width: 22px !important;
  height: 22px !important;
  transform: translateY(-1px) !important;
}

.back-to-top:hover {
  background: var(--gazelle-blood, #7b0f50) !important;
  color: #fff !important;
}

@media (max-width: 680px) {
  /* لا نجعل زر الصعود يركب فوق زر الفندق في الجوال */
  .back-to-top {
    left: auto !important;
    right: 14px !important;
    bottom: 86px !important;
    width: 42px !important;
    height: 42px !important;
    opacity: .96 !important;
    z-index: 850 !important;
  }

  .back-to-top-icon {
    width: 20px !important;
    height: 20px !important;
  }

  /* بطاقة الفندق: نفس التصميم، لكن أنظف وأريح في شاشة الجوال */
  .hotels {
    padding-top: 58px !important;
    padding-bottom: 76px !important;
  }

  .hotels-grid {
    gap: 28px !important;
  }

  .hotel-card {
    width: min(100%, 410px) !important;
    max-width: calc(100vw - 28px) !important;
    min-height: auto !important;
    border-radius: 24px !important;
  }

  .hotel-image {
    height: 198px !important;
    flex-basis: 198px !important;
  }

  .hotel-body {
    min-height: auto !important;
    padding: 22px 18px 30px !important;
  }

  .hotel-body h3 {
    min-height: 0 !important;
    margin-bottom: 14px !important;
    font-size: clamp(1.28rem, 6.2vw, 1.58rem) !important;
    line-height: 1.28 !important;
  }

  .hotel-badges {
    min-height: 0 !important;
    margin-bottom: 16px !important;
    gap: 9px !important;
  }

  .hotel-badges span {
    padding: 8px 13px !important;
    font-size: .82rem !important;
  }

  .hotel-desc {
    min-height: 0 !important;
    margin: 0 auto 20px !important;
    max-width: 34ch !important;
    line-height: 1.7 !important;
    font-size: .98rem !important;
  }

  .hotel-btn {
    width: min(100%, 320px) !important;
    max-width: calc(100% - 10px) !important;
    min-height: 54px !important;
    margin-top: 2px !important;
    margin-bottom: 8px !important;
  }

  .hotel-distance {
    margin-top: 14px !important;
    padding-top: 14px !important;
  }
}

@media (max-width: 430px) {
  .hotel-image {
    height: 184px !important;
    flex-basis: 184px !important;
  }

  .hotel-body {
    padding: 20px 16px 28px !important;
  }

  .hotel-body h3 {
    font-size: clamp(1.20rem, 6vw, 1.42rem) !important;
  }

  .hotel-desc {
    font-size: .94rem !important;
  }

  .hotel-btn {
    min-height: 52px !important;
  }

  .back-to-top {
    right: 12px !important;
    bottom: 78px !important;
    width: 40px !important;
    height: 40px !important;
  }
}

/* ===================== v2.3 logo editions - hero + dark footer =====================
   - Header uses logo-hero.png: original logo with thin pearl outline.
   - Footer uses logo-footer.png: reverse/negative champagne logo for dark backgrounds.
   - No change to language button or glass menu transparency.
   ================================================================================ */
.brand-centered img,
.page-home .brand-centered img,
.page-hotels .brand-centered img,
.page-contact .brand-centered img {
  filter:
    drop-shadow(0 10px 18px rgba(0,0,0,.20))
    drop-shadow(0 0 8px rgba(255,255,255,.18)) !important;
}

.site-footer .footer-logo img {
  filter:
    drop-shadow(0 14px 26px rgba(0,0,0,.24))
    drop-shadow(0 0 15px rgba(248,223,174,.20)) !important;
}

/* ===================== v2.4 footer logo balance + security/seo polish =====================
   شعار الفوتر: نسخة مخصصة للخلفية الداكنة مع الحفاظ على ألوان الهوية، بدون تحويله إلى ذهبي كامل.
   ===================================================================================================== */
.footer-logo img {
  width: 126px !important;
  max-height: 150px !important;
  object-fit: contain !important;
  filter:
    drop-shadow(0 12px 22px rgba(0,0,0,.28))
    drop-shadow(0 0 8px rgba(255,235,190,.16)) !important;
}

.footer-logo::after {
  width: 92px !important;
  height: 14px !important;
  bottom: 18px !important;
  background: rgba(255, 238, 202, .18) !important;
  filter: blur(12px) !important;
}

@media (max-width: 680px) {
  .footer-logo img {
    width: 112px !important;
    max-height: 138px !important;
  }
}


/* ===================== v2.5 soft rotating hero title =====================
   العنوان الرئيسي يتبدل كل 3 ثوانٍ بحركة ناعمة بدون تغيير الصور أو الشفافية.
   ======================================================================== */
.hero-animated-title {
  position: relative !important;
  display: block !important;
  overflow: visible !important;
  isolation: isolate !important;
}

.hero-animated-title .hero-title-set {
  display: block !important;
  will-change: opacity, transform, filter !important;
  backface-visibility: hidden !important;
  transform-origin: center center !important;
}

.hero-animated-title .hero-title-set-1 {
  animation: jouryHeroTitleOne 6s infinite cubic-bezier(.22, 1, .36, 1) !important;
}

.hero-animated-title .hero-title-set-2 {
  position: absolute !important;
  inset: 0 !important;
  animation: jouryHeroTitleTwo 6s infinite cubic-bezier(.22, 1, .36, 1) !important;
}

@keyframes jouryHeroTitleOne {
  0%, 39% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
  48%, 91% {
    opacity: 0;
    transform: translateY(-14px) scale(.985);
    filter: blur(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes jouryHeroTitleTwo {
  0%, 42% {
    opacity: 0;
    transform: translateY(16px) scale(.985);
    filter: blur(5px);
  }
  51%, 86% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
  96%, 100% {
    opacity: 0;
    transform: translateY(-12px) scale(.985);
    filter: blur(5px);
  }
}

.page-lang-en .hero-animated-title,
.page-lang-en .hero-animated-title .hero-title-set {
  direction: ltr !important;
  text-align: left !important;
}

.page-lang-ar .hero-animated-title,
.page-lang-ar .hero-animated-title .hero-title-set {
  direction: rtl !important;
  text-align: right !important;
}

@media (max-width: 680px) {
  .hero-animated-title {
    margin-bottom: 18px !important;
  }

  .page-lang-en .hero-animated-title,
  .page-lang-en .hero-animated-title .hero-title-set,
  .page-lang-ar .hero-animated-title,
  .page-lang-ar .hero-animated-title .hero-title-set {
    text-align: center !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-animated-title .hero-title-set-1 {
    animation: none !important;
  }

  .hero-animated-title .hero-title-set-2 {
    display: none !important;
    animation: none !important;
  }
}

/* ===================== v2.6 hero title color balance + subtitle spacing =====================
   تحسين لون عنوان الهيرو إلى درجتين + فصل الوصف السفلي عنه خصوصًا في النسخة الإنجليزية.
   ========================================================================================== */
.hero-animated-title {
  margin: 0 0 26px !important;
  min-height: 2.45em !important;
  letter-spacing: -0.02em !important;
}

.hero-animated-title .hero-title-set {
  color: #f7f0e7 !important;
  text-shadow: 0 10px 24px rgba(0,0,0,.26) !important;
}

.hero-animated-title .hero-title-set > span {
  display: inline-block !important;
  color: #ead3a1 !important;
}

.hero p {
  position: relative !important;
  z-index: 1 !important;
  margin-top: 10px !important;
}

.page-lang-ar .hero-animated-title {
  min-height: 2.55em !important;
}

.page-lang-en .hero-content {
  max-width: 720px !important;
}

.page-lang-en .hero h1,
.page-lang-en .hero-animated-title {
  font-size: clamp(2.9rem, 5.6vw, 4.9rem) !important;
  line-height: 1.06 !important;
  max-width: 12.6ch !important;
}

.page-lang-en .hero p {
  max-width: 660px !important;
  margin-top: 16px !important;
  line-height: 1.65 !important;
  font-size: 1.02rem !important;
}

@media (max-width: 1100px) {
  .page-lang-en .hero h1,
  .page-lang-en .hero-animated-title {
    font-size: clamp(2.7rem, 5.2vw, 4.35rem) !important;
    max-width: 12.4ch !important;
  }
}

@media (max-width: 680px) {
  .hero-animated-title {
    min-height: auto !important;
    margin-bottom: 22px !important;
  }

  .page-lang-en .hero h1,
  .page-lang-en .hero-animated-title {
    max-width: none !important;
    font-size: clamp(2.35rem, 9.4vw, 3.8rem) !important;
    line-height: 1.10 !important;
  }

  .page-lang-en .hero p,
  .page-lang-ar .hero p {
    margin-top: 12px !important;
  }
}


/* ===================== v2.7 english hero scale + true LTR alignment =====================
   تصغير عنوان الهيرو الإنجليزي وتثبيت وصف الهيرو والأزرار على اليسار بشكل واضح.
   ======================================================================================== */
.page-lang-en .hero-content {
  max-width: 760px !important;
  align-items: flex-start !important;
}

.page-lang-en .hero h1,
.page-lang-en .hero-animated-title {
  font-size: clamp(2.35rem, 4.45vw, 4.05rem) !important;
  line-height: 1.10 !important;
  max-width: 11.2ch !important;
  margin-bottom: 20px !important;
}

.page-lang-en .hero-animated-title {
  min-height: 2.7em !important;
}

.page-lang-en .hero-animated-title .hero-title-set,
.page-lang-en .hero-badge,
.page-lang-en .hero p,
.page-lang-en .hero-actions {
  direction: ltr !important;
  text-align: left !important;
  justify-content: flex-start !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

.page-lang-en .hero p {
  display: block !important;
  max-width: 740px !important;
  width: 100% !important;
  line-height: 1.6 !important;
  font-size: 0.98rem !important;
  margin-top: 10px !important;
  margin-bottom: 28px !important;
}

.page-lang-en .hero-actions {
  width: 100% !important;
}

@media (max-width: 1200px) {
  .page-lang-en .hero h1,
  .page-lang-en .hero-animated-title {
    font-size: clamp(2.15rem, 4vw, 3.7rem) !important;
    max-width: 11.8ch !important;
  }
}

@media (max-width: 680px) {
  .page-lang-en .hero h1,
  .page-lang-en .hero-animated-title {
    font-size: clamp(2rem, 8vw, 3.15rem) !important;
    line-height: 1.12 !important;
    max-width: none !important;
  }

  .page-lang-en .hero p,
  .page-lang-en .hero-actions,
  .page-lang-en .hero-badge {
    text-align: left !important;
    justify-content: flex-start !important;
  }
}


/* ===================== v2.8 english hero title line control =====================
   تقليل عدد أسطر العنوان الإنجليزي، تحويل and إلى &، وإبقاء "with Hospitality" ضمن سطر واحد بصرياً.
   ================================================================================= */
.page-lang-en .hero-content {
  max-width: 860px !important;
}

.page-lang-en .hero h1,
.page-lang-en .hero-animated-title {
  font-size: clamp(1.95rem, 3.55vw, 3.25rem) !important;
  line-height: 1.08 !important;
  max-width: 18ch !important;
  margin-bottom: 18px !important;
}

.page-lang-en .hero-animated-title {
  min-height: 2.4em !important;
}

.page-lang-en .hero-animated-title .hero-title-set {
  max-width: 18ch !important;
}

.page-lang-en .hero-animated-title .hero-title-line-2 {
  display: inline-block !important;
  white-space: nowrap !important;
}

.page-lang-en .hero p {
  max-width: 760px !important;
  font-size: 0.97rem !important;
  line-height: 1.58 !important;
}

@media (max-width: 1100px) {
  .page-lang-en .hero h1,
  .page-lang-en .hero-animated-title {
    font-size: clamp(1.8rem, 3.4vw, 2.95rem) !important;
    max-width: 17ch !important;
  }
}

@media (max-width: 680px) {
  .page-lang-en .hero h1,
  .page-lang-en .hero-animated-title {
    font-size: clamp(1.65rem, 6.3vw, 2.45rem) !important;
    max-width: 15.5ch !important;
    line-height: 1.10 !important;
  }

  .page-lang-en .hero-animated-title .hero-title-set {
    max-width: 15.5ch !important;
  }

  .page-lang-en .hero-animated-title .hero-title-line-2 {
    white-space: normal !important;
  }
}


/* ===================== v2.9 values section - vision goals message =====================
   قسم رؤيتنا وأهدافنا ورسالتنا: بطاقات زجاجية فاخرة مستوحاة من لوحة الهوية.
   ==================================================================================== */
.joury-values {
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 12% 18%, rgba(223, 189, 124, .18), transparent 34%),
    radial-gradient(circle at 86% 78%, rgba(154, 20, 95, .24), transparent 36%),
    linear-gradient(135deg, #270018 0%, #3b0628 50%, #1b0010 100%) !important;
  color: #fff !important;
  padding-top: 88px !important;
  padding-bottom: 92px !important;
}

.joury-values::before {
  content: "" !important;
  position: absolute !important;
  inset: 18px !important;
  border: 1px solid rgba(234, 211, 161, .14) !important;
  border-radius: 34px !important;
  pointer-events: none !important;
}

.joury-values::after {
  content: "J" !important;
  position: absolute !important;
  right: 6vw !important;
  bottom: -80px !important;
  font-size: 18rem !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  color: rgba(255,255,255,.035) !important;
  pointer-events: none !important;
}

.page-lang-en .joury-values::after {
  right: auto !important;
  left: 6vw !important;
}

.values-head .eyebrow {
  color: #ead3a1 !important;
}

.joury-values .section-title {
  color: #fff4df !important;
  text-shadow: 0 12px 30px rgba(0,0,0,.28) !important;
}

.joury-values .section-lead {
  color: rgba(255,255,255,.78) !important;
}

.values-grid {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
  margin-top: 38px !important;
}

.value-card {
  position: relative !important;
  min-height: 245px !important;
  padding: 34px 26px 30px !important;
  border-radius: 32px !important;
  text-align: center !important;
  background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.06)) !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  box-shadow: 0 26px 70px rgba(0,0,0,.20) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease !important;
}

.value-card:hover {
  transform: translateY(-7px) !important;
  border-color: rgba(234, 211, 161, .48) !important;
  box-shadow: 0 34px 86px rgba(0,0,0,.30) !important;
}

.value-icon {
  width: 76px !important;
  height: 76px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 auto 20px !important;
  border-radius: 24px !important;
  color: #ead3a1 !important;
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(234, 211, 161, .34) !important;
}

.value-icon svg {
  width: 44px !important;
  height: 44px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 3.4 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.value-card h3 {
  margin: 0 0 12px !important;
  color: #ead3a1 !important;
  font-size: 1.45rem !important;
  font-weight: 900 !important;
}

.value-card p {
  margin: 0 auto !important;
  max-width: 260px !important;
  color: rgba(255,255,255,.88) !important;
  font-size: 1.12rem !important;
  line-height: 1.9 !important;
  font-weight: 700 !important;
}

.page-lang-en .joury-values,
.page-lang-en .joury-values .section-head,
.page-lang-en .value-card {
  direction: ltr !important;
  text-align: center !important;
}

.page-lang-en .value-card p {
  line-height: 1.6 !important;
}

@media (max-width: 920px) {
  .values-grid {
    grid-template-columns: 1fr !important;
    max-width: 560px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .joury-values {
    padding-top: 70px !important;
    padding-bottom: 76px !important;
  }
}

@media (max-width: 680px) {
  .joury-values::before {
    inset: 12px !important;
    border-radius: 26px !important;
  }

  .value-card {
    min-height: auto !important;
    padding: 28px 22px 26px !important;
    border-radius: 26px !important;
  }

  .value-icon {
    width: 66px !important;
    height: 66px !important;
    border-radius: 21px !important;
  }

  .value-icon svg {
    width: 38px !important;
    height: 38px !important;
  }

  .value-card h3 {
    font-size: 1.3rem !important;
  }

  .value-card p {
    font-size: 1.02rem !important;
  }
}


/* ===================== v3.0 premium values icons refinement =====================
   تحسين أيقونات قسم الرؤية والأهداف والرسالة لتصبح أفخم وأكثر اتساقًا مع الهوية.
   =============================================================================== */
.value-icon {
  width: 84px !important;
  height: 84px !important;
  margin: 0 auto 22px !important;
  border-radius: 26px !important;
  color: #f1ddaf !important;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.16), rgba(255,255,255,.05) 52%, rgba(255,255,255,.02) 100%) !important;
  border: 1px solid rgba(241, 221, 175, .34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 14px 34px rgba(0,0,0,.16),
    0 0 0 1px rgba(255,255,255,.04) !important;
}

.value-icon svg {
  width: 48px !important;
  height: 48px !important;
  stroke-width: 2.7 !important;
}

.value-card:nth-child(2) .value-icon {
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.18), rgba(255,255,255,.06) 52%, rgba(255,255,255,.02) 100%) !important;
}

.value-card h3 {
  margin-bottom: 13px !important;
}

@media (max-width: 680px) {
  .value-icon {
    width: 76px !important;
    height: 76px !important;
    border-radius: 24px !important;
  }

  .value-icon svg {
    width: 42px !important;
    height: 42px !important;
  }
}


/* ===================== v3.1 custom Joury values icons =====================
   استبدال أيقونات الرؤية والأهداف والرسالة بأيقونات جوري المخصصة.
   ======================================================================= */
.value-icon-art {
  width: 128px !important;
  height: 128px !important;
  margin: 0 auto 20px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

.value-icon-art img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.18));
}

.value-card {
  padding-top: 34px !important;
}

.value-card h3 {
  margin-top: 2px !important;
}

@media (max-width: 680px) {
  .value-icon-art {
    width: 104px !important;
    height: 104px !important;
    margin-bottom: 16px !important;
  }
}


/* ===================== v3.2 values + footer tone refinement =====================
   - تخفيف لون الفوتر والقسم البنفسجي قليلًا.
   - إزالة النقطة قبل جميع الحقوق.
   - تحسين بطاقة/أيقونة الرسالة وجعلها أفخم.
   - إزالة خلفية الشطرنج من الأيقونات المخصصة.
   ============================================================================== */
.site-footer {
  background:
    radial-gradient(circle at 15% 18%, rgba(255, 222, 174, .08), transparent 32%),
    radial-gradient(circle at 82% 15%, rgba(173, 66, 120, .12), transparent 30%),
    linear-gradient(180deg, #4a0024 0%, #430020 54%, #360018 100%) !important;
}

.joury-values {
  background:
    radial-gradient(circle at 12% 18%, rgba(223, 189, 124, .21), transparent 34%),
    radial-gradient(circle at 86% 78%, rgba(181, 67, 129, .20), transparent 36%),
    linear-gradient(135deg, #460022 0%, #5a0332 47%, #3a001c 100%) !important;
}

.joury-values::before {
  border-color: rgba(234, 211, 161, .18) !important;
}

.value-card {
  background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.08)) !important;
  border-color: rgba(255,255,255,.22) !important;
  box-shadow: 0 24px 62px rgba(0,0,0,.18) !important;
}

.value-icon-art {
  width: 118px !important;
  height: 118px !important;
}

.value-icon-art img {
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.16)) !important;
}

/* بطاقة الرسالة تحديدًا: أرقى قليلًا */
.value-card:nth-child(3) {
  background:
    radial-gradient(circle at 50% 12%, rgba(248, 228, 188, .12), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.17), rgba(255,255,255,.08)) !important;
  border-color: rgba(241, 221, 175, .28) !important;
}

.value-card:nth-child(3) .value-icon-art {
  width: 126px !important;
  height: 126px !important;
  padding: 8px !important;
  border-radius: 30px !important;
  background: radial-gradient(circle at 50% 40%, rgba(255,242,214,.22), rgba(255,255,255,.03) 70%) !important;
}

.value-card:nth-child(3) .value-icon-art img {
  filter:
    drop-shadow(0 12px 26px rgba(0,0,0,.18))
    drop-shadow(0 0 8px rgba(255,229,180,.18)) !important;
}

.footer-copy-brand,
.footer-copy-rights,
.footer-copy-year {
  letter-spacing: 0 !important;
}

@media (max-width: 680px) {
  .value-icon-art {
    width: 96px !important;
    height: 96px !important;
  }

  .value-card:nth-child(3) .value-icon-art {
    width: 102px !important;
    height: 102px !important;
  }
}


/* ===================== v3.3 navy luxury redesign for values + footer =====================
   - تحويل الخلفيات من الأحمر إلى الكحلي الفاخر المستوحى من الشعار.
   - إضافة ديكور إطار زخرفي بنفس روح الشعار.
   ======================================================================================= */
.joury-values {
  position: relative !important;
  background:
    linear-gradient(135deg, rgba(6,18,38,.97) 0%, rgba(10,32,61,.97) 48%, rgba(5,14,28,.98) 100%),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27120%27%20height%3D%27120%27%20viewBox%3D%270%200%20120%20120%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27rgba%28226%2C196%2C133%2C0.18%29%27%20stroke-width%3D%271.2%27%3E%3Cpath%20d%3D%27M60%208%2076%2020%2076%2040%2060%2052%2044%2040%2044%2020Z%27/%3E%3Cpath%20d%3D%27M60%2068%2076%2080%2076%20100%2060%20112%2044%20100%2044%2080Z%27/%3E%3Cpath%20d%3D%27M8%2060%2020%2044%2040%2044%2052%2060%2040%2076%2020%2076Z%27/%3E%3Cpath%20d%3D%27M68%2060%2080%2044%20100%2044%20112%2060%20100%2076%2080%2076Z%27/%3E%3Cpath%20d%3D%27M60%2032%2088%2060%2060%2088%2032%2060Z%27/%3E%3C/g%3E%3C/svg%3E") center/140px 140px repeat !important;
  color: #fff !important;
}

.joury-values::before {
  inset: 18px !important;
  border: 1px solid rgba(228, 198, 134, .28) !important;
  border-radius: 36px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 0 0 10px rgba(6,18,38,.34) !important;
}

.joury-values::after {
  content: "JH" !important;
  right: 5vw !important;
  bottom: -48px !important;
  font-size: 14rem !important;
  letter-spacing: -.04em !important;
  color: rgba(214, 183, 123, .05) !important;
}

.page-lang-en .joury-values::after {
  left: 5vw !important;
  right: auto !important;
}

.joury-values .container {
  position: relative !important;
  z-index: 1 !important;
}

.joury-values .container::before,
.joury-values .container::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(360px, 42vw) !important;
  height: 22px !important;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27120%27%20height%3D%27120%27%20viewBox%3D%270%200%20120%20120%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27rgba%28226%2C196%2C133%2C0.18%29%27%20stroke-width%3D%271.2%27%3E%3Cpath%20d%3D%27M60%208%2076%2020%2076%2040%2060%2052%2044%2040%2044%2020Z%27/%3E%3Cpath%20d%3D%27M60%2068%2076%2080%2076%20100%2060%20112%2044%20100%2044%2080Z%27/%3E%3Cpath%20d%3D%27M8%2060%2020%2044%2040%2044%2052%2060%2040%2076%2020%2076Z%27/%3E%3Cpath%20d%3D%27M68%2060%2080%2044%20100%2044%20112%2060%20100%2076%2080%2076Z%27/%3E%3Cpath%20d%3D%27M60%2032%2088%2060%2060%2088%2032%2060Z%27/%3E%3C/g%3E%3C/svg%3E") !important;
  background-size: 120px 120px !important;
  background-repeat: repeat-x !important;
  opacity: .30 !important;
  pointer-events: none !important;
}

.joury-values .container::before {
  top: -18px !important;
}

.joury-values .container::after {
  bottom: -20px !important;
}

.values-head .eyebrow,
.value-card h3 {
  color: #ecd7a5 !important;
}

.joury-values .section-title {
  color: #fff6e5 !important;
  text-shadow: 0 14px 30px rgba(0,0,0,.25) !important;
}

.joury-values .section-lead {
  color: rgba(231, 238, 247, .80) !important;
}

.value-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05)),
    linear-gradient(135deg, rgba(12,38,67,.78), rgba(7,23,45,.82)) !important;
  border: 1px solid rgba(228, 198, 134, .22) !important;
  box-shadow: 0 26px 64px rgba(0,0,0,.24) !important;
}

.value-card:hover {
  border-color: rgba(228, 198, 134, .42) !important;
  box-shadow: 0 30px 74px rgba(0,0,0,.28) !important;
}

.value-card:nth-child(3) {
  background:
    radial-gradient(circle at 50% 18%, rgba(231, 203, 144, .10), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05)),
    linear-gradient(135deg, rgba(11,34,62,.83), rgba(5,19,39,.86)) !important;
}

.value-card p {
  color: rgba(244, 247, 251, .92) !important;
}

.site-footer {
  background:
    linear-gradient(180deg, rgba(5,17,35,.99) 0%, rgba(8,25,48,.99) 56%, rgba(5,12,24,1) 100%),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27120%27%20height%3D%27120%27%20viewBox%3D%270%200%20120%20120%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27rgba%28226%2C196%2C133%2C0.18%29%27%20stroke-width%3D%271.2%27%3E%3Cpath%20d%3D%27M60%208%2076%2020%2076%2040%2060%2052%2044%2040%2044%2020Z%27/%3E%3Cpath%20d%3D%27M60%2068%2076%2080%2076%20100%2060%20112%2044%20100%2044%2080Z%27/%3E%3Cpath%20d%3D%27M8%2060%2020%2044%2040%2044%2052%2060%2040%2076%2020%2076Z%27/%3E%3Cpath%20d%3D%27M68%2060%2080%2044%20100%2044%20112%2060%20100%2076%2080%2076Z%27/%3E%3Cpath%20d%3D%27M60%2032%2088%2060%2060%2088%2032%2060Z%27/%3E%3C/g%3E%3C/svg%3E") center/160px 160px repeat !important;
}

.site-footer h3 {
  color: #ecd7a5 !important;
}

.footer-bottom {
  border-top: 1px solid rgba(228, 198, 134, .16) !important;
}

@media (max-width: 680px) {
  .joury-values::after {
    font-size: 8.2rem !important;
    bottom: -18px !important;
  }

  .joury-values .container::before,
  .joury-values .container::after {
    width: 170px !important;
    opacity: .22 !important;
  }
}