/* ================================================================
   UHUDI Hajji and Travel Co. Ltd — shared stylesheet
   ================================================================ */
:root{
  --ink:#16241C;
  --forest:#0F5132;
  --forest-deep:#0A3A24;
  --forest-light:#2F7D52;
  --forest-pale:#E9F1EC;
  --gold:#C9A66B;
  --gold-deep:#A67C3D;
  --cream:#FAF7F0;
  --white:#FFFFFF;
  --line: rgba(15,81,50,0.16);
  --shadow: 0 20px 50px -25px rgba(10,58,36,0.35);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Work Sans', sans-serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:'Amiri', serif;
  font-weight:700;
  color:var(--forest-deep);
  line-height:1.15;
  margin:0;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}

/* Bootstrap-CDN neutralizers — keep Bootstrap's carousel/grid utilities
   while preserving this site's own .btn / .card design language */
.btn{ text-align:inherit; box-shadow:none; -webkit-appearance:none; vertical-align:baseline; }
.card{ box-shadow:none; }
.carousel, .carousel-item, .carousel-inner{ border-radius:inherit; }
.wrap{max-width:1180px; margin:0 auto; padding:0 28px;}
.eyebrow{
  font-family:'Work Sans',sans-serif;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.72rem;
  font-weight:600;
  color:var(--gold-deep);
  margin-bottom:14px;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:22px; height:1px;
  background:var(--gold-deep);
  display:inline-block;
}
section{padding:96px 0;}
@media (max-width:720px){ section{padding:64px 0;} }

/* ---------- NAV ---------- */
header{
  position:sticky; top:0; z-index:100;
  background:rgba(250,247,240,0.92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
nav.wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:14px; padding-bottom:14px;
}
.brand{display:flex; align-items:center; gap:10px;}
.brand-mark{width:34px; height:40px; border-radius:4px; object-fit:cover;}
.brand-text{font-family:'Amiri',serif; font-weight:700; font-size:1.28rem; color:var(--forest-deep); letter-spacing:.02em;}
.brand-text span{display:block; font-family:'Work Sans',sans-serif; font-weight:500; font-size:.56rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-deep); margin-top:1px;}
.nav-links{display:flex; gap:24px; align-items:center;}
.nav-links a{font-size:.86rem; font-weight:500; color:var(--ink); position:relative; padding:4px 0; white-space:nowrap;}
.nav-links a:hover{color:var(--forest);}
.nav-links a.active{color:var(--forest);}
.nav-links a.active::after{content:""; position:absolute; left:0; right:0; bottom:-3px; height:2px; background:var(--gold-deep);}
.nav-cta{
  background:linear-gradient(135deg, var(--forest) 0%, var(--forest-light) 100%);
  color:var(--white)!important;
  padding:11px 22px; border-radius:3px; font-weight:700; font-size:.85rem;
  letter-spacing:.03em;
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--gold);
  box-shadow:0 6px 16px -8px rgba(15,81,50,0.65);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.nav-cta i{color:var(--gold); font-size:.82em; transition:transform .2s ease;}
.nav-cta:hover{
  background:linear-gradient(135deg, var(--forest-deep) 0%, var(--forest) 100%);
  transform:translateY(-2px);
  box-shadow:0 12px 22px -8px rgba(15,81,50,0.7);
}
.nav-cta:hover i{transform:translateX(3px);}
.burger{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;}
.burger span{width:24px; height:2px; background:var(--forest-deep); transition:transform .2s ease, opacity .2s ease;}

/* language switch */
.lang-switch{display:flex; align-items:center; gap:2px; border:1px solid var(--line); border-radius:20px; padding:3px; background:var(--white);}
.lang-switch button{
  border:none; background:none; padding:5px 12px; border-radius:16px; font-size:.74rem; font-weight:700;
  letter-spacing:.04em; color:#5a6b5f; cursor:pointer; transition:all .2s ease;
}
.lang-switch button.active{background:var(--forest); color:var(--white);}

@media (max-width:980px){
  .nav-links{position:fixed; top:var(--header-h, 68px); left:0; right:0; width:100%; max-width:100vw; box-sizing:border-box; bottom:0; overflow-y:auto; -webkit-overflow-scrolling:touch; background:var(--cream); flex-direction:column; align-items:flex-start; padding:24px 28px 100px; gap:18px; border-bottom:1px solid var(--line); transform:translateY(-130%); transition:transform .3s ease; z-index:500; }
  .nav-links.open{transform:translateY(0);}
  .burger{display:flex;}
  .lang-switch{order:-1;}
}
/* .hero/.page-hero/.cta-banner give their .wrap a z-index to sit above their own
   background layers, but since those sections don't establish their own stacking
   context, that z-index leaks to the page root and can outrank other fixed UI
   (like this nav panel, now a direct child of body). Keep the header's own
   controls — and the panel itself — safely above any such in-page z-index. */
