body{font-family:'Cairo',system-ui,-apple-system,'Segoe UI',sans-serif}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --navy:#08142e;
  --navy2:#0d1e42;
  --gold:#c9a84c;
  --gold2:#e8c97a;
  --white:#ffffff;
  --cream:#faf7f2;
  --cream2:#f0ebe0;
  --text:#1a1428;
  --muted:#6b6475;
  --shadow-card:0 32px 80px rgba(8,20,46,0.14);
  --shadow-nav:0 1px 0 rgba(201,168,76,0.2);
  --nav-bg:rgba(8,20,46,0.97);
  --overlay-bg:rgba(8,20,46,0.98);
  --contact-bg:var(--white);
  --services-bg:var(--cream);
  --projects-bg:var(--cream2);
  --gold-gradient: linear-gradient(135deg, #ffffff 0%, #e8c97a 50%, #c9a84c 100%);
  --metallic-gold: linear-gradient(135deg, #c9a84c 0%, #f6e29d 50%, #c9a84c 100%);
}
/* LIGHT THEME */
html[data-theme="light"]{
  --navy:#1a2744;
  --navy2:#243352;
  --cream:#f5f7fa;
  --cream2:#eef1f6;
  --text:#2c3e50;
  --muted:#7f8c8d;
  --shadow-card:0 32px 80px rgba(0,0,0,0.08);
  --shadow-nav:0 1px 0 rgba(201,168,76,0.3);
  --nav-bg:rgba(26,39,68,0.95);
  --overlay-bg:rgba(26,39,68,0.97);
  --contact-bg:#ffffff;
  --services-bg:#f5f7fa;
  --projects-bg:#eef1f6;
  --gold-gradient: linear-gradient(135deg, #1a2744 0%, #c9a84c 50%, #9e7d2a 100%);
  --metallic-gold: linear-gradient(135deg, #9e7d2a 0%, #e8c97a 50%, #9e7d2a 100%);
}
/* RTL/LTR ADAPTATIONS */
html[dir="ltr"] .nav-links a::after{right:auto;left:0}
html[dir="ltr"] .nav-links a:hover::after{width:100%}
html[dir="ltr"] .num-item{border-right:none;border-left:1px solid rgba(201,168,76,0.1)}
html[dir="ltr"] .num-item:last-child{border-left:none}
html[dir="ltr"] .footer-col ul li a:hover{padding-right:0;padding-left:4px}
html[dir="ltr"] .srv-card::after{transform-origin:left;transform:scaleX(0)}
html[dir="ltr"] .srv-card:hover::after{transform-origin:right}
html[dir="ltr"] .hero-divider{background:linear-gradient(90deg,transparent,var(--gold))}
html[dir="ltr"] .status-dot{margin-left:0;margin-right:4px}
html[dir="ltr"] .phil-float-badge{right:auto;left:-20px}

/* GROUP 3: Parallax hero bg text */
.hero-bg-text{
  will-change:transform;
  transition:none;
}

html{scroll-behavior:smooth}

body{
  font-family:'Cairo',sans-serif;
  background:var(--cream);
  color:var(--text);
  position:relative;
}

/* Organic Noise/Grain Texture Overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* CUSTOM CURSOR — hidden on touch devices */
@media(hover:hover) and (pointer:fine){
  body{cursor:none}
  #cursor{
    position:fixed;width:12px;height:12px;
    background:var(--gold);border-radius:50%;
    pointer-events:none;z-index:9999;
    transform:translate(-50%,-50%);
    transition:transform 0.1s,width 0.3s,height 0.3s,background 0.3s;
  }
  #cursor-ring{
    position:fixed;width:40px;height:40px;
    border:1.5px solid var(--gold);border-radius:50%;
    pointer-events:none;z-index:9998;
    transform:translate(-50%,-50%);
    background: radial-gradient(circle, rgba(201, 168, 76, 0.08) 0%, transparent 80%);
    transition:transform 0.15s ease-out,width 0.4s,height 0.4s,opacity 0.3s,background 0.3s,border-color 0.3s;
  }
  body:hover #cursor-ring{opacity:1}
  .cursor-hover-target{cursor:none}
}
@media(hover:none),(pointer:coarse){
  #cursor,#cursor-ring{display:none!important}
}

/* REDUCED MOTION */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:0.01ms!important;
    scroll-behavior:auto!important;
  }
}

*:focus-visible{
  outline:2px solid var(--gold)!important;
  outline-offset:3px!important;
}
:focus:not(:focus-visible){
  outline:none!important;
}

/* LOADER */
#loader{
  position:fixed;inset:0;z-index:10000;
  background:var(--navy);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  transition:opacity 0.8s ease,visibility 0.8s ease;
}
#loader.hide{opacity:0;visibility:hidden;pointer-events:none}
.loader-logo{
  font-size:56px;font-weight:900;color:var(--gold);
  letter-spacing:-2px;
  animation:pulseGold 1.5s ease-in-out infinite;
}
.loader-line{
  width:180px;height:1px;
  background:rgba(201,168,76,0.2);
  margin:24px auto;
  position:relative;overflow:hidden;
}
.loader-line::after{
  content:'';position:absolute;
  top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  animation:scanLine 1.2s ease-in-out infinite;
}
.loader-text{
  font-size:13px;color:rgba(255,255,255,0.4);
  letter-spacing:4px;text-transform:uppercase;
}

@keyframes pulseGold{
  0%,100%{opacity:0.7;transform:scale(0.97)}
  50%{opacity:1;transform:scale(1)}
}
@keyframes scanLine{
  to{left:100%}
}

/* SKIP NAV */
.skip-nav{
  position:fixed;top:-100%;left:50%;transform:translateX(-50%);
  background:var(--gold);color:var(--navy);
  padding:12px 24px;border-radius:4px;
  font-weight:700;font-size:14px;z-index:10001;
  text-decoration:none;transition:top 0.3s;
  box-shadow:0 4px 12px rgba(201,168,76,0.4);
}
.skip-nav:focus{top:12px}

/* NAVBAR — z-index hierarchy: overlay(1001) > hamburger(1002) > nav(1000) > hero-cards(z:3) */
#navbar{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:0 6%;height:80px;
  display:flex;align-items:center;justify-content:space-between;
  background:transparent;
  transition:background 0.5s,box-shadow 0.5s,height 0.5s;
}
#navbar.scrolled{
  background:var(--nav-bg);
  backdrop-filter:blur(20px);
  box-shadow:var(--shadow-nav);
  height:64px;
}

/* FIX: nav container to prevent overflow and overlap */
.nav-center{
  display:flex;align-items:center;gap:24px;
  flex:1;justify-content:center;
}
.nav-logo{display:flex;align-items:center;gap:14px;text-decoration:none;flex-shrink:0}
.nav-emblem{
  width:48px;height:48px;
  border:1.5px solid var(--gold);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.nav-emblem::before{
  content:'';position:absolute;inset:3px;
  border-radius:50%;
  background:radial-gradient(circle at 40% 40%,rgba(201,168,76,0.2),transparent);
}
.nav-emblem span{
  font-size:20px;font-weight:900;color:var(--gold);
  position:relative;z-index:1;
}
.nav-brand{color:var(--white);line-height:1.2}
.nav-brand-ar{font-size:15px;font-weight:700}
.nav-brand-en{font-size:10px;font-weight:300;color:rgba(255,255,255,0.45);letter-spacing:2px;text-transform:uppercase}

/* FIX: nav-links inside center container, with flex-shrink */
.nav-links{display:flex;gap:32px;list-style:none;flex-shrink:1;white-space:nowrap}
.nav-links a{
  color:rgba(255,255,255,0.65);
  text-decoration:none;font-size:13px;font-weight:500;
  letter-spacing:0.5px;
  position:relative;padding-bottom:2px;
  transition:color 0.3s;
}
.nav-links a::after{
  content:'';position:absolute;
  bottom:0;right:0;width:0;height:1px;
  background:var(--gold);
  transition:width 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
}
.nav-links a:hover{color:var(--gold2)}
.nav-links a:hover::after{width:100%}
.nav-links a:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:2px}

.nav-cta{
  background:transparent;
  border:1px solid var(--gold);
  color:var(--gold);padding:9px 22px;
  border-radius:2px;font-size:13px;
  font-family:'Cairo',sans-serif;
  font-weight:600;cursor:pointer;
  text-decoration:none;
  transition:background 0.3s,color 0.3s;
}
.nav-cta:hover{background:var(--gold);color:var(--navy)}
.nav-cta:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

/* HAMBURGER — shows on tablet+ not just mobile */
.hamburger{
  display:none;
  flex-direction:column;gap:5px;
  background:none;border:none;padding:8px;
  cursor:pointer;z-index:1003; /* above overlay */
  flex-shrink:0;
}
.hamburger span{
  display:block;width:24px;height:2px;
  background:var(--gold);border-radius:1px;
  transition:transform 0.3s,opacity 0.3s;
}
.hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* MOBILE NAV OVERLAY — z-index between nav and hamburger */
.mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1002;
  background: var(--overlay-bg);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 100px 30px 40px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
}

.mobile-nav-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* Top bar: close + toggles */
.mobile-overlay-topbar {
  position: absolute;
  top: 24px;
  left: 24px;
  right: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: calc(100% - 48px);
  z-index: 1005;
}

.mobile-nav-close {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  color: var(--gold);
  font-size: 28px;
  font-weight: 300;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-nav-close:hover,
.mobile-nav-close:active {
  background: rgba(201, 168, 76, 0.2);
  color: var(--white);
  transform: rotate(90deg) scale(1.05);
  border-color: var(--gold);
}

/* Brand in overlay */
.mobile-overlay-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  opacity: 0;
  transform: translateY(-20px);
  transition: all 0.5s 0.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.mobile-nav-overlay.open .mobile-overlay-brand {
  opacity: 1;
  transform: translateY(0);
}

.mobile-overlay-brand-letter {
  width: 50px;
  height: 50px;
  background: var(--gold-gradient);
  color: var(--navy);
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(201, 168, 76, 0.3);
}

.mobile-overlay-brand-name {
  font-family: 'Cairo', sans-serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.5px;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  text-align: center;
}

/* Nav links inside overlay */
.mobile-overlay-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin: 30px 0;
  width: 100%;
}

.mobile-nav-link {
  font-family: 'Cairo', sans-serif;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--white) !important;
  text-decoration: none;
  position: relative;
  padding: 6px 16px;
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateY(20px);
}
.mobile-nav-overlay.open .mobile-nav-link {
  opacity: 1;
  transform: translateY(0);
}
.mobile-nav-overlay.open .mobile-nav-link:nth-child(1) { transition: all 0.4s 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.mobile-nav-overlay.open .mobile-nav-link:nth-child(2) { transition: all 0.4s 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.mobile-nav-overlay.open .mobile-nav-link:nth-child(3) { transition: all 0.4s 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.mobile-nav-overlay.open .mobile-nav-link:nth-child(4) { transition: all 0.4s 0.35s cubic-bezier(0.16, 1, 0.3, 1); }

.mobile-nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--gold-gradient);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.mobile-nav-link:hover,
.mobile-nav-link:active {
  color: var(--gold) !important;
  transform: scale(1.05);
}
.mobile-nav-link:hover::after {
  width: 40px;
}

/* CTA */
.mobile-overlay-cta {
  font-family: 'Cairo', sans-serif;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  background: var(--gold-gradient);
  padding: 14px 28px;
  border-radius: 8px;
  text-decoration: none;
  text-align: center;
  width: 100%;
  max-width: 280px;
  box-shadow: 0 4px 15px rgba(201, 168, 76, 0.25);
  transition: all 0.3s ease;
  margin-bottom: 24px;
  opacity: 0;
  transform: translateY(20px);
}
.mobile-nav-overlay.open .mobile-overlay-cta {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.4s 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-overlay-cta:hover,
.mobile-overlay-cta:active {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 20px rgba(201, 168, 76, 0.4);
}

/* Contact quick links */
.mobile-overlay-contacts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 24px;
  opacity: 0;
  transform: translateY(20px);
}
.mobile-nav-overlay.open .mobile-overlay-contacts {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.4s 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-contact-link {
  font-family: 'Cairo', sans-serif;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.6) !important;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.mobile-contact-link svg {
  color: var(--gold);
  transition: transform 0.3s ease;
}

.mobile-contact-link:hover,
.mobile-contact-link:active {
  color: var(--white) !important;
  background: rgba(255, 255, 255, 0.04);
}

.mobile-contact-link:hover svg {
  transform: scale(1.15);
}

.mobile-contact-link.whatsapp svg {
  color: #25D366;
}

/* HERO */
.hero{
  min-height:100vh;position:relative;
  display:flex;align-items:center;
  overflow:hidden;
  background:var(--navy);
}

#hero-canvas{
  position:absolute;inset:0;z-index:0;
  opacity:0.6;
}

.hero-bg-text{
  position:absolute;
  bottom:-40px;left:-20px;
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(100px,18vw,260px);
  font-weight:300;
  color:rgba(255,255,255,0.025);
  line-height:1;
  pointer-events:none;
  white-space:nowrap;
  letter-spacing:-8px;
  user-select:none;
}

.hero-inner{
  position:relative;z-index:2;
  padding:0 6%;
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
  padding-top:80px;
}

.hero-kicker{
  display:flex;align-items:center;gap:14px;
  margin-bottom:32px;
  opacity:0;transform:translateY(20px);
  animation:heroIn 0.8s 0.5s ease forwards;
}
.hero-kicker-line{width:40px;height:1px;background:var(--gold)}
.hero-kicker-text{
  font-size:11px;color:var(--gold);
  letter-spacing:4px;text-transform:uppercase;font-weight:600;
}

.hero-h1{
  font-size:clamp(2.4rem,4.5vw,4.2rem);
  font-weight:900;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  line-height:1.1;
  margin-bottom:16px;
  opacity:0;transform:translateY(24px);
  animation:heroIn 0.8s 0.65s ease forwards;
}
.hero-h1 .gold{
  background: var(--metallic-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
.hero-h1 .thin{
  font-weight:300;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:0.85em;
  background: linear-gradient(135deg, #ffffff 0%, #e8c97a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.hero-en-title{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1rem,2vw,1.5rem);
  font-weight:300;
  color:rgba(255,255,255,0.35);
  letter-spacing:3px;
  margin-bottom:28px;
  opacity:0;transform:translateY(24px);
  animation:heroIn 0.8s 0.8s ease forwards;
}

.hero-divider{
  width:60px;height:2px;
  background:linear-gradient(90deg,var(--gold),transparent);
  margin-bottom:28px;
  opacity:0;animation:heroIn 0.8s 0.9s ease forwards;
}

.hero-desc{
  font-size:15px;line-height:2;
  color:rgba(255,255,255,0.55);
  max-width:480px;
  margin-bottom:44px;
  opacity:0;transform:translateY(24px);
  animation:heroIn 0.8s 1s ease forwards;
}

.hero-actions{
  display:flex;gap:16px;flex-wrap:wrap;
  opacity:0;animation:heroIn 0.8s 1.1s ease forwards;
}

.btn-primary{
  background:var(--gold);
  color:var(--navy);
  padding:15px 36px;
  font-family:'Cairo',sans-serif;
  font-weight:700;font-size:14px;
  border:none;border-radius:2px;
  cursor:pointer;text-decoration:none;
  position:relative;overflow:hidden;
  transition:transform 0.3s;
  display:inline-block;
}
.btn-primary::before{
  content:'';position:absolute;
  top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.25),transparent);
  transition:left 0.5s;
}
.btn-primary:hover::before{left:100%}
.btn-primary:hover{transform:translateY(-2px)}
.btn-primary:focus-visible{outline:2px solid var(--white);outline-offset:3px}

.btn-ghost{
  border:1px solid rgba(255,255,255,0.2);
  color:rgba(255,255,255,0.75);
  padding:15px 36px;
  font-family:'Cairo',sans-serif;
  font-weight:500;font-size:14px;
  border-radius:2px;cursor:pointer;
  text-decoration:none;
  display:inline-block;
  transition:border-color 0.3s,color 0.3s,transform 0.3s;
}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold2);transform:translateY(-2px)}
.btn-ghost:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* HERO RIGHT — Floating card stack
   FIX: Repositioned cards to avoid overlapping each other.
   Layout: badge(top-left) | main(top-right) | stat(bottom-left)
   Each card has its own clear zone with no overlap. */
.hero-right{
  position:relative;
  height:520px;
  opacity:0;animation:heroIn 1s 1.2s ease forwards;
  z-index:3; /* below navbar but above canvas */
}

.hero-card{
  position:absolute;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(201,168,76,0.15);
  backdrop-filter:blur(12px);
  border-radius:4px;
  padding:28px;
  transition:transform 0.6s cubic-bezier(0.34,1.56,0.64,1);
}

/* Main card: top-right, primary position */
.hcard-main{
  width:290px;right:0;top:40px;
  border-color:rgba(201,168,76,0.3);
  background:rgba(13,30,66,0.7);
  animation:float1 6s ease-in-out infinite;
  z-index:2;
}

/* Badge card: top-left, clearly separated from main card */
.hcard-badge{
  width:210px;left:0;top:0;
  background:linear-gradient(135deg,rgba(201,168,76,0.15),rgba(201,168,76,0.05));
  border-color:rgba(201,168,76,0.25);
  animation:float3 5s 0.5s ease-in-out infinite;
  z-index:1;
}

/* Stat card: bottom-left, below badge */
.hcard-stat{
  width:180px;left:10px;bottom:40px;
  background:rgba(201,168,76,0.12);
  border-color:rgba(201,168,76,0.4);
  text-align:center;
  animation:float2 7s 1s ease-in-out infinite;
  z-index:1;
}

@keyframes float1{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes float2{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-8px) rotate(1deg)}}
@keyframes float3{0%,100%{transform:translateY(0) rotate(1deg)}50%{transform:translateY(-10px) rotate(-0.5deg)}}

