/* Self-hosted fonts (Inter + Rubik for multi-language support) */

/* Inter font (English / LTR languages) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/Inter-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/Inter-Medium.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/Inter-SemiBold.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/Inter-Bold.woff2') format('woff2');
}

/* Rubik font (Hebrew / RTL languages) */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/Rubik-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/Rubik-Medium.woff2') format('woff2');
}

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/Rubik-SemiBold.woff2') format('woff2');
}

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/Rubik-Bold.woff2') format('woff2');
}
:root {
  --primary: #2D3E50;
  --secondary: #C8A96B;
  --accent: #A63D4E;
  --bg-light: #F3EEE6;
  --bg-dark: #21303F;
  --text-dark: #18212B;
  --text-light: #F8F5EF;
  --text-muted: #6E7781;
  --border-light: #D8D0C4;
  --border-dark: #445566;
  --nav-bg: #F3EEE6;
  --nav-text: #18212B;
  --nav-text-hover: #A63D4E;
  --radius-sm: 0px;
  --radius-card: 0px;
  --radius-btn: 0px;
  --radius-img: 0px;
  --radius-badge: 0px;
  --radius-input: 0px;
  --shadow-subtle: 0 8px 30px rgba(0,0,0,0.14);
  --shadow-card: 0 8px 30px rgba(0,0,0,0.14);
  --shadow-elevated: 0 8px 30px rgba(0,0,0,0.14);
  --shadow-btn-hover: 0 8px 30px rgba(0,0,0,0.14);
  --spacing-section: 120px;
  --spacing-section-mobile: 72px;
  --spacing-card-padding: 48px;
  --spacing-card-gap: 40px;
  --spacing-element-gap: 24px;
  --transition-default: all 0.3s ease;
  --transition-hover: all 0.3s ease;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px !important;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-size: 16px !important;
  line-height: 1.7 !important;
  font-family: 'Rubik', sans-serif;
  color: var(--text-dark);
  background-color: var(--bg-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  direction: rtl;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

ul, ol {
  list-style: none;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: var(--transition-default);
}

a:hover {
  color: var(--primary);
  text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Rubik', sans-serif;
  color: var(--text-dark);
  overflow-wrap: break-word;
}

h1 {
  font-size: 48px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin-bottom: 1rem !important;
  margin-top: 0.5rem !important;
}

h2 {
  font-size: 32px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  margin-bottom: 1rem !important;
  margin-top: 0.5rem !important;
}

h3 {
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  margin-bottom: 1rem !important;
  margin-top: 0.5rem !important;
}

p {
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  margin-bottom: 1rem !important;
}

small, .small-text {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}

.site-footer a {
  color: inherit;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-btn);
  padding: 16px 40px;
  font-weight: 600;
  text-transform: none;
  transition: var(--transition-hover);
  cursor: pointer;
  text-decoration: none;
  border: 2px solid transparent;
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  line-height: 1.2;
  gap: 8px;
}

.btn:hover {
  box-shadow: var(--shadow-btn-hover);
  text-decoration: none;
}

.btn-primary {
  background-color: var(--primary);
  color: var(--text-light);
  border-color: var(--primary);
}

.btn-primary:hover {
  background-color: #1a2b3a;
  border-color: #1a2b3a;
  color: var(--text-light);
}

.btn-secondary {
  background-color: var(--secondary);
  color: var(--text-dark);
  border-color: var(--secondary);
}

.btn-secondary:hover {
  background-color: #b89550;
  border-color: #b89550;
  color: var(--text-dark);
}

.whatsapp-float {
  position: fixed;
  bottom: 20px;
  width: 60px;
  height: 60px;
  background: #25D366;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  z-index: 999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  text-decoration: none;
  transition: transform 0.3s, box-shadow 0.3s;
}

html[dir="rtl"] .whatsapp-float {
  right: 20px;
  left: auto;
}

html[dir="ltr"] .whatsapp-float,
html:not([dir]) .whatsapp-float {
  left: 20px;
  right: auto;
}

.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  color: white;
  text-decoration: none;
}

@media (max-width: 1024px) {
  h1 { font-size: 36px !important; }
  h2 { font-size: 28px !important; }
  h3 { font-size: 20px !important; }
  p  { font-size: 15px !important; }

  :root {
    --spacing-section: var(--spacing-section-mobile);
    --spacing-card-padding: 32px;
    --spacing-card-gap: 28px;
  }
}

@media (max-width: 768px) {
  h1 {
    font-size: 28px !important;
    margin-bottom: 1rem !important;
    margin-top: 0.5rem !important;
  }
  h2 {
    font-size: 22px !important;
    margin-bottom: 1rem !important;
    margin-top: 0.5rem !important;
  }
  h3 {
    font-size: 18px !important;
    margin-bottom: 1rem !important;
    margin-top: 0.5rem !important;
  }
  p  { font-size: 14px !important; }

  .btn {
    padding: 14px 28px;
    font-size: 15px;
  }

  .container {
    padding: 0 16px;
  }

  :root {
    --spacing-card-padding: 24px;
    --spacing-card-gap: 20px;
  }
}

@media (max-width: 480px) {
  .btn {
    padding: 12px 24px;
    font-size: 14px;
    width: 100%;
  }

  .whatsapp-float {
    width: 50px;
    height: 50px;
    font-size: 24px;
    bottom: 16px;
  }

  html[dir="rtl"] .whatsapp-float {
    right: 16px;
  }

  html[dir="ltr"] .whatsapp-float,
  html:not([dir]) .whatsapp-float {
    left: 16px;
  }
}