.brand, .burger{position:relative; z-index:501;}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  color:var(--white);
  overflow:hidden;
  min-height:640px;
  display:flex;
  align-items:center;
}
.hero-slides{position:absolute; inset:0; z-index:0;}
.hero-slide{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transition:opacity 1.6s ease;
}
.hero-slide.active{opacity:1;}
.hero-slides::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(10,42,26,0.72) 0%, rgba(10,58,36,0.82) 55%, rgba(9,32,21,0.92) 100%);
}
.hero .wrap{position:relative; z-index:2; display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; padding-top:70px; padding-bottom:70px; width:100%;}
@media (max-width:900px){ .hero .wrap{grid-template-columns:1fr;} }
.hero-arabic{font-family:'Amiri',serif; font-size:1.6rem; color:var(--gold); margin-bottom:18px; font-style:italic;}
.hero h1{font-size:clamp(2.3rem, 4.6vw, 3.6rem); color:var(--white); margin-bottom:20px;}
.hero h1 em{color:var(--gold); font-style:normal;}
.hero p.lede{font-size:1.08rem; color:rgba(255,255,255,0.88); max-width:520px; margin-bottom:34px;}
.hero-ctas{display:flex; gap:16px; flex-wrap:wrap;}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 26px; font-weight:600; font-size:.92rem;
  border-radius:2px; border:1px solid transparent; cursor:pointer;
  transition:all .2s ease;
}
.btn-gold{background:var(--gold); color:var(--forest-deep);}
.btn-gold:hover{background:#dbb87e; transform:translateY(-2px);}
.btn-outline{border-color:rgba(255,255,255,0.5); color:var(--white);}
.btn-outline:hover{border-color:var(--white); background:rgba(255,255,255,0.08);}
.btn-forest{background:var(--forest); color:var(--white);}
.btn-forest:hover{background:var(--forest-deep);}
.btn-sm{padding:10px 18px; font-size:.82rem;}

.hero-stats{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:rgba(255,255,255,0.18);
  border:1px solid rgba(255,255,255,0.18);
  border-radius:3px; overflow:hidden;
}
.hero-stats div{background:rgba(10,58,36,0.55); padding:22px 20px;}
.hero-stats .num{font-family:'Amiri',serif; font-size:1.7rem; color:var(--gold); display:block;}
.hero-stats .lab{font-size:.76rem; color:rgba(255,255,255,0.75); text-transform:uppercase; letter-spacing:.08em; margin-top:4px;}

/* ---------- PAGE (sub-page) HERO ---------- */
.page-hero{
  position:relative; color:var(--white); overflow:hidden;
  padding:150px 0 76px; background-size:cover; background-position:center;
}
.page-hero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,42,26,0.78) 0%, rgba(9,32,21,0.9) 100%); z-index:0;}
.page-hero .wrap{position:relative; z-index:1;}
.page-hero h1{color:var(--white); font-size:clamp(2rem,4vw,2.8rem); margin-bottom:12px;}
.page-hero p{color:rgba(255,255,255,0.85); max-width:620px; font-size:1.02rem;}
.breadcrumb{display:flex; gap:8px; align-items:center; font-size:.8rem; color:rgba(255,255,255,0.7); margin-bottom:18px;}
.breadcrumb a:hover{color:var(--gold);}
.breadcrumb .sep{opacity:.5;}

/* ---------- JOURNEY / ABOUT (home teaser) ---------- */
.journey{background:var(--white); border-bottom:1px solid var(--line);}
.journey-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
@media (max-width:860px){ .journey-grid{grid-template-columns:1fr;} }
.journey h2{font-size:2.1rem; margin-bottom:20px;}
.journey p{color:#3c4a41; margin-bottom:16px; max-width:540px;}
.service-list{list-style:none; margin-top:22px; display:grid; grid-template-columns:1fr 1fr; gap:10px 24px;}
.service-list li{font-size:.92rem; padding-left:18px; position:relative; color:var(--ink);}
.service-list li::before{content:"—"; position:absolute; left:0; color:var(--gold-deep);}

.route-map{background:var(--forest-pale); border-radius:4px; padding:34px 26px;}
.route-map svg{width:100%; height:auto;}
.img-frame{border-radius:6px; overflow:hidden; box-shadow:var(--shadow); position:relative;}
.img-frame img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease;}
.img-frame:hover img{transform:scale(1.05);}