.hcard-icon{font-size:32px;margin-bottom:12px}
.hcard-title{font-size:12px;color:rgba(255,255,255,0.4);letter-spacing:2px;text-transform:uppercase;margin-bottom:6px}
.hcard-val{font-size:28px;font-weight:900;color:var(--gold);margin-bottom:4px}
.hcard-sub{font-size:12px;color:rgba(255,255,255,0.4)}
.hcard-badge-icon{font-size:20px;margin-bottom:8px}
.hcard-badge-text{font-size:13px;font-weight:700;color:var(--gold2);margin-bottom:4px}
.hcard-badge-sub{font-size:11px;color:rgba(255,255,255,0.4);line-height:1.6}

.hcard-main-top{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.hcard-avatar{
  width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:16px;color:var(--navy);
}
.hcard-main-name{font-size:14px;font-weight:700;color:var(--white)}
.hcard-main-role{font-size:11px;color:rgba(255,255,255,0.4)}
.hcard-divider{height:1px;background:rgba(201,168,76,0.15);margin:16px 0}
.hcard-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.hcard-row-label{font-size:11px;color:rgba(255,255,255,0.4)}
.hcard-row-val{font-size:12px;color:var(--gold2);font-weight:600}
.status-dot{
  width:8px;height:8px;border-radius:50%;
  background:#4ade80;display:inline-block;
  margin-left:4px;
  box-shadow:0 0 8px #4ade80;
  animation:blink 2s infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.4}}

/* GOLD BAR */
.section-gold-bar{
  height:3px;
  background:linear-gradient(90deg,transparent,var(--gold),var(--gold2),var(--gold),transparent);
}

/* NUMBERS SECTION */
.numbers-section{
  background:var(--navy);
  padding:70px 6%;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  position:relative;
}
.numbers-section::before{
  content:'';position:absolute;
  top:0;left:6%;right:6%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,168,76,0.4),transparent);
}

.num-item{
  padding:40px 30px;
  text-align:center;
  position:relative;
  border-right:1px solid rgba(201,168,76,0.1);
  opacity:0;transform:translateY(30px);
  transition:opacity 0.7s ease,transform 0.7s ease;
}
.num-item.visible{opacity:1;transform:translateY(0)}
.num-item:last-child{border-right:none}

.num-val{
  font-size:clamp(2.4rem,4vw,3.5rem);
  font-weight:900;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  line-height:1.2;
  margin-bottom:16px;
  direction:ltr;
  unicode-bidi:bidi-override;
  display:block;
}
.num-label{
  font-size:13px;color:rgba(255,255,255,0.45);
  font-weight:400;letter-spacing:1px;
}
.num-icon{font-size:22px;margin-bottom:14px;opacity:0.7}

/* SERVICES */
.services-section{
  padding:120px 6%;
  background:var(--cream);
}

.section-header{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:end;
  margin-bottom:80px;
}

.section-eyebrow{
  display:flex;align-items:center;gap:12px;
  margin-bottom:20px;
}
.section-eyebrow-line{width:32px;height:1px;background:var(--gold)}
.section-eyebrow-text{
  font-size:11px;color:var(--gold);
  letter-spacing:4px;text-transform:uppercase;font-weight:600;
}

.section-h2{
  font-size:clamp(2rem,3.5vw,3.2rem);
  font-weight:900;line-height:1.1;
  color:var(--navy);
  letter-spacing:-0.5px;
}
.section-h2 .italic{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;font-weight:300;
  font-size:1.1em;
  background: var(--metallic-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.section-desc-col{
  padding-bottom:8px;
}
.section-desc-col p{
  font-size:15px;color:var(--muted);
  line-height:2;margin-bottom:20px;
}

/* FIX: balanced services grid — 3 columns, explicit 3 rows */
.services-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:auto auto auto;
  gap:2px;
}

.srv-card{
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(201, 168, 76, 0.12);
  padding:48px 40px;
  position:relative;overflow:hidden;
  cursor:pointer;
  transition:transform 0.5s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.5s, border-color 0.5s, background 0.5s;
}

.srv-card:hover{
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(201, 168, 76, 0.4);
  transform:translateY(-8px);
  z-index:2;
  box-shadow: 0 30px 60px rgba(201, 168, 76, 0.1);
}

.srv-card::after{
  content:'';position:absolute;
  bottom:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--gold),var(--gold2));
  transform:scaleX(0);transform-origin:right;
  transition:transform 0.5s cubic-bezier(0.25,0.46,0.45,0.94);
}
.srv-card:hover::after{transform:scaleX(1);transform-origin:left}

.srv-card.featured{
  background: rgba(8, 20, 46, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(201, 168, 76, 0.25);
  box-shadow: 
    0 30px 80px rgba(8, 20, 46, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.srv-card.featured:hover{
  background: rgba(8, 20, 46, 0.95);
  border-color: rgba(201, 168, 76, 0.5);
  box-shadow: 
    0 40px 100px rgba(201, 168, 76, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.srv-number{
  font-family:'Cormorant Garamond',serif;
  font-size:56px;font-weight:300;
  color:rgba(201,168,76,0.12);
  line-height:1;
  margin-bottom:24px;
  transition:color 0.4s;
}
.srv-card:hover .srv-number{color:rgba(201,168,76,0.25)}
.srv-card.featured .srv-number{color:rgba(201,168,76,0.2)}

.srv-icon-wrap{
  width:52px;height:52px;
  border:1px solid rgba(201,168,76,0.3);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;
  margin-bottom:24px;
  transition:background 0.3s,border-color 0.3s;
}
.srv-card:hover .srv-icon-wrap{background:var(--gold);border-color:var(--gold)}
.srv-card.featured .srv-icon-wrap{border-color:rgba(201,168,76,0.4)}

.srv-title{
  font-size:18px;font-weight:700;
  color:var(--navy);margin-bottom:12px;
  transition:color 0.3s;
}
.srv-card.featured .srv-title{color:var(--white)}

.srv-text{
  font-size:14px;color:var(--muted);
  line-height:1.9;
}
.srv-card.featured .srv-text{color:rgba(255,255,255,0.5)}

.srv-arrow{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:24px;
  font-size:12px;font-weight:600;
  color:var(--gold);
  letter-spacing:1px;
  text-transform:uppercase;
  opacity:0;transform:translateX(10px);
  transition:opacity 0.3s,transform 0.3s;
}
.srv-card:hover .srv-arrow{opacity:1;transform:translateX(0)}

/* ABOUT / PHILOSOPHY */
.philosophy-section{
  background:var(--navy);
  padding:120px 6%;
  position:relative;overflow:hidden;
}

.philosophy-section::before{
  content:'POWER';
  position:absolute;
  left:-30px;top:50%;transform:translateY(-50%);
  font-family:'Cormorant Garamond',serif;
  font-size:220px;font-weight:300;
  color:rgba(255,255,255,0.02);
  line-height:1;
  pointer-events:none;
}

.phil-grid{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:100px;
  align-items:center;
}

.phil-left .section-eyebrow-text{color:var(--gold)}
.phil-left .section-h2{color:var(--white)}

.phil-left p{
  font-size:15px;color:rgba(255,255,255,0.5);
  line-height:2.1;margin-top:24px;
}

.values-list{
  margin-top:40px;
  display:flex;flex-direction:column;gap:0;
}

.value-item{
  display:flex;align-items:flex-start;gap:20px;
  padding:24px 0;
  border-bottom:1px solid rgba(255,255,255,0.06);
  opacity:0;transform:translateX(20px);
  transition:opacity 0.6s ease,transform 0.6s ease;
}
.value-item.visible{opacity:1;transform:translateX(0)}

.value-num{
  font-family:'Cormorant Garamond',serif;
  font-size:28px;font-weight:300;
  color:var(--gold);opacity:0.5;
  flex-shrink:0;line-height:1;
  margin-top:2px;
}
.value-content h4{
  font-size:15px;font-weight:700;
  color:var(--white);margin-bottom:6px;
}
.value-content p{
  font-size:13px;color:rgba(255,255,255,0.4);
  line-height:1.8;margin:0;
}

.phil-right{
  position:relative;
}

.phil-card-main{
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-radius: 4px;
  padding: 50px 44px;
  text-align: center;
  position: relative;
  box-shadow: 25px 25px 0 rgba(201, 168, 76, 0.04);
  transform: translateY(-10px);
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}
.phil-card-main:hover{
  transform: translateY(-15px);
  box-shadow: 30px 30px 0 rgba(201, 168, 76, 0.07);
}

.phil-card-main::before{
  content:'';position:absolute;
  top:0;left:50%;transform:translateX(-50%);
  width:80px;height:3px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}

.phil-logo-circle{
  width:100px;height:100px;
  border:2px solid var(--gold);
  border-radius:50%;
  margin:0 auto 28px;
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.phil-logo-circle::before{
  content:'';position:absolute;inset:6px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(201,168,76,0.15),transparent);
}
.phil-logo-circle span{
  font-size:40px;font-weight:900;color:var(--gold);
  position:relative;z-index:1;
}

.phil-company-ar{
  font-size:24px;font-weight:900;
  color:var(--white);margin-bottom:6px;
}
.phil-company-en{
  font-family:'Cormorant Garamond',serif;
  font-size:16px;font-weight:300;
  color:rgba(255,255,255,0.4);
  letter-spacing:2px;margin-bottom:32px;
}

.cr-row{
  display:inline-block;
  background:rgba(201,168,76,0.08);
  border:1px solid rgba(201,168,76,0.2);
  border-radius:2px;
  padding:8px 20px;
  font-size:12px;color:var(--gold2);
  letter-spacing:2px;
  margin-bottom:32px;
}

.phil-specs{
  display:grid;grid-template-columns:1fr 1fr;
  gap:1px;background:rgba(255,255,255,0.06);
  border-top:1px solid rgba(255,255,255,0.06);
}
.phil-spec{
  padding:18px;
  background:rgba(255,255,255,0.02);
}
.phil-spec-label{font-size:10px;color:rgba(255,255,255,0.3);letter-spacing:2px;text-transform:uppercase;margin-bottom:6px}
.phil-spec-val{font-size:14px;color:rgba(255,255,255,0.75);font-weight:600}

.phil-float-badge{
  position:absolute;
  top:-20px;right:-20px;
  background:var(--gold);
  color:var(--navy);
  padding:14px 18px;
  border-radius:3px;
  font-size:12px;font-weight:700;
  text-align:center;
  box-shadow:0 12px 40px rgba(201,168,76,0.4);
  animation:float1 5s ease-in-out infinite;
}
.phil-float-badge span{display:block;font-size:22px;font-weight:900;margin-bottom:2px}

/* PROJECTS SHOWCASE */
.projects-section{
  padding:120px 6%;
  background:var(--cream2);
}

.projects-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-template-rows:260px 260px;
  gap:3px;
  margin-top:60px;
}

.proj-card{
  position:relative;overflow:hidden;
  background:var(--navy2);
  cursor:pointer;
}

.proj-card:first-child{grid-column:1/3}
.proj-card:last-child{grid-column:2/4}

.proj-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transition:transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94);
  filter:brightness(0.5);
}
.proj-card:hover .proj-bg{transform:scale(1.08);filter:brightness(0.3)}

.proj-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 30%,rgba(8,20,46,0.9) 100%);
}

.proj-content{
  position:absolute;
  bottom:0;left:0;right:0;
  padding:32px;
  transform:translateY(20px);
  transition:transform 0.5s ease;
}
.proj-card:hover .proj-content{transform:translateY(0)}

.proj-tag{
  display:inline-block;
  background:var(--gold);color:var(--navy);
  font-size:10px;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;
  padding:4px 12px;border-radius:1px;
  margin-bottom:10px;
}
.proj-title{
  font-size:20px;font-weight:900;color:var(--white);
  margin-bottom:8px;
}
.proj-detail{
  font-size:13px;color:rgba(255,255,255,0.5);
  opacity:0;transform:translateY(8px);
  transition:opacity 0.4s 0.1s,transform 0.4s 0.1s;
}
.proj-card:hover .proj-detail{opacity:1;transform:translateY(0)}

/* Project placeholder backgrounds */
.proj-bg-1{background: linear-gradient(rgba(8, 20, 46, 0.25), rgba(8, 20, 46, 0.65)), url('../images/business_complex.png') center/cover no-repeat;}
.proj-bg-2{background: linear-gradient(rgba(8, 20, 46, 0.25), rgba(8, 20, 46, 0.65)), url('../images/infrastructure.png') center/cover no-repeat;}
.proj-bg-3{background: linear-gradient(rgba(8, 20, 46, 0.25), rgba(8, 20, 46, 0.65)), url('../images/industrial_complex.png') center/cover no-repeat;}
.proj-bg-4{background: linear-gradient(rgba(8, 20, 46, 0.25), rgba(8, 20, 46, 0.65)), url('../images/luxury_villa.png') center/cover no-repeat;}


.proj-pattern{
  position:absolute;inset:0;
  opacity:0.15;
  background-image:
    repeating-linear-gradient(45deg,rgba(201,168,76,0.1) 0,rgba(201,168,76,0.1) 1px,transparent 0,transparent 50%);
  background-size:20px 20px;
}

/* CONTACT */
.contact-section{
  padding:120px 6%;
  background:var(--white);
}

.contact-inner{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:100px;
  align-items:start;
}

.contact-info-items{
  margin-top:48px;
  display:flex;flex-direction:column;gap:0;
}

.contact-info-item{
  display:flex;align-items:flex-start;gap:20px;
  padding:28px 0;
  border-bottom:1px solid rgba(201,168,76,0.15);
}
.contact-info-item:first-child{border-top:1px solid rgba(201,168,76,0.15)}

.cinfo-icon{
  width:48px;height:48px;
  border:1px solid rgba(201,168,76,0.3);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;flex-shrink:0;
  transition:background 0.3s;
}
.contact-info-item:hover .cinfo-icon{background:var(--gold)}

.cinfo-label{font-size:10px;color:var(--gold);letter-spacing:3px;text-transform:uppercase;margin-bottom:6px;font-weight:600}
.cinfo-val{font-size:15px;color:var(--navy);font-weight:600;line-height:1.7}
.cinfo-val a{color:inherit;text-decoration:none;transition:color 0.2s}
.cinfo-val a:hover{color:var(--gold)}

/* FIX: Phone number RTL scrambled layout */
a[href^="tel:"],
a[href^="tel:"] span,
.phone-number {
  direction: ltr !important;
  unicode-bidi: embed;
  display: inline-block;
}


/* Contact form — FIX: proper <form> element */
.contact-form-wrap{
  background:var(--cream);
  padding:50px 44px;
  border-top:3px solid var(--gold);
}

.form-title{
  font-size:22px;font-weight:900;
  color:var(--navy);margin-bottom:8px;
}
.form-sub{font-size:13px;color:var(--muted);margin-bottom:36px}