/* Navbar Styles */
.navbar { position: sticky; top: 0; z-index: 1000; background: #21303F; display: flex; align-items: center; justify-content: space-between; max-width: 1200px; margin: 0 auto; padding: 1rem 2rem; }
.nav-container { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 2rem; }
.nav-brand { display: flex; align-items: center; }
.logo { max-height: 40px; height: auto; }
.mobile-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; color: #F8F5EF; }
.phone-header-btn { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; color: #F8F5EF; }
.nav-menu { display: flex; list-style: none; gap: 2rem; margin: 0; padding: 0; }
.nav-menu li a { text-decoration: none; color: #F8F5EF; font-weight: 500; transition: color 0.3s; }
.nav-menu li a:hover { color: #2D3E50; }
.nav-cta-container { margin-left: auto; display: flex; align-items: center; }
.nav-cta-btn { background: #2D3E50; color: #F8F5EF; padding: 0.75rem 1.5rem; border-radius: 6px; text-decoration: none; font-weight: 600; transition: opacity 0.3s; }
.nav-cta-btn:hover { opacity: 0.9; }
@media (max-width: 768px) {
  /* Mobile logo sizing - max height 40px */
  .logo { max-width: 140px; max-height: 40px; width: auto; height: auto; }
  .mobile-toggle { display: flex; align-items: center; justify-content: center; }
  .phone-header-btn { display: flex; align-items: center; justify-content: center; }
  .nav-menu { position: fixed; top: 60px; left: 0; right: 0; background: #21303F; flex-direction: column; padding: 1rem; display: none; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
  .nav-menu.active { display: flex; }
  .nav-menu li a { padding: 0.75rem 0; color: #F8F5EF; }
  /* Hide CTA button but show language switcher on mobile */
  .nav-cta-container { display: flex; position: absolute; top: 50%; transform: translateY(-50%); background: transparent; padding: 0; margin: 0; }
  .nav-cta-container .nav-cta-btn { display: none; }
  /* LTR: position before phone button on right */
  html[dir="ltr"] .nav-cta-container { right: 30px; left: auto; }
  /* RTL: position before phone button on left */
  html[dir="rtl"] .nav-cta-container { left: 30px; right: auto; }
}
.navbar { position: sticky; top: 0; z-index: 1000; background: #21303F; display: flex; align-items: center; justify-content: space-between; max-width: 1200px; margin: 0 auto; padding: 1rem 2rem; }
.nav-container { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 2rem; }
.nav-brand { display: flex; align-items: center; }
.logo { max-height: 40px; height: auto; }
.mobile-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; color: #F8F5EF; }
.phone-header-btn { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; color: #F8F5EF; }
.nav-menu { display: flex; list-style: none; gap: 2rem; margin: 0; padding: 0; }
.nav-menu li a { text-decoration: none; color: #F8F5EF; font-weight: 500; transition: color 0.3s; }
.nav-menu li a:hover { color: #2D3E50; }
.nav-cta-container { margin-left: auto; display: flex; align-items: center; }
.nav-cta-btn { background: #2D3E50; color: #F8F5EF; padding: 0.75rem 1.5rem; border-radius: 6px; text-decoration: none; font-weight: 600; transition: opacity 0.3s; }
.nav-cta-btn:hover { opacity: 0.9; }
@media (max-width: 768px) {
  /* Mobile logo sizing - max height 40px */
  .logo { max-width: 140px; max-height: 40px; width: auto; height: auto; }
  .mobile-toggle { display: flex; align-items: center; justify-content: center; }
  .phone-header-btn { display: flex; align-items: center; justify-content: center; }
  .nav-menu { position: fixed; top: 60px; left: 0; right: 0; background: #21303F; flex-direction: column; padding: 1rem; display: none; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
  .nav-menu.active { display: flex; }
  .nav-menu li a { padding: 0.75rem 0; color: #F8F5EF; }
  /* Hide CTA button but show language switcher on mobile */
  .nav-cta-container { display: flex; position: absolute; top: 50%; transform: translateY(-50%); background: transparent; padding: 0; margin: 0; }
  .nav-cta-container .nav-cta-btn { display: none; }
  /* LTR: position before phone button on right */
  html[dir="ltr"] .nav-cta-container { right: 30px; left: auto; }
  /* RTL: position before phone button on left */
  html[dir="rtl"] .nav-cta-container { left: 30px; right: auto; }
}


/* ============================================
   NAVBAR LAYOUT - POST-GENERATION FIXES
   Structural layout only - colors from Claude
   ============================================ */

/* Base navbar styles - structural only, colors from AI */
.navbar {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1000;
  /* Background color is set by Claude's CSS - don't override */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* ============================================
   DESKTOP LAYOUT (>768px)
   ============================================ */

/* Nav container - constrains max width and provides padding */
.nav-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: 1rem 2rem;
  width: 100%;
  box-sizing: border-box;
  min-height: 70px;
}

/* Logo styling (desktop) — mobile logo stays at 110px/35px, do not adjust */
.logo {
  max-height: 40px;
  max-width: 160px !important;
  height: auto;
  width: auto;
  display: block;
  object-fit: contain;
  transition: opacity 0.3s ease;
}

.logo:hover {
  opacity: 0.8;
}

.logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
}

.logo-link:focus {
  outline: none;
}

/* Remove browser default dark focus box on mouse-click; preserve for keyboard (:focus-visible). */
.navbar a:focus:not(:focus-visible),
.navbar button:focus:not(:focus-visible),
.nav-menu a:focus:not(:focus-visible) {
  outline: none;
}
.navbar a:focus-visible,
.navbar button:focus-visible,
.nav-menu a:focus-visible {
  outline: 2px solid var(--primary-color, var(--primary, #2D3E50));
  outline-offset: 2px;
}

/* Nav brand container */
.nav-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin: 0;
}

/* Navigation menu - positioned adjacent to logo */
.nav-menu {
  display: flex;
  list-style: none;
  gap: 0.2rem;
  margin: 0;
  padding: 0;
  align-items: center;
  flex-wrap: nowrap;
  flex: 1;
  min-width: 0;
}

.nav-menu li {
  margin: 0;
  padding: 0;
}

.nav-menu > li > a,
.nav-menu > .nav-item > a {
  text-decoration: none;
  transition: color 0.3s ease;
  font-weight: 500;
  font-size: 0.9rem;
  padding: 0.5rem 0.65rem;
  white-space: nowrap;
  color: var(--nav-text, var(--text-light)) !important;
}

.nav-menu > li > a:hover,
.nav-menu > .nav-item > a:hover {
  color: var(--nav-text-hover, var(--secondary)) !important;
}

/* CTA Container - pushed to end of navbar */
.nav-cta-container {
  margin-left: auto;
  display: flex;
  align-items: center;
  align-self: center;
  height: auto;
  max-height: none;
  padding-top: 0;
  padding-bottom: 0;
}

.nav-cta-item {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Search container inside CTA area — vertically center to match CTA button */
.nav-cta-container .zappy-search-container {
  align-self: center;
}
.nav-cta-container p {
  margin: 0 !important;
}

/* CTA button - prevent stretching to fill navbar height.
   AI CSS provides colors/gradients/etc - we only constrain sizing.
   display: inline-flex + max-height: 44px keeps it as a compact pill. */
.nav-cta-btn {
  display: inline-flex;
  align-items: center;
  align-self: center;
  height: auto;
  max-height: 44px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  white-space: nowrap;
  box-sizing: border-box;
  overflow: hidden;
}

/* ============================================
   LTR DESKTOP LAYOUT (English, Spanish, French)
   ============================================ */
html[dir="ltr"] .nav-container,
html[lang="en"] .nav-container,
html[lang="es"] .nav-container,
html[lang="fr"] .nav-container {
  justify-content: flex-start;
}

html[dir="ltr"] .nav-menu,
html[lang="en"] .nav-menu,
html[lang="es"] .nav-menu,
html[lang="fr"] .nav-menu {
  margin-left: 0;
  margin-right: 0;
}

html[dir="ltr"] .nav-cta-container,
html[lang="en"] .nav-cta-container,
html[lang="es"] .nav-cta-container,
html[lang="fr"] .nav-cta-container {
  margin-left: auto;
  margin-right: 0;
}

/* ============================================
   RTL DESKTOP LAYOUT (Hebrew, Arabic)
   ============================================ */
html[dir="rtl"] .nav-container,
html[lang="he"] .nav-container,
html[lang="ar"] .nav-container {
  flex-direction: row-reverse;
  justify-content: space-between;
}

/* CTA on the left in RTL */
html[dir="rtl"] .nav-cta-container,
html[lang="he"] .nav-cta-container,
html[lang="ar"] .nav-cta-container {
  order: -1;
  margin: 0;
}

/* Wrapper groups menu and logo together on the right */
html[dir="rtl"] .nav-right-group,
html[lang="he"] .nav-right-group,
html[lang="ar"] .nav-right-group {
  display: flex;
  align-items: center;
  gap: 1rem;
  order: 1;
  flex: 1;
  min-width: 0;
  flex-direction: row-reverse;
}

/* Within wrapper: Logo on far right, menu to its left */
html[dir="rtl"] .nav-right-group .nav-brand,
html[lang="he"] .nav-right-group .nav-brand,
html[lang="ar"] .nav-right-group .nav-brand {
  order: 2;
}

html[dir="rtl"] .nav-right-group .nav-menu,
html[lang="he"] .nav-right-group .nav-menu,
html[lang="ar"] .nav-right-group .nav-menu {
  order: 1;
}

/* ============================================
   DROPDOWN MENUS (Desktop)
   ============================================ */
.nav-dropdown {
  position: relative;
}

.dropdown-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Rubik', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.5rem 0.65rem;
  color: var(--nav-text, var(--text-light)) !important;
  transition: color 0.3s ease;
  white-space: nowrap;
}

.dropdown-toggle:hover {
  color: var(--nav-text-hover, var(--secondary)) !important;
}

.dropdown-arrow {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.nav-dropdown:hover .dropdown-arrow,
.nav-dropdown.open .dropdown-arrow {
  transform: rotate(180deg);
}

.nav-dropdown {
  overflow: visible !important;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  min-width: 220px;
  background: var(--bg-light, #ffffff);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  border-radius: 8px;
  padding: 8px 0;
  z-index: 100001;
  list-style: none;
  margin: 0;
}

html[dir="rtl"] .dropdown-menu,
html[lang="he"] .dropdown-menu,
html[lang="ar"] .dropdown-menu {
  right: 0;
  left: auto;
}

html[dir="ltr"] .dropdown-menu,
html:not([dir="rtl"]):not([lang="he"]):not([lang="ar"]) .dropdown-menu {
  left: 0;
  right: auto;
}

@media (min-width: 769px) {
  .nav-dropdown:hover > .dropdown-menu {
    display: block;
  }
}

.dropdown-menu li {
  margin: 0;
  padding: 0;
}

.dropdown-menu li a {
  display: block;
  padding: 10px 20px;
  text-decoration: none;
  white-space: nowrap;
  font-weight: 400;
  font-size: 0.9em;
  color: var(--text-dark, #1a1a1a) !important;
  transition: background 0.2s ease, color 0.2s ease;
}

.dropdown-menu li a:hover {
  background: rgba(128,128,128,0.1);
  color: var(--nav-text-hover, var(--accent, var(--primary))) !important;
}

/* Desktop: Hide mobile-only elements */
@media (min-width: 769px) {
  .mobile-toggle,
  .phone-header-btn {
    display: none !important;
  }
  
  /* Hide Contact in nav-menu on desktop (it shows in CTA container instead) */
  .nav-menu .mobile-contact-link {
    display: none !important;
  }
  
  /* When .nav-right-group wrapper is absent, the nav-container has 3 direct
     children (brand, menu, CTA) with space-between. flex:1 makes the menu
     fill the gap, and justify-content:flex-start pushes items toward the
     logo side instead of centering them in the available space. */
  .nav-menu {
    flex: 1 !important;
    justify-content: flex-start !important;
  }
}

/* ============================================
   MOBILE RESPONSIVE (≤768px)
   ============================================ */
@media (max-width: 768px) {
  .navbar,
  nav.navbar {
    min-height: 70px !important;
  }

  /* Reset nav-container for mobile */
  /* CRITICAL: Reset position properties to prevent conflict with AI-generated mobile CSS */
  /* Some AI generations set .nav-container to position:fixed for slide-out menus, */
  /* position:relative is needed so .nav-brand (position:absolute) centers within it */
  .nav-container {
    padding: 0.75rem 1rem;
    gap: 0;
    justify-content: center !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    height: auto !important;
    min-height: 70px !important; /* Ensure height for absolutely positioned mobile buttons */
    width: 100% !important;
  }
  
  /* Show mobile elements - positioned as direct children of navbar */
  .mobile-toggle {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 36px !important;
    margin-top: auto;
    margin-bottom: auto;
    transform: none !important;
    left: 12px; /* LTR default - hamburger on left */
    right: auto;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    z-index: 1001;
    width: 36px !important;
    color: var(--nav-text, var(--text-light)) !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  
  .phone-header-btn {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 36px !important;
    margin-top: auto;
    margin-bottom: auto;
    transform: none !important;
    right: 12px; /* LTR default - phone on right */
    left: auto;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    z-index: 1001;
    width: 36px !important;
    color: var(--nav-text, var(--text-light)) !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  
  /* Ensure logo-link is centered */
  .logo-link, .nav-brand a {
    display: flex !important;
    justify-content: center !important;
    margin: 0 auto !important;
  }
  
  .mobile-toggle svg,
  .phone-header-btn svg {
    width: 24px !important;
    height: 24px !important;
    color: inherit !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    transition: opacity 0.3s ease;
  }
  
  .mobile-toggle svg path,
  .phone-header-btn svg path {
    stroke: currentColor !important;
  }
  
  .mobile-toggle img,
  .phone-header-btn img {
    width: 24px !important;
    height: 24px !important;
    /* Filter removed - preserve original image colors */
    /* ColorContrastService will handle contrast adjustments */
  }
  
  .mobile-toggle:hover svg,
  .phone-header-btn:hover svg {
    opacity: 0.8;
  }

  html[data-zappy-site-type="ecommerce"] .phone-header-btn,
  body[data-zappy-site-type="ecommerce"] .phone-header-btn,
  html[data-zappy-site-type="ecommerce"] header .phone-header-btn,
  html[data-zappy-site-type="ecommerce"] nav .phone-header-btn {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  
  /* Remove default button styles */
  .mobile-toggle:focus,
  .mobile-toggle:active,
  .phone-header-btn:focus,
  .phone-header-btn:active {
    outline: none;
    border: none;
    box-shadow: none;
  }
  
  /* Center logo on mobile - applies to both LTR and RTL */
  /* RTL selectors added for higher specificity to override desktop RTL rules */
  /* IMPORTANT: Do NOT use margin shorthand (margin: 0 auto) — it resets margin-top
     which breaks AI centering hacks (top:50% + margin-top:-Npx).
     Use explicit left/right + transform for robust vertical centering. */
  .nav-brand,
  html[dir="rtl"] .nav-brand,
  html[lang="he"] .nav-brand,
  html[lang="ar"] .nav-brand,
  html[dir="rtl"] .nav-right-group .nav-brand,
  html[lang="he"] .nav-right-group .nav-brand,
  html[lang="ar"] .nav-right-group .nav-brand {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    text-align: center;
    order: 0 !important;
  }
  
  /* Mobile logo size: fixed at 35px/110px — do not adjust, especially for e-commerce/catalog sites */
  .logo {
    max-height: 35px !important;
    max-width: 110px !important;
  }
  
  /* Hide RTL wrapper on mobile */
  .nav-right-group {
    display: contents !important;
  }
  
  /* Hide CTA container on mobile - Contact will be in hamburger menu */
  .nav-cta-container {
    display: none !important;
  }
  
  /* Mobile menu - hidden by default */
  /* CRITICAL: flex-direction: column must have !important to override any desktop rules */
  .nav-menu {
    position: fixed;
    top: 70px;
    width: 50%;
    max-width: 300px;
    /* Mobile menu is position:fixed so it CANNOT inherit background from navbar.
       When --nav-bg is transparent (hero-overlay navbars), the menu would be invisible.
       Always use a solid background derived from the palette. */
    background-color: var(--bg-dark, #1a1a1a) !important;
    flex-direction: column !important;
    gap: 0;
    padding: 20px 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: none;
    z-index: 999;
    margin: 0 !important;
    /* Align menu items to top, not center */
    align-items: stretch !important;
    justify-content: flex-start !important;
  }
  
  .nav-menu.active {
    display: flex !important;
    flex-direction: column !important;
  }
  
  .nav-menu li {
    width: 100%;
  }
  
  /* Show mobile-contact-link in hamburger menu */
  .nav-menu .mobile-contact-link {
    display: block !important;
  }
  
  /* LTR mobile menu text alignment - left aligned */
  html[dir="ltr"] .nav-menu a,
  html:not([dir="rtl"]):not([lang="he"]):not([lang="ar"]) .nav-menu a {
    text-align: left !important;
  }
  
  .nav-menu a {
    display: block;
    padding: 15px 30px;
    width: 100%;
    font-weight: 500;
  }
  
  /* Mobile dropdown menus */
  .nav-dropdown {
    position: static;
  }
  
  .dropdown-toggle {
    display: flex;
    width: 100%;
    padding: 15px 30px;
    font-weight: 500;
    justify-content: space-between;
  }
  
  .dropdown-menu {
    position: static !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: rgba(128,128,128,0.06) !important;
    min-width: auto !important;
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: max-height 0.3s ease !important;
  }
  
  .nav-dropdown .dropdown-menu {
    display: block;
    max-height: 0 !important;
    overflow: hidden !important;
  }
  
  .nav-dropdown.open > .dropdown-menu {
    display: block !important;
    max-height: none !important;
    overflow-y: visible !important;
    padding: 0.5rem 0 !important;
  }
  
  .dropdown-menu li a {
    padding: 12px 30px 12px 50px !important;
    font-size: 0.9em;
  }
  
  html[dir="rtl"] .dropdown-menu li a,
  html[lang="he"] .dropdown-menu li a,
  html[lang="ar"] .dropdown-menu li a {
    padding: 12px 50px 12px 30px !important;
  }

  /* Mobile submenu links: use nav panel text color instead of desktop submenu color.
     Desktop submenu uses light bg + dark text, but mobile submenu is inline (transparent)
     within the nav panel which may be dark. Cannot use 'inherit' because the container
     chain (.sub-menu, li) has dark color — only nav <a> tags get light color explicitly. */
  .navbar .sub-menu li a,
  nav.navbar .sub-menu li a,
  .nav-menu .sub-menu a,
  .zappy-products-dropdown .sub-menu a,
  .sub-menu a {
    color: var(--nav-text, var(--text-light)) !important;
    white-space: normal !important;
  }
  .mobile-submenu-toggle {
    color: var(--nav-text, var(--text-light)) !important;
  }

  /* Force sub-menu hidden by default on mobile */
  .navbar .zappy-products-dropdown .sub-menu,
  .navbar .zappy-products-dropdown > .sub-menu {
    display: none !important;
    position: static !important;
    max-height: 0 !important;
    overflow: hidden !important;
    
    visibility: hidden !important;
    pointer-events: none !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    transform: none !important;
  }
  /* Disable hover-triggered dropdowns on mobile — only open via click (.open class) */
  .navbar .zappy-products-dropdown:hover .sub-menu,
  .navbar .zappy-products-dropdown:hover > .sub-menu,
  .navbar .zappy-products-dropdown:focus-within .sub-menu,
  .navbar .zappy-products-dropdown:focus-within > .sub-menu,
  .navbar .menu-item-has-children:hover > .sub-menu,
  .navbar .nav-dropdown:hover > .dropdown-menu {
    display: none !important;
    
    visibility: hidden !important;
    max-height: 0 !important;
    pointer-events: none !important;
  }
  .navbar .zappy-products-dropdown.open .sub-menu,
  .navbar .zappy-products-dropdown.open > .sub-menu,
  .navbar .zappy-products-dropdown .sub-menu.mobile-expanded,
  .navbar .zappy-products-dropdown > .sub-menu.mobile-expanded,
  .navbar .menu-item-has-children.open > .sub-menu,
  .navbar .menu-item-has-children > .sub-menu.mobile-expanded,
  .navbar .nav-dropdown.open > .dropdown-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    max-height: none !important;
    pointer-events: auto !important;
    position: static !important;
    overflow-y: visible !important;
    padding: 0.5rem 0 !important;
  }

  /* Prevent hero image fade gradient from bleeding over headline text below */
  /* The .image-fade-gradient has bottom: -30px which extends below parent; */
  /* on mobile stacked layout this overlaps the h1 text */
  .hero-image-column {
    overflow: hidden !important;
  }
  .image-fade-gradient {
    bottom: 0 !important;
  }
}

/* ============================================
   LTR POSITIONING (English, Spanish, French, etc.)
   For LTR mobile: hamburger on LEFT, phone on RIGHT
   Uses !important to override any inline styles
   ============================================ */
@media (max-width: 768px) {
  html[dir="ltr"] .mobile-toggle,
  html:not([dir="rtl"]):not([lang="he"]):not([lang="ar"]) .mobile-toggle {
    left: 12px !important;
    right: auto !important;
  }
  
  html[dir="ltr"] .phone-header-btn,
  html:not([dir="rtl"]):not([lang="he"]):not([lang="ar"]) .phone-header-btn {
    right: 12px !important;
    left: auto !important;
  }
  
  html[dir="ltr"] .nav-menu,
  html:not([dir="rtl"]):not([lang="he"]):not([lang="ar"]) .nav-menu {
    left: 0 !important;
    right: auto !important;
  }
}

/* ============================================
   RTL POSITIONING (Hebrew, Arabic)
   For RTL mobile: hamburger on RIGHT, phone on LEFT
   (natural mirror of LTR layout)
   Uses !important to override any inline styles
   ============================================ */
@media (max-width: 768px) {
  html[dir="rtl"] .mobile-toggle,
  html[lang="he"] .mobile-toggle,
  html[lang="ar"] .mobile-toggle {
    left: auto !important;
    right: 12px !important;
  }
  
  html[dir="rtl"] .phone-header-btn,
  html[lang="he"] .phone-header-btn,
  html[lang="ar"] .phone-header-btn {
    left: 12px !important;
    right: auto !important;
  }
  
  html[dir="rtl"] .nav-menu,
  html[lang="he"] .nav-menu,
  html[lang="ar"] .nav-menu {
    right: 0 !important;
    left: auto !important;
  }
  
  html[dir="rtl"] .nav-menu a,
  html[lang="he"] .nav-menu a,
  html[lang="ar"] .nav-menu a {
    text-align: right !important;
  }
  
  /* Hide desktop language switcher on mobile - hamburger menu handles it */
  /* High specificity to override stored CSS */
  .lang-switcher,
  .nav-cta-container .lang-switcher,
  .nav-container .lang-switcher,
  .navbar .lang-switcher,
  .navbar .nav-cta-container .lang-switcher {
    display: none !important;
  }
}

/* ============================================
   CLONED SITE NAVBAR FIXES
   For sites without nav-right-group wrapper
   ============================================ */

/* Force navbar to be truly full width */
header {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.navbar {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

nav.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100% !important;
  max-width: none !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
}

/* iOS Safari fix: When the page has hidden horizontal overflow (which iOS
   does not clip on the <html> element), width: 100% / 100vw on a fixed
   element resolves to the visual viewport width, which can exceed the
   actual layout viewport. This pushes children positioned with right:0
   off-screen to the right.

   Two-part fix:
   1. Navbar — left:0 + right:0 + width:auto + overflow-x:clip anchors
      the navbar to the real layout viewport on all mobile browsers.
      overflow-x:clip (instead of hidden) prevents Safari from creating
      a scroll container that intercepts touch events on child elements.
   2. Mobile dropdown menu — position:fixed + right:0 on the menu still
      anchors to the iOS visual viewport (regardless of its navbar parent).
      We use a CSS variable --ios-viewport-gap, set by a runtime JS snippet
      (see ensureIOSNavbarGapFix in githubService) to
      (window.innerWidth - document.documentElement.clientWidth). Shifting
      the menu's 'right' by that gap lands it on the real layout-viewport
      right edge on iOS, and is a no-op on every other browser (gap=0).  */
@media (max-width: 768px) {
  .navbar,
  nav.navbar {
    width: auto !important;
    max-width: none !important;
    left: 0 !important;
    right: 0 !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
    box-sizing: border-box !important;
  }
  /* Selector list mirrors the RTL selectors used elsewhere in Zappy CSS so
     this rule wins the cascade via equal-or-higher specificity. */
  #navMenu,
  .nav-menu,
  html[dir="rtl"] .nav-menu,
  html[dir="rtl"] .navbar .nav-menu,
  html[dir="rtl"] nav .nav-menu,
  html[dir="rtl"] header .nav-menu,
  html[dir="rtl"] .nav-container .nav-menu,
  [dir="rtl"] .navbar .nav-menu,
  [dir="rtl"] nav .nav-menu,
  [dir="rtl"] header .nav-menu,
  [dir="rtl"] .nav-container .nav-menu,
  [dir="rtl"] .nav-menu,
  html[lang="he"] .nav-menu,
  html[lang="ar"] .nav-menu {
    position: fixed !important;
    top: var(--total-header-height, var(--zappy-navbar-bottom, 70px)) !important;
    right: var(--ios-viewport-gap, 0px) !important;
  }
}

/* Constrained nav-container - content limited to 1200px and centered */
.nav-container {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 2rem !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* RTL layout for cloned sites (without nav-right-group) */
/* Base RTL styles - apply to all screens */
html[dir="rtl"] .nav-container,
html[lang="he"] .nav-container,
html[lang="ar"] .nav-container {
  justify-content: space-between !important;
}

/* Logo stays on right in RTL - DESKTOP ONLY */
/* On mobile, logo should be centered (handled by mobile media query) */
@media (min-width: 769px) {
  html[dir="rtl"] .nav-brand,
  html[dir="rtl"] .logo-link,
  html[lang="he"] .nav-brand,
  html[lang="he"] .logo-link,
  html[lang="ar"] .nav-brand,
  html[lang="ar"] .logo-link {
    order: 2 !important;
    margin-left: 1.5rem !important;
  }
}

/* Base RTL nav-menu styles - display:flex but NOT flex-direction (that's desktop-only) */
html[dir="rtl"] .nav-menu,
html[lang="he"] .nav-menu,
html[lang="ar"] .nav-menu {
  order: 1 !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

/* CTA button pushed to far left in RTL */
html[dir="rtl"] .cta-button,
html[dir="rtl"] a.cta-button,
html[dir="rtl"] .nav-cta-btn,
html[lang="he"] .cta-button,
html[lang="he"] a.cta-button,
html[lang="he"] .nav-cta-btn,
html[lang="ar"] .cta-button,
html[lang="ar"] a.cta-button,
html[lang="ar"] .nav-cta-btn {
  order: 0 !important;
  margin-right: auto !important;
  margin-left: 0 !important;
}

/* DESKTOP ONLY: Horizontal flex layout for RTL navbar - prevents breaking mobile vertical menu */
@media (min-width: 769px) {
  html[dir="rtl"] .nav-container,
  html[lang="he"] .nav-container,
  html[lang="ar"] .nav-container {
    flex-direction: row-reverse !important;
  }
  
  html[dir="rtl"] .nav-menu,
  html[lang="he"] .nav-menu,
  html[lang="ar"] .nav-menu {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 1.5rem !important;
    /* flex:1 ensures menu fills space between brand and CTA so items
       stay adjacent to the logo instead of centering when the
       .nav-right-group wrapper is absent (cloned sites, etc.).
       justify-content: flex-start pushes items toward the logo
       (in RTL, flex-start = right side, adjacent to the brand). */
    flex: 1 !important;
    justify-content: flex-start !important;
  }
}

/* ============================================
   END NAVBAR FIXES
   ============================================ */

/* Post-generation fix: Remove main element margin-top and padding-top */
main:not(.courses-page-main) { margin-top: 0 !important; padding-top: 0 !important; }


/* Footer Styles */
.site-footer {
  background-color: var(--bg-dark, #21303F);
  color: var(--text-light, #F8F5EF);
  padding: 3.5rem 2rem 0;
  font-family: 'Rubik', sans-serif;
  direction: rtl;
  box-shadow: 0 8px 30px rgba(0,0,0,0.14);
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
}

.footer-top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--border-dark, #445566);
}

.footer-col h4 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 1.2rem;
  color: var(--text-light, #F8F5EF);
  letter-spacing: 0.02em;
  position: relative;
  padding-bottom: 0.5rem;
}

.footer-col h4::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40px;
  height: 2px;
  background-color: var(--secondary, #C8A96B);
}

.logo {
  display: block;
  margin-bottom: 1.2rem;
  height: 40px;
  width: auto;
}

.company-tagline {
  font-size: 0.9rem;
  line-height: 1.7;
  color: rgba(248, 245, 239, 0.75);
  margin: 0;
}

.footer-links,
.footer-contact,
.footer-hours {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li,
.footer-contact li,
.footer-hours li {
  margin-bottom: 0.7rem;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.footer-links a {
  color: rgba(248, 245, 239, 0.75);
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 0.95rem;
  border-radius: 0px;
}

.footer-links a:hover {
  color: var(--secondary, #C8A96B);
  padding-right: 5px;
}

.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.contact-icon {
  color: var(--secondary, #C8A96B);
  font-size: 0.9rem;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.contact-text,
.contact-text a {
  color: rgba(248, 245, 239, 0.75);
  text-decoration: none;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  border-radius: 0px;
  word-break: break-word;
}

.contact-text a:hover {
  color: var(--secondary, #C8A96B);
}

.footer-hours .hours-day {
  color: rgba(248, 245, 239, 0.75);
  font-size: 0.95rem;
  min-width: 85px;
  display: inline-block;
}

.footer-hours .hours-time {
  color: var(--text-light, #F8F5EF);
  font-size: 0.95rem;
  font-weight: 500;
}

.footer-social {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background-color: rgba(255,255,255,0.08);
  color: var(--text-light, #F8F5EF);
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 1rem;
  border-radius: 0px;
  border: 1px solid var(--border-dark, #445566);
}

.footer-social a:hover {
  background-color: var(--secondary, #C8A96B);
  color: var(--bg-dark, #21303F);
  border-color: var(--secondary, #C8A96B);
  transform: translateY(-2px);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 0;
  gap: 1rem;
}

.footer-bottom-left .copyright {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(248, 245, 239, 0.6);
}

.footer-bottom-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.85rem;
}

.footer-bottom-right a {
  color: rgba(248, 245, 239, 0.6);
  text-decoration: none;
  transition: all 0.3s ease;
  border-radius: 0px;
}

.footer-bottom-right a:hover {
  color: var(--secondary, #C8A96B);
}

.footer-bottom-right .divider {
  color: var(--border-dark, #445566);
}

.zappy-attribution {
  color: rgba(248, 245, 239, 0.5) !important;
  font-size: 0.8rem;
  margin-right: 0.5rem;
}

.zappy-attribution:hover {
  color: var(--secondary, #C8A96B) !important;
}

@media (max-width: 768px) {
  .site-footer {
    padding: 2.5rem 1.5rem 0;
  }
  .footer-top {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
  .footer-bottom-right {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .footer-top {
    gap: 1.8rem;
  }
  .footer-social {
    gap: 0.6rem;
  }
  .footer-social a {
    width: 34px;
    height: 34px;
    font-size: 0.9rem;
  }
}


/* V2 Decorative Helpers — quote marks */
:root { --decorative-quote-color: var(--accent, #b48b59); --decorative-quote-font: var(--accent-font, var(--font-display, serif)); }
blockquote::before, .quote::before, [data-quote]::before {
  content: "\201C";
  font-family: var(--decorative-quote-font);
  color: var(--decorative-quote-color);
  font-size: 3.5em;
  line-height: 0;
  margin-right: 0.1em;
  vertical-align: -0.4em;
  display: inline-block;
}
blockquote::after, .quote::after, [data-quote]::after {
  content: "\201D";
  font-family: var(--decorative-quote-font);
  color: var(--decorative-quote-color);
  font-size: 3.5em;
  line-height: 0;
  margin-left: 0.1em;
  vertical-align: -0.6em;
  display: inline-block;
}
html[dir="rtl"] blockquote::before, html[dir="rtl"] .quote::before, html[dir="rtl"] [data-quote]::before { content: "\201D"; }
html[dir="rtl"] blockquote::after, html[dir="rtl"] .quote::after, html[dir="rtl"] [data-quote]::after { content: "\201C"; }

/* V2 Decorative Helpers — section divider flourish */
hr.section-flourish, .section-flourish, [data-section-divider] {
  display: block;
  width: clamp(80px, 12vw, 180px);
  height: 2px;
  margin: 1.25rem auto;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--accent, var(--primary, #b48b59)) 30%, var(--accent, var(--primary, #b48b59)) 70%, transparent);
  border-radius: 999px;
  opacity: 0.85;
}

/* V2 Decorative Helpers — scroll cue (bottom-of-hero) */
.scroll-cue, [data-scroll-cue] {
  position: absolute;
  left: 50%;
  bottom: max(1.5rem, 4vh);
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--accent-font, var(--font-display, sans-serif));
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted, currentColor);
  pointer-events: none;
  z-index: 2;
}
.scroll-cue svg, [data-scroll-cue] svg { width: 1rem; height: 1rem; opacity: 0.7; }
@media (prefers-reduced-motion: no-preference) {
  .scroll-cue svg, [data-scroll-cue] svg { animation: decorative-scroll-bounce 2s ease-in-out infinite; }
}
@keyframes decorative-scroll-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}


/* Footer Contrast Guard — overrides dark-on-dark text */
.site-footer .contact-list a,
.site-footer .contact-list li,
.site-footer .contact-list span,
.site-footer .footer-legal a,
.site-footer .copyright p,
.site-footer .footer-description,
.site-footer .footer-bottom a,
.site-footer .footer-bottom p,
.site-footer .footer-bottom span:not(.separator) {
  color: #6E7781 !important;
}
.site-footer .contact-list a:hover,
.site-footer .footer-legal a:hover,
.site-footer .footer-bottom a:hover {
  color: #F8F5EF !important;
}
.site-footer .footer-legal .separator {
  color: #445566 !important;
}
/* Footer contact alignment fix */
.footer-contact li > a { display: flex; align-items: flex-start; gap: inherit; }
/* RTL footer contact: icon on the right (start) side, text on the left */
html[dir="rtl"] .footer-contact li,
html[dir="rtl"] .site-footer .footer-contact li,
html[dir="rtl"] .site-footer .footer-col:nth-child(3) .footer-contact li {
  flex-direction: row !important;
  justify-content: flex-start !important;
}
html[dir="rtl"] .footer-contact .contact-icon { order: 0 !important; }
html[dir="rtl"] .footer-contact .contact-text { order: 1 !important; }
html[dir="rtl"] .footer-contact li > a { flex-direction: row !important; }
/* hero */
.index-hero-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  overflow: hidden;
  background-color: var(--bg-dark);
  color: var(--text-light);
  direction: rtl;
}

/* Background image wrapper */
.index-hero-section .hero-bg-image-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.index-hero-section .hero-bg-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Scrim overlay */
.index-hero-section .hero-scrim-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  background-image: linear-gradient(
    to top,
    rgba(13, 27, 46, 0.85) 0%,
    rgba(13, 27, 46, 0.65) 40%,
    rgba(13, 27, 46, 0.35) 70%,
    rgba(13, 27, 46, 0.15) 100%
  );
}

/* Decorative arc route line */
.index-hero-section .hero-decorative-arc {
  position: absolute;
  bottom: 140px;
  left: 40px;
  width: 300px;
  height: 120px;
  z-index: 2;
  pointer-events: none;
  opacity: 0.6;
}

/* Content overlay group */
.index-hero-section .hero-overlay-content {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px 160px 40px;
  text-align: right;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8), 0 4px 24px rgba(0, 0, 0, 0.5);
}

/* Headline */
.index-hero-section .hero-headline {
  font-family: 'Rubik', sans-serif;
  font-size: 3.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--text-light);
  margin: 0 0 24px 0;
  direction: rtl;
}

/* Subtitle */
.index-hero-section .hero-subtitle {
  font-family: 'Rubik', sans-serif;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-light);
  margin: 0 0 40px 0;
  max-width: 650px;
  direction: rtl;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

/* CTA group */
.index-hero-section .hero-cta-group {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
  justify-content: flex-start;
}

/* Primary CTA button */
.index-hero-section .btn-primary.hero-cta {
  background: var(--primary);
  color: var(--text-light);
  padding: 16px 40px;
  border: none;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  direction: rtl;
  transition: all 0.3s ease;
  border-radius: 0px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.14);
  text-shadow: none;
  cursor: pointer;
}

.index-hero-section .btn-primary.hero-cta:hover {
  background: var(--accent);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.14);
  transform: translateY(-2px);
}

/* Secondary CTA button */
.index-hero-section .btn-secondary.hero-cta {
  background: transparent;
  color: var(--text-light);
  padding: 16px 40px;
  border: 2px solid var(--secondary);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  direction: rtl;
  transition: all 0.3s ease;
  border-radius: 0px;
  text-shadow: none;
  cursor: pointer;
}

.index-hero-section .btn-secondary.hero-cta:hover {
  background: var(--secondary);
  color: var(--bg-dark);
  border-color: var(--secondary);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.14);
  transform: translateY(-2px);
}

/* Bottom divider wrapper */
.index-hero-section .hero-divider-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  z-index: 5;
  pointer-events: none;
}

.index-hero-section .hero-divider-wrapper svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Responsive: Mobile */
@media (max-width: 768px) {
  .index-hero-section {
    min-height: 100vh;
    align-items: flex-end;
  }

  .index-hero-section .hero-overlay-content {
    padding: 100px 16px 120px 16px;
  }

  .index-hero-section .hero-headline {
    font-size: 2.2rem;
    line-height: 1.3;
    margin-bottom: 16px;
  }

  .index-hero-section .hero-subtitle {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 32px;
    max-width: 100%;
  }

  .index-hero-section .hero-cta-group {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .index-hero-section .btn-primary.hero-cta,
  .index-hero-section .btn-secondary.hero-cta {
    width: 100%;
    text-align: center;
    justify-content: center;
    padding: 14px 24px;
  }

  .index-hero-section .hero-decorative-arc {
    bottom: 120px;
    left: 10px;
    width: 180px;
    height: 80px;
    opacity: 0.4;
  }

  .index-hero-section .hero-divider-wrapper {
    height: 50px;
  }
}
/* ZAPPY_POSTGEN_GUARD_HERO_FONT_CAP:index-hero */
.hero h1, .hero-section h1, [class*="hero-"] h1, [class~="hero"] h1, .hero .hero-title, .hero-title { font-size: 48px !important; line-height: 1.2 !important; }
@media (max-width: 1024px) {
  .hero h1, .hero-section h1, [class*="hero-"] h1, [class~="hero"] h1, .hero .hero-title, .hero-title { font-size: 36px !important; }
}
@media (max-width: 768px) {
  .hero h1, .hero-section h1, [class*="hero-"] h1, [class~="hero"] h1, .hero .hero-title, .hero-title { font-size: 28px !important; }
}


/* services */
.index-services-section {
  position: relative;
  overflow: visible;
  background: linear-gradient(180deg, #F2EDE4 0%, #E8E0D2 100%);
  color: var(--text-dark);
  padding: 120px 16px 80px; /* 80px bottom padding for divider */
  direction: rtl;
  text-align: right;
}

.index-services-section__container {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Intro Block */
.index-services-section__intro {
  text-align: center;
  margin-bottom: 80px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.index-services-section__title {
  font-family: 'Rubik', sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.2;
  color: #1A1A1A;
  margin-bottom: 24px;
  text-align: center;
}

.index-services-section__subtitle {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: #3A3A3A;
  text-align: center;
  max-width: none !important;
}

/* Service Grid */
.index-services-section__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  direction: rtl;
}

/* Service Card */
.index-services-section__card {
  background: #F2EDE4;
  border-radius: 0px;
  box-shadow: none;
  padding: 48px;
  border-top: 1px solid rgba(200,169,110,0.25);
  text-align: right;
  direction: rtl;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.index-services-section__card:hover {
  box-shadow: 0 24px 72px rgba(13,27,46,0.22);
}

.index-services-section__card-icon {
  color: var(--secondary);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.index-services-section__card-title {
  font-family: 'Rubik', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--secondary);
  margin-bottom: 16px;
  text-align: right;
}

.index-services-section__card-text {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: #3A3A3A;
  margin-bottom: 32px;
  flex-grow: 1;
  text-align: right;
}

.index-services-section__card-link {
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--secondary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  direction: rtl;
  transition: all 0.3s ease;
  margin-top: auto;
  border-bottom: 1px solid transparent;
  padding-bottom: 4px;
}

.index-services-section__card-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.index-services-section__card-link svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transform: rotate(180deg); /* Arrow points left for RTL */
}

/* Bottom Divider Wrapper */
.index-services-section__divider-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  pointer-events: none;
  z-index: 5;
}

.index-services-section__divider-wrapper svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Decorative Map Fragment Texture */
.index-services-section__map-texture {
  position: absolute;
  top: 60px;
  left: 40px;
  width: 280px;
  height: 280px;
  background-image: url("data:image/svg+xml,%3Csvg width='280' height='280' viewBox='0 0 280 280' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23C8A96E' stroke-opacity='0.08' stroke-width='1'%3E%3Cpath d='M40 80 Q80 40 120 80 T200 80'/%3E%3Cpath d='M60 120 Q100 80 140 120 T220 120'/%3E%3Cpath d='M20 160 Q60 120 100 160 T180 160'/%3E%3Cpath d='M80 200 Q120 160 160 200 T240 200'/%3E%3Ccircle cx='100' cy='100' r='2' fill='%23C8A96E' fill-opacity='0.15'/%3E%3Ccircle cx='180' cy='140' r='3' fill='%23C8A96E' fill-opacity='0.15'/%3E%3Ccircle cx='140' cy='60' r='1.5' fill='%23C8A96E' fill-opacity='0.15'/%3E%3Cpath d='M20 40 L60 40 L60 80 Z' fill='%23C8A96E' fill-opacity='0.05'/%3E%3Cpath d='M200 180 L240 180 L240 220 Z' fill='%23C8A96E' fill-opacity='0.05'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 1;
  opacity: 0.8;
}

/* Responsive Design */
@media (max-width: 768px) {
  .index-services-section {
    padding: 72px 16px 60px;
  }

  .index-services-section__intro {
    margin-bottom: 48px;
  }

  .index-services-section__title {
    font-size: 1.8rem;
  }

  .index-services-section__grid {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }

  .index-services-section__card {
    padding: 32px 24px;
  }

  .index-services-section__map-texture {
    top: 20px;
    left: 10px;
    width: 160px;
    height: 160px;
    opacity: 0.4;
  }

  .index-services-section__divider-wrapper {
    height: 60px;
  }
}


/* testimonials */
.index-testimonials-section {
  position: relative;
  overflow: visible;
  background-color: var(--bg-dark);
  background-image:
    radial-gradient(circle at 15% 20%, rgba(200,169,107,0.06) 0%, transparent 50%),
    radial-gradient(circle at 85% 80%, rgba(166,61,78,0.08) 0%, transparent 50%),
    linear-gradient(180deg, #0D1B2E 0%, #162238 100%);
  color: var(--text-light);
  padding: 120px 24px 80px;
  direction: rtl;
  text-align: right;
}

.index-testimonials-section__bg-decor {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23C8A96E' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

.index-testimonials-section__container {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.index-testimonials-section__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  max-width: 720px;
}

.index-testimonials-section__title {
  font-family: 'Rubik', sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-light);
  margin: 0;
  text-align: right;
}

.index-testimonials-section__subtitle {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-light);
  opacity: 0.85;
  margin: 0;
  text-align: right;
  max-width: 600px;
}

.index-testimonials-section__gold-rule {
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, var(--secondary) 0%, rgba(200,169,107,0) 100%);
  margin-top: 8px;
}

.index-testimonials-section__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  direction: rtl;
}

.index-testimonials-section__card {
  position: relative;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(200, 169, 107, 0.15);
  border-radius: 0px;
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  box-shadow: 0 8px 30px rgba(0,0,0,0.14);
  backdrop-filter: blur(4px);
}

.index-testimonials-section__card:hover {
  border-color: rgba(200, 169, 107, 0.4);
  box-shadow: 0 24px 72px rgba(13,27,46,0.22);
  background: rgba(255, 255, 255, 0.04);
}

.index-testimonials-section__card-accent {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--secondary) 0%, rgba(200,169,107,0) 100%);
  
  transition: opacity 0.3s ease;
}

.index-testimonials-section__card:hover .index-testimonials-section__card-accent {
  opacity: 1;
}

.index-testimonials-section__quote {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  height: 100%;
  justify-content: space-between;
}

.index-testimonials-section__quote p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  color: var(--text-light);
  margin: 0;
  text-align: right;
  font-style: italic;
  position: relative;
  padding-top: 20px;
}

.index-testimonials-section__quote p::before {
  content: '\201C';
  position: absolute;
  top: -12px;
  inset-inline-start: 0;
  font-family: 'Rubik', sans-serif;
  font-size: 4rem;
  line-height: 1;
  color: var(--secondary);
  opacity: 0.4;
  font-style: normal;
}

.index-testimonials-section__attribution {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 16px;
  border-top: 1px solid rgba(200, 169, 107, 0.2);
}

.index-testimonials-section__name {
  font-family: 'Rubik', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--secondary);
  font-style: normal;
  letter-spacing: 0.02em;
}

.index-testimonials-section__role {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text-light);
  opacity: 0.6;
  line-height: 1.6;
}

.index-testimonials-section__divider-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  pointer-events: none;
  z-index: 5;
}

.index-testimonials-section__divider-wrapper svg {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 768px) {
  .index-testimonials-section {
    padding: 100px 16px 60px;
  }

  .index-testimonials-section__container {
    gap: 48px;
  }

  .index-testimonials-section__title {
    font-size: 1.8rem;
  }

  .index-testimonials-section__grid {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }

  .index-testimonials-section__card {
    padding: 32px 24px;
  }

  .index-testimonials-section__quote p {
    font-size: 16px;
  }
}

/* about-preview */
.index-about-preview-section {
  background: linear-gradient(180deg, #F2EDE4 0%, #E8E0D2 100%);
  color: var(--text-dark);
  position: relative;
  overflow: visible;
  padding: 120px 16px 60px;
  direction: rtl;
}

.index-about-preview-section .about-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 80px;
  position: relative;
  z-index: 10;
}

.index-about-preview-section .about-content {
  flex: 1 1 55%;
  min-width: 300px;
}

.index-about-preview-section .about-content h2 {
  font-family: 'Rubik', sans-serif;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-dark);
  margin-bottom: 16px;
  text-align: right;
}

.index-about-preview-section .about-content h3 {
  font-family: 'Rubik', sans-serif;
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--secondary);
  margin-bottom: 24px;
  text-align: right;
  position: relative;
  padding-bottom: 16px;
}

.index-about-preview-section .about-content h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 80px;
  height: 1px;
  background-color: var(--secondary);
  opacity: 0.5;
}

.index-about-preview-section .about-content p {
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-dark);
  margin-bottom: 20px;
  text-align: right;
  max-width: 600px;
}

.index-about-preview-section .about-cta {
  display: inline-block;
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  margin-top: 12px;
  padding: 12px 0;
  border-bottom: 2px solid var(--secondary);
  transition: all 0.3s ease;
  letter-spacing: 0.02em;
  text-align: right;
}

.index-about-preview-section .about-cta:hover {
  color: var(--secondary);
  border-bottom-color: var(--accent);
  transform: translateY(-2px);
}

.index-about-preview-section .about-image-frame {
  flex: 1 1 45%;
  min-width: 300px;
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.index-about-preview-section .image-backplate {
  position: absolute;
  bottom: -20px;
  left: -20px;
  width: 70%;
  height: 70%;
  background: linear-gradient(135deg, var(--secondary) 0%, #A07840 100%);
  opacity: 0.15;
  z-index: 0;
  pointer-events: none;
}

.index-about-preview-section .image-wrapper {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 450px;
  box-shadow: 0 20px 60px rgba(13,27,46,0.35);
  border: 1px solid rgba(200,169,110,0.3);
  background-color: var(--bg-light);
}

.index-about-preview-section .image-wrapper img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  filter: brightness(0.95) contrast(1.05) saturate(0.9);
  transition: all 0.6s ease;
}

.index-about-preview-section .image-wrapper:hover img {
  filter: brightness(1) contrast(1) saturate(1);
}

.index-about-preview-section .about-divider-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  pointer-events: none;
  z-index: 5;
}

.index-about-preview-section .about-divider-wrapper svg {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 768px) {
  .index-about-preview-section {
    padding: 72px 16px 60px;
  }

  .index-about-preview-section .about-container {
    flex-direction: column !important;
    gap: 40px;
    padding: 0;
  }

  .index-about-preview-section .about-content {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
  }

  .index-about-preview-section .about-content h2 {
    font-size: 1.75rem;
  }

  .index-about-preview-section .about-content h3 {
    font-size: 1.25rem;
  }

  .index-about-preview-section .about-image-frame {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    justify-content: center;
  }

  .index-about-preview-section .image-backplate {
    bottom: -15px;
    left: -15px;
    width: 60%;
    height: 60%;
  }

  .index-about-preview-section .image-wrapper {
    max-width: 100%;
  }
}

/* cta */
.index-cta-section {
  position: relative;
  background-color: var(--bg-dark);
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(200, 169, 107, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(166, 61, 78, 0.06) 0%, transparent 50%),
    linear-gradient(180deg, #0D1B2E 0%, #162238 100%);
  color: var(--text-light);
  padding: 120px 16px;
  overflow: hidden;
  text-align: center;
  direction: rtl;
}

.index-cta-section__overlay {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23C8A96E' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

.index-cta-section__container {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
  padding: 48px;
  border: 1px solid var(--secondary);
  background-color: rgba(13, 27, 46, 0.6);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.14);
}

.index-cta-section__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.index-cta-section__heading {
  font-family: 'Rubik', sans-serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-light);
  margin: 0;
  text-align: center;
  max-width: 600px;
}

.index-cta-section__text {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-light);
  margin: 0;
  text-align: center;
  max-width: 600px;
  opacity: 0.9;
}

.index-cta-section__actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-block-start: 8px;
}

.index-cta-section__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  font-family: 'Rubik', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: all 0.3s ease;
  border-radius: 0px;
  direction: rtl;
  min-width: 180px;
}

.index-cta-section__btn--primary {
  background-color: var(--accent);
  color: #FFFFFF;
  border: none;
}

.index-cta-section__btn--primary:hover {
  background-color: #8B1A1A;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.14);
  transform: translateY(-2px);
}

.index-cta-section__btn--secondary {
  background-color: transparent;
  color: var(--secondary);
  border: 2px solid var(--secondary);
}

.index-cta-section__btn--secondary:hover {
  background-color: rgba(200, 169, 107, 0.1);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.14);
  transform: translateY(-2px);
}

.index-cta-section__decoration {
  position: absolute;
  bottom: -20px;
  left: -20px;
  width: 220px;
  height: 220px;
  z-index: 0;
  pointer-events: none;
  opacity: 0.8;
}

@media (max-width: 768px) {
  .index-cta-section {
    padding: 72px 16px;
  }

  .index-cta-section__container {
    padding: 32px 16px;
  }

  .index-cta-section__heading {
    font-size: 28px;
  }

  .index-cta-section__actions {
    flex-direction: column;
    width: 100%;
    gap: 16px;
  }

  .index-cta-section__btn {
    width: 100%;
    justify-content: center;
  }

  .index-cta-section__decoration {
    width: 140px;
    height: 140px;
    bottom: -10px;
    left: -10px;
    opacity: 0.6;
  }
}


/* intro */
.practice-areas-intro-section {
  position: relative;
  overflow: hidden;
  background-color: var(--bg-light);
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23C8A96E' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  color: var(--text-dark);
  padding-top: 120px;
  padding-bottom: 120px;
  direction: rtl;
}

.practice-areas-intro-section .section-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Background pattern overlay */
.practice-areas-intro-section .section-bg-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
  background-image: radial-gradient(circle at 20% 30%, rgba(200,169,110,0.08) 0%, transparent 50%),
                    radial-gradient(circle at 80% 70%, rgba(200,169,110,0.06) 0%, transparent 50%);
}

/* Header */
.practice-areas-intro-section .section-header {
  text-align: center;
  margin-bottom: 80px;
  position: relative;
  z-index: 1;
}

.practice-areas-intro-section .section-title {
  font-family: 'Rubik', sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-dark);
  margin: 0 0 24px 0;
  letter-spacing: 0;
  direction: rtl;
}

.practice-areas-intro-section .gold-divider {
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--secondary), transparent);
  margin: 0 auto 32px auto;
  opacity: 0.5;
}

.practice-areas-intro-section .section-description {
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.8;
  color: var(--text-dark);
  max-width: 720px;
  margin: 0 auto;
  direction: rtl;
  text-align: center;
}

/* Overview Blocks Grid */
.practice-areas-intro-section .overview-blocks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  position: relative;
  z-index: 1;
  direction: rtl;
}

/* Individual Block */
.practice-areas-intro-section .overview-block {
  background: var(--bg-light);
  border-radius: 0px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.14);
  padding: 48px;
  border-top: 1px solid rgba(200,169,110,0.25);
  text-align: right;
  direction: rtl;
  transition: all 0.3s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.practice-areas-intro-section .overview-block:hover {
  box-shadow: 0 24px 72px rgba(13,27,46,0.22);
}

.practice-areas-intro-section .block-icon-wrapper {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--secondary);
  margin-bottom: 8px;
}

.practice-areas-intro-section .block-icon {
  width: 40px;
  height: 40px;
}

.practice-areas-intro-section .block-title {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--secondary);
  margin: 0;
  direction: rtl;
}

.practice-areas-intro-section .block-description {
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--text-dark);
  margin: 0;
  direction: rtl;
}

/* Responsive */
@media (max-width: 768px) {
  .practice-areas-intro-section {
    padding-top: 100px;
    padding-bottom: 72px;
  }

  .practice-areas-intro-section .section-container {
    padding: 0 16px;
  }

  .practice-areas-intro-section .section-header {
    margin-bottom: 48px;
  }

  .practice-areas-intro-section .section-title {
    font-size: 1.8rem;
  }

  .practice-areas-intro-section .section-description {
    font-size: 1rem;
    padding: 0;
    max-width: none;
  }

  .practice-areas-intro-section .overview-blocks {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }

  .practice-areas-intro-section .overview-block {
    padding: 32px;
    gap: 16px;
  }
}


/* capabilities */
/* ============================================================
   PRACTICE AREAS CAPABILITIES SECTION
   Unique Class: practice-areas-capabilities-section
   Page: תחומי עיסוק | Type: capabilities
   Design: Editorial alternating rows with layered paper-edge divider
   ============================================================ */

.practice-areas-capabilities-section {
  position: relative;
  overflow: visible;
  background-color: var(--bg-light);
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23C8A96E' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  color: var(--text-dark);
  padding: 120px 16px 140px;
  direction: rtl;
  text-align: right;
}

/* Section Header */
.practice-areas-capabilities-section .section-header {
  max-width: 1200px;
  margin: 0 auto 80px;
  text-align: center;
  padding: 0 16px;
}

.practice-areas-capabilities-section .section-title {
  font-family: 'Rubik', sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-dark);
  margin: 0 0 16px;
  letter-spacing: 0;
}

.practice-areas-capabilities-section .section-subtitle {
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.8;
  color: var(--text-muted);
  margin: 0 auto;
  max-width: 700px;
}

/* Practice Row */
.practice-areas-capabilities-section .practice-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 60px;
  max-width: 1200px;
  margin: 0 auto 100px;
  padding: 0 16px;
}

.practice-areas-capabilities-section .practice-row:last-of-type {
  margin-bottom: 60px;
}

/* Reverse layout for alternating rows (image on right, text on left) */
.practice-areas-capabilities-section .practice-row--reverse {
  flex-direction: row-reverse;
}

/* Content Block */
.practice-areas-capabilities-section .practice-content {
  flex: 1 1 50%;
  min-width: 0;
}

.practice-areas-capabilities-section .practice-heading {
  font-family: 'Rubik', sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-dark);
  margin: 0 0 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(200, 169, 110, 0.25);
  position: relative;
}

.practice-areas-capabilities-section .practice-heading::after {
  content: '';
  position: absolute;
  bottom: -1px;
  right: 0;
  width: 80px;
  height: 2px;
  background: linear-gradient(135deg, var(--secondary) 0%, rgba(200, 169, 110, 0.3) 100%);
}

.practice-areas-capabilities-section .practice-description {
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--text-dark);
  margin: 0 0 28px;
}

/* Practice List */
.practice-areas-capabilities-section .practice-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.practice-areas-capabilities-section .practice-list-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-dark);
}

.practice-areas-capabilities-section .list-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--secondary);
  stroke: var(--secondary);
}

/* Image Block */
.practice-areas-capabilities-section .practice-image-wrapper {
  flex: 1 1 50%;
  min-width: 0;
  margin: 0;
  position: relative;
}

.practice-areas-capabilities-section .practice-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 16 / 10;
  border-radius: 0px;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--border-light);
}

.practice-areas-capabilities-section .image-caption {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-muted);
  text-align: right;
  margin-top: 12px;
  padding-inline-end: 4px;
}

