/* ───────────────  NAV  ─────────────── */
.nav{
  position: fixed; width: 100%; top: 0; z-index: 100;
  background: #FFFFFF;
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line-soft);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
  box-shadow: 0 1px 0 rgba(31,42,38,.02);
}
.nav.nav-hidden{ transform: translateY(0);}
.nav.scrolled{ border-bottom-color: var(--line); box-shadow: 0 4px 14px rgba(31,42,38,.06);}
.nav-inner{
  display:flex; align-items:center; justify-content: space-between;
  gap: 32px; padding: 16px 0;
  max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter);
}
.nav-logo{ display:flex; align-items:center; gap:10px; flex-shrink:0; margin-inline-end: auto;}
.nav-logo img{ height: 84px; width:auto; transition: height .25s;}
.nav.scrolled .nav-logo img{ height: 68px;}

.nav-links{ display:flex; gap: 2px; align-items: center; flex: 1; justify-content: center;}
.nav-links a{
  position: relative;
  padding: 10px 18px;
  font-size: 16px; font-weight: 700;
  color: var(--ink-soft);
  border-radius: 999px;
  transition: color .2s, background .2s;
  white-space: nowrap;
}
.nav-links a:hover{ color: var(--green); background: rgba(45,93,75,.06);}
.nav-links a.active{ color: var(--green); background: rgba(45,93,75,.10);}

.nav-right{ display:flex; align-items:center; gap: 10px; flex-shrink:0;}

.nav-cta{
  display:inline-flex; align-items:center; gap:10px;
  background: var(--green);
  color: var(--cream);
  padding: 13px 22px;
  border-radius: 999px;
  font-weight: 600; font-size: 15px;
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
  box-shadow: 0 4px 14px rgba(45,93,75,.20);
  white-space: nowrap;
}
.nav-cta:hover{ background: var(--green-deep); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(45,93,75,.28);}
.nav-cta svg{ width:18px; height:18px;}

.nav-lang{
  font-size: 13.5px; font-weight: 700; color: var(--green);
  padding: 10px 14px; border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
  min-width: 52px;
  display: inline-flex; align-items: center; justify-content: center;
}
.nav-lang:hover{ color: var(--cream); border-color: var(--green); background: var(--green);}

body.lang-en .nav-links{ direction: ltr; }
body.lang-en .mobile-menu{ text-align: left; }
.nav-mobile-btn{ display: none; order: -1; }

@media (max-width: 1100px){
  .nav-links a{ padding: 9px 12px; font-size: 14.5px;}
  .nav-inner{ gap: 16px;}
}
@media (max-width: 980px){
  .nav-links{ display:none; }
  .nav-lang{ display:none; }
  .nav-cta span{ display: none;}
  .nav-cta{ padding: 11px 14px;}
  .nav-cta svg{ width: 20px; height: 20px;}
  /* Hamburger pinned to the visual RIGHT (RTL start). Direct child of .nav-inner. */
  .nav-inner{ flex-wrap: nowrap; }
  .nav-mobile-btn{
    display:flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 46px; height: 46px; padding: 0 12px;
    border-radius: 12px;
    background: var(--paper); border: 1px solid var(--line);
    margin-inline-end: 4px;
    order: -10;
  }
  .nav-logo{ order: 0; }
  .nav-right{ order: 10; margin-inline-start: auto; }
  .nav-mobile-btn span{ display:block; height:2px; background: var(--ink); border-radius: 1px; transition: transform .25s, opacity .25s;}
  .nav-mobile-btn.open span:nth-child(1){ transform: translateY(7px) rotate(-45deg);}
  .nav-mobile-btn.open span:nth-child(2){ opacity:0; }
  .nav-mobile-btn.open span:nth-child(3){ transform: translateY(-7px) rotate(45deg);}
  .nav-logo img{ height: 64px;}
  .nav.scrolled .nav-logo img{ height: 54px;}
  .nav-inner{ padding: 12px 0; gap: 12px;}
}
@media (max-width: 480px){
  .nav-logo img{ height: 54px;}
  .nav.scrolled .nav-logo img{ height: 48px;}
}