.form-group{margin-bottom:22px}
.form-label{
  display:block;font-size:11px;
  color:var(--navy);font-weight:600;
  letter-spacing:2px;text-transform:uppercase;
  margin-bottom:8px;
}
.form-input{
  width:100%;padding:14px 18px;
  background:var(--white);
  border:1px solid rgba(201,168,76,0.2);
  border-radius:2px;
  font-family:'Cairo',sans-serif;
  font-size:14px;color:var(--navy);
  outline:none;
  transition:border-color 0.3s,box-shadow 0.3s;
}
.form-input:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,168,76,0.1);
}
.form-input::placeholder{color:rgba(26,20,40,0.3)}
.form-input.error{border-color:#e74c3c;box-shadow:0 0 0 3px rgba(231,76,60,0.1)}
textarea.form-input{resize:none;height:120px}
select.form-input{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c9a84c' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:left 16px center; /* Position on the left in RTL */
  padding-left:40px; /* Ensure text never overlaps with custom arrow */
}
html[dir="ltr"] select.form-input{
  background-position:right 16px center; /* Position on the right in LTR */
  padding-left:18px;
  padding-right:40px;
}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* FIX: form submit button */
.btn-submit{
  width:100%;
  background:var(--navy);
  color:var(--gold);
  border:none;
  padding:16px;
  font-family:'Cairo',sans-serif;
  font-size:14px;font-weight:700;
  letter-spacing:1px;
  cursor:pointer;
  border-radius:2px;
  position:relative;overflow:hidden;
  transition:background 0.3s,opacity 0.3s;
}
.btn-submit::before{
  content:'';position:absolute;
  bottom:0;left:0;width:0;height:2px;
  background:var(--gold);
  transition:width 0.4s;
}
.btn-submit:hover::before{width:100%}
.btn-submit:hover{background:var(--navy2)}
.btn-submit:disabled{opacity:0.6;cursor:not-allowed}
.btn-submit:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* FIX: form status messages */
.form-status{
  margin-top:16px;padding:14px 18px;
  border-radius:2px;font-size:13px;font-weight:600;
  display:none;line-height:1.7;
}
.form-status.success{
  display:block;
  background:rgba(74,222,128,0.1);
  color:#16a34a;
  border:1px solid rgba(74,222,128,0.3);
}
.form-status.error{
  display:block;
  background:rgba(231,76,60,0.1);
  color:#e74c3c;
  border:1px solid rgba(231,76,60,0.3);
}

/* FOOTER */
footer{
  background:var(--navy);
  position:relative;
  overflow:hidden;
}

footer::before{
  content:'';position:absolute;
  top:0;left:6%;right:6%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,168,76,0.4),transparent);
}

.footer-main{
  padding:80px 6% 48px;
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:60px;
}

.footer-logo{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.footer-logo-emblem{
  width:52px;height:52px;
  border:1.5px solid var(--gold);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:900;color:var(--gold);
}
.footer-logo-name{color:var(--white);font-size:16px;font-weight:700;line-height:1.3}
.footer-logo-sub{font-size:10px;color:rgba(255,255,255,0.35);letter-spacing:2px;text-transform:uppercase}

.footer-brand-desc{
  font-size:13px;color:rgba(255,255,255,0.35);
  line-height:2;max-width:280px;
}

.footer-col h5{
  font-size:11px;font-weight:700;
  color:var(--gold);letter-spacing:3px;
  text-transform:uppercase;margin-bottom:20px;
}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer-col ul li a{
  font-size:13px;color:rgba(255,255,255,0.4);
  text-decoration:none;transition:color 0.2s,padding-right 0.2s;
  display:block;
}
.footer-col ul li a:hover{color:var(--gold2);padding-right:4px}

.footer-bottom{
  padding:20px 6%;
  display:flex;justify-content:space-between;align-items:center;
  border-top:1px solid rgba(255,255,255,0.05);
  flex-wrap:wrap;gap:12px;
}
.footer-bottom p{font-size:12px;color:rgba(255,255,255,0.25)}
.footer-bottom strong{color:var(--gold2)}

/* SCROLL REVEAL */
.reveal{
  opacity:0;transform:translateY(40px);
  transition:opacity 0.8s ease,transform 0.8s ease;
}
.reveal.visible{opacity:1;transform:translateY(0)}

@keyframes heroIn{
  to{opacity:1;transform:translateY(0)}
}

/* TABLET BREAKPOINT — FIX: switch to hamburger earlier to prevent overlap */
@media(max-width:1100px){
  .nav-links{display:none}
  .nav-cta.desktop-only{display:none}
  .hamburger{display:flex}
  .mobile-nav-overlay{display:flex}
}

/* MOBILE */
@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr;padding-top:100px}
  .hero-right{display:none}
  .numbers-section{grid-template-columns:repeat(2,1fr)}
  .section-header{grid-template-columns:1fr}
  .services-grid{grid-template-columns:1fr;grid-template-rows:auto}
  .srv-card.featured{grid-column:1;grid-row:auto}
  .phil-grid{grid-template-columns:1fr}
  .projects-grid{grid-template-columns:1fr;grid-template-rows:auto}
  .proj-card:first-child,.proj-card:last-child{grid-column:1}
  .contact-inner{grid-template-columns:1fr}
  .footer-main{grid-template-columns:1fr 1fr}

  .form-row{grid-template-columns:1fr}
  .contact-form-wrap{padding:36px 24px}

  /* Hide hero cards earlier on smaller screens */
  .hero-right{display:none}
}

@media(max-width:500px){
  .footer-main{grid-template-columns:1fr}
  .numbers-section{grid-template-columns:1fr 1fr}
}

/* THEME & LANGUAGE TOGGLE BUTTONS */
.nav-actions{
  display:flex;align-items:center;gap:8px;
  flex-shrink:0;
}
.nav-toggle-btn{
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(201,168,76,0.25);
  color:var(--gold2);
  width:38px;height:38px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  font-size:14px;
  transition:background 0.3s,border-color 0.3s,transform 0.3s;
  flex-shrink:0;
}
.nav-toggle-btn:hover{
  background:rgba(201,168,76,0.15);
  border-color:var(--gold);
  transform:scale(1.08);
}
.nav-toggle-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.lang-toggle{
  font-family:'Cairo',sans-serif;
  font-weight:700;font-size:11px;
  width:auto !important;
  min-width:78px;
  height:38px;
  padding:0 14px;
  border-radius:20px; /* Upgraded to luxury rounded pill shape to seamlessly match circular UI buttons */
  letter-spacing:0.5px;
  text-transform:uppercase;
  white-space:nowrap !important;
  flex-shrink:0 !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:4px;
}
.lang-toggle .lang-active{color:var(--gold)}
.lang-toggle .lang-inactive{color:rgba(255,255,255,0.4)}
/* Light theme button adjustment */
html[data-theme="light"] .nav-toggle-btn{
  background:rgba(0,0,0,0.06);
  border-color:rgba(201,168,76,0.35);
  color:var(--gold);
}
html[data-theme="light"] .nav-toggle-btn:hover{
  background:rgba(201,168,76,0.12);
}
/* Theme transition */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after{
  transition:background-color 0.4s ease,color 0.4s ease,border-color 0.4s ease,box-shadow 0.4s ease !important;
}
/* Mobile toggle buttons */
.mobile-nav-toggles{
  position:static !important; /* Removed absolute positioning to prevent clashing and overlapping with the close button in RTL/LTR layouts */
  display:flex;
  gap:12px; /* Increased padding and spacing between icons for modern visual breathability */
  align-items:center;
  z-index:10;
}
.mobile-nav-toggles .nav-toggle-btn{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.15);
}
.mobile-nav-toggles .nav-toggle-btn:hover,
.mobile-nav-toggles .nav-toggle-btn:active{
  background:rgba(201, 168, 76, 0.2);
  border-color:var(--gold);
}
/* Light theme overrides for mobile navigation action items */
html[data-theme="light"] .mobile-nav-toggles .nav-toggle-btn {
  background:rgba(0,0,0,0.04);
  border-color:rgba(0,0,0,0.08);
  color:var(--navy);
}
html[data-theme="light"] .mobile-nav-toggles .nav-toggle-btn:hover {
  background:rgba(201,168,76,0.12);
  border-color:var(--gold);
}
@media(max-width:1100px){
  /* Hide both theme and language toggles from top navbar on mobile — they move to the mobile overlay */
  .nav-actions { display: none !important; }
  /* Hide search button on mobile */
  .nav-search-btn { display: none !important; }
}
@media(min-width:1101px){
  .mobile-nav-toggles .nav-toggle-btn.theme-toggle-btn{display:none}
  .mobile-nav-lang-wrap { display: none !important; }
}

/* Extra tight spacing on mobile nav */
@media(max-width:768px){
  #navbar {
    gap: 0;
    justify-content: space-between;
  }
  /* Make sure hamburger stays at end */
  .hamburger { margin-inline-start: auto; }
}
/* SCROLL OFFSET for fixed navbar */
#home,#services,#about,#projects,#contact,#main-content,#calculator,#faq,#testimonials{
  scroll-margin-top:80px;
}

/* PROJECT DETAIL MODAL */
.proj-modal-backdrop{
  position:fixed;inset:0;z-index:2000;
  background:rgba(8,20,46,0.85);
  backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;
  transition:opacity 0.4s,visibility 0.4s;
  padding:20px;
}
.proj-modal-backdrop.open{opacity:1;visibility:visible}
.proj-modal{
  background:var(--white);
  max-width:640px;width:100%;
  border-radius:4px;
  position:relative;
  transform:translateY(30px) scale(0.97);
  transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
  overflow:hidden;
}
.proj-modal-backdrop.open .proj-modal{transform:translateY(0) scale(1)}
.proj-modal-header{
  position:relative;
  min-height:180px;
  display:flex;align-items:flex-end;
  padding:32px;
  overflow:hidden;
}
.proj-modal-header .proj-bg{position:absolute;inset:0}
.proj-modal-header .proj-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(8,20,46,0.9) 100%)}
.proj-modal-tag{
  position:relative;z-index:1;
  display:inline-block;
  background:var(--gold);color:var(--navy);
  font-size:10px;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;
  padding:4px 12px;border-radius:1px;
  margin-bottom:10px;
}
.proj-modal-title{
  position:relative;z-index:1;
  font-size:24px;font-weight:900;color:var(--white);
}
.proj-modal-close{
  position:absolute;top:16px;right:16px;z-index:2;
  background:rgba(255,255,255,0.15);
  border:1px solid rgba(255,255,255,0.3);
  color:var(--white);
  width:40px;height:40px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:20px;
  transition:background 0.3s,transform 0.3s;
}
html[dir="ltr"] .proj-modal-close{right:auto;left:16px}
.proj-modal-close:hover{background:rgba(255,255,255,0.3);transform:rotate(90deg)}
.proj-modal-body{
  padding:32px;
}
.proj-modal-desc{
  font-size:15px;color:var(--muted);
  line-height:2;
  margin-bottom:28px;
}
.proj-modal-specs{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
  margin-bottom:28px;
}
.proj-modal-spec{
  background:var(--cream);
  padding:14px 18px;
  border-radius:2px;
}
.proj-modal-spec-label{
  font-size:10px;color:var(--gold);
  letter-spacing:2px;text-transform:uppercase;
  font-weight:600;margin-bottom:4px;
}
.proj-modal-spec-val{
  font-size:14px;color:var(--navy);font-weight:700;
}
.proj-modal-cta{
  display:block;width:100%;
  background:var(--gold);color:var(--navy);
  border:none;padding:15px;
  font-family:'Cairo',sans-serif;
  font-size:14px;font-weight:700;
  border-radius:2px;cursor:pointer;
  text-align:center;text-decoration:none;
  transition:transform 0.3s;
}
.proj-modal-cta:hover{transform:translateY(-2px)}
@media(max-width:600px){
  .proj-modal-header{min-height:140px;padding:20px}
  .proj-modal-body{padding:20px}
  .proj-modal-specs{grid-template-columns:1fr}
  .proj-modal-title{font-size:20px}
}