/* Bottom Divider: Layered Paper-Edge */
.practice-areas-capabilities-section .practice-areas-capabilities-divider-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  pointer-events: none;
  z-index: 5;
}

.practice-areas-capabilities-section .practice-areas-capabilities-divider-wrapper svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ============================================================
   RESPONSIVE - MOBILE (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {
  .practice-areas-capabilities-section {
    padding: 72px 16px 100px;
  }

  .practice-areas-capabilities-section .section-header {
    margin-bottom: 48px;
    padding: 0;
  }

  .practice-areas-capabilities-section .section-title {
    font-size: 1.8rem;
  }

  .practice-areas-capabilities-section .section-subtitle {
    font-size: 0.95rem;
  }

  .practice-areas-capabilities-section .practice-row {
    flex-direction: column !important;
    gap: 32px;
    margin-bottom: 64px;
    padding: 0;
  }

  .practice-areas-capabilities-section .practice-row:last-of-type {
    margin-bottom: 40px;
  }

  .practice-areas-capabilities-section .practice-content {
    flex: 1 1 100%;
    width: 100%;
  }

  .practice-areas-capabilities-section .practice-heading {
    font-size: 1.5rem;
  }

  .practice-areas-capabilities-section .practice-image-wrapper {
    flex: 1 1 100%;
    width: 100%;
  }

  .practice-areas-capabilities-section .practice-image {
    aspect-ratio: 16 / 9;
  }

  .practice-areas-capabilities-section .practice-list-item {
    font-size: 0.9rem;
  }
}

/* ============================================================
   RESPONSIVE - TABLET (769px - 1024px)
   ============================================================ */
@media (min-width: 769px) and (max-width: 1024px) {
  .practice-areas-capabilities-section .practice-row {
    gap: 40px;
  }

  .practice-areas-capabilities-section .practice-heading {
    font-size: 1.6rem;
  }
}

/* process */
.practice-areas-process-section {
  position: relative;
  overflow: hidden;
  background-color: var(--bg-dark);
  background-image:
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23C8A96B' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, #0D1B2E 0%, #162238 100%);
  color: var(--text-light);
  direction: rtl;
  padding: var(--spacing-section, 120px) 16px;
}

.practice-areas-process-section .process-section-bg {
  display: none;
}

.practice-areas-process-section .process-container {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
}

.practice-areas-process-section .process-header {
  text-align: right;
  margin-bottom: 64px;
  max-width: 700px;
  margin-inline-start: 0;
  margin-inline-end: 0;
}

.practice-areas-process-section .process-title {
  font-family: 'Rubik', sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-light);
  margin: 0 0 16px 0;
  letter-spacing: 0;
  direction: rtl;
  text-align: right;
}

