#features.building-elements-section{padding:40px 0}
.building-elements-section .container{max-width:1200px; margin:0 auto; padding:0 15px}
.cards-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px}
.card{background:#fff; border-radius:12px; box-shadow:0 4px 15px rgba(0,0,0,.05); overflow:hidden; display:flex; flex-direction:column; transition:transform .3s ease}
.card:hover{transform:translateY(-5px)}
.card-image-placeholder{height:200px; background:#eee; background-size:cover; background-position:center; border-bottom:5px solid var(--blue); display:flex; justify-content:center; align-items:center; color:#666; font-size:.9rem}
.office-card .card-image-placeholder{background-image:url('/assets/img/opt/offices.webp')}
.walkways-card .card-image-placeholder{background-image:url('/assets/img/opt/walkway.webp')}
.showroom-card .card-image-placeholder{background-image:url('/assets/img/opt/showrooms.webp')}
.parking-card .card-image-placeholder{background-image:url('/assets/img/مواقف سيارات.webp')}
.card-content{padding:20px; flex-grow:1; display:flex; flex-direction:column}
.card-title{color:#1f6aa5; font-size:1.5rem; border-bottom:2px solid var(--blue); padding-bottom:10px; margin-bottom:15px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.features-list{list-style:none; padding:0; margin-bottom:20px; flex-grow:1}
.features-list li{position:relative; padding-right:20px; margin-bottom:10px; font-size:1rem; color:#333; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.features-list li::before{content:'•'; position:absolute; right:0; color:var(--blue); font-weight:900; font-size:1.2rem; line-height:1}
.more-link{display:inline-block; color:#1f6aa5; font-weight:700; text-decoration:none; padding-top:10px; border-top:1px dashed #ddd; align-self:flex-start; transition:color .2s}
.more-link:hover{color:#2db08a}
.showroom-card .card-content,.parking-card .card-content{padding-top:30px; border-top:1px solid var(--blue)}
.showroom-card .card-title,.parking-card .card-title{border-bottom:1px solid #ddd}
@media (max-width: 992px){.cards-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 576px){.cards-grid{grid-template-columns:1fr}.card-title{font-size:1.3rem}}
:root{
  --brand:#2db08a; /* placeholder accent for focus states */
  --blue:#1f6aa5; /* brand blue for identity */
  --gold:#b3853b;
  --brown:#7a5a2a;
  --ink:#0d1b2a;
  --muted:#5b6b7a;
  --bg:#fbfbfd;
  --card:#ffffff;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:"Tajawal","Cairo",system-ui,Arial,sans-serif; background:var(--bg); color:var(--ink); overflow-x:hidden;}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.container{width:min(1100px,92%); margin-inline:auto}

.site-header{
  position:fixed; left:0; right:0; top:0; z-index:50;
  background:#fff !important;
  border-bottom:1px solid rgba(0,0,0,.06) !important;
  box-shadow:0 4px 20px rgba(15,34,51,.06) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  transition:box-shadow .35s ease, border-color .35s ease;
}
.site-header.scrolled{box-shadow:0 8px 24px rgba(15,34,51,.08) !important}
body.has-unified-chrome,
body:not(.home-page){padding-top:clamp(72px, 10vh, 88px)}
.site-header .menu a,
.site-header .menu .drop-toggle,
.site-header .menu .btn{color:#000; text-shadow:none}
.site-header .menu a::after{background:linear-gradient(90deg,#1f6aa5,var(--gold))}
.site-header .menu a:hover,
.site-header .menu .drop-toggle:hover{color:#000}
.site-header .menu .drop-menu a{color:#000}
.site-header .menu .drop-menu a:hover{color:#000; background:rgba(0,0,0,.06)}
.site-header .nav-toggle{color:#0d1b2a}
.site-header .search-btn svg{stroke:#0d1b2a}
.site-header .brand img{filter:none}
.home-page .hero{
  margin-top:0;
  padding-top:0;
}
.home-page .hero-carousel{
  border-radius:0;
  box-shadow:none;
}
.home-page #hero .slide-link,
.home-page #hero .slide-link--full,
.home-page #hero .hero-split,
.home-page #hero .hero-full:not(.hero-full--facade){
  min-height:100vh;
  min-height:100svh;
}
.home-page #hero.section{
  padding:0 !important;
  padding-top:var(--home-header-h, clamp(64px, 9vh, 80px)) !important;
  margin:0 !important;
  background:#fff;
  --home-header-h:clamp(64px, 9vh, 80px);
}
.home-page #hero .hero-carousel,
.home-page #hero .slides,
.home-page #hero .slide{
  background:#fff;
  height:calc(100svh - var(--home-header-h));
}
.home-page #hero .hero-full--facade{
  height:100%;
  min-height:calc(100svh - var(--home-header-h));
  max-height:none;
}
.home-page #hero .hero-full__stage--facade{
  height:100%;
  min-height:calc(100svh - var(--home-header-h));
  margin-top:0;
  overflow:hidden;
  max-height:none;
}
.home-page #hero .hero-full--facade .hero-full__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  margin-top:0;
  clip-path:none;
  object-fit:cover;
  object-position:center 36%;
  transform:scale(1.14) !important;
  transform-origin:28% 30%;
}
.home-page #hero .hero-facade__ai-patch{
  width:min(280px, 36vw);
  height:min(170px, 22vh);
  min-width:150px;
  min-height:90px;
  background:linear-gradient(155deg, rgba(125,176,104,.28) 0%, rgba(106,159,86,.2) 42%, rgba(93,143,74,.12) 72%, rgba(79,125,63,.06) 100%);
  -webkit-mask-image:radial-gradient(ellipse 130% 120% at 100% 100%, #000 42%, transparent 78%);
  mask-image:radial-gradient(ellipse 130% 120% at 100% 100%, #000 42%, transparent 78%);
}
.site-header .container.nav{
  max-width:1100px;
  width:min(1100px,92%);
  margin-inline:auto;
  background:transparent;
  box-shadow:none;
  border-radius:0;
  padding:18px 20px 22px;
}
.site-header .container.nav{
  position:relative;
  padding:14px clamp(68px, 9vw, 84px) 16px 20px;
}
.site-header .brand{
  position:absolute;
  top:50%;
  right:clamp(2px, 0.6vw, 8px);
  left:auto;
  transform:translateY(-50%);
  z-index:3;
  line-height:0;
  width:52px;
  height:52px;
  overflow:hidden;
  display:block;
  border-radius:10px;
}
.site-header .brand img{
  display:block;
  width:100%;
  height:auto;
  max-width:none;
  object-fit:cover;
  object-position:top center;
  transform:scale(2.65);
  transform-origin:top center;
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:18px 0 22px; gap:16px}
.site-header .nav{padding:0; min-height:56px}
.header-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}
.lang-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:52px;
  height:40px;
  padding:0 14px;
  border-radius:999px;
  border:2px solid rgba(13,27,42,.14);
  background:rgba(255,255,255,.72);
  color:#0d1b2a;
  font-weight:800;
  font-size:15px;
  font-family:inherit;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.lang-toggle:hover{
  background:#fff;
  border-color:#1f6aa5;
  color:#1f6aa5;
  transform:translateY(-1px);
}
.site-header .lang-toggle{
  border-color:rgba(13,27,42,.12);
  background:#fff;
  color:#0d1b2a;
}
.site-header .lang-toggle:hover{
  background:#f8fafc;
  border-color:#1f6aa5;
  color:#1f6aa5;
}
.brand img{height:72px}
.site-header .menu,
.menu{display:flex; flex-wrap:nowrap; gap:10px 14px; align-items:center; justify-content:center; margin-inline:auto; flex:1 1 auto; min-width:0; white-space:nowrap}
.site-header .menu > *,
.menu > *{flex-shrink:0}
.site-header .menu a,
.site-header .menu .drop-toggle,
.site-header .menu .btn{
  font-size:19px;
  font-weight:800;
  line-height:1.2;
}
.menu a{position:relative; padding:8px 10px; border-radius:10px; font-weight:800; font-size:19px; color:#000; transition:color .2s ease; white-space:nowrap}
.menu a::after{content:""; position:absolute; inset:auto 12px -6px 12px; height:3px; background:linear-gradient(90deg,var(--blue), var(--gold)); border-radius:3px; transform:scaleX(0); transform-origin:left; transition:transform .25s ease}
.menu a:hover{color:#000}
.menu a:hover::after{transform:scaleX(1)}
.menu .btn{padding:0; background:transparent; box-shadow:none; color:#000}
.menu .btn:hover{transform:none}
.menu .has-dropdown{position:relative}
.menu .drop-toggle{
  background:none; border:0; cursor:pointer; font:inherit; line-height:1;
  position:relative;   padding:8px 10px; border-radius:10px;
  font-weight:800; font-size:19px; color:#000; white-space:nowrap;
}
.menu .drop-toggle::after{
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  margin-inline-start:8px;
  margin-bottom:3px;
  border-inline-end:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  transform-origin:center;
  transition:transform .2s ease;
  vertical-align:middle;
  opacity:.7;
}
.menu .has-dropdown.open .drop-toggle::after{
  transform:rotate(-135deg);
  margin-bottom:0;
}
.menu .drop-menu{
  position:absolute; top:100%; right:0;
  min-width:220px; background:#fff; color:#0f2233;
  border:1px solid rgba(0,0,0,.08); border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  padding:8px; display:none; z-index:1000;
}
.menu .has-dropdown.open .drop-menu{display:block}
.menu .drop-menu a{
  display:block; padding:10px 12px; border-radius:8px; text-decoration:none;
  color:#000; white-space:nowrap; font-size:14px; font-weight:700;
}
.menu .drop-menu a::after{display:none}
.menu .drop-menu a:hover{background:rgba(0,0,0,.06); color:#000}
.nav-toggle{display:none; font-size:24px; background:transparent; border:0}
.search-btn{background:transparent; border:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px}
.search-btn svg{width:24px; height:24px; stroke:#000}

.btn{display:inline-block; border-radius:12px; font-weight:600; transition:.2s transform, .2s box-shadow}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--gold); color:#fff; box-shadow:var(--shadow)}
.btn-ghost{border:1px solid #cfd6df}

.section{padding:64px 0}
.section-title{font-size:32px; margin:0 0 28px; text-align:center}
.subtle-bg{background:linear-gradient(180deg, #f6f7fb 0, #ffffff 100%)}

.about-full{padding:70px 0; background:#ffffff; color:var(--ink); position:relative; overflow:visible}
.about-full::after{content:none}
.about-full::before{content:none}
.about-full .container{position:relative; z-index:1}
.about-title{color:var(--blue); line-height:1.2}
/* textured blue headline like print grain */
.about-title{background:
  linear-gradient(180deg, rgba(255,255,255,.0), rgba(0,0,0,.06)),
  linear-gradient(180deg, #1f6aa5 0, #155a8a 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.about-lead{font-size:20px; line-height:1.9; color:var(--ink)}
.lead-hero{display:inline-block; font-size:48px; font-weight:800; color:var(--blue); letter-spacing:.5px}

/* Professional framed panel for paragraph */
.about-panel{background:#fff; border:1px solid #e3e8ef; border-radius:16px; padding:18px 22px; box-shadow:0 12px 36px rgba(0,0,0,.07); position:relative}
.about-panel::before{content:""; position:absolute; inset:-6px -6px auto auto; width:86px; height:10px; background:linear-gradient(90deg, var(--gold), transparent); border-radius:10px; opacity:.2}
.about-panel p{margin:0}
.about-panel .lead-hero{font-size:52px}

/* Replace headline with logo */
.about-logo{height:64px; width:auto; filter:saturate(.9)}

/* Right-side pointer title */
.about-pointer{position:absolute; right:0; top:40px; display:flex; align-items:center; gap:10px; color:var(--brown); opacity:.9}
.about-pointer span{font-weight:800; font-size:22px}
.about-pointer svg{width:160px; height:80px; color:var(--brown)}

/* Misk-like decorative shapes using brand colors */
.about-decor{position:absolute; inset:0; pointer-events:none}
.about-decor .dec{position:absolute; display:block; opacity:.28}
.about-decor .stripe{left:0; right:auto; top:-26px; width:min(520px, 60%); height:26px; border-radius:8px; background:linear-gradient(90deg, var(--blue) 0%, #155a8a 100%); opacity:.06; transform:translateX(var(--sx, 0px)) rotate(-4deg); transform-origin:left center; will-change:transform, opacity}
.about-decor .bars{display:none}
.about-decor .block{display:none}
.about-decor .bl{display:none}
.about-decor .br{right:0; bottom:-40px; width:220px; height:100px; background:var(--blue);
  -webkit-mask: url('/assets/img/صورة زخرف.png') no-repeat right bottom / contain;
  mask: url('/assets/img/صورة زخرف.png') no-repeat right bottom / contain;
  border:none; border-radius:0; opacity:.9; box-shadow:none}
.about-decor .tl{left:0; top:0}

/* Parallax drift for shapes */
@keyframes drift {
  0% { transform:translate3d(0,0,0) }
  50% { transform:translate3d(0, -8px, 0) }
  100% { transform:translate3d(0,0,0) }
}
.about-decor .dec{animation:drift 6s ease-in-out infinite}

/* Rental-themed left corner decorations */
.lease-tag{display:none}
.lease-dots{display:none}
.lease-bars-left{display:none}

.hero{position:relative; padding-top:0; margin-top:0}
.home-page #hero + .section,
.home-page #hero + #about{
  padding-top:0;
  margin-top:0;
  border-top:none;
  box-shadow:none;
}
.home-page #hero{
  margin-bottom:0;
  border-bottom:none;
}
.home-page #hero + #about.about-block{
  background:var(--ab-cream, #f6f3ed) !important;
  padding-top:0 !important;
}
.home-page #hero + #about .section-title{
  margin-top:0;
  padding-top:12px;
}
.home-page #hero + #about .section-title::after{
  content:'';
  position:absolute;
  bottom:-12px;
  right:50%;
  transform:translateX(50%);
  width:72px;
  height:4px;
  background:var(--gold, #b3853b);
  border-radius:2px;
  display:block;
}
.home-page{
  background:#fff;
}
.hero .container{width:100%}
.hero::before{content:none}
.hero::after{content:none}
.hero-carousel{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); position:relative}
.hero-carousel::before{content:""; position:absolute; inset:0; pointer-events:none; z-index:1; background:none}
.hero-carousel::after{content:""; position:absolute; inset:0; pointer-events:none; z-index:1; background:none}
.hero-caption{display:flex; flex-direction:column; gap:12px}
.hero-caption h1{margin:0; font-size:48px; color:#ffffff; text-shadow:0 4px 24px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.25)}
.hero-caption p{margin:0; color:#eaf2f9; text-shadow:0 2px 12px rgba(0,0,0,.35)}
@media (min-width: 1100px){
  .hero-caption h1{font-size:56px}
}
.hero-copy h1{font-size:40px; margin:0 0 10px}
.hero-copy p{color:var(--muted)}
.cta{display:flex; gap:12px; margin-top:18px}
.hero-media{position:relative}
.hero-media img{border-radius:var(--radius); box-shadow:var(--shadow)}
.glow{position:absolute; inset:-10% -5% auto -5%; height:60%; background:radial-gradient(closest-side, rgba(45,176,138,.25), transparent 60%); filter:blur(30px); border-radius:50%}
.hero-scroll{position:absolute; inset:auto 0 -22px 0; text-align:center; font-size:12px; color:#98a3ad}

.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{background:var(--card); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.card h3{margin:12px 16px 6px}
.card p{margin:0 16px 16px; color:var(--muted)}
.card img{aspect-ratio: 4/3; object-fit:cover}

.about-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:40px; align-items:center}
#about .section-title{font-size:44px}
#about p{font-size:20px; line-height:2}
#about .about-features .feature{font-size:18px}

/* About cards grid */
.about-steps{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:16px; max-width:1080px}
.a-card{background:#ffffff; border:1px solid #e1e8ef; border-radius:16px; padding:22px; box-shadow:0 10px 32px rgba(0,0,0,.07); position:relative; overflow:hidden; text-align:center; transition:transform .22s cubic-bezier(.2,.9,.2,1), box-shadow .22s ease, border-color .22s ease; will-change:transform}
.a-card.active{transform:scale(1.04); box-shadow:0 18px 48px rgba(0,0,0,.12); border-color:#d6dee7}
.a-card h3{margin:12px 0 0; font-size:22px; color:#0d1b2a}
.a-card p{margin:8px 0 0; color:#334455}
.a-ico{width:82px; height:82px; border-radius:18px; background:rgba(122,90,42,.1); display:grid; place-items:center; color:var(--brown); margin:0 auto}
.a-ico svg{width:38px; height:38px; stroke:var(--brown); stroke-width:2; fill:none}
.a-card::after{content:attr(data-step); position:absolute; inset:14px 14px auto auto; color:var(--blue); font-weight:800; font-size:46px; opacity:0; transform:translateY(-12px)}
.a-card.reveal-in::after{opacity:.95; transform:translateY(0); transition:transform .55s cubic-bezier(.22,1,.36,1), opacity .55s ease}
.about-steps .a-card:nth-child(1).reveal-in::after{transition-delay:.05s}
.about-steps .a-card:nth-child(2).reveal-in::after{transition-delay:.15s}
.about-steps .a-card:nth-child(3).reveal-in::after{transition-delay:.25s}
.about-steps .a-card:nth-child(4).reveal-in::after{transition-delay:.35s}
.a-card:hover{transform:scale(1.06) translateZ(0); box-shadow:0 22px 64px rgba(0,0,0,.16); border-color:#d0d9e2; z-index:2; animation:wiggle .45s ease}

@keyframes wiggle{
  0%{transform:scale(1.06) translateX(0) rotate(0)}
  15%{transform:scale(1.06) translateX(-2px) rotate(-0.6deg)}
  35%{transform:scale(1.06) translateX(3px) rotate(0.6deg)}
  55%{transform:scale(1.06) translateX(-3px) rotate(-0.5deg)}
  75%{transform:scale(1.06) translateX(2px) rotate(0.4deg)}
  100%{transform:scale(1.06) translateX(0) rotate(0)}
}

@media (max-width: 900px){
  .about-steps{grid-template-columns:1fr}
}
@media (max-width: 600px){ }
.about-media{position:relative}
.about-media{position:relative}
.about-media .about-img{border-radius:20px; box-shadow:0 24px 80px rgba(0,0,0,.08); width:100%}
/* Blue decoration to the left of the image */
.about-media::before{content:""; position:absolute; left:-220px; top:18%; width:200px; height:128px; border-radius:10px; background:linear-gradient(90deg, var(--blue) 0 26px, transparent 26px 62px, var(--blue) 62px 88px, transparent 88px 124px, var(--blue) 124px 150px, transparent 150px 200px); opacity:.95}
.about-media::after{content:""; position:absolute; left:-360px; top:18%; width:140px; height:128px; border-radius:10px; background:var(--blue); opacity:.9}
.about-features{display:none}

/* outline CTA for more */
.about-more{display:inline-flex; align-items:center; gap:10px; margin-top:20px; padding:10px 16px; border-radius:999px; border:2px solid var(--blue); color:var(--blue); font-weight:700}
.about-more span{transition:transform .2s ease}
.about-more:hover{background:rgba(31,106,165,.06)}
.about-more:hover span{transform:translateX(-4px)}
/* Floating AI badges around the image */
.ai-badges{display:none}

/* Reveal animations */
[data-reveal]{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1)}
.reveal-in{opacity:1 !important; transform:none !important}
@keyframes floatBadge{0%{transform:translate(-50%,-50%) translateY(0)}50%{transform:translate(-50%,-50%) translateY(-8px)}100%{transform:translate(-50%,-50%) translateY(0)}}
.ai-badges .badge.reveal-in{animation:none}

/* Zoom-in image on reveal */
[data-reveal="zoom-in"] .about-img{transform:scale(.96); transition:transform .8s cubic-bezier(.2,.9,.2,1)}
[data-reveal="zoom-in"].reveal-in .about-img{transform:scale(1)}

.services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.service{background:var(--card); border-radius:var(--radius); padding:22px; text-align:center; box-shadow:var(--shadow)}
.service .icon{font-size:34px; margin-bottom:10px}

.img-accordion{display:flex; gap:18px; height:560px; width:100%; background:none}
.img-accordion.cards .acc-item{display:flex; flex-direction:column; border:1px solid #e6ebf2; border-radius:16px; overflow:hidden; background:#fff; transition:flex .6s cubic-bezier(.22,1,.36,1), transform .3s ease}
.img-accordion.cards .acc-bg{height:100%; border:0}
.img-accordion.cards{display:flex; gap:12px}
.img-accordion.cards .acc-item{flex:1 1 0%; transform:none}
.img-accordion.cards .acc-item:hover{transform:none}
.img-accordion.cards .acc-item.acc-active{flex:1 1 0%}
.img-accordion.cards .acc-overlay{position:absolute; left:14px; right:14px; bottom:14px; padding:16px 18px; background:rgba(255,255,255,.95); border-radius:12px; box-shadow:0 12px 34px rgba(0,0,0,.12); display:grid; gap:10px; opacity:1; transform:none; transition:none}
/* Force content area to sit below image and begin at the right edge */
.img-accordion.cards .acc-overlay{position:relative !important; inset:auto !important; transform:none !important; opacity:1 !important; background:transparent}
.img-accordion.cards .program-card__title{font-size:inherit; text-align:inherit}
.img-accordion.cards .program-card__status{font-size:inherit; text-align:inherit}
.img-accordion.cards .program-card__info-item{justify-content:inherit; font-size:inherit}

/* Offices card: place content under image and align right */
.acc-item[aria-label="المكاتب"]{display:flex; flex-direction:column}
.acc-item[aria-label="المكاتب"] .acc-bg{position:relative; height:60%}
.acc-item[aria-label="المكاتب"] .acc-overlay{position:relative; left:auto; right:auto; bottom:auto; height:auto; opacity:1; transform:none; background:#ffffff; padding:16px; text-align:right}
.acc-item[aria-label="المكاتب"] .acc-title{position:static; display:block; margin:0 0 6px 0; text-align:right; color:#101820; font-weight:800}
.acc-item[aria-label="المكاتب"] .acc-meta{justify-content:flex-end}
.acc-item[aria-label="المكاتب"] .acc-list{justify-items:end; text-align:right}
/* Program card (ported style keeping brand) */
.program-card{display:flex; flex-direction:column; gap:10px}
.program-card__header{position:relative}
.program-card__title{margin:0; font-size:20px; font-weight:800; color:#101820; text-align:right}
.program-card__status{margin:4px 0 0; color:var(--muted); font-size:13px; text-align:right}
.program-card__body{display:grid; gap:6px}
.program-card__info-item{display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13px; justify-content:flex-end}
.program-card__footer{display:flex; align-items:center; justify-content:flex-end; gap:10px}
/* Ensure title and content sit below the image, aligned to the right */
.img-accordion.cards .acc-title{position:static; right:auto; left:auto; bottom:auto; transform:none; padding:0; margin:0 0 6px 0; font-weight:800; font-size:18px; color:#101820; text-align:right}
.img-accordion .card-btn{display:inline-block; margin-top:6px; padding:8px 14px; border:1px solid #cfd6df; color:#7a5a2a; border-radius:10px; background:#fff}

/* Gray text and golden icons for card content */
.img-accordion.cards .acc-meta{color:var(--muted); display:block; font-size:13px}
.img-accordion.cards .acc-list{gap:6px}
.img-accordion.cards .acc-list div{position:relative; padding:6px 28px 6px 10px; color:var(--muted); background:#ffffff; border:1px solid #e6ebf2; border-radius:10px; text-align:right}
#features .img-accordion.cards .acc-list div::before{content:""; position:absolute; right:12px; top:50%; width:10px; height:10px; background:rgba(179,133,59,.35); border-radius:50%; transform:translateY(-50%)}
#features .acc-item strong{ color:rgba(179,133,59,.55) }
.img-accordion,*[data-accordion]{contain:content}
.features #features, #features{isolation:isolate}
#features{background:linear-gradient(180deg, rgba(179,133,59,.10) 0%, rgba(179,133,59,.06) 70%, rgba(179,133,59,.04) 100%); position:relative}
#features::before{content:""; position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px), radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size:28px 28px, 56px 56px; background-position:0 0, 14px 14px; opacity:.55}
#services.building-services-block{background:transparent}
#services:not(.building-services-block){background:linear-gradient(180deg, rgba(179,133,59,.20) 0%, rgba(179,133,59,.14) 100%)}
#features .container{width:100%; margin-inline:auto; padding-inline:2%}
.acc-item{flex:1 1 0%; position:relative; border-radius:16px; overflow:hidden; cursor:pointer; transition:flex .6s cubic-bezier(.22,1,.36,1), transform .3s ease; border:0; background:transparent}
.acc-item:focus-visible{outline:3px solid rgba(31,106,165,.35)}
/* image box with reserved bottom space for the card */
.acc-item .acc-bg{position:absolute; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat; filter:grayscale(10%) contrast(1) opacity(.96); border-radius:inherit; z-index:0}
/* shrink image width strongly on active */
.acc-item.acc-active .acc-bg{transform:none}
/* title fixed bottom-right above the card */
.acc-item .acc-title{position:absolute; right:16px; bottom:16px; font-weight:900; font-size:26px; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.45)}
/* title normal (not absolute at bottom) */
.acc-item .acc-title{font-weight:800; font-size:22px; color:inherit; position:static; left:auto; bottom:auto; background:transparent; padding:0; opacity:1; transform:none}
/* overlay from bottom */
.acc-item .acc-overlay{position:absolute; inset:auto 0 0 0; padding:18px; background:linear-gradient(180deg, rgba(255,255,255,.0), rgba(255,255,255,.95)); display:grid; gap:10px; opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease; z-index:1}
.acc-item.acc-active .acc-overlay{opacity:1; transform:translateY(0)}
/* muted meta/list typography */
.acc-item .acc-meta{display:flex; align-items:center; gap:8px; color:#42536a; font-size:14px}
.acc-item .acc-list{color:#1a2a3a; display:grid; gap:8px; font-size:15px}
.acc-item .acc-list div{background:rgba(31,106,165,.06); border:1px solid rgba(31,106,165,.12); padding:8px 10px; border-radius:10px}
.acc-item strong{color:var(--accent, var(--gold))}
.acc-item:hover{transform:translateY(-2px)}
.acc-item.acc-active{flex:3 1 0%}
.acc-item.acc-active .acc-overlay{opacity:1; transform:translateY(0)}
.acc-item.acc-active .acc-title{font-size:26px}
.acc-item.acc-active .acc-meta,.acc-item.acc-active .acc-list{opacity:1}

/* Retail: reset custom tuning */
.acc-item[aria-label="المعارض"] .acc-bg{background-position:center; filter:grayscale(10%) contrast(1) opacity(.96)}
.acc-item[aria-label="المعارض"] .acc-bg::after{content:none}

/* More square button */
.more-btn{display:none}
.acc-item .acc-title, .acc-item .acc-meta, .acc-item .acc-list{filter:contrast(1.08)}
.elements-container{display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between; width:100%; max-width:100%}
.element-card{background:#fff; border:1px solid #e6ebf2; border-radius:10px; box-shadow:0 4px 12px rgba(0,0,0,.08); overflow:hidden; width:100%; display:flex; flex-direction:column; text-align:right}
.card-image-wrapper{position:relative; height:260px; overflow:hidden}
.card-image{width:100%; height:100%; object-fit:cover}
.card-title{font-size:1.3em; font-weight:800; color:#1f6aa5; margin:0 0 10px; text-align:center; padding-bottom:10px; border-bottom:1px solid #eee}
.card-title.overlay{position:absolute; inset:auto 0 0 0; background:rgba(0,0,0,.6); color:#fff; border:none; padding:8px 0}
.card-title.no-border{border:none}
.card-content{padding:15px; flex-grow:1}
.card-desc{text-align:center; font-size:.9em; color:#666}
.feature-list{list-style:none; margin:10px 0; padding:0}
.feature-list li{position:relative; padding-right:20px; margin-bottom:8px; font-size:.95em; color:#555}
.feature-list li::before{content:'•'; color:#b3853b; font-weight:700; position:absolute; right:0; top:0}
.more-link{display:block; text-align:center; color:#b3853b; font-weight:700; text-decoration:none; margin-top:15px; padding:6px 0}
.more-link.filled{background:#b3853b; color:#fff; border-radius:6px}

/* Full-width grid sizing */
@media (min-width: 1100px){
  .element-card{flex:1 1 calc(25% - 20px)}
}
@media (max-width: 1099px) and (min-width: 700px){
  .element-card{flex:1 1 calc(50% - 20px)}
}
@media (max-width: 699px){
  .element-card{flex:1 1 100%}
}

/* bottom white card under image */
.acc-item .acc-overlay{position:absolute; left:14px; right:14px; bottom:14px; height:var(--card-h); padding:16px 18px; background:rgba(240,243,247,.92); border-radius:12px; box-shadow:0 12px 34px rgba(0,0,0,.12); display:grid; gap:12px; opacity:0; transform:translateY(8px); transition:opacity .45s ease, transform .45s ease}
.acc-item.acc-active .acc-overlay{opacity:1; transform:translateY(0)}
/* big, clear text */
.acc-item .acc-meta{display:flex; align-items:center; gap:12px; color:#101820; font-size:21px}
.acc-item .acc-list{color:#101820; display:grid; gap:12px; font-size:20px}
.acc-item .acc-list div{background:#ffffff; border:1px solid rgba(0,0,0,.06); padding:12px 14px; border-radius:10px}

/* tasteful icons per item */
.acc-item[aria-label="المكاتب"] .acc-meta::before{content:"🏢"; font-size:22px}
.acc-item[aria-label="المعارض"] .acc-meta::before{content:"🛍️"; font-size:22px}
.acc-item[aria-label="مواقف السيارات"] .acc-meta::before{content:"🅿️"; font-size:22px}


@media (max-width: 900px){
  .img-accordion{flex-direction:column; height:auto}
  .acc-item{min-height:220px}
}
.carousel{position:relative}
.slides{display:grid}
.slide{grid-area:1/1; opacity:0; transform:scale(1.02); transition:opacity .7s ease, transform .7s ease; position:relative}
.slide.active{opacity:1; transform:scale(1)}
.slide img{border-radius:0; box-shadow:none; width:100%; height:100vh; object-fit:cover; filter:contrast(1.06) brightness(1.03) saturate(1.08); backface-visibility:hidden; transform:translateZ(0)}
/* Unified tinted overlay across all slides */
.slide::before{content:""; position:absolute; inset:0; background:none; pointer-events:none}
/* Soft vignette at edges to focus text */
.slide::after{content:""; position:absolute; inset:0; background:none; pointer-events:none}
.slide-caption{position:absolute; left:50%; transform:translateX(-50%); bottom:12%; width:min(860px, 80%); text-align:center; background:rgba(15,34,51,.18); color:#fff; padding:18px 22px; border-radius:16px; border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(6px)}
.search-overlay{position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; z-index:100; opacity:0; visibility:hidden; transition:opacity .35s ease, backdrop-filter .35s ease; backdrop-filter:blur(2px)}
.search-overlay.open{opacity:1; visibility:visible}
.search-dialog{width:min(900px,92%); position:relative; transform:translateY(16px) scale(.98); opacity:0; transition:transform .35s ease, opacity .35s ease}
.search-overlay.open .search-dialog{transform:translateY(0) scale(1); opacity:1}
.search-input-lg{width:100%; padding:18px 24px; font-size:24px; border:0; border-radius:999px; box-shadow:0 8px 30px rgba(0,0,0,.2); font-family:"Tajawal",system-ui,Arial; color:#222}
.search-input-lg::placeholder{color:#9aa3ab}
.search-close{position:absolute; left:12px; top:50%; transform:translateY(-50%); background:transparent; border:0; font-size:22px; color:#666; cursor:pointer}
.search-results{margin-top:14px; background:#fff; border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.15); max-height:300px; overflow:auto}
.search-results .result{padding:12px 16px; border-bottom:1px solid #f0f2f5; cursor:pointer}
.search-results .result:last-child{border-bottom:0}
.search-results .result strong{background:linear-gradient(90deg,#fff6, #fff0), #ffecb5; background-blend-mode:multiply; padding:0 2px}
.carousel button{position:absolute; transform:none; background:#fff; color:var(--blue); border:2px solid var(--blue); box-shadow:0 6px 16px rgba(0,0,0,.18); width:64px; height:64px; border-radius:50%; font-size:28px}
.carousel .next{left:calc(50% - 92px); right:auto; bottom:18px; display:none}
.carousel .prev{left:calc(50% + 28px); right:auto; bottom:18px; display:none}
.carousel .dots{position:absolute; left:50%; transform:translateX(-50%); bottom:8px; display:flex; gap:10px}
.carousel .dot{width:12px; height:12px; border-radius:50%; background:#fff; border:0; opacity:.95; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease}
.carousel .dot:hover{box-shadow:0 0 0 2px var(--blue)}
.carousel .dot.active{background:var(--blue); transform:scale(1.2); box-shadow:0 0 0 4px rgba(31,106,165,.18)}

/* هيرو — عرض حديث */
#hero .hero-carousel--showcase:not(.hero-carousel--single) .prev,
#hero .hero-carousel--showcase:not(.hero-carousel--single) .next{
  display:flex;
  align-items:center;
  justify-content:center;
  top:50%;
  bottom:auto;
  transform:translateY(-50%);
  width:52px;
  height:52px;
  font-size:26px;
  z-index:15;
  background:rgba(255,255,255,.92);
  color:var(--blue);
  border:2px solid rgba(255,255,255,.6);
  backdrop-filter:blur(8px);
  transition:transform .25s ease, background .25s ease, box-shadow .25s ease;
}
#hero .hero-carousel--showcase:not(.hero-carousel--single) .prev:hover,
#hero .hero-carousel--showcase:not(.hero-carousel--single) .next:hover{
  transform:translateY(-50%) scale(1.06);
  background:#fff;
  box-shadow:0 12px 28px rgba(0,0,0,.2);
}
#hero .hero-carousel--showcase:not(.hero-carousel--single) .prev{right:20px; left:auto}
#hero .hero-carousel--showcase:not(.hero-carousel--single) .next{left:20px; right:auto}
#hero .hero-carousel--showcase:not(.hero-carousel--single) .dots{
  bottom:18px;
  z-index:14;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(15,34,51,.25);
  backdrop-filter:blur(8px);
}
#hero .hero-carousel--showcase .dot{
  width:10px;
  height:10px;
  background:rgba(255,255,255,.55);
  transition:transform .3s ease, background .3s ease, width .3s ease;
}
#hero .hero-carousel--showcase .dot.active{
  width:28px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--gold), #fff);
  transform:scale(1);
  box-shadow:0 0 16px rgba(255,255,255,.35);
}

/* Motion like modern sites: Ken Burns and caption reveal */
@keyframes kenburns {
  0% { transform:scale(1.08) translateZ(0) }
  100% { transform:scale(1) translateZ(0) }
}
@keyframes fadeUp {
  0% { opacity:0; transform:translate(-50%, 18px) }
  100% { opacity:1; transform:translate(-50%, 0) }
}
.slide.active img{animation:kenburns 8s ease-out both}
.slide.active .hero-caption{animation:fadeUp .8s ease-out both}

@media (prefers-reduced-motion: reduce){
  .slide, .slide img, .hero-caption { transition:none !important; animation:none !important }
}

/* Center and enlarge slide CTA button inside the caption frame */
.slide-caption .cta{justify-content:center; margin-top:14px}
.slide-caption .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-size:18px; padding:12px 22px; border-radius:999px; border:2px solid rgba(255,255,255,.8); background:rgba(255,255,255,.12); color:#fff}
.slide-caption .btn:hover{background:rgba(255,255,255,.18)}

/* ===== Auth Sidebar (global) ===== */
.auth-toggle{background:transparent; border:0; cursor:pointer; color:#1b355b; font-weight:800; font-size:19px; font-family:"Tajawal","Cairo",system-ui,Arial,sans-serif}
.menu .auth-toggle{
  display:inline-flex !important;
  align-items:center;
  gap:8px;
  flex-shrink:0;
  white-space:nowrap;
  padding:5px 14px 5px 6px;
  border-radius:999px;
  border:1px solid rgba(160,135,76,.35);
  background:linear-gradient(180deg,#fffdf8 0%, #f7f1e6 100%);
  color:#1b355b !important;
  font-size:14px;
  font-weight:700;
  letter-spacing:.01em;
  line-height:1;
  box-shadow:none;
  transition:border-color .2s ease, background .2s ease, color .2s ease;
  visibility:visible;
  opacity:1;
}
.menu .auth-toggle:hover{
  background:linear-gradient(180deg,#fff 0%, #f3ead8 100%);
  border-color:#a0874c;
  color:#1b355b !important;
  transform:none;
  box-shadow:none;
}
.menu .auth-toggle__icon{
  width:24px;
  height:24px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(160,135,76,.14);
  flex-shrink:0;
}
.menu .auth-toggle i{
  font-size:11px;
  line-height:1;
  color:#7a5a2a;
}
.menu .auth-toggle:hover i{color:#1b355b}
.site-header .menu .auth-toggle{
  font-size:14px;
  color:#1b355b !important;
}
.site-header .menu .auth-toggle:hover{color:#1b355b !important}
html.is-logged-in .auth-toggle{display:none !important}
.admin-hub-link{
  display:none;
  align-items:center;
  gap:8px;
  flex-shrink:0;
  padding:5px 16px 5px 6px;
  border-radius:999px;
  border:1px solid rgba(176,140,58,.45);
  color:#1b355b !important;
  background:linear-gradient(180deg,#fff8e6 0%, #f0d78a 52%, #c9a24a 100%);
  font-weight:800;
  font-size:14px;
  font-family:"Tajawal","Cairo",system-ui,Arial,sans-serif;
  text-decoration:none;
  white-space:nowrap;
  box-shadow:0 8px 22px rgba(160,120,40,.26), inset 0 1px 0 rgba(255,255,255,.7);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.admin-hub-link__icon{
  width:26px;
  height:26px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,#1b355b,#10233b);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15);
}
.admin-hub-link i{font-size:11px; color:#f6e7b5; opacity:1}
.admin-hub-link:hover{
  color:#10233b !important;
  filter:brightness(1.04);
  transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(160,120,40,.32), inset 0 1px 0 rgba(255,255,255,.8);
}
.admin-hub-link--enter{
  background:#1b355b;
  color:#fff !important;
  border:0;
  padding:6px 16px 6px 8px;
  gap:10px;
  box-shadow:0 12px 26px rgba(27,53,91,.28);
}
.enter-mark{
  width:38px;
  height:38px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:linear-gradient(160deg,#f6e7c3,#c39255 46%,#8d6230);
  color:#1b2430;
  font-size:17px;
  box-shadow:0 8px 16px rgba(163,118,63,.45), inset 0 1px 0 rgba(255,255,255,.7);
  animation:enter-float 2.8s ease-in-out infinite;
}
.admin-hub-link--enter:hover{color:#fff !important; filter:none; transform:translateY(-2px)}
.admin-hub-link--enter:hover .enter-mark{transform:translateY(-2px) scale(1.05)}
@keyframes enter-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}
@media (prefers-reduced-motion: reduce){
  .enter-mark{animation:none}
}
html.is-logged-in .admin-hub-link{display:inline-flex !important}
.header-actions .admin-hub-link{margin-inline-end:4px}
.auth-toggle-icon{
  width:40px;
  height:40px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  font-size:20px;
  flex-shrink:0;
}
.auth-toggle-icon:hover{background:rgba(27,53,91,.08)}
.auth-overlay{position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1090; display:none}
.auth-overlay.open{display:block}
.auth-sidebar{position:fixed; top:0; right:-400px; width:360px; max-width:86vw; height:100%; background:#fff; box-shadow:-10px 0 30px rgba(0,0,0,.15); z-index:1101; padding:24px; overflow:auto; transition:right .3s ease}
.auth-sidebar.open{right:0}
.auth-sidebar h2{margin:0 0 12px; color:#1b355b; font-weight:800}
.auth-sidebar .auth-close{background:transparent; border:0; font-size:22px; cursor:pointer; position:absolute; top:10px; left:10px; color:#1b355b}
.auth-sidebar .input-group{margin:12px 0}
.auth-sidebar label{display:block; margin-bottom:6px; font-weight:700; color:#1b355b}
.auth-sidebar input{width:100%; padding:10px 12px; border:1px solid #ddd; border-radius:8px; font-family:inherit}
.auth-sidebar .submit-btn{background:#1b355b; color:#fff; border:0; padding:12px 16px; border-radius:8px; width:100%; font-weight:800; cursor:pointer}
.auth-sidebar .switch-mode{margin-top:10px}
.auth-sidebar .switch-mode a{color:#1b355b; text-decoration:none; font-weight:800}
.auth-sidebar .error{color:#c0392b; font-weight:700; min-height:22px}
.signup-only{display:none}
.auth-sidebar.is-signup .signup-only{display:block}

/* ===== Auth Dashboard ===== */
.auth-dashboard{position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:1102; background:rgba(0,0,0,.45)}
.auth-dashboard.open{display:flex}
.auth-dashboard .panel{background:#fff; width:min(720px,92%); border-radius:16px; padding:22px 24px; box-shadow:0 12px 36px rgba(0,0,0,.2)}
.auth-dashboard .panel-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px}
.auth-dashboard .panel-header h3{margin:0; color:#1b355b; font-weight:800}
.auth-dashboard .dash-close{background:transparent; border:0; font-size:22px; cursor:pointer; color:#1b355b}
.auth-dashboard .tiles{display:grid; grid-template-columns:repeat(2, minmax(160px,1fr)); gap:16px}
.auth-dashboard .tile{background:#f5f7fb; border:1px solid #e2e6ef; border-radius:12px; padding:20px; text-align:center; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease}
.auth-dashboard .tile:hover{transform:translateY(-2px); box-shadow:0 10px 20px rgba(0,0,0,.08)}
.auth-dashboard .tile i{font-size:28px; color:#1b355b; margin-bottom:10px; display:block}
.auth-dashboard .tile-title{margin:6px 0 0; color:#1b355b; font-weight:800}

.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.stat{background:var(--card); padding:22px; border-radius:var(--radius); box-shadow:var(--shadow); text-align:center}
.stat .num{display:block; font-size:34px; font-weight:800; color:var(--gold)}
.stat span:last-child{color:var(--muted)}

.nearby-grid{display:grid; grid-template-columns:1fr .9fr; gap:20px; align-items:center}
.nearby-map{border-radius:var(--radius); box-shadow:var(--shadow)}
.nearby-list{display:grid; gap:10px}
.chip{display:inline-block; background:#fff; border:1px solid #e3e8ee; padding:10px 12px; border-radius:999px; width:fit-content; box-shadow:0 2px 8px rgba(0,0,0,.04)}

.clients-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:16px; align-items:center}
.clients-grid img{width:100%; height:60px; object-fit:contain; filter:grayscale(100%); opacity:.8}

.contact-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:18px}
.contact-card{display:flex; gap:12px; padding:14px; background:var(--card); border:1px solid #e3e8ee; border-radius:12px; color:inherit}
.contact-icon{font-size:24px}
.map-embed{margin-top:14px; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}

.faq{display:grid; gap:10px}
.faq details{background:#fff; border:1px solid #e3e8ee; border-radius:12px; padding:12px}
.faq summary{cursor:pointer; font-weight:600}

.contact-form{background:var(--card); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow)}
.contact-form .row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.contact-form input, .contact-form textarea{width:100%; padding:12px 14px; border:1px solid #e3e8ee; border-radius:10px; font-size:14px}
.contact-form input:focus, .contact-form textarea:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(179,133,59,.15)}
.form-status{margin-top:10px; min-height:22px}

.site-footer{padding:32px 0; background:#0f2233; color:#e6edf5}
.footer-grid{display:flex; gap:30px; align-items:center; justify-content:space-between}
.footer-mark{height:72px; opacity:.95; filter:brightness(0) invert(1)}
.site-footer nav{display:flex; gap:16px; margin-right:auto}
.site-footer a{color:#c9d6e3}

/* الفوتر السفلي (fat-footer) */
.site-footer.fat-footer{
  background:#1b355b;
  color:#fff;
  margin-top:48px;
  padding:48px 0 0;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}
#contact.contact-block + .site-footer.fat-footer{
  margin-top:0;
}
.site-footer.fat-footer .container{
  max-width:1200px;
  width:min(1200px,92%);
  margin-inline:auto;
  padding:0 20px;
  background:transparent;
  border-radius:0;
}
.site-footer.fat-footer .footer-widgets{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px;
}
.site-footer.fat-footer .fw-col h4{
  margin:0 0 14px;
  color:#7a5a2a;
  font-weight:800;
  font-size:18px;
}
.site-footer.fat-footer .fw-col ul{
  list-style:none;
  margin:0;
  padding:0;
}
.site-footer.fat-footer .fw-col li{margin:8px 0}
.site-footer.fat-footer .fw-col a{
  color:#e6e9ef;
  text-decoration:none;
  transition:color .2s;
}
.site-footer.fat-footer .fw-col a:hover{
  color:#fff;
  text-decoration:underline;
}
.site-footer.fat-footer .footer-bottom{
  margin-top:32px;
  padding:18px 0 28px;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.site-footer.fat-footer .brand-copy p{margin:0; color:#e6e9ef}
.site-footer.fat-footer .social{
  display:flex;
  align-items:center;
  gap:14px;
}
.site-footer.fat-footer .social a{
  color:#e6e9ef;
  font-size:20px;
}
.site-footer.fat-footer .social a:hover{color:#fff}
@media (max-width:900px){
  .site-footer.fat-footer .footer-widgets{grid-template-columns:repeat(2,1fr)}
  .site-footer.fat-footer .footer-bottom{flex-direction:column; align-items:flex-start}
}
@media (max-width:560px){
  .site-footer.fat-footer .footer-widgets{grid-template-columns:1fr}
}

@media (max-width: 900px){
  .hero-caption h1{font-size:34px}
  .cta{justify-content:center}
  .grid-3,.services-grid{grid-template-columns:1fr 1fr}
  .about-grid,.nearby-grid{grid-template-columns:1fr}
  .slide img{height:80vh}
}
/* English layout adjustments */
.lang-en #about .about-card{
  border-right:none;
  border-left:5px solid #c39c63;
}
.lang-en #about .section-title::after,
.lang-en #features .card-details li::before{
  right:auto;
  left:0;
}
.lang-en #features .card-details li{
  padding-right:0;
  padding-left:20px;
}
.lang-en #features .section-header h2{
  text-align:left;
}
.lang-en #features .view-services-button{
  left:auto;
  right:50px;
}
[dir="ltr"] .bs-view-all i,
[dir="ltr"] .bs-card__arrow i{
  transform:scaleX(-1);
}
.lang-en #nearby .place-item{
  text-align:left;
}
.lang-en #nearby .place-item .duration{
  margin-inline-start:0;
  margin-inline-end:8px;
}

/* English LTR — global mirror */
.lang-en .site-header .brand{
  right:auto;
  left:clamp(2px, 0.6vw, 8px);
}
.lang-en .site-header .container.nav{
  padding:14px 20px 16px clamp(68px, 9vw, 84px);
}
.lang-en .menu .drop-menu{
  right:auto;
  left:0;
}
.lang-en .auth-sidebar{
  right:auto;
  left:-400px;
  box-shadow:10px 0 30px rgba(0,0,0,.15);
}
.lang-en .auth-sidebar.open{
  left:0;
}
.lang-en .auth-sidebar .auth-close{
  left:auto;
  right:10px;
}
.lang-en .features-list li,
.lang-en .feature-list li{
  padding-right:0;
  padding-left:20px;
}
.lang-en .features-list li::before,
.lang-en .feature-list li::before{
  right:auto;
  left:0;
}
.lang-en .be-back-home{
  left:auto;
  right:24px;
  flex-direction:row-reverse;
  padding:10px 14px 10px 18px;
}
.lang-en .be-back-home__icon i.fa-arrow-right{
  transform:scaleX(-1);
}
.lang-en .services-page .section-title,
.lang-en .events-section .section-title,
.lang-en .building-elements-tabs .section-title,
.lang-en .page-header h1{
  text-align:left;
}
.building-elements-tabs .section-title{
  color:#1b355b; font-size:2rem; font-weight:800; text-align:start;
  border-bottom:3px solid #A0874C; padding-bottom:10px; margin:24px 0 16px;
}
.building-elements-tabs .tabs-list{
  display:flex; flex-wrap:wrap; gap:10px; margin:10px 0 6px;
}
.building-elements-tabs .tab{
  background:transparent; border:0; color:#A0874C; font-weight:700;
  padding:10px 14px; cursor:pointer; font-size:1rem; font-family:inherit;
}
.building-elements-tabs .tab.active{
  color:#1b355b; border-bottom:3px solid #1b355b;
}
body.building-elements-page{ background:#f4f4f9; }
.lang-en .about-pointer{
  right:auto;
  left:0;
}
.lang-en .site-footer nav{
  margin-right:0;
  margin-left:auto;
}
@media (max-width: 600px){
  .lang-en .site-header .container.nav{
    padding-right:12px;
    padding-left:clamp(60px, 16vw, 72px);
  }
  .lang-en .site-header .brand{
    right:auto;
    left:2px;
  }
  .lang-en .be-back-home{
    right:16px;
    left:auto;
  }
}

@media (max-width: 600px){
  .brand img{height:56px}
  .lang-toggle{min-width:46px; padding:0 10px; font-size:14px}
  .admin-hub-link{padding:6px 10px 6px 6px; font-size:13px}
  .admin-hub-link__text{display:none}
  .admin-hub-link i{font-size:12px}
  .site-header .container.nav{
    padding-right:clamp(60px, 16vw, 72px);
    padding-left:12px;
  }
  .site-header .brand{
    right:2px;
    width:44px;
    height:44px;
  }
  .site-header .menu a,
  .site-header .menu .drop-toggle,
  .site-header .menu .btn,
  .menu a,
  .menu .drop-toggle{font-size:17px}
  .search.open .search-input{width:160px}
  .menu{position:fixed; inset:60px 0 auto 0; background:#fff; border-bottom:1px solid #eee; padding:12px 16px; display:none; flex-direction:column; gap:8px; max-width:none}
  .menu.open{display:flex}
  .menu.open .auth-toggle{display:inline-flex !important; width:auto; justify-content:center; align-self:flex-start}
  html.is-logged-in .menu.open .auth-toggle{display:none !important}
  .menu .drop-menu{position:static; box-shadow:none; border:none; padding:4px 0}
  .menu .has-dropdown.open .drop-menu{display:block}
  .nav-toggle{display:block}
  .grid-3,.services-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr 1fr}
  .contact-form .row{grid-template-columns:1fr}
  .clients-grid{grid-template-columns:1fr 1fr 1fr}
  .contact-cards{grid-template-columns:1fr}
}

/* About cards subtle gray on white */
.about-steps .a-card{background:#f6f7fb; border:1px solid #e9edf3}

/* Features accordion hover scaling: hovered shrinks, others slightly grow */
.img-accordion.hovering .acc-item{transform:scale(1.02); transition:transform .25s ease}
.img-accordion.hovering .acc-item.is-on{transform:scale(.96)}

/* Striped divider (Misk-style) - simple uniform stripes */
.divider-misk-style{--stripe-color:#ccc; position:absolute; display:block; width:420px; height:26px; border-radius:8px; left:0; top:-14px; background-image:repeating-linear-gradient(-55deg, var(--stripe-color) 0 5px, transparent 5px 10px); background-size:100% 100%; opacity:.95}
.divider-misk-style.brown{--stripe-color:#A0522D}
.divider-misk-style.blue{--stripe-color:#1f6aa5}
.divider-misk-style.black{--stripe-color:#000}
.divider-misk-style.white{--stripe-color:#ffffff}
.divider-left{left:0; right:auto}
.divider-right{right:0; left:auto}

/* Ensure sections can host dividers */
#features{position:relative}
#services{position:relative}
#features .divider-misk-style.white{width:520px; height:48px; background-image:repeating-linear-gradient(-55deg, #ffffff 0 10px, transparent 10px 22px); background-size:100% 100%; background-repeat:repeat}

/* Revert features cards to baseline */
.acc-item{flex:1 1 0%; position:relative; border-radius:16px; overflow:hidden; cursor:pointer; transition:flex .6s cubic-bezier(.22,1,.36,1), transform .3s ease; border:1px solid #e6ebf2; background:#f7f9fc}
.acc-item .acc-bg{position:absolute; inset:0; background-size:cover; background-position:center; filter:grayscale(10%) contrast(1) opacity(.96); transition:transform .35s ease}
.acc-item.split{display:grid; grid-template-rows:6fr 1fr}
.acc-item.split .acc-bg{grid-row:1/2; position:relative}
.acc-item.split .acc-overlay{grid-row:2/3; position:relative; left:auto; right:auto; bottom:auto; height:auto; margin:14px; border-radius:12px; text-align:left}
.acc-item.split .acc-title{position:static; display:inline-block; margin:0 0 8px 0; transform:none; top:auto; text-align:left}
.acc-item.split .acc-meta{font-size:18px; justify-content:flex-start}
.acc-item.split .acc-list{font-size:16px; justify-items:start}
.acc-item.split .acc-overlay > *{margin-inline:0}
.acc-item.split .acc-bg{background-position:center 55%}
.acc-item:hover .acc-bg{transform:none}
.img-accordion.cards .acc-title{position:absolute; left:0; right:0; bottom:0; transform:none; text-align:center; background:rgba(0,0,0,.6); color:#fff; padding:8px 12px; border:0; border-radius:0; font-weight:800; font-size:20px; z-index:2}
.acc-item:hover .acc-title{opacity:1}
.acc-item[aria-label="المكاتب"] .acc-title{display:block}
.acc-item[aria-label="ممرات واسعة"] .acc-title{color:#000; text-shadow:none}
.acc-item .acc-overlay{position:absolute; left:14px; right:14px; bottom:14px; padding:16px 18px; background:rgba(240,243,247,.88); border-radius:12px; box-shadow:0 12px 34px rgba(0,0,0,.12); display:grid; gap:12px; text-align:center; opacity:1; transform:none; transition:opacity .35s ease, transform .35s ease; animation:overlaySlide .6s ease-out both}
.acc-item:hover .acc-overlay{opacity:0; transform:translateY(8px)}
.acc-item .acc-overlay > *{margin-inline:auto}

@keyframes overlaySlide{
  0%{opacity:.95; transform:translate3d(16px,0,0)}
  100%{opacity:1; transform:translate3d(0,0,0)}
}

.acc-item[aria-label="المكاتب"] .acc-bg::before{content:none}
.acc-item .acc-meta{display:flex; align-items:center; justify-content:center; gap:10px; color:#101820; font-size:22px}
.acc-item .acc-list{color:#101820; display:grid; gap:10px; justify-items:center; font-size:20px}
.img-accordion.cards .acc-list{text-align:right}
.img-accordion.cards .acc-list div{background:transparent; border:0; padding:6px 20px 6px 8px; border-radius:0; color:#555}
.img-accordion.cards .acc-list div::before{content:'\2022'; position:absolute; right:0; top:0; color:#b3853b; font-weight:700; font-size:1.2em; line-height:1}
.acc-item[aria-label="المكاتب"] .acc-meta::before,
.acc-item[aria-label="المعارض"] .acc-meta::before,
.acc-item[aria-label="مواقف السيارات"] .acc-meta::before{content:none}
.acc-item[aria-label="المكاتب"] .acc-title{display:block; color:#101820; text-shadow:none; border-color:#cfd6df}
.acc-item[aria-label="المعارض"] .acc-title,
.acc-item[aria-label="مواقف السيارات"] .acc-title{left:50%; transform:translateX(-50%); right:auto; color:#101820; text-shadow:none; border-color:#cfd6df}
.img-accordion .acc-item.acc-active{flex:1 1 0%}
.acc-item[aria-label="ممرات واسعة"] .acc-title{white-space:nowrap}
.acc-item[aria-label="مواقف السيارات"] .acc-title{white-space:nowrap}

/* Global: ensure the building elements tabs bar uses Tajawal across all pages */
.events-section,
.events-section *{
  font-family:"Tajawal","Cairo",system-ui,Arial,sans-serif;
}

/* زر العودة — عناصر المبنى (شفاف، قابل للسحب، فوق الفوتر) */
.be-back-home{
  position:fixed;
  bottom:24px;
  left:24px;
  z-index:900;
  display:inline-flex;
  align-items:center;
  gap:12px;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  color:#1b355b;
  padding:10px 18px 10px 14px;
  border:1px solid rgba(27,53,91,.14);
  border-radius:12px;
  text-decoration:none;
  font-weight:700;
  font-size:0.95rem;
  white-space:nowrap;
  box-shadow:0 2px 12px rgba(27,53,91,.1);
  transition:border-color .2s, box-shadow .2s, background .2s;
  font-family:"Tajawal","Cairo",system-ui,Arial,sans-serif;
  cursor:grab;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}
.be-back-home.is-dragging{
  cursor:grabbing;
  background:rgba(255,255,255,.72);
  box-shadow:0 4px 18px rgba(27,53,91,.16);
}
.be-back-home__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:50%;
  background:linear-gradient(135deg, #1b355b 0%, #2a4a75 100%);
  color:#fff;
  font-size:1rem;
  flex-shrink:0;
  box-shadow:0 2px 6px rgba(27,53,91,.25);
  pointer-events:none;
}
.be-back-home__icon i{
  font-size:1.05rem;
  line-height:1;
}
.be-back-home:hover{
  background:rgba(255,255,255,.78);
  border-color:rgba(160,135,76,.45);
  color:#1b355b;
  box-shadow:0 4px 16px rgba(27,53,91,.14);
}
.be-back-home:hover .be-back-home__icon{
  background:linear-gradient(135deg, #A0874C 0%, #c4a86a 100%);
}
@media (max-width:480px){
  .be-back-home{
    padding:8px 14px 8px 10px;
    font-size:0.88rem;
  }
  .be-back-home__icon{
    width:34px;
    height:34px;
  }
}