/* BACK TO TOP — with percentage */
.back-to-top{
  position:fixed;
  bottom:32px;right:32px;
  z-index:900;
  width:48px;height:48px;
  background:var(--gold);
  color:var(--navy);
  border:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  opacity:0;visibility:hidden;
  transform:translateY(20px);
  transition:opacity 0.3s,visibility 0.3s,transform 0.3s,background 0.3s;
  box-shadow:0 4px 20px rgba(201,168,76,0.4);
  font-family:'Cairo',sans-serif;
  font-size:12px;font-weight:700;
}
html[dir="ltr"] .back-to-top{right:auto;left:32px}
.back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top:hover{background:var(--gold2);transform:translateY(-3px)}
.back-to-top svg{display:none}
.back-to-top .btt-text{position:relative;z-index:1}
.back-to-top .btt-percent{
  position:absolute;inset:0;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
@media(max-width:768px){
  .back-to-top{bottom:90px!important;right:16px!important}
  html[dir="ltr"] .back-to-top{right:auto!important;left:16px!important}
}

/* SOCIAL MEDIA FLOAT */
.social-float{
  position:fixed;
  bottom:32px;left:32px;
  z-index:900;
  display:flex;flex-direction:column;gap:10px;
}
html[dir="ltr"] .social-float{left:auto;right:32px}
.social-float a{
  width:48px;height:48px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--white);
  text-decoration:none;
  transition:transform 0.3s,opacity 0.3s;
  box-shadow:0 4px 16px rgba(0,0,0,0.2);
  font-size:20px;
  backface-visibility: hidden;
  will-change: transform;
}
.social-float a:hover{transform:scale(1.12)}
.social-float .social-whatsapp{background:#25d366}
.social-float .social-phone{background:var(--navy);border:1px solid rgba(201,168,76,0.4)}
.social-float .social-email{background:var(--navy);border:1px solid rgba(201,168,76,0.4)}
@media(max-width:1100px){
  .social-float{bottom:100px}
}

/* ================================================
   GROUP 1: MOBILE CRITICAL IMPROVEMENTS
   ================================================ */

/* 1. BOTTOM NAVIGATION BAR — Mobile Only */
.bottom-nav{
  position:fixed;bottom:0;left:0;right:0;z-index:999;
  background:var(--navy);
  border-top:1px solid rgba(201,168,76,0.2);
  display:none;
  padding:6px 0 env(safe-area-inset-bottom, 6px);
  backdrop-filter:blur(16px);
}
.bottom-nav-inner{
  display:flex;justify-content:space-around;align-items:center;
}
.bottom-nav-item{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  background:none;border:none;
  color:rgba(255,255,255,0.45);
  font-size:9px;font-weight:600;
  font-family:'Cairo',sans-serif;
  padding:6px 4px;min-width:56px;min-height:48px;
  cursor:pointer;
  transition:color 0.3s;
  text-decoration:none;
  letter-spacing:0.5px;
}
.bottom-nav-item svg{width:20px;height:20px;stroke-width:2}
.bottom-nav-item.active,.bottom-nav-item:hover{
  color:var(--gold);
}
.bottom-nav-item.whatsapp-btn{
  color:#25d366;
}

/* 2. HERO MOBILE OPTIMIZATION */
.hero-mobile-cta{display:none}

/* 5. SERVICES HORIZONTAL SCROLL — defaults hidden */
.services-scroll-wrapper{position:relative}
.services-scroll-indicator{display:none}

/* === ALL MOBILE (max-width:768px) IMPROVEMENTS === */
@media(max-width:768px){

  /* 1. Show bottom nav */
  .bottom-nav{display:block}

  /* 2. Hero mobile optimization */
  .hero{min-height:auto;padding:120px 0 80px;background:linear-gradient(135deg,var(--navy) 0%,var(--navy2) 50%,#0a1a3a 100%)}
  .hero-h1{font-size:clamp(1.6rem,6vw,2.2rem)!important}
  .hero-desc{font-size:13px;max-width:100%}
  .hero-actions{flex-direction:column;gap:10px}
  .hero-actions .btn-primary,.hero-actions .btn-ghost{width:100%;text-align:center}
  .hero-mobile-cta{
    display:block!important;
    position:sticky;bottom:70px;
    margin:0 4%;z-index:10;
  }
  .hero-mobile-cta .btn-primary{
    width:100%;padding:14px;font-size:15px;
    box-shadow:0 4px 20px rgba(201,168,76,0.4);
    border-radius:4px;
  }

  /* 4. Touch Targets Minimum 48x48px */
  .nav-links a,.mobile-nav-overlay a{
    min-height:48px;min-width:48px;
    display:flex;align-items:center;justify-content:center;
  }
  .nav-toggle-btn{
    width:48px!important;height:48px!important;
  }
  .form-input{
    min-height:48px;padding:14px 16px;font-size:16px;
  }
  .btn-submit{
    min-height:48px;font-size:16px;
  }
  .cinfo-icon{
    width:48px;height:48px;min-width:48px;
  }
  /* Make all links/inputs at least 44px tap area */
  a,button,input,select,textarea{
    min-height:44px;
  }
  /* Exception for small inline links */
  .footer-col ul li a,
  .proj-tag,
  .section-eyebrow-text,
  .phil-spec-label,
  .form-label{
    min-height:auto;
  }

  /* 5. Services Horizontal Scroll */
  .services-grid{
    display:flex!important;
    flex-direction:row;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:12px;
    padding:0 4% 16px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .services-grid::-webkit-scrollbar{display:none}
  .services-grid .srv-card{
    flex:0 0 85vw;
    max-width:85vw;
    scroll-snap-align:start;
    min-height:340px;
  }
  .services-grid .srv-card.featured{
    grid-column:auto;grid-row:auto;
    flex:0 0 85vw;max-width:85vw;
  }
  .services-scroll-indicator{
    display:flex;justify-content:center;gap:8px;
    margin-top:16px;
  }
  .services-scroll-dot{
    width:8px;height:8px;
    border-radius:50%;
    background:rgba(201,168,76,0.25);
    transition:background 0.3s,transform 0.3s;
    cursor:pointer;
  }
  .services-scroll-dot.active{
    background:var(--gold);
    transform:scale(1.3);
  }

  /* 6. Body padding-bottom for bottom nav */
  body{
    padding-bottom:0 !important;
  }
  /* Reposition social-float on mobile */
  .social-float{
    bottom:90px!important;
  }

  /* 7. Improve Mobile Font Sizes */
  .section-h2{
    font-size:clamp(1.6rem,5vw,2.2rem)!important;
  }
  .section-desc-col p{
    font-size:13px;
  }
  .srv-title{
    font-size:16px;
  }
  .srv-text{
    font-size:13px;
  }
  .proj-title{
    font-size:16px;
  }
  .form-title{
    font-size:18px;
  }
  .contact-info-item{
    padding:20px 0;
  }
  .hero-kicker-text{
    font-size:9px;letter-spacing:3px;
  }
  .phil-company-ar{
    font-size:20px;
  }
  .num-val{
    font-size:clamp(2rem,6vw,2.8rem);
  }
  .h1{font-size:clamp(1.6rem,6vw,2.2rem)}

  /* GROUP 4: Projects Horizontal Scroll — mobile carousel */
  .projects-grid{
    display:flex!important;
    flex-direction:row;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:12px;
    padding:0 4% 16px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    grid-template-columns:none!important;
    grid-template-rows:none!important;
  }
  .projects-grid::-webkit-scrollbar{display:none}
  .projects-grid .proj-card{
    flex:0 0 85vw;
    max-width:85vw;
    min-height:280px;
    scroll-snap-align:center;
    grid-column:auto!important;
  }
  .proj-content{
    padding:20px;
  }
  .projects-scroll-indicator{
    display:flex!important;
    justify-content:center;gap:8px;
    margin-top:16px;
  }
  .projects-scroll-dot{
    width:8px;height:8px;
    border-radius:50%;
    background:rgba(201,168,76,0.25);
    transition:background 0.3s,transform 0.3s;
    cursor:pointer;
  }
  .projects-scroll-dot.active{
    background:var(--gold);
    transform:scale(1.3);
  }

  /* GROUP 4: Footer Mobile — Collapsible columns */
  .footer-main{
    padding:48px 4% 32px;
    gap:32px;
  }
  .footer-col h5{
    cursor:pointer;
    display:flex;align-items:center;justify-content:space-between;
  }
  .footer-col h5::after{
    content:'+';font-size:16px;
    color:var(--gold);opacity:0.5;
    transition:transform 0.3s;
  }
  .footer-col.open h5::after{
    transform:rotate(45deg);
  }
  .footer-col ul{
    max-height:0;overflow:hidden;
    transition:max-height 0.3s ease;
  }
  .footer-col.open ul{
    max-height:300px;
  }
  .footer-brand-desc{
    font-size:12px;
  }
}



/* GROUP 4: Projects scroll indicator — hidden by default on desktop */
.projects-scroll-indicator{display:none}

/* GROUP 4: WhatsApp Direct Button */
.whatsapp-direct-btn{
  background:#25d366!important;
  color:#fff!important;
  padding:14px 24px;
  border-radius:4px;
  font-family:'Cairo',sans-serif;
  font-size:15px;
  font-weight:700;
  transition:transform 0.3s,box-shadow 0.3s;
  box-shadow:0 4px 16px rgba(37,211,102,0.3);
}
.whatsapp-direct-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(37,211,102,0.4);
}

/* GROUP 4: File Upload Area */
.file-upload-area{
  border:2px dashed rgba(201,168,76,0.3);
  border-radius:4px;
  padding:24px;
  text-align:center;
  transition:border-color 0.3s,background 0.3s;
  cursor:pointer;
}
.file-upload-area:hover,.file-upload-area.dragover{
  border-color:var(--gold);
  background:rgba(201,168,76,0.05);
}
.file-upload-btn{
  background:none;border:none;
  color:var(--gold);
  font-family:'Cairo',sans-serif;
  font-size:14px;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  gap:10px;
  width:100%;
}
.file-upload-btn svg{stroke:var(--gold)}
.file-upload-names{
  margin-top:10px;
  font-size:12px;
  color:var(--muted);
}
.file-upload-names span{
  display:block;
  background:var(--cream);
  padding:4px 10px;
  border-radius:2px;
  margin-top:4px;
}

/* ================================================
   GROUP 2: INTERACTIVE FEATURES
   ================================================ */

/* SCROLL PROGRESS BAR */
.scroll-progress{
  position:fixed;top:0;left:0;
  width:0;height:3px;
  background:linear-gradient(90deg,var(--gold),var(--gold2));
  z-index:1006;
  transition:width 0.05s linear;
}

/* ANNOUNCEMENT BAR */
.announcement-bar{
  position:fixed;top:0;left:0;right:0;z-index:1005;
  background:linear-gradient(90deg,var(--gold),var(--gold2));
  color:var(--navy);
  padding:8px 6%;
  display:flex;align-items:center;justify-content:center;
  gap:12px;
  font-size:12px;font-weight:700;
  letter-spacing:0.5px;
  transform:translateY(-100%);
  transition:transform 0.5s ease;
}
.announcement-bar.show{transform:translateY(0)}
.announcement-bar.show + #navbar{top:32px}
.announcement-bar.show + #navbar.scrolled{top:0}
.announcement-text{flex:1;text-align:center}
.announcement-close{
  background:none;border:none;
  color:var(--navy);font-size:18px;
  cursor:pointer;padding:4px;
  opacity:0.6;transition:opacity 0.3s;
  min-width:32px;min-height:32px;
  display:flex;align-items:center;justify-content:center;
}
.announcement-close:hover{opacity:1}
#navbar{transition:top 0.5s ease}
@media(max-width:768px){
  .announcement-text{font-size:10px}
  .announcement-bar{padding:6px 4%}
}

/* COST CALCULATOR */
.calculator-section{
  background:var(--cream);
  padding:100px 6%;
  position:relative;
  overflow:hidden;
}
.calculator-section::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(
    45deg,transparent,transparent 40px,rgba(201,168,76,0.03) 40px,rgba(201,168,76,0.03) 41px
  );
  pointer-events:none;
}
.calculator-inner{
  max-width:700px;
  margin:0 auto;
  position:relative;
}
.calc-header{
  text-align:center;
  margin-bottom:48px;
}
.calc-header .section-eyebrow{justify-content:center}
.calc-header .section-h2{text-align:center}
.calc-form{
  background:var(--white);
  border-radius:4px;
  padding:40px;
  box-shadow:var(--shadow-card);
}
.calc-group{margin-bottom:24px}
.calc-label{
  display:block;font-size:11px;
  color:var(--navy);font-weight:600;
  letter-spacing:2px;text-transform:uppercase;
  margin-bottom:10px;
}
.calc-select,.calc-input{
  width:100%;padding:14px 18px;
  background:var(--white);
  border:1px solid rgba(201,168,76,0.25);
  border-radius:2px;
  font-family:'Cairo',sans-serif;
  font-size:14px;color:var(--navy);
  outline:none;
  transition:border-color 0.3s;
  -webkit-appearance:none;
  appearance:none;
}
.calc-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c9a84c' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:left 16px center;
  padding-left:40px;
}
html[dir="ltr"] .calc-select{
  background-position:right 16px center;
  padding-left:18px;padding-right:40px;
}
.calc-select:focus,.calc-input:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,168,76,0.1);
}
.calc-row{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
}
.calc-btn{
  width:100%;padding:16px;
  background:var(--gold);color:var(--navy);
  border:none;border-radius:2px;
  font-family:'Cairo',sans-serif;
  font-size:15px;font-weight:700;
  cursor:pointer;
  transition:transform 0.3s,background 0.3s;
  margin-top:8px;
}
.calc-btn:hover{transform:translateY(-2px);background:var(--gold2)}
.calc-result{
  margin-top:24px;
  padding:24px;
  background:var(--cream);
  border-radius:2px;
  border:1px solid rgba(201,168,76,0.15);
  display:none;
}
.calc-result.show{display:block}
.calc-result-title{
  font-size:13px;color:var(--gold);
  font-weight:600;letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom:12px;
}
.calc-result-value{
  font-size:36px;font-weight:900;
  color:var(--navy);
  line-height:1;
}
.calc-result-note{
  font-size:12px;color:var(--muted);
  margin-top:8px;line-height:1.8;
}
.calc-range{
  display:flex;justify-content:space-between;
  margin-top:8px;
  font-size:11px;color:var(--muted);
}
.calc-range input[type="range"]{
  width:100%;margin-top:4px;
  accent-color:var(--gold);
  height:6px;
}
@media(max-width:600px){
  .calc-form{padding:24px 20px}
  .calc-row{grid-template-columns:1fr}
  .calc-result-value{font-size:28px}
}

/* FAQ SECTION */
.faq-section{
  background:var(--white);
  padding:100px 6%;
}
.faq-list{
  max-width:800px;
  margin:40px auto 0;
}
.faq-item{
  border-bottom:1px solid rgba(201,168,76,0.12);
}
.faq-question{
  width:100%;
  background:none;border:none;
  padding:22px 0;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;
  cursor:pointer;
  text-align:right;
  font-family:'Cairo',sans-serif;
}
html[dir="ltr"] .faq-question{text-align:left}
.faq-question-text{
  font-size:16px;font-weight:700;
  color:var(--navy);
  line-height:1.6;
  transition:color 0.3s;
}
.faq-question:hover .faq-question-text{color:var(--gold)}
.faq-question.open .faq-question-text{color:var(--gold)}
.faq-icon{
  width:28px;height:28px;min-width:28px;
  border:1.5px solid rgba(201,168,76,0.3);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:transform 0.3s,background 0.3s,border-color 0.3s;
  font-size:16px;color:var(--gold);
}
.faq-question.open .faq-icon{
  transform:rotate(45deg);
  background:var(--gold);
  color:var(--navy);
  border-color:var(--gold);
}
.faq-answer{
  max-height:0;overflow:hidden;
  transition:max-height 0.4s ease,padding 0.4s ease;
}
.faq-answer-inner{
  padding:0 0 22px;
  font-size:14px;color:var(--muted);
  line-height:2;
}
@media(max-width:768px){
  .faq-question-text{font-size:14px}
  .faq-answer-inner{font-size:13px}
}

/* GROUP 6: GOOGLE MAPS */
.contact-map-wrap{
  margin-top:32px;
  border-radius:4px;
  overflow:hidden;
  border:1px solid rgba(201,168,76,0.15);
}
.contact-map-wrap iframe{
  display:block;
}

/* GROUP 6: PDF DOWNLOAD */
.download-brochure-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:transparent;
  border:1px solid rgba(201,168,76,0.3);
  color:var(--gold);
  padding:12px 28px;
  border-radius:2px;
  font-family:'Cairo',sans-serif;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  transition:background 0.3s,border-color 0.3s,transform 0.3s;
  min-height:48px;
}
.download-brochure-btn:hover{
  background:var(--gold);
  color:var(--navy);
  border-color:var(--gold);
  transform:translateY(-2px);
}
.download-brochure-btn svg{stroke:currentColor}

/* GROUP 6: LIVE CHAT WIDGET */
.chat-widget{
  position:fixed;bottom:100px;right:32px;z-index:899;
}
html[dir="ltr"] .chat-widget{right:auto;left:32px}
@media(max-width:768px){
  .chat-widget{bottom:100px;right:16px}
  html[dir="ltr"] .chat-widget{right:auto;left:16px}
}
.chat-toggle{
  width:56px;height:56px;
  border-radius:50%;
  background:var(--navy);
  border:2px solid var(--gold);
  color:var(--gold);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  box-shadow:0 4px 20px rgba(201,168,76,0.3);
  transition:transform 0.3s,box-shadow 0.3s;
  font-size:24px;
}
.chat-toggle:hover{
  transform:scale(1.1);
  box-shadow:0 6px 28px rgba(201,168,76,0.5);
}
.chat-panel{
  position:absolute;bottom:70px;right:0;
  width:340px;
  background:var(--white);
  border-radius:8px;
  box-shadow:0 12px 48px rgba(0,0,0,0.2);
  overflow:hidden;
  opacity:0;visibility:hidden;
  transform:translateY(20px) scale(0.95);
  transition:opacity 0.3s,visibility 0.3s,transform 0.3s;
}
html[dir="ltr"] .chat-panel{right:auto;left:0}
.chat-panel.open{
  opacity:1;visibility:visible;
  transform:translateY(0) scale(1);
}
.chat-header{
  background:var(--navy);
  color:var(--white);
  padding:16px 20px;
  display:flex;align-items:center;justify-content:space-between;
}
.chat-header-title{
  font-size:14px;font-weight:700;
}
.chat-header-sub{
  font-size:11px;color:rgba(255,255,255,0.5);
}
.chat-close{
  background:none;border:none;
  color:rgba(255,255,255,0.6);
  font-size:20px;cursor:pointer;
  width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  transition:background 0.3s;
}
.chat-close:hover{background:rgba(255,255,255,0.1);color:var(--white)}
.chat-body{
  padding:20px;
  min-height:200px;
  display:flex;flex-direction:column;gap:12px;
}
.chat-msg{
  max-width:80%;
  padding:10px 14px;
  border-radius:12px;
  font-size:13px;line-height:1.7;
}
.chat-msg.bot{
  background:var(--cream);
  color:var(--text);
  align-self:flex-start;
  border-bottom-left-radius:4px;
}
html[dir="ltr"] .chat-msg.bot{border-bottom-left-radius:12px;border-bottom-right-radius:4px}
.chat-msg.user{
  background:var(--gold);
  color:var(--navy);
  align-self:flex-end;
  border-bottom-right-radius:4px;
}
html[dir="ltr"] .chat-msg.user{border-bottom-right-radius:12px;border-bottom-left-radius:4px}
.chat-input-area{
  display:flex;gap:8px;
  padding:12px;
  border-top:1px solid rgba(201,168,76,0.15);
}
.chat-input{
  flex:1;
  padding:10px 14px;
  border:1px solid rgba(201,168,76,0.2);
  border-radius:20px;
  font-family:'Cairo',sans-serif;
  font-size:13px;
  outline:none;
}
.chat-input:focus{border-color:var(--gold)}
.chat-send{
  width:40px;height:40px;
  border-radius:50%;
  background:var(--gold);
  color:var(--navy);
  border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;
  transition:background 0.3s,transform 0.3s;
  flex-shrink:0;
}
.chat-send:hover{background:var(--gold2);transform:scale(1.1)}
@media(max-width:400px){
  .chat-panel{width:calc(100vw - 32px)}
}

/* GROUP 6: PARTNERS SECTION */
.partners-section{
  background:var(--cream);
  padding:60px 6%;
  text-align:center;
}
.partners-grid{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:40px;
  margin-top:32px;
}
.partner-badge{
  width:100px;height:100px;
  border:1px solid rgba(201,168,76,0.2);
  border-radius:4px;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:8px;
  background:var(--white);
  transition:transform 0.3s,border-color 0.3s;
}
.partner-badge:hover{
  transform:translateY(-4px);
  border-color:var(--gold);
}
.partner-badge-icon{
  font-size:28px;
}
.partner-badge-name{
  font-size:9px;color:var(--muted);
  font-weight:600;letter-spacing:1px;
  text-transform:uppercase;
}
@media(max-width:768px){
  .partners-grid{gap:20px}
  .partner-badge{width:80px;height:80px}
  .partner-badge-icon{font-size:22px}
  .partner-badge-name{font-size:8px}
}

/* TESTIMONIALS */
.testimonials-section{
  background:var(--navy);
  padding:100px 6%;
  overflow:hidden;
}
.testimonials-track{
  display:flex;gap:24px;
  transition:transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  direction:ltr !important; /* Force LTR for absolute cross-browser translation reliability */
}
.testimonial-card{
  flex:0 0 calc(33.333% - 16px);
  min-width:300px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(201,168,76,0.15);
  border-radius:4px;
  padding:32px;
  position:relative;
}
/* Ensure testimonial cards preserve their correct language layout orientation */
html[dir="rtl"] .testimonial-card {
  direction:rtl !important;
  text-align:right !important;
}
html[dir="ltr"] .testimonial-card {
  direction:ltr !important;
  text-align:left !important;
}
.testimonial-stars{
  color:var(--gold);font-size:14px;
  letter-spacing:4px;
  margin-bottom:20px;
}
.testimonial-text{
  font-size:14px;color:rgba(255,255,255,0.6);
  line-height:2;
  margin-bottom:24px;
  font-style:italic;
}
.testimonial-text::before{
  content:'\201C';font-size:48px;
  color:var(--gold);opacity:0.3;
  position:absolute;top:16px;right:24px;
  font-family:Georgia,serif;line-height:1;
}
html[dir="ltr"] .testimonial-text::before{right:auto;left:24px}
.testimonial-author{
  display:flex;align-items:center;gap:14px;
}
.testimonial-avatar{
  width:44px;height:44px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:16px;color:var(--navy);
  flex-shrink:0;
}
.testimonial-name{
  font-size:14px;font-weight:700;
  color:var(--white);
}
.testimonial-role{
  font-size:11px;color:rgba(255,255,255,0.4);
}
.testimonials-nav{
  display:flex;justify-content:center;gap:12px;
  margin-top:40px;
}
.testimonials-nav button{
  width:44px;height:44px;
  border-radius:50%;
  border:1px solid rgba(201,168,76,0.3);
  background:rgba(255,255,255,0.04);
  color:var(--gold);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background 0.3s,border-color 0.3s;
  font-size:18px;
}
.testimonials-nav button:hover{
  background:var(--gold);
  color:var(--navy);
  border-color:var(--gold);
}
@media(max-width:900px){
  .testimonial-card{flex:0 0 calc(50% - 12px);min-width:260px}
}
@media(max-width:600px){
  .testimonial-card{flex:0 0 90vw;min-width:auto}
  .testimonials-section{padding:80px 4%}
}