.practice-areas-process-section .process-subtitle {
  font-family: 'Rubik', sans-serif;
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.8;
  color: var(--text-muted);
  margin: 0;
  direction: rtl;
  text-align: right;
}

.practice-areas-process-section .process-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-card-gap, 40px);
  direction: rtl;
}

.practice-areas-process-section .process-step-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: transparent;
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-card, 0px);
  padding: var(--spacing-card-padding, 48px);
  box-shadow: var(--shadow-subtle, 0 8px 30px rgba(0,0,0,0.14));
  transition: var(--transition-hover, all 0.3s ease);
  min-width: 0;
  box-sizing: border-box;
}

.practice-areas-process-section .process-step-card:hover {
  box-shadow: var(--shadow-elevated, 0 24px 72px rgba(13,27,46,0.22));
  border-color: var(--secondary);
}

.practice-areas-process-section .step-number-container {
  display: flex;
  align-items: center;
  gap: 16px;
  direction: rtl;
}

.practice-areas-process-section .step-number {
  font-family: 'Rubik', sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--secondary);
  line-height: 1;
  opacity: 0.9;
  flex-shrink: 0;
}

.practice-areas-process-section .step-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(to left, var(--border-dark) 0%, transparent 100%);
  opacity: 0.6;
}

.practice-areas-process-section .step-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.practice-areas-process-section .step-title {
  font-family: 'Rubik', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-light);
  margin: 0;
  direction: rtl;
  text-align: right;
}

.practice-areas-process-section .step-description {
  font-family: 'Rubik', sans-serif;
  font-weight: 400;
  line-height: 1.75;
  color: var(--text-muted);
  margin: 0;
  direction: rtl;
  text-align: right;
}

@media (max-width: 768px) {
  .practice-areas-process-section {
    padding: var(--spacing-section-mobile, 72px) 16px;
  }

  .practice-areas-process-section .process-header {
    margin-bottom: 40px;
    max-width: 100%;
  }

  .practice-areas-process-section .process-steps-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .practice-areas-process-section .process-step-card {
    padding: 32px 24px;
  }

  .practice-areas-process-section .step-number {
    font-size: 1.8rem;
  }

  .practice-areas-process-section .step-title {
    font-size: 1.2rem;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .practice-areas-process-section .process-steps-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
}


/* faq */
.practice-areas-faq-section {
  background-color: var(--bg-light);
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23C8A96E' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  color: var(--text-dark);
  padding: 120px 16px;
  position: relative;
  overflow: visible;
  direction: rtl;
}

.practice-areas-faq-section .faq-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}

.practice-areas-faq-section .faq-header {
  text-align: center;
  margin-bottom: 64px;
  position: relative;
  z-index: 2;
}

.practice-areas-faq-section .faq-title {
  font-family: 'Rubik', sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-dark);
  margin: 0 0 16px 0;
  text-align: center;
}

.practice-areas-faq-section .faq-subtitle {
  font-family: 'Rubik', sans-serif;
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.8;
  color: var(--text-muted);
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.practice-areas-faq-section .faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  position: relative;
  z-index: 2;
}

.practice-areas-faq-section .faq-item {
  background: var(--bg-light);
  border: 1px solid var(--border-light);
  border-radius: 0px;
  box-shadow: var(--shadow-subtle);
  padding: 48px;
  transition: all 0.3s ease;
  text-align: right;
  direction: rtl;
}

.practice-areas-faq-section .faq-item:hover {
  box-shadow: var(--shadow-elevated);
  border-color: var(--secondary);
}

.practice-areas-faq-section .faq-question {
  font-family: 'Rubik', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--secondary);
  margin: 0 0 16px 0;
  text-align: right;
}

.practice-areas-faq-section .faq-answer {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-dark);
  margin: 0;
  text-align: right;
}

@media (max-width: 768px) {
  .practice-areas-faq-section {
    padding: 72px 16px;
  }

  .practice-areas-faq-section .faq-header {
    margin-bottom: 40px;
  }

  .practice-areas-faq-section .faq-title {
    font-size: 1.8rem;
  }

  .practice-areas-faq-section .faq-subtitle {
    font-size: 1rem;
  }

  .practice-areas-faq-section .faq-grid {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }

  .practice-areas-faq-section .faq-item {
    padding: 24px;
  }

  .practice-areas-faq-section .faq-question {
    font-size: 1.15rem;
  }
}


/* profile */
.about-profile-section {
  position: relative;
  overflow: visible;
  background: linear-gradient(180deg, #F2EDE4 0%, #E8E0D2 100%);
  color: var(--text-dark);
  padding: 120px 20px 80px;
  direction: rtl;
}

.about-profile-section__container {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 80px;
  position: relative;
  z-index: 10;
}

/* Text Column (Right side in RTL) */
.about-profile-section__text {
  flex: 1 1 55%;
  text-align: right;
}

.about-profile-section__heading {
  font-family: 'Rubik', sans-serif;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-dark);
  margin: 0 0 16px 0;
  letter-spacing: -0.01em;
}

.about-profile-section__subheading {
  font-family: 'Rubik', sans-serif;
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--secondary);
  margin: 0 0 32px 0;
}

.about-profile-section__paragraph {
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-dark);
  margin: 0 0 24px 0;
  max-width: 560px;
  text-align: right;
}

.about-profile-section__gold-rule {
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, rgba(200,169,107,0) 0%, var(--secondary) 50%, rgba(200,169,107,0) 100%);
  margin-block-start: 40px;
  opacity: 0.5;
}

/* Image Column (Left side in RTL) */
.about-profile-section__image-col {
  flex: 1 1 45%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.about-profile-section__frame {
  background-color: var(--secondary);
  padding: 12px;
  box-shadow: 0 16px 48px rgba(13,27,46,0.14);
}

.about-profile-section__mat {
  background-color: #F2EDE4;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-profile-section__image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 650px;
  object-fit: cover;
  border-radius: 0px;
  box-shadow: none;
  background-color: #E8E0D2;
}

/* Bottom Divider */
.about-profile-section__divider-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

.about-profile-section__divider-wrapper svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Responsive Styles */
@media (max-width: 1024px) {
  .about-profile-section__container {
    gap: 48px;
  }
  .about-profile-section__heading {
    font-size: 2.5rem;
  }
}

@media (max-width: 768px) {
  .about-profile-section {
    padding: 100px 16px 80px;
  }

  .about-profile-section__container {
    flex-direction: column;
    gap: 40px;
  }

  .about-profile-section__text {
    flex: 1 1 auto;
    text-align: right;
  }

  .about-profile-section__heading {
    font-size: 2rem;
  }

  .about-profile-section__subheading {
    font-size: 1.2rem;
  }

  .about-profile-section__paragraph {
    max-width: 100%;
  }

  .about-profile-section__image-col {
    flex: 1 1 auto;
    justify-content: center;
    width: 100%;
  }

  .about-profile-section__frame {
    max-width: 400px;
    margin: 0 auto;
  }

  .about-profile-section__mat {
    padding: 16px;
  }

  .about-profile-section__gold-rule {
    margin-block-start: 32px;
  }
}

/* values */
.about-values-section {
  background-color: var(--bg-dark);
  background-image:
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23C8A96E' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, #0D1B2E 0%, #162238 100%);
  color: var(--text-light);
  padding: 120px 16px;
  position: relative;
  overflow: hidden;
  direction: rtl;
  text-align: right;
}

.about-values-section__container {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.about-values-section__header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 72px auto;
}

.about-values-section__title {
  font-family: 'Rubik', sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-light);
  margin: 0 0 16px 0;
  letter-spacing: 0;
}

.about-values-section__subtitle {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--text-muted);
  margin: 0;
  max-width: none !important;
}

.about-values-section__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  direction: rtl;
}

.about-values-section__card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-dark);
  padding: 48px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.14);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: right;
  position: relative;
}

.about-values-section__card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--secondary);
  box-shadow: 0 24px 72px rgba(13,27,46,0.22);
}

.about-values-section__card-icon {
  color: var(--secondary);
  margin-bottom: 24px;
  flex-shrink: 0;
}

.about-values-section__card-icon svg {
  width: 36px;
  height: 36px;
  display: block;
}

.about-values-section__card-title {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--secondary);
  margin: 0 0 16px 0;
}

.about-values-section__card-text {
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--text-muted);
  margin: 0;
}

@media (max-width: 768px) {
  .about-values-section {
    padding: 72px 16px;
  }

  .about-values-section__header {
    margin-bottom: 48px;
    padding: 0;
  }

  .about-values-section__title {
    font-size: 1.8rem;
  }

  .about-values-section__grid {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }

  .about-values-section__card {
    padding: 32px 24px;
  }

  .about-values-section__card-icon svg {
    width: 32px;
    height: 32px;
  }
}

/* story */
.about-story-section {
  position: relative;
  overflow: hidden;
  background-color: #F2EDE4;
  background-image: 
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23C8A96E' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  color: var(--text-dark);
  padding: 120px 16px;
  direction: rtl;
}

.about-story-section__container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
}

/* Image Wrapper - positioned to the END side (left in RTL), peeking into the reading area */
.about-story-section__image-wrapper {
  flex-shrink: 0;
  width: 360px;
  margin-inline-start: -60px;
  margin-block-start: 60px;
  position: relative;
  z-index: 1;
  order: 1;
}

.about-story-section__image-wrapper img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 0px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.14);
  filter: grayscale(20%) sepia(10%);
}

/* Content Column - narrow centered reading column */
.about-story-section__content {
  max-width: 620px;
  width: 100%;
  position: relative;
  z-index: 10;
  order: 0;
  padding-block: 0;
  padding-inline: 0;
  margin-inline-end: 0;
}

.about-story-section__title {
  font-family: 'Rubik', sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-dark);
  text-align: right;
  margin: 0 0 32px 0;
  letter-spacing: 0;
  direction: rtl;
}

.about-story-section__text-block {
  margin-bottom: 24px;
}

.about-story-section__text-block p {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--text-dark);
  text-align: right;
  direction: rtl;
  margin: 0;
}

/* Gold horizontal decorative rule */
.about-story-section__divider {
  width: 80px;
  height: 1px;
  background: linear-gradient(to left, rgba(200,169,110,0.5), rgba(200,169,110,0));
  margin-block: 32px;
  margin-inline: 0;
  direction: rtl;
}

.about-story-section__closing {
  font-family: 'Rubik', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.8;
  color: var(--secondary);
  text-align: right;
  direction: rtl;
  margin: 0;
  font-style: italic;
}

/* Subtle paper texture overlay */
.about-story-section__texture {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg width='150' height='150' viewBox='0 0 150 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  opacity: 0.4;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .about-story-section {
    padding: 72px 16px;
  }

  .about-story-section__container {
    flex-direction: column;
    align-items: center;
  }

  .about-story-section__image-wrapper {
    width: 240px;
    margin-inline-start: 0;
    margin-block-start: 0;
    margin-bottom: 32px;
    order: 0;
    align-self: flex-start;
    position: relative;
    left: -16px;
  }

  .about-story-section__content {
    max-width: 100%;
    padding-inline: 0;
  }

  .about-story-section__title {
    font-size: 1.8rem;
    margin-bottom: 24px;
  }

  .about-story-section__divider {
    margin-block: 24px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .about-story-section__image-wrapper {
    width: 280px;
    margin-inline-start: -40px;
  }

  .about-story-section__content {
    max-width: 520px;
  }
}

/* credentials */
.about-credentials-section {
  background: linear-gradient(180deg, #F2EDE4 0%, #E8E0D2 100%);
  color: var(--text-dark);
  padding: 120px 16px;
  position: relative;
  overflow: hidden;
  direction: rtl;
  text-align: right;
}

.about-credentials-section__container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.about-credentials-section__heading-wrapper {
  margin-bottom: 64px;
}

.about-credentials-section__heading {
  font-family: 'Rubik', sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  color: var(--text-dark);
  margin: 0 0 16px 0;
  text-align: start;
}

.about-credentials-section__heading-rule {
  width: 80px;
  height: 1px;
  background: linear-gradient(to left, var(--secondary), rgba(200, 169, 107, 0.1));
  margin-inline-start: 0;
}

.about-credentials-section__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  direction: rtl;
}

.about-credentials-section__column {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.about-credentials-section__column-title {
  font-family: 'Rubik', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--secondary);
  margin: 0;
  text-align: start;
}

.about-credentials-section__text {
  font-family: 'Rubik', sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--text-dark);
  margin: 0;
  text-align: start;
}

.about-credentials-section__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.about-credentials-section__list-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  font-family: 'Rubik', sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-dark);
  text-align: start;
}

.about-credentials-section__list-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--secondary);
}

.about-credentials-section__highlight-box {
  background: rgba(200, 169, 107, 0.08);
  border-inline-start: 3px solid var(--secondary);
  padding: 24px;
  margin-top: 8px;
}

.about-credentials-section__highlight-text {
  font-family: 'Rubik', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.75;
  color: var(--text-dark);
  margin: 0;
  text-align: start;
}

/* Decorative subtle texture overlay */
.about-credentials-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23C8A96E' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .about-credentials-section {
    padding: 72px 16px;
  }

  .about-credentials-section__heading {
    font-size: 1.8rem;
  }

  .about-credentials-section__grid {
    grid-template-columns: 1fr !important;
    gap: 48px;
  }

  .about-credentials-section__heading-wrapper {
    margin-bottom: 40px;
  }

  .about-credentials-section__column {
    gap: 20px;
  }
}

