:root{
  --bg: #f6f7fb;
  --panel: rgba(255,255,255,.78);
  --card: #ffffff;
  --stroke: rgba(17,24,39,.10);
  --text: #0f172a;
  --muted: rgba(15,23,42,.68);

  --grad: linear-gradient(135deg, rgba(255,46,77,.95), rgba(124,58,237,.90));
  --shadow: 0 14px 30px rgba(15,23,42,.10);
  --radius: 18px;
  --container: min(1120px, 92%);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  background:
    radial-gradient(900px 450px at 10% 0%, rgba(124,58,237,.10), transparent 60%),
    radial-gradient(900px 450px at 100% 0%, rgba(255,46,77,.10), transparent 55%),
    var(--bg);
  color: var(--text);
}

img{ max-width:100%; height:auto; }
.container{ width: var(--container); margin: 0 auto; }

/* Topbar */
.topbar{
  position: sticky; top:0; z-index: 70;
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--stroke);
}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0; gap:10px;
}
.topbar__left{
  .sep{ opacity:.45; font-weight:900; }
.exp{ font-weight:950; color: rgba(15,23,42,.78); }
  display:flex; align-items:center; gap:10px;
  color: var(--muted); font-weight:800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  
}
.dot{
  width:10px; height:10px; border-radius:999px;
  background: var(--grad);
  box-shadow: 0 0 0 6px rgba(124,58,237,.08);
}
.topbar__right{ display:flex; gap:8px; }
.lang-btn{
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.60);
  color: var(--text);
  padding:8px 12px;
  border-radius: 12px;
  font-weight:900;
  cursor:pointer;
}
.lang-btn.is-active{
  background: var(--grad);
  border-color: transparent;
  color:#fff;
}

/* Navbar */
.nav{
  position: sticky; top: 44px; z-index: 75;
  background: rgba(255,255,255,.68);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--stroke);
}
.nav__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 0;
  gap:14px;
}
.brand{
  display:flex; align-items:center; gap:12px;
  text-decoration:none; color:inherit;
}
.brand__logo{
  width: 54px; height: 54px;
  object-fit: contain;
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}
.brand__text{ line-height:1.1; }
.brand__name{ font-weight: 950; letter-spacing:.2px; }
.brand__sub{ font-size: 12px; color: var(--muted); font-weight: 900; margin-top: 2px; }

.menu{
  display:flex; align-items:center; gap:10px;
  flex-wrap: wrap;
}
.menu a{
  text-decoration:none;
  color: rgba(15,23,42,.78);
  font-weight:900;
  padding:10px 12px;
  border-radius: 12px;
}
.menu a:hover{ background: rgba(15,23,42,.06); color: var(--text); }
.menu__cta{
  background: var(--grad);
  color:#fff !important;
  box-shadow: var(--shadow);
}

/* HERO */
.hero{ padding: 46px 0 22px; }
.hero__inner{
  display:grid;
  grid-template-columns: 1.2fr .9fr;
  gap: 18px;
  align-items: stretch;
  padding: 18px 0 10px;
}
.hero__copy{
  border: 1px solid var(--stroke);
  background: var(--panel);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow);
}
.hero__actions{
  display:flex; gap: 12px; flex-wrap:wrap;
  margin: 12px 0 18px;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 16px;
  border-radius: 14px;
  text-decoration:none;
  font-weight: 950;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.80);
  color: var(--text);
}
.btn--primary{
  background: var(--grad);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow);
}
.btn--ghost:hover{ background: rgba(15,23,42,.05); }

/* Slider */
.heroSlider{
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.78);
  border-radius: var(--radius);
  padding: 18px 18px 12px;
  box-shadow: var(--shadow);
  margin-bottom: 14px;
}
.heroSlide{ display:none; }
.heroSlide.is-active{ display:block; animation: fadeUp .45s ease; }
.heroSlide h1{
  font-size: clamp(30px, 4.1vw, 52px);
  line-height: 1.1;
  margin:0 0 12px;
}
.heroSlide p{
  margin:0;
  color: var(--muted);
  line-height: 1.85;
  font-size: 16px;
  font-weight:900;
}
@keyframes fadeUp{
  from{ opacity:0; transform: translateY(8px); }
  to{ opacity:1; transform: translateY(0); }
}
.heroDots{ display:flex; gap:10px; margin-top: 12px; }
.dotBtn{
  width: 11px; height: 11px; border-radius: 999px;
  border: 1px solid rgba(15,23,42,.18);
  background: rgba(15,23,42,.08);
  cursor: pointer; padding: 0;
}
.dotBtn.is-active{
  background: var(--grad);
  border-color: transparent;
  box-shadow: 0 0 0 6px rgba(124,58,237,.10);
}