/* ================================================
   GROUP 3: DESIGN ENHANCEMENTS
   ================================================ */

/* Section Transition Gradients */
.section-transition{
  height:80px;
  position:relative;
  z-index:1;
}
.section-transition-dark{
  background:linear-gradient(to bottom,var(--cream),var(--navy));
}
.section-transition-light{
  background:linear-gradient(to bottom,var(--navy),var(--cream));
}
.section-transition-cream{
  background:linear-gradient(to bottom,var(--navy),var(--cream2));
}
.section-transition-white{
  background:linear-gradient(to bottom,var(--cream2),var(--white));
}
.section-transition-white-cream{
  background:linear-gradient(to bottom,var(--white),var(--cream));
}
.section-transition-navy{
  background:linear-gradient(to bottom,var(--cream),var(--navy));
}
@media(max-width:768px){
  .section-transition{height:40px}
}

/* 3D Card Tilt Effect on Service Cards (Desktop Only) */
@media(hover:hover) and (pointer:fine){
  .srv-card{
    transform-style:preserve-3d;
    perspective:1000px;
  }
}

/* Gradient Mesh Background for Hero (Animated) */
.hero-gradient-mesh{
  position:absolute;inset:0;z-index:-1;
  opacity:0.3;
}
.hero-gradient-mesh::before,
.hero-gradient-mesh::after{
  content:'';position:absolute;
  border-radius:50%;
  filter:blur(80px);
  animation:meshFloat 8s ease-in-out infinite;
}
.hero-gradient-mesh::before{
  width:600px;height:600px;
  background:radial-gradient(circle,rgba(201,168,76,0.3),transparent);
  top:-200px;right:-100px;
}
.hero-gradient-mesh::after{
  width:500px;height:500px;
  background:radial-gradient(circle,rgba(201,168,76,0.15),transparent);
  bottom:-200px;left:-100px;
  animation-delay:4s;
}
html[dir="ltr"] .hero-gradient-mesh::before{right:auto;left:-100px}
html[dir="ltr"] .hero-gradient-mesh::after{left:auto;right:-100px}
@keyframes meshFloat{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(30px,-20px) scale(1.1)}
  66%{transform:translate(-20px,30px) scale(0.9)}
}
@media(max-width:768px){
  .hero-gradient-mesh::before{width:300px;height:300px;top:-100px}
  .hero-gradient-mesh::after{width:250px;height:250px;bottom:-100px}
}

/* GROUP 7: RIPPLE EFFECT */
.btn-primary,.btn-ghost,.nav-cta,.calc-btn,.chat-send,.back-to-top{
  position:relative;overflow:hidden;
}
.ripple{
  position:absolute;border-radius:50%;
  background:rgba(255,255,255,0.3);
  transform:scale(0);
  animation:rippleEffect 0.6s ease-out;
  pointer-events:none;
}
@keyframes rippleEffect{
  to{transform:scale(4);opacity:0}
}

/* GROUP 10: TOAST NOTIFICATIONS */
.toast-container{
  position:fixed;top:100px;right:24px;z-index:2000;
  display:flex;flex-direction:column;gap:8px;
}
html[dir="ltr"] .toast-container{right:auto;left:24px}
.toast{
  background:var(--white);
  border:1px solid rgba(201,168,76,0.2);
  border-left:4px solid var(--gold);
  border-radius:4px;
  padding:14px 20px;
  box-shadow:0 8px 32px rgba(0,0,0,0.12);
  font-size:13px;color:var(--navy);
  max-width:340px;
  opacity:0;transform:translateX(100%);
  transition:opacity 0.3s,transform 0.3s;
  font-family:'Cairo',sans-serif;
}
html[dir="ltr"] .toast{border-left:none;border-right:4px solid var(--gold);transform:translateX(-100%)}
.toast.show{opacity:1;transform:translateX(0)}
.toast.success{border-left-color:#16a34a;border-right-color:#16a34a}
.toast.error{border-left-color:#e74c3c;border-right-color:#e74c3c}
@media(max-width:768px){
  .toast-container{right:12px;left:12px}
  .toast{max-width:calc(100vw - 24px)}
}

/* GROUP 10: PAUSE ANIMATIONS WHEN PAGE HIDDEN */
.page-hidden *{
  animation-play-state:paused!important;
}

/* GROUP 9: PRINT STYLES */
@media print{
  body{background:#fff!important;color:#000!important}
  nav,.back-to-top,.social-float,.chat-widget,.bottom-nav,.scroll-progress,.announcement-bar,#cursor,#cursor-ring,.hero-canvas,.hero-gradient-mesh{display:none!important}
  .hero{min-height:auto!important;background:#fff!important;padding:40px 0!important}
  .hero *{color:#000!important;-webkit-text-fill-color:#000!important;opacity:1!important}
  section{page-break-inside:avoid;padding:30px 0!important}
  .services-grid,.projects-grid{display:block!important}
  .srv-card,.proj-card{break-inside:avoid;box-shadow:none!important;border:1px solid #ddd!important;page-break-inside:avoid;margin-bottom:20px}
  .contact-form-wrap{box-shadow:none!important;border:1px solid #ddd!important}
  footer{background:#f5f5f5!important}
  footer *{color:#000!important}
  a{color:#000!important;text-decoration:underline!important}
}

/* ================================================
   NEW SECTIONS: TEAM, TIMELINE, GALLERY, B/A, BLOG, NEWSLETTER, SEARCH, AWARDS, MARQUEE, COOKIE
   ================================================ */

/* 1. TEAM SECTION */
#team{scroll-margin-top:80px}
.team-section{
  background:var(--cream);
  padding:120px 6%;
}
.team-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  margin-top:60px;
}
.team-card{
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border:1px solid rgba(201,168,76,0.12);
  border-radius:4px;
  padding:40px 28px;
  text-align:center;
  transition:transform 0.5s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.5s, border-color 0.5s, background 0.5s;
  position:relative;
  overflow:hidden;
}
.team-card:hover{
  background: rgba(255, 255, 255, 0.95);
  transform:translateY(-8px);
  border-color: rgba(201, 168, 76, 0.4);
  box-shadow: 0 30px 60px rgba(201, 168, 76, 0.12);
}
.team-card::before{
  content:'';position:absolute;
  top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--gold),var(--gold2));
  transform:scaleX(0);transition:transform 0.5s;
}
.team-card:hover::before{transform:scaleX(1)}
.team-avatar{
  width:80px;height:80px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--navy),var(--navy2));
  border:2px solid var(--gold);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 20px;
  font-size:28px;font-weight:900;
  color:var(--gold);
  transition:border-color 0.3s,transform 0.3s;
}
.team-card:hover .team-avatar{
  border-color:var(--gold2);
  transform:scale(1.05);
}
.team-name{
  font-size:16px;font-weight:700;
  color:var(--navy);margin-bottom:4px;
}
.team-title-ar{
  font-size:13px;font-weight:600;
  color:var(--gold);margin-bottom:2px;
}
.team-title-en{
  font-size:11px;color:var(--muted);
  letter-spacing:1px;text-transform:uppercase;
  margin-bottom:12px;
}
.team-bio{
  font-size:13px;color:var(--muted);
  line-height:1.8;margin-bottom:16px;
}
.team-linkedin{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;
  border-radius:50%;
  border:1px solid rgba(201,168,76,0.25);
  color:var(--gold);text-decoration:none;
  transition:background 0.3s,border-color 0.3s,color 0.3s;
  font-size:16px;
}
.team-linkedin:hover{
  background:var(--gold);border-color:var(--gold);
  color:var(--navy);
}

/* 2. TIMELINE SECTION */
#timeline{scroll-margin-top:80px}
.timeline-section{
  background:var(--white);
  padding:120px 6%;
  position:relative;
}
.timeline-wrapper{
  position:relative;
  max-width:800px;
  margin:60px auto 0;
}
.timeline-line{
  position:absolute;
  top:0;bottom:0;
  left:50%;width:2px;
  background:linear-gradient(180deg,var(--gold),rgba(201,168,76,0.2));
  margin-left:-1px; /* Replaced transform: translateX(-50%) to prevent subpixel rounding mismatch */
}
html[dir="ltr"] .timeline-line{left:50%}
.timeline-item{
  display:flex;
  align-items:flex-start;
  margin-bottom:60px;
  position:relative;
}
.timeline-item:nth-child(odd){
  flex-direction:row-reverse;
  text-align:left;
}
html[dir="ltr"] .timeline-item:nth-child(odd){
  flex-direction:row;
}
.timeline-item:nth-child(even){
  text-align:right;
}
html[dir="ltr"] .timeline-item:nth-child(even){
  text-align:left;
}
.timeline-content{
  width:calc(50% - 40px);
  background:var(--cream);
  border:1px solid rgba(201,168,76,0.15);
  border-radius:4px;
  padding:28px 24px;
  position:relative;
  opacity:0;transform:translateY(30px);
  transition:opacity 0.7s ease,transform 0.7s ease;
}
.timeline-content.visible{opacity:1;transform:translateY(0)}
.timeline-dot{
  position:absolute;
  left:50%;top:30px;
  width:16px;height:16px;
  background:var(--gold);
  border:3px solid var(--white);
  border-radius:50%;
  margin-left:-8px; /* Replaced transform: translateX(-50%) to prevent subpixel rounding mismatch */
  z-index:2;
  box-shadow:0 0 0 4px rgba(201,168,76,0.2);
}
.timeline-year{
  font-family:'Cormorant Garamond',serif;
  font-size:36px;font-weight:600;
  color:var(--gold);margin-bottom:8px;
  line-height:1;
}
.timeline-title{
  font-size:16px;font-weight:700;
  color:var(--navy);margin-bottom:8px;
}
.timeline-desc{
  font-size:13px;color:var(--muted);
  line-height:1.8;
}

/* 3. PHOTO GALLERY & LIGHTBOX */
.gallery-section{
  background:var(--navy);
  padding:120px 6%;
}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:60px;
}
.gallery-item{
  position:relative;
  aspect-ratio:4/3;
  cursor:pointer;
  overflow:hidden;
  border-radius:4px;
  background:var(--navy2);
}
.gallery-item:first-child{grid-column:span 2;grid-row:span 2}
.gallery-item-bg{
  position:absolute;inset:0;
  transition:transform 0.6s;
}
.gallery-item:hover .gallery-item-bg{transform:scale(1.08)}
.gallery-item-overlay{
  position:absolute;inset:0;
  background:rgba(8,20,46,0.4);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity 0.3s;
  font-size:36px;color:var(--gold);
}
.gallery-item:hover .gallery-item-overlay{opacity:1}
.gallery-item-title{
  position:absolute;bottom:12px;left:12px;right:12px;
  font-size:13px;font-weight:700;color:var(--white);
  opacity:0;transform:translateY(8px);
  transition:opacity 0.3s,transform 0.3s;
}
.gallery-item:hover .gallery-item-title{opacity:1;transform:translateY(0)}

/* Lightbox */
.lightbox-backdrop{
  position:fixed;inset:0;z-index:3000;
  background:rgba(0,0,0,0.95);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;
  transition:opacity 0.4s,visibility 0.4s;
  padding:40px;
}
.lightbox-backdrop.open{opacity:1;visibility:visible}
.lightbox-content{
  position:relative;
  max-width:900px;max-height:80vh;
  width:100%;
  border-radius:4px;
  overflow:hidden;
}
.lightbox-image{
  width:100%;aspect-ratio:16/9;
  border-radius:4px;
  display:flex;align-items:center;justify-content:center;
}
.lightbox-caption{
  position:absolute;bottom:0;left:0;right:0;
  padding:20px 24px;
  background:linear-gradient(transparent,rgba(0,0,0,0.8));
  color:var(--white);font-size:14px;
}
.lightbox-close{
  position:absolute;top:-50px;right:0;
  background:none;border:none;
  color:var(--white);font-size:32px;
  cursor:pointer;padding:8px;
  transition:color 0.3s,transform 0.3s;
  min-height:44px;min-width:44px;
  display:flex;align-items:center;justify-content:center;
}
html[dir="ltr"] .lightbox-close{right:auto;left:0}
.lightbox-close:hover{color:var(--gold);transform:rotate(90deg)}
.lightbox-nav{
  position:absolute;top:50%;
  transform:translateY(-50%);
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.2);
  color:var(--white);
  width:48px;height:48px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:20px;
  transition:background 0.3s,border-color 0.3s;
  min-height:44px;
}
.lightbox-nav:hover{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.lightbox-prev{left:-70px}
.lightbox-next{right:-70px}
html[dir="ltr"] .lightbox-prev{left:auto;right:-70px}
html[dir="ltr"] .lightbox-next{right:auto;left:-70px}

/* 4. BEFORE/AFTER SLIDER */
.ba-section{
  background:var(--cream);
  padding:120px 6%;
}
.ba-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  margin-top:60px;
}
.ba-item{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  border-radius:4px;
  border:1px solid rgba(201,168,76,0.15);
  user-select:none;
}
.ba-layer{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.ba-before{
  z-index:2;
  clip-path:inset(0 50% 0 0);
}
.ba-after{z-index:1}
.ba-label{
  position:absolute;top:16px;
  padding:6px 16px;
  background:rgba(0,0,0,0.6);
  color:var(--white);
  font-size:12px;font-weight:700;
  letter-spacing:1px;
  border-radius:2px;
  z-index:5;
}
.ba-label-before{right:16px}
html[dir="ltr"] .ba-label-before{right:auto;left:16px}
.ba-label-after{left:16px}
html[dir="ltr"] .ba-label-after{left:auto;right:16px}
.ba-handle{
  position:absolute;
  top:0;bottom:0;
  left:50%;width:4px;
  background:var(--gold);
  z-index:10;
  cursor:ew-resize;
  transform:translateX(-50%);
}
.ba-handle::before{
  content:'⟨ ⟩';
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:44px;height:44px;
  background:var(--gold);
  color:var(--navy);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:900;
  letter-spacing:4px;
  box-shadow:0 4px 20px rgba(0,0,0,0.3);
}

/* 5. BLOG SECTION */
#blog{scroll-margin-top:80px}
.blog-section{
  background:var(--cream);
  padding:120px 6%;
}
.blog-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:60px;
}
.blog-card{
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border:1px solid rgba(201, 168, 76, 0.12);
  border-radius:4px;
  overflow:hidden;
  transition:transform 0.5s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.5s, border-color 0.5s, background 0.5s;
}
.blog-card:hover{
  background: rgba(255, 255, 255, 0.95);
  transform:translateY(-8px);
  border-color: rgba(201, 168, 76, 0.4);
  box-shadow: 0 30px 60px rgba(201, 168, 76, 0.12);
}
.blog-card-image{
  height:180px;
  position:relative;
  overflow:hidden;
}
.blog-card-tag{
  position:absolute;top:16px;right:16px;
  background:var(--gold);color:var(--navy);
  font-size:10px;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;
  padding:4px 12px;border-radius:2px;
}
html[dir="ltr"] .blog-card-tag{right:auto;left:16px}
.blog-card-body{
  padding:24px;
}
.blog-card-date{
  font-size:11px;color:var(--muted);
  letter-spacing:1px;margin-bottom:10px;
}
.blog-card-title{
  font-size:17px;font-weight:700;
  color:var(--navy);margin-bottom:10px;
  line-height:1.5;
}
.blog-card-excerpt{
  font-size:13px;color:var(--muted);
  line-height:1.8;margin-bottom:16px;
}
.blog-card-link{
  font-size:12px;font-weight:700;
  color:var(--gold);letter-spacing:1px;
  text-transform:uppercase;
  text-decoration:none;
  display:inline-flex;align-items:center;gap:6px;
  transition:color 0.3s,gap 0.3s;
}
.blog-card-link:hover{color:var(--gold2);gap:10px}

/* 6. NEWSLETTER */
.newsletter-section{
  background:var(--navy);
  padding:80px 6%;
  position:relative;
  overflow:hidden;
}
.newsletter-section::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,transparent,transparent 40px,rgba(201,168,76,0.03) 40px,rgba(201,168,76,0.03) 41px);
  pointer-events:none;
}
.newsletter-inner{
  max-width:600px;margin:0 auto;
  text-align:center;position:relative;
}
.newsletter-inner .section-eyebrow{justify-content:center}
.newsletter-inner .section-h2{
  color:var(--white);
  text-align:center;
  margin-bottom:20px;
}
.newsletter-desc{
  font-size:14px;color:rgba(255,255,255,0.5);
  line-height:2;margin-bottom:32px;
}
.newsletter-form{
  display:flex;gap:12px;
  max-width:500px;margin:0 auto;
}
.newsletter-input{
  flex:1;
  padding:14px 20px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(201,168,76,0.3);
  border-radius:2px;
  color:var(--white);
  font-family:'Cairo',sans-serif;
  font-size:14px;
  outline:none;
  transition:border-color 0.3s,box-shadow 0.3s;
}
.newsletter-input::placeholder{color:rgba(255,255,255,0.3)}
.newsletter-input:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,168,76,0.15);
}
.newsletter-btn{
  background:var(--gold);color:var(--navy);
  border:none;padding:14px 28px;
  border-radius:2px;
  font-family:'Cairo',sans-serif;
  font-size:14px;font-weight:700;
  cursor:pointer;white-space:nowrap;
  transition:background 0.3s,transform 0.3s;
}
.newsletter-btn:hover{background:var(--gold2);transform:translateY(-2px)}
.newsletter-input.error{border-color:#e74c3c}
.newsletter-toast{
  margin-top:16px;
  padding:12px 20px;
  background:rgba(74,222,128,0.15);
  border:1px solid rgba(74,222,128,0.3);
  border-radius:2px;
  color:#4ade80;
  font-size:13px;font-weight:600;
  display:none;
}
.newsletter-toast.show{display:block}

/* 7. COOKIE CONSENT */
.cookie-banner{
  position:fixed;bottom:0;left:0;right:0;
  z-index:2000;
  background:var(--navy);
  border-top:1px solid rgba(201,168,76,0.2);
  padding:20px 6%;
  display:flex;align-items:center;justify-content:center;
  gap:20px;
  flex-wrap:wrap;
  transform:translateY(100%);
  transition:transform 0.5s ease;
  backdrop-filter:blur(20px);
}
.cookie-banner.show{transform:translateY(0)}
.cookie-text{
  font-size:13px;color:rgba(255,255,255,0.7);
  flex:1;min-width:250px;line-height:1.8;
}
.cookie-buttons{
  display:flex;gap:10px;flex-wrap:wrap;
}
.cookie-btn{
  padding:10px 20px;
  border-radius:2px;
  font-family:'Cairo',sans-serif;
  font-size:12px;font-weight:700;
  cursor:pointer;
  transition:background 0.3s,transform 0.3s;
  letter-spacing:0.5px;
  min-height:44px;
}
.cookie-btn:hover{transform:translateY(-2px)}
.cookie-accept{
  background:var(--gold);color:var(--navy);border:none;
}
.cookie-accept:hover{background:var(--gold2)}
.cookie-decline{
  background:transparent;color:rgba(255,255,255,0.6);
  border:1px solid rgba(255,255,255,0.2);
}
.cookie-decline:hover{border-color:rgba(255,255,255,0.5);color:var(--white)}
.cookie-preferences{
  background:transparent;color:var(--gold);
  border:1px solid rgba(201,168,76,0.3);
}
.cookie-preferences:hover{background:rgba(201,168,76,0.1)}

/* 8. SEARCH OVERLAY */
.search-overlay{
  position:fixed;inset:0;z-index:3000;
  background:var(--overlay-bg);
  backdrop-filter:blur(20px);
  display:flex;flex-direction:column;
  align-items:center;
  padding:120px 6% 60px;
  opacity:0;visibility:hidden;
  transition:opacity 0.4s,visibility 0.4s;
}
.search-overlay.open{opacity:1;visibility:visible}
.search-overlay-close{
  position:absolute;top:24px;left:24px;
  background:none;border:none;
  color:var(--gold);font-size:32px;
  cursor:pointer;padding:8px;
  transition:color 0.3s,transform 0.3s;
  min-width:48px;min-height:48px;
  display:flex;align-items:center;justify-content:center;
}
html[dir="ltr"] .search-overlay-close{left:auto;right:24px}
.search-overlay-close:hover{color:var(--gold2);transform:rotate(90deg)}
.search-input-wrap{
  width:100%;max-width:700px;
  margin-bottom:40px;
}
.search-input-wrap h3{
  font-size:14px;color:var(--gold);
  letter-spacing:3px;text-transform:uppercase;
  font-weight:600;margin-bottom:16px;
  text-align:center;
}
.search-input{
  width:100%;
  padding:18px 24px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(201,168,76,0.3);
  border-radius:4px;
  color:var(--white);
  font-family:'Cairo',sans-serif;
  font-size:20px;font-weight:600;
  outline:none;
  text-align:center;
  transition:border-color 0.3s,box-shadow 0.3s;
}
.search-input::placeholder{color:rgba(255,255,255,0.25);font-weight:400}
.search-input:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(201,168,76,0.15);
}
.search-results{
  width:100%;max-width:700px;
  max-height:50vh;
  overflow-y:auto;
}
.search-result-item{
  display:flex;align-items:center;gap:16px;
  padding:16px 20px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  text-decoration:none;
  transition:background 0.3s;
  border-radius:4px;
}
.search-result-item:hover{background:rgba(201,168,76,0.08)}
.search-result-icon{
  width:40px;height:40px;
  border:1px solid rgba(201,168,76,0.3);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--gold);font-size:16px;flex-shrink:0;
}
.search-result-text{flex:1}
.search-result-name{
  font-size:15px;font-weight:700;
  color:var(--white);margin-bottom:2px;
}
.search-result-desc{
  font-size:12px;color:rgba(255,255,255,0.4);
}
.search-no-results{
  text-align:center;
  padding:40px;
  color:rgba(255,255,255,0.4);
  font-size:15px;
}