/* contact-intro */
.contact-contact-intro-section {
  background: linear-gradient(180deg, #F2EDE4 0%, #E8E0D2 100%);
  color: var(--text-dark);
  padding: 120px 16px;
  position: relative;
  overflow: hidden;
  direction: rtl;
  text-align: right;
}

@media (max-width: 768px) {
  .contact-contact-intro-section {
    padding: 100px 16px 72px;
  }
}

.contact-contact-intro-container {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Decorative Gold Rule */
.contact-contact-intro-rule {
  width: 80px;
  height: 1px;
  background: linear-gradient(to left, transparent, var(--secondary), transparent);
  margin-inline-end: 0;
  margin-bottom: 48px;
  opacity: 0.5;
}

@media (max-width: 768px) {
  .contact-contact-intro-rule {
    margin-bottom: 32px;
  }
}

/* Header Block */
.contact-contact-intro-header {
  max-width: 860px;
  margin-bottom: 48px;
}

.contact-contact-intro-title {
  font-family: 'Rubik', sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-dark);
  margin: 0 0 24px 0;
  letter-spacing: 0;
  direction: rtl;
  text-align: right;
}

.contact-contact-intro-subtitle {
  font-family: 'Rubik', sans-serif;
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.8;
  color: #2A2A2A;
  margin: 0;
  direction: rtl;
  text-align: right;
}

@media (max-width: 768px) {
  .contact-contact-intro-title {
    font-size: 1.8rem;
  }
  .contact-contact-intro-subtitle {
    font-size: 1rem;
    line-height: 1.7;
  }
}

/* Reassurance Cards Grid */
.contact-contact-intro-reassurance {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-bottom: 48px;
  direction: rtl;
}

@media (max-width: 768px) {
  .contact-contact-intro-reassurance {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }
}

.contact-contact-intro-card {
  background: var(--bg-light);
  border-radius: 0px;
  box-shadow: none;
  padding: 48px;
  border-top: 1px solid rgba(200,169,110,0.25);
  text-align: right;
  direction: rtl;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  transition: all 0.3s ease;
  border: 1px solid var(--border-light);
}

.contact-contact-intro-card:hover {
  box-shadow: 0 24px 72px rgba(13,27,46,0.22);
}

@media (max-width: 768px) {
  .contact-contact-intro-card {
    padding: 32px 24px;
  }
}

.contact-contact-intro-card-icon {
  color: var(--secondary);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(200,169,107, 0.08);
  border-radius: 0px;
}

.contact-contact-intro-card-title {
  font-family: 'Rubik', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--secondary);
  margin: 0 0 16px 0;
  direction: rtl;
  text-align: right;
}

.contact-contact-intro-card-text {
  font-family: 'Rubik', sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.75;
  color: #3A3A3A;
  margin: 0;
  direction: rtl;
  text-align: right;
}

/* CTA Button Wrapper */
.contact-contact-intro-cta-wrapper {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

@media (max-width: 768px) {
  .contact-contact-intro-cta-wrapper {
    justify-content: center;
  }
}

.contact-contact-intro-btn {
  background: var(--accent);
  color: #FFFFFF;
  padding: 14px 28px;
  border-radius: 4px;
  border: none;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  direction: rtl;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 8px 30px rgba(0,0,0,0.14);
  cursor: pointer;
}

.contact-contact-intro-btn:hover {
  box-shadow: 0 24px 72px rgba(13,27,46,0.22);
  background: #8B1A1A;
  color: #FFFFFF;
}

.contact-contact-intro-btn svg {
  transition: transform 0.3s ease;
}

.contact-contact-intro-btn:hover svg {
  transform: scaleX(-1) translateX(4px);
}

/* Subtle map-line texture overlay */
.contact-contact-intro-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23C8A96E' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* Onion dome silhouette decoration - bottom right */
.contact-contact-intro-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 220px;
  height: 220px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 10 C50 10, 20 30, 20 50 C20 65, 35 70, 35 70 L35 90 L65 90 L65 70 C65 70, 80 65, 80 50 C80 30, 50 10, 50 10 Z M50 25 C50 25, 35 40, 35 50 C35 58, 42 63, 50 63 C58 63, 65 58, 65 50 C65 40, 50 25, 50 25 Z M42 72 L58 72 L58 85 L42 85 Z' fill='%23C8A96E'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: contain;
}

@media (max-width: 768px) {
  .contact-contact-intro-section::after {
    width: 120px;
    height: 120px;
    opacity: 0.04;
  }
}

/* contact-form */
.contact-contact-form-section {
  background: var(--bg-light);
  color: var(--text-dark);
  padding: 120px 16px 0;
  direction: rtl;
  position: relative;
  overflow: visible;
}

.contact-contact-form-section__container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.contact-contact-form-section__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

/* Form Column */
.contact-contact-form-section__form-col {
  width: 100%;
}

.contact-contact-form-section__title {
  font-family: 'Rubik', sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-dark);
  margin-bottom: 8px;
  text-align: right;
}

.contact-contact-form-section__subtitle {
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.8;
  color: var(--text-muted);
  margin-bottom: 48px;
  text-align: right;
}

.contact-contact-form-section__form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.contact-contact-form-section__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-contact-form-section__label {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.75;
  color: var(--text-dark);
  text-align: right;
}

.contact-contact-form-section__input,
.contact-contact-form-section__textarea {
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: 0px;
  padding: 16px 20px;
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-dark);
  font-family: 'Rubik', sans-serif;
  transition: all 0.3s ease;
  text-align: right;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

.contact-contact-form-section__input:focus,
.contact-contact-form-section__textarea:focus {
  border-color: var(--secondary);
  box-shadow: 0 0 0 3px rgba(200, 169, 107, 0.1);
}

.contact-contact-form-section__input::placeholder,
.contact-contact-form-section__textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.7;
}

.contact-contact-form-section__privacy {
  margin-top: 8px;
}

.contact-contact-form-section__privacy-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-muted);
  text-align: right;
  cursor: pointer;
}

.contact-contact-form-section__privacy-label a {
  color: var(--secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
}

.contact-contact-form-section__privacy-label a:hover {
  color: var(--accent);
}

.contact-contact-form-section__checkbox {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--secondary);
  cursor: pointer;
  flex-shrink: 0;
}

.contact-contact-form-section__btn {
  background: var(--primary);
  color: var(--text-light);
  padding: 16px 40px;
  border-radius: 0px;
  border: none;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  direction: rtl;
  margin-top: 16px;
  align-self: flex-start;
  text-transform: none;
  width: auto;
}

.contact-contact-form-section__btn:hover {
  background: #1A2530;
  box-shadow: 0 8px 30px rgba(0,0,0,0.14);
}

/* Details Column */
.contact-contact-form-section__details-col {
  width: 100%;
}

.contact-contact-form-section__details-card {
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: 0px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.14);
  padding: 48px;
  text-align: right;
  direction: rtl;
}

.contact-contact-form-section__details-title {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--secondary);
  margin-bottom: 32px;
  text-align: right;
}

.contact-contact-form-section__details-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.contact-contact-form-section__details-item {
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: right;
}

.contact-contact-form-section__icon {
  width: 20px;
  height: 20px;
  color: var(--secondary);
  flex-shrink: 0;
  stroke: var(--secondary);
}

.contact-contact-form-section__details-text {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-dark);
}

.contact-contact-form-section__details-link {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-dark);
  text-decoration: none;
  transition: color 0.3s ease;
}

.contact-contact-form-section__details-link:hover {
  color: var(--secondary);
}

.contact-contact-form-section__response-note {
  margin-bottom: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border-light);
}

.contact-contact-form-section__response-note p {
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--text-muted);
  text-align: right;
}

.contact-contact-form-section__map-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--secondary);
  text-decoration: none;
  border-bottom: 1px solid var(--secondary);
  padding-bottom: 4px;
  transition: all 0.3s ease;
}

.contact-contact-form-section__map-link:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* Divider */
.contact-contact-form-section__divider-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  pointer-events: none;
  z-index: 5;
}

.contact-contact-form-section__divider-wrapper svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Responsive */
@media (max-width: 768px) {
  .contact-contact-form-section {
    padding: 100px 16px 0;
  }

  .contact-contact-form-section__grid {
    grid-template-columns: 1fr !important;
    gap: 48px;
  }

  .contact-contact-form-section__details-card {
    padding: 32px 24px;
  }

  .contact-contact-form-section__title {
    font-size: 1.8rem;
  }

  .contact-contact-form-section__subtitle {
    margin-bottom: 32px;
  }

  .contact-contact-form-section__btn {
    width: 100%;
    justify-content: center;
  }
}

/* location */
.contact-location-section {
  position: relative;
  background-color: var(--bg-dark);
  background-image:
    radial-gradient(circle at 15% 20%, rgba(200,169,110,0.06) 0%, transparent 50%),
    radial-gradient(circle at 85% 80%, rgba(45,62,80,0.4) 0%, transparent 60%),
    linear-gradient(180deg, #0D1B2E 0%, #162238 100%);
  color: var(--text-light);
  padding: var(--spacing-section) 16px;
  overflow: hidden;
  direction: rtl;
}

.contact-location-section__container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 64px;
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.contact-location-section__text-col {
  flex: 1 1 55%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-element-gap);
  text-align: right;
}

.contact-location-section__heading {
  font-family: 'Rubik', sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-light);
  margin: 0;
  letter-spacing: 0;
  text-align: right;
  position: relative;
  padding-bottom: 16px;
}

.contact-location-section__heading::after {
  content: '';
  display: block;
  width: 80px;
  height: 2px;
  background: var(--secondary);
  margin-top: 16px;
  margin-inline-start: 0;
  margin-inline-end: auto;
  opacity: 0.6;
}

.contact-location-section__description {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--text-light);
  margin: 0;
  text-align: right;
  max-width: 560px;
  margin-inline-start: auto;
  margin-inline-end: 0;
}

.contact-location-section__cta {
  margin-top: 8px;
  align-self: flex-end;
}

.contact-location-section__image-col {
  flex: 1 1 45%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contact-location-section__image-wrapper {
  position: relative;
  width: 100%;
  max-width: 540px;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid rgba(200,169,110,0.25);
  box-shadow: var(--shadow-soft);
  background-color: #0D1B2E;
}

.contact-location-section__image-wrapper img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
  filter: brightness(0.9) contrast(1.1) saturate(0.8);
}

.contact-location-section__image-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(135deg, rgba(13,27,46,0.7) 0%, rgba(22,34,56,0.3) 40%, rgba(13,27,46,0.5) 100%);
  pointer-events: none;
}

.contact-location-section__map-texture {
  position: absolute;
  inset: 0;
  z-index: 3;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 10 L90 10 M10 30 L70 30 M10 50 L90 50 M30 70 L90 70 M10 90 L50 90' stroke='%23C8A96E' stroke-width='0.5' fill='none' opacity='0.15'/%3E%3Ccircle cx='20' cy='20' r='1.5' fill='%23C8A96E' opacity='0.2'/%3E%3Ccircle cx='80' cy='40' r='1.5' fill='%23C8A96E' opacity='0.2'/%3E%3Ccircle cx='60' cy='80' r='1.5' fill='%23C8A96E' opacity='0.2'/%3E%3Ccircle cx='40' cy='60' r='1.5' fill='%23C8A96E' opacity='0.2'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 120px 120px;
  pointer-events: none;
  mix-blend-mode: overlay;
}

.contact-location-section__decorative-line {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(200,169,110,0.4) 50%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

@media (max-width: 768px) {
  .contact-location-section {
    padding: var(--spacing-section-mobile) 16px;
  }

  .contact-location-section__container {
    flex-direction: column !important;
    gap: 40px;
  }

  .contact-location-section__text-col {
    flex: 1 1 auto;
    width: 100%;
    text-align: right;
  }

  .contact-location-section__heading {
    font-size: 1.8rem;
    text-align: right;
  }

  .contact-location-section__description {
    max-width: none;
    margin-inline-start: 0;
    margin-inline-end: 0;
  }

  .contact-location-section__cta {
    align-self: flex-end;
  }

  .contact-location-section__image-col {
    flex: 1 1 auto;
    width: 100%;
  }

  .contact-location-section__image-wrapper {
    max-width: 100%;
    aspect-ratio: 4 / 3;
  }

  .contact-location-section__decorative-line {
    width: 60%;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .contact-location-section__container {
    gap: 40px;
  }
  
  .contact-location-section__text-col {
    flex: 1 1 50%;
  }

  .contact-location-section__image-col {
    flex: 1 1 50%;
  }
}


/* closing-message */
.contact-closing-message-section {
  background: linear-gradient(180deg, #F2EDE4 0%, #E8E0D2 100%);
  color: var(--text-dark);
  padding: var(--spacing-section, 120px) 16px;
  position: relative;
  overflow: hidden;
  text-align: center;
  direction: rtl;
}

.contact-closing-message-section__container {
  max-width: 780px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contact-closing-message-section__decorative-line {
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, rgba(200,169,110,0) 0%, rgba(200,169,110,0.6) 50%, rgba(200,169,110,0) 100%);
  margin-bottom: 40px;
}

.contact-closing-message-section__heading {
  font-family: 'Rubik', sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.2;
  color: #1A1A1A;
  margin: 0 0 24px 0;
  text-align: center;
  max-width: none !important;
  direction: rtl;
}

.contact-closing-message-section__text {
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.8;
  color: #2A2A2A;
  margin: 0 0 40px 0;
  text-align: center;
  max-width: 680px;
  direction: rtl;
}

.contact-closing-message-section__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #8B1A1A;
  color: #FFFFFF;
  padding: 16px 40px;
  border-radius: 4px;
  border: none;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: all 0.3s ease;
  direction: rtl;
  box-shadow: 0 16px 48px rgba(139,26,26,0.25);
  cursor: pointer;
}

.contact-closing-message-section__cta:hover {
  background: #6E1414;
  box-shadow: 0 24px 72px rgba(139,26,26,0.35);
  transform: translateY(-2px);
}

.contact-closing-message-section__cta svg {
  transform: scaleX(-1);
  flex-shrink: 0;
}

.contact-closing-message-section__onion-dome {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 220px;
  height: 180px;
  z-index: 0;
  pointer-events: none;
  opacity: 0.8;
}

.contact-closing-message-section__onion-dome svg {
  width: 100%;
  height: 100%;
}

@media (max-width: 768px) {
  .contact-closing-message-section {
    padding: 72px 16px;
  }

  .contact-closing-message-section__heading {
    font-size: 1.8rem;
  }

  .contact-closing-message-section__text {
    font-size: 1rem;
    margin-bottom: 32px;
  }

  .contact-closing-message-section__cta {
    padding: 14px 32px;
    font-size: 0.9rem;
  }

  .contact-closing-message-section__onion-dome {
    width: 110px;
    height: 90px;
    bottom: -10px;
    left: -10px;
  }
}



/* Global font override - exclude icon fonts and special elements */
*:not(.fas):not(.far):not(.fab):not(.fa):not([class*="fa-"]):not(.iconify):not([class*="icon"]):not(code):not(pre):not(i[class*="fa"]) {
  font-family: 'Rubik', sans-serif !important;
}


/* Logo size constraint - enforce max-height only */
.logo, img.logo, .logo img, .logo-link img, .nav-brand img {
  max-height: 40px !important;
  height: auto !important;
  width: auto !important;
  object-fit: contain !important;
}


/* Footer contact alignment fix */
.footer-contact li > a { display: flex; align-items: flex-start; gap: inherit; }

/* RTL footer contact: icon on the right (start) side, text on the left */
html[dir="rtl"] .footer-contact li, html[dir="rtl"] .site-footer .footer-contact li, html[dir="rtl"] .site-footer .footer-col:nth-child(3) .footer-contact li { flex-direction: row !important; justify-content: flex-start !important; }
html[dir="rtl"] .footer-contact .contact-icon { order: 0 !important; }
html[dir="rtl"] .footer-contact .contact-text { order: 1 !important; }
html[dir="rtl"] .footer-contact li > a { flex-direction: row !important; }


/* ============================================
   MOBILE RESPONSIVE FIXES (Auto-generated)
   Safe, minimal fixes for common overflow issues
   ============================================ */

@media (max-width: 768px) {
  
  /* 1. GLOBAL FIXES - Essential for preventing horizontal scroll */
  html, body {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: clip !important;
    box-sizing: border-box !important;
  }
  
  *, *::before, *::after {
    box-sizing: border-box !important;
  }

  /* 2. FORM FIXES - Forms often have fixed widths */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="url"],
  input[type="search"],
  select,
  textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .form-field,
  .form-group,
  .input-group {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 3. GRID TO COLUMN CONVERSION */
  /* Only convert grids that don't have proper mobile handling */
  [style*="display: grid"]:not([data-zappy-auto-grid="true"]):not(.zappy-preserve-css-grid),
  [style*="display:grid"]:not([data-zappy-auto-grid="true"]):not(.zappy-preserve-css-grid),
  .grid:not([data-zappy-auto-grid="true"]):not(.zappy-preserve-css-grid) {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }
  
  /* Ensure auto-grids use single column on mobile */
  [data-zappy-auto-grid="true"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  
  /* Force single-column for AI-generated grids with class names like gallery-grid, features-grid, etc. */
  /* These often have fixed column counts (repeat(3, 1fr) or repeat(4, 1fr)) that don't fit mobile */
  [class*="-grid"]:not([data-zappy-auto-grid="true"]):not([data-zappy-explicit-columns="true"]) {
    grid-template-columns: 1fr !important;
  }
  
  /* Reset any column/row spanning items on mobile - they cause overflow */
  [class*="-grid"] > [class*="-large"],
  [class*="-grid"] > [class*="-item-large"],
  [class*="-grid"] > [style*="grid-column: span"],
  [class*="-grid"] > [style*="grid-row: span"] {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }
  
  /* Fix zoom wrapper images to be responsive on mobile */
  [data-zappy-zoom-wrapper="true"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
  
  [data-zappy-zoom-wrapper="true"] img {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    max-height: 300px !important;
    object-fit: cover !important;
    top: 0 !important;
    left: 0 !important;
  }

  /* Hero sections need extra padding-top to clear the sticky navbar */
  /* The navbar is ~70px tall, so hero needs at least 100px padding-top */
  /* IMPORTANT: Use section tag to avoid matching child elements like buttons that contain "-hero-section" in their BEM class */
  section[class*="-hero-section"]:first-of-type,
  main > section:first-child {
    padding-top: 100px !important;
  }

  main > section:first-child:has(.hero-sbs-wrap),
  section[class*="-hero-section"]:first-of-type:has(.hero-sbs-wrap) {
    padding-top: 0 !important;
  }

  .hero-sbs-image-frame [data-zappy-zoom-wrapper="true"] img {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* 4. TYPOGRAPHY SCALING - Only headings, NOT spans (breaks icons) */
  h1 {
    font-size: clamp(28px, 8vw, 48px) !important;
  }
  
  h2 {
    font-size: clamp(24px, 6vw, 36px) !important;
  }
  
  h3 {
    font-size: clamp(20px, 5vw, 28px) !important;
  }
  
  h4 {
    font-size: clamp(18px, 4vw, 24px) !important;
  }

  /* Body text scaling - exclude spans to avoid breaking icons */
  p, li {
    font-size: clamp(14px, 4vw, 18px) !important;
  }

  /* 5. IMAGE RESPONSIVENESS */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* 5b. HERO BG IMAGE EXCEPTION - fullscreen hero backgrounds must fill their
     absolute-positioned wrapper, not shrink to natural aspect-ratio height.
     data-hero-bg is added deterministically by sectionGenerationService. */
  img[data-hero-bg] {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
  }

  /* 6. MULTI-COLUMN LAYOUTS */
  .columns,
  [style*="column-count"],
  [style*="columns:"] {
    column-count: 1 !important;
    columns: 1 !important;
  }

  /* 7. TABLES */
  table {
    width: 100% !important;
    display: block !important;
    overflow-x: auto !important;
  }

  /* 8. CARDS/BLOCKS */
  .card,
  .block,
  .box {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 9. HERO SECTIONS - Targeted selectors only */
  section.hero,
  section.hero-section,
  section[class*="hero-section"] {
    min-height: auto !important;
    height: auto !important;
    padding: 2rem 1rem !important;
  }

  /* 9b. HERO SECTION CHILDREN - prevent 100vh min-height on inner wrappers
     AI often sets content-wrappers / scrim divs to min-height:100vh which
     creates huge empty space on mobile. Reset direct children so the section
     sizes to its content. Absolute-positioned backgrounds are unaffected. */
  section.hero > *,
  section.hero-section > *,
  section[class*="hero-section"] > * {
    min-height: auto !important;
  }

  /* 9c. FULLSCREEN HERO EXCEPTION — from sharedMobileCss.js */

  section[data-hero-type*="fullscreen"] {
    height: auto !important;
    min-height: 100svh !important;
    padding: 0 0 90px 0 !important;
  }
  section[data-hero-type*="fullscreen"] > [class*="-container"]:not([class*="bg"]):not([class*="scrim"]):not([class*="divider"]),
  section[data-hero-type*="fullscreen"] > .container {
    padding-bottom: 100px !important;
    min-height: auto !important;
  }

  /* 10. HERO TITLE ACCENTS - ensure inline display for proper text flow */
  h1 span[class*="accent"],
  h2 span[class*="accent"],
  .hero-title span,
  .hero-heading span {
    display: inline !important;
  }

  /* 11. PACKAGES/CARDS GRIDS - Specific class targeting */
  .packages-grid,
  .cards-grid,
  .pricing-grid {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  /* 12. PREVENT HORIZONTAL SCROLL - Safety net */
  body > * {
    max-width: 100vw !important;
  }
}

/* END MOBILE RESPONSIVE FIXES */


/* Legal Pages Content Styles */

/* Legal Pages Content Styles */
.legal-page-content {
  padding: 120px 0 60px;
  min-height: 60vh;
  color: inherit;
}

.legal-page-content .container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

.legal-page-content h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: inherit;
}

.legal-page-content .last-updated {
  color: #666;
  margin-bottom: 2rem;
  font-style: italic;
}

.legal-page-content h2 {
  font-size: 1.5rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: inherit;
}

.legal-page-content p {
  margin-bottom: 1rem;
  line-height: 1.7;
}

.legal-page-content ul {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}

[dir="rtl"] .legal-page-content ul {
  padding-left: 0;
  padding-right: 1.5rem;
}

.legal-page-content li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

.legal-page-content .contact-box,
.legal-page-content .contact-info {
  background: rgba(0, 0, 0, 0.03);
  padding: 1.5rem;
  border-radius: 8px;
  margin-top: 1.5rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.legal-page-content .contact-box a,
.legal-page-content .contact-info a {
  color: inherit;
  text-decoration: underline;
}

.legal-page-content .contact-box a:hover,
.legal-page-content .contact-info a:hover {
  opacity: 0.8;
}

.legal-page-content .important-notice,
.legal-page-content .legal-reference {
  background: rgba(0, 0, 0, 0.03);
  padding: 1rem 1.5rem;
  border-radius: 8px;
  margin: 1.5rem 0;
  border-left: 4px solid currentColor;
}

[dir="rtl"] .legal-page-content .important-notice,
[dir="rtl"] .legal-page-content .legal-reference {
  border-left: none;
  border-right: 4px solid currentColor;
}

/* Cookie Consent Styles */

/* Cookie Consent Customizations ccCssV13 */
:root {
  /* --cc-bg has to STAY translucent (with the matching backdrop-filter on
   * the bar below) so the slim bar reads as a frosted overlay rather than
   * a solid horizontal stripe slapped on top of the page. The preferences
   * modal — which doesn't use backdrop-filter — overrides this to a solid
   * white below so it doesn't render see-through against the page. */
  --cc-bg: rgba(255, 255, 255, 0.96);
  --cc-modal-bg: #ffffff;
  --cc-primary-color: #1f2937;
  --cc-secondary-color: #4b5563;
  --cc-btn-primary-bg: #2d3e50;
  --cc-btn-primary-color: #ffffff;
  --cc-btn-primary-border: #2d3e50;
  --cc-btn-primary-hover-bg: #142537;
  --cc-btn-primary-hover-border: #142537;
  --cc-btn-primary-hover-color: #ffffff;
  /* --cc-btn-secondary-* are used by BOTH the bar's "Customize" link and
   * the preferences modal's "Accept Necessary" / "Save Preferences" pills.
   * We keep the token defaults sensible (light grey fill, dark text) so
   * the preferences-modal buttons stay visible, then override only
   * .zappy-cookie-banner__button--customize directly to render the
   * Customize link as a transparent underlined text. */
  --cc-btn-secondary-bg: #f3f4f6;
  --cc-btn-secondary-color: #1f2937;
  --cc-btn-secondary-border: #e5e7eb;
  --cc-btn-secondary-hover-bg: #e5e7eb;
  --cc-btn-secondary-hover-color: #111827;
  --cc-btn-secondary-hover-border: #d1d5db;
  --cc-toggle-on-bg: #2d3e50;
}

#cc-main,
#cc--main {
  font-family: inherit !important;
  color: var(--cc-primary-color);
}

/* === Zappy-owned slim bottom bar ===
 * Single-row inline layout: [description text] ......... [Customize] [Accept]
 * The banner is our DOM (#zappy-cookie-banner), not the library's #cm
 * consent modal. That avoids vanilla-cookieconsent's internal
 * <button><span>Label</span></button> structure entirely.
 */
#zappy-cookie-banner {
  position: fixed !important;
  inset: auto 0 0 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 10px 56px 10px 20px !important;
  background: var(--cc-bg) !important;
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border: none !important;
  border-top: 1px solid rgba(45, 62, 80, 0.18) !important;
  border-radius: 0 !important;
  box-shadow: 0 -1px 12px rgba(0, 0, 0, 0.04) !important;
  display: flex !important;
  align-items: center !important;
  min-height: 52px !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  z-index: 2147483646;
}

#zappy-cookie-banner .zappy-cookie-banner__inner {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 16px !important;
  max-width: 1200px;
  width: 100% !important;
  margin: 0 auto;
  padding: 0 !important;
  min-height: 32px !important;
}

#zappy-cookie-banner .zappy-cookie-banner__text {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--cc-primary-color) !important;
  height: 32px !important;
  min-height: 32px !important;
  line-height: 32px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#zappy-cookie-banner .zappy-cookie-banner__actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 0 auto;
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
}

#zappy-cookie-banner .zappy-cookie-banner__button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 0 16px !important;
  height: 32px !important;
  min-height: 0 !important;
  line-height: 1 !important;
  border-radius: 999px !important;
  transition: background-color 0.15s ease, color 0.15s ease;
  cursor: pointer;
}

/* Primary "Accept" — filled pill in site primary color */
#zappy-cookie-banner .zappy-cookie-banner__button--accept {
  background-color: var(--cc-btn-primary-bg) !important;
  color: var(--cc-btn-primary-color) !important;
  border: 1px solid var(--cc-btn-primary-border) !important;
}

#zappy-cookie-banner .zappy-cookie-banner__button--accept:hover {
  background-color: var(--cc-btn-primary-hover-bg) !important;
  border-color: var(--cc-btn-primary-hover-border) !important;
}