/* Stats */
.hero__stats{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin-top: 16px;
}
.stat{
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.78);
  border-radius: 16px;
  padding: 12px 12px;
}
.stat__num{ font-weight: 950; font-size: 20px; }
.stat__txt{ color: var(--muted); font-weight: 950; font-size: 12px; margin-top: 2px; }

/* Hero side card */
.hero__card{
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.78);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.hero__card::before{
  content:"";
  position:absolute; inset:-80px -60px auto auto;
  width: 220px; height: 220px; border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,46,77,.22), rgba(124,58,237,.18), transparent 70%);
}
.hero__cardTop{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.chip{
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(15,23,42,.06);
  border:1px solid rgba(15,23,42,.10);
  font-weight: 950;
  color: rgba(15,23,42,.74);
}
.badge{
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,46,77,.12);
  border:1px solid rgba(255,46,77,.20);
  font-weight: 950;
}
.hero__cards{ display:grid; gap:10px; margin-top: 14px; }
.mini{
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.70);
  border-radius: 16px;
  padding: 14px;
}
.mini__title{ font-weight: 950; }
.mini__desc{ color: var(--muted); font-weight: 950; font-size: 12px; margin-top: 4px; }
.heroQuick{ display:flex; gap:12px; margin-top: 14px; flex-wrap:wrap; }

/* Sections */
.section{ padding: 72px 0; }
.section--soft{
  background: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.00));
  border-top: 1px solid var(--stroke);
  border-bottom: 1px solid var(--stroke);
}
.section__head{ margin-bottom: 18px; }
.section__head h2{ margin:0 0 6px; font-size: 28px; }
.section__head p{ margin:0; color: var(--muted); line-height:1.8; font-weight:900; }

/* Featured Destinations */
.featuredGrid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.featuredCard{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--stroke);
  background: #000;
  box-shadow: var(--shadow);
  min-height: 260px;
  text-decoration: none;
  color: #fff;
}
.featuredCard img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
}
.featuredOverlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,.25), rgba(0,0,0,0));
}
.featuredContent{
  position: absolute;
  inset: auto 0 0 0;
  padding: 18px 18px 16px;
  z-index: 2;
}
.featuredTitle{
  font-weight: 1000;
  font-size: 30px;
  letter-spacing: .2px;
  text-shadow: 0 12px 30px rgba(0,0,0,.55);
}
.featuredNote{ margin-top: 14px; }

/* Services Grid */
.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.card{
  border:1px solid var(--stroke);
  background: var(--card);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}
.card--highlight{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
  border-color: rgba(124,58,237,.18);
}
.card__icon{
  width: 46px; height: 46px;
  border-radius: 14px;
  background: rgba(15,23,42,.06);
  border: 1px solid rgba(15,23,42,.10);
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 10px;
}
.card__icon svg{ width: 24px; height: 24px; fill: rgba(15,23,42,.78); }
.card h3{ margin: 0 0 6px; font-size: 18px; }
.card p{ margin: 0; color: var(--muted); line-height:1.85; font-weight: 900; font-size: 14px; }

/* Offers */
.offers{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.offer{
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.82);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}
.offer__top{ display:flex; align-items:center; justify-content:space-between; gap: 10px; }
.offer h3{ margin:0; font-size: 18px; }
.offer p{ margin: 10px 0 12px; color: var(--muted); font-weight: 900; line-height:1.85; }
.pill{
  padding: 7px 10px;
  border-radius: 999px;
  border:1px solid rgba(124,58,237,.22);
  background: rgba(124,58,237,.10);
  font-weight: 950;
  font-size: 12px;
}
.pill--alt{
  border-color: rgba(255,46,77,.22);
  background: rgba(255,46,77,.10);
}
.link{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-weight: 950;
  color: rgba(124,58,237,1);
  text-decoration: none;
}
.link:hover{ text-decoration: underline; }

/* FAQ */
.faq{ display:grid; gap: 10px; }
.faq__item{
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.82);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: var(--shadow);
}
.faq__item summary{
  cursor:pointer;
  font-weight: 950;
  list-style: none;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__a{
  margin-top: 10px;
  color: var(--muted);
  font-weight: 900;
  line-height: 1.85;
}

/* Contact */
.contact{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 12px;
  align-items: start;
}
.contact__box{
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.82);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}
.contact__actions{ display:flex; gap: 12px; flex-wrap:wrap; margin: 12px 0 14px; }
.contact__meta{
  display:grid;
  gap: 6px;
  color: rgba(15,23,42,.80);
  font-weight: 900;
}
.locationBox{
  margin-top: 14px;
  padding: 14px;
  border-radius: 16px;
  border:1px solid var(--stroke);
  background: rgba(15,23,42,.03);
}
.locationBox__title{ font-weight: 950; margin-bottom: 8px; }
.locationLink{
  display:inline-flex;
  font-weight: 950;
  color: rgba(255,46,77,1);
  text-decoration: none;
}
.locationLink:hover{ text-decoration: underline; }