/* 9. AWARDS SECTION */
.awards-section{
  background:var(--white);
  padding:100px 6%;
}
.awards-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  margin-top:60px;
}
.award-card{
  background:var(--cream);
  border:1px solid rgba(201,168,76,0.12);
  border-radius:4px;
  padding:32px 24px;
  text-align:center;
  transition:transform 0.5s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.5s;
}
.award-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 48px rgba(8,20,46,0.1);
}
.award-icon{
  font-size:40px;margin-bottom:16px;
}
.award-title{
  font-size:14px;font-weight:700;
  color:var(--navy);margin-bottom:6px;
  line-height:1.5;
}
.award-year{
  font-size:12px;color:var(--gold);
  font-weight:600;letter-spacing:1px;
  margin-bottom:6px;
}
.award-body{
  font-size:11px;color:var(--muted);
  line-height:1.7;
}

/* 10. CLIENT LOGOS MARQUEE */
.marquee-section{
  background:var(--cream);
  padding:60px 0;
  overflow:hidden;
  direction:ltr !important; /* Force LTR parent layout to align the marquee track to the left and resolve RTL translation gaps */
}
.marquee-track{
  display:flex;
  flex-wrap:nowrap !important;
  width:max-content;
  direction:ltr !important; /* Force LTR for seamless infinite scrolling without RTL blank spaces */
  animation:marqueeScroll 30s linear infinite;
}
.marquee-track:hover{animation-play-state:paused}
.marquee-item{
  flex-shrink:0;
  padding:12px 32px;
  margin:0 12px;
  background:var(--white);
  border:1px solid rgba(201,168,76,0.15);
  border-radius:4px;
  white-space:nowrap;
  font-size:14px;font-weight:700;
  color:var(--navy);
  letter-spacing:1px;
  display:flex;align-items:center;gap:10px;
  transition:border-color 0.3s;
}
/* Ensure marquee items preserve their correct language layout orientation */
html[dir="rtl"] .marquee-item {
  direction:rtl !important;
}
html[dir="ltr"] .marquee-item {
  direction:ltr !important;
}
.marquee-item:hover{border-color:var(--gold)}
.marquee-item-icon{font-size:20px}
@keyframes marqueeScroll{
  0%{transform:translateX(0)}
  100%{transform:translateX(-25%)} /* Translates exactly 1 copy (25%) out of 4 copies, leaving 3 copies (75%) visible so there are absolutely no trailing empty gaps on any widescreen monitor */
}
html[dir="ltr"] .marquee-track{
  animation-name:marqueeScrollLTR;
}
@keyframes marqueeScrollLTR{
  0%{transform:translateX(0)}
  100%{transform:translateX(-25%)} /* Translates exactly 25% of the total 4-copy track width for seamless, infinite looping */
}

/* SEARCH ICON IN NAV */
.nav-search-btn{
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(201,168,76,0.25);
  color:var(--gold2);
  width:38px;height:38px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:16px;
  transition:background 0.3s,border-color 0.3s,transform 0.3s;
  flex-shrink:0;
}
.nav-search-btn:hover{
  background:rgba(201,168,76,0.15);
  border-color:var(--gold);
  transform:scale(1.08);
}

/* NEW SECTIONS — RESPONSIVE */
@media(max-width:1100px){
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .blog-grid{grid-template-columns:repeat(2,1fr)}
  .awards-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .team-grid{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:1fr}
  .ba-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr 1fr}
  .gallery-item:first-child{grid-column:auto;grid-row:auto}
  .newsletter-form{flex-direction:column}
  .awards-grid{grid-template-columns:1fr 1fr}
  .lightbox-prev,.lightbox-next{display:none}
  .lightbox-backdrop{padding:20px}
  .cookie-banner{
    flex-direction:column;
    text-align:center;
    gap:16px;
    padding:16px;
  }
  .cookie-buttons{justify-content:center}
}
@media(max-width:600px){
  .awards-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr}
  
  /* Timeline Line positioning - aligns on the right in RTL (Arabic) and left in LTR (English) */
  .timeline-line{
    left: auto !important;
    right: 20px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  html[dir="ltr"] .timeline-line{
    right: auto !important;
    left: 20px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Timeline Item spacing - padding is on the right in RTL and left in LTR to perfectly encapsulate line/dots */
  .timeline-item, .timeline-item:nth-child(odd){
    flex-direction: row !important;
    text-align: right !important;
    padding-right: 50px !important;
    padding-left: 0 !important;
  }
  html[dir="ltr"] .timeline-item, html[dir="ltr"] .timeline-item:nth-child(odd){
    text-align: left !important;
    padding-left: 50px !important;
    padding-right: 0 !important;
  }
  
  .timeline-content{
    width: 100% !important;
  }
  
  /* Timeline Dots - precisely centers the 16px dot on the 2px line at 20px offset (20px - 8px + 1px = 13px edge offset) */
  .timeline-dot{
    left: auto !important;
    right: 13px !important;
    transform: none !important;
    margin-left: 0 !important; /* Reset desktop margin shift */
  }
  html[dir="ltr"] .timeline-dot{
    right: auto !important;
    left: 13px !important;
    transform: none !important;
    margin-left: 0 !important; /* Reset desktop margin shift */
  }
}

/* ================================================
   FEATURE 1: FAQ SEARCH INPUT
   ================================================ */
.faq-search-wrap{
  max-width:800px;
  margin:24px auto 0;
  position:relative;
}
.faq-search-input{
  width:100%;
  padding:14px 48px 14px 18px;
  background:var(--white);
  border:1px solid rgba(201,168,76,0.25);
  border-radius:2px;
  font-family:'Cairo',sans-serif;
  font-size:14px;
  color:var(--navy);
  outline:none;
  transition:border-color 0.3s,box-shadow 0.3s;
}
html[dir="ltr"] .faq-search-input{
  padding:14px 18px 14px 48px;
}
.faq-search-input:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,168,76,0.1);
}
.faq-search-input::placeholder{color:rgba(26,20,40,0.3)}
.faq-search-icon{
  position:absolute;
  top:50%;right:16px;
  transform:translateY(-50%);
  color:var(--gold);
  pointer-events:none;
}
html[dir="ltr"] .faq-search-icon{right:auto;left:16px}
.faq-no-results{
  text-align:center;
  padding:40px 20px;
  color:var(--muted);
  font-size:15px;
  display:none;
}

/* ================================================
   FEATURE 2: TESTIMONIAL PLAY/PAUSE BUTTON
   ================================================ */
.testimonials-nav button.test-playpause{
  width:44px;height:44px;
  border-radius:50%;
  border:1px solid rgba(201,168,76,0.3);
  background:rgba(255,255,255,0.04);
  color:var(--gold);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background 0.3s,border-color 0.3s;
  font-size:16px;
}
.testimonials-nav button.test-playpause:hover{
  background:var(--gold);
  color:var(--navy);
  border-color:var(--gold);
}

/* ================================================
   FEATURE 4: REAL-TIME FORM VALIDATION
   ================================================ */