/* Secondary "Customize" — borderless underlined text link.
 * Same height as the Accept pill so the row stays perfectly aligned, but
 * with no fill, no border, and an underline that sits 3px below the
 * baseline (text-underline-offset). Hard-coded brand color so this rule
 * doesn't depend on --cc-btn-secondary-* (which have to stay sensible
 * defaults for the preferences modal's two secondary pills). */
#zappy-cookie-banner .zappy-cookie-banner__button--customize {
  background-color: transparent !important;
  color: #2d3e50 !important;
  border: none !important;
  padding: 0 8px !important;
  height: 32px !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  border-radius: 6px !important;
}

#zappy-cookie-banner .zappy-cookie-banner__button--customize:hover {
  color: #142537 !important;
  background-color: transparent !important;
}

#zappy-cookie-banner .zappy-cookie-banner__close {
  position: absolute !important;
  top: 8px !important;
  right: 12px !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  border-radius: 999px !important;
  color: var(--cc-secondary-color) !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
#zappy-cookie-banner .zappy-cookie-banner__close:hover {
  background-color: rgba(0, 0, 0, 0.06) !important;
  color: var(--cc-primary-color) !important;
}
#zappy-cookie-banner .zappy-cookie-banner__button:focus-visible,
#zappy-cookie-banner .zappy-cookie-banner__close:focus-visible {
  outline: 2px solid var(--cc-btn-primary-bg) !important;
  outline-offset: 2px;
}
/* RTL: anchor the X to the top-LEFT and shift body padding accordingly. */
[dir="rtl"] #zappy-cookie-banner {
  padding: 10px 20px 10px 56px !important;
}
[dir="rtl"] #zappy-cookie-banner .zappy-cookie-banner__close {
  right: auto !important;
  left: 12px !important;
}

/* === Preferences modal — minimalist restyle ===
 * The modal opens when "Customize" is clicked. It MUST render as a solid
 * card — pre-fix it inherited the bar's translucent --cc-bg without the
 * matching backdrop-filter, leaving the page footer visibly bleeding
 * through the modal box, the title, the toggle rows, and the bottom
 * button row. Solid white box + clean shadow + an explicit slightly
 * darker scrim on the overlay restores proper modal hierarchy. */
/* The scrim belongs on wrapper layers only. In vanilla-cookieconsent v3,
 * .pm / #pm is the preferences card itself, so styling .pm as the dark
 * overlay makes the card look transparent. */
#cc-main .pm-wrapper,
#cc--main .pm-wrapper,
#cc-main .pm-wrapper.pm--box,
#cc--main .pm-wrapper.pm--box {
  background: rgba(0, 0, 0, 0.32) !important;
}

#cc-main #pm,
#cc--main #pm,
#cc-main .pm,
#cc--main .pm,
#cc-main .pm .pm__box,
#cc--main .pm .pm__box,
#cc-main .pm__box,
#cc--main .pm__box {
  background: var(--cc-modal-bg) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-radius: 14px !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.18) !important;
}

#cc-main .pm__header,
#cc--main .pm__header,
#cc-main .pm__body,
#cc--main .pm__body,
#cc-main .pm__footer,
#cc--main .pm__footer,
#cc-main .pm__section,
#cc--main .pm__section {
  background: var(--cc-modal-bg) !important;
}

#cc-main .pm__title,
#cc--main .pm__title {
  font-weight: 600 !important;
  color: var(--cc-primary-color) !important;
}

#cc-main .pm__btn[data-role="accept-all"],
#cc--main .pm__btn[data-role="accept-all"] {
  background-color: var(--cc-btn-primary-bg) !important;
  border-color: var(--cc-btn-primary-border) !important;
  color: var(--cc-btn-primary-color) !important;
  border-radius: 999px !important;
}

#cc-main .pm__btn[data-role="accept-all"]:hover,
#cc--main .pm__btn[data-role="accept-all"]:hover {
  background-color: var(--cc-btn-primary-hover-bg) !important;
  border-color: var(--cc-btn-primary-hover-border) !important;
}

/* Secondary modal pills — "Accept Necessary" + "Save Preferences".
 * Must be a visible solid fill (light grey on white card) so users can
 * actually find them. Pre-fix these inherited --cc-btn-secondary-bg:
 * transparent (used by the bar's Customize text link), making them
 * invisible against the modal background. */
#cc-main .pm__btn,
#cc--main .pm__btn {
  border-radius: 999px !important;
}
#cc-main .pm__btn[data-role="necessary"],
#cc--main .pm__btn[data-role="necessary"],
#cc-main .pm__btn[data-role="save"],
#cc--main .pm__btn[data-role="save"] {
  background-color: var(--cc-btn-secondary-bg) !important;
  color: var(--cc-btn-secondary-color) !important;
  border: 1px solid var(--cc-btn-secondary-border) !important;
}
#cc-main .pm__btn[data-role="necessary"]:hover,
#cc--main .pm__btn[data-role="necessary"]:hover,
#cc-main .pm__btn[data-role="save"]:hover,
#cc--main .pm__btn[data-role="save"]:hover {
  background-color: var(--cc-btn-secondary-hover-bg) !important;
  color: var(--cc-btn-secondary-hover-color) !important;
  border-color: var(--cc-btn-secondary-hover-border) !important;
}

/* Toggle thumbs in brand color when on */
#cc-main .section__toggle:checked + .toggle__icon,
#cc--main .section__toggle:checked + .toggle__icon,
#cc-main .section__toggle:checked ~ .toggle__icon,
#cc--main .section__toggle:checked ~ .toggle__icon {
  background-color: var(--cc-toggle-on-bg) !important;
}

/* Mobile fallback: two rows (description on top, buttons below) */
@media (max-width: 640px) {
  #zappy-cookie-banner {
    padding: 10px 14px !important;
  }
  #zappy-cookie-banner .zappy-cookie-banner__inner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  #zappy-cookie-banner .zappy-cookie-banner__text {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.4 !important;
  }
  #zappy-cookie-banner .zappy-cookie-banner__actions {
    width: 100%;
    justify-content: space-between;
  }
  #zappy-cookie-banner .zappy-cookie-banner__button--accept {
    flex: 1 1 auto;
    text-align: center;
  }
}

/* Cookie preferences button in legal footer keeps default behavior */
.cookie-preferences-btn:hover {
  text-decoration: none !important;
}

/* Accessibility Styles */

/* Basic Accessibility Enhancements */
:root {
  --accessibility-focus: #21303F;
}

/* Skip link styles */
.skip-link:focus {
  position: absolute !important;
  top: 6px !important;
  left: 6px !important;
  background: #000 !important;
  color: white !important;
  padding: 8px !important;
  text-decoration: none !important;
  z-index: 10000 !important;
  border-radius: 4px !important; transform: none; }

/* Enhanced focus indicators */
*:focus {
  outline: 2px solid var(--accessibility-focus) !important;
  outline-offset: 2px !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  * {
    border-color: currentColor !important;
  }
}

/* Reduced motion support */
@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;
  }
}

/* Screen reader only content */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* Custom Accessibility Toolbar Styling - Zappy Style */

/* Main button icon - ONLY target the floating button, not menu elements */
#mic-access-tool-general-button {
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

/* AGGRESSIVELY hide all text in the button */
#mic-access-tool-general-button,
#mic-access-tool-general-button *:not(svg):not(path):not(circle):not(rect):not(polygon):not(ellipse):not(line):not(polyline):not(g) {
  font-size: 0 !important;
  color: transparent !important;
  text-indent: -9999px !important;
  line-height: 0 !important;
  letter-spacing: -999em !important;
  white-space: nowrap !important;
}

/* Hide text nodes specifically */

/* Hover state - keep text hidden */
#mic-access-tool-general-button:hover {
  background-color: rgba(33, 48, 63, 0.1) !important;
  background: rgba(33, 48, 63, 0.1) !important;
  box-shadow: 0 2px 8px rgba(33, 48, 63, 0.2) !important;
  font-size: 0 !important;
  color: transparent !important;
  text-indent: -9999px !important;
}

/* Target the SVG and make it the selected color */
#mic-access-tool-general-button svg {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  /* Convert green to selected color using dynamic CSS filter */
  filter: invert(50%) sepia(100%) saturate(500%) hue-rotate(0deg) brightness(100%) contrast(100%) !important;
}

/* Also directly target all SVG elements to be the selected color */
#mic-access-tool-general-button svg,
#mic-access-tool-general-button svg *,
#mic-access-tool-general-button svg path,
#mic-access-tool-general-button svg circle,
#mic-access-tool-general-button svg rect,
#mic-access-tool-general-button svg polygon,
#mic-access-tool-general-button svg ellipse,
#mic-access-tool-general-button svg line,
#mic-access-tool-general-button svg polyline,
#mic-access-tool-general-button svg g {
  fill: #21303F !important;
  stroke: #21303F !important;
  color: #21303F !important;
}

/* Target images if the icon is an img instead of SVG */
#mic-access-tool-general-button img,
#mic-access-tool-general-button i {
  width: 18px !important;
  height: 18px !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  /* Convert green to selected color using dynamic filter */
  filter: invert(50%) sepia(100%) saturate(500%) hue-rotate(0deg) brightness(100%) contrast(100%) !important;
}

/* Menu header with selected color */
#mic-access-tool-box .mic-access-tool-box-header,
.mic-access-tool-box-header,
div[id*="mic-access-tool-box"] header,
div[id*="mic-access-tool-box"] .header {
  background: #21303F !important;
  color: white !important;
}

/* Make header text white - title and close button */
#mic-access-tool-box .mic-access-tool-box-header *,
.mic-access-tool-box-header *,
div[id*="mic-access-tool-box"] header *,
div[id*="mic-access-tool-box"] .header * {
  color: white !important;
}

/* Close button text */
#mic-access-tool-box .mic-access-tool-box-header button,
#mic-access-tool-box .mic-access-tool-box-header a,
#mic-access-tool-box [class*="close"],
#mic-access-tool-box button[title*="close"],
#mic-access-tool-box button[title*="Close"] {
  color: white !important;
  background: transparent !important;
}

/* Active buttons and highlights in menu */
#mic-access-tool-box button.active,
#mic-access-tool-box button:hover,
div[id*="mic-access-tool-box"] button.active,
div[id*="mic-access-tool-box"] button:hover {
  border-color: #21303F !important;
  color: #21303F !important;
  background-color: rgba(33, 48, 63, 0.1) !important;
}

/* Reset button */
#mic-access-tool-box button[title*="reset"],
#mic-access-tool-box button[title*="Reset"],
#mic-access-tool-box [class*="reset"],
div[id*="mic-access-tool-box"] button[class*="reset"] {
  background: #21303F !important;
  color: white !important;
}

/* Reset button text and icon */
#mic-access-tool-box button[title*="reset"] *,
#mic-access-tool-box button[title*="Reset"] *,
#mic-access-tool-box [class*="reset"] *,
div[id*="mic-access-tool-box"] button[class*="reset"] * {
  color: white !important;
}

/* Accessibility widget - displayed by default on both mobile and desktop */
/* Position: opposite side from WhatsApp button (RTL sites → left, LTR sites → right) */
#mic-access-tool-general-button,
.mic-access-tool-general-button,
#mic-init-access-tool .mic-access-tool-general-button,
#mic-init-access-tool #mic-access-tool-general-button,
._access-icon {
  display: flex !important;
}
/* mobile-submenu-overflow-fix */
@media (max-width: 768px) {
  .navbar .sub-menu.mobile-expanded,
  .nav-menu .sub-menu.mobile-expanded,
  #navMenu .sub-menu.mobile-expanded,
  .zappy-products-dropdown .sub-menu.mobile-expanded,
  .zappy-products-dropdown > .sub-menu.mobile-expanded,
  .menu-item-has-children > .sub-menu.mobile-expanded {
    max-height: none !important;
    overflow-y: visible !important;
  }
  .menu-item-has-children,
  .zappy-products-dropdown,
  .nav-menu > li.menu-item-has-children {
    flex-shrink: 0 !important;
  }
  .sub-menu a,
  .navbar .sub-menu a,
  .navbar .sub-menu li a,
  nav.navbar .sub-menu li a,
  .zappy-products-dropdown .sub-menu a {
    white-space: normal !important;
  }
}