/* ---------- MISSION / VALUES ---------- */
.pillars{background:var(--forest-deep); color:var(--white); position:relative; overflow:hidden;}
.pillars .eyebrow{color:var(--gold);}
.pillars .eyebrow::before{background:var(--gold);}
.pillars h2{color:var(--white); font-size:2rem; max-width:640px; margin-bottom:44px;}
.pillar-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.14);}
@media (max-width:860px){ .pillar-grid{grid-template-columns:1fr;} }
.pillar{background:var(--forest-deep); padding:30px 26px; transition:background .25s ease;}
.pillar:hover{background:#0d452c;}
.pillar h3{color:var(--gold); font-size:1.15rem; margin-bottom:10px;}
.pillar p{color:rgba(255,255,255,0.78); font-size:.92rem;}
.values-row{margin-top:40px; display:flex; flex-wrap:wrap; gap:12px;}
.value-chip{border:1px solid rgba(255,255,255,0.3); padding:8px 16px; border-radius:20px; font-size:.82rem; color:rgba(255,255,255,0.88); transition:all .2s ease;}
.value-chip:hover{background:var(--gold); color:var(--forest-deep); border-color:var(--gold);}

/* ---------- SERVICES ---------- */
.services h2{font-size:2.1rem; max-width:600px;}
.services > .wrap > p.sub{color:#3c4a41; max-width:560px; margin-top:14px; margin-bottom:48px;}
.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
@media (max-width:960px){ .card-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:640px){ .card-grid{grid-template-columns:1fr;} }
.card{
  background:var(--white); border:1px solid var(--line); border-radius:4px;
  overflow:hidden;
  display:flex; flex-direction:column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow); border-color:transparent;}
.card .card-img{height:170px; overflow:hidden;}
.card .card-img img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease;}
.card:hover .card-img img{transform:scale(1.08);}
.card .card-body{padding:26px; display:flex; flex-direction:column; gap:12px; flex:1;}
.card .icon{width:42px; height:42px;}
.card h3{font-size:1.15rem; color:var(--forest-deep);}
.card p{font-size:.9rem; color:#526357;}
.card .price{margin-top:auto; font-family:'Amiri',serif; color:var(--gold-deep); font-weight:700; font-size:1.05rem; padding-top:10px; border-top:1px dashed var(--line);}

/* ---------- DARSA ---------- */
.darsa{background:var(--forest-pale);}
.darsa-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:50px; align-items:center;}
@media (max-width:860px){ .darsa-grid{grid-template-columns:1fr;} }
.darsa h2{font-size:2rem; margin-bottom:16px;}
.darsa p{color:#3c4a41; margin-bottom:18px; max-width:480px;}
.darsa-days{display:flex; gap:14px; margin-bottom:20px; flex-wrap:wrap;}
.darsa-day{background:var(--white); border:1px solid var(--line); padding:14px 20px; border-radius:3px; text-align:center;}
.darsa-day .d{font-family:'Amiri',serif; font-weight:700; color:var(--forest); font-size:1.05rem;}
.darsa-day .t{font-size:.72rem; color:var(--gold-deep); text-transform:uppercase; letter-spacing:.06em;}
.topic-tags{display:flex; flex-wrap:wrap; gap:10px;}
.topic-tags span{background:var(--white); border:1px solid var(--line); padding:8px 14px; font-size:.82rem; border-radius:20px; color:var(--forest-deep);}

.online-note{display:flex; gap:14px; align-items:flex-start; background:var(--white); border:1px solid var(--line); border-radius:4px; padding:18px 20px; margin-bottom:22px;}
.online-note i{font-size:1.3rem; color:var(--forest); flex-shrink:0; margin-top:2px;}
.online-note h4{font-size:.95rem; margin-bottom:4px; color:var(--forest-deep);}
.online-note p{font-size:.85rem; color:#3c4a41; margin-bottom:0; max-width:none;}

/* ---------- MEETINGS ---------- */
.meetings-cols{display:grid; grid-template-columns:1fr 1.4fr; gap:40px; align-items:start;}
@media (max-width:860px){ .meetings-cols{grid-template-columns:1fr;} }
.meetings-col h3{font-size:1.05rem; color:var(--forest-deep); margin-bottom:16px; display:flex; align-items:center; gap:8px;}
.meetings-col h3 i{color:var(--gold-deep);}
.meeting-list{display:grid; gap:14px;}
.meeting-card{display:flex; gap:16px; background:var(--white); border:1px solid var(--line); border-radius:6px; padding:18px; align-items:flex-start; transition:box-shadow .2s ease, transform .2s ease;}
.meeting-card:hover{box-shadow:var(--shadow); transform:translateY(-2px);}
.meeting-day{
  flex-shrink:0; width:76px; text-align:center; background:var(--forest-pale); border-radius:4px; padding:10px 4px;
  font-family:'Amiri',serif; font-weight:700; color:var(--forest-deep); font-size:.92rem;
}
.meeting-date{flex-shrink:0; width:92px; text-align:center; background:var(--forest); color:var(--white); border-radius:4px; padding:10px 6px; display:flex; flex-direction:column; gap:2px;}
.meeting-date .mm{font-size:.72rem; font-weight:700; line-height:1.25;}
.meeting-date .tt{font-size:.72rem; color:var(--gold);}
.meeting-body h4{font-size:1rem; color:var(--forest-deep); margin-bottom:6px;}
.meeting-body p{font-size:.85rem; color:#3c4a41; margin-top:8px;}
.meeting-meta{font-size:.8rem; color:#5a6b5f; display:flex; align-items:center; gap:6px; margin-top:3px;}
.meeting-meta.meeting-online{color:var(--forest);}
.meeting-empty{font-size:.88rem; color:#5a6b5f; font-style:italic;}

/* ---------- ACCOMMODATION (stay) ---------- */
.stay-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:40px;}
@media (max-width:860px){ .stay-grid{grid-template-columns:1fr;} }
.stay-card{background:var(--white); border:1px solid var(--line); border-radius:8px; padding:32px 30px; position:relative; transition:box-shadow .2s ease, transform .2s ease;}
.stay-card:hover{box-shadow:var(--shadow); transform:translateY(-3px);}
.stay-card.premium{border-color:var(--gold); background:linear-gradient(180deg, var(--forest-pale) 0%, var(--white) 140px);}
.stay-badge{display:inline-block; background:var(--forest); color:var(--white); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; padding:6px 14px; border-radius:20px; margin-bottom:16px;}
.stay-badge.alt{background:var(--forest-pale); color:var(--forest-deep); border:1px solid var(--line);}
.stay-card h3{font-size:1.2rem; margin-bottom:6px; color:var(--forest-deep);}
.stay-price{font-family:'Amiri',serif; font-size:1.7rem; font-weight:700; color:var(--gold-deep); margin-bottom:18px;}
.stay-features{list-style:none; display:grid; gap:10px; margin-bottom:20px;}
.stay-features li{font-size:.9rem; color:#3c4a41; padding-left:24px; position:relative;}
.stay-features li::before{content:"\2713"; position:absolute; left:0; color:var(--forest); font-weight:700;}
.stay-note{display:flex; gap:10px; align-items:flex-start; background:var(--forest-pale); border-radius:4px; padding:14px 16px; font-size:.84rem; color:#3c4a41;}
.stay-note i{color:var(--gold-deep); margin-top:2px; flex-shrink:0;}
.prayer-highlight{display:flex; gap:18px; align-items:flex-start; background:var(--forest); color:var(--white); border-radius:8px; padding:28px 30px; margin-top:34px;}
.prayer-highlight i{font-size:1.8rem; color:var(--gold); flex-shrink:0;}
.prayer-highlight h4{color:var(--white); font-size:1.05rem; margin-bottom:6px;}
.prayer-highlight p{color:rgba(255,255,255,0.85); font-size:.9rem; max-width:640px;}

/* ---------- FLIGHT POLICY ---------- */
.fp-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:38px;}
@media (max-width:860px){ .fp-grid{grid-template-columns:1fr;} }
.fp-card{background:var(--white); border:1px solid var(--line); border-radius:8px; padding:30px;}
.fp-card h3{font-size:1.1rem; margin-bottom:14px; color:var(--forest-deep); display:flex; align-items:center; gap:10px;}
.fp-card h3 i{color:var(--gold-deep);}
.fp-card > p{font-size:.9rem; color:#3c4a41; margin-bottom:18px;}
.fp-option{display:flex; gap:14px; margin-bottom:18px;}
.fp-option:last-child{margin-bottom:0;}
.fp-num{flex-shrink:0; width:28px; height:28px; border-radius:50%; background:var(--forest-pale); color:var(--forest); font-weight:700; font-size:.85rem; display:flex; align-items:center; justify-content:center;}
.fp-option h5{font-size:.94rem; margin-bottom:4px; color:var(--forest-deep);}
.fp-option p{font-size:.85rem; color:#3c4a41;}
.fp-list{list-style:none; display:grid; gap:9px; margin-top:6px;}
.fp-list li{font-size:.88rem; color:#3c4a41; padding-left:22px; position:relative;}
.fp-list li::before{content:"\2013"; position:absolute; left:0; color:var(--gold-deep); font-weight:700;}

/* ---------- HAJJ PACKAGE TIERS (Silver / Gold / Executive) ---------- */
.pkg-season{margin-top:8px;}
.pkg-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:36px;}
@media (max-width:980px){ .pkg-grid{grid-template-columns:1fr; max-width:480px; margin-left:auto; margin-right:auto;} }
.pkg-card{background:var(--white); border:1px solid var(--line); border-radius:10px; padding:32px 28px; position:relative; display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s ease;}
.pkg-card:hover{transform:translateY(-4px); box-shadow:var(--shadow);}
.pkg-card.gold{border-color:var(--gold); box-shadow:0 20px 44px -28px rgba(166,124,61,0.45);}
.pkg-card.executive{background:var(--forest-deep); border-color:var(--forest-deep);}
.pkg-tier{font-family:'Amiri',serif; font-weight:700; font-size:1.3rem; color:var(--forest-deep); letter-spacing:.02em;}
.pkg-card.executive .pkg-tier{color:var(--gold);}
.pkg-card.gold .pkg-tier{color:var(--gold-deep);}
.pkg-price{font-family:'Amiri',serif; font-weight:700; font-size:2.1rem; color:var(--ink); margin:10px 0 2px;}
.pkg-card.executive .pkg-price{color:var(--white);}
.pkg-deposit{font-size:.8rem; color:#5a6b5f; margin-bottom:22px;}
.pkg-card.executive .pkg-deposit{color:rgba(255,255,255,0.65);}
.pkg-list{list-style:none; display:grid; gap:12px; margin-bottom:24px; flex:1;}
.pkg-list li{display:flex; gap:10px; align-items:flex-start; font-size:.87rem; color:#3c4a41; line-height:1.4;}
.pkg-card.executive .pkg-list li{color:rgba(255,255,255,0.85);}
.pkg-list .pkg-num{
  flex-shrink:0; width:24px; height:24px; border-radius:50%; background:var(--forest-pale); color:var(--forest);
  font-size:.72rem; font-weight:700; display:flex; align-items:center; justify-content:center; margin-top:1px;
}
.pkg-card.gold .pkg-list .pkg-num{background:#FBF1DE; color:var(--gold-deep);}
.pkg-card.executive .pkg-list .pkg-num{background:rgba(255,255,255,0.14); color:var(--gold);}
.pkg-dates{display:flex; justify-content:space-between; gap:10px; font-size:.78rem; padding:14px 0; border-top:1px dashed var(--line); margin-bottom:18px;}
.pkg-card.executive .pkg-dates{border-top-color:rgba(255,255,255,0.2);}
.pkg-dates div span{display:block;}
.pkg-dates .k{text-transform:uppercase; letter-spacing:.06em; color:#8a978d; font-size:.68rem; margin-bottom:2px;}
.pkg-card.executive .pkg-dates .k{color:rgba(255,255,255,0.55);}
.pkg-dates .v{font-weight:700; color:var(--forest-deep);}
.pkg-card.executive .pkg-dates .v{color:var(--white);}
.pkg-card .btn{justify-content:center;}
.pkg-ribbon{position:absolute; top:-13px; right:24px; background:var(--gold); color:var(--forest-deep); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:5px 14px; border-radius:20px; box-shadow:0 6px 14px -6px rgba(0,0,0,.3);}

/* ---------- HOTELS SHOWCASE ---------- */
.hotel-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:36px;}
@media (max-width:960px){ .hotel-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:640px){ .hotel-grid{grid-template-columns:1fr;} }
.hotel-card{background:var(--white); border:1px solid var(--line); border-radius:8px; overflow:hidden; transition:transform .2s ease, box-shadow .2s ease;}
.hotel-card:hover{transform:translateY(-4px); box-shadow:var(--shadow);}
.hotel-card .hotel-img{height:180px; overflow:hidden;}
.hotel-card .hotel-img img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease;}
.hotel-card:hover .hotel-img img{transform:scale(1.07);}
.hotel-card .hotel-body{padding:22px 24px;}
.hotel-city{font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--gold-deep); font-weight:700; margin-bottom:6px;}
.hotel-card h3{font-size:1.08rem; margin-bottom:8px; color:var(--forest-deep);}
.hotel-card p{font-size:.87rem; color:#3c4a41;}

/* ---------- REGIONAL REPRESENTATIVES ---------- */
.reps-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:36px;}
@media (max-width:760px){ .reps-grid{grid-template-columns:1fr;} }
.reps-card{background:var(--white); border:1px solid var(--line); border-radius:8px; padding:28px 30px;}
.reps-card h3{font-size:1.02rem; margin-bottom:18px; color:var(--forest-deep); display:flex; align-items:center; gap:9px;}
.reps-card h3 i{color:var(--gold-deep);}
.reps-list{list-style:none; display:grid; gap:4px;}
.reps-list li{display:flex; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px solid var(--line); font-size:.86rem;}
.reps-list li:last-child{border-bottom:none;}
.reps-list .name{color:var(--ink); font-weight:500;}
.reps-list .tel{color:var(--forest); font-weight:700; white-space:nowrap;}
.reps-list .tel:hover{color:var(--forest-deep); text-decoration:underline;}

/* ---------- REGULATORY ---------- */
.regulatory{position:relative; background:var(--forest-deep); color:var(--white);}
.regulatory .eyebrow{color:var(--gold);}
.regulatory .eyebrow::before{background:var(--gold);}
.regulatory h2{max-width:680px; margin-bottom:16px;}
.regulatory > .wrap > p{color:rgba(255,255,255,0.82); max-width:680px; margin-bottom:8px;}
.reg-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:32px 0;}
@media (max-width:640px){ .reg-grid{grid-template-columns:1fr;} }
.reg-card{background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.18); border-radius:8px; padding:26px; position:relative;}
.reg-card.highlight{border-color:var(--gold); background:rgba(201,166,107,0.12);}
.reg-region{font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,0.65); margin-bottom:8px;}
.reg-body{font-family:'Amiri',serif; font-size:1.6rem; font-weight:700; color:var(--white);}
.reg-tag{display:inline-block; margin-top:12px; background:var(--gold); color:var(--forest-deep); font-size:.72rem; font-weight:700; letter-spacing:.03em; padding:5px 12px; border-radius:20px;}
.reg-advantage{background:rgba(255,255,255,0.06); border-left:3px solid var(--gold); border-radius:0 6px 6px 0; padding:22px 26px; margin-top:12px;}
.reg-advantage h4{color:var(--gold); font-size:1rem; margin-bottom:8px;}
.reg-advantage p{color:rgba(255,255,255,0.85); font-size:.9rem; max-width:720px;}

/* ---------- WHY US ---------- */
.why{background:var(--white);}
.why-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:0; border-top:1px solid var(--line); border-left:1px solid var(--line);}
@media (max-width:860px){ .why-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:480px){ .why-grid{grid-template-columns:1fr;} }
.why-item{padding:26px 20px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); transition:background .2s ease;}
.why-item:hover{background:var(--forest-pale);}
.why-item:hover .why-ico{background:var(--forest); color:var(--white);}
.why-ico{
  width:38px; height:38px; border-radius:50%; background:var(--forest-pale); color:var(--forest);
  display:flex; align-items:center; justify-content:center; font-size:1rem; margin-bottom:14px;
  border:1px solid var(--line); transition:background .2s ease, color .2s ease;
}
.why-item p{font-size:.86rem; color:#3c4a41; font-weight:500;}

/* ---------- PAYMENT ---------- */
.payment{background:var(--forest-pale);}
.payment-grid{display:grid; grid-template-columns:1fr 1fr; gap:34px;}
@media (max-width:860px){ .payment-grid{grid-template-columns:1fr;} }
.bank-card{background:var(--white); border:1px solid var(--line); border-radius:4px; padding:28px 26px;}
.bank-card h3{font-size:1.15rem; margin-bottom:4px; color:var(--forest-deep);}
.bank-card .tag{font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--gold-deep); margin-bottom:18px; display:block;}
.bank-row{display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--line); font-size:.9rem; gap:12px;}
.bank-row:last-child{border-bottom:none;}
.bank-row .k{color:#5a6b5f;}
.bank-row .v{font-weight:600; color:var(--ink); letter-spacing:.02em;}
.plan-note{background:var(--forest); color:var(--white); padding:26px; border-radius:4px; margin-top:26px; font-size:.92rem;}
.plan-note strong{color:var(--gold);}

/* ---------- REGISTER STEPS ---------- */
.register h2{font-size:2.1rem;}
.register > .wrap > p.sub{color:#3c4a41; max-width:560px; margin-top:14px; margin-bottom:50px;}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px 30px; counter-reset:step;}
@media (max-width:860px){ .steps{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .steps{grid-template-columns:1fr;} }
.step{position:relative; padding-left:52px;}
.step .n{
  position:absolute; left:0; top:-4px;
  font-family:'Amiri',serif; font-weight:700; font-size:1.5rem; color:var(--gold-deep);
  width:38px; height:38px; border:1px solid var(--gold-deep); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.step h4{font-size:1rem; margin-bottom:6px; color:var(--forest-deep);}
.step p{font-size:.85rem; color:#526357;}

.docs-note{margin-top:56px; background:var(--white); border:1px solid var(--line); border-radius:4px; padding:30px; display:grid; grid-template-columns:1fr 1.4fr; gap:26px;}
@media (max-width:720px){ .docs-note{grid-template-columns:1fr;} }
.docs-note h4{font-size:1.05rem; margin-bottom:6px;}
.docs-note ul{list-style:none; display:grid; gap:8px;}
.docs-note li{font-size:.88rem; padding-left:16px; position:relative;}
.docs-note li::before{content:"·"; position:absolute; left:0; color:var(--gold-deep); font-weight:700;}

/* ---------- FAQ ---------- */
.faq{background:var(--forest-pale);}
.faq h2{font-size:2.1rem; margin-bottom:40px;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding:20px 0; display:flex; justify-content:space-between; align-items:center; gap:16px;
  font-family:'Amiri',serif; font-size:1.05rem; color:var(--forest-deep); font-weight:700;
}
.faq-q .plus{font-size:1.3rem; color:var(--gold-deep); transition:transform .2s ease; font-family:'Work Sans',sans-serif; font-weight:300; flex-shrink:0;}
.faq-item.open .plus{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.faq-a p{padding:0 0 20px 0; color:#3c4a41; font-size:.92rem; max-width:640px;}

/* ---------- TESTIMONIALS ---------- */
.testimonials{background:var(--forest-deep); color:var(--white);}
.testimonials .eyebrow{color:var(--gold);}
.testimonials .eyebrow::before{background:var(--gold);}
.t-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:36px;}
@media (max-width:720px){ .t-grid{grid-template-columns:1fr;} }
.t-card{background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); border-radius:4px; padding:26px; transition:background .2s ease;}
.t-card:hover{background:rgba(255,255,255,0.1);}
.t-card p.quote{font-family:'Amiri',serif; font-style:italic; font-size:1.05rem; color:var(--white); margin-bottom:14px;}
.t-card .who{font-size:.8rem; color:var(--gold); text-transform:uppercase; letter-spacing:.06em;}

/* ---------- CTA BANNER ---------- */
.cta-banner{
  position:relative; background-size:cover; background-position:center; color:var(--white); overflow:hidden;
}
.cta-banner::after{content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(9,32,21,0.92), rgba(15,81,50,0.75)); z-index:0;}
.cta-banner .wrap{position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:30px; align-items:center; justify-content:space-between;}
.cta-banner h2{color:var(--white); font-size:1.8rem; max-width:520px;}
.cta-banner p{color:rgba(255,255,255,0.85); max-width:480px; margin-top:10px;}
.cta-actions{display:flex; gap:14px; flex-wrap:wrap;}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:50px;}
@media (max-width:860px){ .contact-grid{grid-template-columns:1fr;} }
.contact h2{font-size:2rem; margin-bottom:18px;}
.contact p.sub{color:#3c4a41; max-width:440px; margin-bottom:30px;}
.contact-list{display:grid; gap:18px; margin-bottom:30px;}
.contact-list .info-row{display:flex; gap:14px; align-items:flex-start;}
.contact-list .label{font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--gold-deep); margin-bottom:2px;}
.contact-list .val{font-weight:600; font-size:.98rem;}
.hours{background:var(--white); border:1px solid var(--line); border-radius:4px; padding:24px 26px;}
.hours h4{font-size:.95rem; margin-bottom:14px;}
.hours .info-row{display:flex; justify-content:space-between; font-size:.88rem; padding:8px 0; border-bottom:1px solid var(--line); color:#3c4a41;}
.hours .info-row:last-child{border-bottom:none;}
.contact-card{background:var(--forest-pale); border-radius:4px; padding:34px; display:flex; flex-direction:column; gap:16px; height:fit-content;}
.contact-card .field{display:flex; flex-direction:column; gap:6px; margin-bottom:16px;}
.contact-card label{font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--forest-deep); font-weight:600;}
.contact-card input, .contact-card select, .contact-card textarea{
  padding:12px 14px; border:1px solid var(--line); border-radius:3px; font-family:'Work Sans',sans-serif; font-size:.92rem; background:var(--white); width:100%;
}
.contact-card textarea{resize:vertical; min-height:80px;}
.contact-card .btn{margin-top:6px; justify-content:center;}
.form-note{font-size:.78rem; color:#5a6b5f; margin-top:4px;}

/* wizard */
.wiz-progress{margin-bottom:6px;}
.wiz-progress-track{background:rgba(15,81,50,0.14); height:5px; border-radius:3px; overflow:hidden;}
.wiz-progress-fill{background:var(--forest); height:100%; width:16.66%; transition:width .3s ease;}
.wiz-progress-label{display:block; margin-top:10px; font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; color:var(--gold-deep); font-weight:600;}
.wstep{display:none;}
.wstep.active{display:block; animation:fadeStep .35s ease;}
@keyframes fadeStep{from{opacity:0; transform:translateX(8px);} to{opacity:1; transform:translateX(0);}}
.wstep h4{font-size:1.05rem; margin-bottom:18px; color:var(--forest-deep);}
.opt-grid{display:flex; flex-wrap:wrap; gap:8px;}
.opt{
  background:var(--white); border:1px solid var(--line); color:var(--ink);
  padding:9px 15px; border-radius:20px; font-size:.84rem; font-family:'Work Sans',sans-serif;
  cursor:pointer; transition:all .15s ease;
}
.opt:hover{border-color:var(--forest-light);}
.opt.selected{background:var(--forest); border-color:var(--forest); color:var(--white); font-weight:600;}
.wiz-nav{display:flex; justify-content:space-between; gap:12px; margin-top:6px;}
.wiz-nav .btn{flex:1; margin-top:0;}
.btn-ghost{background:transparent; border:1px solid var(--line); color:var(--forest-deep);}
.btn-ghost:hover{background:rgba(15,81,50,0.06);}
.btn-ghost:disabled{opacity:.35; cursor:not-allowed;}
.btn-line-dark{background:transparent; border:1px solid var(--forest); color:var(--forest-deep);}
.btn-line-dark:hover{background:rgba(15,81,50,0.08);}
.wiz-send{display:none; gap:12px;}
.wiz-send .btn{flex:1; margin-top:0;}
.wiz-summary{background:var(--white); border:1px dashed var(--line); border-radius:4px; padding:16px 18px; font-size:.82rem; color:#3c4a41; margin-top:2px; white-space:pre-line; display:none;}

/* ---------- JOURNEY OF HAJJ (timeline) ---------- */
.hajj-timeline{position:relative;}
.hajj-timeline::before{
  content:""; position:absolute; left:29px; top:0; bottom:0; width:2px;
  background:repeating-linear-gradient(180deg, var(--gold-deep) 0 8px, transparent 8px 16px);
}
@media (max-width:640px){ .hajj-timeline::before{left:19px;} }
.timeline-item{position:relative; padding-left:76px; margin-bottom:44px;}
@media (max-width:640px){ .timeline-item{padding-left:54px;} }
.timeline-item:last-child{margin-bottom:0;}
.timeline-marker{
  position:absolute; left:0; top:0; width:60px; height:60px; border-radius:50%;
  background:var(--forest); color:var(--gold); display:flex; align-items:center; justify-content:center;
  font-family:'Amiri',serif; font-size:1.5rem; border:3px solid var(--cream); box-shadow:0 0 0 2px var(--gold-deep);
}
@media (max-width:640px){ .timeline-marker{width:40px; height:40px; font-size:1.1rem;} }
.timeline-body{background:var(--white); border:1px solid var(--line); border-radius:6px; overflow:hidden; box-shadow:0 8px 24px -18px rgba(10,58,36,0.4);}
.timeline-body-inner{padding:24px 28px;}
.timeline-body .t-img{width:100%; height:220px; overflow:hidden;}
.timeline-body .t-img img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease;}
.timeline-body:hover .t-img img{transform:scale(1.05);}
.timeline-body h3{font-size:1.2rem; margin-bottom:8px; color:var(--forest-deep);}
.timeline-body h3 .ar{color:var(--gold-deep); font-size:.95rem; font-weight:400; display:block; margin-top:2px;}
.timeline-body p{color:#3c4a41; font-size:.92rem;}
.timeline-body ul{margin-top:10px; padding-left:18px; color:#3c4a41; font-size:.9rem;}
.timeline-section-label{
  display:inline-block; background:var(--forest); color:var(--white); padding:8px 20px; border-radius:20px;
  font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; font-weight:600; margin:56px 0 30px;
}
.timeline-section-label:first-child{margin-top:0;}
.timeline-section-label.gold{background:var(--gold-deep);}

/* ---------- FLIGHT ROUTES ---------- */
.route-card{background:var(--white); border:1px solid var(--line); border-radius:6px; padding:24px; transition:all .2s ease;}
.route-card:hover{box-shadow:var(--shadow); transform:translateY(-3px); border-color:transparent;}
.route-card h4{font-size:1.02rem; color:var(--forest-deep); margin-bottom:14px; display:flex; align-items:center; gap:8px;}
.route-flow{display:flex; align-items:center; flex-wrap:wrap; gap:0; font-size:.86rem;}
.route-flow .stop{background:var(--forest-pale); border:1px solid var(--line); padding:8px 14px; border-radius:20px; color:var(--forest-deep); font-weight:600;}
.route-flow .arrow{color:var(--gold-deep); padding:0 8px; font-size:1rem;}
.route-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
@media (max-width:760px){ .route-grid{grid-template-columns:1fr;} }
.route-diagram{background:var(--forest-pale); border-radius:6px; padding:34px 26px;}
.flow-vert{display:flex; flex-direction:column; align-items:center; gap:0;}
.flow-vert .fnode{
  background:var(--white); border:1px solid var(--line); border-radius:4px; padding:12px 22px;
  font-size:.88rem; font-weight:600; color:var(--forest-deep); text-align:center; min-width:220px;
}
.flow-vert .fnode.accent{background:var(--forest); color:var(--white); border-color:var(--forest);}
.flow-vert .fnode.gold{background:var(--gold); color:var(--forest-deep); border-color:var(--gold);}
.flow-vert .farrow{color:var(--gold-deep); font-size:1.3rem; line-height:1; padding:4px 0;}
.flow-vert small{color:#5a6b5f; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em;}

/* ---------- GALLERY ---------- */
.gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
@media (max-width:900px){ .gallery-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:640px){ .gallery-grid{grid-template-columns:repeat(2,1fr);} }
.gallery-item{position:relative; border-radius:6px; overflow:hidden; cursor:pointer; aspect-ratio:1/1; background:var(--forest-pale);}
.gallery-item img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.gallery-item:hover img{transform:scale(1.1);}
.gallery-item::after{content:"\2295"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:1.6rem; color:#fff; background:rgba(10,58,36,0); transition:background .25s ease; opacity:0;}
.gallery-item:hover::after{background:rgba(10,58,36,0.42); opacity:1;}

.lightbox{
  position:fixed; inset:0; z-index:1000; background:rgba(8,20,14,0.94);
  display:none; align-items:center; justify-content:center; padding:40px;
}
.lightbox.open{display:flex;}
.lightbox img{max-width:100%; max-height:82vh; border-radius:4px; box-shadow:0 30px 80px rgba(0,0,0,0.5);}
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:absolute; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.3); color:#fff;
  width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:1.3rem; transition:background .2s ease;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{background:rgba(255,255,255,0.25);}
.lightbox-close{top:24px; right:24px;}
.lightbox-prev{left:24px; top:50%; transform:translateY(-50%);}
.lightbox-next{right:24px; top:50%; transform:translateY(-50%);}
.lightbox-counter{position:absolute; bottom:22px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,0.75); font-size:.82rem; letter-spacing:.06em;}
@media (max-width:640px){
  .lightbox{padding:16px;}
  .lightbox-prev{left:8px;} .lightbox-next{right:8px;}
  .lightbox-close{top:10px; right:10px;}
}

.gallery-filter{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px;}
.gallery-filter button{
  background:var(--white); border:1px solid var(--line); padding:9px 18px; border-radius:20px;
  font-size:.84rem; font-family:'Work Sans',sans-serif; cursor:pointer; color:var(--forest-deep); transition:all .15s ease;
}
.gallery-filter button.active, .gallery-filter button:hover{background:var(--forest); border-color:var(--forest); color:var(--white);}

/* ---------- FOOTER ---------- */
footer{background:var(--forest-deep); color:rgba(255,255,255,0.82); padding:64px 0 26px;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,0.14);}
@media (max-width:820px){ .foot-grid{grid-template-columns:1fr 1fr; gap:34px;} }
@media (max-width:480px){ .foot-grid{grid-template-columns:1fr;} }
.foot-brand{display:flex; align-items:center; gap:10px;}
.foot-brand img{width:34px; height:40px; border-radius:4px; object-fit:cover;}
.foot-brand .brand-text{color:var(--white);}
.foot-about p{margin-top:14px; font-size:.88rem; color:rgba(255,255,255,0.6); max-width:280px;}
footer h5{font-size:.76rem; text-transform:uppercase; letter-spacing:.1em; color:var(--gold); margin-bottom:16px;}
footer ul{list-style:none; display:grid; gap:10px;}
footer ul a{font-size:.88rem; color:rgba(255,255,255,0.75);}
footer ul a:hover{color:var(--white);}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:24px; font-size:.8rem; color:rgba(255,255,255,0.55); flex-wrap:wrap; gap:10px;}

.whatsapp-float{
  position:fixed; bottom:22px; right:22px; z-index:200;
  background:var(--forest); color:var(--white); width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px -8px rgba(10,58,36,0.6);
  animation:floatPulse 2.6s ease-in-out infinite;
}
.whatsapp-float:hover{background:var(--forest-deep);}
@keyframes floatPulse{0%,100%{box-shadow:0 10px 26px -8px rgba(10,58,36,0.6);} 50%{box-shadow:0 10px 34px -6px rgba(201,166,107,0.55);}}

.back-top{
  position:fixed; bottom:22px; right:88px; z-index:200; width:44px; height:44px; border-radius:50%;
  background:var(--white); border:1px solid var(--line); color:var(--forest-deep); display:flex; align-items:center; justify-content:center;
  cursor:pointer; opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease; transform:translateY(10px);
  box-shadow:0 10px 26px -10px rgba(10,58,36,0.4);
}
.back-top.show{opacity:1; pointer-events:auto; transform:translateY(0);}

.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}
.reveal-left{opacity:0; transform:translateX(-24px); transition:opacity .6s ease, transform .6s ease;}
.reveal-left.in{opacity:1; transform:translateX(0);}
.reveal-right{opacity:0; transform:translateX(24px); transition:opacity .6s ease, transform .6s ease;}
.reveal-right.in{opacity:1; transform:translateX(0);}
.reveal-zoom{opacity:0; transform:scale(.94); transition:opacity .6s ease, transform .6s ease;}
.reveal-zoom.in{opacity:1; transform:scale(1);}
.stagger.in > *{transition-delay: calc(var(--i, 0) * 90ms);}

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-left, .reveal-right, .reveal-zoom{opacity:1; transform:none; transition:none;}
  html{scroll-behavior:auto;}
  .whatsapp-float{animation:none;}
}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--gold-deep); outline-offset:3px;
}

/* utility */
.text-center{text-align:center;}
.mt-lg{margin-top:56px;}
.badge-note{display:inline-flex; align-items:center; gap:8px; background:var(--forest-pale); color:var(--forest-deep); padding:8px 16px; border-radius:20px; font-size:.82rem; border:1px solid var(--line);}