.field-validation{
  font-size:11px;
  margin-top:4px;
  min-height:18px;
  display:flex;
  align-items:center;
  gap:4px;
  transition:opacity 0.2s;
}
.field-validation.valid{color:#16a34a}
.field-validation.invalid{color:#e74c3c}
.field-validation .fv-icon{font-size:13px;font-weight:700}

/* ================================================
   FEATURE 5: BOOKING / APPOINTMENT FORM
   ================================================ */
.booking-section{
  background:var(--cream);
  padding:100px 6%;
}
.booking-inner{
  max-width:700px;
  margin:0 auto;
}
.booking-form-wrap{
  background:var(--white);
  border-radius:4px;
  padding:48px 40px;
  box-shadow:var(--shadow-card);
  border-top:3px solid var(--gold);
  position:relative;
  overflow:hidden;
}
.booking-form-wrap::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,transparent,transparent 40px,rgba(201,168,76,0.02) 40px,rgba(201,168,76,0.02) 41px);
  pointer-events:none;
}
.booking-form-wrap>*{position:relative}
.booking-time-slots{
  display:flex;gap:12px;
  flex-wrap:wrap;
}
.booking-time-slot{
  flex:1;
  min-width:120px;
  padding:12px 16px;
  border:2px solid rgba(201,168,76,0.2);
  border-radius:2px;
  background:var(--white);
  text-align:center;
  cursor:pointer;
  font-family:'Cairo',sans-serif;
  font-size:13px;
  font-weight:600;
  color:var(--navy);
  transition:border-color 0.3s,background 0.3s,color 0.3s;
}
.booking-time-slot:hover{
  border-color:var(--gold);
  background:rgba(201,168,76,0.05);
}
.booking-time-slot.selected{
  border-color:var(--gold);
  background:var(--gold);
  color:var(--navy);
}
.booking-confirmation-overlay{
  position:fixed;inset:0;z-index:3000;
  background:rgba(8,20,46,0.85);
  backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;
  transition:opacity 0.4s,visibility 0.4s;
  padding:20px;
}
.booking-confirmation-overlay.open{opacity:1;visibility:visible}
.booking-confirmation{
  background:var(--white);
  max-width:480px;width:100%;
  border-radius:4px;
  padding:48px 40px;
  text-align:center;
  transform:translateY(30px) scale(0.97);
  transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.booking-confirmation-overlay.open .booking-confirmation{transform:translateY(0) scale(1)}
.booking-confirm-icon{
  width:80px;height:80px;
  border:2px solid var(--gold);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 24px;
  font-size:36px;
  color:var(--gold);
}
.booking-confirm-title{
  font-size:24px;font-weight:900;
  color:var(--navy);margin-bottom:12px;
}
.booking-confirm-text{
  font-size:14px;color:var(--muted);
  line-height:1.8;margin-bottom:28px;
}
.booking-confirm-close{
  background:var(--gold);color:var(--navy);
  border:none;padding:14px 36px;
  border-radius:2px;
  font-family:'Cairo',sans-serif;
  font-size:14px;font-weight:700;
  cursor:pointer;transition:background 0.3s,transform 0.3s;
}
.booking-confirm-close:hover{background:var(--gold2);transform:translateY(-2px)}
@media(max-width:600px){
  .booking-form-wrap{padding:32px 20px}
}

/* ================================================
   FEATURE 6: PROJECT PROGRESS TRACKER
   ================================================ */
.progress-tracker-section{
  background:var(--cream2);
  padding:80px 6%;
}
.progress-tracker{
  max-width:800px;
  margin:40px auto 0;
  position:relative;
}
.progress-tracker::before{
  content:'';position:absolute;
  top:40px;left:0;right:0;height:4px;
  background:rgba(201,168,76,0.15);
  border-radius:2px;
}
.progress-tracker-line{
  position:absolute;
  top:40px;left:0;
  width:60%;height:4px;
  background:linear-gradient(90deg,var(--gold),var(--gold2));
  border-radius:2px;
  animation:progressLineGrow 2s ease-out forwards;
  transform-origin:left;
}
html[dir="ltr"] .progress-tracker-line{transform-origin:left}
@keyframes progressLineGrow{
  from{width:0}
  to{width:60%}
}
.progress-steps{
  display:flex;
  justify-content:space-between;
  position:relative;
}
.progress-step{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  flex:1;
  text-align:center;
}
.progress-step-circle{
  width:80px;height:80px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:28px;
  position:relative;
  z-index:2;
  transition:transform 0.3s,box-shadow 0.3s;
}
.progress-step-circle.completed{
  background:var(--gold);
  border:3px solid var(--gold2);
  box-shadow:0 4px 20px rgba(201,168,76,0.4);
}
.progress-step-circle.in-progress{
  background:var(--white);
  border:3px solid var(--gold);
  box-shadow:0 4px 20px rgba(201,168,76,0.3);
  animation:pulseProgress 2s ease-in-out infinite;
}
.progress-step-circle.pending{
  background:var(--white);
  border:3px solid rgba(201,168,76,0.2);
  color:var(--muted);
}
@keyframes pulseProgress{
  0%,100%{box-shadow:0 4px 20px rgba(201,168,76,0.3)}
  50%{box-shadow:0 4px 30px rgba(201,168,76,0.6)}
}
.progress-step-label{
  font-size:14px;font-weight:700;
  color:var(--navy);
}
.progress-step-sublabel{
  font-size:11px;color:var(--muted);
  letter-spacing:1px;
}
.progress-step.in-progress .progress-step-label{color:var(--gold)}
.progress-step.pending .progress-step-label{color:var(--muted)}
.progress-step.pending .progress-step-sublabel{color:rgba(107,100,117,0.5)}

@media(max-width:768px){
  .progress-tracker{padding:0 10px}
  .progress-steps{flex-direction:column;gap:24px;align-items:center}
  .progress-tracker::before,.progress-tracker-line{
    top:0;bottom:0;left:40px;right:auto;
    width:4px;height:100%;
    transform:none;
  }
  html[dir="ltr"] .progress-tracker::before,html[dir="ltr"] .progress-tracker-line{left:40px}
  @keyframes progressLineGrow{from{height:0}to{height:60%}}
  .progress-step{flex-direction:row;text-align:right;gap:16px;width:100%}
  html[dir="ltr"] .progress-step{text-align:left}
  .progress-step-circle{width:60px;height:60px;font-size:22px;flex-shrink:0}
  .progress-step-info{text-align:right}
  html[dir="ltr"] .progress-step-info{text-align:left}
}

/* ================================================
   FEATURE 7: INTERACTIVE PRICING TABLE
   ================================================ */
.pricing-section{
  background:var(--white);
  padding:100px 6%;
}
.pricing-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin:32px 0 48px;
}
.pricing-toggle-label{
  font-size:14px;font-weight:600;
  color:var(--muted);
  cursor:pointer;
  transition:color 0.3s;
}
.pricing-toggle-label.active{color:var(--navy)}
.pricing-toggle-switch{
  width:52px;height:28px;
  background:rgba(201,168,76,0.2);
  border-radius:14px;
  position:relative;
  cursor:pointer;
  transition:background 0.3s;
  border:none;
  padding:0;
}
.pricing-toggle-switch.active{
  background:var(--gold);
}
.pricing-toggle-switch::after{
  content:'';position:absolute;
  top:3px;left:3px;
  width:22px;height:22px;
  background:var(--white);
  border-radius:50%;
  transition:transform 0.3s;
  box-shadow:0 2px 6px rgba(0,0,0,0.15);
}
html[dir="ltr"] .pricing-toggle-switch::after{left:3px}
.pricing-toggle-switch.active::after{
  transform:translateX(24px);
}
html[dir="ltr"] .pricing-toggle-switch.active::after{
  transform:translateX(24px);
}
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  max-width:1000px;
  margin:0 auto;
}
.pricing-card{
  background:var(--cream);
  border:1px solid rgba(201,168,76,0.1);
  border-radius:4px;
  padding:40px 32px;
  text-align:center;
  position:relative;
  transition:transform 0.5s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.5s;
}
.pricing-card:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 60px rgba(8,20,46,0.12);
}
.pricing-card.recommended{
  background:var(--navy);
  border-color:var(--gold);
  box-shadow:0 20px 60px rgba(201,168,76,0.2);
  transform:scale(1.05);
}
.pricing-card.recommended:hover{transform:scale(1.05) translateY(-8px)}
.pricing-badge{
  position:absolute;
  top:-1px;left:50%;
  transform:translateX(-50%);
  background:var(--gold);
  color:var(--navy);
  padding:6px 20px;
  font-size:11px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  border-radius:0 0 4px 4px;
}
.pricing-plan-name{
  font-size:20px;font-weight:900;
  color:var(--navy);margin-bottom:8px;
}
.pricing-card.recommended .pricing-plan-name{color:var(--white)}
.pricing-plan-desc{
  font-size:13px;color:var(--muted);
  margin-bottom:24px;line-height:1.7;
}
.pricing-card.recommended .pricing-plan-desc{color:rgba(255,255,255,0.5)}
.pricing-price{
  margin-bottom:28px;
}
.pricing-amount{
  font-size:42px;font-weight:900;
  color:var(--navy);line-height:1;
}
.pricing-card.recommended .pricing-amount{color:var(--gold)}
.pricing-currency{
  font-size:14px;color:var(--muted);
  font-weight:600;
}
.pricing-original{
  font-size:14px;color:var(--muted);
  text-decoration:line-through;
  margin-bottom:4px;
  display:none;
}
.pricing-original.show{display:block}
.pricing-features{
  list-style:none;
  margin-bottom:32px;
  text-align:right;
}
html[dir="ltr"] .pricing-features{text-align:left}
.pricing-features li{
  padding:8px 0;
  font-size:13px;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:10px;
  border-bottom:1px solid rgba(201,168,76,0.08);
}
.pricing-card.recommended .pricing-features li{color:rgba(255,255,255,0.6)}
.pricing-features li:last-child{border-bottom:none}
.pricing-features .pf-check{
  color:#16a34a;font-weight:700;font-size:14px;flex-shrink:0;
}
.pricing-features .pf-cross{
  color:var(--muted);font-weight:700;font-size:14px;flex-shrink:0;opacity:0.4;
}
.pricing-card.recommended .pricing-features .pf-cross{color:rgba(255,255,255,0.3)}
.pricing-cta-btn{
  display:block;width:100%;
  padding:14px;
  border-radius:2px;
  font-family:'Cairo',sans-serif;
  font-size:14px;font-weight:700;
  cursor:pointer;
  text-align:center;
  text-decoration:none;
  transition:background 0.3s,transform 0.3s;
}
.pricing-cta-btn.outline{
  background:transparent;
  border:1px solid var(--gold);
  color:var(--gold);
}
.pricing-cta-btn.outline:hover{background:var(--gold);color:var(--navy)}
.pricing-cta-btn.solid{
  background:var(--gold);color:var(--navy);border:none;
}
.pricing-cta-btn.solid:hover{background:var(--gold2);transform:translateY(-2px)}
@media(max-width:900px){
  .pricing-grid{grid-template-columns:1fr;max-width:400px}
  .pricing-card.recommended{transform:none}
  .pricing-card.recommended:hover{transform:translateY(-8px)}
}
.pricing-save-tag{
  font-size:11px;color:#16a34a;font-weight:700;
  margin-top:4px;display:none;
}
.pricing-save-tag.show{display:block}

/* ================================================
   FEATURE 8: MATERIAL QUANTITY ESTIMATOR
   ================================================ */
.calc-tabs{
  display:flex;
  gap:4px;
  margin-bottom:32px;
  background:var(--cream);
  border-radius:2px;
  padding:4px;
}
.calc-tab{
  flex:1;
  padding:12px 16px;
  background:transparent;
  border:none;
  border-radius:2px;
  font-family:'Cairo',sans-serif;
  font-size:13px;
  font-weight:600;
  color:var(--muted);
  cursor:pointer;
  transition:background 0.3s,color 0.3s;
}
.calc-tab.active{
  background:var(--white);
  color:var(--navy);
  box-shadow:0 2px 8px rgba(0,0,0,0.06);
}
.calc-tab:hover:not(.active){color:var(--navy)}
.calc-panel{display:none}
.calc-panel.active{display:block}
.mat-result-card{
  margin-top:24px;
  padding:24px;
  background:var(--cream);
  border-radius:2px;
  border:1px solid rgba(201,168,76,0.15);
}
.mat-result-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 0;
  border-bottom:1px solid rgba(201,168,76,0.1);
}
.mat-result-row:last-child{border-bottom:none}
.mat-result-label{
  font-size:14px;font-weight:600;
  color:var(--navy);
}
.mat-result-value{
  font-size:16px;font-weight:700;
  color:var(--gold);
}
@media(max-width:600px){
  .calc-tabs{flex-direction:column}
}

/* ================================================
   FEATURE 10: COOKIE PREFERENCES PANEL
   ================================================ */
.cookie-prefs-panel{
  position:fixed;bottom:0;left:0;right:0;z-index:2001;
  background:var(--navy);
  border-top:1px solid rgba(201,168,76,0.2);
  padding:32px 6%;
  display:flex;align-items:center;justify-content:center;gap:40px;
  flex-wrap:wrap;
  transform:translateY(100%);
  transition:transform 0.5s ease;
  backdrop-filter:blur(20px);
}
.cookie-prefs-panel.open{transform:translateY(0)}
.cookie-prefs-inner{
  max-width:600px;width:100%;
}
.cookie-prefs-title{
  font-size:18px;font-weight:700;
  color:var(--white);margin-bottom:20px;
}
.cookie-pref-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.cookie-pref-label{
  font-size:14px;color:rgba(255,255,255,0.7);
}
.cookie-pref-desc{
  font-size:11px;color:rgba(255,255,255,0.4);margin-top:2px;
}
.cookie-toggle-switch{
  width:48px;height:26px;
  background:rgba(255,255,255,0.15);
  border-radius:13px;
  position:relative;
  cursor:pointer;
  transition:background 0.3s;
  border:none;padding:0;
  flex-shrink:0;
}
.cookie-toggle-switch.active{
  background:var(--gold);
}
.cookie-toggle-switch::after{
  content:'';position:absolute;
  top:3px;left:3px;
  width:20px;height:20px;
  background:var(--white);
  border-radius:50%;
  transition:transform 0.3s;
  box-shadow:0 2px 6px rgba(0,0,0,0.15);
}
html[dir="ltr"] .cookie-toggle-switch::after{left:3px}
.cookie-toggle-switch.active::after{
  transform:translateX(22px);
}
html[dir="ltr"] .cookie-toggle-switch.active::after{
  transform:translateX(22px);
}
.cookie-prefs-save{
  margin-top:20px;
  width:100%;
  padding:14px;
  background:var(--gold);
  color:var(--navy);
  border:none;
  border-radius:2px;
  font-family:'Cairo',sans-serif;
  font-size:14px;font-weight:700;
  cursor:pointer;
  transition:background 0.3s,transform 0.3s;
}
.cookie-prefs-save:hover{background:var(--gold2);transform:translateY(-2px)}
@media(max-width:768px){
  .cookie-prefs-panel{padding:20px 4%;gap:16px}
}


/* ================================================
   📱 COMPREHENSIVE MOBILE ENHANCEMENT
   Full redesign of all sections for small screens
   ================================================ */

/* --- GLOBAL MOBILE FIXES --- */
@media (max-width: 768px) {

  /* Smooth scrolling + prevent horizontal overflow */
  html { scroll-behavior: smooth; overflow-x: hidden; }
  body { overflow-x: hidden; }

  /* Base section padding reduction */
  section,
  .services-section,
  .team-section,
  .timeline-section,
  .philosophy-section,
  .faq-section,
  .calculator-section,
  .testimonials-section,
  .blog-section,
  .pricing-section,
  .newsletter-section,
  .contact-section,
  .booking-section,
  .awards-section,
  .progress-tracker-section {
    padding-left: 5% !important;
    padding-right: 5% !important;
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
}


/* --- NAVBAR MOBILE --- */
@media (max-width: 768px) {
  #navbar {
    padding: 0 5%;
    height: 64px;
  }
  #navbar.scrolled { height: 56px; }

  /* Smaller logo on mobile */
  .nav-emblem {
    width: 38px;
    height: 38px;
  }
  .nav-emblem span { font-size: 16px; }
  .nav-brand-ar { font-size: 13px; }
  .nav-brand-en { font-size: 9px; }

  /* Search button hidden on mobile to save space */
  .nav-search-btn { display: none; }
}


/* --- HERO SECTION MOBILE --- */
@media (max-width: 768px) {
  .hero {
    min-height: 100svh;
    padding: 80px 5% 60px !important;
    display: flex;
    align-items: flex-start;
  }

  .hero-inner {
    grid-template-columns: 1fr !important;
    padding-top: 0 !important;
    gap: 32px;
    align-items: flex-start;
  }

  /* Bigger, bolder hero headline on mobile */
  .hero-h1 {
    font-size: clamp(2rem, 7.5vw, 3rem) !important;
    line-height: 1.15 !important;
    margin-bottom: 20px;
  }

  .hero-en-title {
    font-size: clamp(0.75rem, 3vw, 1rem) !important;
    letter-spacing: 2px;
    margin-bottom: 20px;
  }

  .hero-desc {
    font-size: 14px !important;
    line-height: 1.85 !important;
    margin-bottom: 32px;
    color: rgba(255,255,255,0.65);
  }

  .hero-kicker { margin-bottom: 20px; }
  .hero-kicker-text { font-size: 10px !important; letter-spacing: 3px; }

  .hero-actions {
    flex-direction: column !important;
    gap: 12px !important;
    width: 100%;
  }
  .hero-actions .btn-primary,
  .hero-actions .btn-ghost {
    width: 100% !important;
    text-align: center !important;
    padding: 16px 24px !important;
    font-size: 15px;
  }

  /* Background text - scale down */
  .hero-bg-text {
    font-size: clamp(80px, 22vw, 130px) !important;
    bottom: -20px;
    left: -10px;
    letter-spacing: -4px;
  }
}


/* --- NUMBERS / STATISTICS MOBILE --- */
@media (max-width: 768px) {
  .numbers-section {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0;
    padding: 48px 5% !important;
  }

  .num-item {
    padding: 28px 16px !important;
    border-right: 1px solid rgba(201,168,76,0.1) !important;
    border-bottom: 1px solid rgba(201,168,76,0.06);
  }

  /* Remove right border from even items */
  .num-item:nth-child(2n) {
    border-right: none !important;
  }

  .num-icon { font-size: 18px; margin-bottom: 10px; }

  .num-val {
    font-size: clamp(1.8rem, 6vw, 2.4rem) !important;
    margin-bottom: 8px !important;
  }

  .num-label {
    font-size: 11px !important;
    letter-spacing: 0.5px;
  }
}


/* --- SECTION HEADERS MOBILE --- */
@media (max-width: 768px) {
  .section-h2 {
    font-size: clamp(1.7rem, 6vw, 2.4rem) !important;
    line-height: 1.2 !important;
    margin-bottom: 12px;
  }

  .section-h2 .italic {
    font-size: 0.9em;
  }

  .section-eyebrow {
    margin-bottom: 12px;
  }

  .section-header {
    grid-template-columns: 1fr !important;
    gap: 16px;
    margin-bottom: 36px;
  }

  .section-desc-col p {
    font-size: 14px !important;
    line-height: 1.85;
  }
}


/* --- SERVICES SECTION MOBILE --- */
@media (max-width: 768px) {
  .services-section { overflow: hidden; }

  /* Cards take full width with peek of next card */
  .services-grid .srv-card {
    flex: 0 0 82vw !important;
    max-width: 82vw !important;
    min-height: 300px !important;
    padding: 32px 24px !important;
  }

  .srv-number { font-size: 40px; margin-bottom: 16px; }
  .srv-icon-wrap { width: 44px; height: 44px; font-size: 18px; margin-bottom: 16px; }
  .srv-title { font-size: 15px !important; margin-bottom: 10px; }
  .srv-text { font-size: 13px !important; line-height: 1.8; }

  /* Scroll indicator dots - bigger tap targets */
  .services-scroll-dot {
    width: 10px !important;
    height: 10px !important;
    cursor: pointer;
  }
}


/* --- CALCULATOR MOBILE --- */
@media (max-width: 768px) {
  .calculator-inner { padding: 0; }
  .calc-form {
    padding: 24px 20px !important;
    border-radius: 8px;
  }

  .calc-row { grid-template-columns: 1fr !important; gap: 0; }

  .calc-label { font-size: 10px; letter-spacing: 1.5px; }

  .calc-select, .calc-input {
    padding: 14px 16px !important;
    font-size: 15px !important; /* Prevents iOS zoom */
    border-radius: 4px;
  }

  .calc-btn {
    padding: 16px !important;
    font-size: 15px !important;
    border-radius: 4px;
    min-height: 52px;
  }

  .calc-result-value { font-size: 26px !important; }
  .calc-result { padding: 20px 16px; border-radius: 4px; }

  /* Tabs */
  .calc-tabs {
    display: flex;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 24px;
    border: 1px solid rgba(201,168,76,0.2);
  }
  .calc-tab {
    flex: 1;
    font-size: 13px !important;
    padding: 12px 8px !important;
  }
}