/* zappy-nav-child-indent */
.zappy-products-dropdown .zappy-nav-child > a,
.sub-menu .zappy-nav-child > a {
  padding-left: 28px !important;
  font-size: 0.9em !important;
  opacity: 0.85 !important;
}
[dir="rtl"] .zappy-products-dropdown .zappy-nav-child > a,
[dir="rtl"] .sub-menu .zappy-nav-child > a,
html[lang="he"] .zappy-products-dropdown .zappy-nav-child > a,
html[lang="he"] .sub-menu .zappy-nav-child > a,
html[lang="ar"] .zappy-products-dropdown .zappy-nav-child > a,
html[lang="ar"] .sub-menu .zappy-nav-child > a {
  padding-left: 0 !important;
  padding-right: 28px !important;
}
.zappy-products-dropdown .zappy-nav-parent > a,
.sub-menu .zappy-nav-parent > a {
  font-weight: 600 !important;
}
@media (max-width: 768px) {
  .nav-menu.active,
  #navMenu.active {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
}


/* ========== EMPTY SUBMENU HIDING (Auto-added by Zappy) ========== */
.sub-menu:empty,
.dropdown-menu:empty,
.sub-menu.zappy-empty-submenu,
.dropdown-menu.zappy-empty-submenu,
.nav-menu .sub-menu.zappy-empty-submenu,
nav .sub-menu.zappy-empty-submenu,
.navbar .sub-menu.zappy-empty-submenu,
#navMenu .sub-menu.zappy-empty-submenu,
#navMenu .dropdown-menu.zappy-empty-submenu {
  display: none !important;
}


/* ========== RTL MOBILE NAVBAR FIX (zappy-rtl-mobile-fix) ========== */
/* High-specificity rules to ensure RTL positioning wins over any [lang="en"] conflicts */
/* For RTL sites: hamburger on RIGHT, phone on LEFT (mirror of LTR layout) */
/* NOTE: Includes both html[dir="rtl"] AND [dir="rtl"] selectors as fallback */
/* because some pages may be wrapped with <html lang="en"> (missing dir="rtl" on html) */
/* but still have dir="rtl" on <body> or other ancestor elements */

@media (max-width: 768px) {
  /* RTL Mobile Toggle (hamburger) - positioned on RIGHT */
  /* Using multiple parent selectors for higher specificity */
  html[dir="rtl"] .navbar .mobile-toggle,
  html[dir="rtl"] nav .mobile-toggle,
  html[dir="rtl"] header .mobile-toggle,
  html[dir="rtl"] .nav-container .mobile-toggle,
  html[dir="rtl"] .mobile-toggle,
  [dir="rtl"] .navbar .mobile-toggle,
  [dir="rtl"] nav .mobile-toggle,
  [dir="rtl"] header .mobile-toggle,
  [dir="rtl"] .nav-container .mobile-toggle,
  [dir="rtl"] .mobile-toggle,
  html[lang="he"] .mobile-toggle,
  html[lang="ar"] .mobile-toggle {
    left: auto !important;
    right: 15px !important;
  }
  
  /* RTL Phone Button - positioned on LEFT */
  html[dir="rtl"] .navbar .phone-header-btn,
  html[dir="rtl"] nav .phone-header-btn,
  html[dir="rtl"] header .phone-header-btn,
  html[dir="rtl"] .nav-container .phone-header-btn,
  html[dir="rtl"] .phone-header-btn,
  [dir="rtl"] .navbar .phone-header-btn,
  [dir="rtl"] nav .phone-header-btn,
  [dir="rtl"] header .phone-header-btn,
  [dir="rtl"] .nav-container .phone-header-btn,
  [dir="rtl"] .phone-header-btn,
  html[lang="he"] .phone-header-btn,
  html[lang="ar"] .phone-header-btn {
    left: 15px !important;
    right: auto !important;
  }
  
  /* RTL Mobile Menu - slides from RIGHT */
  html[dir="rtl"] .navbar .nav-menu,
  html[dir="rtl"] nav .nav-menu,
  html[dir="rtl"] header .nav-menu,
  html[dir="rtl"] .nav-container .nav-menu,
  html[dir="rtl"] .nav-menu,
  [dir="rtl"] .navbar .nav-menu,
  [dir="rtl"] nav .nav-menu,
  [dir="rtl"] header .nav-menu,
  [dir="rtl"] .nav-container .nav-menu,
  [dir="rtl"] .nav-menu,
  html[lang="he"] .nav-menu,
  html[lang="ar"] .nav-menu {
    left: auto !important;
    right: 0 !important;
  }
  
  /* RTL Mobile Menu Links - text align right */
  html[dir="rtl"] .nav-menu a,
  html[dir="rtl"] .nav-menu li,
  [dir="rtl"] .nav-menu a,
  [dir="rtl"] .nav-menu li,
  html[lang="he"] .nav-menu a,
  html[lang="he"] .nav-menu li,
  html[lang="ar"] .nav-menu a,
  html[lang="ar"] .nav-menu li {
    text-align: right !important;
  }
}

/* ========== END RTL MOBILE NAVBAR FIX ========== */


/* ========== NAV CONTAINER MIN-HEIGHT FIX (nav-container-min-height-fix) ========== */
/* On mobile, all nav children are position:absolute/fixed (out of flow), */
/* so height:auto collapses to 0px. min-height ensures the navbar is visible. */

/* DEFENSIVE: Ensure CTA container is visible on desktop */
/* This guards against CSS minifiers (CleanCSS level 2) that may pull */
/* the mobile display:none rule out of its @media query */
@media (min-width: 769px) {
  .nav-cta-container,
  .nav-cta-container:not(:has(.lang-switcher)) {
    display: flex !important;
    align-items: center !important;
  }
}

@media (max-width: 768px) {
  .nav-container {
    min-height: 70px !important;
    position: relative !important;
  }
  /* Reset nav-cta-container desktop styling (box-shadow/padding) on mobile */
  .nav-cta-container {
    box-shadow: none !important;
    padding: 0 !important;
  }
  /* Hide nav-cta-container when no lang-switcher (only CTA btn, which is hidden on mobile) */
  .nav-cta-container:not(:has(.lang-switcher)) {
    display: none !important;
  }
}

/* ========== END NAV CONTAINER MIN-HEIGHT FIX ========== */


/* ========== HERO IMAGE GRADIENT FIX (hero-image-gradient-fix) ========== */
/* Prevent hero image fade gradient from bleeding over headline text below. */
/* The .image-fade-gradient has bottom: -30px which extends below its parent; */
/* on mobile stacked layout this overlaps the h1 text. */

@media (max-width: 768px) {
  .hero-image-column {
    overflow: hidden !important;
  }
  .image-fade-gradient {
    bottom: 0 !important;
  }
}

/* ========== END HERO IMAGE GRADIENT FIX ========== */


/* ========== FULLSCREEN HERO OVERFLOW FIX (fullscreen-hero-overflow-fix) ========== */
@media (max-width: 768px) {

  section[data-hero-type*="fullscreen"] {
    height: auto !important;
    min-height: 100svh !important;
    padding: 0 0 90px 0 !important;
  }
  section[data-hero-type*="fullscreen"] > [class*="-container"]:not([class*="bg"]):not([class*="scrim"]):not([class*="divider"]),
  section[data-hero-type*="fullscreen"] > .container {
    padding-bottom: 100px !important;
    min-height: auto !important;
  }
}
/* ========== END FULLSCREEN HERO OVERFLOW FIX ========== */