.contact__side .sideCard{
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.82);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}
.sideCard h3{ margin:0 0 8px; }
.sideCard p{ margin:0 0 12px; color: var(--muted); font-weight: 900; line-height:1.85; }
.sideCard ul{ margin:0; padding:0 18px; color: rgba(15,23,42,.78); font-weight: 900; }
.sideCard li{ margin: 8px 0; }

/* Footer */
.footer{
  border-top: 1px solid var(--stroke);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(12px);
}
.footer__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap: 12px;
  padding: 18px 0;
}
.footer__brand{ display:flex; align-items:center; gap: 12px; }
.footer__logo{ width: 44px; height: 44px; object-fit: contain; }
.footer__name{ font-weight: 950; }
.footer__sub{ font-size: 12px; color: var(--muted); font-weight: 900; margin-top: 2px; }
.footer__links{ display:flex; gap: 10px; flex-wrap:wrap; }
.footer__links a{
  text-decoration:none;
  color: rgba(15,23,42,.78);
  font-weight: 900;
  padding: 10px 12px;
  border-radius: 12px;
}
.footer__links a:hover{ background: rgba(15,23,42,.06); }

/* Floating buttons */
.float{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 120;
  display:flex;
  flex-direction: column;
  gap: 12px;
}
html[dir="ltr"] .float{ right: auto; left: 18px; }

.fab{
  width: 54px; height: 54px;
  border-radius: 18px;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 18px 34px rgba(15,23,42,.20);
  text-decoration:none;
}
.fabIcon{ width: 26px; height: 26px; fill: #fff; }
.fab--wa{ background: #25D366; }
.fab--call{ background: rgba(124,58,237,1); }

/* Responsive */
@media (max-width: 980px){
  .hero__inner{ grid-template-columns: 1fr; }
  .grid{ grid-template-columns: 1fr 1fr; }
  .offers{ grid-template-columns: 1fr; }
  .contact{ grid-template-columns: 1fr; }
  .featuredTitle{ font-size: 26px; }
  .featuredGrid{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .menu{ display:none; }
  .brand__logo{ width: 46px; height: 46px; }
  .grid{ grid-template-columns: 1fr; }
  .featuredTitle{ font-size: 24px; }
}

/* ===== Hero Image Banner (Replacement) ===== */
.heroBanner{
  position: relative;
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  min-height: 420px;
  background: #000;
}

.heroBanner__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.heroBanner__overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.72),
    rgba(0,0,0,.28),
    rgba(0,0,0,.10)
  );
}

.heroBanner__content{
  position: relative;
  z-index: 2;
  padding: 34px;
  color: #fff;
  max-width: 720px;
}

.heroBanner__title{
  margin: 0 0 10px;
  font-size: clamp(30px, 4vw, 54px);
  font-weight: 1000;
  line-height: 1.1;
  text-shadow: 0 14px 34px rgba(0,0,0,.45);
}

.heroBanner__subtitle{
  margin: 0 0 18px;
  font-size: 16px;
  font-weight: 900;
  opacity: .92;
  line-height: 1.8;
}

.heroBanner__actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.heroBanner .btn{
  border-color: rgba(255,255,255,.25);
}

.heroBanner .btn--ghost{
  background: rgba(255,255,255,.14);
  color: #fff;
}

.heroBanner .btn--ghost:hover{
  background: rgba(255,255,255,.20);
}

/* Mobile */
@media (max-width: 760px){
  .heroBanner{ min-height: 360px; }
  .heroBanner__content{ padding: 22px; }
}

/* إخفاء نقاط السلايدر (الدوائر الثلاث) */
.heroDots,
.dotBtn {
  display: none !important;
}

/* 1) خَلّ صف التوب بار يوزع المساحة صح */
.topbar__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* 2) خلي جهة النص تاخذ المساحة المتبقية */
.topbar__left{
  flex: 1;
  min-width: 0; /* مهم جداً عشان القص/اللف يشتغل */
}

/* 3) خلي جهة الأزرار ثابتة */
.topbar__right{
  flex: 0 0 auto;
  white-space: nowrap;
}

/* 4) على الديسكتوب: سطر واحد مع ... */
.topbar .exp{
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 5) على التلفون: سطرين فقط (احترافي) */
@media (max-width: 520px){
  .topbar .exp{
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* خليها 2، أو 3 إذا تبي */
    line-height: 1.2;
    font-size: 13px;
  }
}