/* --- PHILOSOPHY / ABOUT MOBILE --- */
@media (max-width: 768px) {
  .phil-grid {
    grid-template-columns: 1fr !important;
    gap: 48px;
  }

  .phil-card-main {
    margin: 0 !important;
    transform: none !important;
  }

  .phil-float-badge {
    top: -16px;
    right: 16px !important;
    left: auto !important;
  }

  .values-list { margin-top: 32px; gap: 20px; }
  .value-item { gap: 16px; }
  .value-num { font-size: 36px; }
  .value-content h4 { font-size: 15px; }
  .value-content p { font-size: 13px; }
}


/* --- PROJECT PROGRESS TRACKER MOBILE --- */
@media (max-width: 768px) {
  .progress-tracker {
    overflow-x: auto;
    padding-bottom: 12px;
    -webkit-overflow-scrolling: touch;
  }

  .progress-steps {
    min-width: 480px;
    gap: 0;
  }

  .progress-step-circle {
    width: 40px !important;
    height: 40px !important;
    font-size: 16px !important;
  }

  .progress-step-label { font-size: 12px; }
  .progress-step-sublabel { font-size: 10px; }
}


/* --- TEAM SECTION MOBILE --- */
@media (max-width: 768px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    margin-top: 40px;
  }

  .team-card {
    padding: 24px 16px !important;
  }

  .team-avatar {
    width: 60px !important;
    height: 60px !important;
    font-size: 22px !important;
    margin-bottom: 14px !important;
  }

  .team-name { font-size: 13px !important; }
  .team-title-ar { font-size: 11px !important; }
  .team-title-en { font-size: 10px !important; }
  .team-bio { font-size: 12px !important; line-height: 1.7; }
  .team-linkedin { padding: 6px !important; }
}

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


/* --- TIMELINE MOBILE --- */
@media (max-width: 768px) {
  .timeline-wrapper {
    padding-right: 0;
    padding-left: 0;
  }

  .timeline-item {
    flex-direction: column;
    gap: 12px;
    padding: 20px 0;
  }

  .timeline-content {
    padding: 20px 16px !important;
    border-radius: 6px;
  }

  .timeline-year { font-size: 28px !important; margin-bottom: 8px; }
  .timeline-title { font-size: 15px !important; }
  .timeline-desc { font-size: 13px !important; }

  .timeline-dot {
    width: 14px !important;
    height: 14px !important;
  }
}


/* --- FAQ MOBILE --- */
@media (max-width: 768px) {
  .faq-list { margin-top: 28px; }
  .faq-question { padding: 18px 0 !important; }
  .faq-question-text { font-size: 14px !important; line-height: 1.5; }
  .faq-answer-inner {
    font-size: 13px !important;
    padding-bottom: 18px;
    line-height: 1.9;
  }
  .faq-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }
}


/* --- BOOKING FORM MOBILE --- */
@media (max-width: 768px) {
  .booking-section { background: var(--cream); }
  .booking-inner { padding: 0; }

  .booking-form-wrap {
    padding: 28px 20px !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 40px rgba(8,20,46,0.12) !important;
    border-top: 3px solid var(--gold) !important;
  }

  /* Form rows: single column */
  .form-row { grid-template-columns: 1fr !important; gap: 0 !important; }

  /* Inputs: prevent iOS auto-zoom (needs 16px min) */
  .form-input {
    font-size: 16px !important;
    padding: 14px 16px !important;
    border-radius: 6px !important;
    min-height: 50px;
  }

  /* Labels */
  .form-label {
    font-size: 11px !important;
    letter-spacing: 1.5px;
    margin-bottom: 8px !important;
  }

  /* Form group spacing */
  .form-group { margin-bottom: 20px !important; }

  /* Form titles */
  .form-title { font-size: 18px !important; margin-bottom: 6px; }
  .form-sub { font-size: 13px !important; margin-bottom: 24px; }

  /* Submit button */
  .btn-submit {
    min-height: 54px !important;
    font-size: 16px !important;
    border-radius: 8px !important;
    margin-top: 8px;
  }

  /* ----- TIME SLOTS: vertical stacked cards ----- */
  .booking-time-slots {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .booking-time-slot {
    width: 100% !important;
    min-height: 54px !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    border-width: 1.5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: all 0.2s ease !important;
    text-align: right !important;
  }

  /* Add clock emoji before time text via pseudo */
  .booking-time-slot::before {
    content: '🕐';
    font-size: 18px;
    opacity: 0.6;
  }

  .booking-time-slot[data-time="09:00"]::before { content: '🌅'; }
  .booking-time-slot[data-time="12:00"]::before { content: '☀️'; }
  .booking-time-slot[data-time="16:00"]::before { content: '🌤️'; }

  .booking-time-slot.selected {
    background: var(--gold) !important;
    border-color: var(--gold) !important;
    color: var(--navy) !important;
    box-shadow: 0 4px 16px rgba(201,168,76,0.35) !important;
    transform: none !important;
  }

  .booking-time-slot.selected::after {
    content: '✓';
    font-size: 16px;
    font-weight: 900;
    color: var(--navy);
  }
}


/* --- TESTIMONIALS MOBILE --- */
@media (max-width: 768px) {
  .testimonials-section { overflow: hidden; }

  .testimonials-track { gap: 16px !important; }

  .testimonial-card {
    flex: 0 0 82vw !important;
    min-width: 82vw !important;
    padding: 24px 20px !important;
  }

  .testimonial-stars { font-size: 12px !important; letter-spacing: 3px; margin-bottom: 14px; }
  .testimonial-text { font-size: 13px !important; line-height: 1.85; margin-bottom: 18px; }
  .testimonial-name { font-size: 13px !important; }
  .testimonial-role { font-size: 11px !important; }

  .testimonials-nav {
    margin-top: 24px;
    gap: 12px;
  }

  .testimonials-nav button {
    width: 44px !important;
    height: 44px !important;
    font-size: 16px !important;
  }
}


/* --- BLOG SECTION MOBILE --- */
@media (max-width: 768px) {
  .blog-grid {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }

  .blog-card { border-radius: 8px; }
  .blog-card-image { height: 160px !important; }
  .blog-card-body { padding: 20px !important; }
  .blog-card-title { font-size: 15px !important; line-height: 1.5; }
  .blog-card-excerpt { font-size: 13px !important; }
  .blog-card-date { font-size: 11px !important; }
}


/* --- PRICING TABLE MOBILE --- */
@media (max-width: 768px) {
  .pricing-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
    max-width: 400px;
    margin: 0 auto;
  }

  .pricing-card { padding: 28px 20px !important; }
  .pricing-plan-name { font-size: 18px !important; }
  .pricing-amount { font-size: 28px !important; }
  .pricing-features li { font-size: 13px !important; }
  .pricing-cta-btn { min-height: 48px !important; font-size: 14px !important; }

  .pricing-toggle { margin-bottom: 28px; gap: 10px; }
}


/* --- NEWSLETTER MOBILE --- */
@media (max-width: 768px) {
  .newsletter-inner { padding: 36px 24px !important; border-radius: 8px; }

  .newsletter-form {
    flex-direction: column !important;
    gap: 10px;
  }

  .newsletter-input {
    width: 100% !important;
    font-size: 16px !important;
    border-radius: 4px !important;
    padding: 14px 16px !important;
  }

  .newsletter-btn {
    width: 100% !important;
    min-height: 52px !important;
    border-radius: 4px !important;
    font-size: 15px !important;
  }

  .newsletter-desc { font-size: 13px !important; margin-bottom: 24px; }
}


/* --- CONTACT SECTION MOBILE --- */
@media (max-width: 768px) {
  .contact-inner {
    grid-template-columns: 1fr !important;
    gap: 40px;
  }

  .contact-info-items { gap: 0; }

  .contact-info-item {
    padding: 16px 0 !important;
    border-bottom: 1px solid rgba(201,168,76,0.08);
    gap: 14px;
  }

  .cinfo-icon {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    font-size: 18px !important;
  }

  .cinfo-label { font-size: 10px !important; letter-spacing: 1.5px; margin-bottom: 4px; }
  .cinfo-val { font-size: 13px !important; }
  .cinfo-val a { font-size: 13px; }

  .contact-form-wrap {
    padding: 28px 20px !important;
    border-radius: 8px !important;
  }

  .contact-map-wrap iframe { height: 200px !important; }

  .download-brochure reveal { margin-top: 16px; }
  .download-brochure-btn {
    width: 100%;
    justify-content: center;
    padding: 14px 20px !important;
    border-radius: 4px;
  }

  .whatsapp-direct-btn {
    padding: 14px 20px !important;
    font-size: 14px !important;
    border-radius: 4px !important;
  }

  .file-upload-area { padding: 20px 16px !important; }
}


/* --- AWARDS SECTION MOBILE --- */
@media (max-width: 768px) {
  .awards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px;
  }

  .award-card { padding: 20px 14px !important; border-radius: 6px; }
  .award-icon { font-size: 28px !important; margin-bottom: 10px; }
  .award-title { font-size: 13px !important; }
  .award-year { font-size: 11px !important; }
  .award-body { font-size: 11px !important; line-height: 1.6; }
}


/* --- FOOTER MOBILE --- */
@media (max-width: 768px) {
  footer {
    padding-bottom: 80px; /* extra space for bottom nav */
  }

  .footer-main {
    grid-template-columns: 1fr 1fr !important;
    padding: 48px 5% 32px !important;
    gap: 32px;
  }

  .footer-brand { grid-column: 1 / -1; }

  .footer-brand-ar { font-size: 18px !important; }
  .footer-brand-desc { font-size: 12px !important; line-height: 1.8; }

  .footer-bottom {
    padding: 16px 5% !important;
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  .footer-bottom p { font-size: 11px !important; }

  .footer-col h5 { font-size: 12px !important; }
  .footer-col ul li a { font-size: 13px !important; }
}

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


/* --- FLOATING BUTTONS MOBILE ARRANGEMENT --- */
@media (max-width: 768px) {
  /* Social float: smaller, above bottom nav */
  .social-float {
    bottom: 80px !important;
    left: 16px !important;
    gap: 8px;
  }
  html[dir="ltr"] .social-float {
    left: auto !important;
    right: 16px !important;
  }

  .social-float a {
    width: 42px !important;
    height: 42px !important;
    font-size: 17px !important;
  }

  /* Back to top: right side above bottom nav */
  .back-to-top {
    bottom: 80px !important;
    right: 16px !important;
    width: 42px !important;
    height: 42px !important;
    font-size: 11px !important;
  }
  html[dir="ltr"] .back-to-top {
    right: auto !important;
    left: 16px !important;
  }

  /* Chat widget: opposite side, above bottom nav */
  .chat-widget {
    bottom: 80px !important;
    right: 16px !important;
  }
  html[dir="ltr"] .chat-widget {
    right: auto !important;
    left: 16px !important;
  }

  /* Smaller chat toggle */
  .chat-toggle {
    width: 48px !important;
    height: 48px !important;
    font-size: 20px !important;
  }

  /* Chat panel: full-width on very small screens */
  .chat-panel {
    width: min(320px, calc(100vw - 32px)) !important;
    right: 0 !important;
    bottom: 60px !important;
  }
  html[dir="ltr"] .chat-panel {
    right: auto !important;
    left: 0 !important;
  }
}


/* --- BOTTOM NAVIGATION MOBILE --- */
@media (max-width: 768px) {
  .bottom-nav {
    padding: 4px 0 max(env(safe-area-inset-bottom), 6px);
    background: rgba(8, 20, 46, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(201,168,76,0.15);
  }

  .bottom-nav-inner { padding: 0 4px; }

  .bottom-nav-item {
    padding: 6px 2px !important;
    min-width: 48px !important;
    min-height: 52px !important;
    font-size: 8px !important;
    gap: 4px;
  }

  .bottom-nav-item svg {
    width: 22px !important;
    height: 22px !important;
  }

  .bottom-nav-item.active {
    color: var(--gold) !important;
  }

  /* Active indicator dot */
  .bottom-nav-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 2px;
    background: var(--gold);
    border-radius: 0 0 2px 2px;
  }

  .bottom-nav-item { position: relative; }
}


/* --- MODAL MOBILE --- */
@media (max-width: 768px) {
  .proj-modal {
    width: 95vw !important;
    max-height: 90vh;
    border-radius: 8px !important;
  }

  .proj-modal-header { min-height: 160px !important; padding: 20px !important; }
  .proj-modal-title { font-size: 18px !important; }
  .proj-modal-body { padding: 20px !important; }
  .proj-modal-specs { grid-template-columns: 1fr !important; gap: 10px; }
  .proj-modal-cta { padding: 14px 20px !important; }
}


/* --- BOOKING CONFIRMATION MOBILE --- */
@media (max-width: 768px) {
  .booking-confirmation {
    width: 90vw !important;
    padding: 32px 24px !important;
    border-radius: 12px !important;
  }
  .booking-confirm-icon { font-size: 40px !important; width: 64px !important; height: 64px !important; }
  .booking-confirm-title { font-size: 18px !important; }
  .booking-confirm-text { font-size: 13px !important; }
}


/* --- SCROLL REVEAL — reduce offsets on mobile for smoother feel --- */
@media (max-width: 768px) {
  .reveal {
    opacity: 0;
    transform: translateY(20px) !important;
    transition: opacity 0.6s ease, transform 0.6s ease !important;
  }
  .reveal.visible {
    opacity: 1;
    transform: translateY(0) !important;
  }
}


/* --- ANNOUNCEMENT BAR MOBILE --- */
@media (max-width: 768px) {
  .announcement-bar {
    font-size: 10px !important;
    padding: 6px 4% !important;
    gap: 8px;
  }
  .announcement-bar.show + #navbar { top: 30px; }
}


/* --- MARQUEE MOBILE --- */
@media (max-width: 768px) {
  .marquee-item {
    padding: 0 16px !important;
    font-size: 12px !important;
    gap: 6px;
  }
  .marquee-item-icon { font-size: 14px !important; }
}


/* --- SEARCH MODAL MOBILE --- */
@media (max-width: 768px) {
  .search-modal {
    padding: 20px 5% !important;
  }
  .search-input {
    font-size: 16px !important;
    padding: 14px 16px !important;
  }
}


/* --- GALLERY MOBILE --- */
@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .gallery-item { border-radius: 4px !important; }
}


/* --- COOKIE BANNER MOBILE --- */
@media (max-width: 768px) {
  .cookie-banner {
    flex-direction: column !important;
    gap: 16px !important;
    padding: 20px 5% !important;
    bottom: 70px !important; /* above bottom nav */
    text-align: center;
  }

  .cookie-actions {
    flex-direction: row;
    width: 100%;
    justify-content: center;
    gap: 10px;
  }

  .cookie-accept, .cookie-decline {
    flex: 1;
    padding: 12px 8px !important;
    font-size: 13px !important;
    min-height: 44px;
  }
}


/* --- MISC FIXES FOR VERY SMALL SCREENS --- */
@media (max-width: 375px) {
  .hero-h1 { font-size: 1.9rem !important; }
  .section-h2 { font-size: 1.6rem !important; }
  .team-grid { grid-template-columns: 1fr !important; }
  .awards-grid { grid-template-columns: 1fr !important; }
  .numbers-section { grid-template-columns: repeat(2, 1fr) !important; }

  .services-grid .srv-card {
    flex: 0 0 88vw !important;
    max-width: 88vw !important;
  }

  .testimonial-card {
    flex: 0 0 88vw !important;
    min-width: 88vw !important;
  }

  .nav-brand-ar { font-size: 12px !important; }
  .nav-emblem { width: 34px !important; height: 34px !important; }
}


/* --- LANDSCAPE PHONE OPTIMIZATIONS --- */
@media (max-width: 896px) and (orientation: landscape) {
  .hero {
    min-height: auto !important;
    padding-top: 80px !important;
    padding-bottom: 40px !important;
  }

  .hero-h1 { font-size: clamp(1.6rem, 4vw, 2rem) !important; }

  .numbers-section { padding: 32px 5% !important; }

  .bottom-nav { display: none !important; }
  body { padding-bottom: 0 !important; }
  .social-float { bottom: 20px !important; }
  .back-to-top { bottom: 20px !important; }
  .chat-widget { bottom: 20px !important; }
}


/* --- PREVENT iOS ZOOM ON INPUT FOCUS --- */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  select,
  textarea {
    font-size: 16px !important;
  }
}


/* --- IMPROVED TOUCH FEEDBACK --- */
@media (hover: none) and (pointer: coarse) {
  /* Remove hover effects on touch, use active states */
  .srv-card:hover,
  .team-card:hover,
  .blog-card:hover,
  .pricing-card:hover { transform: none !important; }

  .srv-card:active,
  .team-card:active,
  .blog-card:active {
    transform: scale(0.98) !important;
    transition: transform 0.15s ease !important;
  }

  .btn-primary:active,
  .btn-ghost:active,
  .nav-cta:active,
  .calc-btn:active,
  .btn-submit:active {
    transform: scale(0.97) !important;
    opacity: 0.9;
  }

  /* Show arrow always on touch (no hover state) */
  .srv-arrow {
    opacity: 1 !important;
    transform: translateX(0) !important;
  }
}