/* Mobile dropdown menu — slides in from RIGHT (RTL) */
.mobile-menu{
  position: fixed; top: 0; bottom: 0; right: 0;
  width: min(360px, 86vw);
  z-index: 101;
  background: var(--cream);
  padding: 88px 32px 32px;
  transform: translateX(100%);
  transition: transform .4s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
  box-shadow: -20px 0 60px rgba(31,42,38,.15);
  border-inline-start: 1px solid var(--line);
}
.mobile-menu.open{ transform: translateX(0);}
/* Mobile menu close (X) button */
.mobile-menu-close{
  position: absolute; top: 18px;
  inset-inline-end: 22px;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--cream-3); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
  cursor: pointer;
  z-index: 2;
  transition: background .2s, color .2s, transform .2s;
}
.mobile-menu-close:hover{ background: var(--green); color: var(--cream); transform: rotate(90deg);}
.mobile-menu-close svg{ width: 20px; height: 20px;}
.mobile-menu a{
  display: flex; align-items: center; justify-content: flex-start;
  padding: 18px 0; font-size: 20px; font-family: var(--font-body); font-weight: 700;
  border-bottom: 1px solid var(--line-soft); color: var(--ink);
  transition: color .2s;
}
.mobile-menu a:hover{ color: var(--green);}
/* No chevron on menu items per request */
.mobile-menu a::after{ display: none !important; content: none; }
.mobile-menu .mm-cta{
  margin-top: 28px;
  background: #3DB651;
  color: #fff;
  border-radius: 999px;
  padding: 11px 22px;
  justify-content: center;
  font-size: 15px;
  font-weight: 400;
  border-bottom: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mobile-menu .mm-cta::after{ display: none;}
.mobile-menu .mm-cta:hover{ background: #2fa042; color: #fff;}

.mobile-overlay{
  position: fixed; inset: 0; z-index: 100;
  background: rgba(31,42,38,.45);
  opacity: 0; pointer-events: none;
  transition: opacity .35s;
  backdrop-filter: blur(2px);
}
.mobile-overlay.open{ opacity: 1; pointer-events: auto;}

/* WhatsApp button in nav */
.nav-wa{
  display:inline-flex; align-items:center; gap:8px;
  background: #3DB651;
  color: #fff;
  padding: 9px 20px;
  border-radius: 999px;
  font-weight: 400;
  font-size: 15px;
  font-family: var(--font-display);
  white-space: nowrap;
  transition: background .2s, transform .15s;
  box-shadow: 0 4px 14px rgba(61,182,81,.25);
}
.nav-wa:hover{ background: #2fa042; transform: translateY(-1px);}
@media (max-width: 980px){ .nav-wa{ display: none;} }

/* Desktop dropdowns */
.nav-dropdown{ position: relative;}
.nav-dropdown-btn{
  display:inline-flex; align-items:center; gap:5px;
  padding: 10px 18px; border-radius: 999px;
  font-size: 16px; font-weight: 700; color: var(--ink-soft);
  cursor: pointer;
  transition: color .2s, background .2s;
  white-space: nowrap;
}
.nav-dropdown-btn:hover{ color: var(--green); background: rgba(29,78,216,.06);}
.nav-dropdown-menu{
  position: absolute; top: 100%; right: 0;
  padding-top: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  min-width: 180px;
  display: none;
  flex-direction: column;
  z-index: 200;
  overflow: hidden;
}.nav-dropdown-menu.active{ display: flex;}
.nav-dropdown-menu a{
  padding: 13px 20px;
  font-size: 15px; font-weight: 600; color: var(--ink);
  border-bottom: 1px solid var(--line-soft);
  transition: color .2s, background .2s;
}
.nav-dropdown-menu a:last-child{ border-bottom: none;}
.nav-dropdown-menu a:hover{ color: var(--green); background: var(--green-tint);}

/* Mobile menu groups */
.mm-link{
  display: flex; align-items: center;
  padding: 18px 0; font-size: 20px; font-weight: 700;
  border-bottom: 1px solid var(--line-soft); color: var(--ink);
  transition: color .2s;
}
.mm-link:hover{ color: var(--green);}
.mm-group{ border-bottom: 1px solid var(--line-soft);}
.mm-group-btn{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding: 18px 0;
  font-size: 20px; font-weight: 700; color: var(--ink);
  cursor: pointer;
  transition: color .2s;
}
.mm-group-btn:hover{ color: var(--green);}
.mm-group-btn svg{ transition: transform .3s; flex-shrink:0;}
.mm-group-btn.open svg{ transform: rotate(180deg);}
.mm-sub{
  display: none; flex-direction: column; gap: 2px;
  padding-bottom: 12px; padding-right: 16px;
}
.mm-sub.open{ display: flex;}
.mm-sub a{
  padding: 10px 0; font-size: 16px; font-weight: 600;
  color: var(--ink-soft); border: none;
  transition: color .2s;
}
.mm-sub a:hover{ color: var(--green);}
html[lang="en"] .nav-dropdown-menu {
  right: auto;
  left: 0;
}

html[lang="en"] .mm-sub {
  padding-right: 0;
  padding-left: 16px;
}
/* Keep the complete desktop navigation inside the viewport and aligned to RTL start. */
@media(min-width:981px){
.nav-inner{width:100%;max-width:1440px;gap:16px;padding:12px 24px;direction:rtl;justify-content:flex-start}
.nav-logo{margin-inline-end:0;flex:0 0 auto}.nav-logo img{height:64px;max-width:155px}
.nav-links{min-width:0;flex:1 1 0;flex-wrap:wrap;justify-content:flex-start;gap:2px;direction:rtl}
.nav-links a,.nav-dropdown-btn{padding:8px 10px;font-size:14px}
.nav-right{margin-inline-start:0;gap:8px;flex-shrink:0}
.nav-right .nav-wa{padding:10px 14px;white-space:nowrap}
.nav-lang{min-width:40px;padding:9px 10px}
body.lang-en .nav-inner{direction:ltr}body.lang-en .nav-links{direction:ltr}
}

@media(min-width:981px){body.lang-en .nav-inner{gap:8px;padding-inline:16px}body.lang-en .nav-logo img{height:54px;max-width:110px}body.lang-en .nav-links{flex-wrap:nowrap;gap:0}body.lang-en .nav-links a,body.lang-en .nav-dropdown-btn{font-size:12px;padding:8px 5px;white-space:nowrap}body.lang-en .nav-right{gap:4px}body.lang-en .nav-wa{font-size:12px;padding:10px}body.lang-en .nav-lang{min-width:32px;padding:7px}}
@media(min-width:981px) and (max-width:1150px){body.lang-en .nav-logo img{max-width:90px}body.lang-en .nav-links a,body.lang-en .nav-dropdown-btn{font-size:11px;padding-inline:3px}body.lang-en .nav-inner{gap:5px;padding-inline:10px}}

/* Refined navigation: full labels, readable type, original palette. */
@media(min-width:981px){.nav-inner,body.lang-en .nav-inner{max-width:1600px;gap:12px;padding-inline:20px}.nav-links,body.lang-en .nav-links{flex-wrap:wrap;gap:2px}.nav-links>a,.nav-dropdown-btn,body.lang-en .nav-links>a,body.lang-en .nav-dropdown-btn{font-size:15px;padding:8px 7px;white-space:nowrap}.nav-logo img,body.lang-en .nav-logo img{max-width:120px;height:58px}.nav-right .nav-wa{font-size:13px}}

.nav, .mobile-menu, .mobile-overlay {
  --cream:        #FFFFFF;
  --cream-3:      #EBEBEA;
  --paper:        #FFFFFF;
  --ink:          #1C2B3A;
  --ink-soft:     #4A5568;
  --line:         #E2E6EA;
  --line-soft:    #EDEDEC;
  --green:        #1D4ED8;
  --green-deep:   #1640B8;
  --green-tint:   #EFF6FF;
  --font-display: 'Assistant', 'Open Sans', -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-body:    'Assistant', 'Open Sans', -apple-system, 'Segoe UI', Arial, sans-serif;
  --r-lg: 18px;
  --shadow-md: 0 6px 24px rgba(31,42,38,.06), 0 2px 6px rgba(31,42,38,.04);
  --container: 1240px;
  --gutter: clamp(20px, 4vw, 56px);
  font-family: var(--font-body, Assistant, Arial, sans-serif);
}
.nav { position: sticky; }
.nav-inner { padding-inline: 20px; }
.nav a, .mobile-menu a { text-decoration: none; }
.nav button, .mobile-menu button { cursor: pointer; }
html[lang="en"] .mobile-menu { right: auto; left: 0; transform: translateX(-100%); }
html[lang="en"] .mobile-menu.open { transform: translateX(0); }

/* Keep the shared header independent of each section's generic header styles. */
header.nav {
  display: block;
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
}