/* ========== PRODUCT ICON STYLES (product-icon-styles) ========== */
.product-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; width: 100%; }
.product-title-row h1 { flex: 1; min-width: 0; }
.product-icon-actions { display: flex; gap: 8px; flex-shrink: 0; padding-top: 6px; }
.icon-btn { width: 36px; height: 36px; border: none; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: color 0.2s; color: currentColor; padding: 0; }
.icon-btn:hover { color: var(--primary-color, #ff0083); }
.icon-btn.active { color: #e74c3c; }
.icon-btn.active .heart-outline { display: none !important; }
.icon-btn.active .heart-filled { display: block !important; }
.profile-section, .addresses-section, .favorites-section, .orders-section { border: 1px solid var(--border-color, rgba(128,128,128,0.2)); border-radius: 12px; padding: 24px; margin-bottom: 24px; background: transparent; }
.favorites-section h2 { font-size: 1.25rem; color: var(--text-color, #1f2937); margin-bottom: 20px; }
.favorites-loading { text-align: center; padding: 20px; color: var(--text-secondary, #6b7280); }
.favorites-empty { text-align: center; padding: 32px; color: var(--text-secondary, #6b7280); }
.favorites-empty p { margin-bottom: 16px; }
.favorites-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.favorite-card { background: transparent; border: 1px solid var(--border-color, rgba(128,128,128,0.2)); border-radius: 10px; overflow: hidden; transition: box-shadow 0.2s; position: relative; }
.favorite-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
.favorite-card-img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.favorite-card-body { padding: 12px; }
.favorite-card-body h4 { font-size: 0.875rem; font-weight: 500; color: var(--text-color, #1f2937); margin: 0 0 6px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.favorite-price { font-weight: 600; color: var(--primary-color, #ff0083); font-size: 0.9rem; }
.favorite-remove-btn { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; border: none; background: rgba(255,255,255,0.9); color: #dc2626; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: all 0.2s; box-shadow: 0 1px 4px rgba(0,0,0,0.1); }
.favorite-remove-btn:hover { background: #dc2626; color: white; }
@media (max-width: 480px) { .favorites-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
/* ========== END PRODUCT ICON STYLES ========== */

/* ========== ORPHANED_ZOOM_IMG_FIX ========== */
@media (max-width: 768px) {
  .zappy-preserve-css-grid > img[data-zappy-zoom],
  [class*="-grid"] > img[data-zappy-zoom] {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 300px !important;
    object-fit: cover !important;
    left: auto !important;
    top: auto !important;
  }
}
/* ========== END ORPHANED_ZOOM_IMG_FIX ========== */


/* ========== GRID RESPONSIVE FIX (zappy-grid-mobile-fix) ========== */
/* Ensures grids with explicit columns use CSS variable and are responsive on mobile */

/* DESKTOP: Explicit column grids use CSS variable for grid-template-columns */
/* The deployment process ensures --zappy-grid-cols is always set in inline styles */
[data-zappy-explicit-columns="true"] {
  display: grid !important;
  grid-template-columns: var(--zappy-grid-cols, repeat(2, minmax(0, 1fr))) !important;
}
/* Carousel mode overrides grid display to allow flex-based track layout */
.zappy-carousel-mode,
[data-zappy-display-mode="carousel"] {
  display: block !important;
}

/* ZOOM WRAPPER: Ensure overflow:hidden and position:relative for crop zoom effect */
/* The wrapper clips the oversized image to create the zoom/crop effect */
/* position:relative is needed so absolutely positioned images stay within the wrapper */
[data-zappy-zoom-wrapper="true"] {
  overflow: hidden !important;
  position: relative !important;
}

/* Prevent inserted elements from exceeding their container width.
   max-width uses no !important so inline styles can set a specific constraint. */
.zappy-inserted-element {
  max-width: 100%;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  /* Auto-grid (AI-generated) grids - force single column on mobile */
  .zappy-preserve-css-grid[data-zappy-auto-grid="true"],
  [data-zappy-auto-grid="true"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  
  /* Grid children: override min-width:auto so children with fixed-width
     content (e.g. zoom wrappers with width:448px!important) can shrink
     to fit the 1fr column instead of overflowing the grid container. */
  .zappy-preserve-css-grid[data-zappy-auto-grid="true"] > *,
  [data-zappy-auto-grid="true"] > *,
  [data-zappy-explicit-columns="true"] > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  
  /* Featured grids - force single column on mobile */
  .featured-grid {
    grid-template-columns: 1fr !important;
  }
  
  /* Neutralize centering transforms on mobile */
  [data-zappy-center-transform] {
    transform: none !important;
  }
  
  /* Media-only grid items - constrain height on mobile */
  .zappy-preserve-css-grid[data-zappy-auto-grid="true"] > .zappy-grid-item-media-only,
  [data-zappy-auto-grid="true"] > .zappy-grid-item-media-only {
    height: auto !important;
    max-height: 300px !important;
  }
  
  .zappy-preserve-css-grid[data-zappy-auto-grid="true"] > .zappy-grid-item-media-only img,
  [data-zappy-auto-grid="true"] > .zappy-grid-item-media-only img {
    height: auto !important;
    max-height: 300px !important;
  }
  
  /* Full-width mode zoom wrappers - ensure image is visible (not collapsed) */
  [data-zappy-zoom-wrapper-width-mode="full"] img {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 300px !important;
    left: auto !important;
    top: auto !important;
    object-fit: cover !important;
  }
  
  /* MOBILE: Explicit column grids - force single column on mobile */
  [data-zappy-explicit-columns="true"] {
    grid-template-columns: 1fr !important;
  }
  
  /* Inline grid with fixed pixel columns - make responsive */
  .zappy-inline-grid-active.zappy-preserve-css-grid {
    grid-template-columns: 1fr !important;
  }
  
  /* AI-generated section grids with common naming patterns */
  /* These often have fixed pixel column widths that don't adapt to mobile */
  [class*="-grid"]:not([data-zappy-auto-grid]):not(.zappy-preserve-css-grid):not([data-zappy-explicit-columns="true"]) {
    grid-template-columns: 1fr !important;
  }
  
  /* Reset any column/row spanning items on mobile - they cause overflow */
  /* Gallery grids often have -large items that span multiple columns */
  [class*="-grid"] > [class*="-large"],
  [class*="-grid"] > [class*="-item-large"],
  [class*="-grid"] > [style*="grid-column: span"],
  [class*="-grid"] > [style*="grid-row: span"] {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }
  
  /* Common AI-generated visual/frame containers that may overflow */
  [class*="-visual"],
  [class*="-frame"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  
  /* CRITICAL: Constrain zoom wrappers on mobile without breaking saved crop geometry */
  [data-zappy-zoom-wrapper="true"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    position: relative !important;
  }

  /* The zoom wrapper's image is position:absolute (so it contributes 0 to the
     wrapper's intrinsic content width). Inserted-element parents that carry a
     desktop pixel height can either collapse to 0px wide or preserve a stale
     desktop height after their child wrapper shrinks on mobile. Force them
     to fill the parent container and let the wrapper's aspect-ratio determine
     the real height, eliminating empty space before following text. */
  .zappy-inserted-element:has(> [data-zappy-zoom-wrapper="true"]) {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .zappy-inserted-element:has(> [data-zappy-zoom-wrapper="true"]) > [data-zappy-zoom-wrapper="true"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* Reset zoom wrapper images on mobile to responsive display.
     Images with explicit mobile crop overrides are excluded - the JS runtime
     applies their crop/zoom after page load. */
  [data-zappy-zoom-wrapper="true"]:not([data-zappy-zoom-wrapper-width-mode="full"]) img:not([data-zappy-mobile-object-position]):not([data-zappy-mobile-zoom]) {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    max-height: 300px !important;
    max-width: 100% !important;
    object-fit: cover !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
  }
  
  /* Carousel: ensure block display on mobile */
  .zappy-carousel-mode,
  [data-zappy-display-mode="carousel"] {
    display: block !important;
  }
  /* JS-initialized carousel: constrain wrapper on mobile */
  .zappy-carousel-js-init .zappy-carousel-container-wrapper {
    max-width: calc(100% - 20px) !important;
  }
  .zappy-carousel-js-init .zappy-carousel-item {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  /* CSS-only fallback: if JS didn't initialize, stack items vertically */
  .zappy-carousel-mode:not(.zappy-carousel-js-init) .zappy-carousel-container-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
  .zappy-carousel-mode:not(.zappy-carousel-js-init) .zappy-carousel-track {
    flex-direction: column !important;
    transform: none !important;
    gap: 1.5rem !important;
  }
  .zappy-carousel-mode:not(.zappy-carousel-js-init) .zappy-carousel-item {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
  }
  .zappy-carousel-mode:not(.zappy-carousel-js-init) > :not(style):not(script):not(.zappy-carousel-btn):not(.zappy-carousel-dots):not(.zappy-carousel-container-wrapper) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: none !important;
  }
  .zappy-carousel-mode:not(.zappy-carousel-js-init) .zappy-carousel-btn,
  .zappy-carousel-mode:not(.zappy-carousel-js-init) .zappy-carousel-dots {
    display: none !important;
  }
  /* Carousel items: fix zoom wrapper padding creating excess spacing */
  .zappy-carousel-item [data-zappy-zoom-wrapper="true"],
  .zappy-carousel-mode > div [data-zappy-zoom-wrapper="true"] {
    padding-bottom: 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }
  /* Carousel buttons: position inside the card area on mobile */
  .zappy-carousel-js-init > .zappy-carousel-btn {
    left: 4px !important;
    right: auto !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
    background: rgba(255,255,255,0.9) !important;
  }
  .zappy-carousel-js-init > .zappy-carousel-btn.zappy-carousel-right {
    left: auto !important;
    right: 4px !important;
  }
  
  /* ========== MAIN PADDING FIX ========== */
  /* Fix double-padding from old V2 mobile CSS that applied padding to both main and sections */
  /* Exclude ecommerce-page which needs its own horizontal padding for proper mobile layout */
  main:not(.ecommerce-page) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Hero sections need flex-column on mobile for proper stacking */
  section[class*="hero"],
  .home-Hero-section {
    flex-direction: column !important;
  }
  
  /* Hero sections need extra padding-top to clear the sticky navbar */
  /* The navbar is ~70px tall, so hero needs at least 100px padding-top */
  /* IMPORTANT: Use section tag to avoid matching child elements like buttons that contain "-hero-section" in their BEM class */
  section[class*="-hero-section"]:first-of-type,
  main > section:first-child {
    padding-top: 100px !important;
  }

  /* Split hero (.hero-sbs-wrap) already applies ~100px top padding for the navbar.
     Without this override, the global rule above stacks and mobile shows ~200px
     of dead air above the hero image. */
  main > section:first-child:has(.hero-sbs-wrap),
  section[class*="-hero-section"]:first-of-type:has(.hero-sbs-wrap) {
    padding-top: 0 !important;
  }

  /* Zoom-crop hero portraits: anchor with inset:0 so RTL/LTR matches and cover
     cropping stays centered (physical left:0 absolute imgs can mis-read in RTL). */
  .hero-sbs-image-frame [data-zappy-zoom-wrapper="true"] img {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
  
  /* ========== HERO CONTAINER FULL-WIDTH (FULLSCREEN HEROES ONLY) ========== */
  /* Only strip container padding/width for heroes with actual background images.
     Text-only and side-by-side hero sections on inner pages need normal padding. */
  .hero-container,
  /* V2 generation-time fullscreen heroes */
  section[data-hero-type="fullscreen-scrim"] > .container,
  section[data-hero-type="fullscreen-card"] > .container,
  /* Editor-applied background images on hero sections */
  section[class*="hero"][data-zappy-bg-type="image"] > .container,
  section[class*="hero"][data-zappy-bg-type="video"] > .container,
  /* V1 fallback: hero sections with known bg structures */
  section[class*="hero"]:has(.hero-bg-container) > .container,
  section[class*="hero"]:has([data-hero-bg]) > .container {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* ========== HERO WIDTH FIX ========== */
  /* Remove nested horizontal padding for fullscreen-type heroes only */
  .home-Hero-section .hero-container,
  .home-Hero-section .hero-content,
  .home-Hero-section .hero-metrics,
  .home-Hero-section .hero-image-column,
  .home-Hero-section .hero-image-frame,
  .home-Hero-section .container,
  .home-Hero-section .wrapper,
  /* V2 fullscreen heroes */
  section[data-hero-type="fullscreen-scrim"] .hero-container,
  section[data-hero-type="fullscreen-scrim"] .hero-content,
  section[data-hero-type="fullscreen-scrim"] .container,
  section[data-hero-type="fullscreen-card"] .hero-container,
  section[data-hero-type="fullscreen-card"] .hero-content,
  section[data-hero-type="fullscreen-card"] .container,
  /* Editor-applied background images on hero sections */
  section[class*="hero"][data-zappy-bg-type="image"] .hero-container,
  section[class*="hero"][data-zappy-bg-type="image"] .hero-content,
  section[class*="hero"][data-zappy-bg-type="image"] .container,
  section[class*="hero"][data-zappy-bg-type="video"] .hero-container,
  section[class*="hero"][data-zappy-bg-type="video"] .hero-content,
  section[class*="hero"][data-zappy-bg-type="video"] .container,
  /* V1 fallback: hero sections with known bg structures */
  section[class*="hero"]:has(.hero-bg-container) .hero-container,
  section[class*="hero"]:has(.hero-bg-container) .hero-content,
  section[class*="hero"]:has(.hero-bg-container) .container,
  section[class*="hero"]:has([data-hero-bg]) .hero-container,
  section[class*="hero"]:has([data-hero-bg]) .hero-content,
  section[class*="hero"]:has([data-hero-bg]) .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
  }
  
  /* ========== HERO VERTICAL SPACING FIX ========== */
  .home-Hero-section .hero-content,
  .home-Hero-section .hero-container,
  .home-Hero-section .hero-image-column {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  
  .hero-cta-row {
    padding: 8px 0 !important;
    margin: 8px 0 12px !important;
  }
  
  .hero-content {
    gap: 12px !important;
  }
  
  .hero-metrics {
    gap: 10px !important;
  }
  
  .metric-card {
    padding: 12px !important;
  }
  
  .hero-container {
    gap: 16px !important;
  }

  /* ========== GRID OVERFLOW FIX ========== */
  /* CSS Grid items default to min-width:auto, preventing them from shrinking
     below their content's intrinsic size. Fixed-width zoom wrappers or large
     images inside grid items can force the column wider than the viewport. */
  .hero-container > * {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  /* Zappy-inserted image elements with fixed-width zoom wrappers must
     respect the parent container width on mobile */
  .zappy-inserted-element,
  [data-zappy-zoom-wrapper] {
    max-width: 100% !important;
  }

  /* ========== FULLSCREEN HERO OVERFLOW FIX ========== */

  section[data-hero-type*="fullscreen"] {
    height: auto !important;
    min-height: 100svh !important;
    padding: 0 0 90px 0 !important;
  }
  section[data-hero-type*="fullscreen"] > [class*="-container"]:not([class*="bg"]):not([class*="scrim"]):not([class*="divider"]),
  section[data-hero-type*="fullscreen"] > .container {
    padding-bottom: 100px !important;
    min-height: auto !important;
  }
}

/* ========== HERO SECTION WIDTH CONSTRAINT (ALL VIEWPORTS) ========== */
/* Prevent hero sections from exceeding viewport width.                */
/* Root cause: AI-generated CSS may use width:100vw or add horizontal  */
/* padding to the section, causing it to overflow the viewport.        */
/* NOTE: Do NOT add overflow:hidden here — it clips SVG bottom dividers */
/* that need overflow:visible to extend into the next section.          */
section[class*="hero" i],
section[class*="Hero"],
section[data-hero-type] {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ========== SVG DIVIDER OVERLAY FIX ========== */
/* Many AI sections place .section-divider absolutely at the bottom of a section,
   which can overlap/cut off the last row of content. The safest CSS-only fix
   is to prevent overlay by forcing the divider into normal flow. */
.section-divider {
  position: relative !important;
  bottom: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: auto !important;
  margin-top: 16px !important;
}

.section-divider svg {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

/* Exclude small icon SVGs from full-width sizing - these are decorative icons, not wave dividers */
.section-divider svg.divider-icon,
.section-divider svg[width="32"],
.section-divider svg[width="24"],
.section-divider svg[width="48"],
.section-divider svg[viewBox="0 0 32 32"],
.section-divider svg[viewBox="0 0 24 24"],
.section-divider svg[viewBox="0 0 48 48"] {
  width: auto !important;
  height: auto !important;
  max-width: 64px !important;
  max-height: 64px !important;
}

/* ========== END SVG DIVIDER OVERLAY FIX ========== */

/* ========== HORIZONTAL-PAIR GRID MEDIA FIX ========== */
/* Ensures media in horizontal-pair grids fills columns correctly */

/* Image/video media cells: stretch to fill the grid cell */
.zappy-horizontal-grid[data-zappy-grid-kind="horizontal-pair"] [data-zappy-media-cell="true"]:not([data-element-type="icon"]) {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  min-height: 0 !important;
}

/* Icon media cells: use flex for centering but allow alignment to be controlled by the editor */
.zappy-horizontal-grid[data-zappy-grid-kind="horizontal-pair"] [data-zappy-media-cell="true"][data-element-type="icon"] {
  position: relative !important;
  display: flex !important;
  min-height: 0 !important;
}

/* Images/videos: preserve aspect ratio while filling column width */
.zappy-horizontal-grid[data-zappy-grid-kind="horizontal-pair"] [data-zappy-media-cell="true"] > img,
.zappy-horizontal-grid[data-zappy-grid-kind="horizontal-pair"] [data-zappy-media-cell="true"] > video {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  flex: 0 0 auto !important;
  min-height: 0 !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Icons/SVG: respect their explicit pixel size from the editor */
/* Do NOT force width/height: 100% - icons should use their inline size */
.zappy-horizontal-grid[data-zappy-grid-kind="horizontal-pair"] [data-zappy-media-cell="true"] > svg,
.zappy-horizontal-grid[data-zappy-grid-kind="horizontal-pair"] [data-zappy-media-cell="true"] > .iconify,
.zappy-horizontal-grid[data-zappy-grid-kind="horizontal-pair"] [data-zappy-media-cell="true"] > .iconify svg {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  display: inline-block !important;
}

/* Non-media grid items (buttons, text, etc.) should NOT stretch */
.zappy-horizontal-grid[data-zappy-grid-kind="horizontal-pair"] > .zappy-inserted-element:not([data-zappy-media-cell]) {
  align-self: start !important;
  height: auto !important;
  width: auto !important;
  max-width: 100% !important;
}

/* Buttons inside non-media grid items should NOT stretch horizontally */
.zappy-horizontal-grid[data-zappy-grid-kind="horizontal-pair"] > .zappy-inserted-element:not([data-zappy-media-cell]) .btn,
.zappy-horizontal-grid[data-zappy-grid-kind="horizontal-pair"] > .zappy-inserted-element:not([data-zappy-media-cell]) [data-element-type="button"] {
  width: auto !important;
  flex: 0 0 auto !important;
}

/* ========== END HORIZONTAL-PAIR GRID MEDIA FIX ========== */

/* ========== END GRID RESPONSIVE FIX ========== */


/* ZAPPY_NAVBAR_CTA_ALIGNMENT_FIX */
.nav-cta-container .zappy-search-container,
.zappy-search-container { align-self: center; }
.nav-cta-container p { margin: 0 !important; }


/* ZAPPY_SECTION_BG_TYPE_FIX */
[data-zappy-bg-type="color"] { background-image: none !important; background-color: var(--zappy-bg-color, transparent) !important; }
[data-zappy-bg-type="image"] { background-image: linear-gradient(var(--zappy-bg-overlay, rgba(0,0,0,0)), var(--zappy-bg-overlay, rgba(0,0,0,0))), var(--zappy-bg-image, none) !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; }
[data-zappy-bg-type="video"] { background-image: none !important; }


/* ZAPPY_IOS_NAVBAR_GAP_FIX */
/* iOS Safari does not clip overflow-x:hidden on <html>, so a page with any
   horizontal overflow ends up with visual viewport > layout viewport.
   position:fixed children anchored with right:0 (the mobile dropdown menu)
   then pin to the visual viewport right edge — off-screen past the navbar.
   Companion JS (ZAPPY_IOS_VIEWPORT_GAP_FIX in script.js) measures the gap
   and exposes it as --ios-viewport-gap; this rule uses it to shift the
   menu inward so it lands on the real layout-viewport right edge. On every
   other browser the gap is 0 and the rule is a no-op.

   The selector list below intentionally mirrors the RTL selectors used
   elsewhere in the stylesheet — we need equal-or-higher specificity to
   win the cascade (!important alone can't beat higher specificity). */
@media (max-width: 768px) {
  .navbar,
  nav.navbar {
    width: auto !important;
    max-width: none !important;
    left: 0 !important;
    right: 0 !important;
    overflow-x: clip !important;
    box-sizing: border-box !important;
  }
  #navMenu,
  .nav-menu,
  html[dir="rtl"] .nav-menu,
  html[dir="rtl"] .navbar .nav-menu,
  html[dir="rtl"] nav .nav-menu,
  html[dir="rtl"] header .nav-menu,
  html[dir="rtl"] .nav-container .nav-menu,
  [dir="rtl"] .navbar .nav-menu,
  [dir="rtl"] nav .nav-menu,
  [dir="rtl"] header .nav-menu,
  [dir="rtl"] .nav-container .nav-menu,
  [dir="rtl"] .nav-menu,
  html[lang="he"] .nav-menu,
  html[lang="ar"] .nav-menu {
    /* Force position:fixed so the --ios-viewport-gap shift is measured
       against the (visual) viewport, not whatever container the menu may
       have been reparented into by earlier v1/v2 patches.
       --zappy-navbar-bottom is set by the runtime JS companion and
       defaults to 70px — this lets us override the v2 `top: 100%` (which
       with position:fixed would resolve to the full viewport height and
       push the menu off-screen). */
    position: fixed !important;
    top: var(--zappy-navbar-bottom, 70px) !important;
    right: var(--ios-viewport-gap, 0px) !important;
  }
}


/* ZAPPY_PRODUCTS_DROPDOWN_LTR_INDENT */
/* LTR mirror of the [dir="rtl"] indentation block. Equal-or-higher
   specificity than the shorthand .navbar .sub-menu li a override so the
   nested sub-category items keep their visual indent on every LTR page —
   English, Spanish, French, Russian, German, etc. The selectors target
   dir="ltr" (the source of truth set on <html> by per-language page
   generation), NOT a specific language code, so the rule stays generic
   across every site / language combination. */
[dir="ltr"] .sub-menu .zappy-nav-child > a,
[dir="ltr"] .zappy-products-dropdown .zappy-nav-child > a,
html[dir="ltr"] .sub-menu .zappy-nav-child > a,
html[dir="ltr"] .zappy-products-dropdown .zappy-nav-child > a {
  padding-left: 28px !important;
  padding-right: 16px !important;
  font-size: 0.9em !important;
  opacity: 0.85 !important;
}
@media (max-width: 768px) {
  [dir="ltr"] .navbar .zappy-products-dropdown > .sub-menu .zappy-nav-child > a,
  [dir="ltr"] nav.navbar .zappy-products-dropdown > .sub-menu .zappy-nav-child > a,
  html[dir="ltr"] .navbar .zappy-products-dropdown > .sub-menu .zappy-nav-child > a,
  html[dir="ltr"] nav.navbar .zappy-products-dropdown > .sub-menu .zappy-nav-child > a {
    padding-left: 36px !important;
    padding-right: 16px !important;
  }
}


/* ZAPPY_MOBILE_NAV_MENU_ITEM_PADDING */
@media (max-width: 768px) {
  .navbar .nav-menu.active > li > a,
  nav.navbar .nav-menu.active > li > a,
  #navMenu.active > li > a,
  .nav-menu.open > li > a {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 16px !important;
    height: auto !important;
    min-height: 44px !important;
    line-height: 1.4 !important;
  }
  .navbar .nav-menu.active > li,
  nav.navbar .nav-menu.active > li,
  #navMenu.active > li,
  .nav-menu.open > li {
    margin: 4px 0 !important;
  }
  .navbar .nav-menu.active > li.zappy-products-dropdown > a,
  nav.navbar .nav-menu.active > li.zappy-products-dropdown > a,
  #navMenu.active > li.zappy-products-dropdown > a,
  .nav-menu.open > li.zappy-products-dropdown > a {
    padding-right: 56px !important;
  }
  html[dir="rtl"] .navbar .nav-menu.active > li.zappy-products-dropdown > a,
  html[dir="rtl"] nav.navbar .nav-menu.active > li.zappy-products-dropdown > a,
  html[dir="rtl"] #navMenu.active > li.zappy-products-dropdown > a,
  html[dir="rtl"] .nav-menu.open > li.zappy-products-dropdown > a {
    padding-right: 16px !important;
    padding-left: 56px !important;
  }
}

html[dir="rtl"] #mic-access-tool-general-button, html[dir="rtl"] .mic-access-tool-general-button,
html[dir="rtl"] #mic-init-access-tool .mic-access-tool-general-button,
html[dir="rtl"] #mic-init-access-tool #mic-access-tool-general-button,
html[dir="rtl"] ._access-icon { left: 20px !important; right: auto !important; }
html[dir="ltr"] #mic-access-tool-general-button, html[dir="ltr"] .mic-access-tool-general-button,
html[dir="ltr"] #mic-init-access-tool .mic-access-tool-general-button,
html[dir="ltr"] #mic-init-access-tool #mic-access-tool-general-button,
html[dir="ltr"] ._access-icon,
html:not([dir]) #mic-access-tool-general-button, html:not([dir]) .mic-access-tool-general-button,
html:not([dir]) #mic-init-access-tool .mic-access-tool-general-button,
html:not([dir]) #mic-init-access-tool #mic-access-tool-general-button,
html:not([dir]) ._access-icon { right: 20px !important; left: auto !important; }

/* LTR: keep image on left for solution-reverse sections */
html[dir="ltr"] .solution-item.solution-reverse .solution-image { order: -1 !important; }
html[dir="ltr"] .solution-item.solution-reverse .solution-content { order: 1 !important; }
html[dir="ltr"] .service-detail.service-reverse .service-detail-image { order: -1 !important; }
html[dir="ltr"] .service-detail.service-reverse .service-detail-content { order: 1 !important; }

/* ENSURE: navbar-text-contrast */
:root {
  --nav-bg: #21303F !important;
  --nav-text: var(--text-light, #ffffff) !important;
}


/* ZAPPY_MOBILE_NAV_ICON_ALIGNMENT_FIX */
/* ZAPPY_MOBILE_NAV_ICON_ALIGNMENT_FIX_V3 */
/* ZAPPY_MOBILE_NAV_ICON_ALIGNMENT_FIX_V4 */
/* The mobile hamburger / phone buttons are absolutely positioned. Keep the
   navbar itself as a non-collapsing containing block so auto-margin centering
   stays aligned even when generated mobile CSS moves every nav child out of flow. */
@media (max-width: 768px) {
  .navbar,
  nav.navbar {
    min-height: 70px !important;
  }

  /* E-commerce mobile navbar icon-group alignment.
     The icon couples (search after the hamburger; login+cart at the end edge)
     are absolutely positioned with inset-inline offsets — inset-inline-start:52px
     to clear the 36px hamburger that sits at left:12px on the .navbar, and
     inset-inline-end:12px to hug the end edge. Those offsets are authored in the
     NAVBAR's full-width coordinate space (the hamburger uses the same one). But
     the offsets are resolved against the nearest positioned ancestor, and the
     generated CSS makes .nav-container position:relative. When .nav-container is
     ALSO inset by the navbar's horizontal padding (max-width / padding from the
     LLM-authored navbar), the groups resolve to that inset box instead of the
     full-width navbar: the search drifts ~20px away from the hamburger and the
     cart leaves a fat asymmetric gap before the screen edge. Dropping
     .nav-container out of the containing-block chain on mobile makes both couples
     resolve to .navbar (always full-bleed) so they line up tightly with the
     hamburger and sit symmetrically against both edges regardless of any
     navbar/container padding. Scoped via :has() to navbars that actually carry
     the e-commerce icon couples so non-ecommerce navs are untouched. */
  .navbar:has(.nav-ecommerce-icons) .nav-container,
  nav.navbar:has(.nav-ecommerce-icons) .nav-container,
  header:has(.nav-ecommerce-icons) .nav-container {
    position: static !important;
  }

  /* Some generated RTL nav CSS sets both left:50% and right:50% on the
     absolute .nav-brand. That collapses it to 0px wide, so the logo flows
     left from the center instead of being centered on it. */
  .navbar .nav-brand,
  nav.navbar .nav-brand,
  html[dir="rtl"] .navbar .nav-brand,
  html[dir="rtl"] nav.navbar .nav-brand,
  html[lang="he"] .navbar .nav-brand,
  html[lang="he"] nav.navbar .nav-brand,
  html[lang="ar"] .navbar .nav-brand,
  html[lang="ar"] nav.navbar .nav-brand {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: calc(100% - 168px) !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    text-align: center !important;
    justify-content: center !important;
  }

  .navbar .nav-brand .logo-link,
  nav.navbar .nav-brand .logo-link,
  .navbar .nav-brand a,
  nav.navbar .nav-brand a {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .navbar > .mobile-toggle,
  nav.navbar > .mobile-toggle,
  .navbar .mobile-toggle,
  nav.navbar .mobile-toggle,
  #mobileToggle,
  .navbar > .phone-header-btn,
  nav.navbar > .phone-header-btn,
  .navbar .phone-header-btn,
  nav.navbar .phone-header-btn {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    margin-top: auto !important;
    margin-bottom: auto !important;
    align-self: center !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 0 !important;
  }

  .navbar > .mobile-toggle,
  nav.navbar > .mobile-toggle,
  .navbar .mobile-toggle,
  nav.navbar .mobile-toggle,
  #mobileToggle {
    display: flex !important;
  }

  html:not([data-zappy-site-type="ecommerce"]) .navbar > .phone-header-btn,
  html:not([data-zappy-site-type="ecommerce"]) nav.navbar > .phone-header-btn,
  html:not([data-zappy-site-type="ecommerce"]) .navbar .phone-header-btn,
  html:not([data-zappy-site-type="ecommerce"]) nav.navbar .phone-header-btn {
    display: flex !important;
  }

  html[data-zappy-site-type="ecommerce"] .phone-header-btn,
  body[data-zappy-site-type="ecommerce"] .phone-header-btn,
  html[data-zappy-site-type="ecommerce"] header .phone-header-btn,
  html[data-zappy-site-type="ecommerce"] nav .phone-header-btn {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
}


/* ZAPPY_PUBLISHED_MOBILE_MEDIA_FIT_FIX */
@media (max-width: 768px) {
  /* Published sites can carry stale editor-generated transform:scale(...) rules.
     Fullscreen hero backgrounds must keep filling their absolute wrapper; mobile
     crop runtime can still override this with inline styles when needed. */
  html body main section[class*="hero"] [data-hero-bg],
  html body main section[class*="hero"] [data-hero-background="true"],
  html body main section[data-hero-type*="fullscreen"] img[data-hero-bg],
  html body main section[data-hero-type*="fullscreen"] img[data-hero-background="true"] {
    transform: none !important;
    transform-origin: center center !important;
    max-width: none !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Filter chip rows should wrap on narrow RTL screens instead of hiding most
     options off-canvas behind a horizontal scroller. */
  html body main #showcaseAdvancedFilter .adv-filter-group > .adv-filter-scroll-row,
  html body main .index-showcase-section #showcaseAdvancedFilter .adv-filter-group > .adv-filter-scroll-row,
  html body main .index-showcase-section .adv-filter-group > .adv-filter-scroll-row {
    display: flex !important;
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding-inline: 0 !important;
    margin-inline: 0 !important;
    height: auto !important;
    cursor: default !important;
  }
}

/* Spec table BiDi fix: isolate cells so mixed LTR/RTL content renders correctly */
.specs-table th, .specs-table td { unicode-bidi: plaintext !important; }